[Due for payment 2026-01-21] [$250] Reverse the order of steps when adding the contact method

[m-natarajan]

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.1.30-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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: @JmillsExpensify
Slack conversation (hyperlinked to channel name): expensify-bugs

Action Performed:

1. Navigate to Settings
2. Click Contact method
3. Click add
4. Enter a new email address
5. Ask to verify the old email address
6. Verify old address
7. Verify new address

Expected Result:

The flow should be validating the old email address and then validating the new email address

Actual Result:

But we are validating the old email address after adding the new contact method email address

2. Navigate to Settings
3. Click Contact method
4. Click add
5. Verify the existing/old email address via magic code
6. Enter a new email address
7. Very the new address via magic code

Workaround:

unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021914350876425023060
• Upwork Job ID: 1914350876425023060
• Last Price Increase: 2025-05-05
• Automatic offers:
• suneox | Reviewer | 107226990
• cretadn22 | Contributor | 109786564

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @heyjennahay

[melvin-bot]

Triggered auto assignment to @lschurr (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/~021914350876425023060

[melvin-bot]

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

[govind-kumarr]

Proposal

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

Currently if we want to add a new contact method.

1. Go to the Profile Settings page.
2. Click on Contact Method.
3. Click on the New Contact Method button.
4. Enter the new contact method and click Add.
5. A magic code is sent to the primary contact method.
6. Verify the code sent to the primary contact method.
7. A new code is sent to the new contact method.
8. Enter the code in the prompted modal.
9. After successful verification, the new contact method is added.

What is the root cause of that problem?

Current flow of letting user input a new contact method and then verifying primary contact method is the root cause of problem. I will correct this flow to

1. Go to the Profile Settings page.
2. Click on Contact Method.
3. Click on the New Contact Method button.
4. A magic code is sent to the primary contact method.
5. Verify the code sent to the primary contact method.
6. After successful verification, input the new contact method.
7. Click Add.
8. A new code is sent to the new contact method.
9. Enter the code in the prompted modal.
10. After successful verification, the new contact method is added.

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

To solve this problem we will need to change the flow of things currently working. We will need to mainly change the components to trigger primary contact method verification first and then start the new contact method add process.

https://github.com/Expensify/App/blob/main/src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx
https://github.com/Expensify/App/blob/main/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx

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

To prevent this reintroducing this problem we will need to check the flow again with different new contact methods.

What alternative solutions did you explore? (Optional)

I believe the problem is quite straightforward, so exploring alternatives might not be necessary.

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

📣 @govind-kumarr! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[govind-kumarr]

Contributor details
Your Expensify account email: gk4051668@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~0130521ecca230687e

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[nkgupta-coder]

Proposal

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

We need to reverse the order of steps when adding a new contact method.

Currently, the flow works as follows:

1. Go to the Account and then Profile page
2. Click on Contact Method
3. Click on the New Contact Method button
4. Enter the new contact method and click Add
5. A magic code is sent to the primary contact method
6. Verify the code sent to the primary contact method
7. User is redirected to Contact Methods page showing the list of contacts
8. Click on the newly added contact
9. A new code is sent to the new contact method
10. Enter the code in the prompted modal
11. After successful verification, the new contact method is added

This flow is unnecessarily complex and should be streamlined.

What is the root cause of that problem?

The verification modal is currently being triggered when the user clicks the "Add" button because we're setting setIsValidateCodeActionModalVisible(true) in the handleValidateMagicCode function. This creates an extra step in the verification process that's confusing users.

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

We need to modify the NewContactMethodPage.tsx file to:

1. Change the condition that checks for user validation to use isAccountValidated instead of isUserValidated:

if (!isAccountValidated) {
    return (
        <VerifyAccountPage
            route={route}
            navigation={navigation}
        />
    );
}

2. Add a condition to display the verification modal when the user is validated:

if (isUserValidated) {
    setIsValidateCodeActionModalVisible(true);
}

This will trigger the verification modal when the user clicks on the "Add Contact Method" button, simplifying the flow by opening the verification modal immediately after the primary contact is verified.

3. Additional changes will be needed to properly handle adding contact methods after verifying the primary contact.

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

To prevent reintroducing this problem, we should test the following scenarios:

1. Adding a new email address as a contact method
2. Adding a new phone number as a contact method
3. Verifying the flow works correctly when the user already has multiple contact methods
4. Testing the verification process with both valid and invalid verification codes
5. Testing user navigation after the verification process completes

What alternative solutions did you explore? (Optional)

The issue is straightforward with a clear solution path. Alternative approaches weren't necessary given the well-defined problem and direct solution.