[HOLD for payment 2024-07-23] [CRITICAL] [P2P] Refactor the wallet enablement flow to be step by step and conform with our new design system

[anmurali]

Problem:
The existing wallet enablement flow UI does not comply with our new brand design system, particularly our philosophy to take a stey by step approach to getting user input. It also doesn't give the user a sense of progression or context for remaining steps, which could cause drop off.

Solution:
Let's refactor the Ui to ask for the info step by step instead of all at once. Let's add a progress bar at the top for the various sections:

Starting point, no change

Current Add bank account step, which loads a blank modal and automatically jumps to Plaid flow. Although the only choice here at the moment, it is cleaner to just show this step and allow the user to explicitly click on Connect via Plaid

Current Additional Details step, which is shown as one form, with all these details. We will refactor it to ask for the details step by step here

Current Verify Identity step, which presents some legalese links and then moves into the Onfido SDK flow. But the Onfido SDK flow begins with disclosures that the user needs to accept, so we don't need to show this legalese twice. We will therefore change the copy at the start of this step as well.

The Onfido SDK flow cannot be further customized to match our branding but, can we try to add the progress bar we're using here at the top of that entire flow, if possible?

Current Terms and fees step, which is shown as one long blob, with all these details. We will refactor it to show it step by step here

• The first of these screens should be scrollable and the Next button should be inactive till they get to the end and then turn active. If they try to click on it when inactive, let's present an error message to scroll to the end and review all of it.

Finished step, no change

Issue Owner

Current Issue Owner: @muttmuure

[shawnborton]

For the start of the Onfido flow, I guess we should just mirror what we currently have in product (note this whole flow got a face lift recently!) where we basically just have one screen as a primer, then we kick off the Onfido flow?

[shawnborton]

Also just cc'ing @mountiny (sorry for all the tags these days!) for visibility, in case we want to have the same group who worked on the VBA flows take this one as well.

[mountiny]

Thanks for the ping! We could ask Callstack due to their experience with this. I am curious though, I am not that familiar with the backend for this flow so curious if there would any changes be required there. @MariaHCD do you think you could chime in? I assume from what I could read the order of the steps is more or less the same.

We are not moving any checkboxes or any inputs to different steps right? (asking because we had that issue in the bank refactor and had to make changes to the backend slightly)

[anmurali]

So far as I can tell, we're not changing any inputs. The only thing worth double clicking on is Current Verify Identity step
We currently show

I want to change that to

[mountiny]

Nice, that sounds like basically just UI change!

@koko57 I heard you are keen on helping with this :) if so would you like to comment so I can assign you?

[koko57]

yes I was typing the message right now! 😃 I'm ready to help

[MariaHCD]

the backend for this flow so curious if there would any changes be required there. @MariaHCD do you think you could chime in? I assume from what I could read the order of the steps is more or less the same.

The order of the steps looks the same to me too:

1. AdditionalDetails step - which calls the UpdatePersonalDetailsForWallet API command
2. Onfido step - which calls the OpenOnfidoFlow API command to initialize the flow, followed by VerifyIdentity
3. Terms step - which calls AcceptWalletTerms

The KYC flow is outlined in this SO (in case it is helpful)

[MariaHCD]

One thing I'd like to add is regarding Knowledge Based Authentication (KBA) questions. @anmurali I'm assuming we still want to have these questions displayed to the user?

[mountiny]

🚀 perfect! @shawnborton will we need any more details? Maybe share a Figma file with Agata?

@MariaHCD Thank you, very helpful!

Noting here as well this is to help with testing https://stackoverflowteams.com/c/expensify/questions/10607/11542#11542

[shawnborton]

This is the Figma file we have been using.

[mountiny]

Thanks, shared with Agata!

[koko57]

Thanks for sharing the designs and all the info! I think I'm all set to start working on this refactor. I'll keep you updated on the progress

[koko57]

Yesterday I started working on the first view - the additional step with the "Connect bank account". I'll continue working on this today

[koko57]

@mountiny @shawnborton I'm almost finished with the UI (easier) part then I'll work on the logic. But before I close the UI part I just wanted to make sure:

• we only want one "Connect bank account" button there?
• if so, do we need this text: "choose an option below"? (afaik we don't display it in VBBA flow)
• should I leave this space below the button?

Can I also ask for the Spanish translations for the title and the description?

[shawnborton]

Hmm would love @anmurali 's input on those when she is back from OOO, though maybe @joekaufmanexpensify can help answer that. @joekaufmanexpensify would we ever have a "manual" option for connecting your bank account for the Wallet enablement flow?

if so, do we need this text: "choose an option below"? (afaik we don't display it in VBBA flow)

Great point, that label could be removed in that case

And yeah, the space below the button should be removed too I think.

[joekaufmanexpensify]

would we ever have a "manual" option for connecting your bank account for the Wallet enablement flow?

Yep, we definitely will at some point. It just hasn't been built yet. Right now you can only add a bank account via Plaid here.

[shawnborton]

Sounds good. So @koko57 let's plan to just use the one button which means we can remove the preceding label.

[shawnborton]

@koko57 when you have your PR ready for review, can you please tag myself as well as @jamesdeanexpensify who can help out with the correct copy to use? Thanks!

[melvin-bot]

Triggered auto assignment to @muttmuure (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[melvin-bot]

📣 @shah-pujan! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[Pujan92]

$250 @Pujan92 C+

@muttmuure Can you plz consider #36648 (comment)

[muttmuure]

Apologies I missed that comment

[muttmuure]

I've updated the payment summary

[Pujan92]

Thanks! :)

[muttmuure]

Not overdue

[DylanDylann]

Automation failed, invited @DylanDylann to https://www.upwork.com/jobs/~0147a6261f6e47d9e6

Sorry @muttmuure I couldn't open that link, it says "This job is private. Only freelancers invited by client can view this job.". I don't see any new offer either.

[JmillsExpensify]

$1,500 approved for @Pujan92

[melvin-bot]

@shawnborton, @Pujan92, @koko57, @mountiny, @muttmuure Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@shawnborton, @Pujan92, @koko57, @mountiny, @muttmuure Still overdue 6 days?! Let's take care of this!

[muttmuure]

Sorry @DylanDylann - I've invited you again

[muttmuure]

Job is here: https://www.upwork.com/jobs/~0147a6261f6e47d9e6

[DylanDylann]

@muttmuure Thanks 🙏 , I applied to the job

[muttmuure]

Offer sent

[muttmuure]

Waiting for offer to be accepted

[DylanDylann]

@muttmuure Offer accepted with thanks!

[melvin-bot]

@shawnborton, @Pujan92, @koko57, @mountiny, @muttmuure Whoops! This issue is 2 days overdue. Let's get this updated quick!

[mountiny]

I believe we can close this one now, right?

[DylanDylann]

@muttmuure My contract for this issue is unpaid as of now, can you assist in releasing payments?

[muttmuure]

Paid