[$250] Company Card - Assign card to unvalid user, card detail not display card is currently pending

[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: v9.3.69-3
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-27379/folder/13176706/57707648/1401519485
Email or phone of affected tester (no customers): lekima20+65105@gmail.com
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Win 11/Chrome
App Component: Workspace Settings

Action Performed:

1. Open https://staging.new.expensify.com login as admin
2. Admin go to Workspace setting > Company cards > add Direct Feed with select Other and search Wells Fargo in the Plaid > Select Plaid Credit Card ending 3333 > Complete flow
3. Navigate to the Members tab invite a non-existent user
4. Back to Company cards tab assign card to the non-existent user at step 3
5. Click on the assigned card row to go card detail page

Expected Result:

Verify the following status message: "Card is currently pending and will be issued once {name}'s account is validated." is displayed on the card details page

Actual Result:

"Card is currently pending and will be issued once {name}'s account is validated." isn't displayed on the card details page

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

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022053727069643741550
• Upwork Job ID: 2053727069643741550
• Last Price Increase: 2026-06-29

[MelvinBot]

Proposal

Problem

When a company card is assigned to an unvalidated user, the card details page should display a pending status message but doesn't.

Solution

The WorkspaceCompanyCardDetailsPage has no logic to check the card's state or the cardholder's validation status. The fix is to:

1. Add a new translation string (e.g. workspace.moreFeatures.companyCards.pendingCardMessage) with value "Card is currently pending and will be issued once {name}'s account is validated.".
2. In WorkspaceCompanyCardDetailsPage, check if the card state is STATE_NOT_ISSUED using the existing isCardPendingIssue utility from CardUtils, combined with checking if cardholder?.validated is falsy (the validated field is already available since personalDetails is fetched at line 67).
3. When both conditions are met, render an informational banner/Text component above the card image showing the translated pending message with the cardholder's display name.

Supporting evidence

• The card.state field uses CONST.EXPENSIFY_CARD.STATE constants — STATE_NOT_ISSUED (2) is the pending state.
• isCardPendingIssue(card) already exists and is used elsewhere (e.g., useTimeSensitiveCards, ExpensifyCardPage).
• The cardholder object is already resolved at line 87 and includes validated.
• No translation string for this message currently exists.

Possibly related

• [Due for payment 2026-05-13] [$250] Remove admin warning about assigning/issuing card to unvalidated account #89308 — open issue to remove the admin warning about assigning cards to unvalidated accounts. The pending message fix here and that issue address different aspects of the same flow.

---

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.

[melvin-bot]

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

[MobileMage]

Proposal

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

When a company card is assigned to a non-existent or unvalidated user (someone invited to the workspace who hasn't created a validated account), navigating to the card details page shows no status message. The page should display "Card is currently pending and will be issued once {name}'s account is validated." to inform the admin of the pending state.

What is the root cause of that problem?

The WorkspaceCompanyCardDetailsPage never implements this pending-validation status message at all. The cardholder is resolved via personalDetails?.[card?.accountID ?? CONST.DEFAULT_NUMBER_ID], which returns undefined for a non-existent/unvalidated user since they have no entry in the PERSONAL_DETAILS_LIST Onyx key. The page uses getDisplayNameOrDefault(cardholder) to fall back to a placeholder name, but there is no conditional rendering path that detects cardholder === undefined and renders the pending-account warning. The translation string itself also does not exist in en.ts.

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

Lines 87 to 88 in b7c38b1

	const cardholder = personalDetails?.[card?.accountID ?? CONST.DEFAULT_NUMBER_ID];
	const displayName = getDisplayNameOrDefault(cardholder);

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

First, add a translation entry to the companyCards block inside src/languages/en.ts — something like pendingAccountValidation: (name: string) => \Card is currently pending and will be issued once ${name}'s account is validated.`— alongside the existing keys such asunassignCardandneverUpdated`.

Second, in WorkspaceCompanyCardDetailsPage.tsx, compute a boolean isCardholderUnvalidated that is true when card?.accountID is set (the card is assigned) but cardholder resolves to undefined from personalDetails. Then, render a Text component using the new translation key — passing displayName or the raw login stored on the card as the name argument — conditionally when isCardholderUnvalidated is true. The most natural placement is immediately after the cardholder MenuItem (around line 166) so it appears as an inline status note beneath the assignee row, consistent with how other status messages are surfaced on details pages throughout the app.

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

Lines 157 to 166 in b7c38b1

	<MenuItem
	label={translate('workspace.moreFeatures.companyCards.cardholder')}
	title={displayName}
	titleStyle={styles.mt1}
	iconStyles={styles.mt1}
	icon={cardholder?.avatar ?? expensifyIcons.FallbackAvatar}
	iconType={CONST.ICON_TYPE_AVATAR}
	description={Str.removeSMSDomain(cardholder?.login ?? '')}
	interactive={false}
	/>

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

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

[aswin-s]

Proposal

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

When a company card is assigned to a newly invited, unvalidated user via the Members tab, the company card details page fails to display the pending status message "Card is currently pending and will be issued once {name}'s account is validated." This prevents users from understanding that the card issuance is blocked pending account validation.

What is the root cause of that problem?

Regression PR #89338 (commit 17a7dfb) removed the conditional block that rendered the pending status MenuItem from WorkspaceCompanyCardDetailsPage (and sibling card detail pages) and deleted the cardPending translation key from all locale files. The block that checked !cardholder?.validated and displayed the MenuItem with the Hourglass icon and pending message is now absent.

The guard condition at src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx:88 establishes the cardholder object: const cardholder = personalDetails?.[card?.accountID ?? CONST.DEFAULT_NUMBER_ID];. When a cardholder is unvalidated (!cardholder?.validated), the pending MenuItem should be rendered to surface the status message, but the conditional block was removed.

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

Lines 150 to 160 in b7c38b1

	src={getCardFeedIcon(card?.bank, illustrations, companyCardFeedIcons)}
	pointerEvents="none"
	height={variables.cardPreviewHeight}
	width={variables.cardPreviewWidth}
	/>
	)}
	</View>
	<MenuItem
	label={translate('workspace.moreFeatures.companyCards.cardholder')}
	title={displayName}
	titleStyle={styles.mt1}

