[$250] Add a step that collects the magic code when adding a VBBA #51166

trjExpensify · 2024-10-21T09:52:01Z

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

Version Number: v9.0.51-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Applicable on all platforms
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @trjExpensify
Slack conversation: https://expensify.slack.com/archives/C07HPDRELLD/p1729255848407089?thread_ts=1729042472.964519&cid=C07HPDRELLD

Action Performed:

Go to expensify.com > sign-up > choose "1-9" to be redirected to NewDot
Complete the onboarding modal steps to have a workspace created.
Go to Settings > Workspaces > Click into the workspace created
Go to More features > Enable workflows
Go to Workflows > Make or track payments > Connect bank account

Expected Result:

This is a feature request.

Neither the "Connect online with Plaid" or "Connect manually" option rows are greyed out
There isn't a "Hold up! We need you to..." error message.
When clicking either of the option rows in 1 above, we send a magic code email to the user, and show this validate your account page to collect it:

Actual Result:

Both option rows are greyed out
There's an error message on the page which we've since deprecated elsewhere in favour of a better experience to fire off and collect a magic code.

Platforms:

Which of our officially supported platforms is this issue occurring on?

Screenshots/Videos

In-line above.

View all open jobs on GitHub

CC: @shawnborton @mountiny

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021848301297798537201
Upwork Job ID: 1848301297798537201
Last Price Increase: 2024-10-21

Issue Owner

Current Issue Owner: @Pujan92

melvin-bot · 2024-10-21T09:52:12Z

Triggered auto assignment to @abekkala (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 · 2024-10-21T09:52:25Z

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

melvin-bot · 2024-10-21T09:52:30Z

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

NJ-2020 · 2024-10-21T10:19:35Z

Proposal

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

Add a step that collects the magic code when adding a VBBA

What is the root cause of that problem?

New feature

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

Right here we need to remove the !account.validated check

App/src/pages/ReimbursementAccount/BankAccountStep.tsx

Line 141 in 8ca4576

disabled={!!isPlaidDisabled || !account?.validated}

App/src/pages/ReimbursementAccount/BankAccountStep.tsx

Line 157 in 8ca4576

disabled={!account?.validated}

And also we need to remove this code and the ValidateAccountMessage component since we do not want to show this even the user has not verified the account

App/src/pages/ReimbursementAccount/BankAccountStep.tsx

Line 167 in 8ca4576

{!account?.validated && <ValidateAccountMessage />}

And when clicking the Connect button we will check if the user has not verified the account we will redirect to the Validation component which we will create later

<MenuItem
    icon={Expensicons.Bank}
    title={translate('bankAccount.connectOnlineWithPlaid')}
    disabled={!!isPlaidDisabled}
    onPress={() => {
        if (!account?.validated) {
            BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.VALIDATE_USER)
        } else if(!isPlaidDisabled) {
            removeExistingBankAccountDetails();
            BankAccounts.openPlaidView();
        }
    }}
    shouldShowRightIcon
    wrapperStyle={[styles.sectionMenuItemTopDescription]}
/>

<MenuItem
    icon={Expensicons.Connect}
    title={translate('bankAccount.connectManually')}
    onPress={() => {
        if(!account?.validated) {
            BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.VALIDATE_USER)
        } else {
            removeExistingBankAccountDetails();
            BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL);
        }
        
    }}
    shouldShowRightIcon
    wrapperStyle={[styles.sectionMenuItemTopDescription]}
/>

Add new property inside CONST.ts for VALIDATE_USER

App/src/CONST.ts

Line 376 in 8ca4576

