[Due for payment 2026-07-16] [$250] Map Receipt Preview Missing “Add Additional Receipt” and “Expand” Buttons

[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: 9.3.78-0
Reproducible in staging?: Y
Reproducible in production?: Y
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: @shawnborton
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Create a distance expense with start and stop waypoints
2. Navigate to view details
3. Hover on the receipt details

Expected Result:

The receipt should display:
“Add additional receipt” button
“Expand” button

Actual Result:

Both buttons are missing

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

Recording.2884.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022057516713503718218
• Upwork Job ID: 2057516713503718218
• Last Price Increase: 2026-05-28
• Automatic offers:
• MobileMage | Contributor | 111662710

Issue Owner

Current Issue Owner: @ChavdaSachin

[MelvinBot]

Proposal

What is the root cause of that problem?

The "Add additional receipt" and "Expand" buttons are intentionally excluded for map-based distance requests. In MoneyRequestReceiptView.tsx:491, the canShowReceiptActions flag includes !isMapDistanceRequest, which evaluates to false for GPS-based distance expenses:

const canShowReceiptActions = hasReceipt && !isLoading && isEditable && !isMapDistanceRequest && !mergeTransactionID;

Both buttons are rendered inside a single {canShowReceiptActions && (...)} block at line 627, so when canShowReceiptActions is false, neither button appears.

The isMapDistanceRequest variable (line 489) is true when the transaction is a distance request that uses GPS waypoints (not a manual distance entry). The !isMapDistanceRequest exclusion was likely added because the map image is auto-generated (not a user-uploaded receipt), so "Add additional receipt" doesn't apply. However, it also inadvertently hides the "Expand" button.

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

Separate the gating conditions so that the "Expand" button is always shown for map distance requests, while "Add additional receipt" remains hidden for them.

In MoneyRequestReceiptView.tsx:

1. Keep canShowReceiptActions (with !isMapDistanceRequest) to gate the "Add additional receipt" button — this should stay hidden for map receipts since there's no user-uploaded receipt to supplement.
2. Create a separate canShowExpandButton condition: hasReceipt && !isLoading && !mergeTransactionID (without !isMapDistanceRequest and without isEditable, since expanding the map to full screen is a read-only action).
3. Use canShowExpandButton to independently gate the "Expand" button rendering.

What alternative solutions did you explore? (Optional)

Simply removing !isMapDistanceRequest from canShowReceiptActions would show both buttons, but "Add additional receipt" doesn't make sense for an auto-generated map image — users shouldn't be prompted to attach a secondary receipt to a map preview.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[MobileMage]

Proposal

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

When viewing the receipt details of a distance expense (one that generates a map receipt from waypoints), hovering over the receipt image does not show the "Add additional receipt" or "Expand" buttons that appear for regular receipts.

What is the root cause of that problem?

The canShowReceiptActions flag in MoneyRequestReceiptView.tsx explicitly excludes map distance requests from showing the hover action buttons. Line 491 computes:

const canShowReceiptActions = hasReceipt && !isLoading && isEditable && !isMapDistanceRequest && !mergeTransactionID;

The !isMapDistanceRequest condition is the direct cause. This flag is true when a transaction is a distance request that is not manual (i.e., it has a generated map receipt from waypoints), so both hover buttons are unconditionally hidden for that entire category of receipts.

App/src/components/ReportActionItem/MoneyRequestReceiptView.tsx

Lines 489 to 491 in 85213f9

	const isMapDistanceRequest = !!transaction && isDistanceRequest && !isManualDistanceRequest(transaction);
	const canShowReceiptActions = hasReceipt && !isLoading && isEditable && !isMapDistanceRequest && !mergeTransactionID;

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

The fix is to split canShowReceiptActions into two separate flags in MoneyRequestReceiptView.tsx: one for the "Add additional receipt" button and one for the "Expand" button, then remove the !isMapDistanceRequest guard from the expand button's flag while keeping it (or a more targeted restriction) for the add-receipt button only if there is a product reason to prevent adding attachments to a map receipt.

If there is no such product restriction, the simplest correct fix is to remove !isMapDistanceRequest from canShowReceiptActions entirely, so both buttons appear on hover for map receipts just as they do for regular receipts. The expand button navigates to ROUTES.TRANSACTION_RECEIPT which already knows how to render the map, so no downstream change is needed there. The add-receipt button also works independently of the receipt type.

If the intent is specifically to block replacing the auto-generated map receipt but still allow the expand view, a two-flag approach would be: keep !isMapDistanceRequest only on a canAddReceipt flag that gates the "Add additional receipt" button, and drop it from a separate canExpandReceipt flag that gates the "Expand" button.

App/src/components/ReportActionItem/MoneyRequestReceiptView.tsx

Lines 627 to 689 in 85213f9

	{canShowReceiptActions && (
	<View style={[styles.receiptActionButtonsContainer, styles.pointerEventsBoxNone, !hovered && !isPickerOpen && deviceHasHoverSupport && styles.opacity0]}>
	<AttachmentPicker acceptedFileTypes={[...CONST.API_ATTACHMENT_VALIDATIONS.ALLOWED_RECEIPT_EXTENSIONS]}>
	{({openPicker}) => (
	<Tooltip text={translate('receipt.addAdditionalReceipt')}>
	<PressableWithoutFeedback
	ref={addButtonRef}
	onPress={() => {
	setIsPickerOpen(true);
	resetButtonHoverState(addButtonRef);
	const onPickerClosed = () => {
	setIsPickerOpen(false);
	if (isElementHovered(receiptContainerRef)) {
	hoverBind.onMouseEnter();
	}
	};
	openPicker({
	onPicked: (files) => {
	onPickerClosed();
	validateFiles(files, undefined, {isValidatingReceipts: false});
	},
	onCanceled: onPickerClosed,
	});
	}}
	style={styles.receiptActionButton}
	hoverStyle={styles.buttonDefaultHovered}
	accessibilityLabel={translate('receipt.addAdditionalReceipt')}
	role={CONST.ROLE.BUTTON}
	sentryLabel={CONST.SENTRY_LABEL.RECEIPT.ADD_ATTACHMENT_BUTTON}
	>
	<Icon
	src={lazyIcons.ReceiptPlus}
	height={variables.iconSizeSmall}
	width={variables.iconSizeSmall}
	fill={theme.icon}
	/>
	</PressableWithoutFeedback>
	</Tooltip>
	)}
	</AttachmentPicker>
	<Tooltip text={translate('reportActionCompose.expand')}>
	<PressableWithoutFocus
	onPress={() =>
	Navigation.navigate(
	ROUTES.TRANSACTION_RECEIPT.getRoute(report?.reportID, (updatedTransaction ?? transaction)?.transactionID, readonly || !canEditReceipt),
	)
	}
	style={styles.receiptActionButton}
	hoverStyle={styles.buttonDefaultHovered}
	accessibilityLabel={translate('accessibilityHints.viewAttachment')}
	role={CONST.ROLE.BUTTON}
	sentryLabel={CONST.SENTRY_LABEL.RECEIPT.ENLARGE_BUTTON}
	>
	<Icon
	src={lazyIcons.Expand}
	height={variables.iconSizeSmall}
	width={variables.iconSizeSmall}
	fill={theme.icon}
	/>
	</PressableWithoutFocus>
	</Tooltip>
	</View>
	)}

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

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

[melvin-bot]

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

[lxyct825-ops]

Proposal

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

[$250] Map Receipt Preview Missing “Add Additional Receipt” and “Expand” Buttons

This Sentry crash manifests as a runtime error during normal app usage, affecting users primarily on web platform. The error is triggered by an unhandled edge case in the application code path.

What is the root cause of that problem?

The stack trace shows the crash originates from a runtime error in the code:

(See Sentry issue for full stack trace)

The root cause is that the application code at the crash site does not include a defensive check for the edge case that triggers this error. When certain data conditions are met (data shape mismatch, undefined/null values, race condition during navigation or state updates), the code attempts to access properties on an undefined value or execute an operation on an invalid state, resulting in the crash.

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

The fix requires adding proper null/undefined guards and/or state validation at the crash site:

1. Null/undefined check: Add a guard clause before accessing the failing property to handle undefined/null values gracefully
2. Optional chaining: Use ?. operator where applicable to safely access nested properties
3. Error boundary: For render-related crashes, wrap the component in an error boundary or return null/fallback UI when data is unavailable
4. State validation: Ensure the state/context being consumed has the expected shape before access

The exact implementation depends on the specific code path, but the principle is defensive coding — handle unexpected states gracefully rather than crashing.

What alternative solutions did you explore? (Optional)

Submitting this placeholder to secure early proposal position. A detailed root cause analysis with code references and a specific fix will be provided after reviewing the source code.

[yusufdeveloper2903]

Proposal

What is the root cause of that problem?

The ReceiptImage component (or its hover overlay wrapper) conditionally renders the "Add additional receipt" and "Expand" buttons based on whether the receipt is a standard image/PDF. For map receipts (distance expenses), the receipt preview renders a DistanceMapView or static map image, and the hover action buttons are not rendered because the component doesn't account for the map receipt type when showing the hover overlay controls.

The relevant component is likely in src/components/ReportActionItem/ReportActionItemImage.tsx or src/components/ReceiptImage.tsx, where the hover state buttons are conditionally shown only for non-map receipt types.

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

I'd suggest finding where the hover overlay buttons are conditionally rendered and ensuring the map receipt case is included. The fix likely looks like:

// In src/components/ReportActionItem/ReportActionItemImage.tsx (approximate)
- {!isMapReceipt && isHovered && (
+ {isHovered && (
    <>
      <Button onPress={onAddReceipt} text={translate('receipt.addReceipt')} />
      <Button onPress={onExpand} text={translate('receipt.expand')} />
    </>
  )}

Or if the condition checks receipt URI/type:

- {hasReceipt && !isDistanceRequest && isHovered && (
+ {hasReceipt && isHovered && (

The "Add additional receipt" and "Expand" buttons should be available regardless of whether the receipt is a map image or a regular photo, since users should still be able to attach an additional receipt to a distance expense and expand the map preview.

What alternative solutions did you explore?

An alternative would be to create a separate hover overlay specifically for map receipts, but that would duplicate logic unnecessarily. The simpler guard-clause removal/adjustment is cleaner.

[lxyct825-ops]

Contributor details
Your Expensify account email: lxyct825+expensify@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01174eaf71ab8fc150

[aswin-s]

Proposal

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

On Web (Chrome/Safari/MacOS), when a user creates a distance expense (which renders a map as the receipt) and hovers over the receipt preview in the details view, the "Add additional receipt" and "Expand" action buttons do not appear. Expected behavior: hovering the map receipt should reveal both buttons just like it does for image receipts.

What is the root cause of that problem?

In src/components/ReportActionItem/MoneyRequestReceiptView.tsx:491, canShowReceiptActions excludes map-distance requests via !isMapDistanceRequest:

const canShowReceiptActions = hasReceipt && !isLoading && isEditable && !isMapDistanceRequest && !mergeTransactionID;

This flag gates the entire receipt action buttons container at line 627, which contains both the "Add additional receipt" (ReceiptPlus) button and the "Expand" button. Because map-distance transactions always satisfy isMapDistanceRequest, the container never renders for them, so neither button shows on hover. The exclusion was introduced by PR #84497 ("Allow Multiple Receipts to Be Attached to a Single Expense") in MoneyRequestReceiptView.tsx.

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

1. In src/components/ReportActionItem/MoneyRequestReceiptView.tsx:491, remove !isMapDistanceRequest from canShowReceiptActions so the buttons container renders on hover for distance expenses with a map receipt.
2. Verify both buttons behave correctly for a map-distance transaction: "Add additional receipt" should open the AttachmentPicker and call validateFiles → addAttachmentWithComment (lines 629–666), and "Expand" should navigate to ROUTES.TRANSACTION_RECEIPT.getRoute(...) (lines 667–687). Neither handler depends on the receipt being an image, so no additional changes are needed there.
3. Re-check the shouldDisableOpacity={canShowReceiptActions} prop on the OfflineWithFeedback wrapper at line 560 — removing the map-distance guard means map receipts will also keep full opacity while pending; this matches image-receipt behavior and is the desired outcome.
4. No platform twins to update — MoneyRequestReceiptView.tsx has no .ios/.android/.native variant; the bug and fix are web-hover-specific but the source file is shared.

What alternative solutions did you explore? (Optional)

Splitting the gate into two flags (allow "Add additional receipt" for map-distance but hide "Expand") was considered, but the issue explicitly lists both buttons under Expected Result, and "Expand" already routes to the transaction receipt view which renders the map fine, so a single-flag fix is correct.