Showing company cards upgrade page in RHP when trying to assign cards

[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?: Needs Reproduction (Blocked, Credentials N/A for wells forgo)
Reproducible in production?: Needs Reproduction
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
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): #Expensify Bugs

Action Performed:

1. Connect a direct (not Plaid) company card feed on a collect workspace.
2. Wait the period of time before reauthentication is required to assign cards (usually 15 min).
3. Tap to assign a card.

Expected Result:

You're prompted to reauthenticate with the bank AND RHP on web shows page about popup window opening.

Actual Result:

You're prompted to reauthenticate with the bank but RHP shows company card upgrade page. We should only show the upgrade page if you try to add a second card feed on a collect workspace, not to assign a card.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @yuwenmemon

[melvin-bot]

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

[melvin-bot]

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

[MobileMage]

🚨 Edited by proposal-police: This proposal was edited at 2026-01-28 21:55:27 UTC.

Proposal

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

On a Collect workspace that already has a direct (non-Plaid) company card feed connected, when a user tries to assign a card that requires reauthentication (after the ~15 min expiry), the RHP shows the company card upgrade page instead of the bank reauthentication flow. The upgrade page should only appear when trying to add a second card feed, not when assigning or reauthenticating a card on an existing feed.

What is the root cause of that problem?

The BankConnection component serves two distinct flows: adding a new card feed and assigning a card (which may require reauthenticating an existing feed). The component distinguishes between these flows using the feed prop — when feed is present, the user is in the assign card flow, triggered through BrokenCardFeedConnectionPage to reauthenticate an existing feed rather than add a new one.

The problem is that the isBlockedToAddNewFeeds guard is applied unconditionally across the entire component, without considering which flow is active. This manifests in three places.

First, a useEffect in both platform files fires a hard redirect to the upgrade page whenever isBlockedToAddNewFeeds is true, regardless of whether the user is assigning a card or adding a feed:

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

Lines 85 to 92 in 6a49844

	useEffect(() => {
	if (!policyID || !isBlockedToAddNewFeeds) {
	return;
	}
	Navigation.navigate(ROUTES.WORKSPACE_UPGRADE.getRoute(policyID, CONST.UPGRADE_FEATURE_INTRO_MAPPING.companyCards.alias, ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID)), {
	forceReplace: true,
	});
	}, [isBlockedToAddNewFeeds, policyID]);

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

Lines 76 to 83 in 6a49844

	useEffect(() => {
	if (!policyID || !isBlockedToAddNewFeeds) {
	return;
	}
	Navigation.navigate(ROUTES.WORKSPACE_UPGRADE.getRoute(policyID, CONST.UPGRADE_FEATURE_INTRO_MAPPING.companyCards.alias, ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID)), {
	forceReplace: true,
	});
	}, [isBlockedToAddNewFeeds, policyID]);

Second, the main effect in the web version includes isBlockedToAddNewFeeds as an early-return condition, which prevents the bank connection window from opening even during the assign card flow:

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

Line 119 in 6a49844

