[HOLD for payment 2024-12-05] [$125] Wallet - No "Make default payment method" option after adding 2nd account

[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.63
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Issue found when executing PR #51437

Action Performed:

1. Log in to the account that has no bank accounts
2. Navigate to Settings > Wallet and click on Add Bank Account > Personal Bank Account
3. On the Plaid modal, search and select Wells Fargo bank, enter credentials (e.g., user_good / pass_good), and complete the process
4. Verify that the added bank account is not marked as the default (because we are not showing default badge if there is only one bank account)
5. Repeat the process to add a second bank account by selecting Chase bank

Expected Result:

The "Make default payment method" option is displayed in the three-dot menu of the first bank account added without needing a page refresh

Actual Result:

The "Make default payment method" option is not displayed in the three-dot menu of the first bank account added after adding 2nd account. A page refresh is needed to display the option

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6666585_1731691611157.51437-mWeb.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021857547420122900843
• Upwork Job ID: 1857547420122900843
• Last Price Increase: 2024-11-15

Issue Owner

Current Issue Owner: @joekaufmanexpensify

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

[joekaufmanexpensify]

Reproduced

[melvin-bot]

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

[melvin-bot]

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

[joekaufmanexpensify]

Pretty minor bug, so adjusting price

[melvin-bot]

Upwork job price has been updated to $125

[Shahidullah-Muffakir]

Edited by proposal-police: This proposal was edited at 2024-11-15 22:56:19 UTC.

Proposal

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

The "Make default payment method" button is not appearing when a second payment method is added until the page is refreshed.

What is the root cause of that problem?

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

Line 317 in f9ce757

const shouldShowMakeDefaultButton =

This logic is insufficient because isSelectedPaymentMethodDefault remains true for previous default payment method, when we add a new payment method, until we refresh the page and the OpenPaymentsPage, fetch the updated data.

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

we can add the same check here, as I added in my last PR here:#51437
we need to use walletLinkedAccountID, and if for the selectedPaymentMethod isSelectedPaymentMethodDefault is true but its account id does not match walletLinkedAccountID, then we should show Make default payment method

we can use this check :

    const isMarkedDefaultButNotMostRecent = ()=>{
        
        if(paymentMethod.formattedSelectedPaymentMethod.type === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT ){
           return paymentMethod.selectedPaymentMethod.bankAccountID !== userWallet?.walletLinkedAccountID && paymentMethod.isSelectedPaymentMethodDefault;
        }
        if(paymentMethod.formattedSelectedPaymentMethod.type === CONST.PAYMENT_METHODS.DEBIT_CARD){
            return paymentMethod.selectedPaymentMethod.fundID !== userWallet?.walletLinkedAccountID && paymentMethod.isSelectedPaymentMethodDefault;
        }
    }

update the condition:

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

Line 317 in f9ce757

const shouldShowMakeDefaultButton =

as:

const shouldShowMakeDefaultButton =
     (!paymentMethod.isSelectedPaymentMethodDefault || isMarkedDefaultButNotMostRecent()) &&
     !(paymentMethod.formattedSelectedPaymentMethod.type === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT && paymentMethod.selectedPaymentMethod.type === CONST.BANK_ACCOUNT.TYPE.BUSINESS);

[nkdengineer]

Proposal

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

The "Make default payment method" option is not displayed in the three-dot menu of the first bank account added after adding 2nd account. A page refresh is needed to display the option

What is the root cause of that problem?

The condition to show the Default badge and the condition to show Make default payment method are different

1. The condition to show the Default badge is based on shouldShowDefaultBadge which will return the most recent default method

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

Line 421 in b0378aa

shouldShowDefaultBadge(

2. While the condition to show the Make default payment method is based on paymentMethod.isDefault which can be wrong after we add the 2nd account. The context can see here
   

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

   Line 333 in b0378aa

   paymentMethod.isDefault,

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

Line 172 in b0378aa

isSelectedPaymentMethodDefault: !!isDefault,

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

Lines 317 to 319 in b0378aa

	const shouldShowMakeDefaultButton =
	!paymentMethod.isSelectedPaymentMethodDefault &&
	!(paymentMethod.formattedSelectedPaymentMethod.type === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT && paymentMethod.selectedPaymentMethod.type === CONST.BANK_ACCOUNT.TYPE.BUSINESS);

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

We should also use shouldShowDefaultBadge function to check if this paymentMethod is default or not

const finalCombinedPaymentMethods = combinedPaymentMethods.map((paymentMethod) => {
    const isMethodActive = isPaymentMethodActive(actionPaymentMethodType, activePaymentMethodID, paymentMethod);
    const isDefault = shouldShowDefaultBadge(
        combinedPaymentMethods,
        paymentMethod,
        userWallet?.walletLinkedAccountID ?? 0,
        invoiceTransferBankAccountID ? invoiceTransferBankAccountID === paymentMethod.methodID : paymentMethod.isDefault,
    );
    return {
        ...paymentMethod,
        onPress: (e: GestureResponderEvent) =>
            onPress(
                ...
                isDefault,
                paymentMethod.methodID,
            ),
        ...
    };
});
return finalCombinedPaymentMethods;

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

Line 333 in b0378aa

paymentMethod.isDefault,

What alternative solutions did you explore? (Optional)

[joekaufmanexpensify]

Pending @thesahindia review

[melvin-bot]

@joekaufmanexpensify, @thesahindia Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[thesahindia]

@nkdengineer's proposal is simpler. Let's go with them.

@Shahidullah-Muffakir's proposal is better for different scenarios.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[Shahidullah-Muffakir]

@nkdengineer's proposal is simpler. Let's go with them.

🎀 👀 🎀 C+ reviewed

@thesahindia, I believe the selected proposal might not work as intended because shouldShowDefaultBadge and isDefault can represent different scenarios.

For example, add the fist payment method, we don't show the default badge for it. However, with the current proposal, the Make default payment method option would still appear for this method, which is not the expected behavior.

[thesahindia]

Thanks for pointing that out @Shahidullah-Muffakir.

Updated my comment.

[joekaufmanexpensify]

Yep, good find. Let's do that too.

[Shahidullah-Muffakir]

@thesahindia, PR is ready for review, Thank you.

[joekaufmanexpensify]

PR in review

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

• Display 'Make default payment method' option for the first bank account without requiring a refresh after adding the second account #52971

If no regressions arise, payment will be issued on 2024-12-05. 🎊

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 handle checklist so we can prep to pay?

[joekaufmanexpensify]

@Shahidullah-Muffakir offer sent for $125!

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

Regression Test Proposal

Test:

@joekaufmanexpensify, The steps are almost same as https://github.com/Expensify/Expensify/issues/447939, so I have combined them together. Could you please update it with the new steps? It will work for both issues.

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
6. At the first bank account, click the 3 dot menu
7. Verify you see "Make default payment method" option
8. Refresh the page and confirm that the correct default account is still displayed.

Do we agree 👍 or 👎

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @thesahindia owed $125 via NewDot
• Contributor: @Shahidullah-Muffakir paid $125 via Upwork

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/1857547420122900843/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[joekaufmanexpensify]

Consolidated regression test into https://github.com/Expensify/Expensify/issues/447939

[joekaufmanexpensify]

Payment summary above is correct. All set to issue payment!

[joekaufmanexpensify]

@Shahidullah-Muffakir $125 sent and contract ended!

[joekaufmanexpensify]

Upwork job closed

[joekaufmanexpensify]

@thesahindia please request payment in NewDot at your earliest convenience. Closing as this is otherwise all set!

[garrettmknight]

$125 approved for @thesahindia