Fix - RHN throws error if tags are deleted by admin while member is selecting

src/ROUTES.ts

@@ -495,6 +495,10 @@ const ROUTES = {
         getRoute: (action: IOUAction, iouType: IOUType, orderWeight: number, transactionID: string, reportID: string, backTo = '', reportActionID?: string) =>
             getUrlWithBackToParam(`${action as string}/${iouType as string}/tag/${orderWeight}/${transactionID}/${reportID}${reportActionID ? `/${reportActionID}` : ''}`, backTo),
     },
+    SETTINGS_TAGS_ROOT: {
+        route: 'settings/:policyID/tags',
+        getRoute: (policyID: string, backTo = '') => getUrlWithBackToParam(`settings/${policyID}/tags`, backTo),
+    },
     MONEY_REQUEST_STEP_WAYPOINT: {
         route: ':action/:iouType/waypoint/:transactionID/:reportID/:pageIndex',
         getRoute: (action: IOUAction, iouType: IOUType, transactionID: string, reportID?: string, pageIndex = '', backTo = '') =>

src/SCREENS.ts

@@ -244,6 +244,8 @@ const SCREENS = {
         SETTINGS_CATEGORIES_ROOT: 'Settings_Categories',
     },
 
+    SETTINGS_TAGS_ROOT: 'Settings_Tags',
+
     REPORT_SETTINGS: {
         ROOT: 'Report_Settings_Root',
         NAME: 'Report_Settings_Name',

src/languages/en.ts

@@ -3171,6 +3171,7 @@ export default {
             disableTags: 'Disable tags',
             addTag: 'Add tag',
             editTag: 'Edit tag',
+            editTags: 'Edit tags',
             subtitle: 'Tags add more detailed ways to classify costs.',
             emptyTags: {
                 title: "You haven't created any tags",

src/languages/es.ts

@@ -3220,6 +3220,7 @@ export default {
             disableTags: 'Desactivar etiquetas',
             addTag: 'Añadir etiqueta',
             editTag: 'Editar etiqueta',
+            editTags: 'Editar etiquetas',
             subtitle: 'Las etiquetas añaden formas más detalladas de clasificar los costos.',
             emptyTags: {
                 title: 'No has creado ninguna etiqueta',

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -87,6 +87,7 @@ const MoneyRequestModalStackNavigator = createModalStackNavigator<MoneyRequestNa
     [SCREENS.MONEY_REQUEST.STEP_MERCHANT]: () => require<ReactComponentModule>('../../../../pages/iou/request/step/IOURequestStepMerchant').default,
     [SCREENS.MONEY_REQUEST.STEP_PARTICIPANTS]: () => require<ReactComponentModule>('../../../../pages/iou/request/step/IOURequestStepParticipants').default,
     [SCREENS.SETTINGS_CATEGORIES.SETTINGS_CATEGORIES_ROOT]: () => require<ReactComponentModule>('../../../../pages/workspace/categories/WorkspaceCategoriesPage').default,
+    [SCREENS.SETTINGS_TAGS_ROOT]: () => require<ReactComponentModule>('../../../../pages/workspace/tags/WorkspaceTagsPage').default,
     [SCREENS.MONEY_REQUEST.STEP_SCAN]: () => require<ReactComponentModule>('../../../../pages/iou/request/step/IOURequestStepScan').default,
     [SCREENS.MONEY_REQUEST.STEP_TAG]: () => require<ReactComponentModule>('../../../../pages/iou/request/step/IOURequestStepTag').default,
     [SCREENS.MONEY_REQUEST.STEP_WAYPOINT]: () => require<ReactComponentModule>('../../../../pages/iou/request/step/IOURequestStepWaypoint').default,

src/libs/Navigation/linkingConfig/config.ts

@@ -1009,6 +1009,7 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                             },
                         },
                         [SCREENS.SETTINGS_CATEGORIES.SETTINGS_CATEGORIES_ROOT]: ROUTES.SETTINGS_CATEGORIES_ROOT.route,
+                        [SCREENS.SETTINGS_TAGS_ROOT]: ROUTES.SETTINGS_TAGS_ROOT.route,
                         [SCREENS.MONEY_REQUEST.STEP_SEND_FROM]: ROUTES.MONEY_REQUEST_STEP_SEND_FROM.route,
                         [SCREENS.MONEY_REQUEST.STEP_COMPANY_INFO]: ROUTES.MONEY_REQUEST_STEP_COMPANY_INFO.route,
                         [SCREENS.MONEY_REQUEST.STEP_AMOUNT]: ROUTES.MONEY_REQUEST_STEP_AMOUNT.route,

src/pages/iou/request/step/IOURequestStepTag.tsx

@@ -1,8 +1,13 @@
 import React, {useMemo} from 'react';
+import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
+import Button from '@components/Button';
+import FixedFooter from '@components/FixedFooter';
+import * as Illustrations from '@components/Icon/Illustrations';
 import TagPicker from '@components/TagPicker';
 import Text from '@components/Text';
+import WorkspaceEmptyStateSection from '@components/WorkspaceEmptyStateSection';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as IOUUtils from '@libs/IOUUtils';
@@ -15,6 +20,7 @@ import * as TransactionUtils from '@libs/TransactionUtils';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type * as OnyxTypes from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
@@ -77,11 +83,12 @@ function IOURequestStepTag({
     const canEditSplitBill = isSplitBill && reportAction && session?.accountID === reportAction.actorAccountID && TransactionUtils.areRequiredFieldsEmpty(transaction);
     const policyTagLists = useMemo(() => PolicyUtils.getTagLists(policyTags), [policyTags]);
 
-    const shouldShowTag = ReportUtils.isReportInGroupPolicy(report) && (transactionTag || OptionsListUtils.hasEnabledTags(policyTagLists));
+    const shouldShowTag = transactionTag || OptionsListUtils.hasEnabledTags(policyTagLists);
 
     // eslint-disable-next-line rulesdir/no-negated-variables
     const shouldShowNotFoundPage =
-        !shouldShowTag || (isEditing && (isSplitBill ? !canEditSplitBill : !ReportActionsUtils.isMoneyRequestAction(reportAction) || !ReportUtils.canEditMoneyRequest(reportAction)));
+        !ReportUtils.isReportInGroupPolicy(report) ||
+        (isEditing && (isSplitBill ? !canEditSplitBill : !ReportActionsUtils.isMoneyRequestAction(reportAction) || !ReportUtils.canEditMoneyRequest(reportAction)));
 
     const navigateBack = () => {
         Navigation.goBack(backTo);
@@ -113,16 +120,48 @@ function IOURequestStepTag({
             testID={IOURequestStepTag.displayName}
             shouldShowNotFoundPage={shouldShowNotFoundPage}
         >
-            <>
-                <Text style={[styles.ph5, styles.pv3]}>{translate('iou.tagSelection')}</Text>
-                <TagPicker
-                    policyID={report?.policyID ?? '-1'}
-                    tagListName={policyTagListName}
-                    tagListIndex={tagListIndex}
-                    selectedTag={tag}
-                    onSubmit={updateTag}
-                />
-            </>
+            {!shouldShowTag && (
+                <View style={[styles.flex1]}>
+                    <WorkspaceEmptyStateSection
+                        shouldStyleAsCard={false}
+                        icon={Illustrations.EmptyStateExpenses}
+                        title={translate('workspace.tags.emptyTags.title')}
+                        subtitle={translate('workspace.tags.emptyTags.subtitle')}
+                        containerStyle={[styles.flex1, styles.justifyContentCenter]}
+                    />
+                    {PolicyUtils.isPolicyAdmin(policy) && (
+                        <FixedFooter style={[styles.mtAuto, styles.pt5]}>
+                            <Button
+                                large
+                                success
+                                style={[styles.w100]}
+                                onPress={() =>
+                                    Navigation.navigate(
+                                        ROUTES.SETTINGS_TAGS_ROOT.getRoute(
+                                            policy?.id ?? '-1',
+                                            ROUTES.MONEY_REQUEST_STEP_TAG.getRoute(action, iouType, tagListIndex, transactionID, report?.reportID ?? '-1', backTo, reportActionID),
+                                        ),
+                                    )
+                                }
+                                text={translate('workspace.tags.editTags')}
+                                pressOnEnter
+                            />
+                        </FixedFooter>
+                    )}
+                </View>
+            )}
+            {shouldShowTag && (
+                <>
+                    <Text style={[styles.ph5, styles.pv3]}>{translate('iou.tagSelection')}</Text>
+                    <TagPicker
+                        policyID={report?.policyID ?? '-1'}
+                        tagListName={policyTagListName}
+                        tagListIndex={tagListIndex}
+                        selectedTag={tag}
+                        onSubmit={updateTag}
+                    />
+                </>
+            )}
         </StepScreenWrapper>
     );
 }