[Free trial] Implement Restricted Action screen

src/ROUTES.ts

@@ -908,6 +908,10 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/accounting/quickbooks-online/import/taxes',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/quickbooks-online/import/taxes` as const,
     },
+    RESTRICTED_ACTION: {
+        route: 'restricted-action/workspace/:policyID',
+        getRoute: (policyID: string) => `restricted-action/workspace/${policyID}` as const,
+    },
 } as const;
 
 /**

src/SCREENS.ts

@@ -141,6 +141,7 @@ const SCREENS = {
         TRAVEL: 'Travel',
         SEARCH_REPORT: 'SearchReport',
         SETTINGS_CATEGORIES: 'SettingsCategories',
+        RESTRICTED_ACTION: 'RestrictedAction',
     },
     ONBOARDING_MODAL: {
         ONBOARDING: 'Onboarding',
@@ -378,6 +379,7 @@ const SCREENS = {
     KEYBOARD_SHORTCUTS: 'KeyboardShortcuts',
     TRANSACTION_RECEIPT: 'TransactionReceipt',
     FEATURE_TRAINING_ROOT: 'FeatureTraining_Root',
+    RESTRICTED_ACTION_ROOT: 'RestrictedAction_Root',
 } as const;
 
 type Screen = DeepValueOf<typeof SCREENS>;

src/components/Icon/Illustrations.ts

@@ -94,6 +94,7 @@ import WalletAlt from '@assets/images/simple-illustrations/simple-illustration__
 import Workflows from '@assets/images/simple-illustrations/simple-illustration__workflows.svg';
 import ExpensifyApprovedLogoLight from '@assets/images/subscription-details__approvedlogo--light.svg';
 import ExpensifyApprovedLogo from '@assets/images/subscription-details__approvedlogo.svg';
+import LockClosedOrange from '@assets/images/simple-illustrations/simple-illustration__lockclosed_orange.svg'
 
 export {
     Abracadabra,
@@ -192,4 +193,5 @@ export {
     SendMoney,
     CheckmarkCircle,
     CreditCardEyes,
+    LockClosedOrange,
 };

src/languages/en.ts

@@ -2683,6 +2683,18 @@ export default {
             errorDescriptionPartTwo: 'reach out to Concierge',
             errorDescriptionPartThree: 'for help.',
         },
+        restrictedAction: {
+            restricted: 'Restricted',
+            actionsAreCurrentlyRestricted: ({workspaceName}) => `Actions on the ${workspaceName} workspace are currently restricted`,
+            workspaceOwnerWillNeedToAddOrUpdatePaymentCard: ({workspaceOwnerName}) => `Workspace owner, ${workspaceOwnerName} will need to add or update the payment card on file to unlock new workspace activity.`,
+            youWillNeedToAddOrUpdatePaymentCard: 'You\'ll need to add or update the payment card on file to unlock new workspace activity.',
+            addPaymentCardToUnlock: 'Add a payment card to unlock!',
+            addPaymentCardToContinueUsingWorkspace: 'Add a payment card to continue using this workspace',
+            pleaseReachOutToYourWorkspaceAdmin: 'Please reach out to your workspace admin for any questions.',
+            chatWithYourAdmin: 'Chat with your admin',
+            chatInAdmins: 'Chat in #admins',
+            addPaymentCard: 'Add payment card',
+        }
     },
     getAssistancePage: {
         title: 'Get assistance',

src/languages/es.ts

@@ -2721,6 +2721,18 @@ export default {
             errorDescriptionPartTwo: 'contacta con el conserje',
             errorDescriptionPartThree: 'por ayuda.',
         },
+        restrictedAction: {
+            restricted: 'Restringido',
+            actionsAreCurrentlyRestricted: ({ workspaceName }) => `Los gastos para ${workspaceName} están actualmente restringidos`,
+            workspaceOwnerWillNeedToAddOrUpdatePaymentCard: ({workspaceOwnerName}) => `El propietario del espacio de trabajo, ${workspaceOwnerName} tendrá que añadir o actualizar la tarjeta de pago registrada para desbloquear nueva actividad en el espacio de trabajo.`,
+            youWillNeedToAddOrUpdatePaymentCard: 'Debes añadir o actualizar la tarjeta de pago registrada para desbloquear nueva actividad en el espacio de trabajo.',
+            addPaymentCardToUnlock: 'Añade una tarjeta de pago para desbloquearlo!',
+            addPaymentCardToContinueUsingWorkspace: 'Añade una tarjeta de pago para seguir utilizando este espacio de trabajo',
+            pleaseReachOutToYourWorkspaceAdmin: 'Si tienes alguna pregunta, ponte en contacto con el administrador de su espacio de trabajo.',
+            chatWithYourAdmin: 'Chatea con tu administrador',
+            chatInAdmins: 'Chatea en #admins',
+            addPaymentCard: 'Agregar tarjeta de pago'
+        }
     },
     getAssistancePage: {
         title: 'Obtener ayuda',

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

@@ -372,6 +372,10 @@ const SearchReportModalStackNavigator = createModalStackNavigator<SearchReportPa
     [SCREENS.SEARCH.REPORT_RHP]: () => require('../../../../pages/home/ReportScreen').default as React.ComponentType,
 });
 
+const RestrictedActionModalStackNavigator = createModalStackNavigator<SearchReportParamList>({
+    [SCREENS.RESTRICTED_ACTION_ROOT]: () => require('../../../../pages/RestrictedAction/Workspace/WorkspaceRestrictedActionPage').default as React.ComponentType,
+});
+
 export {
     AddPersonalBankAccountModalStackNavigator,
     EditRequestStackNavigator,
@@ -400,4 +404,5 @@ export {
     TaskModalStackNavigator,
     WalletStatementStackNavigator,
     SearchReportModalStackNavigator,
+    RestrictedActionModalStackNavigator,
 };

src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx

@@ -144,6 +144,10 @@ function RightModalNavigator({navigation}: RightModalNavigatorProps) {
                         name={SCREENS.RIGHT_MODAL.SEARCH_REPORT}
                         component={ModalStackNavigators.SearchReportModalStackNavigator}
                     />
+                    <Stack.Screen
+                        name={SCREENS.RIGHT_MODAL.RESTRICTED_ACTION}
+                        component={ModalStackNavigators.RestrictedActionModalStackNavigator}
+                    />
                 </Stack.Navigator>
             </View>
         </NoDropZone>

src/libs/Navigation/linkingConfig/config.ts

@@ -740,6 +740,11 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [SCREENS.SEARCH.REPORT_RHP]: ROUTES.SEARCH_REPORT.route,
                     },
                 },
+                [SCREENS.RIGHT_MODAL.RESTRICTED_ACTION]: {
+                    screens: {
+                        [SCREENS.RESTRICTED_ACTION_ROOT]: ROUTES.RESTRICTED_ACTION.route,
+                    },
+                },
             },
         },
 

src/libs/Navigation/types.ts

@@ -770,6 +770,7 @@ type RightModalNavigatorParamList = {
     [SCREENS.RIGHT_MODAL.PRIVATE_NOTES]: NavigatorScreenParams<PrivateNotesNavigatorParamList>;
     [SCREENS.RIGHT_MODAL.TRAVEL]: NavigatorScreenParams<TravelNavigatorParamList>;
     [SCREENS.RIGHT_MODAL.SEARCH_REPORT]: NavigatorScreenParams<SearchReportParamList>;
+    [SCREENS.RIGHT_MODAL.RESTRICTED_ACTION]: NavigatorScreenParams<RestrictedActionParamList>;
 };
 
 type TravelNavigatorParamList = {
@@ -943,6 +944,12 @@ type SearchReportParamList = {
     };
 };
 
+type RestrictedActionParamList = {
+    [SCREENS.RESTRICTED_ACTION_ROOT]: {
+        policyID: string;
+    };
+};
+
 type RootStackParamList = PublicScreensParamList & AuthScreensParamList & LeftModalNavigatorParamList;
 
 type BottomTabName = keyof BottomTabNavigatorParamList;
@@ -1007,4 +1014,5 @@ export type {
     WalletStatementNavigatorParamList,
     WelcomeVideoModalNavigatorParamList,
     SearchReportParamList,
+    RestrictedActionParamList,
 };

src/libs/ReportUtils.ts

@@ -6964,6 +6964,10 @@ function shouldShowMerchantColumn(transactions: Transaction[]) {
     return transactions.some((transaction) => isExpenseReport(allReports?.[transaction.reportID] ?? {}));
 }
 
+function findPolicyExpenseChatByPolicyID(policyID: string): OnyxEntry<Report> {
+    return Object.values(allReports ?? {}).find((report) => isPolicyExpenseChat(report) && report?.policyID === policyID);
+}
+
 export {
     addDomainToShortMention,
     areAllRequestsBeingSmartScanned,
@@ -7236,6 +7240,7 @@ export {
     isDraftReport,
     changeMoneyRequestHoldStatus,
     createDraftWorkspaceAndNavigateToConfirmationScreen,
+    findPolicyExpenseChatByPolicyID,
 };
 
 export type {

src/pages/RestrictedAction/Workspace/WorkspaceAdminRestrictedAction.tsx

@@ -0,0 +1,72 @@
+import React, {useCallback} from 'react';
+import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import Button from '@components/Button';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import * as Illustrations from '@components/Icon/Illustrations';
+import ImageSVG from '@components/ImageSVG';
+import ScreenWrapper from '@components/ScreenWrapper';
+import ScrollView from '@components/ScrollView';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as Report from '@libs/actions/Report';
+import Navigation from '@libs/Navigation/Navigation';
+import * as PolicyUtils from '@libs/PolicyUtils';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+
+type WorkspaceAdminRestrictedActionProps = {
+    policyID: string;
+};
+
+function WorkspaceAdminRestrictedAction({policyID}: WorkspaceAdminRestrictedActionProps) {
+    const {translate} = useLocalize();
+    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
+    const styles = useThemeStyles();
+
+    const openAdminsReport = useCallback(() => {
+        const reportID = `${PolicyUtils.getPolicy(policyID)?.chatReportIDAdmins}` ?? '-1';
+        Report.openReport(reportID);
+        Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(reportID));
+    }, [policyID]);
+
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom
+            testID={WorkspaceAdminRestrictedAction.displayName}
+        >
+            <HeaderWithBackButton
+                title={translate('workspace.restrictedAction.restricted')}
+                onBackButtonPress={Navigation.goBack}
+            />
+            <ScrollView
+                style={[styles.p5, styles.pt0]}
+                contentContainerStyle={styles.flexGrow1}
+            >
+                <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter, styles.mb15]}>
+                    <ImageSVG
+                        src={Illustrations.LockClosedOrange}
+                        width={136}
+                        height={136}
+                    />
+                    <Text style={[styles.textHeadlineH1, styles.textAlignCenter]}>
+                        {translate('workspace.restrictedAction.actionsAreCurrentlyRestricted', {workspaceName: policy?.name})}
+                    </Text>
+                    <Text style={[styles.textLabelSupportingEmptyValue, styles.textAlignCenter, styles.lh20, styles.mt2]}>
+                        {translate('workspace.restrictedAction.workspaceOwnerWillNeedToAddOrUpdatePaymentCard', {workspaceOwnerName: policy?.owner})}
+                    </Text>
+                </View>
+                <Button
+                    text={translate('workspace.restrictedAction.chatInAdmins')}
+                    onPress={openAdminsReport}
+                    success
+                />
+            </ScrollView>
+        </ScreenWrapper>
+    );
+}
+
+WorkspaceAdminRestrictedAction.displayName = 'WorkspaceAdminRestrictedAction';
+
+export default WorkspaceAdminRestrictedAction;

src/pages/RestrictedAction/Workspace/WorkspaceOwnerRestrictedAction.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import {View} from 'react-native';
+import Badge from '@components/Badge';
+import Button from '@components/Button';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import * as Illustrations from '@components/Icon/Illustrations';
+import ScreenWrapper from '@components/ScreenWrapper';
+import ScrollView from '@components/ScrollView';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import ROUTES from '@src/ROUTES';
+
+function WorkspaceOwnerRestrictedAction() {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    const addPaymentCard = () => {
+        Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION);
+    }
+
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom
+            testID={WorkspaceOwnerRestrictedAction.displayName}
+        >
+            <HeaderWithBackButton
+                title={translate('workspace.restrictedAction.restricted')}
+                onBackButtonPress={Navigation.goBack}
+            />
+            <ScrollView>
+                <View style={[styles.cardSectionContainer, styles.p5]}>
+                    <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsStart, styles.mb3]}>
+                        <Icon
+                            src={Illustrations.LockClosedOrange}
+                            height={48}
+                            width={48}
+                        />
+                        <Badge
+                            icon={Expensicons.Unlock}
+                            success
+                            text={translate('workspace.restrictedAction.addPaymentCardToUnlock')}
+                            badgeStyles={styles.alignSelfStart}
+                        />
+                    </View>
+                    <Text style={[styles.textHeadlineH1, styles.mb4]}>{translate('workspace.restrictedAction.addPaymentCardToContinueUsingWorkspace')}</Text>
+                    <Text style={[styles.textLabelSupportingEmptyValue, styles.mb5]}>{translate('workspace.restrictedAction.youWillNeedToAddOrUpdatePaymentCard')}</Text>
+                    <Button
+                        text={translate('workspace.restrictedAction.addPaymentCard')}
+                        onPress={addPaymentCard}
+                        success
+                    />
+                </View>
+            </ScrollView>
+        </ScreenWrapper>
+    );
+}
+
+WorkspaceOwnerRestrictedAction.displayName = 'WorkspaceOwnerRestrictedAction';
+
+export default WorkspaceOwnerRestrictedAction;