[Due for payment 2025-02-19] [$250] iOS - Contact method - Nothing happens on tapping the main email & secondary contact in contact methods page

[vincdargento]

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: v9.0.94-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
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): [email protected]
Issue reported by: Applause Internal Team
Device used: iPhone 16/iOS 18
App Component: User Settings

Action Performed:

1. Launch iOS Hybrid or Standalone app
2. Create new account (can be expensifail or gmail account)
3. Go to Settings >> Profile >> Contact method
4. Tap on main contact method
5. Tap on New contact method
6. Enter secondary contact
7. Enter magic code
8. Select the added new secondary method
9. Enter magic code to validate secondary contact
10. Tap on the secondary contact account

Expected Result:

1. On step 4 - A page should open which says "This is your current default contact method. Before you can delete it, you'll need to choose another contact method and click “Set as default”."
2. On step 10 - Tapping on secondary contact method should open a page where remove option is displayed

Actual Result:

Nothing happens on tapping the main email & secondary contact method in contact methods page

Note: On ND Standalone app - When logging with new gmail account, a page to enter magic code appears to verify the account. After verifying account, tapping on main contact method does not respond

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021886927951828663823
• Upwork Job ID: 1886927951828663823
• Last Price Increase: 2025-02-05
• Automatic offers:
• QichenZhu | Contributor | 106021589

Issue Owner

Current Issue Owner: @MitchExpensify

[melvin-bot]

Triggered auto assignment to @MitchExpensify (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]

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

[melvin-bot]

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

[QichenZhu]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-05 21:42:30 UTC.

Proposal

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

Fails to enter the contact details page.

What is the root cause of that problem?

When entering the contact details page, the effect below resets the code to unsent state.

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

Line 170 in adc61ce

resetContactMethodValidateCodeSentState(contactMethod);

It runs an Onyx merge command.

App/src/libs/actions/User.ts

Line 323 in 27780d5

Onyx.merge(ONYXKEYS.LOGIN_LIST, {

loginList is undefined while a merge is pending. After the merge completes, the value becomes valid again.

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

Line 52 in adc61ce

const [loginList, loginListResult] = useOnyx(ONYXKEYS.LOGIN_LIST);

The effect below sees this change from undefined to valid as the contact method just getting verified, so it navigates the page back to the contact list.

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

Lines 158 to 160 in adc61ce

	// Navigate to methods page on successful magic code verification
	// validatedDate property is responsible to decide the status of the magic code verification
	Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo));

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

Only reset the code sent state if the contact method hasn’t been verified yet.

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

Line 170 in adc61ce

resetContactMethodValidateCodeSentState(contactMethod);

useEffect(() => {
    if (loginData?.validatedDate) {
        return;
    }
    resetContactMethodValidateCodeSentState(contactMethod);
}, [contactMethod, loginData?.validatedDate]);

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

N/A

What alternative solutions did you explore? (Optional)

To prevent the undefined value during the merge, pass {allowStaleData: true} to useOnyx.

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

Line 52 in adc61ce

const [loginList, loginListResult] = useOnyx(ONYXKEYS.LOGIN_LIST);

const [loginList, loginListResult] = useOnyx(ONYXKEYS.LOGIN_LIST, {allowStaleData: true}); 

[truph01]

Proposal

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

• Nothing happens on tapping the main email & secondary contact method in contact methods page

What is the root cause of that problem?

• We have implemented a logic to navigate back to the previous screen, which can be found here:
  

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

  Line 160 in adc61ce

  Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo));

