[$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 [email protected] 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): [email protected]
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
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6635189_1728994444081.az_recorder_20241015_151226_compress.mp4

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-22

Issue Owner

Current Issue Owner: @thesahindia

[melvin-bot]

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

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

[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]

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

[melvin-bot]

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

[melvin-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?

1. when we add a new account, it will be set as default account(expected )
2. 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:
   

   App/src/pages/settings/Wallet/PaymentMethodList.tsx

   Lines 152 to 155 in 26a9fc4

   	function shouldShowDefaultBadge(filteredPaymentMethods: PaymentMethod[], isDefault = false): boolean {
   	if (!isDefault) {
   	return false;
   	}

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:

Screen.20Recording.202024-10-16.20at.206.mp4

[joekaufmanexpensify]

@thesahindia could you share your thoughts on the above proposal?

[melvin-bot]

@NikkiWines, @joekaufmanexpensify, @thesahindia Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[joekaufmanexpensify]

Still pending @thesahindia review

[thesahindia]

@Shahidullah-Muffakir's proposal seems fine to me!

Could we confirm the expected result to ensure accuracy? Should we display the 'default' badge on the latest bank account?

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @NikkiWines is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[NikkiWines]

Could we confirm the expected result to ensure accuracy? Should we display the 'default' badge on the latest bank account?

Hmm, I think ideally we'd show the default badge on the initially created account. From there, any changes to the default account should be made manually by the user. What do you think @joekaufmanexpensify?

[joekaufmanexpensify]

My understanding is it's intentional that we hide the Default badge when there's only one account. If you only have one account, it is self-explanatory that the account is the default and doesn't really need to be called out.

My understanding of the current design too is that we set your default as the most recently added account (independent of this FE issue). Is that not the case?

[joekaufmanexpensify]

I would personally expect that any new account you're adding is set as the default, rather than you needing to make that change yourself. Because if you're setting up an account now, presumably it is to use it.

[NikkiWines]

I'm not sure what our ideal behavior is to be honest, pulled it into slack here so we can figure it out 😄

[NikkiWines]

We want to go with the following behavior, as it aligns with the original design and implementation:

1. User adds personal bank account A, no default badge is shown
2. User adds personal bank account B, default badge is shown next to personal account B, as it the most recently added account and now there is an option for a non-default account

Given that, @Shahidullah-Muffakir's proposal looks great 🪅

[melvin-bot]

📣 @Shahidullah-Muffakir You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[Shahidullah-Muffakir]

Thank you, I will submit the PR within 24 hrs.

[Shahidullah-Muffakir]

PR #51437 is ready for review, Thank you.

[joekaufmanexpensify]

TY!