[$250] Wallet - Verify button does not show loading indicator after entering 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.33-1
Reproducible in staging?: Y
Reproducible in production?: Y
Issue was found when executing this PR: #48953
Email or phone of affected tester (no customers): applausetester+kh010901@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

Precondition:

• Account has a virtual card.

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

Expected Result:

Verity button will show loading indicator after entering magic code (log in and adding contact method behavior).

Actual Result:

Verify button does not show loading indicator after entering magic code.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6600616_1726117661978.20240912_130413.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021834276399647422536
• Upwork Job ID: 1834276399647422536
• Last Price Increase: 2024-09-12

Issue Owner

Current Issue Owner: @getusha

[melvin-bot]

Triggered auto assignment to @miljakljajic (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]

@miljakljajic 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

[daledah]

Edited by proposal-police: This proposal was edited at 2024-09-12 13:25:39 UTC.

Proposal

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

Verify button does not show loading indicator after entering magic code.

What is the root cause of that problem?

We show the loading indicator when isLoading = true in onyx key account and we not update isloading to true when we call revealVirtualCardDetails API

App/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.tsx

Line 254 in 65a21fc

isLoading={account?.isLoading}

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

We should add optimistic data when we call revealVirtualCardDetails API here to update isLoading to true

     const optimisticData: OnyxUpdate[] = [
            {
                onyxMethod: Onyx.METHOD.MERGE,
                key: ONYXKEYS.ACCOUNT,
                value: {isLoading: true},
            },
        ];

What alternative solutions did you explore? (Optional)

NA

[melvin-bot]

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

[melvin-bot]

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

[cretadn22]

Proposal

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

Verify button does not show loading indicator after entering magic code

What is the root cause of that problem?

We already have a flag account.isLoading to indicate the loading status, and we use this flag frequently throughout our app

App/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.tsx

Line 254 in 65a21fc

isLoading={account?.isLoading}

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

However, when calling the API, we don't set account.isLoading to true in the optimisticData.

App/src/libs/actions/Card.ts

Line 197 in 65a21fc

function revealVirtualCardDetails(cardID: number, validateCode: string): Promise<ExpensifyCardDetails> {

We also need to reset account.isLoading in both the success and failure data, which was missed in the previous proposal

    const optimisticData: OnyxUpdate[] = [
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: ONYXKEYS.ACCOUNT,
            value: {
                isLoading: true,
            },
        },
    ];

    const successData: OnyxUpdate[] = [
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: ONYXKEYS.ACCOUNT,
            value: {
                isLoading: false,
            },
        },
    ];

    const failureData: OnyxUpdate[] = [
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: ONYXKEYS.ACCOUNT,
            value: {
                isLoading: false,
            },
        },
    ];

What alternative solutions did you explore? (Optional)

[daledah]

@cretadn22 I think the main issue here is that we are missing the update of isLoading in the account and need to modify the Onyx data. The update of successData and failureData will be handled by default in the PR phase when we change optimisticData. Therefore, I think the improvement you suggested through my proposal is not really necessary.
cc @getusha

[getusha]

Reviewing

[getusha]

@daledah's proposal looks good to me and works well. they were the first to provide a working solution, other cases are something we could handle in the PR.

🎀 👀 🎀 C+ Reviewed.

[melvin-bot]

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

[melvin-bot]

📣 @daledah You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

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

[miljakljajic]

I'm going out on parental leave, so I've assigned another BZ team member to take over when the issue is ready for payment. thank you @sakluger

[sakluger]

I sent an offer to @daledah on Upwork https://www.upwork.com/nx/wm/offer/104091230.

The PR is merged, but not yet deployed.