[$250] Expense - Missing pending amount in approval modal when report contains held & unheld expense

[lanitochka17]

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.3.4-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-3028/folder/13176872/41237335/1131712388
Email or phone of affected tester (no customers): sdjojsinjdosdjnojsdios@gmail.com
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Mac 26.1 / Chrome
App Component: Money Requests

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Create two expenses.
4. Open the expense report.
5. Open any expense.
6. Click Hold > More.
7. Enter reason and save it.
8. Close the report RHP.
9. On the expense report RHP, click Submit.
10. Click Approve.
    → Pop-up modal shows pending (unheld) amount and total amount - Expected.
11. Return to main workspace chat.
12. Click Approve on the expense preview.

Expected Result:

Pop-up modal will show pending amount and total amount when approving from the expense preview.

Actual Result:

Pop-up modal only shows total amount when approving from the expense preview. Pending amount is missing.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7051852_1768654832841.5.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022013475721719186938
• Upwork Job ID: 2013475721719186938
• Last Price Increase: 2026-01-27
• Automatic offers:
• etCoderDysto | Contributor | 110282593

Issue Owner

Current Issue Owner: @RachCHopkins

Issue Owner

Current Issue Owner: @RachCHopkins

[melvin-bot]

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

[etCoderDysto]

Proposal

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

Missing pending amount in approval modal when report contains held & unheld expense

What is the root cause of that problem?

We are not passing hasValidNonHeldAmount to hasNonHeldExpenses prop of ProcessMoneyReportHoldMenu here

App/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx

Lines 875 to 884 in eafbcff

	<ProcessMoneyReportHoldMenu
	nonHeldAmount={!hasOnlyHeldExpenses && hasValidNonHeldAmount ? nonHeldAmount : undefined}
	requestType={requestType}
	fullAmount={fullAmount}
	onClose={() => setIsHoldMenuVisible(false)}
	isVisible={isHoldMenuVisible}
	paymentType={paymentType}
	chatReport={chatReport}
	moneyRequestReport={iouReport}
	transactionCount={numberOfRequests}

And firstOptionText will be undefined since hasNonHeldExpenses is undefined. And first option button won't be displayed.

App/src/components/ProcessMoneyReportHoldMenu.tsx

Lines 116 to 121 in eafbcff

	<DecisionModal
	title={translate(isApprove ? 'iou.confirmApprove' : 'iou.confirmPay')}
	onClose={onClose}
	isVisible={isVisible}
	prompt={promptText}
	firstOptionText={hasNonHeldExpenses ? `${translate(isApprove ? 'iou.approveOnly' : 'iou.payOnly')} ${nonHeldAmount}` : undefined}

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

We should pass hasValidNonHeldAmount to hasNonHeldExpenses

  <ProcessMoneyReportHoldMenu
                        hasNonHeldExpenses={hasValidNonHeldAmount}
                        nonHeldAmount={!hasOnlyHeldExpenses && hasValidNonHeldAmount ? nonHeldAmount : undefined}
                        requestType={requestType}

Note: We should make similar changes where the same issue happens.

What alternative solutions did you explore? (Optional)

we can pass !hasOnlyHeldExpenses to hasNonHeldExpenses prop as we are doing for MoneyReportHeader

                    <ProcessMoneyReportHoldMenu
                        hasNonHeldExpenses={!hasOnlyHeldExpenses}

App/src/components/MoneyReportHeader.tsx

Lines 1746 to 1755 in eafbcff

	<ProcessMoneyReportHoldMenu
	nonHeldAmount={!hasOnlyHeldExpenses && hasValidNonHeldAmount ? nonHeldAmount : undefined}
	requestType={requestType}
	fullAmount={fullAmount}
	onClose={() => setIsHoldMenuVisible(false)}
	isVisible={isHoldMenuVisible}
	paymentType={paymentType}
	chatReport={chatReport}
	moneyRequestReport={moneyRequestReport}
	hasNonHeldExpenses={!hasOnlyHeldExpenses}

Note: we can use hasValidNonHeldAmount for both MoneyReportHeader and MoneyRequestReportPreviewContent if we ant to show approve only button only for positive amount only

App/src/libs/ReportUtils.ts

Lines 10748 to 10753 in eafbcff

	const hasValidNonHeldAmount =
	hasHeldExpensesLocal &&
	// For normal cases (positive amounts or IOU reports)
	(adjustedUnheldTotal >= 0 ||
	// For expense reports with negative amounts, check if amounts are meaningful
	(isExpenseReport(iouReport) && Math.abs(adjustedUnheldTotal) > 0 && Math.abs(adjustedUnheldTotal) !== Math.abs(adjustedTotal)));

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.

