[$750] [HOLD for payment 2024-10-11] [Workspace Feeds] Create a new form for adding missing address and personal information data to ship a card

mountiny commented 2 months ago

Problem

When admin issues a physical card to an employee who does not have all the necessary personal details set up that are required to send the card to them, we create this card in NOT_ISSUED state and we ask the member to add the missing info. In oldDot, this is done by inbox task. We need the personal address, phone number and legal first and last name to be able to ship the card.

In Newdot, however, there is no specific form for this information altogether, leading to a schizophrenic experience that is not clear to the customer. They need to add the address and legal name in 2 different forms in settings at the moment and the only way to add a phone number is to add a secondary login which is another form.

Solution

When a member needs to add the missing details, this report action shows to them.

Let's create a new form that will open in RHP and will collect all the data we need to ship the card. This would then call the existing Card_SetUserDetails API command, which requires these fields:

'legalFirstName' => 'First name',
            'legalLastName' => 'Last name',
            'phoneNumber' => 'Phone number',
            'addressCountry' => 'Country',
            'addressCity' => 'City',
            'addressStreet' => 'Street',
            'addressZip' => 'Zip code',

The API params are authToken and data, which is a stringified object with the aforementioned properties

Additionally, this form flow should be available to start from member Wallet/ card list page where they can see the not issued card too.

There is also a change required in the backend to make sure the Card_SetUserDetails calls the ShipExpensifyCard Auth command if there are already some cards in the not_issued state for cards.

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021845887914487130841
Upwork Job ID: 1845887914487130841
Last Price Increase: 2024-10-14

Issue Owner

Current Issue Owner: @alexpensify

melvin-bot[bot] commented 2 months ago

Current assignee @dubielzyk-expensify is eligible for the Design assigner, not assigning anyone new.

melvin-bot[bot] commented 2 months ago

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

dubielzyk-expensify commented 2 months ago

Here's an idea of how we could solve it. I used the page header with the progress bar stepper at the top and made each information it's own screen. That way we can remove screens where we have the information. Or if we want, we can pre-fill it.

Also, I'm assuming the phone number needs validation? Let me know if I've gotten any of these screens or information wrong.

CleanShot 2024-09-04 at 16 00 26@2x

If we wanna use our regular stepper it would look like: CleanShot 2024-09-04 at 16 03 58@2x

cc @Expensify/design

shawnborton commented 1 month ago

Nice! The second set using the regular stepper feels more natural to me given that we use this a lot in other places of the app. I also like the idea of pre-filling the fields where we can.

MariaHCD commented 1 month ago

The second set also looks great to me 👍🏼

Just a note about ShipExpensifyCard, it currently requires a cardID as a param. I think we can have the FE pass the cardID to Card_SetUserDetails - perhaps we can look for the first NOT_ISSUED card in the user's card list.

dannymcclain commented 1 month ago

I love the look of the first set but agree the second set feels more at home in the product right now.

Nitpick incoming: What's your gap between the magic code fields and the Didn't receive a magic code text?? Feels a little tight to me. I've been using 20px in the mocks for various other flows we've been validating recently. Feel free to ignore!

mountiny commented 1 month ago

@dubielzyk-expensify Thanks! That looks great.

I am not sure if we need the validation, we do not need it for the card creation or the 3ds purposes. So I think we can leave it out. We are not going to create secondary logins using the phone number for now so we do not need validation.

mountiny commented 1 month ago

In newDot we are also asking for date of birth, but I dont think its actually needed

mountiny commented 1 month ago

@madmax330 noted that this is not required for marqeta so we are most likely fine to leave this out from the NewDot form https://expensify.slack.com/archives/C036QM0SLJK/p1725463473566129?thread_ts=1725283960.380699&cid=C036QM0SLJK

dubielzyk-expensify commented 1 month ago

Thanks for the feedback everyone. Alright. That makes it easier. Here's the updated mocks: CleanShot 2024-09-05 at 12 27 09@2x

shawnborton commented 1 month ago

I dig it!

mountiny commented 1 month ago

Discussing if @allgandalf or @DylanDylann can start working on this now

mountiny commented 1 month ago

@shubham1206agra is working on this implementation for $250

mountiny commented 1 month ago

I have just been working on the backend code and the date of birth is ALSO required for marqeta. internal link

@dubielzyk-expensify @shubham1206agra we need to add that into the form

dubielzyk-expensify commented 1 month ago

Added back in as a second step: CleanShot 2024-09-10 at 10 32 26@2x

We could append it to the first step, but I don't love how it looks: CleanShot 2024-09-10 at 10 32 49@2x

cc @Expensify/design

shawnborton commented 1 month ago

Agree, I think I like it more as a separate step like you have in the first series there.

dubielzyk-expensify commented 1 month ago

Let's go with that then 👍

