[HOLD for payment 2025-01-28] [$500] Invoices - Discrepancies in bank account behavior in Invoices and Wallet page

[IuliiaHerets]

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.72-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
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: Exp
Email or phone of affected tester (no customers): ojidojdmwowjdoj@gmail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace settings > Invoices.
3. Click Add bank account.
4. Add a bank account.
5. After adding bank account, click 3-dot menu > Click Make default payment method.
6. Add a second bank account.
7. After the second bank account is added, note that there is no "Default" label on the first bank account in Step 5.
8. Refresh the page, and note that there is still no "Default" label.
9. Go back to Account settings > Wallet.
10. Note that the second bank account has "Default" label, when the first bank account in Step 5 is made as default.
11. Go back to Invoices.
12. Now the first bank account only shows the "Default" label.

Expected Result:

In Step 5, there should be no "Make default payment method" option because there is only one bank account added (this option does not appear in Wallet when there is only one bank account).

In Step 8, there should be "Default" label after the second bank account is added in Invoices (The same label instantly appears when adding second bank account in Wallet page).

In Step 10 and 12, there should be consistent whether the same default bank account in Invoices should also be default in Wallet page.

Actual Result:

In Step 5, there is a "Make default payment method" option when there is only one bank account added.

In Step 8, there is no "Default" label after the second bank account is added to Invoices page. It does not appear after the page is refreshed and only appears after user opens Wallet page.

In Step 10 and 12, after adding second bank account, the first bank account remains as default in Invoices, while the second bank account is the default account in Wallet.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6686161_1733475820034.bandicam_2024-12-06_16-25-55-857.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021865085918655065327
• Upwork Job ID: 1865085918655065327
• Last Price Increase: 2025-01-28

Issue Owner

Current Issue Owner: @garrettmknight

[melvin-bot]

