[HOLD for payment 2024-08-14] [$250] Wallet - inactive add bank account button when enabling wallet for first time

[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.13-3
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): negasofonias+7247@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Login to staging new dot with a new account
2. Open expensify task chat with setup steps and start executing task 3
3. Go to account and click on wallet
4. Click on enable wallet and observe a new window pops on the right with a create account button
5. Observe the button is not clickable

Expected Result:

Button should be clickable to comply with the stated user flow in the enabling wallet task flow
i.e 1. Click your profile picture
2. Click Wallet > Enable wallet
3. Add your bank account

Actual Result:

Button is not clickable but becomes clickable after user first uses the add account path below enable wallet in wallet page

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

Bug6550237_1721710182409.Button_not_working.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01faf46b6481828f8a
• Upwork Job ID: 1817982656802675106
• Last Price Increase: 2024-07-29

Issue Owner

Current Issue Owner: @joekaufmanexpensify

[melvin-bot]

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

[nyomanjyotisa]

Proposal

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

inactive add bank account button when enabling wallet for first time

What is the root cause of that problem?

The Add bank account button on enable wallet page is disabled if isPlaidDisabled is true or the user not validated yet

App/src/pages/EnablePayments/AddBankAccount/SetupMethod.tsx

Line 56 in 98d8a5a

isDisabled={isPlaidDisabled ?? !user?.validated}

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

Update Enable your wallet task description steps to add a step to validate account or add a note account should be validated before user can enable wallet/add bank account

Enable the add bank account button only if user already validated here and here and in other places across the app if needed

isDisabled={!user?.validated}

What alternative solutions did you explore? (Optional)

Remove the isDisabled from Add bank account button on enable wallet page, so it will be always enabled

[bernhardoj]

Proposal

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

The add bank button on the expensify wallet page is disabled initially but enabled once we press the Add bank account from the Bank accounts section.

What is the root cause of that problem?

The add bank account on the expensify wallet page is disabled if isPlaidDisabled is true.

App/src/pages/EnablePayments/AddBankAccount/SetupMethod.tsx

Line 56 in 98d8a5a

isDisabled={isPlaidDisabled ?? !user?.validated}

But isPlaidDisabled is initially undefined, so it will use the !user.validated condition. When we open the plaid link from the Bank accounts section, BE returns the isPlaidDisabled and if it's false, the button is enabled even when the user is still not validated yet.

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

We need to use || instead of ?? just like we did in workspace BankAccountStep.

App/src/pages/ReimbursementAccount/BankAccountStep.tsx

Line 151 in 98d8a5a

isDisabled={!!isPlaidDisabled || !user?.validated}

Based on the discussion, we also want to disable the Add bank account on the Bank accounts section, so we need to disable it here:

App/src/pages/settings/Wallet/PaymentMethodList.tsx

Lines 314 to 324 in 5d26dbe

	const renderListFooterComponent = useCallback(
	() => (
	<MenuItem
	onPress={onPress}
	title={translate('walletPage.addBankAccount')}
	icon={Expensicons.Plus}
	wrapperStyle={[styles.paymentMethod, listItemStyle]}
	hoverAndPressStyle={styles.hoveredComponentBG}
	ref={buttonRef}
	/>
	),

disabled={!user.validated}

We also need to show not found page in AddPersonalBankAccountPage when the user is not validated yet in case the user directly accesses the URL (/settings/wallet/add-bank-account).

[joekaufmanexpensify]

Will triage today

[joekaufmanexpensify]

We decided we want to fix this. But the way we want to fix it is we don't want to allow someone to add a bank account or enable their wallet before they've validated. Is that what you're proposal would do @bernhardoj ?

[melvin-bot]

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

[melvin-bot]

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

[bernhardoj]

@joekaufmanexpensify Yes, the button in Add bank account page will be disabled if the account is not validated.

However, the Add bank account button in "Bank accounts" section currently doesn't have any logic to disable/hide when the account is not validated. What should we do with that button, disable or hide or other?