[Due for payment 2025-12-30] [$125] Card feed icon for USBank plaid card feed is not correct

[m-natarajan]

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:
Reproducible in staging?: Needs Reproduction (Blocked as credentials n/a)
Reproducible in production?: Needs Reproduction
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @tgolen
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Create a workspace
2. Enabled corporate cards
3. Add USBank plaid feed
4. Go to the company cards page

Expected Result:

The selected card feed at the top should show the USBank icon.

Actual Result:

A generic card icon is shown.

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

Screenshots/Videos

2025-12-15_11-40-53.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022001034393470128159
• Upwork Job ID: 2001034393470128159
• Last Price Increase: 2025-12-16
• Automatic offers:
• abzokhattab | Contributor | 109847339

Issue Owner

Current Issue Owner: @jliexpensify

[melvin-bot]

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

[abzokhattab]

Proposal

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

The selected Plaid card feed (e.g., USBank) shows a generic card icon instead of the bank's specific icon in the company cards page header.

What is the root cause of that problem?

• In WorkspaceCompanyCardsListHeaderButtons, getPlaidInstitutionIconUrl is called with selectedFeed which has the format feedName#domainID (e.g., plaid.ins_129663#12345)
  

  App/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx

  Line 81 in b91283d

  const plaidUrl = getPlaidInstitutionIconUrl(selectedFeed);

• The function internally splits by . to extract the institution ID, resulting in ins_129663#12345 instead of ins_129663
• This generates an invalid icon URL that fails to load, causing the fallback generic icon to display
• The feed selector page correctly uses just the feed name without the domain suffix, which is why the icon appears correctly there

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

• In WorkspaceCompanyCardsListHeaderButtons, change the plaidUrl assignment to use feed instead of selectedFeed
  

  App/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx

  Line 81 in b91283d

  const plaidUrl = getPlaidInstitutionIconUrl(selectedFeed);

to

    const plaidUrl = getPlaidInstitutionIconUrl(feed);

• The feed variable is already extracted on the previous line using getCompanyCardFeed(selectedFeed) which strips the domain ID suffix
• This matches the pattern used in WorkspaceCompanyCardFeedSelectorPage where the icon displays correctly
• We can also apply this solution in other cases such as WorkspaceCompanyCardDetailsPage and CardSelectionStep if needed

Result:

What alternative solutions did you explore? (Optional)

Modify getPlaidInstitutionId to strip the domain ID suffix (#domainID) before processing, making it handle both formats

function getPlaidInstitutionId(feedName?: string) {
    // Strip domain ID suffix if present (e.g., "plaid.ins_123#456" → "plaid.ins_123")
    const cleanFeedName = feedName?.split(CONST.COMPANY_CARD.FEED_KEY_SEPARATOR).at(0);
    const feed = cleanFeedName?.split('.');
    if (!feed || feed?.at(0) !== CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) {
        return '';
    }
    return feed.at(1);
}

[nyomanjyotisa]

Proposal

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

Card feed icon for USBank plaid card feed is not correct

What is the root cause of that problem?

getPlaidInstitutionId splits the feed name by . and returns the second part. When the feed includes a domain ID separator (#), it returns usbank#domain123 instead of usbank, resulting in an invalid icon URL like ${CONST.COMPANY_CARD_PLAID}usbank#domain123.png

App/src/libs/CardUtils.ts

Lines 493 to 500 in 5a8a078

	function getPlaidInstitutionId(feedName?: string) {
	const feed = feedName?.split('.');
	if (!feed || feed?.at(0) !== CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) {
	return '';
	}
	return feed.at(1);
	}

When the PlaidCardFeedIcon component tries to load this invalid URL, it fails and falls back to the generic card icon

App/src/components/PlaidCardFeedIcon.tsx

Lines 43 to 49 in 5a8a078

	{isBrokenImage ? (
	<Icon
	src={illustrations.GenericCompanyCardLarge}
	height={iconHeight}
	width={iconWidth}
	additionalStyles={isSmall ? styles.cardMiniature : styles.cardIcon}
	/>

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

We can extract the feed part (before the # separator) before extracting the institution ID. Use getCompanyCardFeed to get the feed part, then extract the institution ID from that.

function getPlaidInstitutionId(feedName?: string) {
    const feed = feedName?.split(CONST.COMPANY_CARD.FEED_KEY_SEPARATOR)[0];
    const feedParts = feed?.split('.');
    if (!feedParts || feedParts.at(0) !== CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) {
        return '';
    }

    return feedParts.at(1);
}

App/src/libs/CardUtils.ts

Lines 493 to 500 in 5a8a078

	function getPlaidInstitutionId(feedName?: string) {
	const feed = feedName?.split('.');
	if (!feed || feed?.at(0) !== CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) {
	return '';
	}
	return feed.at(1);
	}

What alternative solutions did you explore? (Optional)

We could update getPlaidInstitutionIconUrl to extract the feed part before calling getPlaidInstitutionId

function getPlaidInstitutionIconUrl(feedName?: string) {
    const feed = feedName?.split(CONST.COMPANY_CARD.FEED_KEY_SEPARATOR)[0];
    const institutionId = getPlaidInstitutionId(feed);
    if (!institutionId) {
        return '';
    }
    return `${CONST.COMPANY_CARD_PLAID}${institutionId}.png`;
}

App/src/libs/CardUtils.ts

Lines 485 to 491 in 5a8a078

	function getPlaidInstitutionIconUrl(feedName?: string) {
	const institutionId = getPlaidInstitutionId(feedName);
	if (!institutionId) {
	return '';
	}
	return `${CONST.COMPANY_CARD_PLAID}${institutionId}.png`;
	}

[nkdengineer]

Proposal

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

A generic card icon is shown.

What is the root cause of that problem?

selectedFeed is the feed name with the domain ID; however, this function returns the wrong icon URL because it only extracts the institutionId by splitting the feedName at the . character.

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx

Line 81 in 5a8a078

const plaidUrl = getPlaidInstitutionIconUrl(selectedFeed);

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

We should use getCompanyCardFeed to get the feed name without domainID first. This approach ensure whenever the getCompanyCardFeed is changed, this function still works well

function getPlaidInstitutionId(feedName?: string) {
    const feedNameWithoutDomainID = getCompanyCardFeed(feedName ?? '');
    const feed = feedNameWithoutDomainID?.split('.');
    if (!feed || feed?.at(0) !== CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) {
        return '';
    }

    return feed.at(1);
}

App/src/libs/CardUtils.ts

Lines 493 to 500 in 5a8a078

	function getPlaidInstitutionId(feedName?: string) {
	const feed = feedName?.split('.');
	if (!feed || feed?.at(0) !== CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) {
	return '';
	}
	return feed.at(1);
	}

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.

[jliexpensify]

@Expensify/design this wouldn't be internal, right? Also...is this an easy (i.e. $50) job?

[dannymcclain]

I genuinely have no idea 😕

[jliexpensify]

It's cool, looks like we have some proposals, so I shall make it external and with a lower price and have C+ make a judgment. It looks like it's just one line of a code change?

[melvin-bot]

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