BANK_ACCOUNT: {

VALIDATE_USER: {
    DESCRIPTION: "This feature requires you to validate your account",
},
STEP: {
    VALIDATE_USER: 'ValidateUser',

Also right here

App/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx

Lines 435 to 437 in da68c0b

    
           switch (currentStep) { 
        
               case CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT: 
        
                   return (

We should handle for validate user

Create new component for validating the user account similar to Validate account page

What alternative solutions did you explore? (Optional)

daledah · 2024-10-21T10:23:40Z

Edited by proposal-police: This proposal was edited at 2024-10-21 17:19:42 UTC.

Proposal

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

Add a step that collects the magic code when adding a VBBA

What is the root cause of that problem?

New feature

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

In BankAccountStep:

Remove account.validated check from here and here
Remove error note here:

App/src/pages/ReimbursementAccount/BankAccountStep.tsx

Line 167 in 8ca4576

{!account?.validated && <ValidateAccountMessage />}

Update onPress function from the buttons to navigate to verify account page when user is not validated.
Pseudocode for connect with plaid button:

App/src/pages/ReimbursementAccount/BankAccountStep.tsx

Lines 142 to 148 in 8ca4576

    
           onPress={() => { 
        
               if (!!isPlaidDisabled || !account?.validated) { 
        
                   return; 
        
               } 
        
               removeExistingBankAccountDetails(); 
        
               BankAccounts.openPlaidView(); 
        
           }}

onPress={() => {
    if (!!isPlaidDisabled) {
        return;
    }
if (!account?.validated) {
    Navigation.navigate(ROUTES.SETTINGS_WALLET_VERIFY_ACCOUNT.getRoute(Navigation.getActiveRoute()));
        return;
    }
removeExistingBankAccountDetails();
    BankAccounts.openPlaidView();
}}

POC

Screen.Recording.2024-10-21.at.17.22.11.mov

What alternative solutions did you explore? (Optional)

Regarding #51166 (comment)

We have three options:

Handle directly from VerifyAccountPage:

Update getRoute for verify account page

App/src/ROUTES.ts

Line 156 in b176976

    
           SETTINGS_WALLET_VERIFY_ACCOUNT: {route: 'settings/wallet/verify', getRoute: (backTo?: string) => getUrlWithBackToParam('settings/wallet/verify', backTo)},

getRoute: (backTo?: string, setupType?: ValueOf<typeof CONST.BANK_ACCOUNT.SETUP_TYPE>) =>
            getUrlWithBackToParam(`settings/wallet/verify${setupType ? `?setupType=${setupType}` : ''}`, backTo),

handle setupType after here

if (setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) {
            BankAccounts.openPlaidView();
        } else if (setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL) {
            BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL);
        }

Then update onPress function, adding setupType corresponding to the buttons.

However, this approach will cause a bug similar to #50284, that user will be logged out immediately after verifying the account, and we will probably have to wait for #50835 to fix this bug.

Handle inside BankAccountStep

Add a prop setupType to BankAccountStep, and pass it from ReimbursementAccountPage:

const setupType = route?.params?.setupType
/* ... */

<BankAccountStep
       /* ... */
       setupType={setupType}
/>

Update onPress function to set setupType param before navigating, for example with plaid button:

onPress={() => {
    if (!!isPlaidDisabled) {
        return;
    }
if (!account?.validated) {
    Navigation.setParams({setupType: CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID})
    Navigation.navigate(ROUTES.SETTINGS_WALLET_VERIFY_ACCOUNT.getRoute(Navigation.getActiveRoute()));
        return;
    }
removeExistingBankAccountDetails();
    BankAccounts.openPlaidView();
}}

Add an useEffect to handle setupType:

    useEffect(() => {
        if (!account?.validated) {
            return;
        }
        if (setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) {
            BankAccounts.openPlaidView();
        }
        if (setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL) {
            BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL);
        }
    }, [setupType, account?.validated]);

This approach will not cause user to be logged out immediately, but the view will have a brief flash before entering the connect steps, video below.

POC - Continue the flow right after navigate back

Screen.Recording.2024-10-22.at.00.01.56.mov

3. Straight up blocks user before they see the options Since both connect options requires user to be validated, we can show user the verify account page from the moment they presses `Add bank account` button, and show contents after user is validated.

Add the following change to after here and here

if (!isUserValidated) {
                                        Navigation.navigate(
                                            ROUTES.SETTINGS_WALLET_VERIFY_ACCOUNT.getRoute(
                                                ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('', route.params.policyID, ROUTES.WORKSPACE_WORKFLOWS.getRoute(route.params.policyID)),
                                            ),
                                        );
                                    }

POC - Requires validating before opening options page

Screen.Recording.2024-10-22.at.00.38.40.mov

trjExpensify · 2024-10-21T13:16:11Z

CC: @mountiny for eyes on this as I believe you've been involved in other flows that introduced it.

Looking at the POC video, it overall looks good. My only question is whether we should continue them on in the flow rather than dropping them back on the same page where they have to click the button again. @shawnborton, whatcha' think?

shawnborton · 2024-10-21T13:17:22Z

I would say continue them down the path rather than bring them back to the prior step. Thoughts?

shahinyan11 · 2024-10-21T16:04:09Z

Edited by proposal-police: This proposal was edited at 2024-10-21 16:21:02 UTC.

Proposal

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

Add a step that collects the magic code when adding a VBBA

What is the root cause of that problem?

New feature. Currently we have another implementation

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

I suggest below changes for continue in the flow rather than dropping back on the same page as mentioned in this comment.

Add one more optional param ( e.g bankAccountSubStep ) for SETTINGS_WALLET_VERIFY_ACCOUNT.getRoute. To do that update this code to below

getRoute: (backTo?: string, bankAccountSubStep?: string) => getUrlWithBackToParam(`settings/wallet/verify?bankAccountSubStep=${bankAccountSubStep}`, backTo)}

In VerifyAccountPage get the bankAccountSubStep from props and update this useEffect to below code in this line.

if(bankAccountSubStep === CONST.BANK_ACCOUNT.SUBSTEP.MANUAL){
    BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL);
}else if (bankAccountSubStep === CONST.BANK_ACCOUNT.SUBSTEP.PLAID){
    BankAccounts.openPlaidView();
}

