[HOLD for payment 2024-03-26] [$500] BA - Not able to add Regions BA, modal redirects to initial Bank account page

[izarutskaya]

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: v1.4.50-2
Reproducible in staging?: Y
Reproducible in production?: Unable to check
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4413762
Email or phone of affected tester (no customers): applausetester+vd_mweb031124@applause.expensifail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

Pre-requisite: user must be logged in on mWeb/Safari (iPhone) and must have created a Workspace.

1. Go to Workspace > Bank account.
2. Select Connect online with Plaid.
3. Select Regions bank and use the testing credentials.

Expected Result:

The page to confirm the account should be displayed.

Actual Result:

The modal redirects to the initial add bank account 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

Bug6409977_1710179297819.Lswv1474_1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a531e07d9e5f1c52
• Upwork Job ID: 1767269083257348096
• Last Price Increase: 2024-03-11
• Automatic offers:
• shubham1206agra | Reviewer | 0
• abzokhattab | Contributor | 0

[melvin-bot]

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

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

[izarutskaya]

@chiragsalian 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.

[dylanexpensify]

commented here

[chiragsalian]

I'm pretty sure this is external since it's happening only on mWeb. Assigning external label.

[melvin-bot]

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

[melvin-bot]

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

[abzokhattab]

Proposal

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

Not able to add Regions BA, modal redirects to initial Bank account page

What is the root cause of that problem?

The PlaidLink opens the connection multiple times because of the following useEffect, since the onError is a function that doesn't have dependencies causing it to rerender:

App/src/components/PlaidLink/index.tsx

Lines 39 to 54 in 8aec07c

	useEffect(() => {
	if (error) {
	onError(error);
	return;
	}
	if (!ready) {
	return;
	}
	if (!isPlaidLoaded) {
	return;
	}
	open();
	}, [ready, error, isPlaidLoaded, open, onError]);

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

there is no need to add the onError to the dependency list of the useEffect since we already have the error object inside the dependencies list so it should call the useEffect in case the error changes:

    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [ready, error, isPlaidLoaded, open]);

this way the Plaid component behaviour will be consistent and the useEffect will not depend on whether the incoming onError prop has a dependencies list or not

also, we can remove the open function from the dependencies as well since we don't know what the dependencies of this function but this step is optional in solving our issue

POC

Screen.Recording.2024-03-13.at.12.56.53.PM.mov

[shubham1206agra]

@abzokhattab Can you mark the offending PR as this is deploy blocker?

[abzokhattab]

Does that mean its not occurring on production? As far as i can see we were not able to test it on prod

[shubham1206agra]

Yes, as per https://expensify.slack.com/archives/C01GTK53T8Q/p1710187880234419?thread_ts=1710182030.177439&cid=C01GTK53T8Q

[abzokhattab]

Thanks, honestly I am not able to find it i just checked the differences between staging and production and I see that all the changes are not related to the bank setup.

production...staging

let me know if you are able to find any

[shubham1206agra]

Can you confirm the repro of the issue on staging? And on https://36676.pr-testing.expensify.com/

[abzokhattab]

Yes, the issue is reproducible on both:

Screen.Recording.2024-03-12.at.4.07.45.AM.mov

Screen.Recording.2024-03-12.at.4.09.12.AM.mov

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@shubham1206agra] The PR that introduced the bug has been identified. Link to the PR:
• [@shubham1206agra] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@shubham1206agra] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@shubham1206agra] Determine if we should create a regression test for this bug.
• [@shubham1206agra] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@dylanexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[dylanexpensify]

Payment coming up!

[dylanexpensify]

paying out today!

[shubham1206agra]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@shubham1206agra] The PR that introduced the bug has been identified. Link to the PR:Add Personal Bank Account via Plaid flow #2746
• [@shubham1206agra] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/2746/files#r1540955125
• [@shubham1206agra] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: Not required
• [@shubham1206agra] Determine if we should create a regression test for this bug. No
• [@shubham1206agra] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@dylanexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[shubham1206agra]

@dylanexpensify I have discussed this internally here. You may close this issue when you issue the payment to other contributor as I am keeping track of payment internally and will ask to pay once the issue is resolved. Just write in the payment summary that I have not been paid yet.

[dylanexpensify]

Payment summary:

• Contributor: @bernhardoj $500
• Contributor+: @shubham1206agra $500

Please apply/request!

[dylanexpensify]

@bernhardoj please accept offer when ready and I'll pay it out!

[bernhardoj]

@dylanexpensify the offer is broken.

[dylanexpensify]

oh weird! Let me send a new one then!

[dylanexpensify]

@bernhardoj sent an invite to apply!

[bernhardoj]

@dylanexpensify applied

[dylanexpensify]

@bernhardoj sent!

[dylanexpensify]

done!

[shubham1206agra]

@dylanexpensify You can process payment here now.

[shubham1206agra]

@dylanexpensify Bump here.

[luacmartins]

@dylanexpensify seems like we missed paying @shubham1206agra

[dylanexpensify]

Ayy, on it!

[dylanexpensify]

@shubham1206agra invited you to apply 😄

[shubham1206agra]

@dylanexpensify Invitation accepted.

[dylanexpensify]

@shubham1206agra offer sent!

[shubham1206agra]

@dylanexpensify Offer accepted.

[shubham1206agra]

@dylanexpensify Bump on this

[dylanexpensify]

paying now!

[dylanexpensify]

Done!