[Due for payment 2025-05-08] [$250][HIGH] Expensify Card - Card shows error in Expensify Card & profile after entering wrong magic code

[IuliiaHerets]

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.0.92-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): applausetester+100106kh@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.0 / Chrome
App Component: Workspace Settings

Action Performed:

Precondition:

• User has assigned themselves a virtual card.

1. Go to staging.new.expensify.com
2. Go to Wallet.
3. Click on the card.
4. Click Report virtual card fraud.
5. Click Deactivate card.
6. Enter incorrect magic code.
7. Close the RHP.
8. Note that the error message under card is dismissed after closing RHP.
9. Go to Workspace settings > Expensify Card.
10. Go back to Workspace settings > Members.
11. Click on your profile.

Expected Result:

There should be no error with the card in Expensify Card and member profile page, because the error is already auto-dismissed in Step 8.

Actual Result:

There is an error with the card in Expensify Card and member profile page after entering incorrect magic code during card deactivation.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6728349_1738228040088.20250130_165750.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021886671298394897935
• Upwork Job ID: 1886671298394897935
• Last Price Increase: 2025-03-04

Issue Owner

Current Issue Owner: @youssef-lr

[melvin-bot]

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

[etCoderDysto]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-30 10:26:23 UTC.

Proposal

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

Expensify Card - Card shows error in Expensify Card & profile after entering wrong magic code

What is the root cause of that problem?

When closing the RHP we clear the error message from virtual card stored in ONYXKEYS.CARD_LIST by calling clearCardListErrors

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

Line 120 in acd7a79

clearCardListErrors(virtualCard.cardID);

But we are not clearing the error from the workspace virtual card stored in ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${virtualCard.fundID}_${CONST.EXPENSIFY_CARD.BANK. And the error message from this onyx entry will be displayed on expensify card, and member profile page.

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx

Line 28 in 7af98d7

const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`);

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

We should clear the error from workspace card list by calling PaymentMethods.clearDeletePaymentMethodError here

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

Line 120 in acd7a79

clearCardListErrors(virtualCard.cardID);

  PaymentMethods.clearDeletePaymentMethodError(
                            `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${virtualCard.fundID ?? CONST.DEFAULT_NUMBER_ID}_${CONST.EXPENSIFY_CARD.BANK}`,
                            virtualCard.cardID,
                        );

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

What alternative solutions did you explore? (Optional)

[hoangzinh]

Proposal

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

Card shows error in Expensify Card & profile after entering wrong magic code

What is the root cause of that problem?

• In the reportVirtualExpensifyCardFraud action, when the request is failed, we set the error to both ONYXKEYS.CARD_LIST and ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST

But when the modal is closed, we only clear cardList error

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

Lines 116 to 121 in f0c49f7

	clearError={() => {
	if (!virtualCard?.cardID) {
	return;
	}
	clearCardListErrors(virtualCard.cardID);
	}}

• In the Expensify card page (and member profile page), we're displaying workspace card list

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx

Line 28 in f0c49f7

const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`);

=> Therefore, it still shows an error in Expensify card page

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

In here, we need to clear errors in ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST as well

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

N/A It's a UI bug

What alternative solutions did you explore? (Optional)

I think that when the request is failed, we should not set errors for ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST because in ReportVirtualCardFraudPage, we only get data of a card in ONYXKEYS.CARD_LIST

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

Line 36 in 1b039f6

const [cardList] = useOnyx(ONYXKEYS.CARD_LIST);

Therefore, we can remove set errors here (line 105)

App/src/libs/actions/Card.ts

Lines 100 to 107 in f0c49f7

	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${card?.fundID}_${CONST.EXPENSIFY_CARD.BANK}`,
	value: {
	[cardID]: {
	...card,
	errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
	},
	},

to avoid override existing errors in ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST and also causing this bug

[melvin-bot]

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

[melvin-bot]

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

[alexpensify]

@ahmedGaber93 - can you please review if one of these proposals will fix the issue? Thanks!