[WAITING ON CHECKLIST] [$250] Expensify Card - Expensify Card in system message is linked after deactivating it and visiting member profile

[vincdargento]

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.1.90-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/test-runs/TR-111/folder/13176890/41237386/827407657?sort=%2Bidentifier
Email or phone of affected tester (no customers): applausetester+070801kh@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.5 / Chrome
App Component: Workspace Settings

Action Performed:

Precondition:

• Workspace is set up with Expensify Card feature.

1. Go to staging.new.expensify.com
2. Go to workspace settings > Expensify Card.
3. Click Issue card.
4. Assign a virtual card to yourself.
5. Go to workspace chat.
   → Expensify Card in system message is linked (expected).
6. Go to workspace settings > Expensify Card.
7. Open the assigned card in Step 4.
8. Click Deactivate card.
9. Click Deactivate.
10. Go to workspace chat.
    → Expensify Card in system message is not linked (expected).
11. Go to workspace settings > Members.
12. Click on your profile.
13. Go back to workspace chat.

Expected Result:

Expensify Card in system message will not be linked because the card is deactivated.

Actual Result:

After visiting member profile, Expensify Card in system message is linked again when it is deactivated, which opens not here page.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021953686024813367308
• Upwork Job ID: 1953686024813367308
• Last Price Increase: 2025-08-08
• Automatic offers:
• linhvovan29546 | Contributor | 108392726

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.

[linhvovan29546]

🚨 Edited by proposal-police: This proposal was edited at 2025-08-08 05:21:04 UTC.

Proposal

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

Expensify Card - Expensify Card in system message is linked after deactivating it and visiting member profile

What is the root cause of that problem?

We display a system message in the following locations:

App/src/components/ReportActionItem/IssueCardMessage.tsx

Line 28 in 0754dfc

const expensifyCard = useGetExpensifyCardFromReportAction({reportAction: action, policyID});

App/src/components/ReportActionItem/IssueCardMessage.tsx

Line 36 in 0754dfc

<RenderHTML html={`<muted-text>${getCardIssuedMessage({reportAction: action, shouldRenderHTML: true, policyID, expensifyCard, companyCard})}</muted-text>`} />

App/src/hooks/useGetExpensifyCardFromReportAction.ts

Line 19 in 0754dfc

return isPolicyAdmin(getPolicy(policyID)) ? expensifyCards?.[cardID] : allUserCards?.[cardID];

When opening a member profile from the workspace member list, the API returns the Expensify card, even if it is in a deactivated state. Currently, we do not have any logic to filter or check for the card’s state before displaying the system message:

App/src/libs/ReportActionsUtils.ts

Lines 2872 to 2873 in 0754dfc

	const expensifyCardLink =
	shouldRenderHTML && !!expensifyCard ? `<a href='${environmentURL}/${navigateRoute}'>${translateLocal('cardPage.expensifyCard')}</a>` : translateLocal('cardPage.expensifyCard');

As a result, system messages is linked deactive card

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

We can check the card’s state and only show the linked card if the card is active. For example, I use logic similar to the filterInactiveCards function; however, in this case, we can only check for the STATE_DEACTIVATED state

const isCardActive= (card: Card | undefined): boolean => {
    if (!card) {
        return false;
    }
    const closedStates = new Set<number>([CONST.EXPENSIFY_CARD.STATE.CLOSED, CONST.EXPENSIFY_CARD.STATE.STATE_DEACTIVATED, CONST.EXPENSIFY_CARD.STATE.STATE_SUSPENDED]);
    return !closedStates.has(card.state);
}
....
    const expensifyCardLink =
        shouldRenderHTML && isCardActive(expensifyCard) ? `<a href='${environmentURL}/${navigateRoute}'>${translateLocal('cardPage.expensifyCard')}</a>` : translateLocal('cardPage.expensifyCard');

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

We can write the test for getCardIssuedMessage

What alternative solutions did you explore? (Optional)

1. Filter inactive cards earlier
   

   App/src/hooks/useGetExpensifyCardFromReportAction.ts

   Line 12 in 0754dfc

   const expensifyCards = allExpensifyCards?.[`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`] ?? {};

    const expensifyCards = useMemo(() =>{
        return filterInactiveCards(allExpensifyCards?.[`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`] ?? {})
    }, [allExpensifyCards, workspaceAccountID]);

This approach can be similarly applied to allUserCards.

