[On Hold App #38864] [$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 contributors@expensify.com 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?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6354926_1706202929434.20240125_094207.mp4

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-04-16
• Automatic offers:
• DylanDylann | Contributor | 28123800

[melvin-bot]

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

[melvin-bot]

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

[melvin-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

App/src/pages/iou/request/step/IOURequestStepWaypoint.js

Lines 138 to 139 in 83a7535

	const saveWaypoint = (waypoint) => Transaction.saveWaypoint(transactionID, pageIndex, waypoint, action === CONST.IOU.ACTION.CREATE);

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

App/src/components/DistanceRequest/index.js

Lines 292 to 293 in 83a7535

	onBackButtonPress={navigateBack}
	/>

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.

App/src/pages/iou/request/step/IOURequestStepDistance.js

Line 159 in 0d0b0a8

Transaction.updateWaypoints(transactionID, newWaypoints, true).then(() => {

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.