[$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 [email protected] 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: https://github.com/Expensify/App/pull/50660 Email or phone of affected tester (no customers): [email protected] 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
• [x] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/886bfcb2-2b09-46e8-9813-8f7bd6f35fe7

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: @alitoshmatov

[melvin-bot[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 https://github.com/Expensify/App/blob/bb4e3e45586aa63e027972da29ebc125b56ea05e/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx#L73-L81

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[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[bfitzexpensify]

Proposal ready for review in https://github.com/Expensify/App/issues/51396#issuecomment-2434991029 @alitoshmatov

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot[bot]]

@bfitzexpensify, @alitoshmatov Still overdue 6 days?! Let's take care of this!

[alitoshmatov]

I don't think I can reproduce this issue as it requires physical card being issued. @nyomanjyotisa Were you able to reproduce this issue or assumed the solution here

[nyomanjyotisa]

@alitoshmatov I still can reproduce this issue on staging

-1-New-Expensify.webm

Make sure you have done pre-conditions on the OP steps

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[alitoshmatov]

Okay I think we can go with @nyomanjyotisa 's proposal which cleans errors on mount and unmount

C+ reviewed 🎀 👀 🎀

[melvin-bot[bot]]

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

[melvin-bot[bot]]

📣 @nyomanjyotisa 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot[bot]]

@cristipaval, @bfitzexpensify, @alitoshmatov, @nyomanjyotisa Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[bfitzexpensify]

How is this one going @nyomanjyotisa?

[nyomanjyotisa]

Still waiting for confirmation from @alitoshmatov based on my last comment on the PR https://github.com/Expensify/App/pull/52303#issuecomment-2490147253

[melvin-bot[bot]]

This issue has not been updated in over 15 days. @cristipaval, @bfitzexpensify, @alitoshmatov, @nyomanjyotisa eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[melvin-bot[bot]]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot[bot]]

The solution for this issue has been :rocket: deployed to production :rocket: in version 9.0.72-1 and is now subject to a 7-day regression period :calendar:. Here is the list of pull requests that resolve this issue:

• https://github.com/Expensify/App/pull/52303

If no regressions arise, payment will be issued on 2024-12-16. :confetti_ball:

For reference, here are some details about the assignees on this issue:

• @alitoshmatov requires payment through NewDot Manual Requests
• @nyomanjyotisa requires payment automatic offer (Contributor)

[melvin-bot[bot]]

@alitoshmatov @bfitzexpensify @alitoshmatov The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[bfitzexpensify]

Payment complete for @nyomanjyotisa

@alitoshmatov, please complete the BZ checklist and I'll post the payment summary for the C+ work

[alitoshmatov]

BugZero Checklist:

• [x] [Contributor] Classify the bug:

Bug classification

Source of bug:

• [ ] 1a. Result of the original design (eg. a case wasn't considered)
• [x] 1b. Mistake during implementation
• [ ] 1c. Backend bug
• [ ] 1z. Other:

Where bug was reported:

• [x] 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• [ ] 2b. Reported on staging (eg. found during regression or PR testing)
• [ ] 2d. Reported on a PR
• [ ] 2z. Other:

Who reported the bug:

• [ ] 3a. Expensify user
• [ ] 3b. Expensify employee
• [ ] 3c. Contributor
• [x] 3d. QA
• [ ] 3z. Other:

• [ ] [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: https://github.com/Expensify/App/pull/38998/files#r1887574014

• [x] [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: No discussion

• [x] [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

I don't think regression test is needed

[alitoshmatov]

@bfitzexpensify Done

[bfitzexpensify]

Thanks!

Payment summary:

@alitoshmatov owed $250 for C+ work via NewDot manual request

[JmillsExpensify]

$250 approved for @alitoshmatov