[WIP] Feature: Implement ChangeReportPolicy

src/CONST.ts

@@ -6688,6 +6688,7 @@ const CONST = {
         SCAN_TEST_TOOLTIP_MANAGER: 'scanTestTooltipManager',
         SCAN_TEST_CONFIRMATION: 'scanTestConfirmation',
     },
+    CHANGE_POLICY_TRAINING_MODAL: 'changePolicyModal',
     SMART_BANNER_HEIGHT: 152,
 
     NAVIGATION_TESTS: {

src/ROUTES.ts

@@ -396,6 +396,10 @@ const ROUTES = {
         route: 'r/:reportID/details/export/:connectionName',
         getRoute: (reportID: string, connectionName: ConnectionName, backTo?: string) => getUrlWithBackToParam(`r/${reportID}/details/export/${connectionName as string}` as const, backTo),
     },
+    REPORT_WITH_ID_CHANGE_WORKSPACE: {
+        route: 'r/:reportID/change-workspace',
+        getRoute: (reportID: string, backTo?: string) => getUrlWithBackToParam(`r/${reportID}/change-workspace` as const, backTo),
+    },        
     REPORT_SETTINGS: {
         route: 'r/:reportID/settings',
         getRoute: (reportID: string, backTo?: string) => getUrlWithBackToParam(`r/${reportID}/settings` as const, backTo),
@@ -1615,6 +1619,10 @@ const ROUTES = {
         route: 'hold-expense-educational',
         getRoute: (backTo?: string) => getUrlWithBackToParam('hold-expense-educational', backTo),
     },
+    CHANGE_POLICY_EDUCATIONAL: {
+        route: 'change-workspace-educational',
+        getRoute: (backTo?: string) => getUrlWithBackToParam('change-workspace-educational', backTo),
+    },        
     TRAVEL_MY_TRIPS: 'travel',
     TRAVEL_TCS: {
         route: 'travel/terms/:domain/accept',

src/SCREENS.ts

@@ -164,6 +164,7 @@ const SCREENS = {
         DETAILS: 'Details',
         PROFILE: 'Profile',
         REPORT_DETAILS: 'Report_Details',
+        REPORT_CHANGE_WORKSPACE: 'ReportChangeWorkspace',
         WORKSPACE_CONFIRMATION: 'Workspace_Confirmation',
         REPORT_SETTINGS: 'Report_Settings',
         REPORT_DESCRIPTION: 'Report_Description',
@@ -332,6 +333,10 @@ const SCREENS = {
         EXPORT: 'Report_Details_Export',
     },
 
+    REPORT_CHANGE_WORKSPACE: {
+        ROOT: 'ReportChangeWorkspace_Root',
+    },
+
     WORKSPACE_CONFIRMATION: {ROOT: 'Workspace_Confirmation_Root'},
 
     WORKSPACE: {
@@ -645,6 +650,7 @@ const SCREENS = {
     DETAILS_ROOT: 'Details_Root',
     PROFILE_ROOT: 'Profile_Root',
     PROCESS_MONEY_REQUEST_HOLD_ROOT: 'ProcessMoneyRequestHold_Root',
+    CHANGE_POLICY_EDUCATIONAL_ROOT: 'ChangePolicyEducational_Root',
     REPORT_DESCRIPTION_ROOT: 'Report_Description_Root',
     REPORT_PARTICIPANTS: {
         ROOT: 'ReportParticipants_Root',

src/components/ChangePolicyEducationalMenu.tsx

@@ -0,0 +1,53 @@
+import {useNavigation} from '@react-navigation/native';
+import React, {useEffect} from 'react';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+import FeatureTrainingModal from './FeatureTrainingModal';
+import HoldMenuSectionList from './HoldMenuSectionList';
+import * as Illustrations from './Icon/Illustrations';
+
+
+type ChangePolicyEducationalMenuProps = {
+    /** Method to trigger when pressing outside of the popover menu to close it */
+    onClose: () => void;
+
+    /** Method to trigger when pressing confirm button */
+    onConfirm: () => void;
+};
+
+function ChangePolicyEducationalMenu({onClose, onConfirm}: ChangePolicyEducationalMenuProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const navigation = useNavigation();
+
+    useEffect(() => {
+        const unsub = navigation.addListener('beforeRemove', () => {
+            onClose();
+        });
+        return unsub;
+    }, [navigation, onClose]);
+
+    return (
+        <FeatureTrainingModal
+            title={translate('iou.changePolicyEducational.title')}
+            description={translate('iou.changePolicyEducational.description')}
+            confirmText={translate('common.buttonConfirm')}
+            image={Illustrations.ReceiptFairy}
+            contentFitImage="cover"
+            width={variables.changePolicyEducationModalWidth}
+            illustrationAspectRatio={39 / 22}
+            contentInnerContainerStyles={styles.mb5}
+            modalInnerContainerStyle={styles.pt0}
+            illustrationOuterContainerStyle={styles.p0}
+            onClose={onClose}
+            onConfirm={onConfirm}
+        >
+            <HoldMenuSectionList />
+        </FeatureTrainingModal>
+    );
+}
+
+ChangePolicyEducationalMenu.displayName = 'ChangePolicyEducationalMenu';
+
+export default ChangePolicyEducationalMenu;

src/components/ChangeWorkspaceMenuSectionList.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {View} from 'react-native';
+import type {ImageSourcePropType} from 'react-native';
+import type {SvgProps} from 'react-native-svg';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+import type {TranslationPaths} from '@src/languages/types';
+import Icon from './Icon';
+import * as Illustrations from './Icon/Illustrations';
+import Text from './Text';
+
+type ChangeWorkspaceMenuSection = {
+    /** The icon supplied with the section */
+    icon: React.FC<SvgProps> | ImageSourcePropType;
+
+    /** Translation key for the title */
+    titleTranslationKey: TranslationPaths;
+};
+
+function ChangeWorkspaceMenuSectionList() {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    const holdMenuSections: ChangeWorkspaceMenuSection[] = [
+        {
+            icon: Illustrations.FolderOpen,
+            titleTranslationKey: 'iou.changePolicyEducational.reCategorize',
+        },
+        {
+            icon: Illustrations.Workflows,
+            titleTranslationKey: 'iou.changePolicyEducational.workflows',
+        },
+    ];
+
+    return (
+        <>
+            {holdMenuSections.map((section, i) => (
+                <View
+                    // eslint-disable-next-line react/no-array-index-key
+                    key={i}
+                    style={[styles.flexRow, styles.alignItemsCenter, styles.mt5]}
+                >
+                    <Icon
+                        width={variables.menuIconSize}
+                        height={variables.menuIconSize}
+                        src={section.icon}
+                        additionalStyles={[styles.mr4]}
+                    />
+                    <View style={[styles.flex1, styles.justifyContentCenter]}>
+                        <Text style={[styles.mb1]}>{translate(section.titleTranslationKey)}</Text>
+                    </View>
+                </View>
+            ))}
+        </>
+    );
+}
+
+ChangeWorkspaceMenuSectionList.displayName = 'ChangeWorkspaceMenuSectionList';
+
+export type {ChangeWorkspaceMenuSection};
+
+export default ChangeWorkspaceMenuSectionList;

src/components/Icon/Illustrations.ts

@@ -37,6 +37,7 @@ import ConciergeExclamation from '@assets/images/product-illustrations/concierge
 import CreditCardsBlue from '@assets/images/product-illustrations/credit-cards--blue.svg';
 import EmptyStateExpenses from '@assets/images/product-illustrations/emptystate__expenses.svg';
 import HoldExpense from '@assets/images/product-illustrations/emptystate__holdexpense.svg';
+import ReceiptFairy from '@assets/images/product-illustrations/emptystate__receiptfairy.svg';
 import EmptyStateTravel from '@assets/images/product-illustrations/emptystate__travel.svg';
 import FolderWithPapers from '@assets/images/product-illustrations/folder-with-papers.svg';
 import GpsTrackOrange from '@assets/images/product-illustrations/gps-track--orange.svg';
@@ -229,6 +230,7 @@ export {
     QRCode,
     RealtimeReport,
     HoldExpense,
+    ReceiptFairy,
     ReceiptEnvelope,
     Approval,
     WalletAlt,

src/components/ProcessMoneyRequestHoldMenu.tsx

@@ -49,7 +49,7 @@ function ProcessMoneyRequestHoldMenu({onClose, onConfirm}: ProcessMoneyRequestHo
             confirmText={translate('common.buttonConfirm')}
             image={Illustrations.HoldExpense}
             contentFitImage="cover"
-            width={variables.holdEducationModalWidth}
+            width={variables.changePolicyEducationModalWidth}
             illustrationAspectRatio={39 / 22}
             contentInnerContainerStyles={styles.mb5}
             modalInnerContainerStyle={styles.pt0}

src/languages/en.ts

@@ -1095,6 +1095,13 @@ const translations = {
         whatIsHoldExplain: 'Hold is like hitting “pause” on an expense to ask for more details before approval or payment.',
         holdIsLeftBehind: 'Held expenses are left behind even if you approve an entire report.',
         unholdWhenReady: "Unhold expenses when you're ready to approve or pay.",
+        changePolicyEducational: {
+            title: 'You moved this report!',
+            description: 'Double-check these items, which tend to change when moving reports to a new workspace.',
+            reCategorize: '<strong>Re-categorize any expenses</strong> to comply with workspace rules.',
+            workflows: 'This report may now be subject to a different approval <strong>workflow.</strong>',
+        },
+        changeWorkspace: 'Change workspace',
         set: 'set',
         changed: 'changed',
         removed: 'removed',

src/languages/es.ts

@@ -1092,6 +1092,13 @@ const translations = {
         whatIsHoldExplain: 'Retener es como "pausar" un gasto para solicitar más detalles antes de aprobarlo o pagarlo.',
         holdIsLeftBehind: 'Si apruebas un informe, los gastos retenidos se quedan fuera de esa aprobación.',
         unholdWhenReady: 'Desbloquea los gastos cuando estés listo para aprobarlos o pagarlos.',
+        changePolicyEducational: {
+            title: 'You moved this report!',
+            description: 'Double-check these items, which tend to change when moving reports to a new workspace.',
+            reCategorize: '<strong>Re-categorize any expenses</strong> to comply with workspace rules.',
+            workflows: 'This report may now be subject to a different approval <strong>workflow.</strong>',
+        },
+        changeWorkspace: 'Change workspace',
         set: 'estableció',
         changed: 'cambió',
         removed: 'eliminó',

src/libs/API/parameters/ChangeReportPolicyParams.ts

@@ -0,0 +1,7 @@
+type ChangeReportPolicyParams = {
+    reportID: string;
+    policyID: string;
+    reportPreviewReportActionID: string;
+    changePolicyReportActionID: string;
+};
+export default ChangeReportPolicyParams;

src/libs/API/parameters/index.ts

@@ -378,3 +378,4 @@ export type {default as GetCorpayOnboardingFieldsParams} from './GetCorpayOnboar
 export type {SaveCorpayOnboardingCompanyDetailsParams} from './SaveCorpayOnboardingCompanyDetailsParams';
 export type {default as AcceptSpotnanaTermsParams} from './AcceptSpotnanaTermsParams';
 export type {default as SaveCorpayOnboardingBeneficialOwnerParams} from './SaveCorpayOnboardingBeneficialOwnerParams';
+export type {default as ChangeReportPolicyParams} from './ChangeReportPolicyParams';

src/libs/API/types.ts

@@ -461,6 +461,7 @@ const WRITE_COMMANDS = {
     RESET_SMS_DELIVERY_FAILURE_STATUS: 'ResetSMSDeliveryFailureStatus',
     SAVE_CORPAY_ONBOARDING_COMPANY_DETAILS: 'SaveCorpayOnboardingCompanyDetails',
     SAVE_CORPAY_ONBOARDING_BENEFICIAL_OWNER: 'SaveCorpayOnboardingBeneficialOwner',
+    CHANGE_REPORT_POLICY: 'ChangeReportPolicy',
 } as const;
 
 type WriteCommand = ValueOf<typeof WRITE_COMMANDS>;
@@ -933,6 +934,9 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.JOIN_ACCESSIBLE_POLICY]: Parameters.JoinAccessiblePolicyParams;
     // Dismis Product Training
     [WRITE_COMMANDS.DISMISS_PRODUCT_TRAINING]: Parameters.DismissProductTrainingParams;
+
+    // Change report policy
+    [WRITE_COMMANDS.CHANGE_REPORT_POLICY]: Parameters.ChangeReportPolicyParams;
 };
 
 const READ_COMMANDS = {

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

@@ -18,6 +18,7 @@ import type {
     ReimbursementAccountNavigatorParamList,
     ReportDescriptionNavigatorParamList,
     ReportDetailsNavigatorParamList,
+    ReportChangeWorkspaceNavigatorParamList,
     ReportSettingsNavigatorParamList,
     RoomMembersNavigatorParamList,
     SearchAdvancedFiltersParamList,
@@ -134,6 +135,10 @@ const ReportDetailsModalStackNavigator = createModalStackNavigator<ReportDetails
     [SCREENS.REPORT_DETAILS.EXPORT]: () => require<ReactComponentModule>('../../../../pages/home/report/ReportDetailsExportPage').default,
 });
 
+const ReportChangeWorkspaceModalStackNavigator = createModalStackNavigator<ReportChangeWorkspaceNavigatorParamList>({
+    [SCREENS.REPORT_CHANGE_WORKSPACE.ROOT]: () => require<ReactComponentModule>('../../../../pages/ReportChangeWorkspacePage').default,
+});
+
 const ReportSettingsModalStackNavigator = createModalStackNavigator<ReportSettingsNavigatorParamList>({
     [SCREENS.REPORT_SETTINGS.ROOT]: () => require<ReactComponentModule>('../../../../pages/settings/Report/ReportSettingsPage').default,
     [SCREENS.REPORT_SETTINGS.NAME]: () => require<ReactComponentModule>('../../../../pages/settings/Report/NamePage').default,
@@ -659,6 +664,10 @@ const ProcessMoneyRequestHoldStackNavigator = createModalStackNavigator({
     [SCREENS.PROCESS_MONEY_REQUEST_HOLD_ROOT]: () => require<ReactComponentModule>('../../../../pages/ProcessMoneyRequestHoldPage').default,
 });
 
+const ChangePolicyEducationalStackNavigator = createModalStackNavigator({
+    [SCREENS.CHANGE_POLICY_EDUCATIONAL_ROOT]: () => require<ReactComponentModule>('../../../../pages/ChangePolicyEducationalModal').default,
+});
+
 const TransactionDuplicateStackNavigator = createModalStackNavigator<TransactionDuplicateNavigatorParamList>({
     [SCREENS.TRANSACTION_DUPLICATE.REVIEW]: () => require<ReactComponentModule>('../../../../pages/TransactionDuplicate/Review').default,
     [SCREENS.TRANSACTION_DUPLICATE.MERCHANT]: () => require<ReactComponentModule>('../../../../pages/TransactionDuplicate/ReviewMerchant').default,
@@ -734,12 +743,14 @@ export {
     NewTeachersUniteNavigator,
     PrivateNotesModalStackNavigator,
     ProcessMoneyRequestHoldStackNavigator,
+    ChangePolicyEducationalStackNavigator,
     ProfileModalStackNavigator,
     ReferralModalStackNavigator,
     TravelModalStackNavigator,
     ReimbursementAccountModalStackNavigator,
     ReportDescriptionModalStackNavigator,
     ReportDetailsModalStackNavigator,
+    ReportChangeWorkspaceModalStackNavigator,
     ReportParticipantsModalStackNavigator,
     ReportSettingsModalStackNavigator,
     RoomMembersModalStackNavigator,

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

@@ -7,6 +7,7 @@ import type {FeatureTrainingNavigatorParamList} from '@libs/Navigation/types';
 import ProcessMoneyRequestHoldPage from '@pages/ProcessMoneyRequestHoldPage';
 import TrackTrainingPage from '@pages/TrackTrainingPage';
 import SCREENS from '@src/SCREENS';
+import ChangePolicyEducationalModal from '@pages/ChangePolicyEducationalModal';
 
 const Stack = createPlatformStackNavigator<FeatureTrainingNavigatorParamList>();
 
@@ -23,6 +24,10 @@ function FeatureTrainingModalNavigator() {
                         name={SCREENS.PROCESS_MONEY_REQUEST_HOLD_ROOT}
                         component={ProcessMoneyRequestHoldPage}
                     />
+                    <Stack.Screen
+                        name={SCREENS.CHANGE_POLICY_EDUCATIONAL_ROOT}
+                        component={ChangePolicyEducationalModal}
+                    />
                 </Stack.Navigator>
             </View>
         </NoDropZone>

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

@@ -112,6 +112,10 @@ function RightModalNavigator({navigation, route}: RightModalNavigatorProps) {
                         name={SCREENS.RIGHT_MODAL.REPORT_DETAILS}
                         component={ModalStackNavigators.ReportDetailsModalStackNavigator}
                     />
+                    <Stack.Screen
+                        name={SCREENS.RIGHT_MODAL.REPORT_CHANGE_WORKSPACE}
+                        component={ModalStackNavigators.ReportDetailsModalStackNavigator}
+                    />
                     <Stack.Screen
                         name={SCREENS.RIGHT_MODAL.REPORT_SETTINGS}
                         component={ModalStackNavigators.ReportSettingsModalStackNavigator}

src/libs/Navigation/linkingConfig/config.ts

@@ -48,6 +48,7 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                     exact: true,
                 },
                 [SCREENS.PROCESS_MONEY_REQUEST_HOLD_ROOT]: ROUTES.PROCESS_MONEY_REQUEST_HOLD.route,
+                [SCREENS.CHANGE_POLICY_EDUCATIONAL_ROOT]: ROUTES.CHANGE_POLICY_EDUCATIONAL.route,
             },
         },
         [NAVIGATORS.WELCOME_VIDEO_MODAL_NAVIGATOR]: {
@@ -1011,6 +1012,11 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                         [SCREENS.REPORT_DETAILS.EXPORT]: ROUTES.REPORT_WITH_ID_DETAILS_EXPORT.route,
                     },
                 },
+                [SCREENS.RIGHT_MODAL.REPORT_CHANGE_WORKSPACE]: {
+                    screens: {
+                        [SCREENS.REPORT_CHANGE_WORKSPACE.ROOT]: ROUTES.REPORT_WITH_ID_CHANGE_WORKSPACE.route,
+                    },
+                },
                 [SCREENS.RIGHT_MODAL.REPORT_SETTINGS]: {
                     screens: {
                         [SCREENS.REPORT_SETTINGS.ROOT]: {

src/libs/Navigation/types.ts

@@ -1029,6 +1029,13 @@ type ReportDetailsNavigatorParamList = {
     };
 };
 
+type ReportChangeWorkspaceNavigatorParamList = {
+    [SCREENS.REPORT_CHANGE_WORKSPACE.ROOT]: {
+        reportID: string;
+        backTo?: Routes;
+    };
+};
+
 type ReportSettingsNavigatorParamList = {
     [SCREENS.REPORT_SETTINGS.ROOT]: {
         reportID: string;
@@ -1434,6 +1441,7 @@ type SignInNavigatorParamList = {
 type FeatureTrainingNavigatorParamList = {
     [SCREENS.FEATURE_TRAINING_ROOT]: undefined;
     [SCREENS.PROCESS_MONEY_REQUEST_HOLD_ROOT]: undefined;
+    [SCREENS.CHANGE_POLICY_EDUCATIONAL_ROOT]: undefined;
 };
 
 type ReferralDetailsNavigatorParamList = {
@@ -1501,6 +1509,7 @@ type RightModalNavigatorParamList = {
     [SCREENS.RIGHT_MODAL.PROFILE]: NavigatorScreenParams<ProfileNavigatorParamList>;
     [SCREENS.SETTINGS.SHARE_CODE]: undefined;
     [SCREENS.RIGHT_MODAL.REPORT_DETAILS]: NavigatorScreenParams<ReportDetailsNavigatorParamList>;
+    [SCREENS.RIGHT_MODAL.REPORT_CHANGE_WORKSPACE]: NavigatorScreenParams<ReportChangeWorkspaceNavigatorParamList>;
     [SCREENS.RIGHT_MODAL.REPORT_SETTINGS]: NavigatorScreenParams<ReportSettingsNavigatorParamList>;
     [SCREENS.RIGHT_MODAL.SETTINGS_CATEGORIES]: NavigatorScreenParams<SettingsNavigatorParamList>;
     [SCREENS.RIGHT_MODAL.SETTINGS_TAGS]: NavigatorScreenParams<SettingsNavigatorParamList>;
@@ -1928,6 +1937,7 @@ export type {
     ReimbursementAccountNavigatorParamList,
     ReportDescriptionNavigatorParamList,
     ReportDetailsNavigatorParamList,
+    ReportChangeWorkspaceNavigatorParamList,
     ReportSettingsNavigatorParamList,
     ReportsSplitNavigatorParamList,
     RestrictedActionParamList,