[$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
• [x] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/72d7893a-36bd-47e1-b3ff-3922ea760ca1

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

Issue Owner

Current Issue Owner: @allroundexperts

[melvin-bot[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:

https://github.com/Expensify/App/blob/7c50964cb08ff35c6e7d741f25ba49c5256cef2a/src/pages/AddPersonalBankAccountPage.tsx#L70

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: ```javascript {isUserValidated ? ( {shouldShowSuccess ? : } ) : ( )} ``` We also did this in 2FA page:

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

https://github.com/Expensify/App/blob/5022fa879a8e2ef565438475b2c77ed822757e0e/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx#L148

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:

https://github.com/Expensify/App/blob/1a43284920954150af90b7439f8da45cb3a41716/src/pages/AddPersonalBankAccountPage.tsx#L75

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[bot]]

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

[mkzie2]

@kevinksullivan Please proceed this one.

[melvin-bot[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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[allroundexperts]

Thanks for the proposals everyone. I think @mkzie2's proposal is better, since disabling the button straight away would just cause confusion to the user. Let's also confirm with the design team if this is something we need to do here.

@Expensify/design can you please weigh in?

[dannymcclain]

Definitely agree that we don't want to just disable the button. @shawnborton can correct me if I'm wrong, but I thought we recently talked about just making the magic code validation the very first step of the add bank account flow for unvalidated users. Does that sound right?

[trjExpensify]

^^ that sounds like it could be a decent improvement instead of that kinda' bulky error text at the bottom we use in places for this 😅 So here, they'd click Add bank account and get a magic code sent to them and land on a magic code input page, right?

[shawnborton]

but I thought we recently talked about just making the magic code validation the very first step of the add bank account flow for unvalidated users. Does that sound right?

Indeed that does sound correct from my understanding.

[mkzie2]

Updated my proposal to reflect the latest expectations.

[dannymcclain]

So here, they'd click Add bank account and get a magic code sent to them and land on a magic code input page, right?

Yes. They'd land on the magic code validation page in the RHP, and it would essentially act as the first step of the add bank account flow. I think Shawn had recently worked on this for adding a VBBA if I'm remembering correctly.

[trjExpensify]

They'd land on the magic code validation page in the RHP, and it would essentially act as the first step of the add bank account flow.

Kewl.

I think Shawn had recently worked on this for adding a VBBA if I'm remembering correctly.

Got it, I don't think I've seen that. It's not in prod either.

[allroundexperts]

Given that we have an agreement that we should show the magic code validation page if the user is not validated, @mkzie2's proposal makes the most sense then. Let's go with them.

🎀 👀 🎀 C+ reviewed

[melvin-bot[bot]]

Triggered auto assignment to @MariaHCD, see https://stackoverflow.com/c/expensify/questions/7972 for more details.