The working analog pattern that must be restored is the MenuItem block with the Hourglass icon and workspace.expensifyCard.cardPending translation key:

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

Lines 88 to 100 in b7c38b1

	const displayName = getDisplayNameOrDefault(cardholder);
	const exportMenuItem = getExportMenuItem(connectedIntegration, policyID, translate, policy, card);
	const companyFeeds = getCompanyFeeds(cardFeeds);
	const domainOrWorkspaceAccountID = getDomainOrWorkspaceAccountID(workspaceAccountID, companyFeeds[feedName]);
	const plaidUrl = getPlaidInstitutionIconUrl(feedName);
	// Show "Break connection" only when Mock Bank requests target non-production APIs.
	const isMockBank = bank?.includes(CONST.COMPANY_CARDS.BANK_CONNECTIONS.MOCK_BANK);
	const isUsingNonProductionAPI = shouldUseStagingServer || CONFIG.IS_USING_LOCAL_WEB;
	const shouldShowBreakConnection = isMockBank && isUsingNonProductionAPI;
	const lastScrape = card?.lastScrape

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

1. File: src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx
   Restore the conditional MenuItem block immediately after the closing </View> tag (around line 153–154). Insert the pending status MenuItem that renders when !cardholder?.validated, displaying the Hourglass icon and the cardPending translation message with the cardholder's display name.

2. File: src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx
   Ensure useMemoizedLazyExpensifyIcons hook includes 'Hourglass' in its icon list to provide the icon used by the pending MenuItem.

3. File: src/languages/en.ts
   Restore the cardPending translation key within the expensifyCard object with the exact text: ({name}: {name: string}) => 'Card is currently pending and will be issued once ${name}'s account is validated.'

4. File: src/languages/es.ts
   Restore the cardPending translation key with the Spanish translation: ({name}: {name: string}) => 'La tarjeta está pendiente y se emitirá una vez que la cuenta de ${name} haya sido validada.'

5. Sibling files (same pending MenuItem restoration):

   • src/pages/settings/Wallet/PersonalCardDetailsHeaderMenu.tsx: Restore the !cardholder?.validated MenuItem block and re-add 'Hourglass' to the expensifyIcons list.
   • src/pages/settings/Wallet/PersonalCardDetailsPage.tsx: Restore the pending MenuItem block and ensure displayName prop is passed through and getDisplayNameOrDefault is imported.
   • src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx: Restore the same pending MenuItem block.

6. Remaining locale files (de.ts, fr.ts, it.ts, ja.ts, nl.ts, pl.ts, pt-BR.ts, zh-hans.ts): Re-add the cardPending translation key with appropriate translations per the regression PR's removal diff.

Blast radius: Changes are isolated to card detail pages and locale files. No API or data-flow changes. The pending status is only rendered for unvalidated cardholders, an existing guard that remains unchanged.

