[HOLD for payment 2025-01-17] [$250] Add confirmation dialog on unsaved changes

[dubielzyk-expensify]

Problem

When users fill in details in the app (e.g. description on an expense) and tap back or the scrim/overlay by mistake, the user loses everything they filled it. This can be particularly annoying if you submit an expense and fill in multiple details only to misclick and have to start over. We saw this multiple times during our usability study.

Solution

To remedy this, let's add a confirmation dialog on these sort of interactions by throwing up a confirmation dialog for unsaved changes. Here's a video to demonstrate:

CleanShot.2024-12-06.at.15.13.09.mp4

Notes:

• If the value isn't changed, we should show the warning.
• Clicking Discard continues the action of the user (if back, go back. If scrim/overlay, closer the right-hand-pane) without saving the value.
• Any movement away from the screen should trigger the confirmation dialog (given the value has changed)

Questions:

• Can this be applied systematically or do we have to go through all flows? If not, we should probably start with Submit expense to try it out and continue from there.

cc @Expensify/design @JmillsExpensify @trjExpensify

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021864985847950506437
• Upwork Job ID: 1864985847950506437
• Last Price Increase: 2024-12-06
• Automatic offers:
• ahmedGaber93 | Reviewer | 105308658

Issue Owner

Current Issue Owner: @abekkala

[nkdengineer]

Edited by proposal-police: This proposal was edited at 2024-12-06 05:23:17 UTC.

Proposal

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

Add confirmation dialog on unsaved changes

What is the root cause of that problem?

New feature

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

1. Create a new component DiscardChangeModal based on ConfirmModal
2. Create a new state like isShowDiscardChangeModal
3. Will set isShowDiscardChangeModal as true when moving away from the screen without saving the value.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

Triggered auto assignment to @abekkala (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[trjExpensify]

@dubielzyk-expensify make sure you add Bug or New feature labels to issues like this, to get it assigned out to a BZ member to manage and progress.

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @dubielzyk-expensify (NewFeature)