[Due for payment 2026-03-11] [CFI] Update empty receipt section in the expense RHP

[garrettmknight]

Coming from this conversation in migrate.

Problem: We've seen many users manually uploading receipts (mostly PDFs) that could have been emailed to receipts@ and scanned/automatically matched with card transactions.

Solution: Update the empty receipt section of the RHP to educate users on the different routes for adding receipts to Expensify:

Issue Owner

Current Issue Owner: @trjExpensify

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @trjExpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO. Remember to draft any necessary HelpDot updates by following the instructions here.

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @dannymcclain (NewFeature)

[MobileMage]

Proposal

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

Users are manually uploading receipts (mostly PDFs) to expenses when they could instead email them to receipts@expensify.com or text them to 47777 for automatic scanning and matching with card transactions. The empty receipt section in the expense RHP (Right Hand Panel) only shows a clickable icon without any educational content about these alternative submission methods. This results in users missing out on faster, more convenient ways to attach receipts to their expenses.

What is the root cause of that problem?

The ReceiptEmptyState component at src/components/ReceiptEmptyState.tsx currently only renders a receipt icon with a plus symbol overlay. It has no text labels explaining what users can do or informing them about alternative methods.

Meanwhile, a ReceiptAlternativeMethods component already exists at src/components/ReceiptAlternativeMethods.tsx that displays exactly what the issue is asking for:

• "Other ways to add receipts:" header
• "Download the app to scan from your phone" option (conditionally shown if user hasn't logged into mobile app)
• "Forward receipts to receipts@expensify.com" with a mailto link
• "Add your number to text receipts to 47777" or "Text receipts to 47777 (US numbers only)" depending on whether the user has a phone number associated with their account

This component is currently only rendered in IOURequestStepScan (the dedicated receipt upload/scan page at src/pages/iou/request/step/IOURequestStepScan/index.tsx), but it is not shown in the expense RHP where users view individual expenses with empty receipt slots.

The MoneyRequestReceiptView component at src/components/ReportActionItem/MoneyRequestReceiptView.tsx renders ReceiptEmptyState when shouldShowReceiptEmptyState is true, but does not include the ReceiptAlternativeMethods component or any explanatory text.

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

1. Modify ReceiptEmptyState to display text labels when shown in the money request view context:

   • Add "Add a receipt" title text below the icon (using existing translation receipt.addReceipt)
   • Add "or drag and drop one here" subtitle on desktop only (using existing translation receipt.desktopSubtitleSingle and isMobile() check from @libs/Browser)
   • Only show these labels when the component is in money request view mode (using existing isInMoneyRequestView prop) and not in thumbnail mode (using existing isThumbnail prop)

2. Modify MoneyRequestReceiptView to include the ReceiptAlternativeMethods component:

   • Import and render ReceiptAlternativeMethods below the ReceiptEmptyState section when shouldShowReceiptEmptyState is true
   • Only show on desktop, not mobile (using isMobile() from @libs/Browser, matching the existing pattern in IOURequestStepScan where shouldHideAlternativeMethods includes an isMobile() check)

All required translations already exist in the codebase (receipt.addReceipt, receipt.desktopSubtitleSingle, and all receipt.alternativeMethods* keys), and the ReceiptAlternativeMethods component is fully implemented with proper conditional logic for showing/hiding options based on user state.