What alternative solutions did you explore? (Optional)

N/A

[yusufdeveloper2903]

Proposal

What is the root cause of that problem?

The card details page fails to display the "Card is currently pending" message when a card is assigned to a non-existent (unvalidated) user. The root cause is likely in how the card detail page determines whether to show the pending status message — it checks for user account validity using data that doesn't exist for invited-but-unvalidated users.

In the card details page (likely src/pages/WorkspaceSwitcherPage or more precisely around src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx), the pending status is shown conditionally based on whether the assigned cardholder's account is validated. For a non-existent user who was invited but hasn't created an account yet, the lookup for their account data (via personalDetails or similar) returns undefined or an empty object, causing the condition to short-circuit before rendering the pending message.

The relevant check likely looks something like:

https://github.com/Expensify/App/blob/main/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx

The condition probably checks personalDetails[accountID] to determine if a user is pending/unvalidated, but for a non-existent user invited by email, their accountID may not be present in personalDetails at all — so the condition evaluates as falsy and the message is skipped entirely, rather than treating a missing account as a "pending" state.

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

I'd suggest updating the condition that determines whether to show the pending message so that a missing or unvalidated user entry is treated as a pending state, not as "no message needed."

The fix should change the guard from requiring a valid personalDetails entry to also showing the pending message when the user's details are absent (i.e., they haven't validated their account yet):

- const isPending = personalDetails[cardholderAccountID]?.validated === false;
+ const isPending = !personalDetails[cardholderAccountID] || personalDetails[cardholderAccountID]?.validated === false;

Additionally, the display name used in the message ({name}) should fall back gracefully when personalDetails has no entry for that user — using the email/login from the card assignment data instead:

- const cardholderName = personalDetails[cardholderAccountID]?.displayName ?? '';
+ const cardholderName = personalDetails[cardholderAccountID]?.displayName ?? card?.nameValuePairs?.cardholderEmail ?? '';

These two changes together ensure that:

1. The pending message is shown when the assigned user has no validated account (including non-existent users).
2. The {name} placeholder is populated with the email used during assignment rather than being blank.

No other files should need changes — this is self-contained to the card details page component.

[github-actions]

⚠️ @yusufdeveloper2903 Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[KJ21-ENG]

🚨 Edited by proposal-police: This proposal was edited at 2026-05-11 06:54:29 UTC.

Replaces my earlier proposal. The earlier body treated the missing pending warning as a display regression. Review found #89308 and PR #89338 intentionally removed this exact warning for the same company-card flow, so restoring it would contradict the current product decision.

Proposal

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

This issue asks to show the pending-account message after assigning a company card to a newly invited or unvalidated workspace member. The attached video shows that flow ending on the card details page with the cardholder email/avatar and normal card fields, but no pending warning.

What is the root cause of that problem?

This is not an App regression. The expected result in this issue is stale relative to #89308 and PR #89338. That earlier issue used the same company-card flow and concluded admins should not see the pending warning because company cards are scraped immediately after assignment; PR #89338 then removed the warning.

The current code reflects that decision. WorkspaceCompanyCardDetailsPage still loads PERSONAL_DETAILS_LIST, resolves the assigned cardholder, and derives displayName.

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

Lines 67 to 88 in b7c38b1

	const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
	const [allBankCards, allBankCardsMetadata] = useCardsList(feedName);
	const [cardList, cardListMetadata] = useOnyx(ONYXKEYS.CARD_LIST);
	const [cardFeeds] = useCardFeeds(policyID);
	const [isUnassigning, setIsUnassigning] = useState(false);
	const workspaceAccountID = policy?.workspaceAccountID ?? CONST.DEFAULT_NUMBER_ID;
	const syncingAccountingIntegration = CONST.POLICY.CONNECTIONS.ACCOUNTING_CONNECTION_NAMES.find((integration) => integration === connectionSyncProgress?.connectionName);
	const connectedIntegration = getConnectedIntegration(policy, CONST.POLICY.CONNECTIONS.ACCOUNTING_CONNECTION_NAMES) ?? syncingAccountingIntegration;
	// Prefer feed-scoped card from WORKSPACE_CARDS_LIST to maintain proper access control.
	// Only use CARD_LIST as fallback if card is being unassigned (has pendingAction: DELETE).
	// This prevents showing cards from other feeds/workspaces via deep links while still
	// preventing NotHerePage flash during the unassignment flow.
	const feedScopedCard = allBankCards?.[cardID];
	const globalCard = cardList?.[cardID];
	const isCardBeingUnassigned = globalCard?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
	const card = feedScopedCard ?? (isCardBeingUnassigned ? globalCard : undefined);
	const cardholder = personalDetails?.[card?.accountID ?? CONST.DEFAULT_NUMBER_ID];
	const displayName = getDisplayNameOrDefault(cardholder);

