[Due for payment 2025-12-19] [$250] [DEV] - App crash when reloading assign company card 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: DEV - v9.2.66-1
Reproducible in staging?:
Reproducible in production?:
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: @hungvu193
Slack conversation (hyperlinked to channel name): #expensify_bugs

Action Performed:

1. Go to workspace > company card.
2. Click assign card.
3. Reload the page.

Expected Result:

Page should updated without any issues.

Actual Result:

App crashed.

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
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Screen.Recording.2025-12-02.at.10.11.05.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021997058600798922771
• Upwork Job ID: 1997058600798922771
• Last Price Increase: 2025-12-05
• Automatic offers:
• mkzie2 | Contributor | 109745852

Issue Owner

Current Issue Owner: @luacmartins

[melvin-bot]

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

[mkzie2]

Proposal

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

App crashed.

What is the root cause of that problem?

The card feed contains the letter #:

App/src/types/onyx/CardFeeds.ts

Line 11 in 4f70ebf

type CompanyCardFeedWithDomainID = `${CompanyCardFeed}${typeof CONST.COMPANY_CARD.FEED_KEY_SEPARATOR}${string}`;

And it's not URI encoded when navigating:

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx

Line 169 in 4f70ebf

Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_ASSIGN_CARD.getRoute(policyID, selectedFeed)));

So the assign card page will have URL like this:

/workspaces/6919F3901F246194/company-cards/plaid.ins_127991#20979184/assign-card

When reloading, browser will read this URL as page /workspaces/6919F3901F246194/company-cards/plaid.ins_127991, and highlighting the element with ID of 20979184/assign-card. And this route doesn't exist in code base, lead to app crash.

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

We should encodeURIComponent for card feed in WORKSPACE_COMPANY_CARDS_ASSIGN_CARD route

getRoute: (policyID: string, feed: string, backTo?: string) => getUrlWithBackToParam(`workspaces/${policyID}/company-cards/${encodeURIComponent(feed)}/assign-card`, backTo),

App/src/ROUTES.ts

Line 2146 in 4f70ebf

getRoute: (policyID: string, feed: string, backTo?: string) => getUrlWithBackToParam(`workspaces/${policyID}/company-cards/${feed}/assign-card`, backTo),

Note that we already used decodeURIComponent here

App/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx

Line 31 in 4f70ebf

const feed = decodeURIComponent(route.params?.feed) as CompanyCardFeedWithDomainID;

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[abbasifaizan70]

Proposal

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

App crashed.

What is the root cause of that problem?

There are three root causes:

Issue 1 - Year Picker Navigation:
The root cause is that YearPickerModal has shouldHandleNavigationBack={true}, which causes the Modal component to call window.history.back() when the modal closes. Since YearPickerModal is a nested modal (opened from within DatePickerModal, which is inside a PopoverWithMeasuredContent), this navigation back action navigates to an invalid route, triggering the "Hmm... it's not here" error page.

Issue 2 - Page Reload Crash:
When the page reloads, the Onyx state (ONYXKEYS.ASSIGN_CARD) is cleared, but the navigation state persists. The AssignCardFeedPage component tries to render steps that expect the assign card state to exist, causing crashes when accessing properties like assignCard?.currentStep or assignCard?.data?.bankName.

Issue 3 - Invalid Route with Special Characters:
The feed parameter in the route generation is not URL-encoded. When feeds contain special characters like dots (e.g., plaid.ins_109511), the router may misinterpret the path, causing "Cannot GET" errors. The route /workspaces/:policyID/company-cards/plaid.ins_109511/assign-card is not properly encoded, leading to routing issues.

Looking at the code:

In App/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx (line 67):

<Modal
    type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
    isVisible={isVisible}
    onClose={() => onClose?.()}
    onModalHide={onClose}
    shouldHandleNavigationBack  // ← Issue 1: causes invalid navigation
    shouldUseCustomBackdrop
    onBackdropPress={onClose}
    enableEdgeToEdgeBottomSafeAreaPadding
>

In App/src/components/Modal/index.tsx (lines 52-57, 86-88):
When shouldHandleNavigationBack is true, the Modal:

1. Pushes a state to window.history when shown
2. Calls window.history.back() when hidden

Since YearPickerModal is nested, this navigation back goes to an invalid route.

