Refactor the money request creation flow

src/CONST.ts

@@ -1134,6 +1134,8 @@ const CONST = {
     },
 
     IOU: {
+        // This is the transactionID used when going through the create money request flow so that it mimics a real transaction (like the edit flow)
+        OPTIMISTIC_TRANSACTION_ID: '1',
         // Note: These payment types are used when building IOU reportAction message values in the server and should
         // not be changed.
         PAYMENT_TYPE: {
@@ -1146,6 +1148,11 @@ const CONST = {
             SPLIT: 'split',
             REQUEST: 'request',
         },
+        REQUEST_TYPE: {
+            DISTANCE: 'distance',
+            MANUAL: 'manual',
+            SCAN: 'scan',
+        },
         REPORT_ACTION_TYPE: {
             PAY: 'pay',
             CREATE: 'create',
@@ -2754,6 +2761,9 @@ const CONST = {
         NEW_CHAT: 'chat',
         NEW_ROOM: 'room',
         RECEIPT_TAB_ID: 'ReceiptTab',
+        IOU_REQUEST_TYPE: 'iouRequestType',
+    },
+    TAB_REQUEST: {
         MANUAL: 'manual',
         SCAN: 'scan',
         DISTANCE: 'distance',

src/ROUTES.ts

@@ -13,7 +13,8 @@ function getUrlWithBackToParam<TUrl extends string>(url: TUrl, backTo?: string):
 
 const ROUTES = {
     HOME: '',
-    /** This is a utility route used to go to the user's concierge chat, or the sign-in page if the user's not authenticated */
+
+    // This is a utility route used to go to the user's concierge chat, or the sign-in page if the user's not authenticated
     CONCIERGE: 'concierge',
     FLAG_COMMENT: {
         route: 'flag/:reportID/:reportActionID',
@@ -306,6 +307,82 @@ const ROUTES = {
     MONEY_REQUEST_MANUAL_TAB: ':iouType/new/:reportID?/manual',
     MONEY_REQUEST_SCAN_TAB: ':iouType/new/:reportID?/scan',
 
+    MONEY_REQUEST_CREATE: {
+        route: 'create/:iouType/start/:transactionID/:reportID',
+        getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string) => `create/${iouType}/start/${transactionID}/${reportID}` as const,
+    },
+    MONEY_REQUEST_STEP_CONFIRMATION: {
+        route: 'create/:iouType/confirmation/:transactionID/:reportID/',
+        getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string) => `create/${iouType}/confirmation/${transactionID}/${reportID}/` as const,
+    },
+    MONEY_REQUEST_STEP_AMOUNT: {
+        route: 'create/:iouType/amount/:transactionID/:reportID/',
+        getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
+            getUrlWithBackToParam(`create/${iouType}/amount/${transactionID}/${reportID}/`, backTo),
+    },
+    MONEY_REQUEST_STEP_CATEGORY: {
+        route: 'create/:iouType/category/:transactionID/:reportID/',
+        getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
+            getUrlWithBackToParam(`create/${iouType}/category/${transactionID}/${reportID}/`, backTo),
+    },
+    MONEY_REQUEST_STEP_CURRENCY: {
+        route: 'create/:iouType/currency/:transactionID/:reportID/:pageIndex?/',
+        getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, pageIndex = '', backTo = '') =>
+            getUrlWithBackToParam(`create/${iouType}/currency/${transactionID}/${reportID}/${pageIndex}`, backTo),
+    },
+    MONEY_REQUEST_STEP_DATE: {
+        route: 'create/:iouType/date/:transactionID/:reportID/',
+        getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
+            getUrlWithBackToParam(`create/${iouType}/date/${transactionID}/${reportID}/`, backTo),
+    },
+    MONEY_REQUEST_STEP_DESCRIPTION: {
+        route: 'create/:iouType/description/:transactionID/:reportID/',
+        getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
+            getUrlWithBackToParam(`create/${iouType}/description/${transactionID}/${reportID}/`, backTo),
+    },
+    MONEY_REQUEST_STEP_DISTANCE: {
+        route: 'create/:iouType/distance/:transactionID/:reportID/',
+        getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
+            getUrlWithBackToParam(`create/${iouType}/distance/${transactionID}/${reportID}/`, backTo),
+    },
+    MONEY_REQUEST_STEP_MERCHANT: {
+        route: 'create/:iouType/merchante/:transactionID/:reportID/',
+        getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
+            getUrlWithBackToParam(`create/${iouType}/merchante/${transactionID}/${reportID}/`, backTo),
+    },
+    MONEY_REQUEST_STEP_PARTICIPANTS: {
+        route: 'create/:iouType/participants/:transactionID/:reportID/',
+        getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
+            getUrlWithBackToParam(`create/${iouType}/participants/${transactionID}/${reportID}/`, backTo),
+    },
+    MONEY_REQUEST_STEP_SCAN: {
+        route: 'create/:iouType/scan/:transactionID/:reportID/',
+        getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
+            getUrlWithBackToParam(`create/${iouType}/scan/${transactionID}/${reportID}/`, backTo),
+    },
+    MONEY_REQUEST_STEP_TAG: {
+        route: 'create/:iouType/tag/:transactionID/:reportID/',
+        getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
+            getUrlWithBackToParam(`create/${iouType}/tag/${transactionID}/${reportID}/`, backTo),
+    },
+    MONEY_REQUEST_STEP_WAYPOINT: {
+        route: 'create/:iouType/waypoint/:transactionID/:reportID/:pageIndex/',
+        getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, pageIndex = '', backTo = '') =>
+            getUrlWithBackToParam(`create/${iouType}/waypoint/${transactionID}/${reportID}/${pageIndex}`, backTo),
+    },
+    MONEY_REQUEST_CREATE_TAB_DISTANCE: {
+        route: 'create/:iouType/start/:transactionID/:reportID/distance',
+        getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string) => `create/${iouType}/start/${transactionID}/${reportID}/distance` as const,
+    },
+    MONEY_REQUEST_CREATE_TAB_MANUAL: {
+        route: 'create/:iouType/start/:transactionID/:reportID/manual',
+        getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string) => `create/${iouType}/start/${transactionID}/${reportID}/manual` as const,
+    },
+    MONEY_REQUEST_CREATE_TAB_SCAN: {
+        route: 'create/:iouType/start/:transactionID/:reportID/scan',
+        getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string) => `create/${iouType}/start/${transactionID}/${reportID}/scan` as const,
+    },
+
     IOU_REQUEST: 'request/new',
     IOU_SEND: 'send/new',
     IOU_SEND_ADD_BANK_ACCOUNT: 'send/new/add-bank-account',