2. Use a selector to filter inactive cards
   This could be done using a selector in OnyxListItemProvider, but since this hook uses global and there may be future cases where we need access to inactive cards, it might not be ideal to filter here.
   

   App/src/components/OnyxListItemProvider.tsx

   Lines 18 to 19 in 0754dfc

   	const [CardListProvider, , useCardList] = createOnyxContext(ONYXKEYS.CARD_LIST);
   	const [WorkspaceCardListProvider, , useWorkspaceCardList] = createOnyxContext(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST);

3. We could use useOnyx with the filterInactiveCards selector instead of relying on the global Onyx provider. However, we recently changed this logic to use useWorkspaceCardList. So this approach may no longer be ideal.

[melvin-bot]

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

[melvin-bot]

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

[lorretheboy]

Proposal

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

Expensify Card - Expensify Card in system message is linked after deactivating it and visiting member profile

What is the root cause of that problem?

The getCardIssuedMessage function determines whether to show a link based on the presence of the expensifyCard or companyCard objects

App/src/libs/ReportActionsUtils.ts

Line 2850 in 66b512d

function getCardIssuedMessage({

The link logic only checks if the card object exists ( !!expensifyCard or !!companyCard), but doesn't check the card's state to see if it's deactivated.

App/src/libs/ReportActionsUtils.ts

Lines 2872 to 2873 in 66b512d

	const expensifyCardLink =
	shouldRenderHTML && !!expensifyCard ? `<a href='${environmentURL}/${navigateRoute}'>${translateLocal('cardPage.expensifyCard')}</a>` : translateLocal('cardPage.expensifyCard');

App/src/libs/ReportActionsUtils.ts

Lines 2875 to 2878 in 66b512d

	const companyCardLink =
	shouldRenderHTML && isAssigneeCurrentUser && companyCard
	? `<a href='${environmentURL}/${ROUTES.SETTINGS_WALLET}'>${translateLocal('workspace.companyCards.companyCard')}</a>`
	: translateLocal('workspace.companyCards.companyCard');

Currently, when opening a member profile from the workspace member list, it returns cards including the inactive ones. Thus, it causes the link is highlighted again

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

Create a helper function to check if a card is in an active state and should have clickable links

function isCardActiveForLinks(card?: Card): boolean {
  if (!card) {
     return false;
  }
// Use the same logic as filterInactiveCards - exclude closed, deactivated, and suspended cards
const inactiveStates = [CONST.EXPENSIFY_CARD.STATE.CLOSED, CONST.EXPENSIFY_CARD.STATE.STATE_DEACTIVATED, CONST.EXPENSIFY_CARD.STATE.STATE_SUSPENDED];
return !inactiveStates.includes(card.state);
}

Update to use isCardActiveForLinks to decide whether we should show or not
We have 2 similar issues related to Expensify Card and Company Card. So we have to update both of them

const expensifyCardLink =
shouldRenderHTML && isCardActiveForLinks(expensifyCard) ? `<a href='${environmentURL}/${navigateRoute}'>${translateLocal('cardPage.expensifyCard')}</a>` : translateLocal('cardPage.expensifyCard');

const companyCardLink =
shouldRenderHTML && isAssigneeCurrentUser && isCardActiveForLinks(companyCard)
? `<a href='${environmentURL}/${ROUTES.SETTINGS_WALLET}'>${translateLocal('workspace.companyCards.companyCard')}</a>`
: translateLocal('workspace.companyCards.companyCard');

App/src/libs/ReportActionsUtils.ts

Lines 2872 to 2873 in 66b512d

	const expensifyCardLink =
	shouldRenderHTML && !!expensifyCard ? `<a href='${environmentURL}/${navigateRoute}'>${translateLocal('cardPage.expensifyCard')}</a>` : translateLocal('cardPage.expensifyCard');

App/src/libs/ReportActionsUtils.ts

Lines 2875 to 2878 in 66b512d

	const companyCardLink =
	shouldRenderHTML && isAssigneeCurrentUser && companyCard
	? `<a href='${environmentURL}/${ROUTES.SETTINGS_WALLET}'>${translateLocal('workspace.companyCards.companyCard')}</a>`
	: translateLocal('workspace.companyCards.companyCard');

Note: Looks like the ProposalPolice closed my proposal by mistake. I believe my proposal is differ with the existing one since it cover both cases company card and expensify card

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Add test for isCardActiveForLinks

What alternative solutions did you explore? (Optional)

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

[github-actions]

⚠️ @lorretheboy Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[lorretheboy]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.

[github-actions]

⚠️ @lorretheboy Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.