fix: navigate to scan page instead of start page

dominictb · Jul 1, 2024 · da44443 · da44443
1 parent 5cd9f11
commit da44443
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 46 deletions.
diff --git a/src/libs/actions/IOU.ts b/src/libs/actions/IOU.ts
@@ -364,22 +364,6 @@ function initMoneyRequest(reportID: string, policy: OnyxEntry<OnyxTypes.Policy>,
     });
 }
 
-/**
- * Reset the money request with a new report ID. Unlike the initMoneyRequest function, this function only
- * set the new report ID (and isFromGlobalCreate flag) and reset the participants of the draft transaction
- * @param transactionID
- * @param reportID
- * @param isFromGlobalCreate
- */
-function resetMoneyRequestReportID(transactionID: string, reportID: string, isFromGlobalCreate: boolean) {
-    Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {
-        reportID,
-        participants: [],
-        participantsAutoAssigned: false,
-        isFromGlobalCreate,
-    });
-}
-
 function createDraftTransaction(transaction: OnyxTypes.Transaction) {
     if (!transaction) {
         return;
@@ -6970,15 +6954,16 @@ function navigateToStartStepIfScanFileCannotBeRead(
     transactionID: string,
     reportID: string,
     receiptType: string | undefined,
+    backToParam?: string,
 ) {
     if (!receiptFilename || !receiptPath) {
         return;
     }
 
     const onFailure = () => {
         setMoneyRequestReceipt(transactionID, '', '', true);
-        if (requestType === CONST.IOU.REQUEST_TYPE.MANUAL) {
-            Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID, Navigation.getActiveRouteWithoutParams()));
+        if (requestType === CONST.IOU.REQUEST_TYPE.MANUAL || requestType === CONST.IOU.REQUEST_TYPE.SCAN) {
+            Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID, backToParam ?? Navigation.getActiveRouteWithoutParams()));
             return;
         }
         IOUUtils.navigateToStartMoneyRequestStep(requestType, iouType, transactionID, reportID);
@@ -7012,7 +6997,6 @@ export {
     detachReceipt,
     editMoneyRequest,
     initMoneyRequest,
-    resetMoneyRequestReportID,
     navigateToStartStepIfScanFileCannotBeRead,
     payMoneyRequest,
     payInvoice,

diff --git a/src/pages/iou/request/IOURequestStartPage.tsx b/src/pages/iou/request/IOURequestStartPage.tsx
@@ -96,12 +96,6 @@ function IOURequestStartPage({
         if (transaction?.reportID === reportID) {
             return;
         }
-        // if transaction is from global create, the original behavior is that the user can change the recipient reportID
-        // without having to reset the whole transaction, hence we don't need to re-init the transaction in this case
-        if (transaction?.isFromGlobalCreate && transaction.transactionID) {
-            IOU.resetMoneyRequestReportID(transaction.transactionID, reportID, isFromGlobalCreate);
-            return;
-        }
         IOU.initMoneyRequest(reportID, policy, isFromGlobalCreate, transactionRequestType.current);
     }, [transaction, policy, reportID, iouType, isFromGlobalCreate]);
 

diff --git a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx
@@ -1,3 +1,4 @@
+import {useFocusEffect} from '@react-navigation/native';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -202,25 +203,32 @@ function IOURequestStepConfirmation({
 
     // 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.
+    // the image ceases to exist. We will navigate to the user to the scanning page and resume the flow once the user has re-uploaded the file
     // skip this in case user is moving the transaction as the receipt path will be valid in that case
-    useEffect(() => {
-        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        const isLocalFile = FileUtils.isLocalFile(receiptPath);
+    useFocusEffect(
+        useCallback(() => {
+            const backToParam = ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(action, iouType, transactionID, reportID);
+            if (!receiptPath && requestType === CONST.IOU.REQUEST_TYPE.SCAN) {
+                Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID, backToParam));
+                return;
+            }
+            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+            const isLocalFile = FileUtils.isLocalFile(receiptPath);
 
-        if (!isLocalFile) {
-            setReceiptFile(transaction?.receipt);
-            return;
-        }
+            if (!isLocalFile) {
+                setReceiptFile(transaction?.receipt);
+                return;
+            }
 
-        const onSuccess = (file: File) => {
-            const receipt: Receipt = file;
-            receipt.state = file && requestType === CONST.IOU.REQUEST_TYPE.MANUAL ? CONST.IOU.RECEIPT_STATE.OPEN : CONST.IOU.RECEIPT_STATE.SCANREADY;
-            setReceiptFile(receipt);
-        };
+            const onSuccess = (file: File) => {
+                const receipt: Receipt = file;
+                receipt.state = file && requestType === CONST.IOU.REQUEST_TYPE.MANUAL ? CONST.IOU.RECEIPT_STATE.OPEN : CONST.IOU.RECEIPT_STATE.SCANREADY;
+                setReceiptFile(receipt);
+            };
 
-        IOU.navigateToStartStepIfScanFileCannotBeRead(receiptFilename, receiptPath, onSuccess, requestType, iouType, transactionID, reportID, receiptType);
-    }, [receiptType, receiptPath, receiptFilename, requestType, iouType, transactionID, reportID, action, transaction?.receipt]);
+            IOU.navigateToStartStepIfScanFileCannotBeRead(receiptFilename, receiptPath, onSuccess, requestType, iouType, transactionID, reportID, receiptType, backToParam);
+        }, [receiptType, receiptPath, receiptFilename, requestType, iouType, transactionID, reportID, action, transaction?.receipt]),
+    );
 
     const requestMoney = useCallback(
         (selectedParticipants: Participant[], trimmedComment: string, receiptObj?: Receipt, gpsPoints?: IOU.GpsPoint) => {

diff --git a/src/pages/iou/request/step/IOURequestStepParticipants.tsx b/src/pages/iou/request/step/IOURequestStepParticipants.tsx
@@ -1,4 +1,5 @@
 import {useIsFocused} from '@react-navigation/core';
+import {useFocusEffect} from '@react-navigation/native';
 import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
@@ -81,12 +82,29 @@ function IOURequestStepParticipants({
     // This is because until the expense 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 expense process.
     // skip this in case user is moving the transaction as the receipt path will be valid in that case
-    useEffect(() => {
-        if (IOUUtils.isMovingTransactionFromTrackExpense(action)) {
-            return;
-        }
-        IOU.navigateToStartStepIfScanFileCannotBeRead(receiptFilename ?? '', receiptPath ?? '', () => {}, iouRequestType, iouType, transactionID, reportID, receiptType ?? '');
-    }, [receiptType, receiptPath, receiptFilename, iouRequestType, iouType, transactionID, reportID, action]);
+    useFocusEffect(
+        useCallback(() => {
+            if (IOUUtils.isMovingTransactionFromTrackExpense(action)) {
+                return;
+            }
+            const backToParam = ROUTES.MONEY_REQUEST_STEP_PARTICIPANTS.getRoute(iouType, transactionID, reportID, action);
+            if (!receiptPath && iouRequestType === CONST.IOU.REQUEST_TYPE.SCAN) {
+                Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID, backToParam));
+                return;
+            }
+            IOU.navigateToStartStepIfScanFileCannotBeRead(
+                receiptFilename ?? '',
+                receiptPath ?? '',
+                () => {},
+                iouRequestType,
+                iouType,
+                transactionID,
+                reportID,
+                receiptType ?? '',
+                backToParam,
+            );
+        }, [receiptType, receiptPath, receiptFilename, iouRequestType, iouType, transactionID, reportID, action]),
+    );
 
     const addParticipant = useCallback(
         (val: Participant[]) => {