[Expensify Cards][Design] Show UI State for Suspended Expensify Cards in Wallet

[grgia]

3/4 of these cards are in suspended state, but the UI does not show them as suspended.

Let's make this clear to the user by adding a suspended overlay with instruction (perhaps like the chase card pattern "why is my number different")

Alternatively, we could use the pattern for freezing a card.

See OD:

Additionally:
https://github.com/Expensify/App/pull/82772/changes#r2827355123

Issue Owner

Current Issue Owner: @grgia

[melvin-bot]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

[daledah]

Proposal

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

3/4 of the assigned cards are in suspended state, but the UI does not show them as suspended.

What is the root cause of that problem?

In PaymentMethodList.tsx, suspended cards (state === 7) are included in ACTIVE_STATES and therefore appear in the "Assigned cards" list:

App/src/CONST/index.ts

Line 104 in c835e8d

const cardActiveStates: number[] = [2, 3, 4, 7];

However, the brickRoadIndicator logic that determines visual indicators only checks for broken feed connections, fraud, and pending actions — it never checks for the suspended state:

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

Lines 233 to 242 in c835e8d

	let brickRoadIndicator: ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS> | undefined;
	if (!card.errors) {
	if (shouldShowRBR) {
	brickRoadIndicator = CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
	} else if (card.fraud === CONST.EXPENSIFY_CARD.FRAUD_TYPES.DOMAIN || card.fraud === CONST.EXPENSIFY_CARD.FRAUD_TYPES.INDIVIDUAL) {
	brickRoadIndicator = CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
	} else if (isExpensifyCard(card) && isExpensifyCardPendingAction(card, privatePersonalDetails)) {
	brickRoadIndicator = CONST.BRICK_ROAD_INDICATOR_STATUS.INFO;
	}
	}

As a result, suspended cards are displayed identically to active cards with no visual distinction.

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

Add a suspended state check in the brickRoadIndicator logic in PaymentMethodList.tsx to show an error indicator for suspended cards:

 let brickRoadIndicator: ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS> | undefined;
 if (!card.errors) {
     if (shouldShowRBR) {
         brickRoadIndicator = CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
     } else if (card.fraud === CONST.EXPENSIFY_CARD.FRAUD_TYPES.DOMAIN || card.fraud === CONST.EXPENSIFY_CARD.FRAUD_TYPES.INDIVIDUAL) {
         brickRoadIndicator = CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
+    } else if (card.state === CONST.EXPENSIFY_CARD.STATE.STATE_SUSPENDED) {
+        brickRoadIndicator = CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
     } else if (isExpensifyCard(card) && isExpensifyCardPendingAction(card, privatePersonalDetails)) {
         brickRoadIndicator = CONST.BRICK_ROAD_INDICATOR_STATUS.INFO;
     }
 }

Additionally, apply the same check in the grouped domain card logic (line ~308-314) so that when a suspended card is part of a domain group, the group also shows the error indicator.

What alternative solutions did you explore? (Optional)

We could also follow the Chase bank account pattern in PaymentMethodListItem.tsx (lines 179-197) and render an informational message below each suspended card explaining the suspension, but a brickRoadIndicator is more consistent with the existing fraud/error patterns.

[grgia]

Not looking for proposals now @daledah

[shawnborton]

So I think I would start simple and just try adding our little condensed badge pattern on the subline, like so:

If we think it warrants a "danger" badge, it looks like this:

If we wanted to reduce opacity on the card artwork, it looks like this but I don't love this one personally:

Curious what @Expensify/design thinks too!

[shawnborton]

Figma is here for my tweakers

[dubielzyk-expensify]

Tried to move it around a bit, but nothing felt as good as what you have above. Dig where you took this 👍

[shawnborton]

Nice! Of the mocks above, do you prefer one of the three directions?

[grgia]

@joekaufmanexpensify cc'ing you on this.

[grgia]

Looks great, thank you @shawnborton!

3 is my favorite. But I know you said you didn't prefer it.

• Add inactive pill / lower opacity

Few questions on my mind for this:

What is the next step for the user for a suspended card?

• Message concierge?

Is there a case when the cards cannot or don't need to be reactivated?

• Should we remove them from UI?