Allow for multiple levels of tags on workspace

src/ONYXKEYS.ts

@@ -435,7 +435,7 @@ type OnyxCollectionValuesMapping = {
     [ONYXKEYS.COLLECTION.POLICY]: OnyxTypes.Policy;
     [ONYXKEYS.COLLECTION.POLICY_DRAFTS]: OnyxTypes.Policy;
     [ONYXKEYS.COLLECTION.POLICY_CATEGORIES]: OnyxTypes.PolicyCategories;
-    [ONYXKEYS.COLLECTION.POLICY_TAGS]: OnyxTypes.PolicyTags;
+    [ONYXKEYS.COLLECTION.POLICY_TAGS]: OnyxTypes.PolicyTagList;
     [ONYXKEYS.COLLECTION.POLICY_MEMBERS]: OnyxTypes.PolicyMembers;
     [ONYXKEYS.COLLECTION.POLICY_MEMBERS_DRAFTS]: OnyxTypes.PolicyMember;
     [ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES]: OnyxTypes.RecentlyUsedCategories;

src/ROUTES.ts

@@ -176,8 +176,9 @@ const ROUTES = {
         getRoute: (reportID: string) => `r/${reportID}/avatar` as const,
     },
     EDIT_REQUEST: {
-        route: 'r/:threadReportID/edit/:field',
-        getRoute: (threadReportID: string, field: ValueOf<typeof CONST.EDIT_REQUEST_FIELD>) => `r/${threadReportID}/edit/${field}` as const,
+        route: 'r/:threadReportID/edit/:field/:tagIndex?',
+        getRoute: (threadReportID: string, field: ValueOf<typeof CONST.EDIT_REQUEST_FIELD>, tagIndex?: number) =>
+            `r/${threadReportID}/edit/${field}${typeof tagIndex === 'number' ? `/${tagIndex}` : ''}` as const,
     },
     EDIT_CURRENCY_REQUEST: {
         route: 'r/:threadReportID/edit/currency',
@@ -224,8 +225,9 @@ const ROUTES = {
         getRoute: (reportID: string, reportActionID: string) => `r/${reportID}/split/${reportActionID}` as const,
     },
     EDIT_SPLIT_BILL: {
-        route: `r/:reportID/split/:reportActionID/edit/:field`,
-        getRoute: (reportID: string, reportActionID: string, field: ValueOf<typeof CONST.EDIT_REQUEST_FIELD>) => `r/${reportID}/split/${reportActionID}/edit/${field}` as const,
+        route: `r/:reportID/split/:reportActionID/edit/:field/:tagIndex?`,
+        getRoute: (reportID: string, reportActionID: string, field: ValueOf<typeof CONST.EDIT_REQUEST_FIELD>, tagIndex?: number) =>
+            `r/${reportID}/split/${reportActionID}/edit/${field}${typeof tagIndex === 'number' ? `/${tagIndex}` : ''}` as const,
     },
     EDIT_SPLIT_BILL_CURRENCY: {
         route: 'r/:reportID/split/:reportActionID/edit/currency',
@@ -369,9 +371,9 @@ const ROUTES = {
             getUrlWithBackToParam(`${action}/${iouType}/scan/${transactionID}/${reportID}`, backTo),
     },
     MONEY_REQUEST_STEP_TAG: {
-        route: ':action/:iouType/tag/:transactionID/:reportID',
-        getRoute: (action: ValueOf<typeof CONST.IOU.ACTION>, iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
-            getUrlWithBackToParam(`${action}/${iouType}/tag/${transactionID}/${reportID}`, backTo),
+        route: ':action/:iouType/tag/:tagIndex/:transactionID/:reportID',
+        getRoute: (action: ValueOf<typeof CONST.IOU.ACTION>, iouType: ValueOf<typeof CONST.IOU.TYPE>, tagIndex: number, transactionID: string, reportID: string, backTo = '') =>
+            getUrlWithBackToParam(`${action}/${iouType}/tag/${tagIndex}/${transactionID}/${reportID}`, backTo),
     },
     MONEY_REQUEST_STEP_WAYPOINT: {
         route: ':action/:iouType/waypoint/:transactionID/:reportID/:pageIndex',

src/components/MoneyRequestConfirmationList.js

@@ -241,12 +241,10 @@ function MoneyRequestConfirmationList(props) {
     const shouldShowDate = shouldShowAllFields && !isTypeSend && !isSplitWithScan;
     const shouldShowMerchant = shouldShowAllFields && !isTypeSend && !props.isDistanceRequest && !isSplitWithScan;
 
-    // Fetches the first tag list of the policy
-    const policyTag = PolicyUtils.getTag(props.policyTags);
-    const policyTagList = lodashGet(policyTag, 'tags', {});
-    const policyTagListName = lodashGet(policyTag, 'name', translate('common.tag'));
+    const policyTagLists = useMemo(() => PolicyUtils.getTagLists(props.policyTags), [props.policyTags]);
+
     // A flag for showing the tags field
-    const shouldShowTags = props.isPolicyExpenseChat && (props.iouTag || OptionsListUtils.hasEnabledOptions(_.values(policyTagList)));
+    const shouldShowTags = props.isPolicyExpenseChat && (props.iouTag || OptionsListUtils.hasEnabledTags(policyTagLists));
 
     // A flag for showing tax fields - tax rate and tax amount
     const shouldShowTax = props.isPolicyExpenseChat && lodashGet(props.policy, 'tax.trackingEnabled', props.policy.isTaxTrackingEnabled);
@@ -781,33 +779,36 @@ function MoneyRequestConfirmationList(props) {
                             rightLabel={canUseViolations && Boolean(props.policy.requiresCategory) ? translate('common.required') : ''}
                         />
                     )}
-                    {shouldShowTags && (
-                        <MenuItemWithTopDescription
-                            shouldShowRightIcon={!props.isReadOnly}
-                            title={PolicyUtils.getCleanedTagName(props.iouTag)}
-                            description={policyTagListName}
-                            numberOfLinesTitle={2}
-                            onPress={() => {
-                                if (props.isEditingSplitBill) {
-                                    Navigation.navigate(
-                                        ROUTES.MONEY_REQUEST_STEP_TAG.getRoute(
-                                            CONST.IOU.ACTION.EDIT,
-                                            CONST.IOU.TYPE.SPLIT,
-                                            props.transaction.transactionID,
-                                            props.reportID,
-                                            Navigation.getActiveRouteWithoutParams(),
-                                        ),
-                                    );
-                                    return;
-                                }
-                                Navigation.navigate(ROUTES.MONEY_REQUEST_TAG.getRoute(props.iouType, props.reportID));
-                            }}
-                            style={[styles.moneyRequestMenuItem]}
-                            disabled={didConfirm}
-                            interactive={!props.isReadOnly}
-                            rightLabel={canUseViolations && Boolean(props.policy.requiresTag) ? translate('common.required') : ''}
-                        />
-                    )}
+                    {shouldShowTags &&
+                        _.map(policyTagLists, ({name}, index) => (
+                            <MenuItemWithTopDescription
+                                key={name}
+                                shouldShowRightIcon={!props.isReadOnly}
+                                title={TransactionUtils.getTag(transaction, index)}
+                                description={name}
+                                numberOfLinesTitle={2}
+                                onPress={() => {
+                                    if (props.isEditingSplitBill) {
+                                        Navigation.navigate(
+                                            ROUTES.MONEY_REQUEST_STEP_TAG.getRoute(
+                                                CONST.IOU.ACTION.EDIT,
+                                                CONST.IOU.TYPE.SPLIT,
+                                                index,
+                                                props.transaction.transactionID,
+                                                props.reportID,
+                                                Navigation.getActiveRouteWithoutParams(),
+                                            ),
+                                        );
+                                        return;
+                                    }
+                                    Navigation.navigate(ROUTES.MONEY_REQUEST_TAG.getRoute(props.iouType, props.reportID));
+                                }}
+                                style={[styles.moneyRequestMenuItem]}
+                                disabled={didConfirm}
+                                interactive={!props.isReadOnly}
+                                rightLabel={canUseViolations && Boolean(props.policy.requiresTag) ? translate('common.required') : ''}
+                            />
+                        ))}
 
                     {shouldShowTax && (
                         <MenuItemWithTopDescription

src/components/MoneyTemporaryForRefactorRequestConfirmationList.js

@@ -2,7 +2,7 @@ import {useIsFocused} from '@react-navigation/native';
 import {format} from 'date-fns';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React, {useCallback, useEffect, useMemo, useReducer, useRef, useState} from 'react';
+import React, {Fragment, useCallback, useEffect, useMemo, useReducer, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -80,9 +80,6 @@ const propTypes = {
     /** IOU category */
     iouCategory: PropTypes.string,
 
-    /** IOU tag */
-    iouTag: PropTypes.string,
-
     /** IOU isBillable */
     iouIsBillable: PropTypes.bool,
 
@@ -177,7 +174,6 @@ const defaultProps = {
     onSelectParticipant: () => {},
     iouType: CONST.IOU.TYPE.REQUEST,
     iouCategory: '',
-    iouTag: '',
     iouIsBillable: false,
     onToggleBillable: () => {},
     payeePersonalDetails: null,
@@ -217,7 +213,6 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
     iouCurrencyCode,
     iouIsBillable,
     iouMerchant,
-    iouTag,
     iouType,
     isDistanceRequest,
     isEditingSplitBill,
@@ -270,13 +265,10 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
     const shouldShowDate = shouldShowSmartScanFields || isDistanceRequest;
     const shouldShowMerchant = shouldShowSmartScanFields && !isDistanceRequest;
 
-    // Fetches the first tag list of the policy
-    const policyTag = PolicyUtils.getTag(policyTags);
-    const policyTagList = lodashGet(policyTag, 'tags', {});
-    const policyTagListName = lodashGet(policyTag, 'name', translate('common.tag'));
+    const policyTagLists = useMemo(() => PolicyUtils.getTagLists(policyTags), [policyTags]);
 
     // A flag for showing the tags field
-    const shouldShowTags = isPolicyExpenseChat && OptionsListUtils.hasEnabledOptions(_.values(policyTagList));
+    const shouldShowTags = useMemo(() => isPolicyExpenseChat && OptionsListUtils.hasEnabledTags(policyTagLists), [isPolicyExpenseChat, policyTagLists]);
 
     // A flag for showing tax rate
     const shouldShowTax = isPolicyExpenseChat && policy && lodashGet(policy, 'tax.trackingEnabled', policy.isTaxTrackingEnabled);
@@ -765,17 +757,17 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
             shouldShow: shouldShowCategories,
             isSupplementary: !isCategoryRequired,
         },
-        {
+        ..._.map(policyTagLists, ({name}, index) => ({
             item: (
                 <MenuItemWithTopDescription
-                    key={translate('common.tag')}
+                    key={name}
                     shouldShowRightIcon={!isReadOnly}
-                    title={PolicyUtils.getCleanedTagName(iouTag)}
-                    description={policyTagListName}
+                    title={TransactionUtils.getTag(transaction, index)}
+                    description={name}
                     numberOfLinesTitle={2}
                     onPress={() =>
                         Navigation.navigate(
-                            ROUTES.MONEY_REQUEST_STEP_TAG.getRoute(CONST.IOU.ACTION.CREATE, iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()),
+                            ROUTES.MONEY_REQUEST_STEP_TAG.getRoute(CONST.IOU.ACTION.CREATE, iouType, index, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()),
                         )
                     }
                     style={[styles.moneyRequestMenuItem]}
@@ -786,7 +778,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
             ),
             shouldShow: shouldShowTags,
             isSupplementary: !isTagRequired,
-        },
+        })),
         {
             item: (
                 <MenuItemWithTopDescription