@@ -391,6 +468,7 @@ const ROUTES = {
     MONEY2020: 'money2020',
 } as const;
 
+export {getUrlWithBackToParam};
 export default ROUTES;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/SCREENS.ts

@@ -102,6 +102,19 @@ const SCREENS = {
     SAML_SIGN_IN: 'SAMLSignIn',
 
     MONEY_REQUEST: {
+        CREATE: 'Money_Request_Create',
+        STEP_CONFIRMATION: 'Money_Request_Step_Confirmation',
+        STEP_AMOUNT: 'Money_Request_Step_Amount',
+        STEP_CATEGORY: 'Money_Request_Step_Category',
+        STEP_CURRENCY: 'Money_Request_Step_Currency',
+        STEP_DATE: 'Money_Request_Step_Date',
+        STEP_DESCRIPTION: 'Money_Request_Step_Description',
+        STEP_DISTANCE: 'Money_Request_Step_Distance',
+        STEP_MERCHANT: 'Money_Request_Step_Merchant',
+        STEP_PARTICIPANTS: 'Money_Request_Step_Participants',
+        STEP_SCAN: 'Money_Request_Step_Scan',
+        STEP_TAG: 'Money_Request_Step_Tag',
+        STEP_WAYPOINT: 'Money_Request_Step_Waypoint',
         ROOT: 'Money_Request',
         AMOUNT: 'Money_Request_Amount',
         PARTICIPANTS: 'Money_Request_Participants',

src/components/ConfirmedRoute.js

@@ -115,9 +115,6 @@ function ConfirmedRoute({mapboxAccessToken, transaction}) {
 }
 
 export default withOnyx({
-    transaction: {
-        key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
-    },
     mapboxAccessToken: {
         key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,
     },

src/components/DistanceRequest/DistanceRequestFooter.js

@@ -41,7 +41,7 @@ const propTypes = {
         expiration: PropTypes.string,
     }),
 
-    /* Onyx Props */
+    /** The transaction being interacted with */
     transaction: transactionPropTypes,
 };
 
@@ -135,9 +135,6 @@ DistanceRequestFooter.propTypes = propTypes;
 DistanceRequestFooter.defaultProps = defaultProps;
 
 export default withOnyx({
-    transaction: {
-        key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
-    },
     mapboxAccessToken: {
         key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,
     },

src/components/DistanceRequest/index.js

@@ -211,7 +211,7 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
                             waypoints={waypoints}
                             hasRouteError={hasRouteError}
                             navigateToWaypointEditPage={navigateToWaypointEditPage}
-                            transactionID={transactionID}
+                            transaction={transaction}
                         />
                     }
                 />

src/components/MoneyRequestConfirmationList.js

@@ -209,7 +209,7 @@ function MoneyRequestConfirmationList(props) {
     // Prop functions pass props itself as a "this" value to the function which means they change every time props change.
     const {onSendMoney, onConfirm, onSelectParticipant} = props;
     const {translate, toLocaleDigit} = useLocalize();
-    const transaction = props.isEditingSplitBill ? props.draftTransaction || props.transaction : props.transaction;
+    const transaction = props.transaction;
     const {canUseViolations} = usePermissions();
 
     const isTypeRequest = props.iouType === CONST.IOU.TYPE.REQUEST;
@@ -409,8 +409,8 @@ function MoneyRequestConfirmationList(props) {
             return;
         }
         const distanceMerchant = DistanceRequestUtils.getDistanceMerchant(hasRoute, distance, unit, rate, currency, translate, toLocaleDigit);
-        IOU.setMoneyRequestMerchant(distanceMerchant);
-    }, [hasRoute, distance, unit, rate, currency, translate, toLocaleDigit, props.isDistanceRequest]);
+        IOU.setMoneyRequestMerchant_temporaryForRefactor(props.transactionID, distanceMerchant);
+    }, [hasRoute, distance, unit, rate, currency, translate, toLocaleDigit, props.isDistanceRequest, props.transactionID]);
 
     /**
      * @param {Object} option
@@ -579,7 +579,7 @@ function MoneyRequestConfirmationList(props) {
         >
             {props.isDistanceRequest && (
                 <View style={styles.confirmationListMapItem}>
-                    <ConfirmedRoute transactionID={props.transactionID} />
+                    <ConfirmedRoute transaction={props.transaction} />
                 </View>
             )}
             {(receiptImage || receiptThumbnail) && (
@@ -772,9 +772,6 @@ export default compose(
         draftTransaction: {
             key: ({transactionID}) => `${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`,
         },
-        transaction: {
-            key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
-        },
         policy: {
             key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
         },