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

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

📣 @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

[alexpensify]

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

[dukenv0307]

@alexpensify #35302 is merged, I think we can continue with this issue. Updated proposal #35173 (comment) 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!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[alexpensify]

Moving this one back to Daily to carry on here.

[DylanDylann]

@alexpensify Although #34610 is done, it caused a regression. After checking I see that we need to resolve this regression first, then we can process with this one

[alexpensify]

Got it, thanks for flagging it. I missed the regression notice.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[alexpensify]

Weekly Update: On hold for #38864

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[alexpensify]

Weekly Update: Still on hold for #38864

[DylanDylann]

#39144 is merged. This issue is fixed

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[alexpensify]

Thanks. Based on this feedback, we will close this one.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.