From 58e1b4b5a4b1e7c92cfc1da4ba4244563b178f21 Mon Sep 17 00:00:00 2001
From: Artem Makushov <waterim3009@gmail.com>
Date: Wed, 20 Mar 2024 14:08:37 +0100
Subject: [PATCH] add tax pages, update wrapper workflows

---
 src/pages/workspace/tags/EditTagPage.tsx      |  60 +++++-----
 src/pages/workspace/tags/TagSettingsPage.tsx  | 113 ++++++++++--------
 .../workspace/tags/WorkspaceCreateTagPage.tsx |  58 +++++----
 .../workspace/tags/WorkspaceEditTagsPage.tsx  |  68 ++++++-----
 .../tags/WorkspaceTagsSettingsPage.tsx        |   1 -
 .../taxes/WorkspaceCreateTaxPage.tsx          |  90 +++++++-------
 .../workspace/taxes/WorkspaceTaxesPage.tsx    |  78 ++++++------
 .../WorkspaceTaxesSettingsCustomTaxName.tsx   |  64 +++++-----
 .../WorkspaceTaxesSettingsForeignCurrency.tsx |  45 ++++---
 .../taxes/WorkspaceTaxesSettingsPage.tsx      |  55 +++++----
 ...orkspaceTaxesSettingsWorkspaceCurrency.tsx |  45 ++++---
 .../workflows/WorkspaceWorkflowsPage.tsx      |  28 ++---
 12 files changed, 384 insertions(+), 321 deletions(-)

diff --git a/src/pages/workspace/tags/EditTagPage.tsx b/src/pages/workspace/tags/EditTagPage.tsx
index c22ba9154146..92d7c0a11ac9 100644
--- a/src/pages/workspace/tags/EditTagPage.tsx
+++ b/src/pages/workspace/tags/EditTagPage.tsx
@@ -17,6 +17,7 @@ import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
+import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
 import PaidPolicyAccessOrNotFoundWrapper from '@pages/workspace/PaidPolicyAccessOrNotFoundWrapper';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
