reset transaction on page refresh for IOU distance page

Expensify · Dec 23, 2024 · e2c3f91 · e2c3f91
1 parent ca4107b
commit e2c3f91
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/src/libs/actions/TransactionEdit.ts b/src/libs/actions/TransactionEdit.ts
@@ -8,7 +8,7 @@ let connection: Connection;
 /**
  * Makes a backup copy of a transaction object that can be restored when the user cancels editing a transaction.
  */
-function createBackupTransaction(transaction: OnyxEntry<Transaction>) {
+function createBackupTransaction(transaction: OnyxEntry<Transaction>, isDraft: boolean) {
     if (!transaction) {
         return;
     }
@@ -20,9 +20,20 @@ function createBackupTransaction(transaction: OnyxEntry<Transaction>) {
     const newTransaction = {
         ...transaction,
     };
-
-    // Use set so that it will always fully overwrite any backup transaction that could have existed before
-    Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION_BACKUP}${transaction.transactionID}`, newTransaction);
+    const conn = Onyx.connect({
+        key: `${ONYXKEYS.COLLECTION.TRANSACTION_BACKUP}${transaction.transactionID}`,
+        callback: (transactionBackup) => {
+            Onyx.disconnect(conn);
+            if (transactionBackup) {
+                // If the transactionBackup exists it means we haven't properly restored original value on unmount
+                // such as on page refresh, so we will just restore the transaction from the transactionBackup here.
+                Onyx.set(`${isDraft ? ONYXKEYS.COLLECTION.TRANSACTION_DRAFT : ONYXKEYS.COLLECTION.TRANSACTION}${transaction.transactionID}`, transactionBackup);
+                return;
+            }
+            // Use set so that it will always fully overwrite any backup transaction that could have existed before
+            Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION_BACKUP}${transaction.transactionID}`, newTransaction);
+        },
+    });
 }
 
 /**

diff --git a/src/pages/iou/request/step/IOURequestStepDistance.tsx b/src/pages/iou/request/step/IOURequestStepDistance.tsx
@@ -217,9 +217,9 @@ function IOURequestStepDistance({
         if (isCreatingNewRequest) {
             return () => {};
         }
-
+        const isDraft = IOUUtils.shouldUseTransactionDraft(action);
         // On mount, create the backup transaction.
-        TransactionEdit.createBackupTransaction(transaction);
+        TransactionEdit.createBackupTransaction(transaction, isDraft);
 
         return () => {
             // If the user cancels out of the modal without without saving changes, then the original transaction
@@ -228,7 +228,7 @@ function IOURequestStepDistance({
                 TransactionEdit.removeBackupTransaction(transaction?.transactionID ?? '-1');
                 return;
             }
-            TransactionEdit.restoreOriginalTransactionFromBackup(transaction?.transactionID ?? '-1', IOUUtils.shouldUseTransactionDraft(action));
+            TransactionEdit.restoreOriginalTransactionFromBackup(transaction?.transactionID ?? '-1', isDraft);
 
             // If the user opens IOURequestStepDistance in offline mode and then goes online, re-open the report to fill in missing fields from the transaction backup
             if (!transaction?.reportID) {