[HOLD for payment 2024-05-06] [MEDIUM] Web - Workspace - Unable to add bank account with Plaid after an interruption

[kbecciv]

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: 1.4.18.1
Reproducible in staging?: y
Reproducible in production?: cannot verify
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. Navigate to https://staging.new.expensify.com/
2. Log in with an expensifail account
3. Start to add bank account with Plaid
4. Close the popup after signing in with user_good / pass_good
5. Navigate to https://staging.new.expensify.com/
6. Click on the workspace / bank account button
7. Refresh the page
8. Click on the workspace / bank account button
9. Click on the Plaid button

Expected Result:

I should be able to continue without issues.

Actual Result:

Unable to add bank account with Plaid after an interruption. Infinite loading for the first try. The button isn't responding for the second try.

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

Bug6327003_1703706808753.bandicam_2023-12-27_18-38-21-019.mp4

View all open jobs on GitHub

[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 @marcochavezf (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[marcochavezf]

I can't reproduce it locally on latest main

[bernhardoj]

Proposal

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

The plaid loads infinitely after we close the tab in the middle of the process. I can reproduce this on both staging and prod.

What is the root cause of that problem?

When we press "Connect online with Plaid", we set the sub-step to "plaid",

App/src/pages/ReimbursementAccount/BankAccountStep.js

Lines 136 to 146 in e9c112a

	<Button
	icon={Expensicons.Bank}
	iconStyles={[styles.customMarginButtonWithMenuItem]}
	text={props.translate('bankAccount.connectOnlineWithPlaid')}
	onPress={() => {
	if (props.isPlaidDisabled || !props.user.validated) {
	return;
	}
	removeExistingBankAccountDetails();
	BankAccounts.openPlaidView();
	}}

App/src/libs/actions/BankAccounts.ts

Lines 65 to 66 in e9c112a

	function openPlaidView() {
	clearPlaid().then(() => ReimbursementAccount.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID));

which will show the plaid step.

If we close the plaid, we will clear the sub-step.

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

Lines 96 to 98 in e9c112a

	onExitPlaid={() => {
	BankAccounts.setBankAccountSubStep(null);
	}}

(There are several places where we try to clear the sub-step and one of them is above)

However, if we close the tab/app, it won't be called (just like component unmount won't be called). So, the sub-step value is still "plaid".

When we reopen the bank account page, because the sub-step is still "plaid", it will show the plaid step with a loading indicator. The loading indicator will keep showing until the plaid is ready, but it's never ready. I might guess that is because we use old invalid plaid data (token) that we haven't cleared before.

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

Every time we open the bank account page, we want to set the sub-step to null/empty and we should prevent passing the current sub-step to the OpenReimbursementAccountPage API call (similar to ignoreLocalCurrentStep).

App/src/pages/ReimbursementAccount/ReimbursementAccountPage.js

Lines 278 to 287 in e9c112a

	useEffect(
	() => {
	fetchData();
	return () => {
	BankAccounts.clearReimbursementAccount();
	};
	},
	// eslint-disable-next-line react-hooks/exhaustive-deps
	[],
	); // The empty dependency array ensures this runs only once after the component mounts.

App/src/pages/ReimbursementAccount/ReimbursementAccountPage.js

Lines 266 to 276 in e9c112a

	function fetchData(ignoreLocalCurrentStep) {
	// Show loader right away, as optimisticData might be set only later in case multiple calls are in the queue
	BankAccounts.setReimbursementAccountLoading(true);
	// We can specify a step to navigate to by using route params when the component mounts.
	// We want to use the same stepToOpen variable when the network state changes because we can be redirected to a different step when the account refreshes.
	const stepToOpen = getStepToOpenFromRouteParams(route);
	const subStep = achData.subStep || '';
	const localCurrentStep = achData.currentStep || '';
	BankAccounts.openReimbursementAccountPage(stepToOpen, subStep, ignoreLocalCurrentStep ? '' : localCurrentStep, policyID);
	}

useEffect(() => {
    BankAccounts.setBankAccountSubStep(null);
    fetchData(false, true);
}, []);

honestly, I think we can always pass an empty subStep to the API

[shubham1206agra]

@mountiny Can you put this on hold for VBBA refactor?