In App/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx:
The component reads from ONYXKEYS.ASSIGN_CARD but doesn't reinitialize the state when it's missing after a page reload, causing crashes when the state is undefined.

In App/src/ROUTES.ts (line 2146):

getRoute: (policyID: string, feed: string, backTo?: string) => 
    getUrlWithBackToParam(`workspaces/${policyID}/company-cards/${feed}/assign-card`, backTo),

The feed parameter is not encoded, causing issues with special characters.

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

We need to make three changes to fix all three issues:

Fix 1: YearPickerModal Navigation

Set shouldHandleNavigationBack={false} in YearPickerModal since it's a nested modal and shouldn't handle navigation back on its own.

File: App/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

Change line 67:

// From:
shouldHandleNavigationBack

// To:
shouldHandleNavigationBack={false}

Complete code change:

<Modal
    type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
    isVisible={isVisible}
    onClose={() => onClose?.()}
    onModalHide={onClose}
    shouldHandleNavigationBack={false}
    shouldUseCustomBackdrop
    onBackdropPress={onClose}
    enableEdgeToEdgeBottomSafeAreaPadding
>

Fix 2: Assign Card State Reinitialization

Add logic to reinitialize the assign card state from route params when it's missing after a page reload.

File: App/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx

Add imports:

import {clearAssignCardStepAndData, setAssignCardStepAndData} from '@userActions/CompanyCards';
import {getCompanyCardFeed} from '@libs/CardUtils';

Add useEffect after line 37:

// Reinitialize assign card state if it's missing after page reload
useEffect(() => {
    if (!feed || !policyID) {
        return;
    }

    // If assign card state is missing or incomplete (missing bankName), reinitialize it from route params
    // This handles the case where the page is reloaded and Onyx state is cleared
    if (!assignCard || !assignCard.currentStep || !assignCard.data?.bankName) {
        const bankName = getCompanyCardFeed(feed);
        setAssignCardStepAndData({
            data: {
                bankName,
            },
            currentStep: CONST.COMPANY_CARD.STEP.ASSIGNEE,
            isEditing: false,
        });
    }
}, [feed, policyID, assignCard]);

Fix 3: Feed Parameter URL Encoding

Encode the feed parameter in the route generation to handle special characters.

File: App/src/ROUTES.ts

Change line 2146:

// From:
getRoute: (policyID: string, feed: string, backTo?: string) => 
    getUrlWithBackToParam(`workspaces/${policyID}/company-cards/${feed}/assign-card`, backTo),

// To:
getRoute: (policyID: string, feed: string, backTo?: string) => 
    getUrlWithBackToParam(`workspaces/${policyID}/company-cards/${encodeURIComponent(feed)}/assign-card`, backTo),

Why these fixes work:

Fix 1:

1. Prevents invalid navigation: With shouldHandleNavigationBack={false}, the Modal won't call window.history.back() when closing
2. Nested modal pattern: Nested modals shouldn't handle navigation back - the parent/page should
3. Consistent with PopoverWithMeasuredContent: The parent PopoverWithMeasuredContent already has shouldHandleNavigationBack={false} by default

Fix 2:

1. Handles page reload: Reinitializes the assign card state from route params when Onyx state is cleared
2. Prevents crashes: Ensures the state always exists before components try to access it
3. Maintains flow: Resets to the ASSIGNEE step, allowing users to continue the flow

Fix 3:

1. Handles special characters: URL-encodes the feed parameter so special characters like dots don't break routing
2. Compatible with existing code: The AssignCardFeedPage already uses decodeURIComponent to decode the parameter
3. Prevents routing errors: Ensures the router correctly parses the path with encoded parameters

Demo

Screen.Recording.2025-12-03.at.12.24.12.AM.mov

[lorretheboy]

Proposal

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

App crash when reloading assign company card page

What is the root cause of that problem?

The company card feed identifiers contain a # character as a separator (defined in CONST.COMPANY_CARD.FEED_KEY_SEPARATOR = '#'). For example: plaid.ins_123441#20232423

App/src/CONST/index.ts

Line 3398 in ae0856d

FEED_KEY_SEPARATOR: '#',

When this feed identifier was used in URLs without encoding, it treates everything after the # as a URL fragment/anchor (not part of the path).
--> Crash the app

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

We need to add encodeURIComponent() to all route getters

