Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[HOLD for payment 2024-11-29] [HOLD for payment 2024-11-20] [HOLD for payment 2024-11-13] [$250] Add a step that collects the magic code when adding a VBBA #51166

Closed
8 tasks done
trjExpensify opened this issue Oct 21, 2024 · 81 comments
Assignees
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Daily KSv2 External Added to denote the issue can be worked on by a contributor NewFeature Something to build that is a new item.

Comments

@trjExpensify
Copy link
Contributor

trjExpensify commented Oct 21, 2024

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:

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

Expected Result:

This is a feature request.

  1. Neither the "Connect online with Plaid" or "Connect manually" option rows are greyed out
  2. There isn't a "Hold up! We need you to..." error message.
  3. 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:
image

Actual Result:

  1. Both option rows are greyed out
  2. 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.
image

Platforms:

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

  • Android: Standalone
  • Android: HybridApp
  • Android: mWeb Chrome
  • iOS: Standalone
  • iOS: HybridApp
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
  • MacOS: Desktop

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
  • Automatic offers:
    • shahinyan11 | Contributor | 104639697
Issue OwnerCurrent Issue Owner: @garrettmknight
@trjExpensify trjExpensify added Daily KSv2 NewFeature Something to build that is a new item. labels Oct 21, 2024
Copy link

melvin-bot bot commented Oct 21, 2024

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 melvin-bot bot added Weekly KSv2 and removed Daily KSv2 labels Oct 21, 2024
@trjExpensify trjExpensify added the External Added to denote the issue can be worked on by a contributor label Oct 21, 2024
Copy link

melvin-bot bot commented Oct 21, 2024

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

@melvin-bot 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 melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Oct 21, 2024
Copy link

melvin-bot bot commented Oct 21, 2024

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

@melvin-bot melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels Oct 21, 2024
@NJ-2020
Copy link
Contributor

NJ-2020 commented Oct 21, 2024

Edited by proposal-police: This proposal was edited at 2024-10-22 12:42:52 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?

  1. Remove this !account.validated check
    disabled={!!isPlaidDisabled || !account?.validated}

    disabled={!account?.validated}
  2. Remove this code and the ValidateAccountMessage component
    {!account?.validated && <ValidateAccountMessage />}
  3. When clicking the Connect button and the user has not yet verified the account, we will show a validation modal
<MenuItem
    icon={Expensicons.Bank}
    title={translate('bankAccount.connectOnlineWithPlaid')}
    disabled={!!isPlaidDisabled}
    onPress={() => {
        if (!!isPlaidDisabled) {
            return;
        }
        if (!account?.validated) {
            setConnectMethod(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID);
            setIsValidateCodeActionModalVisible(true);
            return;
        }
        removeExistingBankAccountDetails();
        BankAccounts.openPlaidView();
    }}
    shouldShowRightIcon
    wrapperStyle={[styles.sectionMenuItemTopDescription]}
/>
<MenuItem
    icon={Expensicons.Connect}
    title={translate('bankAccount.connectManually')}
    onPress={() => {
        if (!account?.validated) {
            setConnectMethod(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL);
            setIsValidateCodeActionModalVisible(true);
            return;
        }
        removeExistingBankAccountDetails();
        BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL);
    }}
    shouldShowRightIcon
    wrapperStyle={[styles.sectionMenuItemTopDescription]}
/>
  1. We will display the validation modal under here

    if isValidateCodeActionModalVisible is true
const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE);
const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST);
const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(false);
const [connectMethod, setConnectMethod] = useState('');
const primaryLogin = account?.primaryLogin ?? '';
const hasMagicCodeBeenSent = useMemo(() => !!validateCodeAction?.validateCodeSent, [validateCodeAction]);


const validateUserAndConnect = useCallback((code: string) => {
    User.validateSecondaryLogin(loginList, primaryLogin, code)
    if(connectMethod === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) {
        removeExistingBankAccountDetails();
        BankAccounts.openPlaidView();
    }
    if(connectMethod === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL) {
        removeExistingBankAccountDetails();
        BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL);
    }
    setIsValidateCodeActionModalVisible(false);
}, [loginList, primaryLogin, connectMethod]);

<ValidateCodeActionModal
    hasMagicCodeBeenSent={hasMagicCodeBeenSent}
    handleSubmitForm={validateUserAndConnect}
    clearError={() => User.clearValidateCodeActionError('actionVerified')}
    title={translate('contacts.validateAccount')}
    description={translate('contacts.featureRequiresValidate')}
    sendValidateCode={() => User.requestValidateCodeAction()}
    onClose={() => setIsValidateCodeActionModalVisible(false)}
    isVisible={isValidateCodeActionModalVisible}
/>

Here's the test branch

Result

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

And when there's an error, the error will be cleared automatically when we close the validation modal and it's handle by clearError function here

<ValidateCodeActionModal
    ...
    clearError={() => User.clearValidateCodeActionError('actionVerified')}

And we're using the same way when we're dismissing the error inside the ValidateCodeActionModal

if (validateError) {
clearError();
User.clearValidateCodeActionError('actionVerified');
}

Demo video when there's an error

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

