[HOLD for payment 2025-05-13] [$250] Showing get physical card and activate physical card buttons at same time

[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
Reproducible in production?: Needs Reproduction
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @joekaufmanexpensify
Slack conversation (hyperlinked to channel name): #convert

Action Performed:

1. Login to an account with the Expensify Card (needs to be able to issue actual physical cards).
2. Issue an account a physical card.
3. Enter your info to order the card.
4. Issue the account a second physical card.

Expected Result:

The first card should offer the option to activate the physical card. The second card should also only show the option to activate (since you don't need to confirm your address again if you're issued additional physical Expensify Cards after you've already ordered one).

Actual Result:

Both cards show both the buttons to activate and order a physical card at the same time.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

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

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

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021915145797663978781
• Upwork Job ID: 1915145797663978781
• Last Price Increase: 2025-04-23

Issue Owner

Current Issue Owner: @lydiabarclay

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[melvin-bot]

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

[mountiny]

I will take a look at this

[samranahm]

Proposal

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

Showing get physical card and activate physical card buttons at same time

What is the root cause of that problem?

Here

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

Lines 344 to 366 in a2b6087

	{physicalCards?.some((card) => card?.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED) && (
	<Button
	success
	large
	style={[styles.w100, styles.p5]}
	onPress={() =>
	Navigation.navigate(
	ROUTES.SETTINGS_WALLET_CARD_ACTIVATE.getRoute(String(physicalCards?.find((card) => card?.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED)?.cardID)),
	)
	}
	text={translate('activateCardPage.activatePhysicalCard')}
	/>
	)}
	{physicalCards?.some((card) => card?.state === CONST.EXPENSIFY_CARD.STATE.STATE_NOT_ISSUED) && (
	<Button
	success
	large
	text={translate('cardPage.getPhysicalCard')}
	pressOnEnter
	onPress={() => Navigation.navigate(ROUTES.MISSING_PERSONAL_DETAILS)}
	style={[styles.mh5, styles.mb5]}
	/>
	)}

Currently both conditions are true that lead to show both buttons in UI

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

We should explicitly check the state and update this logic to

const notActivatedCard = physicalCards?.find((card) => card?.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED);
const notIssuedCard = physicalCards?.find((card) => card?.state === CONST.EXPENSIFY_CARD.STATE.STATE_NOT_ISSUED);

{notActivatedCard ? (
    <Button
        success
        large
        style={[styles.w100, styles.p5]}
        onPress={() =>
            Navigation.navigate(
                ROUTES.SETTINGS_WALLET_CARD_ACTIVATE.getRoute(String(notActivatedCard.cardID)),
            )
        }
        text={translate('activateCardPage.activatePhysicalCard')}
    />
) : notIssuedCard ? (
    <Button
        success
        large
        text={translate('cardPage.getPhysicalCard')}
        pressOnEnter
        onPress={() => Navigation.navigate(ROUTES.MISSING_PERSONAL_DETAILS)}
        style={[styles.mh5, styles.mb5]}
    />
) : null}

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.

[nkdengineer]

@mountiny When shouldDisplayCardDomain is true, we're showing all cards grouped under the domain

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

Lines 86 to 91 in f48ee32

	const cardsToShow = useMemo(() => {
	if (shouldDisplayCardDomain) {
	return getDomainCards(cardList)[domain]?.filter((card) => !card?.nameValuePairs?.issuedBy || !card?.nameValuePairs?.isVirtual) ?? [];
	}
	return [cardList?.[cardID]];
	}, [shouldDisplayCardDomain, cardList, cardID, domain]);

So if one physical card has NOT_ACTIVATED and another one has STATE_NOT_ISSUED, both buttons are shown.

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

Lines 344 to 366 in f48ee32

	{physicalCards?.some((card) => card?.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED) && (
	<Button
	success
	large
	style={[styles.w100, styles.p5]}
	onPress={() =>
	Navigation.navigate(
	ROUTES.SETTINGS_WALLET_CARD_ACTIVATE.getRoute(String(physicalCards?.find((card) => card?.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED)?.cardID)),
	)
	}
	text={translate('activateCardPage.activatePhysicalCard')}
	/>
	)}
	{physicalCards?.some((card) => card?.state === CONST.EXPENSIFY_CARD.STATE.STATE_NOT_ISSUED) && (
	<Button
	success
	large
	text={translate('cardPage.getPhysicalCard')}
	pressOnEnter
	onPress={() => Navigation.navigate(ROUTES.MISSING_PERSONAL_DETAILS)}
	style={[styles.mh5, styles.mb5]}
	/>
	)}

Should we only get the state of the current card with cardID param here and only display the button based on this card.

const currentPhysicalCard = physicalCards?.find((card) => String(card?.cardID) === cardID);
{currentPhysicalCard?.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED && (
    <Button
        success
        large
        style={[styles.w100, styles.p5]}
        onPress={() =>
            Navigation.navigate(
                ROUTES.SETTINGS_WALLET_CARD_ACTIVATE.getRoute(String(physicalCards?.find((card) => card?.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED)?.cardID)),
            )
        }
        text={translate('activateCardPage.activatePhysicalCard')}
    />
)}
{currentPhysicalCard?.state === CONST.EXPENSIFY_CARD.STATE.STATE_NOT_ISSUED && (
    <Button
        success
        large
        text={translate('cardPage.getPhysicalCard')}
        pressOnEnter
        onPress={() => Navigation.navigate(ROUTES.MISSING_PERSONAL_DETAILS)}
        style={[styles.mh5, styles.mb5]}
    />
)}

[mountiny]

@nkdengineer yeah that makes sense

[mountiny]

That seems cleaner than @samranahm solution