@@ -66,36 +67,41 @@ function EditTagPage({route, policyTags}: EditTagPageProps) {
     return (
         <AdminPolicyAccessOrNotFoundWrapper policyID={route.params.policyID}>
             <PaidPolicyAccessOrNotFoundWrapper policyID={route.params.policyID}>
-                <ScreenWrapper
-                    includeSafeAreaPaddingBottom={false}
-                    style={[styles.defaultModalContainer]}
-                    testID={EditTagPage.displayName}
-                    shouldEnableMaxHeight
+                <FeatureEnabledAccessOrNotFoundWrapper
+                    policyID={route.params.policyID}
+                    featureName={CONST.POLICY.MORE_FEATURES.ARE_TAGS_ENABLED}
                 >
-                    <HeaderWithBackButton
-                        title={translate('workspace.tags.editTag')}
-                        onBackButtonPress={Navigation.goBack}
-                    />
-                    <FormProvider
-                        formID={ONYXKEYS.FORMS.WORKSPACE_TAG_FORM}
-                        onSubmit={editTag}
-                        submitButtonText={translate('common.save')}
-                        validate={validate}
-                        style={[styles.mh5, styles.flex1]}
-                        enabledWhenOffline
+                    <ScreenWrapper
+                        includeSafeAreaPaddingBottom={false}
+                        style={[styles.defaultModalContainer]}
+                        testID={EditTagPage.displayName}
+                        shouldEnableMaxHeight
                     >
-                        <InputWrapper
-                            InputComponent={TextInput}
-                            maxLength={CONST.TAG_NAME_LIMIT}
-                            defaultValue={currentTagName}
-                            label={translate('common.name')}
-                            accessibilityLabel={translate('common.name')}
-                            inputID={INPUT_IDS.TAG_NAME}
-                            role={CONST.ROLE.PRESENTATION}
-                            ref={inputCallbackRef}
+                        <HeaderWithBackButton
+                            title={translate('workspace.tags.editTag')}
+                            onBackButtonPress={Navigation.goBack}
                         />
-                    </FormProvider>
-                </ScreenWrapper>
+                        <FormProvider
+                            formID={ONYXKEYS.FORMS.WORKSPACE_TAG_FORM}
+                            onSubmit={editTag}
+                            submitButtonText={translate('common.save')}
+                            validate={validate}
+                            style={[styles.mh5, styles.flex1]}
+                            enabledWhenOffline
+                        >
+                            <InputWrapper
+                                InputComponent={TextInput}
+                                maxLength={CONST.TAG_NAME_LIMIT}
+                                defaultValue={currentTagName}
+                                label={translate('common.name')}
+                                accessibilityLabel={translate('common.name')}
+                                inputID={INPUT_IDS.TAG_NAME}
+                                role={CONST.ROLE.PRESENTATION}
+                                ref={inputCallbackRef}
+                            />
+                        </FormProvider>
+                    </ScreenWrapper>
+                </FeatureEnabledAccessOrNotFoundWrapper>
             </PaidPolicyAccessOrNotFoundWrapper>
         </AdminPolicyAccessOrNotFoundWrapper>
     );
diff --git a/src/pages/workspace/tags/TagSettingsPage.tsx b/src/pages/workspace/tags/TagSettingsPage.tsx
index 5f164a25e5fe..107689bc46b9 100644
--- a/src/pages/workspace/tags/TagSettingsPage.tsx
+++ b/src/pages/workspace/tags/TagSettingsPage.tsx
@@ -21,8 +21,10 @@ import * as PolicyUtils from '@libs/PolicyUtils';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
+import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
 import PaidPolicyAccessOrNotFoundWrapper from '@pages/workspace/PaidPolicyAccessOrNotFoundWrapper';
 import * as Policy from '@userActions/Policy';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
@@ -67,61 +69,66 @@ function TagSettingsPage({route, policyTags}: TagSettingsPageProps) {
     return (
         <AdminPolicyAccessOrNotFoundWrapper policyID={route.params.policyID}>
             <PaidPolicyAccessOrNotFoundWrapper policyID={route.params.policyID}>
-                <ScreenWrapper
-                    includeSafeAreaPaddingBottom={false}
-                    style={[styles.defaultModalContainer]}
-                    testID={TagSettingsPage.displayName}
+                <FeatureEnabledAccessOrNotFoundWrapper
+                    policyID={route.params.policyID}
+                    featureName={CONST.POLICY.MORE_FEATURES.ARE_TAGS_ENABLED}
                 >
-                    <HeaderWithBackButton
-                        title={route.params.tagName}
-                        shouldShowThreeDotsButton
-                        shouldSetModalVisibility={false}
-                        threeDotsAnchorPosition={styles.threeDotsPopoverOffset(windowWidth)}
-                        threeDotsMenuItems={[
-                            {
-                                icon: Trashcan,
-                                text: translate('workspace.tags.deleteTag'),
-                                onSelected: () => setIsDeleteTagModalOpen(true),
-                            },
-                        ]}
-                    />
-                    <ConfirmModal
-                        title={translate('workspace.tags.deleteTag')}
-                        isVisible={isDeleteTagModalOpen}
-                        onConfirm={deleteTagAndHideModal}
-                        onCancel={() => setIsDeleteTagModalOpen(false)}
-                        shouldSetModalVisibility={false}
-                        prompt={translate('workspace.tags.deleteTagConfirmation')}
-                        confirmText={translate('common.delete')}
-                        cancelText={translate('common.cancel')}
-                        danger
-                    />
-                    <View style={styles.flexGrow1}>
-                        <OfflineWithFeedback
-                            errors={ErrorUtils.getLatestErrorMessageField(currentPolicyTag)}
-                            pendingAction={currentPolicyTag.pendingFields?.enabled}
-                            errorRowStyles={styles.mh5}
-                            onClose={() => Policy.clearPolicyTagErrors(route.params.policyID, route.params.tagName)}
-                        >
-                            <View style={[styles.mt2, styles.mh5]}>
-                                <View style={[styles.flexRow, styles.mb5, styles.mr2, styles.alignItemsCenter, styles.justifyContentBetween]}>
-                                    <Text>{translate('workspace.tags.enableTag')}</Text>
-                                    <Switch
-                                        isOn={currentPolicyTag.enabled}
-                                        accessibilityLabel={translate('workspace.tags.enableTag')}
-                                        onToggle={updateWorkspaceTagEnabled}
-                                    />
-                                </View>
-                            </View>
-                        </OfflineWithFeedback>
-                        <MenuItemWithTopDescription
-                            title={currentPolicyTag.name}
-                            description={translate(`workspace.tags.tagName`)}
-                            onPress={navigateToEditTag}
-                            shouldShowRightIcon
+                    <ScreenWrapper
+                        includeSafeAreaPaddingBottom={false}
+                        style={[styles.defaultModalContainer]}
+                        testID={TagSettingsPage.displayName}
+                    >
+                        <HeaderWithBackButton
+                            title={route.params.tagName}
+                            shouldShowThreeDotsButton
+                            shouldSetModalVisibility={false}
+                            threeDotsAnchorPosition={styles.threeDotsPopoverOffset(windowWidth)}
+                            threeDotsMenuItems={[
+                                {
+                                    icon: Trashcan,
+                                    text: translate('workspace.tags.deleteTag'),
+                                    onSelected: () => setIsDeleteTagModalOpen(true),
+                                },
+                            ]}
+                        />
+                        <ConfirmModal
+                            title={translate('workspace.tags.deleteTag')}
+                            isVisible={isDeleteTagModalOpen}
+                            onConfirm={deleteTagAndHideModal}
+                            onCancel={() => setIsDeleteTagModalOpen(false)}
+                            shouldSetModalVisibility={false}
+                            prompt={translate('workspace.tags.deleteTagConfirmation')}
+                            confirmText={translate('common.delete')}
+                            cancelText={translate('common.cancel')}
+                            danger
                         />
-                    </View>
-                </ScreenWrapper>
+                        <View style={styles.flexGrow1}>
+                            <OfflineWithFeedback
+                                errors={ErrorUtils.getLatestErrorMessageField(currentPolicyTag)}
+                                pendingAction={currentPolicyTag.pendingFields?.enabled}
+                                errorRowStyles={styles.mh5}
+                                onClose={() => Policy.clearPolicyTagErrors(route.params.policyID, route.params.tagName)}
+                            >
+                                <View style={[styles.mt2, styles.mh5]}>
+                                    <View style={[styles.flexRow, styles.mb5, styles.mr2, styles.alignItemsCenter, styles.justifyContentBetween]}>
+                                        <Text>{translate('workspace.tags.enableTag')}</Text>
+                                        <Switch
+                                            isOn={currentPolicyTag.enabled}
+                                            accessibilityLabel={translate('workspace.tags.enableTag')}
+                                            onToggle={updateWorkspaceTagEnabled}
+                                        />
+                                    </View>
+                                </View>
+                            </OfflineWithFeedback>
+                            <MenuItemWithTopDescription
+                                title={currentPolicyTag.name}
+                                description={translate(`workspace.tags.tagName`)}
+                                onPress={navigateToEditTag}
+                                shouldShowRightIcon
+                            />
+                        </View>
+                    </ScreenWrapper>
+                </FeatureEnabledAccessOrNotFoundWrapper>
             </PaidPolicyAccessOrNotFoundWrapper>
         </AdminPolicyAccessOrNotFoundWrapper>
     );
diff --git a/src/pages/workspace/tags/WorkspaceCreateTagPage.tsx b/src/pages/workspace/tags/WorkspaceCreateTagPage.tsx
index 04c0cf8038d0..346d56891dd5 100644
--- a/src/pages/workspace/tags/WorkspaceCreateTagPage.tsx
+++ b/src/pages/workspace/tags/WorkspaceCreateTagPage.tsx
@@ -18,6 +18,7 @@ import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
+import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
 import PaidPolicyAccessOrNotFoundWrapper from '@pages/workspace/PaidPolicyAccessOrNotFoundWrapper';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
@@ -70,35 +71,40 @@ function CreateTagPage({route, policyTags}: CreateTagPageProps) {
     return (
         <AdminPolicyAccessOrNotFoundWrapper policyID={route.params.policyID}>
             <PaidPolicyAccessOrNotFoundWrapper policyID={route.params.policyID}>
-                <ScreenWrapper
-                    includeSafeAreaPaddingBottom={false}
-                    style={[styles.defaultModalContainer]}
-                    testID={CreateTagPage.displayName}
-                    shouldEnableMaxHeight
+                <FeatureEnabledAccessOrNotFoundWrapper
+                    policyID={route.params.policyID}
+                    featureName={CONST.POLICY.MORE_FEATURES.ARE_TAGS_ENABLED}
                 >
-                    <HeaderWithBackButton
-                        title={translate('workspace.tags.addTag')}
-                        onBackButtonPress={Navigation.goBack}
-                    />
-                    <FormProvider
-                        formID={ONYXKEYS.FORMS.WORKSPACE_TAG_FORM}
-                        onSubmit={createTag}
-                        submitButtonText={translate('common.save')}
-                        validate={validate}
-                        style={[styles.mh5, styles.flex1]}
-                        enabledWhenOffline
+                    <ScreenWrapper
+                        includeSafeAreaPaddingBottom={false}
+                        style={[styles.defaultModalContainer]}
+                        testID={CreateTagPage.displayName}
+                        shouldEnableMaxHeight
                     >
-                        <InputWrapper
-                            InputComponent={TextInput}
-                            maxLength={CONST.TAG_NAME_LIMIT}
-                            label={translate('common.name')}
-                            accessibilityLabel={translate('common.name')}
-                            inputID={INPUT_IDS.TAG_NAME}
-                            role={CONST.ROLE.PRESENTATION}
-                            ref={inputCallbackRef}
+                        <HeaderWithBackButton
+                            title={translate('workspace.tags.addTag')}
+                            onBackButtonPress={Navigation.goBack}
                         />
-                    </FormProvider>
-                </ScreenWrapper>
+                        <FormProvider
+                            formID={ONYXKEYS.FORMS.WORKSPACE_TAG_FORM}
+                            onSubmit={createTag}
+                            submitButtonText={translate('common.save')}
+                            validate={validate}
+                            style={[styles.mh5, styles.flex1]}
+                            enabledWhenOffline
+                        >
+                            <InputWrapper
+                                InputComponent={TextInput}
+                                maxLength={CONST.TAG_NAME_LIMIT}
+                                label={translate('common.name')}
+                                accessibilityLabel={translate('common.name')}
+                                inputID={INPUT_IDS.TAG_NAME}
+                                role={CONST.ROLE.PRESENTATION}
+                                ref={inputCallbackRef}
+                            />
+                        </FormProvider>
+                    </ScreenWrapper>
+                </FeatureEnabledAccessOrNotFoundWrapper>
             </PaidPolicyAccessOrNotFoundWrapper>
         </AdminPolicyAccessOrNotFoundWrapper>
     );
diff --git a/src/pages/workspace/tags/WorkspaceEditTagsPage.tsx b/src/pages/workspace/tags/WorkspaceEditTagsPage.tsx
index 76509454b0f2..0072d37ef631 100644
--- a/src/pages/workspace/tags/WorkspaceEditTagsPage.tsx
+++ b/src/pages/workspace/tags/WorkspaceEditTagsPage.tsx
@@ -16,7 +16,9 @@ import * as Policy from '@libs/actions/Policy';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import type {SettingsNavigatorParamList} from '@navigation/types';
+import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
 import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
+import PaidPolicyAccessOrNotFoundWrapper from '@pages/workspace/PaidPolicyAccessOrNotFoundWrapper';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
@@ -53,38 +55,42 @@ function WorkspaceEditTagsPage({route, policyTags}: WorkspaceEditTagsPageProps)
     );
 
     return (
-        <FeatureEnabledAccessOrNotFoundWrapper
-            policyID={route.params.policyID}
-            featureName={CONST.POLICY.MORE_FEATURES.ARE_TAGS_ENABLED}
-        >
-            <ScreenWrapper
-                includeSafeAreaPaddingBottom={false}
-                shouldEnableMaxHeight
-                testID={WorkspaceEditTagsPage.displayName}
-            >
-                <HeaderWithBackButton title={translate(`workspace.tags.customTagName`)} />
-                <FormProvider
-                    style={[styles.flexGrow1, styles.ph5]}
-                    formID={ONYXKEYS.FORMS.POLICY_TAG_NAME_FORM}
-                    onSubmit={updateTaglistName}
-                    validate={validateTagName}
-                    submitButtonText={translate('common.save')}
-                    enabledWhenOffline
+        <AdminPolicyAccessOrNotFoundWrapper policyID={route.params.policyID}>
+            <PaidPolicyAccessOrNotFoundWrapper policyID={route.params.policyID}>
+                <FeatureEnabledAccessOrNotFoundWrapper
+                    policyID={route.params.policyID}
+                    featureName={CONST.POLICY.MORE_FEATURES.ARE_TAGS_ENABLED}
                 >
-                    <View style={styles.mb4}>
-                        <InputWrapper
-                            InputComponent={TextInput}
-                            inputID={INPUT_IDS.POLICY_TAGS_NAME}
-                            label={translate(`workspace.tags.customTagName`)}
-                            accessibilityLabel={translate(`workspace.tags.customTagName`)}
-                            defaultValue={taglistName}
-                            role={CONST.ROLE.PRESENTATION}
-                            ref={inputCallbackRef}
-                        />
-                    </View>
-                </FormProvider>
-            </ScreenWrapper>
-        </FeatureEnabledAccessOrNotFoundWrapper>
+                    <ScreenWrapper
+                        includeSafeAreaPaddingBottom={false}
+                        shouldEnableMaxHeight
+                        testID={WorkspaceEditTagsPage.displayName}
+                    >
+                        <HeaderWithBackButton title={translate(`workspace.tags.customTagName`)} />
+                        <FormProvider
+                            style={[styles.flexGrow1, styles.ph5]}
+                            formID={ONYXKEYS.FORMS.POLICY_TAG_NAME_FORM}
+                            onSubmit={updateTaglistName}
+                            validate={validateTagName}
+                            submitButtonText={translate('common.save')}
+                            enabledWhenOffline
+                        >
+                            <View style={styles.mb4}>
+                                <InputWrapper
+                                    InputComponent={TextInput}
+                                    inputID={INPUT_IDS.POLICY_TAGS_NAME}
+                                    label={translate(`workspace.tags.customTagName`)}
+                                    accessibilityLabel={translate(`workspace.tags.customTagName`)}
+                                    defaultValue={taglistName}
+                                    role={CONST.ROLE.PRESENTATION}
+                                    ref={inputCallbackRef}
+                                />
+                            </View>
+                        </FormProvider>
+                    </ScreenWrapper>
+                </FeatureEnabledAccessOrNotFoundWrapper>
+            </PaidPolicyAccessOrNotFoundWrapper>
+        </AdminPolicyAccessOrNotFoundWrapper>
     );
 }
 
diff --git a/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
index 8d78d9ec7ba2..b421698b8f2f 100644
--- a/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
+++ b/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx
@@ -41,7 +41,6 @@ function WorkspaceTagsSettingsPage({route, policyTags}: WorkspaceTagsSettingsPag
         },
         [route.params.policyID],
     );
