[HOLD for payment 2024-03-19] [$500] [MEDIUM] mweb/Chrome - Receipt - Closing receipt view using device navigation redirects user to expense report

[lanitochka17]

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: 1.4.16-4
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. Go to the details page of expense request that has receipt
2. Tap on the receipt
3. Close the receipt view by using device navigation

Expected Result:

User returns to request details page

Actual Result:

User returns to expense report

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

Bug6324979_1703347266794.1000005051.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01532bdbfc376a4913
• Upwork Job ID: 1738597532861890560
• Last Price Increase: 2023-12-23
• Automatic offers:
• aimane-chnaif | Reviewer | 28128801
• tienifr | Contributor | 28128802

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01532bdbfc376a4913

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[tienifr]

Proposal

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

Browser back button closes the money request and also the receipt preview

What is the root cause of that problem?

The money request and also the receipt preview currently shares the same URL, basically the receipt preview is a "state" of the money request page, where the user wants to view the receipt in full size.

So when pressing device native back button, it will dismiss both since they share the same URL.

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

We can use same approach as in #28999 where we can add a new route to view the receipt preview, or we can use the existing route for attachment (the /attachment?source=/ route normally used for attachment report action), so the receipt preview will be on a different URL compared to the money request report.

Or an alternative that's worth considering is:

Since the receipt preview is essentially a "state" of the money request page, we should indicate as such in the URL. Normally a page state will be represented by a param or a hash. If the money request page URL is at /r/12345678, the money request page "receipt preview" state can be /r/12345678?preview=true (or can set preview={receipt URL or id}).

In the money request page, we'll receive the preview: true in the route.params and can show the receipt preview accordingly if we want to. When the user clicks on the receipt to open the preview, we should also set the preview param in the route.

Since the preview state of money request page is on a different URL, clicking go back will work normally.

What alternative solutions did you explore? (Optional)

NA

[suneox]

Proposal

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

mweb/Chrome - Receipt - Closing receipt view using device navigation redirects user to expense report

What is the root cause of that problem?

The same rootcause with #33419 When opening the receipt view by Modal we don't update any history state, so when the user clicks on the browser back button it will navigate back to the previous page and the modal on the current page will be closed

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

Currently, the root cause of this issue also happens on a lot of pages using modal on web, and I also found another page same root cause at Select Year on Date of Birth also happens.

So we need to fix at Modal for web, when showModal we will pushState to history and add popstate listener to close the modal when user click on browser back button

My proposal is not affected when we separate the modal to another page, but now it can reduce a lot of issues the same with this, and new features in the future use the Modal

View more implementation at this commit

What alternative solutions did you explore? (Optional)

[bfitzexpensify]

If this has the same cause as #33419, then I'm assuming it will also be fixed via #28999?

[suneox]

@bfitzexpensify
Could you please consider to review this issue also happening on the selection year on the DOB page?

Screen.Recording.2023-12-27.at.07.51.11.mov

The go-back behavior for the menu modal between native device and web mobile, on native device when press go-back button just only closes the menu but on the web when pressing go back button will navigate to the previous page

Screen.Recording.2023-12-27.at.07.50.19.mov

My proposal can resolve all issues related to Modal

[tienifr]

If this has the same cause as #33419, then I'm assuming it will also be fixed via #28999?

@bfitzexpensify I don't think so since this is not in that PR's scope.

[bfitzexpensify]

Considering it's related to how the back button functions with a modal, then this should be addressed via #27856 rather than a new issue - @suneox, please comment there if you feel that solution should be adjusted.

[aimane-chnaif]

@bfitzexpensify I am also C+ on that linked issue and it's really out of scope. Let's keep this open and hold rather than close.

[bfitzexpensify]

Sorry @tienifr your comment wasn't showing for me before. Fair if this is out of scope - @aimane-chnaif just confirming you're suggesting we hold this on #27856?

[aimane-chnaif]

yes, correct

[melvin-bot]

@bfitzexpensify, @aimane-chnaif Eep! 4 days overdue now. Issues have feelings too...

[bfitzexpensify]

Held on #27856

[melvin-bot]

This issue has not been updated in over 15 days. @rlinoz, @bfitzexpensify, @aimane-chnaif, @tienifr eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[aimane-chnaif]

PR is ongoing

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.50-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: Closing receipt view using device navigation redirects user to expense report #35497

If no regressions arise, payment will be issued on 2024-03-19. 🎊

For reference, here are some details about the assignees on this issue:

• @aimane-chnaif requires payment automatic offer (Reviewer)
• @tienifr requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@aimane-chnaif] The PR that introduced the bug has been identified. Link to the PR:
• [@aimane-chnaif] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@aimane-chnaif] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@aimane-chnaif] Determine if we should create a regression test for this bug.
• [@aimane-chnaif] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@bfitzexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[bfitzexpensify]

Payments complete - please complete the BZ checklist when you get a chance @aimane-chnaif, thank you

[aimane-chnaif]

This ended up being a new feature.

Regression Test Proposal

1. Go to the details page of expense request that has receipt
2. Tap on the receipt
3. Close the receipt view by using browser back button (device navigation on mobile)
4. Verify that user returns to request details page

[bfitzexpensify]

Sweet. Regression test proposed here - https://github.com/Expensify/Expensify/issues/381504. Closing this out, thanks everyone!