• This navigation occurs when a specific condition is not met:
  

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

  Line 154 in adc61ce

  if (prevValidatedDate || !loginData?.validatedDate || !loginData) {

• In this bug, when tapping on the main email or secondary email, the app navigates to the ContactMethodDetailsPage but immediately navigates back. This happens because prevValidatedDate is undefined at the time of navigation. The reason for this is that loginData?.validatedDate is undefined initially while the Onyx data is still loading. As a result, the condition !loginData?.validatedDate evaluates to false, and the navigation logic is triggered.

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

• We can update the condition here:

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

Line 154 in adc61ce

if (prevValidatedDate || !loginData?.validatedDate || !loginData) {

to the following::

        if (prevValidatedDate || prevValidatedDate === undefined || !loginData?.validatedDate || !loginData) {

• In the updated condition, I added prevValidatedDate === undefined to address the issue. The purpose of this useEffect is to navigate to the methods page upon successful magic code verification. The validatedDate property determines the status of the magic code verification.

• There is a fact that, before validation, validatedDate is an empty string (''), and it only gets a non-empty value after successful validation. And that prevValidatedDate can be undefined during the initial load. By adding prevValidatedDate === undefined to the condition, we ensure the logic works correctly by excluding the case where validatedDate is undefined, effectively fixing the bug.

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)

[s77rt]

@QichenZhu Thanks for the proposal. Your RCA is correct however the solution does not address the root cause. We should avoid updating that onyx key.

[s77rt]

@truph01 Thanks for the proposal. Your RCA is not correct.

This happens because prevValidatedDate is undefined at the time of navigation

This is not true

Screen.Recording.2025-02-05.at.4.08.48.PM.mov

[s77rt]

FWIW, this is a regression from #55405. If we can alter the approved solution there or find another solution that would be probably easier/better.

[QichenZhu]

Proposal

Updated

@QichenZhu Thanks for the proposal. Your RCA is correct however the solution does not address the root cause. We should avoid updating that onyx key.

@s77rt Thanks for your advice! I’ve updated the main solution and moved the previous solution to the alternative section.

[s77rt]

@QichenZhu Thanks for the update. I think that solution may work but I was thinking of something a little different that is to reset the code sent state on the clean up effect. Can you check if we can go with that instead?

[QichenZhu]

@s77rt Thanks for the feedback! Yeah, it would be better if we could do it in the cleanup phase. But the problem is that cleanup code isn’t always guaranteed to run, for example, when you don’t exit the page gracefully.

[s77rt]

@QichenZhu Good point! Can you double check that your solution works well with accounts that are not verified too?

[QichenZhu]

@s77rt Tested on iOS, and it works for unverified accounts.

Screen.Recording.2025-02-06.at.12.36.37.PM.mov

[s77rt]

@QichenZhu Can you check that after verifying the account we get navigated back correctly?

[QichenZhu]

@s77rt Yes, it navigates back correctly.

Screen.Recording.2025-02-06.at.1.04.50.PM.mov

[s77rt]

@QichenZhu Thank you! The proposal looks good to me.

🎀 👀 🎀 C+ reviewed
Link to.proposal

[melvin-bot]

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

[MarioExpensify]

Very nice and detailed proposal @QichenZhu, let's move forward. Thanks @s77rt!

[melvin-bot]

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

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

• Fix contact details page not opening #56487

If no regressions arise, payment will be issued on 2025-02-19. 🎊

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

• @s77rt requires payment through NewDot Manual Requests
• @QichenZhu requires payment automatic offer (Contributor)

[melvin-bot]

@s77rt @MitchExpensify @s77rt 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]

[s77rt]

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 (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 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: fix: unable to receive New Magic Codes for Primary Contact #55498 (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.

  Bug requires regression test: Yes

Regression Test Proposal Template

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

  Link to issue: https://github.com/Expensify/Expensify/issues/471559

Regression Test Proposal

Precondition:

• n/a

Test:

1. Go to Settings > Profile > Contact Method
2. Tap "New contact method"
3. Enter a secondary contact
4. Enter the magic code sent to the primary contact
5. Tap the secondary contact
6. Enter the magic code sent to the secondary contact
7. Tap the secondary contact again
8. Verify that you land on the contact details page

Do we agree 👍 or 👎

[MitchExpensify]

Payment summary:

• $250 @s77rt requires payment through NewDot Manual Requests
• $250 @QichenZhu requires payment automatic offer (Contributor)

[melvin-bot]

@s77rt @MitchExpensify @QichenZhu @MarioExpensify 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!

[JmillsExpensify]

$250 approved for @s77rt

[melvin-bot]

@s77rt, @MitchExpensify, @QichenZhu, @MarioExpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[MitchExpensify]

@QichenZhu paid and contract ended