[Hold for #50796] [$250] Contact method - User returned to enter new email step after backgrounding app

[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: 9.0.52.1
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Issue found when executing PR #49445

Action Performed:

1. Open the app and log in
2. Navigate to the account settings > Profile > Contact method
3. Tap the New contact method button
4. Enter an email that will be used as a secondary login and proceed to the magic code step
5. Background the app
6. Open the app again

Expected Result:

User lands back on the magic code step

Actual Result:

User is returned to the enter email step

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

Bug6642192_1729610713546.video_2024-10-22_11-24-57.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021848841356939319972
• Upwork Job ID: 1848841356939319972
• Last Price Increase: 2024-10-22

Issue Owner

Current Issue Owner: @

[melvin-bot]

Triggered auto assignment to @srikarparsi (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

Triggered auto assignment to @kadiealexander (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.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[lanitochka17]

Production:

-7479549786383612484.MP4

[daledah]

Edited by proposal-police: This proposal was edited at 2024-10-22 17:21:18 UTC.

Proposal

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

User is returned to the enter email step

What is the root cause of that problem?

we don't change route when we navigate to verify steps

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

1. We should add new route for this page like we did with Add bank account

    SETTINGS_NEW_CONTACT_METHOD_VERIFY: {
        route: 'settings/profile/contact-methods/new/verify',
        getRoute: (backTo?: string) => getUrlWithBackToParam('settings/profile/contact-methods/new/verify', backTo),
    },

2. And move this modal to the new page

App/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx

Lines 161 to 164 in 3e27050

	<ValidateCodeActionModal
	validatePendingAction={pendingContactAction?.pendingFields?.actionVerified}
	validateError={validateLoginError}
	handleSubmitForm={addNewContactMethod}

What alternative solutions did you explore? (Optional)

We can customize VerifyAccountPage component to match the requirements on the contact page.

[srikarparsi]

Related PR

[getusha]

I am able to repro this on prod

IMG_1444.MP4

[aimane-chnaif]

Was about to say that 😄
I also reproduced in prod.

Just tested and reproducible in 1e81aa8

[aimane-chnaif]

From my investigation, the root cause is related to AccessOrNotFoundWrapper in NewContactMethodPage.
After removing this wrapper, the bug is gone.

[srikarparsi]

Nice, agreed, also able to reproduce this on production

[srikarparsi]

Going to make this external since it doesn't stem from this PR

[melvin-bot]

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

[melvin-bot]

Current assignee @getusha is eligible for the External assigner, not assigning anyone new.

[bernhardoj]

Proposal

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

The user is brought back to the email contact field page after backgrounding the app and returning to the app.

What is the root cause of that problem?

When we return back to the app, we can see that a loading is shown. The loading comes from AccessOrNotFoundWrapper, so the modal is unmounted which closes it.

App/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx

Lines 120 to 121 in faf48fc

	return (
	<AccessOrNotFoundWrapper shouldBeBlocked={isActingAsDelegate}>

It loads every time a reconnect is called because it sets isLoadingReportData to true.

App/src/pages/workspace/AccessOrNotFoundWrapper.tsx

Lines 163 to 165 in faf48fc

	if (shouldShowFullScreenLoadingIndicator) {
	return <FullscreenLoadingIndicator />;
	}

App/src/pages/workspace/AccessOrNotFoundWrapper.tsx

Line 138 in faf48fc

const shouldShowFullScreenLoadingIndicator = !isMoneyRequest && isLoadingReportData !== false && (!Object.entries(policy ?? {}).length || !policy?.id);

Because the page isn't related to a workspace page at all (and we don't pass the policyID), the policy object is always empty.

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

The purpose of AccessOrNotFoundWrapper is to prevent the user from accessing the page from a deep link. However, AccessOrNotFoundWrapper is designed for workspace related pages. The usual pattern to show the not found page is by using FullPageNotFoundView.

So, the solution is to replace AccessOrNotFoundWrapper with FullPageNotFoundView

<FullPageNotFoundView shouldShow={isActingAsDelegate}>

[ChavdaSachin]

Hey
we are already working on copilot access related issue here and we have decided to create a new wrapper for delegateAccess.
so issue will be solved along with #50796

cc. @getusha

[kadiealexander]

Reassigning this to a new BugZero team member as I'm going OOO for two weeks. Happy to take it back when I'm back!

[melvin-bot]

Triggered auto assignment to @sonialiap (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.

[srikarparsi]

so issue will be solved along with #50796

Oh nice, do you think you can confirm @Julesssss? And I can put this on hold for that issue if that is the case.

[Julesssss]

Yeah, lets put this on hold @srikarparsi

[sonialiap]

Put on hold and moved to weekly

[sonialiap]

Still on hold for #50796 which is in progress