[HOLD for payment 2024-12-16] [$250] Web - Expensify card - Error when wrong 4 digit is used persists for a few sec after a refresh

[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.53-0
Reproducible in staging?: Y
Reproducible in production?: Y
Issue was found when executing this PR: #50660
Email or phone of affected tester (no customers): nathanmulugetatesting+1943@gmail.com
Issue reported by: Applause Internal Team

Action Performed:

Pre-conditions:

• Workspace is connected with a bank account
• Workspace has a member invited
• Workspace has enabled Expensify card
• Admin has issued a physical card for employee
• Employee is done adding shipping details to receive the card

1. Sign in with the invited member's account
2. Go to wallet > Open issued physical card RHP
3. Use random 4 digit number to activate the card
4. Refresh the page

Expected Result:

The error message disappears instantly after the refresh

Actual Result:

The error message persists for a few seconds before disappearing

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6643823_1729723834504.bandicam_2024-10-24_01-41-51-451.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021849456473737219382
• Upwork Job ID: 1849456473737219382
• Last Price Increase: 2024-11-07
• Automatic offers:
• nyomanjyotisa | Contributor | 104837703

Issue Owner

Current Issue Owner: @bfitzexpensify

[melvin-bot]

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

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 2

[IuliiaHerets]

@bfitzexpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[nyomanjyotisa]

Proposal

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

Web - Expensify card - Error when wrong 4 digit is used persists for a few sec after a refresh

What is the root cause of that problem?

On reload page the clearCardListErrors function not executed on useEffect cleanup

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

Lines 73 to 81 in bb4e3e4

	useEffect(
	() => () => {
	if (!inactiveCard?.cardID) {
	return;
	}
	CardSettings.clearCardListErrors(inactiveCard?.cardID);
	},
	[inactiveCard?.cardID],
	);

And the error cleared when OpenPaymentsPage API call done, which set the cardList onyx data with the card list data without error

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

Clear the card list error on mount using useEffect

    useEffect(() => {
        if (!inactiveCard?.cardID) {
            return;
        }
        CardSettings.clearCardListErrors(inactiveCard?.cardID);
    }, [inactiveCard?.cardID]);

Or clear both on mount and on unmount

    useEffect(() => {
        if (!inactiveCard?.cardID) {
            return;
        }
        CardSettings.clearCardListErrors(inactiveCard?.cardID);
    
        return () => {
            if (!inactiveCard?.cardID) {
                return;
            }
            CardSettings.clearCardListErrors(inactiveCard?.cardID);
        };
    }, [inactiveCard?.cardID]);

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

@bfitzexpensify, @alitoshmatov Huh... This is 4 days overdue. Who can take care of this?