[$250] Fix replacing physical Expensify Card flow

[joekaufmanexpensify]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: @joekaufmanexpensify
Slack conversation (hyperlinked to channel name): #convert

Action Performed:

Prereq: Have the Expensify Card enabled with a non-test bank account (so you can issue physical Expensify Cards)

1. From account A issue account B a physical card.
2. As account B, order the card.
3. Go the wallet.
4. Click on the card (now pending activation).
5. Go through the flow to mark the card as stolen, which replaces it.

Expected Result:

Three different bugs here:

1. When account B is initially issued the card, there should be a report action in the workspace chat advising them the card was issued, and another one when it was shipped.
2. When account B gets to the magic code step of replacing a card, we should automatically trigger the magic code.
3. When account B successfully replaces the card, we should show some kind of confirmation and land them on the wallet after, immediately showing their new card.

Actual Result:

1. The report action when you're issued physical card and after the card ships is missing in the workspace chat.
2. We didn't automatically trigger the magic code on the last step of the replace card flow. I tested twice and both times I didn't initially receive a magic code. When I requested a new one after 30 seconds, it appeared right away.
3. After replacing the card, I saw an error in the RHP and then landed on the wallet with no card shown and an RBR in the wallet page. Leaving the wallet and coming back then showed the new card which was successfully replaced.

The replace card issues happened both when replacing a card pending activation and with an already active card.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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

Screenshots/Videos

2025-04-30_18-00-57.mp4

2025-04-30_17-59-04.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021917925085751646864
• Upwork Job ID: 1917925085751646864
• Last Price Increase: 2025-05-01
• Automatic offers:
• dominictb | Reviewer | 107219197

Issue Owner

Current Issue Owner: @roryabraham

[melvin-bot]

Current assignee @joekaufmanexpensify is eligible for the Bug assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

@dominictb Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[joekaufmanexpensify]

Pending proposals

[DylanDylann]

Proposal

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

We have 3 problems:

• BUG 1: The report action when you're issued physical card and after the card ships is missing in the workspace chat.
• BUG 2: We didn't automatically trigger the magic code on the last step of the replace card flow. I tested twice and both times I didn't initially receive a magic code. When I requested a new one after 30 seconds, it appeared right away.
• BUG 3: After replacing the card, I saw an error in the RHP and then landed on the wallet with no card shown and an RBR in the wallet page. Leaving the wallet and coming back then showed the new card which was successfully replaced.

What is the root cause of that problem?

BUG 1: The BE doesn't return both the issued card message and the shipped card message

BUG 2:

• We don't reset validateCodeSent when calling requestReplacementExpensifyCard function
• If the users go to the validated code modal for the first time, a new magic code will be sent and the validateCodeSent will be set to true. But if users haven't entered that magic code and go back. And then they come to the validated code modal again, because validateCodeSent still be true, there is no new magic code that will be sent.

BUG 3: I can't reproduce this bug, I will ask the author to investigate this bug later

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

In the scope of this issue, I will post a solution for bug 2

In ReportCardLostPage, we need to add a useEffect to reset validateCodeSent. We also applied this way on the issue new card flow

    useEffect(() => {
        resetValidateActionCodeSent();
    }, []);

In requestReplacementExpensifyCard function we also need to add optimistic data to reset validateCodeSent

        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: ONYXKEYS.VALIDATE_ACTION_CODE,
            value: {
                validateCodeSent: null,
            },
        }

Bonus point, we can add a loading indicator while the API is processing

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

None

What alternative solutions did you explore? (Optional)

None

[mountiny]

@dominictb are you able to review the proposal? Looks good to me

[dominictb]

I can't reproduce the third issue either, can you @joekaufmanexpensify?

We need both FE & BE fixes.

@DylanDylann proposal LGTM

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[joekaufmanexpensify]

I can't reproduce the third issue either, can you @joekaufmanexpensify?

I am happy to try again to see if I can reproduce it. Is there any data that would be helpful in the event I can reimburse it? I can share the result of the API call when I try and replace the card, but LMK if anything beyond that would be helpful. I want to ideally do it once as it takes a bit of time to reproduce.

[dominictb]

@joekaufmanexpensify It would be great if I got added to the #convert room to grab more details on this bug. That would help reproduce this issue easier.

[melvin-bot]

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

Offer link
Upwork job

[DylanDylann]

I am happy to try again to see if I can reproduce it. Is there any data that would be helpful in the event I can reimburse it? I can share the result of the API call when I try and replace the card, but LMK if anything beyond that would be helpful. I want to ideally do it once as it takes a bit of time to reproduce.

@joekaufmanexpensify First, could you please provide a video on how this bug happened? And if possible, please DM to me the response of RequestReplacementExpensifyCard API

[joekaufmanexpensify]

Shared

[DylanDylann]

@joekaufmanexpensify Many thanks for your help.

@mountiny The third problem also be a BE bug

The third problem in this issue may be caused by RequestReplacementExpensifyCard is called twice

The first API replaces the card successful
The second API returns an error: "Invalid magic code"

Note that: the two above API have the same payload. It is the reason why the second API failed because the magic code was used twice

---

Let's question why RequestReplacementExpensifyCard is called twice. It dues to the first API return the wrong format of onyxData

the onyxData should be an array instead of an object.

Because If onyxData is an object, this line will cause the error because forEach isn't a method of object

App/src/libs/Middleware/HandleUnusedOptimisticID.ts

Line 21 in 3d6c64b

responseOnyxData.forEach((onyxData) => {

Then this catch block will be triggered and cause the second API to be called

App/src/libs/Network/SequentialQueue.ts

Line 162 in 3d6c64b

.catch((error: RequestError) => {

[DylanDylann]

Summary

1. We can handle the problem 1 and the problem 3 on the BE side
2. Fix validated code bug on replace card flow #61666 will fix the problem 2