if ((!url && !isPlaid) || isOffline || isNewFeedHasError || isAllFeedsResultLoading || isBlockedToAddNewFeeds) {

Third, the rendering logic uses isBlockedToAddNewFeeds to decide whether to show the bank connection UI or a loading spinner. On web, getContent() falls through to the ActivityIndicator when isBlockedToAddNewFeeds is true:

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

Line 204 in 6a49844

if (!isPlaid && !isAllFeedsResultLoading && !isBlockedToAddNewFeeds) {

On native, the same flag controls whether the WebView renders or the ActivityIndicator shows:

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

Line 172 in 6a49844

{!!url && !isConnectionCompleted && !isPlaid && !isNewFeedHasError && !isAllFeedsResultLoading && !isBlockedToAddNewFeeds && (

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

Line 188 in 6a49844

{(isAllFeedsResultLoading || isBlockedToAddNewFeeds || isConnectionCompleted || isPlaid) && !isNewFeedHasError && (

In all three locations, the feed prop — which clearly signals the assign card flow — is never consulted. So a Collect workspace user reauthenticating an existing card feed gets treated identically to someone trying to add a second feed, and is incorrectly bounced to the upgrade page.

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

The fix is to make every isBlockedToAddNewFeeds check feed-aware. When the feed prop is present, the user is reauthenticating an existing feed and the upgrade gate should be skipped entirely. The concept is simple: replace isBlockedToAddNewFeeds with isBlockedToAddNewFeeds && !feed wherever it acts as a gate, so that the blocking logic only applies to the "add new feed" flow.

In src/pages/workspace/companyCards/BankConnection/index.tsx (web):

 useEffect(() => {
-    if (!policyID || !isBlockedToAddNewFeeds) {
+    if (!policyID || !isBlockedToAddNewFeeds || feed) {
         return;
     }
     ...
-}, [isBlockedToAddNewFeeds, policyID]);
+}, [isBlockedToAddNewFeeds, policyID, feed]);
 ...
 useEffect(() => {
-    if ((!url && !isPlaid) || isOffline || isNewFeedHasError || isAllFeedsResultLoading || isBlockedToAddNewFeeds) {
+    if ((!url && !isPlaid) || isOffline || isNewFeedHasError || isAllFeedsResultLoading || (isBlockedToAddNewFeeds && !feed)) {
         return;
     }
     ...
-    if (!isPlaid && !isAllFeedsResultLoading && !isBlockedToAddNewFeeds) {
+    if (!isPlaid && !isAllFeedsResultLoading && (!isBlockedToAddNewFeeds || !!feed)) {

In src/pages/workspace/companyCards/BankConnection/index.native.tsx (native):

 useEffect(() => {
-    if (!policyID || !isBlockedToAddNewFeeds) {
+    if (!policyID || !isBlockedToAddNewFeeds || feed) {
         return;
     }
     ...
-}, [isBlockedToAddNewFeeds, policyID]);
+}, [isBlockedToAddNewFeeds, policyID, feed]);
 ...
-{!!url && !isConnectionCompleted && !isPlaid && !isNewFeedHasError && !isAllFeedsResultLoading && !isBlockedToAddNewFeeds && (
+{!!url && !isConnectionCompleted && !isPlaid && !isNewFeedHasError && !isAllFeedsResultLoading && (!isBlockedToAddNewFeeds || !!feed) && (
 ...
-{(isAllFeedsResultLoading || isBlockedToAddNewFeeds || isConnectionCompleted || isPlaid) && !isNewFeedHasError && (
+{(isAllFeedsResultLoading || (isBlockedToAddNewFeeds && !feed) || isConnectionCompleted || isPlaid) && !isNewFeedHasError && (

What alternative solutions did you explore? (Optional)

[samranahm]

Proposal

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

When trying to assign a company card after reauthentication is required (usually after 15 minutes), the RHP incorrectly shows the company cards upgrade page instead of allowing the card assignment flow to proceed. The upgrade page should only be shown when trying to add a second card feed on a Collect workspace, not when assigning a card from an existing feed.

What is the root cause of that problem?

The BankConnection component checks isBlockedToAddNewFeeds to determine if it should navigate to the upgrade page, but this check runs regardless of whether the user is adding a new feed or assigning a card. When isBlockedToAddNewFeeds is true (Collect plan with existing feed), the component navigates to the upgrade page even during the assign card flow, which should be allowed.

The component can distinguish between these flows using the feed prop - when feed exists, it's the assign card flow; when feed is undefined, it's the add new feed flow.

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

Update the BankConnection component (both web and native versions) to only check isBlockedToAddNewFeeds when adding a new feed, not when assigning a card. The component already receives a feed prop that distinguishes between flows
When feed exists, it's the assign card flow; when feed is undefined, it's the add new feed flow.

Changes in BankConnection/index.tsx:

1. Update the upgrade page navigation useEffect to skip when assigning a card:

useEffect(() => {
    // Only show upgrade page when adding a new feed, not when assigning a card
    if (!policyID || !isBlockedToAddNewFeeds || feed) {
        return;
    }
    Navigation.navigate(ROUTES.WORKSPACE_UPGRADE.getRoute(...), {
        forceReplace: true,
    });
}, [isBlockedToAddNewFeeds, policyID, feed]);

2. Update the main bank connection useEffect to only block when adding a new feed:

useEffect(() => {
    // Only block when adding a new feed, not when assigning a card
    const shouldBlock = (!url && !isPlaid) || isOffline || isNewFeedHasError || isAllFeedsResultLoading || (!feed && isBlockedToAddNewFeeds);
    if (shouldBlock) {
        return;
    }
    // ... rest of the flow
}, [...]);

3. Update getContent to allow bank connection UI when assigning a card:

// Show pending bank view when not blocked (or when assigning a card)
if (!isPlaid && !isAllFeedsResultLoading && (!isBlockedToAddNewFeeds || feed)) {
    return <BlockingView ... />;
}

Changes in BankConnection/index.native.tsx (native):

Similar changes to the native version:

1. Update upgrade page navigation useEffect to skip when feed exists
2. Update WebView rendering condition: (!isBlockedToAddNewFeeds || feed)
3. Update loading indicator condition: (!feed && isBlockedToAddNewFeeds)

This ensures that Collect plan workspaces can still assign cards from their existing feed, while preventing them from adding additional feeds.

What alternative solutions did you explore? (Optional)

None

[hungvu193]

@MobileMage @samranahm How do you guys connect the direct feed (not plaid) ?

[samranahm]

@hungvu193 There's probably no direct way to connect direct feed (not plaid) if we don't have access to it, But we'll ping joekaufmanexpensify in PR to run ad-hoc build and test the changing with real account.

[hungvu193]

I see. Thanks I'll add some onyx mock data to test the proposals.

[hungvu193]

Still evaluating proposals