Triggered auto assignment to @garrettmknight (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-12-10 10:02:03 UTC.

Proposal

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

There are discrepancies in how payment methods behave between the Wallet Page and the Invoices Page, specifically:

1. The "Make Default Payment Method" button appears incorrectly in the Invoices page.
2. The "Default" badge does not display correctly after adding a second payment method in the Invoices page. The behavior is inconsistent with the Wallet page.

What is the root cause of that problem?

We have two issues

1. Make default payment method issue
   The reason Make default payment method is not showing correctly the same way it does in the Wallet page is because of this condition:
   

   App/src/pages/workspace/invoices/WorkspaceInvoiceVBASection.tsx

   Line 58 in 36b9b44

   const shouldShowMakeDefaultButton = !paymentMethod.isSelectedPaymentMethodDefault;

   
   When user add a new payment payment in the Invoices page, this value is not updating, but in the Wallet page when user add a new payment method, the new payment method is being set as the Default payment method, and then we are showing the Make default payment method for the previous payment method.
   and also if there is only one payment method we should not show the Make default payment method at all before checking any other condition, because that should be the default one, so the number of the payment methods is not considered in the Invoices page like it is considered in the Wallet page.
2. Default badge issue
   when user adds a new payment method in the Invoices page, we are only showing the Default badge for the account where:
   policy?.invoice?.bankAccount?.transferBankAccountID === methodID is true
   

   App/src/pages/workspace/invoices/WorkspaceInvoiceVBASection.tsx

   Line 116 in df7ab48

   isSelectedPaymentMethodDefault: transferBankAccountID === methodID,

but we art not updating the policy?.invoice?.bankAccount?.transferBankAccountID after adding a new payment method, hence it causing the issue, resulting it to show the Default badge for the old Default payment method .
because now in this part of the code the isDefault will be false for the newly added payment method:

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

Lines 150 to 152 in f5234f7

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

causing discrepancies from the Wallet page, because in the wallet we are showing the Default badge for the recently added payment method.

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

1. To solve the first issue of Make default payment method:
1. before checking anything else we should check if there are more than one payment methods, if is one or none it should return false, same like the Wallet page.

    const hasMultiplePaymentMethods = PaymentUtils.formatPaymentMethods(bankAccountList ?? {}, fundList ?? {}, styles).length > 1;
    const shouldShowMakeDefaultButton = hasMultiplePaymentMethods && !paymentMethod.isSelectedPaymentMethodDefault;

2. we should update the policy?.invoice?.bankAccount?.transferBankAccountID to the newly added payment method, so that if there are more then one payment method, we should show the Make default payment method for the previous payment method.
3. this point number 2 have both frontend and Backend fix.
   1. the frontend fix is to call the

      App/src/libs/actions/PaymentMethods.ts

      Line 559 in b1c726d

      function setInvoicingTransferBankAccount(bankAccountID: number, policyID: string, previousBankAccountID: number) {

      for the newly added payment method, whenver a user add a new payment method in the Invoices page.
   2. the backend fix is that when user add a new payment method with

      App/src/libs/actions/BankAccounts.ts

      Line 199 in df7ab48

      function addPersonalBankAccount(account: PlaidBankAccount) {

      in the invoces page update the policy?.invoice?.bankAccount?.transferBankAccountID to the account id of the new payment method using:
      

      App/src/libs/actions/PaymentMethods.ts

      Line 559 in b1c726d

      function setInvoicingTransferBankAccount(bankAccountID: number, policyID: string, previousBankAccountID: number) {

      for the newly added payment method.

In Wallet page we already update the userWallet?.walletLinkedAccountID to the account ID of the newly added payment method.

2. To solve the issue of Default badge:

1. update the policy?.invoice?.bankAccount?.transferBankAccountID to the account ID of the newly added payment method so that isDefault is true here for the newly added payment method, and directly show Default badge for the newly added payment method.
   

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

   Lines 150 to 152 in f5234f7

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

2. modify this part of the code , to consider policy?.invoice?.bankAccount?.transferBankAccountID for the Invoices page and userWallet?.walletLinkedAccountID for the Wallet page when deciding to show the Default badge.
   if invoiceTransferBankAccountID exists in the PaymentMethodList, then it is the invoices page, because only in the inovoces page we are passing the invoiceTransferBankAccountID to PaymentMethodList in the case of Wallet page it will undefined.
   

   App/src/pages/workspace/invoices/WorkspaceInvoiceVBASection.tsx

   Line 188 in df7ab48

   invoiceTransferBankAccountID={transferBankAccountID}

   
   so change the follwing code such that if it is the Invoices page, the only show the Default badge if the userWallet?.walletLinkedAccountID same as the account ID of the current payment method
   and in the case of Invoices page only show the Default badge if the invoiceTransferBankAccountID is same as the current payment method.
   

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

   Lines 155 to 165 in f5234f7

   	const defaultPaymentMethods = filteredPaymentMethods.filter((method: PaymentMethod) => !!method.isDefault);
   	// If there is more than one payment method, show the default badge only for the most recently added default account.
   	if (defaultPaymentMethods.length > 1) {
   	if (item.accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) {
   	return item.accountData?.bankAccountID === walletLinkedAccountID;
   	}
   	if (item.accountType === CONST.PAYMENT_METHODS.DEBIT_CARD) {
   	return item.accountData?.fundID === walletLinkedAccountID;
   	}
   	}

   
   this will be the modified code:

 if (invoiceTransferBankAccountID && item.methodID !== invoiceTransferBankAccountID) {
        return false;
    }

    if (item.accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) {
        if (item.accountData?.bankAccountID !== walletLinkedAccountID) {
            return false;
        }
    }
    if (item.accountType === CONST.PAYMENT_METHODS.DEBIT_CARD) {
        if (item.accountData?.fundID !== walletLinkedAccountID) {
            return false;
        }
    }

in the shouldShowDefaultBadge function.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

To ensure this issue is fully covered and to avoid regressions, the following test cases should be performed for Wallet Page and Invoices Page:

Single Payment Method:

1. Add a single bank account.
   Verify that the 'Make Default Payment Method' button is not displayed.

Multiple Payment Methods:

1. Add two bank accounts.
2. Verify that the 'Default' label is displayed on the the latest account after the second account is added.
3. Verify that only one account is marked as the default.
4. and the first payment method has Make the payment method default option
5. Ensure the previously default account loses its 'Default' label.

Switching Default Accounts:

1. Add two bank accounts and switch the default account using the 'Make Default Payment Method' option.
2. Verify that the correct account is now marked as the default.

Consistency Across Refresh:

1. Add two bank accounts, mark one as default, and refresh the page.
2. Verify that the correct account remains marked as the default.

[melvin-bot]

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

[melvin-bot]

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

[rdipippo]

Proposal

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

There are 2 separate issues:

1. On the invoices page, the Make Default Payment Method menu item shows when there is only one account.
2. The default account on the invoices page is not the same as the default account on the wallet page (not sure if this happens all the time)

What is the root cause of that problem?

1. The function shouldShowMakeDefaultButton function defined in WalletPage.tsx is different from the function defined in WorkspaceInvoiceVBASection.tsx
2. The logic to determine the default account takes into account the invoiceTransferBankAccountID field, which is null on the wallet page but on on the invoice page. This makes the results different on each page.

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

1. Calculate the shouldShowMakeDefaultButton variable in WorkspaceInvoiceVBASection the same as the one in WalletPage.tsx.

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

Lines 338 to 340 in b595f5d

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

2. Do not take into account the invoiceTransferBankAccountID when determining the default account on the invoices page.
   Current code:
   

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

   Lines 420 to 428 in b595f5d

   	badgeText={
   	shouldShowDefaultBadge(
   	filteredPaymentMethods,
   	item,
   	userWallet?.walletLinkedAccountID ?? 0,
   	invoiceTransferBankAccountID ? invoiceTransferBankAccountID === item.methodID : item.isDefault,
   	)
   	? translate('paymentMethodList.defaultPaymentMethod')
   	: undefined

The modifed code would simply pass the isDefault parameter into the shouldShowDefaultBadge function

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Automated UI tests:

1. Compare the default accounts on the wallet page and invoices page. Change the default account and verify it is the same on both pages.
2. Verify Make Default Payment Method does not appear in the menu when there is one account. Do this for both pages.

What alternative solutions did you explore? (Optional)

None.
Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

📣 @rdipippo! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>