[Due for payment 2025-09-23] [$250] Invoice - Delete bank account makes X button unresponsive

[lanitochka17]

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.2.1-20
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

Precondition: workspace with enabled Expensify card, added VBA and enabled Invoices.

1. Go to WS > Invoices
2. Click three dots on Bank accounts > Delete
3. Confirm Delete
4. Click X button to dismiss error

Expected Result:

Bank account icon and name is visible before delete
Error dismissed, VBA account reappears

Actual Result:

Bank account icon and name is not visible before delete
Error is not dismissed. X button unresponsive. User need to go to Account > Wallet to dismiss an error

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6936424_1757098260861.bandicam_2025-09-05_21-43-32-287.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021965197478848655599
• Upwork Job ID: 1965197478848655599
• Last Price Increase: 2025-09-08
• Automatic offers:
• thelullabyy | Contributor | 108745991

Issue Owner

Current Issue Owner: @parasharrajat

[melvin-bot]

Triggered auto assignment to @mallenexpensify (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.

[Eskalifer1]

Proposal

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

Invoice - Delete bank account makes X button unresponsive

What is the root cause of that problem?

On the Wallet page, we transfer information about the bank, so if the deletion attempt fails, we have all the information:

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

Line 304 in 975cce9

deletePaymentBankAccount(bankAccountID, lastUsedPaymentMethods, bankAccount);

But we don't do this on the Invoice page:

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

Line 150 in 975cce9

deletePaymentBankAccount(bankAccountID);

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

We need to pass two parameters that are the same as on the Wallet page:

const bankAccount = bankAccountList?.[paymentMethod.methodID] ?? {};
deletePaymentBankAccount(bankAccountID, lastUsedPaymentMethods, bankAccount);

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

N/A

What alternative solutions did you explore? (Optional)

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.

[mukhrr]

Proposal

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

When a user deletes a bank account and encounters an error, the error modal's dismiss button (X) becomes unresponsive, requiring the user to navigate to Account > Wallet to dismiss the error. Additionally, the bank account icon and name are not visible before deletion, making it unclear which account is being deleted.

What is the root cause of that problem?

deletePaymentMethod‎ in WorkspaceInvoiceVBASection.tsx doesn't pass necessary params to show info and dismiss error message.

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

Lines 147 to 152 in ca0a15b

	const deletePaymentMethod = useCallback(() => {
	const bankAccountID = paymentMethod.selectedPaymentMethod.bankAccountID;
	if (paymentMethod.selectedPaymentMethodType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT && bankAccountID) {
	deletePaymentBankAccount(bankAccountID);
	}
	}, [paymentMethod.selectedPaymentMethod.bankAccountID, paymentMethod.selectedPaymentMethodType]);

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

We have clear example of how to do it in WalletPage.tsx

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

Lines 299 to 315 in ca0a15b

	const deletePaymentMethod = useCallback(() => {
	const bankAccountID = paymentMethod.selectedPaymentMethod.bankAccountID;
	const fundID = paymentMethod.selectedPaymentMethod.fundID;
	if (paymentMethod.selectedPaymentMethodType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT && bankAccountID) {
	const bankAccount = bankAccountList?.[paymentMethod.methodID] ?? {};
	deletePaymentBankAccount(bankAccountID, lastUsedPaymentMethods, bankAccount);
	} else if (paymentMethod.selectedPaymentMethodType === CONST.PAYMENT_METHODS.DEBIT_CARD && fundID) {
	deletePaymentCard(fundID);
	}
	}, [
	paymentMethod.selectedPaymentMethod.bankAccountID,
	paymentMethod.selectedPaymentMethod.fundID,
	paymentMethod.selectedPaymentMethodType,
	lastUsedPaymentMethods,
	paymentMethod.methodID,
	bankAccountList,
	]);

And IMPORTANTLY, we need to make sure to cleanup modals visiblity in case VBA is successly deleted as it's nicely done in WalletPage

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

Lines 355 to 375 in ca0a15b

	useEffect(() => {
	if (!shouldShowDefaultDeleteMenu) {
	return;
	}
	// We should reset selected payment method state values and close corresponding modals if the selected payment method is deleted
	let shouldResetPaymentMethodData = false;
	if (paymentMethod.selectedPaymentMethodType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT && isEmpty(bankAccountList?.[paymentMethod.methodID])) {
	shouldResetPaymentMethodData = true;
	} else if (paymentMethod.selectedPaymentMethodType === CONST.PAYMENT_METHODS.DEBIT_CARD && isEmpty(fundList?.[paymentMethod.methodID])) {
	shouldResetPaymentMethodData = true;
	}
	if (shouldResetPaymentMethodData) {
	// Close corresponding selected payment method modals which are open
	if (shouldShowDefaultDeleteMenu) {
	hideDefaultDeleteMenu();
	}
	}
	}, [hideDefaultDeleteMenu, paymentMethod.methodID, paymentMethod.selectedPaymentMethodType, bankAccountList, fundList, shouldShowDefaultDeleteMenu]);
	// Don't show "Make default payment method" button if it's the only payment method or if it's already the default

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

N/A

What alternative solutions did you explore? (Optional)

We can create a custom hook for this to DRY. Besides, I think a lot of things can be DRY bank accounts logic between in WS invoice and Wallet page

[thelullabyy]

Proposal

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

Delete bank account makes X button unresponsive

What is the root cause of that problem?

When a bank account deletion fails and the backend returns an error, the failureData is populated as shown here:

App/src/libs/actions/BankAccounts.ts

Lines 384 to 392 in 34c2f92

	failureData: [
	{
	onyxMethod: Onyx.METHOD.SET,
	key: `${ONYXKEYS.BANK_ACCOUNT_LIST}`,
	value: {
	[bankAccountID]: bankAccountFailureData,
	},
	},
	],

The problem arises because we use the set method on Onyx, which completely overwrites the existing data in bankAccountList. As a result, all previously stored bank account data is removed. This leads to the bank account information (including icon and name) being empty after the failed deletion attempt. And delete bank account makes X button unresponsive.

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

We should replace the set method with the merge method when updating bankAccountList during failure handling. This ensures we preserve existing data and only update the relevant parts, preventing unintended data loss.

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

N/A

What alternative solutions did you explore? (Optional)

We could also consider reverting this PR as an alternative solution.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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