Feature: Implement ChangeReportPolicy

src/CONST.ts

@@ -6790,6 +6790,7 @@ const CONST = {
         SCAN_TEST_TOOLTIP_MANAGER: 'scanTestTooltipManager',
         SCAN_TEST_CONFIRMATION: 'scanTestConfirmation',
     },
+    CHANGE_POLICY_TRAINING_MODAL: 'changePolicyModal',
     SMART_BANNER_HEIGHT: 152,
 
     NAVIGATION_TESTS: {
@@ -6821,6 +6822,7 @@ const CONST = {
     },
     SKIPPABLE_COLLECTION_MEMBER_IDS: [String(DEFAULT_NUMBER_ID), '-1', 'undefined', 'null', 'NaN'] as string[],
     SETUP_SPECIALIST_LOGIN: 'Setup Specialist',
+    ILLUSTRATION_ASPECT_RATIO: 39 / 22,
 } as const;
 
 type Country = keyof typeof CONST.ALL_COUNTRIES;

src/ROUTES.ts

@@ -410,6 +410,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),
@@ -1685,6 +1689,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

@@ -166,6 +166,7 @@ const SCREENS = {
         PROFILE: 'Profile',
         NEW_REPORT_WORKSPACE_SELECTION: 'New_Report_Workspace_Selection',
         REPORT_DETAILS: 'Report_Details',
+        REPORT_CHANGE_WORKSPACE: 'ReportChangeWorkspace',
         WORKSPACE_CONFIRMATION: 'Workspace_Confirmation',
         REPORT_SETTINGS: 'Report_Settings',
         REPORT_DESCRIPTION: 'Report_Description',
@@ -339,6 +340,10 @@ const SCREENS = {
         EXPORT: 'Report_Details_Export',
     },
 
+    REPORT_CHANGE_WORKSPACE: {
+        ROOT: 'ReportChangeWorkspace_Root',
+    },
+
     WORKSPACE_CONFIRMATION: {ROOT: 'Workspace_Confirmation_Root'},
 
     WORKSPACE: {
@@ -652,6 +657,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/ChangeWorkspaceMenuSectionList.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {View} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import convertToLTR from '@libs/convertToLTR';
+import variables from '@styles/variables';
+import type {TranslationPaths} from '@src/languages/types';
+import type IconAsset from '@src/types/utils/IconAsset';
+import Icon from './Icon';
+import * as Illustrations from './Icon/Illustrations';
+import RenderHTML from './RenderHTML';
+
+type ChangeWorkspaceMenuSection = {
+    /** The icon supplied with the section */
+    icon: IconAsset;
+
+    /** Translation key for the title */
+    titleTranslationKey: TranslationPaths;
+};
+
+const changeWorkspaceMenuSections: ChangeWorkspaceMenuSection[] = [
+    {
+        icon: Illustrations.FolderOpen,
+        titleTranslationKey: 'iou.changePolicyEducational.reCategorize',
+    },
+    {
+        icon: Illustrations.Workflows,
+        titleTranslationKey: 'iou.changePolicyEducational.workflows',
+    },
+];
+
+function ChangeWorkspaceMenuSectionList() {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    return (
+        <>
+            {changeWorkspaceMenuSections.map((section) => (
+                <View
+                    key={section.titleTranslationKey}
+                    style={[styles.flexRow, styles.alignItemsCenter, styles.mt3]}
+                >
+                    <Icon
+                        width={variables.menuIconSize}
+                        height={variables.menuIconSize}
+                        src={section.icon}
+                        additionalStyles={[styles.mr4]}
+                    />
+                    <View style={[styles.flex1, styles.justifyContentCenter]}>
+                        <RenderHTML html={`<comment>${convertToLTR(translate(section.titleTranslationKey))}</comment>`} />
+                    </View>
+                </View>
+            ))}
+        </>
+    );
+}
+
+ChangeWorkspaceMenuSectionList.displayName = 'ChangeWorkspaceMenuSectionList';
+export default ChangeWorkspaceMenuSectionList;

src/components/FeatureTrainingModal.tsx

@@ -115,6 +115,12 @@ type FeatureTrainingModalSVGProps = {
 
     /** Determines how the image should be resized to fit its container */
     contentFitImage?: ImageContentFit;
+
+    /** The width of the image */
+    imageWidth?: number;
+
+    /** The height of the image */
+    imageHeight?: number;
 };
 
 // This page requires either an icon or a video/animation, but not both
@@ -143,6 +149,8 @@ function FeatureTrainingModal({
     contentInnerContainerStyles,
     contentOuterContainerStyles,
     modalInnerContainerStyle,
+    imageWidth,
+    imageHeight,
     isModalDisabled = true,
 }: FeatureTrainingModalProps) {
     const styles = useThemeStyles();
@@ -211,6 +219,8 @@ function FeatureTrainingModal({
                     <ImageSVG
                         src={image}
                         contentFit={contentFitImage}
+                        width={imageWidth}
+                        height={imageHeight}
                     />
                 )}
                 {!!videoURL && videoStatus === 'video' && (
@@ -241,6 +251,8 @@ function FeatureTrainingModal({
         );
     }, [
         image,
+        imageHeight,
+        imageWidth,
         contentFitImage,
         illustrationAspectRatio,
         styles.w100,

src/components/HoldMenuSectionList.tsx

@@ -1,44 +1,42 @@
 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 type IconAsset from '@src/types/utils/IconAsset';
 import Icon from './Icon';
 import * as Illustrations from './Icon/Illustrations';
 import Text from './Text';
 
 type HoldMenuSection = {
     /** The icon supplied with the section */
-    icon: React.FC<SvgProps> | ImageSourcePropType;
+    icon: IconAsset;
 
     /** Translation key for the title */
     titleTranslationKey: TranslationPaths;
 };
 
+const holdMenuSections: HoldMenuSection[] = [
+    {
+        icon: Illustrations.Stopwatch,
+        titleTranslationKey: 'iou.holdIsLeftBehind',
+    },
+    {
+        icon: Illustrations.RealtimeReport,
+        titleTranslationKey: 'iou.unholdWhenReady',
+    },
+];
+
 function HoldMenuSectionList() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
-    const holdMenuSections: HoldMenuSection[] = [
-        {
-            icon: Illustrations.Stopwatch,
-            titleTranslationKey: 'iou.holdIsLeftBehind',
-        },
-        {
-            icon: Illustrations.RealtimeReport,
-            titleTranslationKey: 'iou.unholdWhenReady',
-        },
-    ];
-
     return (
         <>
-            {holdMenuSections.map((section, i) => (
+            {holdMenuSections.map((section) => (
                 <View
-                    // eslint-disable-next-line react/no-array-index-key
-                    key={i}
+                    key={section.titleTranslationKey}
                     style={[styles.flexRow, styles.alignItemsCenter, styles.mt5]}
                 >
                     <Icon
@@ -58,6 +56,4 @@ function HoldMenuSectionList() {
 
 HoldMenuSectionList.displayName = 'HoldMenuSectionList';
 
-export type {HoldMenuSection};
-
 export default HoldMenuSectionList;

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';
@@ -231,6 +232,7 @@ export {
     QRCode,
     RealtimeReport,
     HoldExpense,
+    ReceiptFairy,
     ReceiptEnvelope,
     Approval,
     WalletAlt,

src/components/ProcessMoneyRequestHoldMenu.tsx

@@ -1,10 +1,11 @@
-import {useNavigation} from '@react-navigation/native';
-import React, {useEffect, useMemo} from 'react';
+import React, {useMemo} from 'react';
 import {View} from 'react-native';
+import useBeforeRemove from '@hooks/useBeforeRemove';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
+import CONST from '@src/CONST';
 import FeatureTrainingModal from './FeatureTrainingModal';
 import HoldMenuSectionList from './HoldMenuSectionList';
 import * as Illustrations from './Icon/Illustrations';
@@ -22,15 +23,9 @@ type ProcessMoneyRequestHoldMenuProps = {
 function ProcessMoneyRequestHoldMenu({onClose, onConfirm}: ProcessMoneyRequestHoldMenuProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const navigation = useNavigation();
     const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();
 
-    useEffect(() => {
-        const unsub = navigation.addListener('beforeRemove', () => {
-            onClose();
-        });
-        return unsub;
-    }, [navigation, onClose]);
+    useBeforeRemove(onClose);
 
     const title = useMemo(
         () => (
@@ -50,7 +45,7 @@ function ProcessMoneyRequestHoldMenu({onClose, onConfirm}: ProcessMoneyRequestHo
             image={Illustrations.HoldExpense}
             contentFitImage="cover"
             width={variables.holdEducationModalWidth}
-            illustrationAspectRatio={39 / 22}
+            illustrationAspectRatio={CONST.ILLUSTRATION_ASPECT_RATIO}
             contentInnerContainerStyles={styles.mb5}
             modalInnerContainerStyle={styles.pt0}
             illustrationOuterContainerStyle={styles.p0}