trjExpensify commented 1 month ago

👋 Discussed this in the wave-collect thread here, and made a few changes to those mocks. CC: @kevinksullivan @mountiny

Summary of changes:

Changed the button in the system message from Add person details to Add shipping details.
updated the system message text copy to reflect the prompt to add shipping details: "issued @cardholder an Expensify Card! The card will be shipped once shipping details are added."
update the system message text to use supporting text font, as it’s a system message and the mocks were in text font.
updated the page header titles to Add shipping details to match the button name
Included a mock for the system message copy when the shipping details are successfully added for completeness, and updated that copy to reflect shipping details: "added shipping details. Expensify Card will arrive in 2-3 business days."
Changed the title copy of the phone number screen to Enter phone number so it matches all of the other screens which say “Enter xx”. I didn't see a good reason why that one would be different to the other steps and say "Add phone number".

@shubham1206agra can you get that updated in the PR, please? Once those are in, we can obtain confirmation on the proposed Spanish translations.

shubham1206agra commented 1 month ago

@trjExpensify I made the changes.

mountiny commented 1 month ago

Now we have the base of the form in the App, and users can use it to ship the card; thank you, @shubham1206agra! As discussed, though, let's improve the form further by:

giving each step a separate URL so the navigation patterns work across all the platforms
using onyx form drafts so the state of the form is not lost when user refreshes the modal
Add the confirmation page to the end of the flow before we submit

mountiny commented 1 month ago

This flow is not trivial so I think $750 total price for @shubham1206agra implementing these flows is fair reward once the changes from comment above are delivered.

mountiny commented 1 month ago

@shubham1206agra, how is it looking on the follow-ups? can you please prioritize them over taking on new work? Thanks

shubham1206agra commented 1 month ago

I will start working on this today.

giving each step a separate URL so the navigation patterns work across all the platforms

I may get away with using same URL for the entire flow.

mountiny commented 1 month ago

I may get away with using same URL for the entire flow.

I think we should use a different url, otherwise, the browser history wont work across all platforms and reliably/ predictably/ without adding some hacks.

the bank account flow of submit expense forms have all its own url for each step

alexpensify commented 1 month ago

@shubham1206agra any update here? Thanks!

shubham1206agra commented 1 month ago

I will finish the checklist today.

alexpensify commented 1 month ago

Alright, we are waiting for this one to go into production

allgandalf commented 4 weeks ago

Tracking :

https://github.com/Expensify/App/issues/50233

Don't know if this is related or not @mountiny

melvin-bot[bot] commented 4 weeks ago

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

melvin-bot[bot] commented 4 weeks ago

The solution for this issue has been :rocket: deployed to production :rocket: in version 9.0.44-12 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/49452

If no regressions arise, payment will be issued on 2024-10-11. :confetti_ball:

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

@shubham1206agra requires payment (Needs manual offer from BZ)
@allgandalf requires payment (Needs manual offer from BZ)

melvin-bot[bot] commented 4 weeks ago

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[ ] [@shubham1206agra / @allgandalf] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
[ ] [@alexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

mountiny commented 3 weeks ago

Seems like it is, assigned yall to help resolve it

melvin-bot[bot] commented 3 weeks ago

Payment Summary

Upwork Job

ROLE: @shubham1206agra paid $750 via Upwork
ROLE: @allgandalf paid $750 via Upwork

BugZero Checklist (@alexpensify)

[x] I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
[x] I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants//hired)
[x] I have paid out the Upwork contracts or cancelled the ones that are incorrect
[x] I have verified the payment summary above is correct

mountiny commented 2 weeks ago

I believe this is now ready for payment, I believe from the previous comment, the price was $750

alexpensify commented 2 weeks ago

Thanks, @mountiny for the update. I worked limited hours last week and am OOO today. I'm passing by to complete the payment process now.

melvin-bot[bot] commented 2 weeks ago

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

melvin-bot[bot] commented 2 weeks ago

Current assignees @shubham1206agra and @allgandalf are eligible for the External assigner, not assigning anyone new.

melvin-bot[bot] commented 2 weeks ago

Upwork job price has been updated to $750

alexpensify commented 2 weeks ago

@shubham1206agra and @allgandalf, please apply through the Upwork Job link, and then I can complete the payment process. Thanks!

https://github.com/Expensify/App/issues/48487#issuecomment-2407896324

shubham1206agra commented 2 weeks ago

@alexpensify Can you send us offers, please?

alexpensify commented 2 weeks ago

Offers have been sent via Upwork, please accept and I can complete the payment process. Thanks!

shubham1206agra commented 2 weeks ago

@alexpensify Offer accepted

alexpensify commented 2 weeks ago

Closing - everyone has been paid via Upwork.

https://github.com/Expensify/App/issues/48487#issuecomment-2407896324

Expensify / App