Add new validateAccount function in BankAccountStep component

const validateAccount = useCallback((bankAccountSubStep: string)=>{
    User.requestValidateCodeAction()
    Navigation.navigate(ROUTES.SETTINGS_WALLET_VERIFY_ACCOUNT.getRoute(Navigation.getActiveRoute(), bankAccountSubStep));
}, [])

Update this and this callbacks to below

() => {
    if (!!isPlaidDisabled) {
        return;
    }
    if (!account?.validated) {
        validateAccount(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID)
        return;
    }
    removeExistingBankAccountDetails();
    BankAccounts.openPlaidView();
}

....

() => {
    if (!account?.validated) {
        validateAccount(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL)
        return;
    }
    removeExistingBankAccountDetails();
    BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL);
}

Remove this line and the !account?.validated checks drom here and here
OPTIONAL. If the options should be grayed out but clickable we can add new shouldGreyOut prop to MenuItem to component. And update this conditional style like below

( shouldGreyOut || (shouldGreyOutWhenDisabled && disabled) )  && styles.buttonOpacityDisabled,

What alternative solutions did you explore? (Optional)

daledah · 2024-10-21T17:20:15Z

PROPOSAL UPDATED

Add three solutions for [$250] Add a step that collects the magic code when adding a VBBA #51166 (comment)

trjExpensify added Daily KSv2 NewFeature Something to build that is a new item. labels Oct 21, 2024

melvin-bot bot assigned abekkala Oct 21, 2024

melvin-bot bot added Weekly KSv2 and removed Daily KSv2 labels Oct 21, 2024

trjExpensify added the External Added to denote the issue can be worked on by a contributor label Oct 21, 2024

melvin-bot bot changed the title ~~Add a step that collects the magic code when adding a VBBA~~ [$250] Add a step that collects the magic code when adding a VBBA Oct 21, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Oct 21, 2024

melvin-bot bot assigned Pujan92 Oct 21, 2024

melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels Oct 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[$250] Add a step that collects the magic code when adding a VBBA #51166

[$250] Add a step that collects the magic code when adding a VBBA #51166

trjExpensify commented Oct 21, 2024 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Oct 21, 2024

melvin-bot bot commented Oct 21, 2024

melvin-bot bot commented Oct 21, 2024

NJ-2020 commented Oct 21, 2024

daledah commented Oct 21, 2024 •

edited

Loading

trjExpensify commented Oct 21, 2024

shawnborton commented Oct 21, 2024

shahinyan11 commented Oct 21, 2024 •

edited

Loading

daledah commented Oct 21, 2024 •

edited

Loading

[$250] Add a step that collects the magic code when adding a VBBA #51166

[$250] Add a step that collects the magic code when adding a VBBA #51166

Comments

trjExpensify commented Oct 21, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Platforms:

Screenshots/Videos

melvin-bot bot commented Oct 21, 2024

melvin-bot bot commented Oct 21, 2024

melvin-bot bot commented Oct 21, 2024

NJ-2020 commented Oct 21, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

daledah commented Oct 21, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

trjExpensify commented Oct 21, 2024

shawnborton commented Oct 21, 2024

shahinyan11 commented Oct 21, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

daledah commented Oct 21, 2024 • edited Loading

trjExpensify commented Oct 21, 2024 •

edited by melvin-bot bot

Loading

daledah commented Oct 21, 2024 •

edited

Loading

shahinyan11 commented Oct 21, 2024 •

edited

Loading

daledah commented Oct 21, 2024 •

edited

Loading