[Hold - EApp #34610] [$500] Distance - Distance is saved when editor is dismissed without saving the changes

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: v1.4.32-2 Reproducible in staging?: y Reproducible in production?: y If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Expensify/Expensify Issue URL: Issue reported by: Applause - Internal Team Slack conversation:

Action Performed:

1. Open Distance request page in workspace chat.
2. Enter addresses and proceed to confirmation page.
3. Click Distance.
4. Edit any waypoint.
5. Click back button instead of saving it.
6. Click Distance.

Expected Result:

The edited distance will not be saved since the editor is dismissed without hitting the save button.

Actual Result:

The edited distance is saved when the editor is dismissed without hitting the save button.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• [x] Android: Native
• [x] Android: mWeb Chrome
• [x] iOS: Native
• [x] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [x] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/Expensify/App/assets/93399543/de9eaa4c-80e6-45b9-8a39-62fc1b22e181

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016908a5fd4c8a84aa
• Upwork Job ID: 1750593008776929280
• Last Price Increase: 2024-01-25
• Automatic offers:
• DylanDylann | Contributor | 28123800

[melvin-bot[bot]]

Triggered auto assignment to @alexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~016908a5fd4c8a84aa

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @ntdiary (External)

[kbecciv]

We think that this bug might be related to #wave6-collect-submitters CC @greg-schroeder

[FitseTLT]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Distance is saved when editor is dismissed without saving the changes

What is the root cause of that problem?

Currently we save the waypoint to draft transaction on waypoint change so whether or not user clicks save it will update the changes https://github.com/Expensify/App/blob/83a7535cf5b691fc8965607327d651d10a283bd8/src/pages/iou/request/step/IOURequestStepWaypoint.js#L138-L139

What changes do you think we should make in order to solve the problem?

In DistanceRequest We should save the initial value of the transaction (or only the waypoints) ( we can use useInitialValue) and then we need to revert back to the initial value on back button press so if the user clicks save/next it will be saved otherwise on back button the change will not be saved https://github.com/Expensify/App/blob/83a7535cf5b691fc8965607327d651d10a283bd8/src/components/DistanceRequest/index.js#L292-L293

What alternative solutions did you explore? (Optional)

[Krishna2323]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Distance - Distance is saved when editor is dismissed without saving the changes

What is the root cause of that problem?

We call Transaction.updateWaypoints whenever onDragEnd is called. https://github.com/Expensify/App/blob/0d0b0a8c9b073c30a9b54de15066789d17f7c718/src/pages/iou/request/step/IOURequestStepDistance.js#L159

What changes do you think we should make in order to solve the problem?

Call Transaction.setTransactionToInitial(will implement) when users hits the save button. When unmounting from IOURequestStepDistance we need to call Transaction.setTransactionToInitial with the initial value if the waypoints have been updated in the ONYX but not saved. Because when validatedWaypoints changes we call Transaction.getRouteForDraft which updates the waypoints in ONYX and also the amount & distance. We can use useInitialValue and can use a ref like isWaypointsSaved and if it is not true we can call Transaction.setTransactionToInitial with the initial transaction value when unmounting.

We also need to create a util for setting transaction back to initial value inside ONYX because when Transaction.getRouteForDraft is being called we update the distance & amount also using Transaction.getRouteForDraft for setting the value to initial will be expensive as it makes call to the api and the api then updates the ONYX value. But if we need we can use that also.

We can get the isDraft state from the action param which will be implemented here.

Demo function:

function setTransactionToInitial(transactionID: string, transaction: Transaction, isDraft: boolean) {
    Onyx.merge(`${isDraft ? ONYXKEYS.COLLECTION.TRANSACTION_DRAFT : ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {
        ...transaction,
    });
}

Steps

• Save initial transaction value using useInitialValue
• Create a ref isWaypointsSaved to track if the way points are saved or not.
• Create a util function to set the transaction to initial value in Onyx.
• Get isEditing/isDraft value from action param
• Add a useEffect to call when unmounting & call the new util function with the initial value if the transaction was not saved, we will get the saved status from isWaypointsSaved ref.

Result

[Krishna2323]

Proposal Updated

Call Transaction.updateWaypoints when unmounting from IOURequestStepDistance.

[Krishna2323]

Proposal Updated

Added more details about implementation.

[dukenv0307]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The edited distance is saved when the editor is dismissed without hitting the save button.

What is the root cause of that problem?

When we change the waypoint, it's saved into transactionDraft, so when we back without saving it's still updated in confirm page.

What changes do you think we should make in order to solve the problem?

We should do the same way as we do when we edit distance of exist transaction by creating a backup transaction and then revert it when the IOURequestStepDistance is unmounted without saving.

1. Create a useEffect in IOURequestStepDistance as we do in here

• isEditingNewRequest can be checked by checking action param is created and backTo existed in param

const isEditingNewRequest = action === CONST.IOU.ACTION.CREATE && !!backTo;

• We already have isEditing variable

• create a transactionBackupValue = useInitialValue(transaction)

• create resetTransaction function in IOU like this

function resetTransaction(transactionID: string, transction: OnyxEntry<Transaction>, isDraft: boolean) {
    Onyx.merge(`${isDraft ? ONYXKEYS.COLLECTION.TRANSACTION_DRAFT : ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, transction);
}

• create a ref transactionWasSaved with default is false and update it to true when we click on confirm button.

useEffect(() => {
    if (!isEditingNewRequest && !isEditing) {
        return () => {};
    }

    
    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;
        }
        IOU.resetTransaction(transaction.transactionID, transactionBackupValue, isEditingNewRequest);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

What alternative solutions did you explore? (Optional)

We can reuse createBackupTransaction and restoreOriginalTransactionFromBackup by creating a new Onyx key like ONYXKEYS.COLLECTION.TRANSACTION_BACKUP and use it to create backup and restore.

And in restoreOriginalTransactionFromBackup we will add an extra param like isDraft to restore transaction correctly for both edit new distance and edit exist distance as well.

[Krishna2323]

Proposal Updated

Fixed typos

[ntdiary]

Hi, @alexpensify, could you please reassign a c+? I need to complete another challenging PR first. ❤️

[DylanDylann]

I'm happy to take this as C+

[Krishna2323]

Proposal Updated Added steps if that helps C+ contributor.

[melvin-bot[bot]]

📣 @DylanDylann 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[alexpensify]

Thank you @ntdiary for this update! @DylanDylann you have been assigned, and please keep us posted on the best proposal here.

[alexpensify]

Ok, looks like the automation got it wrong here. Flagging that @DylanDylann will be acting as the C+ here.

[Krishna2323]

I think @DylanDylann hasn't applied for C+ yet.

[dylanexpensify]

@DylanDylann is a C+! 🎉

[greg-schroeder]

I think this is more Wave 5, no @dylanexpensify? considering it's distance requests

[DylanDylann]

I think we should hold this issue until https://github.com/Expensify/App/issues/34610 is done

[alexpensify]

Noted, I updated this one as on hold.

[alexpensify]

Weekly update: On Hold

[alexpensify]

Weekly Update: On Hold

[alexpensify]

Weekly Update: On Hold

[alexpensify]

Weekly Update: On Hold

[alexpensify]

Weekly Update: On Hold

[alexpensify]

Weekly Update: Still on Hold

[alexpensify]

Weekly Update: It looks like the GH we are on hold for is moving forward

[dukenv0307]

@alexpensify https://github.com/Expensify/App/pull/35302 is merged, I think we can continue with this issue. Updated proposal https://github.com/Expensify/App/issues/35173#issuecomment-1911433192 to use some existing variables.

[alexpensify]

Thanks @dukenv0307 for the update!

@DylanDylann can you please review the recent proposal and identify if it will fix this issue? Thanks!