[yatin-italy]

Proposal

Restate the problem this issue is trying to solve.

When approving an expense report that has both held and unheld expenses from the expense preview, the approval modal shows only the total amount. It does not show the option for the pending unheld amount. When approving from inside the report, both options are shown correctly.

What is the root cause of that problem?

The earliest wrong assumption is in src/components/ProcessMoneyReportHoldMenu.tsx inside the ProcessMoneyReportHoldMenu component, where the code assumes that the truthiness of nonHeldAmount means non-held expenses exist. This is wrong because convertToDisplayString always returns a string like $0.00, which is truthy even when it should not be shown. Because the component infers state from a formatted string instead of an explicit boolean, it cannot know when the option should be displayed, and this directly causes the missing option in the preview flow.

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

• Update src/components/ProcessMoneyReportHoldMenu.tsx to accept an explicit boolean that tells if non-held expenses exist.
• Use this boolean instead of checking nonHeldAmount truthiness.
• Pass the same boolean from all call sites so behavior is consistent.

File: src/components/ProcessMoneyReportHoldMenu.tsx

type ProcessMoneyReportHoldMenuProps = {
    /** The chat report this report is linked to */
    chatReport: OnyxEntry<OnyxTypes.Report>;
    /** Full amount of expense report to pay */
    fullAmount: string;
    /** Whether modal is visible */
    isVisible: boolean;
    /** The report currently being looked at */
    moneyRequestReport: OnyxEntry<OnyxTypes.Report>;
    /** Not held amount of expense report */
    nonHeldAmount?: string;
    /** Whether there are valid non-held expenses to approve/pay */
    hasNonHeldExpenses?: boolean;
    /** Callback for closing modal */
    onClose: () => void;
    /** Type of payment */
    paymentType?: PaymentMethodType;
    /** Type of action handled */
    requestType?: ActionHandledType;
    /** Number of transaction of a money request */
    transactionCount: number;
    /** Callback for displaying payment animation on IOU preview component */
    startAnimation?: () => void;
};

const promptText = useMemo(() => {
    if (hasNonHeldExpenses) {
        return translate(isApprove ? 'iou.confirmApprovalAmount' : 'iou.confirmPayAmount');
    }
    return translate(isApprove ? 'iou.confirmApprovalAllHoldAmount' : 'iou.confirmPayAllHoldAmount', {count: transactionCount});
}, [hasNonHeldExpenses, transactionCount, translate, isApprove]);

firstOptionText={hasNonHeldExpenses ? `${translate(isApprove ? 'iou.approveOnly' : 'iou.payOnly')} ${nonHeldAmount}` : undefined}

• Pass the explicit boolean from the preview and header.

File: src/pages/home/report/MoneyRequestReportPreviewContent.tsx

<ProcessMoneyReportHoldMenu
    hasNonHeldExpenses={!hasOnlyHeldExpenses && hasValidNonHeldAmount}
    nonHeldAmount={!hasOnlyHeldExpenses && hasValidNonHeldAmount ? nonHeldAmount : undefined}
    requestType={requestType}
    fullAmount={fullAmount}
    onClose={() => setIsHoldMenuVisible(false)}
    isVisible={isHoldMenuVisible}
    paymentType={paymentType}
    chatReport={chatReport}
    moneyRequestReport={iouReport}
    transactionCount={numberOfRequests}
    startAnimation={() => {
        if (requestType === CONST.IOU.REPORT_ACTION_TYPE.APPROVE) {
            startApprovedAnimation();
        } else {
            startAnimation();
        }
    }}
/>

File: src/pages/home/report/MoneyReportHeader.tsx

<ProcessMoneyReportHoldMenu
    hasNonHeldExpenses={!hasOnlyHeldExpenses && hasValidNonHeldAmount}
    nonHeldAmount={!hasOnlyHeldExpenses && hasValidNonHeldAmount ? nonHeldAmount : undefined}
    requestType={requestType}
    fullAmount={fullAmount}
    onClose={() => setIsHoldMenuVisible(false)}
    isVisible={isHoldMenuVisible}
    paymentType={paymentType}
    chatReport={chatReport}
    moneyRequestReport={moneyRequestReport}
    startAnimation={() => {
        if (requestType === CONST.IOU.REPORT_ACTION_TYPE.APPROVE) {
            startApprovedAnimation();
        } else {
            startAnimation();
        }
    }}
    transactionCount={transactionIDs?.length ?? 0}
/>

What alternative solutions did you explore? (Optional)

• Fixing only the call site checks was not chosen because the component would still guess state from a string.
• Changing convertToDisplayString was not chosen because it would impact many other places and not fix the interface issue.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

@akinwale Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