-
     return (
         <AdminPolicyAccessOrNotFoundWrapper policyID={route.params.policyID}>
             <PaidPolicyAccessOrNotFoundWrapper policyID={route.params.policyID}>
diff --git a/src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx b/src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx
index c0790bb8abd8..a2f40b378b3a 100644
--- a/src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx
+++ b/src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx
@@ -16,6 +16,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
+import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
 import PaidPolicyAccessOrNotFoundWrapper from '@pages/workspace/PaidPolicyAccessOrNotFoundWrapper';
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
@@ -71,49 +72,54 @@ function WorkspaceCreateTaxPage({
     return (
         <AdminPolicyAccessOrNotFoundWrapper policyID={policyID}>
             <PaidPolicyAccessOrNotFoundWrapper policyID={policyID}>
-                <ScreenWrapper
-                    testID={WorkspaceCreateTaxPage.displayName}
-                    includeSafeAreaPaddingBottom={false}
-                    style={[styles.defaultModalContainer]}
+                <FeatureEnabledAccessOrNotFoundWrapper
+                    policyID={policyID}
+                    featureName={CONST.POLICY.MORE_FEATURES.ARE_TAXES_ENABLED}
                 >
-                    <View style={[styles.h100, styles.flex1, styles.justifyContentBetween]}>
-                        <HeaderWithBackButton title={translate('workspace.taxes.addRate')} />
-                        <FormProvider
-                            style={[styles.flexGrow1, styles.mh5]}
-                            formID={ONYXKEYS.FORMS.WORKSPACE_NEW_TAX_FORM}
-                            onSubmit={submitForm}
-                            validate={validate}
-                            submitButtonText={translate('common.save')}
-                            enabledWhenOffline
-                            shouldValidateOnBlur={false}
-                            disablePressOnEnter={false}
-                        >
-                            <View style={styles.mhn5}>
-                                <InputWrapper
-                                    InputComponent={TextPicker}
-                                    inputID={INPUT_IDS.NAME}
-                                    label={translate('common.name')}
-                                    description={translate('common.name')}
-                                    rightLabel={translate('common.required')}
-                                    accessibilityLabel={translate('workspace.editor.nameInputLabel')}
-                                    maxLength={CONST.TAX_RATES.NAME_MAX_LENGTH}
-                                    multiline={false}
-                                    role={CONST.ROLE.PRESENTATION}
-                                    autoFocus
-                                />
-                                <InputWrapper
-                                    InputComponent={AmountPicker}
-                                    inputID={INPUT_IDS.VALUE}
-                                    title={(v) => (v ? getTaxValueWithPercentage(v) : '')}
-                                    description={translate('workspace.taxes.value')}
-                                    rightLabel={translate('common.required')}
-                                    hideCurrencySymbol
-                                    extraSymbol={<Text style={styles.iouAmountText}>%</Text>}
-                                />
-                            </View>
-                        </FormProvider>
-                    </View>
-                </ScreenWrapper>
+                    <ScreenWrapper
+                        testID={WorkspaceCreateTaxPage.displayName}
+                        includeSafeAreaPaddingBottom={false}
+                        style={[styles.defaultModalContainer]}
+                    >
+                        <View style={[styles.h100, styles.flex1, styles.justifyContentBetween]}>
+                            <HeaderWithBackButton title={translate('workspace.taxes.addRate')} />
+                            <FormProvider
+                                style={[styles.flexGrow1, styles.mh5]}
+                                formID={ONYXKEYS.FORMS.WORKSPACE_NEW_TAX_FORM}
+                                onSubmit={submitForm}
+                                validate={validate}
+                                submitButtonText={translate('common.save')}
+                                enabledWhenOffline
+                                shouldValidateOnBlur={false}
+                                disablePressOnEnter={false}
+                            >
+                                <View style={styles.mhn5}>
+                                    <InputWrapper
+                                        InputComponent={TextPicker}
+                                        inputID={INPUT_IDS.NAME}
+                                        label={translate('common.name')}
+                                        description={translate('common.name')}
+                                        rightLabel={translate('common.required')}
+                                        accessibilityLabel={translate('workspace.editor.nameInputLabel')}
+                                        maxLength={CONST.TAX_RATES.NAME_MAX_LENGTH}
+                                        multiline={false}
+                                        role={CONST.ROLE.PRESENTATION}
+                                        autoFocus
+                                    />
+                                    <InputWrapper
+                                        InputComponent={AmountPicker}
+                                        inputID={INPUT_IDS.VALUE}
+                                        title={(v) => (v ? getTaxValueWithPercentage(v) : '')}
+                                        description={translate('workspace.taxes.value')}
+                                        rightLabel={translate('common.required')}
+                                        hideCurrencySymbol
+                                        extraSymbol={<Text style={styles.iouAmountText}>%</Text>}
+                                    />
+                                </View>
+                            </FormProvider>
+                        </View>
+                    </ScreenWrapper>
+                </FeatureEnabledAccessOrNotFoundWrapper>
             </PaidPolicyAccessOrNotFoundWrapper>
         </AdminPolicyAccessOrNotFoundWrapper>
     );
diff --git a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
index 8eb730c0134f..74595a98cc81 100644
--- a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
+++ b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
@@ -21,6 +21,7 @@ import {clearTaxRateError} from '@libs/actions/TaxRate';
 import Navigation from '@libs/Navigation/Navigation';
 import type {WorkspacesCentralPaneNavigatorParamList} from '@navigation/types';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
+import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
 import PaidPolicyAccessOrNotFoundWrapper from '@pages/workspace/PaidPolicyAccessOrNotFoundWrapper';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
@@ -152,45 +153,50 @@ function WorkspaceTaxesPage({policy, route}: WorkspaceTaxesPageProps) {
     return (
         <AdminPolicyAccessOrNotFoundWrapper policyID={route.params.policyID}>
             <PaidPolicyAccessOrNotFoundWrapper policyID={route.params.policyID}>
-                <ScreenWrapper
-                    includeSafeAreaPaddingBottom={false}
-                    style={[styles.defaultModalContainer]}
-                    testID={WorkspaceTaxesPage.displayName}
-                    shouldShowOfflineIndicatorInWideScreen
+                <FeatureEnabledAccessOrNotFoundWrapper
+                    policyID={route.params.policyID}
+                    featureName={CONST.POLICY.MORE_FEATURES.ARE_TAXES_ENABLED}
                 >
-                    <HeaderWithBackButton
-                        icon={Illustrations.Coins}
-                        title={translate('workspace.common.taxes')}
-                        shouldShowBackButton={isSmallScreenWidth}
+                    <ScreenWrapper
+                        includeSafeAreaPaddingBottom={false}
+                        style={[styles.defaultModalContainer]}
+                        testID={WorkspaceTaxesPage.displayName}
+                        shouldShowOfflineIndicatorInWideScreen
                     >
-                        {!isSmallScreenWidth && headerButtons}
-                    </HeaderWithBackButton>
-
-                    {isSmallScreenWidth && <View style={[styles.pl5, styles.pr5]}>{headerButtons}</View>}
-
-                    <View style={[styles.ph5, styles.pb5, styles.pt3]}>
-                        <Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.taxes.subtitle')}</Text>
-                    </View>
-                    {isLoading && (
-                        <ActivityIndicator
-                            size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
-                            style={[styles.flex1]}
-                            color={theme.spinner}
+                        <HeaderWithBackButton
+                            icon={Illustrations.Coins}
+                            title={translate('workspace.common.taxes')}
+                            shouldShowBackButton={isSmallScreenWidth}
+                        >
+                            {!isSmallScreenWidth && headerButtons}
+                        </HeaderWithBackButton>
+
+                        {isSmallScreenWidth && <View style={[styles.pl5, styles.pr5]}>{headerButtons}</View>}
+
+                        <View style={[styles.ph5, styles.pb5, styles.pt3]}>
+                            <Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.taxes.subtitle')}</Text>
+                        </View>
+                        {isLoading && (
+                            <ActivityIndicator
+                                size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
+                                style={[styles.flex1]}
+                                color={theme.spinner}
+                            />
+                        )}
+                        <SelectionList
+                            canSelectMultiple
+                            sections={[{data: taxesList, indexOffset: 0, isDisabled: false}]}
+                            onCheckboxPress={toggleTax}
+                            onSelectRow={() => {}}
+                            onSelectAll={toggleAllTaxes}
+                            showScrollIndicator
+                            ListItem={TableListItem}
+                            customListHeader={getCustomListHeader()}
+                            listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}
+                            onDismissError={(item) => (item.keyForList ? clearTaxRateError(route.params.policyID, item.keyForList, item.pendingAction) : undefined)}
                         />
-                    )}
-                    <SelectionList
-                        canSelectMultiple
-                        sections={[{data: taxesList, indexOffset: 0, isDisabled: false}]}
-                        onCheckboxPress={toggleTax}
-                        onSelectRow={() => {}}
-                        onSelectAll={toggleAllTaxes}
-                        showScrollIndicator
-                        ListItem={TableListItem}
-                        customListHeader={getCustomListHeader()}
-                        listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}
-                        onDismissError={(item) => (item.keyForList ? clearTaxRateError(route.params.policyID, item.keyForList, item.pendingAction) : undefined)}
-                    />
-                </ScreenWrapper>
+                    </ScreenWrapper>
+                </FeatureEnabledAccessOrNotFoundWrapper>
             </PaidPolicyAccessOrNotFoundWrapper>
         </AdminPolicyAccessOrNotFoundWrapper>
     );
diff --git a/src/pages/workspace/taxes/WorkspaceTaxesSettingsCustomTaxName.tsx b/src/pages/workspace/taxes/WorkspaceTaxesSettingsCustomTaxName.tsx
index 892434ce2d52..5b08a06247b0 100644
--- a/src/pages/workspace/taxes/WorkspaceTaxesSettingsCustomTaxName.tsx
+++ b/src/pages/workspace/taxes/WorkspaceTaxesSettingsCustomTaxName.tsx
@@ -13,6 +13,7 @@ import {setPolicyCustomTaxName} from '@libs/actions/Policy';
 import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
+import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
 import PaidPolicyAccessOrNotFoundWrapper from '@pages/workspace/PaidPolicyAccessOrNotFoundWrapper';
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
@@ -43,37 +44,42 @@ function WorkspaceTaxesSettingsCustomTaxName({
     return (
         <AdminPolicyAccessOrNotFoundWrapper policyID={policyID}>
             <PaidPolicyAccessOrNotFoundWrapper policyID={policyID}>
-                <ScreenWrapper
-                    includeSafeAreaPaddingBottom={false}
-                    shouldEnableMaxHeight
-                    testID={WorkspaceTaxesSettingsCustomTaxName.displayName}
-                    style={styles.defaultModalContainer}
+                <FeatureEnabledAccessOrNotFoundWrapper
+                    policyID={policyID}
+                    featureName={CONST.POLICY.MORE_FEATURES.ARE_TAXES_ENABLED}
                 >
-                    <HeaderWithBackButton title={translate('workspace.taxes.customTaxName')} />
-
-                    <FormProvider
-                        formID={ONYXKEYS.FORMS.WORKSPACE_TAX_CUSTOM_NAME}
-                        submitButtonText={translate('workspace.editor.save')}
-                        style={[styles.flexGrow1, styles.ph5]}
-                        scrollContextEnabled
-                        enabledWhenOffline
-                        onSubmit={submit}
+                    <ScreenWrapper
+                        includeSafeAreaPaddingBottom={false}
+                        shouldEnableMaxHeight
+                        testID={WorkspaceTaxesSettingsCustomTaxName.displayName}
+                        style={styles.defaultModalContainer}
                     >
-                        <View style={styles.mb4}>
-                            <InputWrapper
-                                InputComponent={TextInput}
-                                role={CONST.ROLE.PRESENTATION}
-                                inputID={INPUT_IDS.NAME}
-                                label={translate('workspace.editor.nameInputLabel')}
-                                accessibilityLabel={translate('workspace.editor.nameInputLabel')}
-                                defaultValue={policy?.taxRates?.name}
-                                maxLength={CONST.TAX_RATES.NAME_MAX_LENGTH}
-                                multiline={false}
-                                ref={inputCallbackRef}
-                            />
-                        </View>
-                    </FormProvider>
-                </ScreenWrapper>
+                        <HeaderWithBackButton title={translate('workspace.taxes.customTaxName')} />
+
+                        <FormProvider
+                            formID={ONYXKEYS.FORMS.WORKSPACE_TAX_CUSTOM_NAME}
+                            submitButtonText={translate('workspace.editor.save')}
+                            style={[styles.flexGrow1, styles.ph5]}
+                            scrollContextEnabled
+                            enabledWhenOffline
+                            onSubmit={submit}
+                        >
+                            <View style={styles.mb4}>
+                                <InputWrapper
+                                    InputComponent={TextInput}
+                                    role={CONST.ROLE.PRESENTATION}
+                                    inputID={INPUT_IDS.NAME}
+                                    label={translate('workspace.editor.nameInputLabel')}
+                                    accessibilityLabel={translate('workspace.editor.nameInputLabel')}
+                                    defaultValue={policy?.taxRates?.name}
+                                    maxLength={CONST.TAX_RATES.NAME_MAX_LENGTH}
+                                    multiline={false}
+                                    ref={inputCallbackRef}
+                                />
+                            </View>
+                        </FormProvider>
+                    </ScreenWrapper>
+                </FeatureEnabledAccessOrNotFoundWrapper>
             </PaidPolicyAccessOrNotFoundWrapper>
         </AdminPolicyAccessOrNotFoundWrapper>
     );
diff --git a/src/pages/workspace/taxes/WorkspaceTaxesSettingsForeignCurrency.tsx b/src/pages/workspace/taxes/WorkspaceTaxesSettingsForeignCurrency.tsx
index 4a6626a78286..91d543b51b09 100644
--- a/src/pages/workspace/taxes/WorkspaceTaxesSettingsForeignCurrency.tsx
+++ b/src/pages/workspace/taxes/WorkspaceTaxesSettingsForeignCurrency.tsx
@@ -11,9 +11,11 @@ import {setForeignCurrencyDefault} from '@libs/actions/Policy';
 import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
+import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
 import PaidPolicyAccessOrNotFoundWrapper from '@pages/workspace/PaidPolicyAccessOrNotFoundWrapper';
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
+import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 
@@ -37,27 +39,32 @@ function WorkspaceTaxesSettingsForeignCurrency({
     return (
         <AdminPolicyAccessOrNotFoundWrapper policyID={policyID}>
             <PaidPolicyAccessOrNotFoundWrapper policyID={policyID}>
-                <ScreenWrapper
-                    includeSafeAreaPaddingBottom={false}
-                    shouldEnableMaxHeight
-                    testID={WorkspaceTaxesSettingsForeignCurrency.displayName}
-                    style={styles.defaultModalContainer}
+                <FeatureEnabledAccessOrNotFoundWrapper
+                    policyID={policyID}
+                    featureName={CONST.POLICY.MORE_FEATURES.ARE_TAXES_ENABLED}
                 >
-                    {({insets}) => (
-                        <>
-                            <HeaderWithBackButton title={translate('workspace.taxes.foreignDefault')} />
+                    <ScreenWrapper
+                        includeSafeAreaPaddingBottom={false}
+                        shouldEnableMaxHeight
+                        testID={WorkspaceTaxesSettingsForeignCurrency.displayName}
+                        style={styles.defaultModalContainer}
+                    >
+                        {({insets}) => (
+                            <>
+                                <HeaderWithBackButton title={translate('workspace.taxes.foreignDefault')} />
 
-                            <View style={[styles.mb4, styles.flex1]}>
-                                <TaxPicker
-                                    selectedTaxRate={policy?.taxRates?.foreignTaxDefault}
-                                    taxRates={policy?.taxRates}
-                                    insets={insets}
-                                    onSubmit={submit}
-                                />
-                            </View>
-                        </>
-                    )}
-                </ScreenWrapper>
+                                <View style={[styles.mb4, styles.flex1]}>
+                                    <TaxPicker
+                                        selectedTaxRate={policy?.taxRates?.foreignTaxDefault}
+                                        taxRates={policy?.taxRates}
+                                        insets={insets}
+                                        onSubmit={submit}
+                                    />
+                                </View>
+                            </>
+                        )}
+                    </ScreenWrapper>
+                </FeatureEnabledAccessOrNotFoundWrapper>
             </PaidPolicyAccessOrNotFoundWrapper>
         </AdminPolicyAccessOrNotFoundWrapper>
     );
diff --git a/src/pages/workspace/taxes/WorkspaceTaxesSettingsPage.tsx b/src/pages/workspace/taxes/WorkspaceTaxesSettingsPage.tsx
index 1fe6abb96b4c..0d1a8f1629c7 100644
--- a/src/pages/workspace/taxes/WorkspaceTaxesSettingsPage.tsx
+++ b/src/pages/workspace/taxes/WorkspaceTaxesSettingsPage.tsx
@@ -11,9 +11,11 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
+import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
 import PaidPolicyAccessOrNotFoundWrapper from '@pages/workspace/PaidPolicyAccessOrNotFoundWrapper';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
+import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 
@@ -55,31 +57,36 @@ function WorkspaceTaxesSettingsPage({
     return (
         <AdminPolicyAccessOrNotFoundWrapper policyID={policyID}>
             <PaidPolicyAccessOrNotFoundWrapper policyID={policyID}>
-                <ScreenWrapper
-                    testID={WorkspaceTaxesSettingsPage.displayName}
-                    style={styles.defaultModalContainer}
+                <FeatureEnabledAccessOrNotFoundWrapper
+                    policyID={policyID}
+                    featureName={CONST.POLICY.MORE_FEATURES.ARE_TAXES_ENABLED}
                 >
-                    <ScrollView contentContainerStyle={styles.flexGrow1}>
-                        <HeaderWithBackButton title={translate('common.settings')} />
-                        <View style={styles.flex1}>
-                            {menuItems.map((item) => (
-                                <OfflineWithFeedback
-                                    key={item.description}
-                                    pendingAction={item.pendingAction}
-                                >
-                                    <MenuItemWithTopDescription
-                                        shouldShowRightIcon
-                                        title={item.title}
-                                        description={item.description}
-                                        style={[styles.moneyRequestMenuItem]}
-                                        titleStyle={styles.flex1}
-                                        onPress={item.action}
-                                    />
-                                </OfflineWithFeedback>
-                            ))}
-                        </View>
-                    </ScrollView>
-                </ScreenWrapper>
+                    <ScreenWrapper
+                        testID={WorkspaceTaxesSettingsPage.displayName}
+                        style={styles.defaultModalContainer}
+                    >
+                        <ScrollView contentContainerStyle={styles.flexGrow1}>
+                            <HeaderWithBackButton title={translate('common.settings')} />
+                            <View style={styles.flex1}>
+                                {menuItems.map((item) => (
+                                    <OfflineWithFeedback
+                                        key={item.description}
+                                        pendingAction={item.pendingAction}
+                                    >
+                                        <MenuItemWithTopDescription
+                                            shouldShowRightIcon
+                                            title={item.title}
+                                            description={item.description}
+                                            style={[styles.moneyRequestMenuItem]}
+                                            titleStyle={styles.flex1}
+                                            onPress={item.action}
+                                        />
+                                    </OfflineWithFeedback>
+                                ))}
+                            </View>
+                        </ScrollView>
+                    </ScreenWrapper>
+                </FeatureEnabledAccessOrNotFoundWrapper>
             </PaidPolicyAccessOrNotFoundWrapper>
         </AdminPolicyAccessOrNotFoundWrapper>
     );
diff --git a/src/pages/workspace/taxes/WorkspaceTaxesSettingsWorkspaceCurrency.tsx b/src/pages/workspace/taxes/WorkspaceTaxesSettingsWorkspaceCurrency.tsx
index 68c50f3af830..2fe2985daa22 100644
--- a/src/pages/workspace/taxes/WorkspaceTaxesSettingsWorkspaceCurrency.tsx
+++ b/src/pages/workspace/taxes/WorkspaceTaxesSettingsWorkspaceCurrency.tsx
@@ -11,9 +11,11 @@ import {setWorkspaceCurrencyDefault} from '@libs/actions/Policy';
 import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
+import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
 import PaidPolicyAccessOrNotFoundWrapper from '@pages/workspace/PaidPolicyAccessOrNotFoundWrapper';
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
+import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 
@@ -37,27 +39,32 @@ function WorkspaceTaxesSettingsWorkspaceCurrency({
     return (
         <AdminPolicyAccessOrNotFoundWrapper policyID={policyID}>
             <PaidPolicyAccessOrNotFoundWrapper policyID={policyID}>
-                <ScreenWrapper
-                    includeSafeAreaPaddingBottom={false}
-                    shouldEnableMaxHeight
-                    testID={WorkspaceTaxesSettingsWorkspaceCurrency.displayName}
-                    style={styles.defaultModalContainer}
+                <FeatureEnabledAccessOrNotFoundWrapper
+                    policyID={policyID}
+                    featureName={CONST.POLICY.MORE_FEATURES.ARE_TAXES_ENABLED}
                 >
-                    {({insets}) => (
-                        <>
-                            <HeaderWithBackButton title={translate('workspace.taxes.workspaceDefault')} />
+                    <ScreenWrapper
+                        includeSafeAreaPaddingBottom={false}
+                        shouldEnableMaxHeight
+                        testID={WorkspaceTaxesSettingsWorkspaceCurrency.displayName}
+                        style={styles.defaultModalContainer}
+                    >
+                        {({insets}) => (
+                            <>
+                                <HeaderWithBackButton title={translate('workspace.taxes.workspaceDefault')} />
 
-                            <View style={[styles.mb4, styles.flex1]}>
-                                <TaxPicker
-                                    selectedTaxRate={policy?.taxRates?.defaultExternalID}
-                                    taxRates={policy?.taxRates}
-                                    insets={insets}
-                                    onSubmit={submit}
-                                />
-                            </View>
-                        </>
-                    )}
-                </ScreenWrapper>
+                                <View style={[styles.mb4, styles.flex1]}>
+                                    <TaxPicker
+                                        selectedTaxRate={policy?.taxRates?.defaultExternalID}
+                                        taxRates={policy?.taxRates}
+                                        insets={insets}
+                                        onSubmit={submit}
+                                    />
+                                </View>
+                            </>
+                        )}
+                    </ScreenWrapper>
+                </FeatureEnabledAccessOrNotFoundWrapper>
             </PaidPolicyAccessOrNotFoundWrapper>
         </AdminPolicyAccessOrNotFoundWrapper>
     );
diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx
index d0dddf554807..7394d4f90596 100644
--- a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx
+++ b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx
@@ -228,19 +228,19 @@ function WorkspaceWorkflowsPage({policy, betas, route, reimbursementAccount, ses
     const isLoading = reimbursementAccount?.isLoading ?? true;
 
     return (
-        <WorkspacePageWithSections
-            headerText={translate('workspace.common.workflows')}
-            icon={Illustrations.Workflows}
-            route={route}
-            guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_WORKFLOWS}
-            shouldShowOfflineIndicatorInWideScreen
-            shouldShowNotFoundPage={!isPaidGroupPolicy || !isPolicyAdmin}
-            shouldSkipVBBACall
-            isLoading={isLoading}
+        <FeatureEnabledAccessOrNotFoundWrapper
+            policyID={route.params.policyID}
+            featureName={CONST.POLICY.MORE_FEATURES.ARE_WORKFLOWS_ENABLED}
         >
-            <FeatureEnabledAccessOrNotFoundWrapper
-                policyID={route.params.policyID}
-                featureName={CONST.POLICY.MORE_FEATURES.ARE_WORKFLOWS_ENABLED}
+            <WorkspacePageWithSections
+                headerText={translate('workspace.common.workflows')}
+                icon={Illustrations.Workflows}
+                route={route}
+                guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_WORKFLOWS}
+                shouldShowOfflineIndicatorInWideScreen
+                shouldShowNotFoundPage={!isPaidGroupPolicy || !isPolicyAdmin}
+                shouldSkipVBBACall
+                isLoading={isLoading}
             >
                 <View style={[styles.mt3, styles.textStrong, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                     <Section
@@ -258,8 +258,8 @@ function WorkspaceWorkflowsPage({policy, betas, route, reimbursementAccount, ses
                         </View>
                     </Section>
                 </View>
-            </FeatureEnabledAccessOrNotFoundWrapper>
-        </WorkspacePageWithSections>
+            </WorkspacePageWithSections>
+        </FeatureEnabledAccessOrNotFoundWrapper>
     );
 }