[HOLD for payment 2024-12-20] [$250] Screen briefly flashes Chase feed page after connecting Amex feed and back to expensify

[m-natarajan]

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:
Reproducible in staging?:
Reproducible in production?:
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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: @joekaufmanexpensify
Slack conversation (hyperlinked to channel name): ts_external_expensify_expense

Action Performed:

1. Enable company card in workspace
2. Click Add card and choose Amex bank
3. Connect to Amex using Direct feed
4. Click Return to Expensify

Expected Result:

User returned to company cards page

Actual Result:

Screen briefly flashes Chase feed page

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

2024-12-02_16-35-27.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021866127944349300492
• Upwork Job ID: 1866127944349300492
• Last Price Increase: 2024-12-09

Issue Owner

Current Issue Owner: @

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.

[dukenv0307]

I already worked on company card project so I would like to take it as C+

[joekaufmanexpensify]

We're discussing in the thread that maybe this will be fixed elsewhere

[DylanDylann]

@mountiny @joekaufmanexpensify I tried to reproduce this bug from my side. I used a mock response from here. Let's see this video

Screen.Recording.2024-12-06.at.23.45.19.mov

When clicking mock data (it means that when BE returns data) the App opens the bank connection URL again. The RCA of this problem:

App/src/pages/workspace/companyCards/addNew/BankConnection/index.tsx

Lines 72 to 92 in 96f7fdd

	useEffect(() => {
	if (!url) {
	return;
	}
	if (isNewFeedConnected) {
	customWindow?.close();
	if (newFeed) {
	Card.updateSelectedFeed(newFeed, policyID ?? '-1');
	}
	Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID ?? '-1'));
	return;
	}
	if (isBankConnectionCompleteRoute) {
	customWindow?.close();
	return;
	}
	customWindow = openBankConnection(url);
	}, [isNewFeedConnected, newFeed, isBankConnectionCompleteRoute, policyID, url]);
	return (
	<ScreenWrapper testID={BankConnection.displayName}>

When isNewFeedConnected is true, we close the connection URL and navigate to the company card page. But this useEffect is triggered again before navigating --> the URL is opened again. You guys can see my log on the above video for more detail

I suspect that this was caused by this PR
cc @allgandalf @VickyStash

[VickyStash]

Hi, I'm Viktoryia from Callstack - expert contributor group - and I would like to work on this issue.

[VickyStash]

Not overdue, staring to work on this one.

[VickyStash]

When clicking mock data (it means that when BE returns data) the App opens the bank connection URL again.

@DylanDylann I've tested your flow and I guess in your case the window with URL is opened again cause this check in the useEffect doesn't work for you, because you used the mocked data:

App/src/pages/workspace/companyCards/addNew/BankConnection/index.tsx

Lines 84 to 87 in 59193c6

	if (isBankConnectionCompleteRoute) {
	customWindow?.close();
	return;
	}

App/src/pages/workspace/companyCards/addNew/BankConnection/index.tsx

Line 42 in 59193c6

const isBankConnectionCompleteRoute = currentUrl.includes(ROUTES.BANK_CONNECTION_COMPLETE);

So there should be no problem like this for the real users, as they will have isBankConnectionCompleteRoute true. Let me know what you think!

But let me try to check what can cause the bug initially reported in this issue.

[VickyStash]

I was able to reproduce it on ios without even connecting to the banks, with the next steps:

1. start the feed setup -> select Chase bank -> wait for webview open -> go back
2. start the feed setup -> select Amex bank -> wait for webview open -> go back -> for a ms (really quickly, watch the attached video in slow motion) you will see the Chase login page

shortened_video.mp4

[melvin-bot]

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

[melvin-bot]

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

[DylanDylann]

@VickyStash Thanks for your information. Just want to confirm this point:

So there should be no problem like this for the real users, as they will have isBankConnectionCompleteRoute true. Let me know what you think!

I think currentUrl will not change when connecting successful. isBankConnectionCompleteRoute seems outdated now. More detail here

[VickyStash]

I think I was able to get rid of the screen flashing if I replace Modal with ScreenWrapper here, but trying to know why we needed Modal here:

App/src/pages/workspace/companyCards/addNew/BankConnection/index.native.tsx

Lines 72 to 77 in 7180a37

	<Modal
	onClose={handleBackButtonPress}
	fullscreen
	isVisible={isWebViewOpen}
	type={CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE}
	>

[VickyStash]

The PR has been opened for the review!

[joekaufmanexpensify]

Woooo, TY!

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.75-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix screen briefly flashes Chase feed page after connecting Amex feed and back to expensify #53863

If no regressions arise, payment will be issued on 2024-12-20. 🎊

For reference, here are some details about the assignees on this issue:

• @VickyStash does not require payment (Contractor)
• @DylanDylann requires payment (Needs manual offer from BZ)

[melvin-bot]

@DylanDylann @joekaufmanexpensify @DylanDylann The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[mountiny]

No regression test is required imho, there was not a specific PR that would cause this issue its was a design fault. pyaments will be in total for the project