[$250] Mweb/Chrome - Wallet - Adding 2 Payment methods, Both are shown as default

[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.49.0 Reproducible in staging?: Y Reproducible in production?: N 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): moamenhussien6@gmail.com Issue reported by: Applause - Internal Team

Action Performed:

Precondition: User has logged in with account (that doesn't have any bank account already added)

1. Navigate to Settings > Wallet
2. Click on Add Bank account> Personal Bank Account
3. On Plaid modal, search and select Wells Fargo bank
4. Submit the credentials "user_good / pass_good"
5. Click on Continue until Plaid modal closes
6. Repeat steps 1-5 and add another payment method

Expected Result:

Two payment methods displayed. One as default and another doesn't

Actual Result:

Two payment methods are displayed but Both are showing as default so user forced to refresh the page to correct the default payment method

Workaround:

Unknown

Platforms:

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

• [ ] Android: Native
• [x] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/b1b8a65d-b5ca-4868-94fc-2d637738a838

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021846307344294313664
• Upwork Job ID: 1846307344294313664
• Last Price Increase: 2024-10-15

Issue Owner

Current Issue Owner: @thesahindia

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[github-actions[bot]]

:wave: 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:

[NikkiWines]

Don't really see anything that would trigger this for staging only, esp. for mWeb specifically

[NikkiWines]

@lanitochka17 can you confirm the same steps were taken for prod (i.e. fully adding a second payment method) and not just that the same account was logged into on production?

[lanitochka17]

@NikkiWines Bank account unable to check on Prod so logged to the same account

[NikkiWines]

I was able to reproduce this on staging, but yeah I'm also unable to complete the bank account step on production on mWeb. It just gets stuck at the following page (even when using a non-test account)

[NikkiWines]

Sike, got it to work on prod - was able to reproduce there as well - no longer a blocker

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[Shahidullah-Muffakir]

Edited by proposal-police: This proposal was edited at 2024-10-15 23:40:00 UTC.

Proposal

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

When adding a 2nd bank account , the Default badge is shown for both accounts.

What is the root cause of that problem?

1. when user has one back account, that is the default one, no need for showing the default badge(because there is only one account). (backend always return isdefault when creating a bank account)
2. when we add the 2nd bank account, as the backend is returning isdefault:true , when we add a new bank account, it is also default now
3. now we have more than 1 account, we should show the default badge for the default account, but both the accounts has isDefault true, hence showing is Default true for both account.
4. when we refresh the page, backend is sending only one default account.

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

5. when we add a new account, it will be set as default account(expected )
6. change isDefault:false, for the previous default account

or

3. when there are two accounts with isDefault:true, only show default badge for the latest created bank account( It seems the better approach), when we refresh the page, backend will return isDefault:true for that account only. in this function: https://github.com/Expensify/App/blob/26a9fc450e1ece9f258d0309639c61ec94c95aa3/src/pages/settings/Wallet/PaymentMethodList.tsx#L152-L155

add this check:

    // Find all payment methods that are marked as default
     const defaultPaymentMethods = filteredPaymentMethods.filter((method) => method.isDefault);

     // If there are two or more default payment methods, find the most recently created one
     if (defaultPaymentMethods.length > 1) {
         // Sort default payment methods by creation date to find the most recent
         const mostRecentDefaultMethod = defaultPaymentMethods.reduce((latest, current) => 
             new Date(current.accountData.created) > new Date(latest.accountData.created) ? current : latest
         );

         // Return true only if the accountId matches the most recently created default account
         return mostRecentDefaultMethod.accountData.bankAccountID === bankAccountID;
     }

and pass the bankAccountID to the shouldShowDefaultBadge function.

After adding the above mentioned changes:

https://github.com/user-attachments/assets/9afcf694-f5b9-4c0b-bbbd-31127ed49de8