What alternative solutions did you explore? (Optional)

@daledah
Copy link
Contributor

daledah commented Oct 21, 2024

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:

  1. Remove account.validated check from here and here

  2. Remove error note here:

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

  3. Add ValidateCodeActionModal related props:

    const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST);
    const contactMethod = account?.primaryLogin ?? '';
    const isUserValidated = !!account?.validated;
    const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(true);
    const [setupType, setSetupType] = useState('')

    const validateAccountAndStartSteps = useCallback(
        (validateCode: string) => {
            User.validateSecondaryLogin(loginList, contactMethod, validateCode);
            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);
            }
            setIsValidateCodeActionModalVisible(false);
        },
        [setupType, loginList, contactMethod],
    );

Add ValidateCodeActionModal to after here:

                    <ValidateCodeActionModal
                        clearError={clearError}
                        sendValidateCode={() => User.requestValidateCodeAction()}
                        isVisible={isValidateCodeActionModalVisible}
                        title={translate('contacts.validateAccount')}
                        description={translate('contacts.featureRequiresValidate')}
                        onClose={() => setIsValidateCodeActionModalVisible(false)}
                        handleSubmitForm={validateAccountAndStartSteps}
                    />
  1. Update onPress function to set setupType before opening modal, for example with plaid button:
onPress={() => {
    if (!!isPlaidDisabled) {
        return;
    }
if (!account?.validated) {
    setSetupType(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID)
    setIsValidateCodeActionModalVisible(true);
        return;
    }
removeExistingBankAccountDetails();
    BankAccounts.openPlaidView();
}}

POC

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

What alternative solutions did you explore? (Optional)

@trjExpensify
Copy link
Contributor Author

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
Copy link
Contributor

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

@shahinyan11
Copy link

shahinyan11 commented Oct 21, 2024

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.

1. a) Add new state in ReimbursementAccountPage component for show/hide ValidateCodeActionModal modal. ( Note: Point b) requires that this state be defined in ReimbursementAccountPage component )

const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(false)

b) Update this condition to prevent displaying ReimbursementAccountLoadingIndicator when the validation modal is open

if (
    (!hasACHDataBeenLoaded || isLoading) && shouldShowOfflineLoader && (shouldReopenOnfido || !requestorStepRef.current) &&
     !(currentStep === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT && isValidateCodeActionModalVisible)
) {
    return <ReimbursementAccountLoadingIndicator onBackButtonPress={goBack} />;
}

c) Pass new state variables to the BankAccountStep component as props

<BankAccountStep
    ...
    isValidateCodeActionModalVisible={isValidateCodeActionModalVisible}
    toggleValidateCodeActionModal={setIsValidateCodeActionModalVisible}
/>

2. a) Add new props in BankAccountStepProps

type BankAccountStepProps = {
  ... 
  
  /** Should ValidateCodeActionModal be displayed or not */
  isValidateCodeActionModalVisible?:  boolean;
  
  /** Toggle ValidateCodeActionModal*/
  toggleValidateCodeActionModal?: (isVisible: boolean) => void;
}

b) Add bellow codes in BankAccountStep component body

const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST);
const contactMethod = account?.primaryLogin ?? '';
const selectedSubStep = useRef('')

const loginData = useMemo(() => loginList?.[contactMethod], [loginList, contactMethod]);
const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin');
const hasMagicCodeBeenSent = !!loginData?.validateCodeSent;

....

useEffect(() => {
    if (!account?.validated) {
        return;
    }

    if(selectedSubStep.current  === CONST.BANK_ACCOUNT.SUBSTEP.MANUAL){
        BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL);
    }else if (selectedSubStep.current === CONST.BANK_ACCOUNT.SUBSTEP.PLAID){
        BankAccounts.openPlaidView();
    }
}, [account?.validated]);

3. Update this and this callbacks to below

() => {
  if(!account?.validated){
      selectedSubStep.current = CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID
      toggleValidateCodeActionModal?.(true)
      return
  }
}

....

() => {
  if(!account?.validated){
      selectedSubStep.current = CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL
      toggleValidateCodeActionModal?.(true)
      return
  }

  removeExistingBankAccountDetails();
  BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL);
}

4. Add bellow code in this line

 <ValidateCodeActionModal
     title={translate('contacts.validateAccount')}
     description={translate('contacts.featureRequiresValidate')}
     isVisible={isValidateCodeActionModalVisible }
     hasMagicCodeBeenSent={hasMagicCodeBeenSent}
     validatePendingAction={loginData?.pendingFields?.validateCodeSent}
     sendValidateCode={() => User.requestValidateCodeAction()}
     handleSubmitForm={(validateCode)=> User.validateSecondaryLogin(loginList, contactMethod, validateCode)}
     validateError={!isEmptyObject(validateLoginError) ? validateLoginError : ErrorUtils.getLatestErrorField(loginData, 'validateCodeSent')}
     clearError={()=> User.clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')}
     onClose={() => toggleValidateCodeActionModal?.(false)}
 />

5. Remove this line and the !account?.validated checks from here and here
6. 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)

@trjExpensify
Copy link
Contributor Author

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

Agreed, I think that's best.

