[Due for payment 2025-12-09] [$250] Create expense modal shows when loading Company cards page

[Valforte]

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: 9.2.48-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
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: @aimane-chnaif at #68983 (comment)
Slack conversation (hyperlinked to channel name):

Action Performed:

1. Go to staging.new.expensify.com
2. Create a workspace.
3. Go to workspace settings > More features.
4. Enable Per diem.
5. Upgrade workspace when prompted.
6. Open FAB > Create expense.
7. Use cursor to swipe to Distance tab, then to Per diem tab.
8. Click Edit per diem rates.
9. Select "Company cards" section

Expected Result:

Company cards page is shown

Actual Result:

Create expense modal shows while loading Company cards page.

Workaround:

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

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021987968248664688491
• Upwork Job ID: 1987968248664688491
• Last Price Increase: 2025-11-10
• Automatic offers:
• aimane-chnaif | Reviewer | 109536993

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @twisterdotcom

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Current assignee @aimane-chnaif is eligible for the External assigner, not assigning anyone new.

[Eskalifer1]

🚨 Edited by proposal-police: This proposal was edited at 2025-11-14 10:11:47 UTC.

Proposal

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

Closed RHP is visible when you go to the “Company Cards” page.

What is the root cause of that problem?

Some pages is not using ScreenWraper(only AccessOrNotFoundWrapper), so they dont get a background and closed RHP is visible during isLoading state:

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

Lines 171 to 175 in 906641b

	<AccessOrNotFoundWrapper
	policyID={route.params.policyID}
	featureName={CONST.POLICY.MORE_FEATURES.ARE_COMPANY_CARDS_ENABLED}
	>
	{isLoading && (

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPage.tsx

Lines 64 to 73 in 906641b

	return (
	<AccessOrNotFoundWrapper
	accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
	policyID={route.params.policyID}
	featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
	>
	{renderContent()}
	</AccessOrNotFoundWrapper>
	);
	}

For comparison, here is how it is done on other pages, which is why this bug does not occur here:

App/src/pages/workspace/reports/WorkspaceReportsPage.tsx

Lines 169 to 180 in 906641b

	return (
	<AccessOrNotFoundWrapper
	policyID={policyID}
	accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
	>
	<ScreenWrapper
	enableEdgeToEdgeBottomSafeAreaPadding
	style={[styles.defaultModalContainer]}
	testID={WorkspaceReportFieldsPage.displayName}
	shouldShowOfflineIndicatorInWideScreen
	offlineIndicatorStyle={styles.mtAuto}
	>

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

We should add ScreenWrapper for these pages(Since this component has a background, if it is not on the page, then the page also has no background.)

I think we need to check all pages within Workspace, and add this component to those pages where it is not present at all, and on those pages where it is present (for example, within WorkspacePageWithSections), make sure that all content is within these pages (including loading state).

Or, if for some reason we cannot wrap the pages in ScreenWrapper, as this may break the styles for the entire page, we need to use FullScreenLoadingIndicator instead of ActivityIndicator, as this component is designed to be displayed on the entire page and also has a background, but we will need to additionally pass opacity: 1:

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

Lines 177 to 182 in 5046eb4

	{isLoading && (
	<ActivityIndicator
	size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
	style={styles.flex1}
	/>
	)}

{isLoading && (
                <FullScreenLoadingIndicator
                    iconSize={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
                    style={[styles.flex1, styles.opacity1]}
                />
            )}

Translated with DeepL.com (free version)

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.

[mukhrr]

🚨 Edited by proposal-police: This proposal was edited at 2025-11-13 18:31:25 UTC.

Proposal

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

When there is no per diem rate, we show per diem tab when creating an expense

What is the root cause of that problem?

Currently we don't validate to show per diem tab when createing expense if there is per diem or not

App/src/libs/PolicyUtils.ts

Lines 94 to 96 in a7d994c

	function getActivePoliciesWithExpenseChatAndPerDiemEnabled(policies: OnyxCollection<Policy> | null, currentUserLogin: string | undefined): Policy[] {
	return getActivePoliciesWithExpenseChat(policies, currentUserLogin).filter((policy) => policy?.arePerDiemRatesEnabled);
	}

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

1. We can either fix canSubmitPerDiemExpenseFromWorkspace and filter getActivePoliciesWithExpenseChatAndPerDiemEnabled with that

/** Whether the user can submit per diem expense from the workspace */
function canSubmitPerDiemExpenseFromWorkspace(policy: OnyxEntry<Policy>): boolean {
    const perDiemCustomUnit = getPerDiemCustomUnit(policy);
    return !!policy?.isPolicyExpenseChatEnabled && !isEmptyObject(perDiemCustomUnit) && !!perDiemCustomUnit?.enabled && !isEmptyObject(perDiemCustomUnit.rates);
}

function getActivePoliciesWithExpenseChatAndPerDiemEnabled(policies: OnyxCollection<Policy> | null, currentUserLogin: string | undefined): Policy[] {
    return getActivePoliciesWithExpenseChat(policies, currentUserLogin).filter((policy) => canSubmitPerDiemExpenseFromWorkspace(policy));
}

Or just update getActivePoliciesWithExpenseChatAndPerDiemEnabled to filter out tab if policy doesn't have per diem rates yet

function getActivePoliciesWithExpenseChatAndPerDiemEnabled(policies: OnyxCollection<Policy> | null, currentUserLogin: string | undefined): Policy[] {
    return getActivePoliciesWithExpenseChat(policies, currentUserLogin).filter((policy) => {
        const perDiemCustomUnit = getPerDiemCustomUnit(policy);

        return policy?.arePerDiemRatesEnabled && !isEmptyObject(perDiemCustomUnit?.rates);
    });
}

What alternative solutions did you explore? (Optional)

And ff we concern about filtering getActivePoliciesWithExpenseChatAndPerDiemEnabled can affect other places, we can create a new util which filters out like above and use special for IOURequestStartPage.tsx where we show per diem tab

[Valforte]

@aimane-chnaif can you review the current proposals?