[HOLD for payment 2024-11-28] [$250] Contact Methods - Navigated back to "New contact method" when going back to online

[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.51-2
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): dave0123seife@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to account settings > Profile
2. Click on "Contact Method"
3. Click on "New Contact method"
4. Add a email > Add
5. In the verification page go Offline and return back online

Expected Result:

User is not Navigated back to "New contact method" when going back to online

Actual Result:

Navigated back to "New contact method" when going back to online

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

Bug6641216_1729527065628.Screen_Recording_2024-10-21_at_6.57.57_in_the_evening.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021853397434469388025
• Upwork Job ID: 1853397434469388025
• Last Price Increase: 2024-11-11
• Automatic offers:
• wildan-m | Contributor | 104874938

Issue Owner

Current Issue Owner: @zanyrenney

[melvin-bot]

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

[lanitochka17]

@zanyrenney FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[ChavdaSachin]

No more reproducible, it was solved here
#49445

[zanyrenney]

Closing as solved above!

[lanitochka17]

Issue is still reproducible on the mWeb/Chrome on the latest build 9.0.55-2

Record_2024-10-29-14-44-02.mp4

[zanyrenney]

Hmm i can't reproduce this.

[zanyrenney]

@lanitochka17 still about to reproduce?

[lanitochka17]

User is still Navigated back to "New contact method". But now tester is seeing that user is navigated to "New contact method" page when pressing on cmd + D.

Screen.Recording.2024-10-31.at.5.53.19.in.the.afternoon.mp4

[zanyrenney]

Okay, this not the expected behaviour, so let's get this added to external for priorities.

[melvin-bot]

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

[melvin-bot]

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

[zanyrenney]

Being navigated to the wrong place and requiring use of cmd +D = quality issue.

[melvin-bot]

@fedirjh @zanyrenney this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[mkzie2]

Proposal

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

Part of the screen is covered with black rectangle on MC page. Scrolling gets stuck after swiping up and down a few times

What is the root cause of that problem?

After we offline and online, ReconnectApp API is called which update isLoadingReportData to true

App/src/pages/workspace/AccessOrNotFoundWrapper.tsx

Line 143 in 10454f0

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

It leads loading page shown, and the input is unmounted and mounted again which causes the empty input appears

App/src/pages/workspace/AccessOrNotFoundWrapper.tsx

Lines 168 to 170 in 10454f0

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

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

Here we check whether the policy is undefined or not to display the loading page but if policyID is undefined this condition is always true. So I think we should add the condition to check policyID is undefined or not to show the loading page

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

App/src/pages/workspace/AccessOrNotFoundWrapper.tsx

Line 143 in 10454f0

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

What alternative solutions did you explore? (Optional)

We can add shouldSaveDraft to the input here to save the draft value.

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

Line 133 in 10454f0

<InputWrapper

[wildan-m]

Edited by proposal-police: This proposal was edited at 2024-11-11 21:40:42 UTC.

Proposal

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

Return to "New contact method" when going back online.

What is the root cause of that problem?

We are using Modal to show validation section. Using modal have these limitations:

• Will hide each time we re-mount / refresh the page
• Will hide each time another modal open

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

Contact validation page is not directly related to a report, but we conditionaly show loading indicator each time report data loaded here:

App/src/pages/workspace/AccessOrNotFoundWrapper.tsx

Line 144 in c286316

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

I think we don't need to show loading indicator in validation page because it is not directly related to a report, we can add new shouldDisableLoadingIndicator prop in AccessOrNotFoundWrapper

and modify logic to show the loading

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

Apply it in src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx or other similar pages

        <AccessOrNotFoundWrapper shouldBeBlocked={isActingAsDelegate} shouldDisableLoadingIndicator={true}>
 

This way the validation modal will not need to re-mount.

Branch for this solution

What alternative solutions did you explore? (Optional)

Alternative 1
If the bounty is doubled, I am willing to convert ValidateCodeActionModal to a page. Despite its widespread use, the conversion process is not straightforward.

This will also resolve this issue #51189 (comment)

Alternative 2

Directly use notFoundPage instead of AccessOrNotFoundWrapper as suggested in
#51189 (comment)

if (isActingAsDelegate) {
    return <NotFoundPage onBackButtonPress={onBackButtonPress} />;
}

[fedirjh]

@wildan-m Your RCA make sense to me. However, the main solution doesn't look ideal to me. I agree that we don't need to use AccessOrNotFoundWrapper. I reviewed the commits, and it appears that AccessOrNotFoundWrapper was mistakenly implemented in this PR #50643 to display NotFoundPage when a delegate accesses that page. I think we can simply use NotFoundPage directly instead.

if (isActingAsDelegate) {
    return <NotFoundPage onBackButtonPress={onBackButtonPress} />;
}

[wildan-m]

Proposal Updated

• add alternative 2 based on [HOLD for payment 2024-11-28] [$250] Contact Methods - Navigated back to "New contact method" when going back to online #51189 (comment) suggestion

@fedirjh If no one has proposed it yet, I have added it as alternative 2. I agree that we only need a "not found" page for this case and the isActingAsDelegate condition seems sufficient.

[fedirjh]

Let's move with @wildan-m's proposal and implement the alternative solution 2.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @cristipaval, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @wildan-m 🎉 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 📖

[wildan-m]

@fedirjh The PR is ready #52523. Thanks!

[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 9.0.64-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix ValidateCodeActionModal dismissed when re-connect #52523

If no regressions arise, payment will be issued on 2024-11-28. 🎊

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

• @wildan-m requires payment automatic offer (Contributor)
• @fedirjh requires payment through NewDot Manual Requests

[melvin-bot]

@fedirjh @zanyrenney @fedirjh The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[zanyrenney]

I have asked @fedirjh to complete checklist

[fedirjh]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production
• 2b. Reported on staging (deploy blocker)
• 2c. Reported on both staging and production
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] 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: Show No access Modal when Copilot tries to add new contact method on behalf of owner. #50643 (comment)

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source 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: N/A

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

Precondition:

• N/A

Test:

1. Navigate to Account Settings → Profile
2. Click on "Contact Method"
3. Click on "New Contact method"
4. Add an email → Add
5. On the verification page, go Offline and return Online
6. Verify User is not Navigated back to "New contact method" when going back to online

Do we agree 👍 or 👎

[zanyrenney]

https://github.com/Expensify/Expensify/issues/448571

[zanyrenney]

payment summary

@wildan-m requires payment automatic offer (Contributor) - paid $250 via upwork
@fedirjh requires payment through NewDot Manual Requests - please request $250 via ND.

[garrettmknight]

$250 approved for @fedirjh