[Awaiting pending offer] [$125] mWeb - Copilot - User navigated to incorrect page when using device back button in MC page

[lanitochka17]

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: 9.0.66-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): ibellicotest+36@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Open the staging.new.expensify.com website
2. Tap on "Settings" on the bottom of the screen
3. Tap on "Security" and select "Add Copilot"
4. Select any user as copilot
5. Select an access level
6. Tap on "Add Copilot"
7. On Magic Code page, use the device back button to return to previous page
8. Verify you are redirected to copilot confirmation page

Expected Result:

When using the device back button to return to previous page on magic code page while adding copilot, the user should land on the copilot confirmation page

Actual Result:

User lands on "Access Level" page instead of copilot confirmation, when using the device back button while in the Magic Code page

Workaround:

Unknown

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6673914_1732346029419.Copilot.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021861786354506701472
• Upwork Job ID: 1861786354506701472
• Last Price Increase: 2024-11-27
• Automatic offers:
• dominictb | Reviewer | 105157484
• daledah | Contributor | 105157485

Issue Owner

Current Issue Owner: @dominictb

[melvin-bot]

Triggered auto assignment to @twisterdotcom (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[daledah]

Edited by proposal-police: This proposal was edited at 2024-11-26 11:01:06 UTC.

Proposal

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

User lands on "Access Level" page instead of copilot confirmation, when using the device back button while in the Magic Code page

What is the root cause of that problem?

• The MC page is just a modal:

App/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx

Line 79 in 0135d4e

<DelegateMagicCodeModal

so when pressing on back button, the navigate user to the Access Level page.

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

• We should user the modal:
  

  App/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx

  Line 79 in 0135d4e

  <DelegateMagicCodeModal

  
  as:

            <DelegateMagicCodeModal shouldHandleNavigationBack ... /> // can use shouldHandleNavigationBack={Browser.isMobileChrome()}

• The shouldHandleNavigationBack will be passed down to Modal component:

App/src/components/Modal/index.tsx

Line 10 in 0135d4e

function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = () => {}, children, shouldHandleNavigationBack, ...rest}: BaseModalProps) {

and is used in:

App/src/components/Modal/index.tsx

Lines 50 to 53 in 0135d4e

	if (shouldHandleNavigationBack) {
	window.history.pushState({shouldGoBack: true}, '', null);
	window.addEventListener('popstate', handlePopStateRef.current);
	}

With this, pressing back button will navigate user to the correct page.

What alternative solutions did you explore? (Optional)

[twisterdotcom]

Web:

53007.web.mp4

iOS:

trim.005F5C80-52FD-4509-8356-82F6AC748275.MOV

Android mWeb Chrome:

screen-20241126-232231.mp4

I cannot recreate.

[daledah]

@twisterdotcom I can replicate this bug on the web (by using the browser back button in case MacOS chrome and device back button in case android chrome). In your video, it seems you used the back button within the app, but the OP specified that the device's back button should be used:

Screen.Recording.2024-11-27.at.10.47.24.mov

Screen.Recording.2024-11-27.at.08.56.06.mov

[twisterdotcom]

Ah, my android device doesn't have a back button, I guess I would need to enable it in the settings. Okay, browser made it much easier. I agree then, this is a bug. Niche though.

[melvin-bot]

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