@@ -2126,7 +2126,7 @@ const ROUTES = {
             }
 
             // eslint-disable-next-line no-restricted-syntax -- Legacy route generation
-            return getUrlWithBackToParam(`workspaces/${policyID}/company-cards/${bankName}/bank-connection`, backTo);
+            return getUrlWithBackToParam(`workspaces/${policyID}/company-cards/${encodeURIComponent(bankName)}/bank-connection`, backTo);
         },
     },
     WORKSPACE_COMPANY_CARDS_ADD_NEW: {
@@ -2143,23 +2143,23 @@ const ROUTES = {
         route: 'workspaces/:policyID/company-cards/:feed/assign-card',
 
         // eslint-disable-next-line no-restricted-syntax -- Legacy route generation
-        getRoute: (policyID: string, feed: string, backTo?: string) => getUrlWithBackToParam(`workspaces/${policyID}/company-cards/${feed}/assign-card`, backTo),
+        getRoute: (policyID: string, feed: string, backTo?: string) => getUrlWithBackToParam(`workspaces/${policyID}/company-cards/${encodeURIComponent(feed)}/assign-card`, backTo),
     },
     WORKSPACE_COMPANY_CARD_DETAILS: {
         route: 'workspaces/:policyID/company-cards/:bank/:cardID',
 
         // eslint-disable-next-line no-restricted-syntax -- Legacy route generation
-        getRoute: (policyID: string, cardID: string, bank: string, backTo?: string) => getUrlWithBackToParam(`workspaces/${policyID}/company-cards/${bank}/${cardID}`, backTo),
+        getRoute: (policyID: string, cardID: string, bank: string, backTo?: string) => getUrlWithBackToParam(`workspaces/${policyID}/company-cards/${encodeURIComponent(bank)}/${cardID}`, backTo),
     },
     WORKSPACE_COMPANY_CARD_NAME: {
         route: 'workspaces/:policyID/company-cards/:bank/:cardID/edit/name',
-        getRoute: (policyID: string, cardID: string, bank: string) => `workspaces/${policyID}/company-cards/${bank}/${cardID}/edit/name` as const,
+        getRoute: (policyID: string, cardID: string, bank: string) => `workspaces/${policyID}/company-cards/${encodeURIComponent(bank)}/${cardID}/edit/name` as const,
     },
     WORKSPACE_COMPANY_CARD_EXPORT: {
         route: 'workspaces/:policyID/company-cards/:bank/:cardID/edit/export',
         getRoute: (policyID: string, cardID: string, bank: string, backTo?: string) =>
             // eslint-disable-next-line no-restricted-syntax -- Legacy route generation
-            getUrlWithBackToParam(`workspaces/${policyID}/company-cards/${bank}/${cardID}/edit/export`, backTo, false),
+            getUrlWithBackToParam(`workspaces/${policyID}/company-cards/${encodeURIComponent(bank)}/${cardID}/edit/export`, backTo, false),
     },
     WORKSPACE_EXPENSIFY_CARD: {
         route: 'workspaces/:policyID/expensify-card',

App/src/ROUTES.ts

Line 48 in c430d52

const ROUTES = {

Add decoding for bankName parameter in these 2 places

    const decodedBankNameFromRoute = bankNameFromRoute ? decodeURIComponent(bankNameFromRoute) : undefined;
    const bankName = feed ? getBankName(getCompanyCardFeed(feed)) : (decodedBankNameFromRoute ?? addNewCard?.data?.plaidConnectedFeed ?? selectedBank);

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

Line 55 in a60674a

const bankName = feed ? getBankName(getCompanyCardFeed(feed)) : (bankNameFromRoute ?? addNewCard?.data?.plaidConnectedFeed ?? selectedBank);

    const decodedBankNameFromRoute = bankNameFromRoute ? decodeURIComponent(bankNameFromRoute) : undefined;
    const bankName = feed ? getBankName(getCompanyCardFeed(feed)) : (decodedBankNameFromRoute ?? addNewCard?.data?.plaidConnectedFeed ?? selectedBank);

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

Line 59 in a60674a

const bankName = feed ? getBankName(getCompanyCardFeed(feed)) : (bankNameFromRoute ?? addNewCard?.data?.plaidConnectedFeed ?? selectedBank);

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

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