[HOLD for payment 2024-11-26] [$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: @joekaufmanexpensify

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

This issue has not been updated in over 15 days. @NikkiWines, @joekaufmanexpensify, @thesahindia, @Shahidullah-Muffakir eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[joekaufmanexpensify]

PR out on staging

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

• Ensure only latest bank account shows default badge #51437

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

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

• @thesahindia requires payment through NewDot Manual Requests
• @Shahidullah-Muffakir requires payment (Needs manual offer from BZ)

[melvin-bot]

@thesahindia @joekaufmanexpensify @thesahindia 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]

[joekaufmanexpensify]

@thesahindia could you complete checklist so we can pay?

[joekaufmanexpensify]

OG job closed, so opened a new one.

[joekaufmanexpensify]

@Shahidullah-Muffakir offer sent for $250

[Shahidullah-Muffakir]

@Shahidullah-Muffakir offer sent for $250

@joekaufmanexpensify , Offer accepted, Thanks.

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @thesahindia owed $250 via NewDot
• ROLE: @Shahidullah-Muffakir paid $(AMOUNT) via Upwork (LINK)

BugZero Checklist (@joekaufmanexpensify)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1846307344294313664/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[thesahindia]

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: N/A

• [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.

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/447939

Regression Test Proposal

Test:

1. Go to Settings > Wallet > Add Bank Account > Personal Bank Account
2. On the Plaid modal, select Wells Fargo bank > complete the process
3. Verify that the newly added bank account is not marked as the default
4. Repeat the process and add a second bank account, select chase this time
5. Verify that 'default' badge appears at the newly added bank account
   Refresh the page and confirm that the correct default account is still displayed.

Do we agree 👍 or 👎

[joekaufmanexpensify]

Added regression test issue above. Checklist all set.

[joekaufmanexpensify]

Good to issue payment!

[joekaufmanexpensify]

We need to pay:

• @Shahidullah-Muffakir $250 for PR via Upwork.
• @thesahindia $250 for C+ via NewDot.

[joekaufmanexpensify]

@Shahidullah-Muffakir $250 sent and contract ended!

[joekaufmanexpensify]

Upwork job closed.

[joekaufmanexpensify]

Closing as all that's left is for @thesahindia to request payment in NewDot. Please do this at your earliest convenience!