fix: reset transaction.reportID using reportIDFromConfirmationStep

Signed-off-by: dominictb <tb-dominic@outlook.com>

src/libs/actions/IOU.ts

@@ -306,9 +306,24 @@ function getReportPreviewAction(chatReportID: string, iouReportID: string): Onyx
  * @param iouRequestType one of manual/scan/distance
  * @param skipConfirmation if true, skip confirmation step
  */
-function initMoneyRequest(reportID: string, policy: OnyxEntry<OnyxTypes.Policy>, isFromGlobalCreate: boolean, iouRequestType: IOURequestType = CONST.IOU.REQUEST_TYPE.MANUAL) {
+function initMoneyRequest(
+    reportID: string,
+    policy: OnyxEntry<OnyxTypes.Policy>,
+    isFromGlobalCreate: boolean,
+    iouRequestType: IOURequestType = CONST.IOU.REQUEST_TYPE.MANUAL,
+    reportIDFromConfirmationStep?: string,
+) {
     // Generate a brand new transactionID
     const newTransactionID = CONST.IOU.OPTIMISTIC_TRANSACTION_ID;
+
+    if (reportIDFromConfirmationStep) {
+        Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${newTransactionID}`, {
+            reportID: reportIDFromConfirmationStep,
+            reportIDFromConfirmationStep: null,
+        });
+        return;
+    }
+
     // Disabling this line since currentDate can be an empty string
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const created = currentDate || format(new Date(), 'yyyy-MM-dd');
@@ -342,6 +357,12 @@ function initMoneyRequest(reportID: string, policy: OnyxEntry<OnyxTypes.Policy>,
     });
 }
 
+function setReportIDInConfirmationStep(transactionID: string, reportID: string) {
+    Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {
+        reportIDFromConfirmationStep: reportID,
+    });
+}
+
 function createDraftTransaction(transaction: OnyxTypes.Transaction) {
     if (!transaction) {
         return;
@@ -7002,5 +7023,6 @@ export {
     updateMoneyRequestTaxRate,
     sendInvoice,
     getIOURequestPolicyID,
+    setReportIDInConfirmationStep,
 };
 export type {GPSPoint as GpsPoint, IOURequestType};

src/pages/iou/request/IOURequestStartPage.tsx

@@ -96,7 +96,10 @@ function IOURequestStartPage({
         if (transaction?.reportID === reportID) {
             return;
         }
-        IOU.initMoneyRequest(reportID, policy, isFromGlobalCreate, transactionRequestType.current);
+
+        const reportIDFromConfirmationStep = transaction?.reportIDFromConfirmationStep === reportID ? transaction?.reportIDFromConfirmationStep : undefined;
+
+        IOU.initMoneyRequest(reportID, policy, isFromGlobalCreate, transactionRequestType.current, reportIDFromConfirmationStep);
     }, [transaction, policy, reportID, iouType, isFromGlobalCreate]);
 
     const isExpenseChat = ReportUtils.isPolicyExpenseChat(report);

src/pages/iou/request/step/IOURequestStepConfirmation.tsx

@@ -198,11 +198,32 @@ function IOURequestStepConfirmation({
         Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(action, iouType, transactionID, reportID, Navigation.getActiveRouteWithoutParams()));
     }, [iouType, transactionID, reportID, action]);
 
+    useEffect(() => {
+        if (transaction?.transactionID !== CONST.IOU.OPTIMISTIC_TRANSACTION_ID) {
+            return;
+        }
+
+        if (transaction?.reportID === reportID) {
+            return;
+        }
+        // set the reportIDFromConfirmationStep if and only if the transaction is draft and transaction.reportID is different from reportID
+        IOU.setReportIDInConfirmationStep(transaction?.transactionID, reportID);
+    }, [transaction?.reportID, reportID, transaction?.transactionID]);
+
     // When the component mounts, if there is a receipt, see if the image can be read from the disk. If not, redirect the user to the starting step of the flow.
     // This is because until the request is saved, the receipt file is only stored in the browsers memory as a blob:// and if the browser is refreshed, then
     // the image ceases to exist. The best way for the user to recover from this is to start over from the start of the request process.
     // skip this in case user is moving the transaction as the receipt path will be valid in that case
     useEffect(() => {
+        const isDraftTransaction = transactionID === CONST.IOU.OPTIMISTIC_TRANSACTION_ID;
+        const isReportIDFromConfirmationStepSet = transaction?.reportIDFromConfirmationStep === reportID;
+
+        // if reportIDs in transaction and in route are different, and the transaction is draft and no reportIDFromConfirmationStep is set
+        // we will need to wait for the reportIDFromConfirmationStep to be set before proceeding
+        if (isDraftTransaction && !isReportIDFromConfirmationStepSet && transaction?.reportID !== reportID) {
+            return;
+        }
+
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         const isLocalFile = typeof receiptPath === 'number' || receiptPath?.startsWith('blob:') || receiptPath?.startsWith('file:') || receiptPath?.startsWith('/');
 
@@ -218,7 +239,19 @@ function IOURequestStepConfirmation({
         };
 
         IOU.navigateToStartStepIfScanFileCannotBeRead(receiptFilename, receiptPath, onSuccess, requestType, iouType, transactionID, reportID, receiptType);
-    }, [receiptType, receiptPath, receiptFilename, requestType, iouType, transactionID, reportID, action, transaction?.receipt]);
+    }, [
+        receiptType,
+        receiptPath,
+        receiptFilename,
+        requestType,
+        iouType,
+        transactionID,
+        reportID,
+        action,
+        transaction?.receipt,
+        transaction?.reportID,
+        transaction?.reportIDFromConfirmationStep,
+    ]);
 
     const requestMoney = useCallback(
         (selectedParticipants: Participant[], trimmedComment: string, receiptObj?: Receipt, gpsPoints?: IOU.GpsPoint) => {

src/types/onyx/Transaction.ts

@@ -430,6 +430,12 @@ type Transaction = OnyxCommon.OnyxValueWithOfflineFeedback<
 
         /** The linked report id for the tracked expense */
         linkedTrackedExpenseReportID?: string;
+
+        /** The reportID value set in the IOU confirmation page
+         *  This reportID value indicates that the transaction data is suitable for this report ID, so if the reportID in route params changes to this value,
+         *  we only need to set the transaction.reportID to this value instead of resetting the whole transaction
+         */
+        reportIDFromConfirmationStep?: string;
     },
     keyof Comment
 >;