[Due for payment 2026-03-23] Android - Blank bank logo in Pay dropdown if different BA is set up in multiple workspaces

[jponikarchuk]

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.3.37-0
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: Exploratory around #83638
Email or phone of affected tester (no customers): kiatest.78+ck3122610@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Pixel 8a/Android 16
App Component: Money Requests

Action Performed:

Precondition :

1. User is an admin on 2+ workspaces.
2. Connect a Business Bank Account to each of those workspaces (accounts must be fully set up). Set up 1111 account on WS1 & 0000 account on WS2
3. Invite some member on workspace.
4. Workspace member has submitted expense on workspace chat
   Steps:
5. Launch Hybrid app & log in as Admin
6. Go to workspace chat & Approve the expense
7. Go to Reports page
8. Select the expense via checkbox
9. Tap dropdown menu >> Pay option
10. Observe the blank bank logo displayed

Expected Result:

Bank logo should not be blank in Pay dropdown in reports page when different BA is set in multiple workspaces

Actual Result:

Blank bank logo in Pay dropdown if different BA is set up in multiple workspaces

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Video.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @ChavdaSachin

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #83638

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

[OSBotify]

🔍 Investigation Summary

Classification: Frontend bug
Causing PR: #83638 - "feat: Allow admins to pay with any business bank account they have access to" by @samranahm (High confidence)
Related Issues: None

Recommendation: REVERT

PR #83638 introduced new logic to display multiple business bank accounts in the pay dropdown menu. The blank bank logo issue occurs when bank account data is missing the additionalData.bankName field, which is required to load the correct bank icon.

Labels: This is a frontend bug. Keeping DeployBlockerCash label (App deploy blocked). Not removing any labels at this time since the issue is reproducible on staging and caused by an App PR.

📋 Detailed Analysis

Evidence

The issue was reported during exploratory testing around PR #83638, which introduced the ability for admins to pay with any business bank account they have access to (not just the workspace-linked one).

The bug appears specifically when:

• User is admin on 2+ workspaces
• Different business bank accounts are set up on each workspace
• User attempts to pay via the bulk pay dropdown in the Reports page

Verification

I verified that PR #83638 modifies the exact code path affected by this bug:

Files modified by PR #83638:

• src/libs/PaymentUtils.ts - Added getBusinessBankAccountOptions() function
• src/hooks/useBulkPayOptions.ts - Uses the new function to populate bank account options
• src/components/SettlementButton/index.tsx - Updated to show multiple business bank accounts
• src/components/Search/SearchBulkActionsButton.tsx - Updated bulk pay UI

The affected code flow:

1. getBusinessBankAccountOptions() in PaymentUtils.ts (lines 156-174) maps formatted payment methods to bank account options
2. It extracts icon from formattedPaymentMethod?.icon
3. The icon comes from formatPaymentMethods() which calls getBankIcon() (line 113-117)
4. getBankIcon() requires bankAccount?.accountData?.additionalData?.bankName to load the correct bank icon
5. If additionalData.bankName is missing/undefined, the icon will be blank

Root Cause

When multiple business bank accounts are configured across different workspaces, the bank account data may not always include the additionalData.bankName field. The new getBusinessBankAccountOptions() function does not handle this edge case, resulting in blank icons being passed to the UI.

The PR introduced this regression by adding support for multiple business bank accounts without ensuring that all bank accounts have the necessary metadata (bank name) to display icons correctly.

[MelvinBot]

Proposal

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

On the Reports page, when an admin has 2+ workspaces each with different Business Bank Accounts, tapping the Pay dropdown shows a blank bank logo next to the bank account options.

What is the root cause of that problem?

PR #83638 introduced getBusinessBankAccountOptions() in PaymentUtils.ts to list all business bank accounts. When these options are consumed in useBulkPayOptions.ts (the Reports/Search page bulk pay flow), the bank icon container styles are passed as iconStyles (line 141). However, in the working SettlementButton flow (single-report pay), the same styles are passed as additionalIconStyles (line 260).

In MenuItem.tsx, these two props are applied to different elements:

• iconStyles → applied to the outer container View (line 846: <View style={[styles.popoverMenuIcon, iconStyles, getAvatarWidthStyle(avatarSize)]}>). The bankIconContainer style sets overflow: 'hidden', width: 40, height: 40. However, getAvatarWidthStyle(avatarSize) is applied after iconStyles in the style array and overrides the width to the default avatar width, while overflow: 'hidden' persists — clipping the 40×40 bank icon SVG within the smaller container.
• additionalIconStyles → applied to the Icon component's inner wrapper (line 873: additionalStyles={additionalIconStyles}), where it correctly sizes the icon without being overridden by avatar width styles.

Additionally, useBulkPayOptions.ts is missing the typeof account.icon === 'number' defensive fallback that SettlementButton has at line 259, which guards against edge cases in icon resolution across platforms.

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

In src/hooks/useBulkPayOptions.ts, update the bank account items (around line 136-151) to match the SettlementButton pattern:

1. Change iconStyles: account.iconStyles to additionalIconStyles: account.iconStyles — this passes the bankIconContainer styles to the Icon component's inner wrapper instead of the MenuItem's outer container, avoiding the avatar width override + overflow clipping issue.
2. Add typeof account.icon === 'number' ? icons.Bank : account.icon defensive check for the icon property (matching SettlementButton line 259).
3. Similarly guard additionalIconStyles, iconWidth, and iconHeight with typeof account.icon === 'number' checks (matching SettlementButton lines 260-262).
4. Add displayInDefaultIconColor: true so the bank icon SVGs render with their original multi-color design instead of being overridden by the theme's single fill color.

What alternative solutions did you explore? (Optional)

An alternative would be to set shouldIconUseAutoWidthStyle: true on the bank account items, which would use width: 'auto' instead of the avatar width style. However, this is less consistent with the established pattern in SettlementButton and could have unintended layout side effects in the popover.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.