[HOLD for payment 2024-09-18] Update the Magic code form to be easier to reuse in other flows and add it to Reveal card details flow

[mountiny]

Problem

We are adding the magic code verification to a couple of flows that are accessible in newDot as well. Internal tracking issue is here. Namely, they are:

• When adding a new contact method - we already implemented this in this PR feat: validate new contact method action #48320 @getusha and @hungvu193 for payment
• Adding a copilot - cc @rushatgabhane @dangrous @NikkiWines this is a new feature for NewDot @rushatgabhane are you able to work on implementing the magic code requirement to this flow?
• Create new virtual card - @MariaHCD @koko57 - We will need to incorporate this into the Create New virtual card flow, probably as a last step - I think we need to discuss this more in Slack still
• Require magic code when revealing card details - @marcaaron is working on the backend parts and we need to add this to Newdot as well

Solution

Create a reusable component for the user to input the magic code and submit the form, calling an API command, including the validateCode param.

The page should look like this

We can build on top of this PR #48320 to make it more reusable

Issue Owner

Current Issue Owner: @OfstadC

[melvin-bot]

Triggered auto assignment to @OfstadC (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @dubielzyk-expensify (NewFeature)

[mountiny]

@hungvu193 is working on adding this to the Reveal card details page

[hungvu193]

Created a draft PR here #48628.
I will need to setup a physical card to test it.

[marcaaron]

This is working great. I'm not sure about this copy though?

Should we make this "Verify it's you" and "Please enter the code we sent to your email".

[marcaaron]

Oh I see we have different copy in the description of this issue. So, which are we using? Maybe @dubielzyk-expensify knows.

[rushatgabhane]

are you able to work on implementing the magic code requirement to this flow?

yep it'll be merged tomorrow

[melvin-bot]

Triggered auto assignment to @ryanschaffer (Waiting for copy), see https://stackoverflow.com/c/expensify/questions/7025/ for more details.

[marcaaron]

James said:

Let's make sure it's you
Please enter the magic code sent to james@expensify.com.

[dubielzyk-expensify]

LGTM

[mountiny]

PR merged and in staging, currently being deployed to production

[melvin-bot]

@OfstadC, @hungvu193, @marcaaron, @mountiny, @dubielzyk-expensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

[mountiny]

I think this project is basically done for now as we are not actively adding this to the virtual cards for now.

So I think we can pay out; I am not sure how many PRs have been linked to this issue; @hungvu193 @getusha, was it 2 PRs, so $500? Can you please summarize it here? thanks!

[hungvu193]

I reviewed #48320 and implemented #48628 (Marc reviewed it).
@getusha implemented #48320

[mountiny]

$500 to @hungvu193 and $250 to @getusha then, do you agree?

[mountiny]

@hungvu193 @getusha could you please suggest regression tests for the two new updated flows? I think we need to make changes in the testrail

[hungvu193]

Regression test:

Add new contact method flow:

1. Go to Settings
2. Go to Profile
3. Go to Contact methods
4. Click “Add new contact method”
5. Enter a new email or phone number
6. Verify that ValidateCodeModal is open.
7. Once the magic code is inserted, click Submit
8. Verify that the contact is added and you're navigated to contact list page

Reveal detail card flow:
Prerequisite: You must have a virtual card setup

1. Go to Profile => Wallet => Click the Reveal details button on your virtual card.
2. Enter the magic code input.
3. Verify that you can see your card details if you entered correct magic code.

[hungvu193]

$500 to @hungvu193 and $250 to @getusha then, do you agree?

I think both tasks are urgent, so Could it be $500 for @getusha and $750 for me 😄

[mountiny]

@hungvu193 I will propose $625 to @hungvu193 and $350 to @getusha. This was an urgent task we needed help with, and you stepped up, which we appreciate, but at the same time, I do think we need to double the price on the task. I have already granted you the follow up tasks so you will get bounties from those.

[hungvu193]

Thank you. Totally agreed! 😄

[OfstadC]

Payment Summary

• @hungvu193 due $625 via Manual New Expensify Request
• @getusha due $350 via Manual New Expensify Request

[garrettmknight]

$625 approved for @hungvu193

[garrettmknight]

$325 approved for @getusha