[READY FOR PAYMENT] [$500] Expensify Card - Magic code error does not appear above Verify button when revealing details

[lanitochka17]

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.2.35-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: #72018
Email or phone of affected tester (no customers): #72018
Issue reported by: Applause - Internal Team

Action Performed:

Precondition:

• User has assigned themselves a virtual card

1. Go to staging.new.expensify.com
2. Go to Account > Wallet
3. Click on the virtual card
4. Click Reveal details
5. Enter wrong magic code
6. Click RHP back button

Expected Result:

In Step 5, magic code error will appear above Verify button

Actual Result:

In Step 5, magic code error does not appear above Verify button
In Step 6, magic code error appears on the previous page, under Reveal details button

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6980750_1761064131433.Screen_Recording_2025-10-22_at_00.25.40.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021981780679028973300
• Upwork Job ID: 1981780679028973300
• Last Price Increase: 2025-11-03

Issue Owner

Current Issue Owner: @ryntgh

[melvin-bot]

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

[ryntgh]

Proposal

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

Expensify Card - Magic code error does not appear above Verify button when revealing details

What is the root cause of that problem?

Currently we use validateCodeActionErrorField = "actionVerified", but when an incorrect magic code is entered during card reveal, the actual error field set by the backend is revealExpensifyCardDetails

However, if we change validateCodeActionErrorField to revealExpensifyCardDetails, the clearError function only clears the local state (setValidateError({})) and does not clear the Onyx error fields. This causes rate limiting errors like Failed to send a new magic code. Please wait a bit and try again. to remain visible and not be dismissed when clicking the 'X' button, because the error is stored in the VALIDATE_ACTION_CODE Onyx key

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

Lines 60 to 73 in 9284d17

	return (
	<ValidateCodeActionContent
	title={translate('cardPage.validateCardTitle')}
	descriptionPrimary={translate('cardPage.enterMagicCode', {contactMethod: primaryLogin})}
	sendValidateCode={() => requestValidateCodeAction()}
	validateCodeActionErrorField="actionVerified"
	handleSubmitForm={handleRevealCardDetails}
	validateError={validateError}
	clearError={() => setValidateError({})}
	onClose={() => {
	resetValidateActionCodeSent();
	Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAIN_CARD.getRoute(cardID));
	}}
	/>

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

We need to handle both local and Onyx error clearing with clearValidateCodeActionError to ensure that rate limiting errors like Failed to send a new magic code. Please wait a bit and try again. can be dismissed, and that incorrect magic code errors like Looks like the magic code you entered was incorrect. Please try again. are displayed correctly above the Verify button

    const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE, {canBeMissing: true});

    const clearError = () => {
        if (isEmptyObject(validateError) && isEmptyObject(validateCodeAction?.errorFields)) {
            return;
        }
        setValidateError({});
        clearValidateCodeActionError('actionVerified');
    };

        <ValidateCodeActionContent
            title={translate('cardPage.validateCardTitle')}
            descriptionPrimary={translate('cardPage.enterMagicCode', {contactMethod: primaryLogin})}
            sendValidateCode={() => requestValidateCodeAction()}
            validateCodeActionErrorField="revealExpensifyCardDetails"
            handleSubmitForm={handleRevealCardDetails}
            validateError={validateError}
            clearError={clearError}
            onClose={() => {
                resetValidateActionCodeSent();
                Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAIN_CARD.getRoute(cardID));
            }}
        />

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

Lines 61 to 73 in 9284d17

	<ValidateCodeActionContent
	title={translate('cardPage.validateCardTitle')}
	descriptionPrimary={translate('cardPage.enterMagicCode', {contactMethod: primaryLogin})}
	sendValidateCode={() => requestValidateCodeAction()}
	validateCodeActionErrorField="actionVerified"
	handleSubmitForm={handleRevealCardDetails}
	validateError={validateError}
	clearError={() => setValidateError({})}
	onClose={() => {
	resetValidateActionCodeSent();
	Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAIN_CARD.getRoute(cardID));
	}}
	/>

What alternative solutions did you explore? (Optional)

We can make the onClose handler on BaseValidateCodeForm to also clear the actionVerified error field when dismissing errors

                    clearError();
                    if (!isEmptyObject(validateCodeAction?.errorFields) && validateCodeActionErrorField) {
                        clearValidateCodeActionError(validateCodeActionErrorField);
                    }
                    if (!isEmptyObject(validateCodeAction?.errorFields?.actionVerified)) {
                        clearValidateCodeActionError('actionVerified');
                    }

App/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

Lines 320 to 323 in 9284d17

	clearError();
	if (!isEmptyObject(validateCodeAction?.errorFields) && validateCodeActionErrorField) {
	clearValidateCodeActionError(validateCodeActionErrorField);
	}

and set validateCodeActionErrorField to revealExpensifyCardDetails on ExpensifyCardVerifyAccountPage

[melvin-bot]

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

[melvin-bot]

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

[bernhardoj]

Since actionVerified error is being used inside BaseValidateCodeForm as a fallback, it makes sense to clear the error when dismissing it inside BaseValidateCodeForm too, so it's fixed globally.

App/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

Line 129 in bceff96

const defaultValidateCodeError = getLatestErrorField(validateCodeAction, 'actionVerified');

So, @ryntgh's alternative solution looks good

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @danieldoglas, see https://stackoverflow.com/c/expensify/questions/7972 for more details.