@Pujan92 can you prioritise the proposal reviews today, please? Thanks!

@mountiny mountiny self-assigned this Oct 22, 2024
@mountiny
Copy link
Contributor

Asking in Slack if we could reassign to the C+ who are familiar with this flow https://expensify.slack.com/archives/C02NK2DQWUX/p1729591653444039

@mountiny mountiny assigned hungvu193 and unassigned Pujan92 Oct 22, 2024
@melvin-bot melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Oct 22, 2024
@NJ-2020
Copy link
Contributor

NJ-2020 commented Oct 22, 2024

Proposal Updated

@hungvu193
Copy link
Contributor

Thanks for proposals everyone. Please update your proposal to reuse our existing component called: ValidateCodeActionModal

Here’s example: #49445

Copy link

melvin-bot bot commented Nov 13, 2024

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.60-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

If no regressions arise, payment will be issued on 2024-11-20. 🎊

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

Copy link

melvin-bot bot commented Nov 13, 2024

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:

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

@melvin-bot melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Weekly KSv2 labels Nov 13, 2024
@melvin-bot melvin-bot bot added Weekly KSv2 and removed Weekly KSv2 labels Nov 22, 2024
@melvin-bot melvin-bot bot changed the title [HOLD for payment 2024-11-20] [HOLD for payment 2024-11-13] [$250] Add a step that collects the magic code when adding a VBBA [HOLD for payment 2024-11-29] [HOLD for payment 2024-11-20] [HOLD for payment 2024-11-13] [$250] Add a step that collects the magic code when adding a VBBA Nov 22, 2024
Copy link

melvin-bot bot commented Nov 22, 2024

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

@melvin-bot melvin-bot bot removed the Reviewing Has a PR in review label Nov 22, 2024
Copy link

melvin-bot bot commented Nov 22, 2024

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.65-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

If no regressions arise, payment will be issued on 2024-11-29. 🎊

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

Copy link

melvin-bot bot commented Nov 22, 2024

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:

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

@melvin-bot melvin-bot bot added the Overdue label Dec 2, 2024
@garrettmknight
Copy link
Contributor

@mountiny do we already have a regression test for this?

@melvin-bot melvin-bot bot removed the Overdue label Dec 2, 2024
@mountiny
Copy link
Contributor

mountiny commented Dec 3, 2024

No, I do not think we have a test for this specific flow @hungvu193 @getusha could you complete the checklist here and propose a test to add please? thanks!

@getusha
Copy link
Contributor

getusha commented Dec 4, 2024

No, I do not think we have a test for this specific flow @hungvu193 @getusha could you complete the checklist here and propose a test to add please? thanks!

On it, thanks

@hungvu193
Copy link
Contributor

What's the payment summary for this one? I think we created 3 PRs for this issue.

@mountiny
Copy link
Contributor

mountiny commented Dec 9, 2024

@hungvu193 can you please list them out for simplicity?

@getusha can you then complete the regression tests for these prs please?

@hungvu193
Copy link
Contributor

@hungvu193 can you please list them out for simplicity?

Sure, here's the list:
#51882
#51718
#52356

@getusha
Copy link
Contributor

getusha commented Dec 9, 2024

Regression Test Proposal

Invoices

  1. Sign in with an email that haven't been used to create an account and complete the onboarding
  2. Create a new workspace
  3. Go to More features > Enable workflows
  4. Go to Invoices page and press Add bank account.
  5. Verify that you're navigated to VerifyAccountPage and received a magic code to your email
  6. Enter the code from the email
  7. Verify you can continue the VBBA flow.

Workflows

  1. Sign in with an email that haven't been used to create an account and complete the onboarding
  2. Create a new workspace
  3. Go to More features > Enable workflows
  4. Go to Workflows > Make or track payments > Connect bank account
  5. Connect via Plaid
  6. Verify that you're navigated to Validate your account page and received a magic code to your email
  7. Navigate back and press Connect manually
  8. Verify that you're navigated to Validate your account page and received a magic code to your email
  9. Enter the code from the email
  10. Verify you can continue the VBBA flow.

2FA Authentication

  1. Sign in with an email that haven't been used to create an account and complete the onboarding
  2. Go to Settings > Security > Two-factor authentication
  3. Verify that you're navigated to Validate your account page and received a magic code to your email
  4. Enter the code from the email
  5. Verify that you're navigated to Two-factor authentication page

Do we agree 👍 or 👎

@mountiny
Copy link
Contributor

mountiny commented Dec 9, 2024

@hungvu193 $750
@shahinyan11 $500
@getusha $250

is the summary

@melvin-bot melvin-bot bot added the Overdue label Dec 11, 2024
@garrettmknight garrettmknight added Daily KSv2 and removed Weekly KSv2 labels Dec 11, 2024
@melvin-bot melvin-bot bot removed the Overdue label Dec 11, 2024
@garrettmknight
Copy link
Contributor

$750 approved for @hungvu193

@garrettmknight
Copy link
Contributor

@getusha request when you're ready.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Daily KSv2 External Added to denote the issue can be worked on by a contributor NewFeature Something to build that is a new item.
Projects
Development

No branches or pull requests