#26126: Tag menu item and Tag picker (1st PR)

src/CONST.ts

@@ -240,6 +240,7 @@ const CONST = {
         TASKS: 'tasks',
         THREADS: 'threads',
         CUSTOM_STATUS: 'customStatus',
+        NEW_DOT_TAGS: 'newDotTags',
     },
     BUTTON_STATES: {
         DEFAULT: 'default',

src/ONYXKEYS.ts

@@ -240,6 +240,8 @@ const ONYXKEYS = {
         POLICY_MEMBERS: 'policyMembers_',
         POLICY_CATEGORIES: 'policyCategories_',
         POLICY_RECENTLY_USED_CATEGORIES: 'policyRecentlyUsedCategories_',
+        POLICY_TAGS: 'policyTags_',
+        POLICY_RECENTLY_USED_TAGS: 'policyRecentlyUsedTags_',
         WORKSPACE_INVITE_MEMBERS_DRAFT: 'workspaceInviteMembersDraft_',
         REPORT: 'report_',
         REPORT_ACTIONS: 'reportActions_',
@@ -376,6 +378,7 @@ type OnyxValues = {
     [ONYXKEYS.COLLECTION.DOWNLOAD]: OnyxTypes.Download;
     [ONYXKEYS.COLLECTION.POLICY]: OnyxTypes.Policy;
     [ONYXKEYS.COLLECTION.POLICY_CATEGORIES]: unknown;
+    [ONYXKEYS.COLLECTION.POLICY_TAGS]: OnyxTypes.PolicyTag;
     [ONYXKEYS.COLLECTION.POLICY_MEMBERS]: OnyxTypes.PolicyMember;
     [ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES]: OnyxTypes.RecentlyUsedCategories;
     [ONYXKEYS.COLLECTION.DEPRECATED_POLICY_MEMBER_LIST]: OnyxTypes.PolicyMember;
@@ -390,6 +393,7 @@ type OnyxValues = {
     [ONYXKEYS.COLLECTION.REPORT_USER_IS_TYPING]: boolean;
     [ONYXKEYS.COLLECTION.SECURITY_GROUP]: OnyxTypes.SecurityGroup;
     [ONYXKEYS.COLLECTION.TRANSACTION]: OnyxTypes.Transaction;
+    [ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS]: OnyxTypes.RecentlyUsedTags;
     [ONYXKEYS.COLLECTION.SELECTED_TAB]: string;
 
     // Forms

src/ROUTES.ts

@@ -98,6 +98,7 @@ export default {
     MONEY_REQUEST_CURRENCY: ':iouType/new/currency/:reportID?',
     MONEY_REQUEST_DESCRIPTION: ':iouType/new/description/:reportID?',
     MONEY_REQUEST_CATEGORY: ':iouType/new/category/:reportID?',
+    MONEY_REQUEST_TAG: ':iouType/new/tag/:reportID?',
     MONEY_REQUEST_MERCHANT: ':iouType/new/merchant/:reportID?',
     MONEY_REQUEST_MANUAL_TAB: ':iouType/new/:reportID?/manual',
     MONEY_REQUEST_SCAN_TAB: ':iouType/new/:reportID?/scan',
@@ -117,6 +118,7 @@ export default {
     getMoneyRequestMerchantRoute: (iouType: string, reportID = '') => `${iouType}/new/merchant/${reportID}`,
     getMoneyRequestDistanceTabRoute: (iouType: string, reportID = '') => `${iouType}/new/${reportID}/distance`,
     getMoneyRequestWaypointRoute: (iouType: string, waypointIndex: number) => `${iouType}/new/waypoint/${waypointIndex}`,
+    getMoneyRequestTagRoute: (iouType: string, reportID = '') => `${iouType}/new/tag/${reportID}`,
     SPLIT_BILL_DETAILS: `r/:reportID/split/:reportActionID`,
     getSplitBillDetailsRoute: (reportID: string, reportActionID: string) => `r/${reportID}/split/${reportActionID}`,
     getNewTaskRoute: (reportID: string) => `${NEW_TASK}/${reportID}`,

src/components/MoneyRequestConfirmationList.js

@@ -8,6 +8,7 @@ import lodashGet from 'lodash/get';
 import styles from '../styles/styles';
 import * as ReportUtils from '../libs/ReportUtils';
 import * as OptionsListUtils from '../libs/OptionsListUtils';
+import Permissions from '../libs/Permissions';
 import OptionsSelector from './OptionsSelector';
 import ONYXKEYS from '../ONYXKEYS';
 import compose from '../libs/compose';
@@ -29,6 +30,7 @@ import Image from './Image';
 import useLocalize from '../hooks/useLocalize';
 import * as ReceiptUtils from '../libs/ReceiptUtils';
 import categoryPropTypes from './categoryPropTypes';
+import tagPropTypes from './tagPropTypes';
 import ConfirmedRoute from './ConfirmedRoute';
 import transactionPropTypes from './transactionPropTypes';
 import DistanceRequestUtils from '../libs/DistanceRequestUtils';
@@ -68,6 +70,9 @@ const propTypes = {
     /** IOU Category */
     iouCategory: PropTypes.string,
 
+    /** IOU Tag */
+    iouTag: PropTypes.string,
+
     /** Selected participants from MoneyRequestModal with login / accountID */
     selectedParticipants: PropTypes.arrayOf(optionPropTypes).isRequired,
 
@@ -105,10 +110,6 @@ const propTypes = {
     /** List styles for OptionsSelector */
     listStyles: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 
-    /* Onyx Props */
-    /** Collection of categories attached to a policy */
-    policyCategories: PropTypes.objectOf(categoryPropTypes),
-
     /** ID of the transaction that represents the money request */
     transactionID: PropTypes.string,
 
@@ -129,6 +130,22 @@ const propTypes = {
 
     /** Whether the money request is a distance request */
     isDistanceRequest: PropTypes.bool,
+
+    /* Onyx Props */
+    /** Collection of categories attached to a policy */
+    policyCategories: PropTypes.objectOf(categoryPropTypes),
+
+    /** Collection of tags attached to a policy */
+    policyTags: PropTypes.objectOf(
+        PropTypes.shape({
+            name: PropTypes.string,
+            required: PropTypes.bool,
+            tags: PropTypes.objectOf(tagPropTypes),
+        }),
+    ),
+
+    /* Beta features list */
+    betas: PropTypes.arrayOf(PropTypes.string),
 };
 
 const defaultProps = {
@@ -137,6 +154,7 @@ const defaultProps = {
     onSelectParticipant: () => {},
     iouType: CONST.IOU.MONEY_REQUEST_TYPE.REQUEST,
     iouCategory: '',
+    iouTag: '',
     payeePersonalDetails: null,
     canModifyParticipants: false,
     isReadOnly: false,
@@ -151,6 +169,8 @@ const defaultProps = {
     receiptSource: '',
     listStyles: [],
     policyCategories: {},
+    policyTags: {},
+    betas: [],
     transactionID: '',
     transaction: {},
     mileageRate: {unit: CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES, rate: 0, currency: 'USD'},
@@ -173,6 +193,12 @@ function MoneyRequestConfirmationList(props) {
     const shouldCalculateDistanceAmount = props.isDistanceRequest && props.iouAmount === 0;
     const shouldCategoryEditable = !_.isEmpty(props.policyCategories) && !props.isDistanceRequest;
 
+    // Fetches the first tag list of the policy
+    const tagListKey = _.first(_.keys(props.policyTags));
+    const tagList = lodashGet(props.policyTags, [tagListKey, 'tags'], []);
+    const tagListName = lodashGet(props.policyTags, [tagListKey, 'name'], '');
+    const canUseTags = Permissions.canUseTags(props.betas);
+
     const formattedAmount = CurrencyUtils.convertToDisplayString(
         shouldCalculateDistanceAmount ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate) : props.iouAmount,
         props.isDistanceRequest ? currency : props.iouCurrencyCode,
@@ -494,6 +520,16 @@ function MoneyRequestConfirmationList(props) {
                             disabled={didConfirm || props.isReadOnly}
                         />
                     )}
+                    {canUseTags && tagList ? (
+                        <MenuItemWithTopDescription
+                            shouldShowRightIcon={!props.isReadOnly}
+                            title={props.iouTag}
+                            description={tagListName || translate('common.tag')}
+                            onPress={() => Navigation.navigate(ROUTES.getMoneyRequestTagRoute(props.iouType, props.reportID))}
+                            style={[styles.moneyRequestMenuItem, styles.mb2]}
+                            disabled={didConfirm || props.isReadOnly}
+                        />
+                    ) : null}
                 </>
             )}
         </OptionsSelector>
@@ -509,9 +545,15 @@ export default compose(
         session: {
             key: ONYXKEYS.SESSION,
         },
+        betas: {
+            key: ONYXKEYS.BETAS,
+        },
         policyCategories: {
             key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`,
         },
+        policyTags: {
+            key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`,
+        },
         mileageRate: {
             key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
             selector: DistanceRequestUtils.getDefaultMileageRate,

src/components/TagPicker/index.js

@@ -0,0 +1,90 @@
+import React, {useMemo} from 'react';
+import _ from 'underscore';
+import lodashGet from 'lodash/get';
+import {withOnyx} from 'react-native-onyx';
+import ONYXKEYS from '../../ONYXKEYS';
+import styles from '../../styles/styles';
+import Navigation from '../../libs/Navigation/Navigation';
+import ROUTES from '../../ROUTES';
+import useLocalize from '../../hooks/useLocalize';
+import * as OptionsListUtils from '../../libs/OptionsListUtils';
+import OptionsSelector from '../OptionsSelector';
+import {propTypes, defaultProps} from './tagPickerPropTypes';
+
+function TagPicker({policyTags, reportID, tag, iouType, iou}) {
+    const {translate} = useLocalize();
+
+    const selectedOptions = useMemo(() => {
+        if (!iou.tag) {
+            return [];
+        }
+
+        return [
+            {
+                name: iou.tag,
+                enabled: true,
+            },
+        ];
+    }, [iou.tag]);
+
+    // Only shows one section, which will be the default behavior if there are
+    // less than 8 policy tags
+    // TODO: support sections with search
+    const sections = useMemo(() => {
+        const tagList = _.chain(lodashGet(policyTags, [tag, 'tags'], {}))
+            .values()
+            .map((t) => ({
+                text: t.name,
+                keyForList: t.name,
+                tooltipText: t.name,
+            }))
+            .value();
+
+        return [
+            {
+                data: tagList,
+            },
+        ];
+    }, [policyTags, tag]);
+
+    const headerMessage = OptionsListUtils.getHeaderMessage(lodashGet(sections, '[0].data.length', 0) > 0, false, '');
+
+    const navigateBack = () => {
+        Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID));
+    };
+
+    const updateTag = () => {
+        // TODO: add logic to save the selected tag
+        navigateBack();
+    };
+
+    return (
+        <OptionsSelector
+            optionHoveredStyle={styles.hoveredComponentBG}
+            sections={sections}
+            selectedOptions={selectedOptions}
+            headerMessage={headerMessage}
+            textInputLabel={translate('common.search')}
+            boldStyle
+            value=""
+            onSelectRow={updateTag}
+            shouldShowTextInput={false}
+        />
+    );
+}
+
+TagPicker.displayName = 'TagPicker';
+TagPicker.propTypes = propTypes;
+TagPicker.defaultProps = defaultProps;
+
+export default withOnyx({
+    policyTags: {
+        key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`,
+    },
+    policyRecentlyUsedTags: {
+        key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${policyID}`,
+    },
+    iou: {
+        key: ONYXKEYS.IOU,
+    },
+})(TagPicker);

src/components/TagPicker/tagPickerPropTypes.js

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import tagPropTypes from '../tagPropTypes';
+import {iouPropTypes, iouDefaultProps} from '../../pages/iou/propTypes';
+
+const propTypes = {
+    /** The report ID of the IOU */
+    reportID: PropTypes.string.isRequired,
+
+    /** The policyID we are getting tags for */
+    policyID: PropTypes.string.isRequired,
+
+    /** The tag list we are getting tags for */
+    tag: PropTypes.string.isRequired,
+
+    /** The type of IOU report, i.e. bill, request, send */
+    iouType: PropTypes.string.isRequired,
+
+    /** Callback to submit the selected tag */
+    onSubmit: PropTypes.func,
+
+    /* Onyx Props */
+    /** Collection of tags attached to a policy */
+    policyTags: PropTypes.objectOf(
+        PropTypes.shape({
+            name: PropTypes.string,
+            tags: PropTypes.objectOf(tagPropTypes),
+        }),
+    ),
+
+    /** List of recently used tags */
+    policyRecentlyUsedTags: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)),
+
+    /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
+    iou: iouPropTypes,
+};
+
+const defaultProps = {
+    policyTags: {},
+    policyRecentlyUsedTags: {},
+    iou: iouDefaultProps,
+};
+
+export {propTypes, defaultProps};

src/components/tagPropTypes.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+
+export default PropTypes.shape({
+    /** Name of a tag */
+    name: PropTypes.string.isRequired,
+
+    /** Flag that determines if a tag is active and able to be selected */
+    enabled: PropTypes.bool.isRequired,
+
+    /** "General Ledger code" that corresponds to this tag in an accounting system. Similar to an ID. */
+    'GL Code': PropTypes.string,
+});

src/languages/en.ts

@@ -71,6 +71,7 @@ import type {
     SetTheRequestParams,
     UpdatedTheRequestParams,
     RemovedTheRequestParams,
+    TagSelectionParams,
 } from './types';
 import * as ReportActionsUtils from '../libs/ReportActionsUtils';
 
@@ -233,6 +234,7 @@ export default {
         showMore: 'Show more',
         merchant: 'Merchant',
         category: 'Category',
+        tag: 'Tag',
         receipt: 'Receipt',
         replace: 'Replace',
         distance: 'Distance',
@@ -533,6 +535,7 @@ export default {
             `changed the ${valueName} to ${newValueToDisplay} (previously ${oldValueToDisplay})`,
         threadRequestReportName: ({formattedAmount, comment}: ThreadRequestReportNameParams) => `${formattedAmount} request${comment ? ` for ${comment}` : ''}`,
         threadSentMoneyReportName: ({formattedAmount, comment}: ThreadSentMoneyReportNameParams) => `${formattedAmount} sent${comment ? ` for ${comment}` : ''}`,
+        tagSelection: ({tagName}: TagSelectionParams) => `Select a ${tagName} to add additional organization to your money`,
         error: {
             invalidSplit: 'Split amounts do not equal total amount',
             other: 'Unexpected error, please try again later',

src/languages/es.ts

@@ -71,6 +71,7 @@ import type {
     SetTheRequestParams,
     UpdatedTheRequestParams,
     RemovedTheRequestParams,
+    TagSelectionParams,
 } from './types';
 
 /* eslint-disable max-len */
@@ -232,6 +233,7 @@ export default {
         showMore: 'Mostrar más',
         merchant: 'Comerciante',
         category: 'Categoría',
+        tag: 'Etiqueta',
         receipt: 'Recibo',
         replace: 'Sustituir',
         distance: 'Distancia',
@@ -535,6 +537,7 @@ export default {
             `cambío ${valueName === 'comerciante' ? 'el' : 'la'} ${valueName} a ${newValueToDisplay} (previamente ${oldValueToDisplay})`,
         threadRequestReportName: ({formattedAmount, comment}: ThreadRequestReportNameParams) => `Solicitud de ${formattedAmount}${comment ? ` para ${comment}` : ''}`,
         threadSentMoneyReportName: ({formattedAmount, comment}: ThreadSentMoneyReportNameParams) => `${formattedAmount} enviado${comment ? ` para ${comment}` : ''}`,
+        tagSelection: ({tagName}: TagSelectionParams) => `Seleccione una ${tagName} para organizar mejor tu dinero`,
         error: {
             invalidSplit: 'La suma de las partes no equivale al monto total',
             other: 'Error inesperado, por favor inténtalo más tarde',

src/languages/types.ts

@@ -190,6 +190,8 @@ type RemovedTheRequestParams = {valueName: string; oldValueToDisplay: string};
 
 type UpdatedTheRequestParams = {valueName: string; newValueToDisplay: string; oldValueToDisplay: string};
 
+type TagSelectionParams = {tagName: string};
+
 export type {
     AddressLineParams,
     CharacterLimitParams,
@@ -261,4 +263,5 @@ export type {
     SetTheRequestParams,
     UpdatedTheRequestParams,
     RemovedTheRequestParams,
+    TagSelectionParams,
 };

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -90,6 +90,13 @@ const MoneyRequestModalStackNavigator = createModalStackNavigator([
         },
         name: 'Money_Request_Category',
     },
+    {
+        getComponent: () => {
+            const MoneyRequestTagPage = require('../../../pages/iou/MoneyRequestTagPage').default;
+            return MoneyRequestTagPage;
+        },
+        name: 'Money_Request_Tag',
+    },
     {
         getComponent: () => {
             const MoneyRequestMerchantPage = require('../../../pages/iou/MoneyRequestMerchantPage').default;