[HOLD for Payment 2024-10-24] [$250] Bank account - Not here page shows up when clicking add bank account

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.28-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): testpayment935@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to staging.new.expensify.com
2. Create a workspace
3. Add a bank account
4. On another tab sign in with a new account (This is going to be invited as an employee)
5. As the admin invite the user signed in on step 4
6. As the employee submit an expense
7. Admin pays the expense with expensify
8. As the employee navigate to the expense report page and click on Add bank account

Expected Result:

User gets navigated to validate their account first

Actual Result:

Hmm not here page shows up

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6592163_1725393801912.Screen_Recording_20240903_224959_Chrome.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021834204861349531229
• Upwork Job ID: 1834204861349531229
• Last Price Increase: 2024-09-12

[melvin-bot]

Triggered auto assignment to @kevinksullivan (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@kevinksullivan FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[nyomanjyotisa]

Proposal

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

Not here page shows up when clicking add bank account

What is the root cause of that problem?

Add bank account page is not accessible for non verified user and we don't disable the "Add bank account" button if the user is not validated here, like we did in the wallet page

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

Disable the "Add bank account" button if the user is not validated here

const [isUserValidated] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.validated});
...
<Button
    success
    style={[styles.w100, styles.requestPreviewBox]}
    text={translate('bankAccount.addBankAccount')}
    onPress={() => BankAccounts.openPersonalBankAccountSetupView(Navigation.getTopmostReportId() ?? linkedReport?.reportID)}
    pressOnEnter
    large
    isDisabled={!isUserValidated}
/>

What alternative solutions did you explore? (Optional)

When non validated account click "Add bank account" button, display a modal that inform the user is not validated yet so they cant add bank account, with 2 button: "Validate account" & "Cancel"

Once "Validate account" clicked navigate to default contact method page, to verify

Once verification success navigate back to that expense report page

[mkzie2]

Edited by proposal-police: This proposal was edited at 2024-09-11 08:56:21 UTC.

Proposal

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

Hmm not here page shows up. We should open validate code page first before executing the add bank account flow.

What is the root cause of that problem?

We show not found page when user is not validated:

App/src/pages/AddPersonalBankAccountPage.tsx

Line 70 in 7c50964

<FullPageNotFoundView shouldShow={!isUserValidated}>

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

Old solution

We should not disable Add bank account button in the message because that is a CTA button, without it, user wouldn't know what to do next to get reimbursed.

We should follow the behavior from policy's add bank account page, when user is not validated, we would show a warning message requesting them to validate their accounts first:

To do this, in AddPersonalBankAccountPage:

1. Remove the FullPageNotFoundView logic
2. Show ValidateAccountMessage component when isUserValidated is not satisfied:

{isUserValidated ? (
    {shouldShowSuccess ? <ConfirmationPage /> : <FormProvider />}
) : (
    <ValidateAccountMessage backTo={ROUTES.SETTINGS_ADD_BANK_ACCOUNT}/>
)}

We also did this in 2FA page:

1. We need to reuse the ValidateCodeActionModal just like we did in NewContactMethodPage:

App/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx

Line 148 in 5022fa8

<ValidateCodeActionModal

const handleSubmitForm = useCallback((validateCode: string) => {
  User.validateSecondaryLogin(loginList, account?.primaryLogin ?? '', validateCode);
}, [loginList, account]);


<ValidateCodeActionModal
    handleSubmitForm={handleSubmitForm}
    isVisible={isValidateCodeActionModalVisible}
/>

2. When the page mounts, check if user is validated or not to display the modal:

useEffect(() => {
        if (!isUserValidated && !isValidateCodeActionModalVisible) {
            setIsValidateCodeActionModalVisible(true);
        }
}, []);

3. If isUserValidated, we show the page main content:

App/src/pages/AddPersonalBankAccountPage.tsx

Line 75 in 1a43284

{shouldShowSuccess ? (

4. There are some polishes like validate error, pending fields and navigation when closing/dismissing the modal but we can handle those in the PR

[melvin-bot]

@kevinksullivan Eep! 4 days overdue now. Issues have feelings too...

[mkzie2]

@kevinksullivan Please proceed this one.

[melvin-bot]

@kevinksullivan 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[mkzie2]

@kevinksullivan Can you reassign BZ here since you're heading OOO?

[kevinksullivan]

I'd put this in collect since it's the mainline reimbursement flow. Also looping in another BZ as I am going OOO