Fix NotFound page for categories and tags

src/pages/EditRequestDistancePage.js

@@ -101,6 +101,7 @@ function EditRequestDistancePage({report, route, transaction}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            testID={EditRequestDistancePage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('common.distance')}

src/pages/EditRequestPage.js

@@ -1,6 +1,7 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
+import lodashValues from 'lodash/values';
 import {withOnyx} from 'react-native-onyx';
 import CONST from '../CONST';
 import ONYXKEYS from '../ONYXKEYS';
@@ -13,6 +14,8 @@ import * as TransactionUtils from '../libs/TransactionUtils';
 import * as Policy from '../libs/actions/Policy';
 import * as IOU from '../libs/actions/IOU';
 import * as CurrencyUtils from '../libs/CurrencyUtils';
+import * as OptionsListUtils from '../libs/OptionsListUtils';
+import Permissions from '../libs/Permissions';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '../components/withCurrentUserPersonalDetails';
 import tagPropTypes from '../components/tagPropTypes';
 import FullPageNotFoundView from '../components/BlockingViews/FullPageNotFoundView';
@@ -25,6 +28,8 @@ import reportPropTypes from './reportPropTypes';
 import EditRequestDistancePage from './EditRequestDistancePage';
 import EditRequestCategoryPage from './EditRequestCategoryPage';
 import EditRequestTagPage from './EditRequestTagPage';
+import categoryPropTypes from '../components/categoryPropTypes';
+import ScreenWrapper from '../components/ScreenWrapper';
 
 const propTypes = {
     /** Route from navigation */
@@ -40,6 +45,9 @@ const propTypes = {
     }).isRequired,
 
     /** Onyx props */
+    /** List of betas available to current user */
+    betas: PropTypes.arrayOf(PropTypes.string),
+
     /** The report object for the thread report */
     report: reportPropTypes,
 
@@ -61,23 +69,28 @@ const propTypes = {
         email: PropTypes.string,
     }),
 
+    /** Collection of categories attached to a policy */
+    policyCategories: PropTypes.objectOf(categoryPropTypes),
+
     /** Collection of tags attached to a policy */
     policyTags: tagPropTypes,
 
     ...withCurrentUserPersonalDetailsPropTypes,
 };
 
 const defaultProps = {
+    betas: [],
     report: {},
     parentReport: {},
     policy: null,
     session: {
         email: null,
     },
+    policyCategories: {},
     policyTags: {},
 };
 
-function EditRequestPage({report, route, parentReport, policy, session, policyTags}) {
+function EditRequestPage({betas, report, route, parentReport, policy, session, policyCategories, policyTags}) {
     const parentReportAction = ReportActionsUtils.getParentReportAction(report);
     const transaction = TransactionUtils.getLinkedTransaction(parentReportAction);
     const {
@@ -103,8 +116,19 @@ function EditRequestPage({report, route, parentReport, policy, session, policyTa
     const canEdit = !isSettled && !isDeleted && (isAdmin || isRequestor);
 
     // For now, it always defaults to the first tag of the policy
+    const policyTag = PolicyUtils.getTag(policyTags);
+    const policyTagList = lodashGet(policyTag, 'tags', {});
     const tagListName = PolicyUtils.getTagListName(policyTags);
 
+    // A flag for verifying that the current report is a sub-report of a workspace chat
+    const isPolicyExpenseChat = useMemo(() => ReportUtils.isPolicyExpenseChat(ReportUtils.getRootParentReport(report)), [report]);
+
+    // A flag for showing the categories page
+    const shouldShowCategories = isPolicyExpenseChat && Permissions.canUseCategories(betas) && (transactionCategory || OptionsListUtils.hasEnabledOptions(lodashValues(policyCategories)));
+
+    // A flag for showing the tags page
+    const shouldShowTags = isPolicyExpenseChat && Permissions.canUseTags(betas) && (transactionTag || OptionsListUtils.hasEnabledOptions(lodashValues(policyTagList)));
+
     // Dismiss the modal when the request is paid or deleted
     useEffect(() => {
         if (canEdit) {
@@ -196,7 +220,7 @@ function EditRequestPage({report, route, parentReport, policy, session, policyTa
         );
     }
 
-    if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.CATEGORY) {
+    if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.CATEGORY && shouldShowCategories) {
         return (
             <EditRequestCategoryPage
                 defaultCategory={transactionCategory}
@@ -213,7 +237,7 @@ function EditRequestPage({report, route, parentReport, policy, session, policyTa
         );
     }
 
-    if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.TAG) {
+    if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.TAG && shouldShowTags) {
         return (
             <EditRequestTagPage
                 defaultTag={transactionTag}
@@ -251,7 +275,15 @@ function EditRequestPage({report, route, parentReport, policy, session, policyTa
         );
     }
 
-    return <FullPageNotFoundView shouldShow />;
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            shouldEnableMaxHeight
+            testID={EditRequestPage.displayName}
+        >
+            <FullPageNotFoundView shouldShow />
+        </ScreenWrapper>
+    );
 }
 
 EditRequestPage.displayName = 'EditRequestPage';
@@ -266,12 +298,18 @@ export default compose(
     }),
     // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file
     withOnyx({
+        betas: {
+            key: ONYXKEYS.BETAS,
+        },
         parentReport: {
             key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report ? report.parentReportID : '0'}`,
         },
         policy: {
             key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report ? report.policyID : '0'}`,
         },
+        policyCategories: {
+            key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${report ? report.policyID : '0'}`,
+        },
         policyTags: {
             key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${report ? report.policyID : '0'}`,
         },

src/pages/EditRequestTagPage.js

@@ -31,6 +31,7 @@ function EditRequestTagPage({defaultTag, policyID, tagName, onSubmit}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            testID={EditRequestTagPage.displayName}
         >
             <HeaderWithBackButton
                 title={tagName || translate('common.tag')}