From 0869c9d048c29117412767c25d2548aaca822764 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Tue, 26 Sep 2023 17:34:31 +0800
Subject: [PATCH] Delete the backup transaction in success data

---
 src/libs/actions/IOU.js              |  9 +++++++++
 src/pages/EditRequestDistancePage.js | 21 ++++-----------------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 25a17229df96..bbdc2b5a0fd8 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -765,6 +765,15 @@ function updateDistanceRequest(transactionID, transactionThreadReportID, transac
         },
     });
 
+    if (_.has(transactionChanges, 'waypoints')) {
+        // Delete the backup transaction when editing waypoints when the server responds successfully and there are no errors
+        successData.push({
+            onyxMethod: Onyx.METHOD.SET,
+            key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}-backup`,
+            value: null,
+        });
+    }
+
     // Clear out loading states, pending fields, and add the error fields
     failureData.push({
         onyxMethod: Onyx.METHOD.MERGE,
diff --git a/src/pages/EditRequestDistancePage.js b/src/pages/EditRequestDistancePage.js
index 96aaf233b4df..84aa4de1acb0 100644
--- a/src/pages/EditRequestDistancePage.js
+++ b/src/pages/EditRequestDistancePage.js
@@ -60,7 +60,7 @@ function EditRequestDistancePage({report, route, transaction}) {
         if (prevIsLoading && !transaction.isLoading && !hasWaypointError.current) {
             Navigation.dismissModal(report.reportID);
         }
-    }, [transaction, prevIsLoading]);
+    }, [transaction, prevIsLoading, report]);
 
     useEffect(() => {
         // This effect runs when the component is mounted and unmounted. It's purpose is to be able to properly
@@ -72,25 +72,12 @@ function EditRequestDistancePage({report, route, transaction}) {
         TransactionEdit.createBackupTransaction(transaction);
 
         return () => {
-            // Unmounting happens when:
-            // 1. The transaction was saved offline or with no server errors
-            // 2. The user cancels out of the modal
-
-            // If 1 happened, then only the backup transaction needs to be removed because it is no longer needed
-            if (transactionWasSaved.current && !hasWaypointError.current) {
-                TransactionEdit.removeBackupTransaction(transaction.transactionID);
+            // 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;
             }
-
-            // If 2 happened, then the original transaction needs to be restored so that no user changes are stored to onyx permanently.
-            // This also also deletes the backup.
             TransactionEdit.restoreOriginalTransactionFromBackup(transaction.transactionID);
-
-            // You might be asking yourself "What about the case where the user saves the transaction, but there are server errors?"
-            // When this happens, the modal remains open so the user can fix the errors. Therefore, this component is never unmounted and this
-            // logic doesn't run. Once the user fixes the errors, they can:
-            // - Cancel out of the modal (triggering flow 2 above)
-            // - Fix the errors and save the transaction (triggering flow 1 above)
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);