After the card preview, the page goes directly to the cardholder and card-number rows with no pending-warning branch. That is the intentional behavior from PR #89338, not a missing data path.

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

Lines 145 to 166 in b7c38b1

	isLarge
	/>
	) : (
	<ImageSVG
	contentFit="contain"
	src={getCardFeedIcon(card?.bank, illustrations, companyCardFeedIcons)}
	pointerEvents="none"
	height={variables.cardPreviewHeight}
	width={variables.cardPreviewWidth}
	/>
	)}
	</View>
	<MenuItem
	label={translate('workspace.moreFeatures.companyCards.cardholder')}
	title={displayName}
	titleStyle={styles.mt1}
	iconStyles={styles.mt1}
	icon={cardholder?.avatar ?? expensifyIcons.FallbackAvatar}
	iconType={CONST.ICON_TYPE_AVATAR}
	description={Str.removeSMSDomain(cardholder?.login ?? '')}
	interactive={false}
	/>

The old workspace.expensifyCard.cardPending copy is also absent from the card translations after that cleanup.

App/src/languages/en.ts

Lines 5376 to 5395 in b7c38b1

	expensifyCard: {
	issueAndManageCards: 'Issue and manage your Expensify Cards',
	getStartedIssuing: 'Get started by issuing your first virtual or physical card.',
	verificationInProgress: 'Verification in progress...',
	verifyingTheDetails: "We're verifying a few details. Concierge will let you know when Expensify Cards are ready to issue.",
	disclaimer:
	'The Expensify Visa® Commercial Card is issued by The Bancorp Bank, N.A., Member FDIC, pursuant to a license from Visa U.S.A. Inc. and may not be used at all merchants that accept Visa cards. Apple® and the Apple logo® are trademarks of Apple Inc., registered in the U.S. and other countries. App Store is a service mark of Apple Inc. Google Play and the Google Play logo are trademarks of Google LLC.',
	euUkDisclaimer:
	'Cards provided to EEA residents are issued by Transact Payments Malta Limited and cards provided to UK residents are issued by Transact Payments Limited pursuant to license by Visa Europe Limited. Transact Payments Malta Limited is duly authorized and regulated by the Malta Financial Services Authority as a Financial Institution under the Financial Institution Act 1994. Registration number C 91879. Transact Payments Limited is authorized and regulated by the Gibraltar Financial Service Commission.',
	issueCard: 'Issue card',
	exportAsCSV: 'Export as CSV',
	csvColumnType: 'Type',
	csvColumnLimitType: 'Limit type',
	csvColumnLimit: 'Limit',
	findCard: 'Find card',
	newCard: 'New card',
	name: 'Name',
	lastFour: 'Last 4',
	limit: 'Limit',
	currentBalance: 'Current balance',

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

Do not change App code for this issue. Close this as a stale regression-test expectation, or update the BrowserStack/regression test to expect no pending-account warning after assigning a company card to an unvalidated member.

If Product explicitly reverses #89308, that should be handled as a new product decision. In that case, the implementation should be company-card-specific and should not restore the old generic warning across Expensify Card or personal-card details pages.

Scope boundaries:

• Files touched: none in Expensify/App for the current product behavior; update only the external regression expectation / issue disposition.
• Platforms: all platforms keep the shared company-card details behavior already shipped by PR Remove admin warning about card pending for unvalidated accounts #89338.
• Code paths / callers explicitly NOT touched: WorkspaceCompanyCardDetailsPage, card assignment API/Onyx writes, Expensify Card details, personal-card details, feed setup, unassign/update-card flows.
• API contracts or backend behavior changes: no.

What alternative solutions did you explore? (Optional)

I considered my earlier proposal to restore a company-card-only pending message, but #89308 and PR #89338 explicitly removed the same warning for this same company-card/unvalidated-user flow.

MelvinBot proposed adding a card-state check such as isCardPendingIssue(card) plus cardholder?.validated, but that still assumes this warning belongs on the company-card details page. The prior product decision says the warning should not be shown for this assignment flow.

MobileMage and aswin-s also proposed restoring the warning, with aswin-s expanding the scope back to sibling card detail pages. That is the behavior PR #89338 intentionally removed, so those restore paths should not be used unless Product reverses the earlier decision.