Restore transaction when not saving distance in edit page

src/components/DistanceRequest/index.js

@@ -23,6 +23,7 @@ import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as MapboxToken from '@userActions/MapboxToken';
 import * as Transaction from '@userActions/Transaction';
+import * as TransactionEdit from '@userActions/TransactionEdit';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import DistanceRequestFooter from './DistanceRequestFooter';
@@ -90,12 +91,27 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
     const haveValidatedWaypointsChanged = !_.isEqual(previousValidatedWaypoints, validatedWaypoints);
     const isRouteAbsentWithoutErrors = !hasRoute && !hasRouteError;
     const shouldFetchRoute = (isRouteAbsentWithoutErrors || haveValidatedWaypointsChanged) && !isLoadingRoute && _.size(validatedWaypoints) > 1;
+    const transactionWasSaved = useRef(false);
 
     useEffect(() => {
         MapboxToken.init();
         return MapboxToken.stop;
     }, []);
 
+    useEffect(() => {
+        if (isEditing || isEditingRequest) {
+            TransactionEdit.createBackupTransaction(transaction);
+        }
+
+        return () => {
+            if (transactionWasSaved.current || (!isEditing && !isEditingRequest)) {
+                return;
+            }
+            TransactionEdit.restoreOriginalTransactionFromBackup(transaction.transactionID);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- we only want this effect when component is mounted
+    }, []);
+
     useEffect(() => {
         const transactionWaypoints = lodashGet(transaction, 'comment.waypoints', {});
         if (!lodashGet(transaction, 'transactionID') || !_.isEmpty(transactionWaypoints)) {
@@ -182,8 +198,17 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
             setHasError(true);
             return;
         }
+
+        if (isEditing || isEditingRequest) {
+            transactionWasSaved.current = true;
+            if (isEditing) {
+                Navigation.goBack(ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(iouType, reportID));
+                return;
+            }
+        }
+
         onSubmit(waypoints);
-    }, [onSubmit, setHasError, hasRouteError, isLoadingRoute, isLoading, validatedWaypoints, waypoints]);
+    }, [onSubmit, setHasError, hasRouteError, isLoadingRoute, isLoading, validatedWaypoints, waypoints, isEditing, iouType, reportID, isEditingRequest]);
 
     const content = (
         <>

src/pages/EditRequestDistancePage.js

@@ -12,7 +12,6 @@ import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
 import Navigation from '@libs/Navigation/Navigation';
 import * as IOU from '@userActions/IOU';
-import * as TransactionEdit from '@userActions/TransactionEdit';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import reportPropTypes from './reportPropTypes';
@@ -52,7 +51,6 @@ const defaultProps = {
 function EditRequestDistancePage({report, route, transaction, transactionBackup}) {
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
-    const transactionWasSaved = useRef(false);
     const hasWaypointError = useRef(false);
     const prevIsLoading = usePrevious(transaction.isLoading);
 
@@ -66,26 +64,6 @@ function EditRequestDistancePage({report, route, transaction, transactionBackup}
         }
     }, [transaction, prevIsLoading, report]);
 
-    useEffect(() => {
-        // This effect runs when the component is mounted and unmounted. It's purpose is to be able to properly
-        // discard changes if the user cancels out of making any changes. This is accomplished by backing up the
-        // original transaction, letting the user modify the current transaction, and then if the user ever
-        // cancels out of the modal without saving changes, the original transaction is restored from the backup.
-
-        // On mount, create the backup transaction.
-        TransactionEdit.createBackupTransaction(transaction);
-
-        return () => {
-            // If the user cancels out of the modal without without saving changes, then the original transaction
-            // needs to be restored from the backup so that all changes are removed.
-            if (transactionWasSaved.current) {
-                return;
-            }
-            TransactionEdit.restoreOriginalTransactionFromBackup(transaction.transactionID);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
     /**
      * Save the changes to the original transaction object
      * @param {Object} waypoints
@@ -101,7 +79,6 @@ function EditRequestDistancePage({report, route, transaction, transactionBackup}
             return;
         }
 
-        transactionWasSaved.current = true;
         IOU.editMoneyRequest(transaction, report.reportID, {waypoints});
 
         // If the client is offline, then the modal can be closed as well (because there are no errors or other feedback to show them