Add access wrapper

Author: VickyStash

src/pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts.tsx

@@ -15,7 +15,9 @@ import * as CardUtils from '@libs/CardUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import Navigation from '@navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@navigation/types';
+import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import * as Card from '@userActions/Card';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
@@ -74,26 +76,32 @@ function WorkspaceExpensifyCardBankAccounts({route}: WorkspaceExpensifyCardBankA
     };
 
     return (
-        <ScreenWrapper
-            testID={WorkspaceExpensifyCardBankAccounts.displayName}
-            includeSafeAreaPaddingBottom={false}
-            shouldEnablePickerAvoiding={false}
+        <AccessOrNotFoundWrapper
+            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
+            policyID={policyID}
+            featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
         >
-            <HeaderWithBackButton
-                shouldShowBackButton
-                onBackButtonPress={() => Navigation.goBack()}
-                title={translate('workspace.expensifyCard.chooseBankAccount')}
-            />
-            <View style={styles.flex1}>
-                <Text style={[styles.mh5, styles.mb3]}>{translate('workspace.expensifyCard.chooseExistingBank')}</Text>
-                {renderBankOptions()}
-                <MenuItem
-                    icon={Expensicons.Plus}
-                    title={translate('workspace.expensifyCard.addNewBankAccount')}
-                    onPress={handleAddBankAccount}
+            <ScreenWrapper
+                testID={WorkspaceExpensifyCardBankAccounts.displayName}
+                includeSafeAreaPaddingBottom={false}
+                shouldEnablePickerAvoiding={false}
+            >
+                <HeaderWithBackButton
+                    shouldShowBackButton
+                    onBackButtonPress={() => Navigation.goBack()}
+                    title={translate('workspace.expensifyCard.chooseBankAccount')}
                 />
-            </View>
-        </ScreenWrapper>
+                <View style={styles.flex1}>
+                    <Text style={[styles.mh5, styles.mb3]}>{translate('workspace.expensifyCard.chooseExistingBank')}</Text>
+                    {renderBankOptions()}
+                    <MenuItem
+                        icon={Expensicons.Plus}
+                        title={translate('workspace.expensifyCard.addNewBankAccount')}
+                        onPress={handleAddBankAccount}
+                    />
+                </View>
+            </ScreenWrapper>
+        </AccessOrNotFoundWrapper>
     );
 }
 

src/pages/workspace/expensifyCard/issueNew/IssueNewCardPage.tsx

@@ -2,6 +2,7 @@ import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useEffect} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import type {SettingsNavigatorParamList} from '@navigation/types';
+import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
 import * as Card from '@userActions/Card';
@@ -29,27 +30,39 @@ function IssueNewCardPage({policy, route}: IssueNewCardPageProps) {
         Card.startIssueNewCardFlow(policyID);
     }, [policyID]);
 
-    switch (currentStep) {
-        case CONST.EXPENSIFY_CARD.STEP.ASSIGNEE:
-            return <AssigneeStep policy={policy} />;
-        case CONST.EXPENSIFY_CARD.STEP.CARD_TYPE:
-            return <CardTypeStep />;
-        case CONST.EXPENSIFY_CARD.STEP.LIMIT_TYPE:
-            return <LimitTypeStep policy={policy} />;
-        case CONST.EXPENSIFY_CARD.STEP.LIMIT:
-            return <LimitStep />;
-        case CONST.EXPENSIFY_CARD.STEP.CARD_NAME:
-            return <CardNameStep />;
-        case CONST.EXPENSIFY_CARD.STEP.CONFIRMATION:
-            return (
-                <ConfirmationStep
-                    policyID={policyID}
-                    backTo={backTo}
-                />
-            );
-        default:
-            return <AssigneeStep policy={policy} />;
-    }
+    const getCurrentStep = () => {
+        switch (currentStep) {
+            case CONST.EXPENSIFY_CARD.STEP.ASSIGNEE:
+                return <AssigneeStep policy={policy} />;
+            case CONST.EXPENSIFY_CARD.STEP.CARD_TYPE:
+                return <CardTypeStep />;
+            case CONST.EXPENSIFY_CARD.STEP.LIMIT_TYPE:
+                return <LimitTypeStep policy={policy} />;
+            case CONST.EXPENSIFY_CARD.STEP.LIMIT:
+                return <LimitStep />;
+            case CONST.EXPENSIFY_CARD.STEP.CARD_NAME:
+                return <CardNameStep />;
+            case CONST.EXPENSIFY_CARD.STEP.CONFIRMATION:
+                return (
+                    <ConfirmationStep
+                        policyID={policyID}
+                        backTo={backTo}
+                    />
+                );
+            default:
+                return <AssigneeStep policy={policy} />;
+        }
+    };
+
+    return (
+        <AccessOrNotFoundWrapper
+            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
+            policyID={policyID}
+            featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
+        >
+            {getCurrentStep()}
+        </AccessOrNotFoundWrapper>
+    );
 }
 
 IssueNewCardPage.displayName = 'IssueNewCardPage';