[NEEDS CHECKLIST?] [$500] [MEDIUM] Bank account - Next button is not disabled when Plaid modal is loading

[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: .4.41-3
Reproducible in staging?: Y
Reproducible in production?: N
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: Applause - Internal Team
Slack conversation:

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace settings from the bottom
3. Go to any workspace > Bank account
4. Click Connect online with Plaid
5. Click Next button

Expected Result:

Next button should be disabled or not appear because it serves no purpose

Actual Result:

Next button is clickable, which leads to an error

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

Bug6379345_1707915482988.bandicam_2024-02-14_13-33-02-940.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~012116e37edfd28ced
• Upwork Job ID: 1758164914508275712
• Last Price Increase: 2024-02-15
• Automatic offers:
• akinwale | Reviewer | 0
• Pujan92 | Contributor | 0

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @MariaHCD (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[lanitochka17]

We think that this bug might be related to #wave5
CC @dylanexpensify

[mountiny]

Not a blocker, we can follow up easily, users are not blocked in any way

[ghost]

Proposal

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

Bank account - Next button is not disabled when Plaid modal is loading.

What is the root cause of that problem?

The root cause of the issue is that we are showing the Next button on the Plaid Modal, which is not needed as discussed mentioned above.

App/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx

Lines 81 to 88 in 6914b13

	<FormProvider
	formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
	validate={validate}
	onSubmit={handleNextPress}
	scrollContextEnabled
	submitButtonText={translate('common.next')}
	style={[styles.mh5, styles.flexGrow1]}
	>

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

We can just pass a prop called isSubmitButtonVisible = {false} in the above code, this will not show Next button on the Plaid Modal.

What alternative solutions did you explore? (Optional)

N/A

Result

The Next button, will not appear on the Plaid Modal.

Screen.Recording.2024-02-15.at.1.41.59.PM.mp4

[Pujan92]

Proposal

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

Next button is displayed when plaid is loading

What is the root cause of that problem?

Seems it(isSubmitButtonVisible) is removed from this commit, but we require isSubmitButtonVisible to hide the next button initially.
cc: @MrMuzyk

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

We need to re-add isSubmitButtonVisible, if not fully we need to partially consider the bankAccounts length. I mentioned partially bcoz for the account picker we do have validation so we don't need to re-add condition !!selectedPlaidAccountID

isSubmitButtonVisible={(plaidData?.bankAccounts ?? []).length > 0}

Result

test2.mov

[MrMuzyk]

@mountiny

If hiding the button when we're initialising Plaid is accepted solution here than @Pujan92 proposal will work well here

[akinwale]

We can move forward with @Pujan92's proposal here.

🎀👀🎀 C+ reviewed.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Current assignee @akinwale is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

📣 @akinwale 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[mountiny]

@osrry for the ping Monil, handling this one

[melvin-bot]

📣 @Pujan92 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[mountiny]

Payment for @akinwale will be handled here #22901 (comment)

[melvin-bot]

Triggered auto assignment to @jliexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[jliexpensify]

Cancelled contract with @akinwale, paid @Pujan92 and closed job.

@akinwale does the checklist need to be completed?

[akinwale]

@jliexpensify This doesn't need a checklist as it's essentially a follow-up issue for a new feature.