[$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: @thesahindia

[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/workspace/invoices/WorkspaceInvoiceVBASection.tsx

Line 57 in 99bf554

const shouldShowMakeDefaultButton = !paymentMethod.isSelectedPaymentMethodDefault;

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/workspace/invoices/WorkspaceInvoiceVBASection.tsx

Line 57 in 99bf554

const shouldShowMakeDefaultButton = !paymentMethod.isSelectedPaymentMethodDefault;

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)