[$250] Per Diem expense receipt icon not displayed

[jponikarchuk]

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.54-0
Reproducible in staging?: Yes, but not reproducible with Use Staging Server Off
Reproducible in production?: No
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-16749/folder/13176674/53829876/1313414640
Email or phone of affected tester (no customers): applausetester+abr2dg@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Web
App Component: Other

Action Performed:

1. Create a per diem expense in the workspace chat
2. Open the expense report
3. Click Receipt and check the icon

Expected Result:

Per Diem expense receipt icon should displayed

Actual Result:

Per Diem expense receipt icon is not showing

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Video.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @FitseTLT

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022041774297409889091
• Upwork Job ID: 2041774297409889091
• Last Price Increase: 2026-04-08

[MelvinBot]

Proposal

What is the root cause of that problem?

The isPerDiemRequest() function in TransactionUtils/index.ts:253-263 uses Object.hasOwn(transaction, 'iouRequestType') to check whether to use the client-only iouRequestType field. This check returns true if the key exists on the object — even if its value is null or undefined. After the transaction syncs with the server, if the server response includes iouRequestType with a falsy value (e.g., null), the function short-circuits and returns false without ever reaching the reliable fallback check (comment.type === 'customUnit' && comment.customUnit.name === 'Per Diem International').

This causes isPerDiemRequest() to return false post-sync, which means EReceiptThumbnail doesn't render the CalendarSolid icon, and ReceiptImage doesn't route the transaction through the per diem rendering path.

The same Object.hasOwn pattern exists in isDistanceRequest, isScanRequest, isTimeRequest, and other type-detection functions at lines 145, 161, 190, 200, 210, 226, 241, 267, 367 — all potentially affected by the same issue.

A secondary contributing factor: hasEReceipt is set optimistically (PerDiem.ts:419) but could also be overwritten by the server response, causing the transaction to lose its eReceipt status entirely.

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

In isPerDiemRequest() (and the other request-type functions), change the guard from checking key existence to checking key value:

// Before
if (transaction && Object.hasOwn(transaction, 'iouRequestType')) {
    return transaction?.iouRequestType === CONST.IOU.REQUEST_TYPE.PER_DIEM;
}

// After
if (transaction?.iouRequestType) {
    return transaction.iouRequestType === CONST.IOU.REQUEST_TYPE.PER_DIEM;
}

This ensures that when iouRequestType is null/undefined after server sync, the function falls through to the server-side field check (comment.type + comment.customUnit.name) which is the authoritative source of truth for persisted transactions.

Apply the same fix to all the other Object.hasOwn(transaction, 'iouRequestType') call sites in TransactionUtils.

What alternative solutions did you explore? (Optional)

An alternative would be to explicitly delete the iouRequestType key from the transaction in the successData callback, ensuring it doesn't persist after server sync. However, this is more fragile since Pusher updates could re-introduce the field. The proposed fix makes the detection logic robust regardless of what the server returns.

Investigation details

Rendering chain for per diem receipt icon:

1. MoneyRequestReceiptView → checks hasReceipt() (which includes hasEReceipt) → renders ReportActionItemImage
2. ReportActionItemImage:144 → isEReceipt = !hasReceiptSource(transaction) && hasEReceipt(transaction) → sets propsObj.isPerDiemRequest at line 180
3. ReceiptImage:191-214 → routes isEReceipt && isPerDiemRequest to EReceiptThumbnail
4. EReceiptThumbnail:112-119 → renders CalendarSolid icon only when internal isPerDiemRequest() check returns true

Why staging-only: The staging server likely includes iouRequestType in its transaction response (possibly as part of a newer backend version), while production does not. When the staging response merges into Onyx with a falsy iouRequestType value, Object.hasOwn returns true but the value comparison fails.

Affected call sites: Lines 145, 161, 190, 200, 210, 226, 241, 255, 267, 367 in TransactionUtils/index.ts

---

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.

[melvin-bot]

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

[melvin-bot]

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

[Abdullahtmk]

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

When a user creates a per diem expense in the workspace chat and then opens the expense report to check the receipt, the per diem expense receipt icon is not displayed, even though it should show a receipt indicator.

What is the root cause of that problem?

The receipt icon display logic likely checks for a transaction's receipt or receipt state, but per diem expenses may not have a receipt object or may have a different receipt state indicator than regular expenses. The receipt icon rendering component skips displaying the icon when it cannot find the expected receipt data structure for per diem transactions.

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

Locate the receipt icon display component (likely in src/components/AttachmentPreview.tsx or receipt-related files) and update the logic to handle per diem expenses:

// Before: Only shows icon for transactions with receipt object
const hasReceipt = transaction?.receipt?.source;

// After: Show icon for either regular receipts OR per diem transactions
const isPDMExpense = transaction?.isPolicyExpense && transaction?.receipt?.receiptObject?.receiptType === 'per_diem';
const hasReceipt = transaction?.receipt?.source || isPDMExpense;

if (hasReceipt) {
    return <ReceiptIcon />;
}

Alternatively, if the per diem receipt icon is handled separately, ensure the per diem expense creation flow (likely in src/libs/actions/IOU.ts) sets the appropriate receipt indicator flag that the display logic checks for.

What alternative solutions did you explore? (Optional)

• Add special per diem receipt type: If per diem already has a distinct receipt type, ensure it's being set during creation
• Update receipt display conditions: Check for policy expense type in addition to receipt existence

Why this works: Routes the per diem receipt display through the same icon rendering logic as regular expenses, ensuring visual consistency.

[yuvrajangadsingh]

🚨 Edited by proposal-police: This proposal was edited at 2026-04-11 14:24:57 UTC.

Proposal

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

After creating a per diem expense on staging, the receipt calendar icon is missing. The per diem eReceipt thumbnail doesn't render, leaving a blank receipt area.

What is the root cause of that problem?

The isPerDiemRequest() function in src/libs/TransactionUtils/index.ts:252-262 guards on Object.hasOwn(transaction, 'iouRequestType') before checking the value. When the staging server returns the transaction with iouRequestType set to a falsy value (null or empty string), Object.hasOwn returns true, the value comparison against CONST.IOU.REQUEST_TYPE.PER_DIEM fails, and the function returns false. It never reaches the reliable server-side fallback at line 259-261 that checks comment.type === 'customUnit' && comment.customUnit.name.

This breaks the rendering chain at multiple points:

1. Main receipt view (src/components/ReportActionItem/ReportActionItemImage.tsx:178): propsObj.isPerDiemRequest is set to false, so ReceiptImage at src/components/ReceiptImage/index.tsx:201 never takes the isEReceipt && isPerDiemRequest branch, and EReceiptThumbnail (which renders the CalendarSolid icon at src/components/EReceiptThumbnail.tsx:112-119) is never mounted.

2. Attachment view (src/components/Attachments/AttachmentView/index.tsx:204): isPerDiemRequest(transaction) returns false, so PerDiemEReceipt is skipped entirely.

3. Receipt cell in search (src/components/TransactionItemRow/DataCells/ReceiptCell.tsx:40): isPerDiem evaluates to false.

4. Receipt preview on hover (src/components/TransactionItemRow/ReceiptPreview/index.tsx:38): isPerDiemEReceipt evaluates to false.

Offending PR: this only reproduces on staging because PR #87244 reverted Onyx to 3.0.57, which preserves iouRequestType: null during merge. production stayed on Onyx 3.0.58 which strips null values, so Object.hasOwn returns false and the fallback runs correctly.

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

In src/libs/TransactionUtils/index.ts, change the guard in isPerDiemRequest (and all sibling functions using the same pattern) from checking key existence to checking value truthiness:

// Before (line 254)
if (transaction && Object.hasOwn(transaction, 'iouRequestType')) {
    return transaction?.iouRequestType === CONST.IOU.REQUEST_TYPE.PER_DIEM;
}

// After
if (transaction?.iouRequestType) {
    return transaction.iouRequestType === CONST.IOU.REQUEST_TYPE.PER_DIEM;
}

Apply the same change to all functions with the identical Object.hasOwn(transaction, 'iouRequestType') pattern:

• isDistanceRequest (line 144)
• isDistanceTypeRequest (line 160)
• isMapDistanceRequest (line 189)
• isGPSDistanceRequest (line 199)
• isManualDistanceRequest (line 209)
• isOdometerDistanceRequest (line 225)
• isScanRequest (line 240)
• isPerDiemRequest (line 254)
• isTimeRequest (line 266)

When iouRequestType is null/undefined after server sync, the function falls through to the server-side field check, which is the authoritative source of truth for persisted transactions.

What alternative solutions did you explore? (Optional)

Could strip the iouRequestType key in successData callbacks after server sync. But that's fragile since Pusher updates can re-add it. The value-check fix makes detection logic robust regardless of what the server sends back.

[marufsharifi]

🚨 Edited by proposal-police: This proposal was edited at 2026-04-11 05:53:27 UTC.

Proposal

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

Per diem expenses should show the per diem receipt icon when the user opens the receipt from the expense report, but synced per diem transactions sometimes render as a generic PDF receipt instead, so the per diem icon is missing.

What is the root cause of that problem?

The root cause is that the receipt surfaces only use the per diem visual path when the transaction is treated as an eReceipt or has no receipt.source. Synced per diem transactions can have a real PDF receipt.source and hasEReceipt: false, so they bypass the per diem-specific branches and fall back to the generic receipt/PDF UI.

The first gate is in src/components/ReportActionItem/ReportActionItemImage.tsx, where isEReceipt is computed as !hasReceiptSource(transaction) && hasEReceipt(transaction) and the eReceipt props are only used when that value is true.

App/src/components/ReportActionItem/ReportActionItemImage.tsx

Lines 149 to 180 in 02b2574

	if (isEReceipt) {
	propsObj = {isEReceipt: true, transactionID: transaction.transactionID, iconSize: isSingleImage ? 'medium' : ('small' as IconSize), shouldUseFullHeight};
	} else if (effectiveThumbnail && !effectiveIsLocalFile) {
	propsObj = {
	shouldUseThumbnailImage: shouldUseThumbnailImage ?? true,
	source: thumbnailSource,
	fallbackIcon: icons.Receipt,
	fallbackIconSize: isSingleImage ? variables.iconSizeSuperLarge : variables.iconSizeExtraLarge,
	isAuthTokenRequired: true,
	// If the image is full height, use initial position to make sure it will grow properly to fill the container
	shouldUseInitialObjectPosition: isMapDistanceRequest && !shouldUseFullHeight,
	};
	} else if (effectiveIsLocalFile && isPDF && typeof originalImageSource === 'string') {
	propsObj = {isPDFThumbnail: true, source: originalImageSource};
	} else {
	propsObj = {
	isThumbnail,
	...(isThumbnail && {iconSize: (isSingleImage ? 'medium' : 'small') as IconSize, fileExtension}),
	shouldUseThumbnailImage: shouldUseThumbnailImage ?? true,
	isAuthTokenRequired: false,
	source: shouldUseThumbnailImage ? (effectiveThumbnail ?? effectiveImage ?? '') : originalImageSource,
	// If the image is full height, use initial position to make sure it will grow properly to fill the container
	shouldUseInitialObjectPosition: isMapDistanceRequest && !shouldUseFullHeight,
	isEmptyReceipt,
	onPress,
	};
	}
	propsObj.isPerDiemRequest = isPerDiemRequest(transaction);

That depends on hasReceiptSource() in src/libs/TransactionUtils/index.ts, which returns true for any transaction with receipt.source.

App/src/libs/TransactionUtils/index.ts

Lines 553 to 563 in 02b2574

	function hasEReceipt(transaction: Transaction | undefined | null): boolean {
	return !!transaction?.hasEReceipt;
	}
	function hasReceipt(transaction: OnyxInputOrEntry<Transaction> | undefined): boolean {
	return !!transaction?.receipt?.state || hasEReceipt(transaction);
	}
	/** Check if the receipt has the source file */
	function hasReceiptSource(transaction: OnyxInputOrEntry<Transaction>): boolean {
	return !!transaction?.receipt?.source;

The second gate is in src/components/ReceiptImage/index.tsx, where the per diem thumbnail path only runs when isThumbnail || (isEReceipt && isPerDiemRequest).

App/src/components/ReceiptImage/index.tsx

Lines 191 to 214 in 02b2574

	if (isEReceipt && !isPerDiemRequest) {
	return (
	<EReceiptWithSizeCalculation
	transactionID={transactionID}
	transactionItem={transactionItem}
	shouldUseAspectRatio={shouldUseFullHeight && shouldUseAspectRatioForEReceipts}
	onLoad={onLoad}
	/>
	);
	}
	if (isThumbnail || (isEReceipt && isPerDiemRequest)) {
	const props = isThumbnail && {fileExtension, isReceiptThumbnail: true};
	return (
	<View style={style ?? [styles.w100, styles.h100]}>
	<EReceiptThumbnail
	transactionID={transactionID}
	iconSize={iconSize}
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...props}
	/>
	</View>
	);
	}

The same assumption exists in src/components/Attachments/AttachmentView/index.tsx, which only renders PerDiemEReceipt when isPerDiemRequest(transaction) && !hasReceiptSource(transaction).

App/src/components/Attachments/AttachmentView/index.tsx

Lines 204 to 208 in 02b2574

	if (isPerDiemRequest(transaction) && transaction && !hasReceiptSource(transaction)) {
	return <PerDiemEReceipt transactionID={transaction.transactionID} />;
	}
	if (transaction && !hasReceiptSource(transaction) && hasEReceipt(transaction)) {

In simple terms: once the synced per diem transaction has a PDF receipt.source, the current code stops treating it as a per diem receipt visually, even though it is still a per diem transaction.

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

We should keep the fix in App-side rendering logic and add one small helper that says whether a transaction should use the per diem receipt visual. That helper should return true when the transaction is per diem and either:

• it has no receipt.source, or
• it has a PDF-backed receipt (receipt.filename or receipt.source is a PDF)

Then we should use that helper in the report preview and attachment view so synced PDF-backed per diem receipts still render the per diem visual path.

The new helper should be added in src/libs/TransactionUtils/index.ts.

App/src/libs/TransactionUtils/index.ts

Lines 140 to 142 in 02b2574

	function hasDistanceCustomUnit(transaction: OnyxEntry<Transaction> | Partial<Transaction>): boolean {
	return transaction?.comment?.type === CONST.TRANSACTION.TYPE.CUSTOM_UNIT && transaction?.comment?.customUnit?.name === CONST.CUSTOM_UNITS.NAME_DISTANCE;
	}

diff --git a/src/libs/TransactionUtils/index.ts b/src/libs/TransactionUtils/index.ts
@@
-import {format, isValid, parse} from 'date-fns';
+import {format, isValid, parse} from 'date-fns';
+import {Str} from 'expensify-common';
@@
 function hasDistanceCustomUnit(transaction: OnyxEntry<Transaction> | Partial<Transaction>): boolean {
     return transaction?.comment?.type === CONST.TRANSACTION.TYPE.CUSTOM_UNIT && transaction?.comment?.customUnit?.name === CONST.CUSTOM_UNITS.NAME_DISTANCE;
 }
+
+function shouldUsePerDiemReceiptVisual(transaction: OnyxEntry<Transaction>): boolean {
+    if (!isPerDiemRequest(transaction)) {
+        return false;
+    }
+
+    if (!hasReceiptSource(transaction)) {
+        return true;
+    }
+
+    const receiptFilename = transaction?.receipt?.filename;
+    if (receiptFilename && Str.isPDF(receiptFilename)) {
+        return true;
+    }
+
+    const receiptSource = transaction?.receipt?.source;
+    return typeof receiptSource === 'string' && Str.isPDF(receiptSource);
+}
@@
     getTransactionViolations,
     hasReceipt,
     hasEReceipt,
+    shouldUsePerDiemReceiptVisual,
     hasRoute,

This keeps the logic centralized and avoids scattering PDF/per diem checks across multiple components.

Then update src/components/ReportActionItem/ReportActionItemImage.tsx to use the helper and pass the result to ReceiptImage.

App/src/components/ReportActionItem/ReportActionItemImage.tsx

Lines 149 to 180 in 02b2574

	if (isEReceipt) {
	propsObj = {isEReceipt: true, transactionID: transaction.transactionID, iconSize: isSingleImage ? 'medium' : ('small' as IconSize), shouldUseFullHeight};
	} else if (effectiveThumbnail && !effectiveIsLocalFile) {
	propsObj = {
	shouldUseThumbnailImage: shouldUseThumbnailImage ?? true,
	source: thumbnailSource,
	fallbackIcon: icons.Receipt,
	fallbackIconSize: isSingleImage ? variables.iconSizeSuperLarge : variables.iconSizeExtraLarge,
	isAuthTokenRequired: true,
	// If the image is full height, use initial position to make sure it will grow properly to fill the container
	shouldUseInitialObjectPosition: isMapDistanceRequest && !shouldUseFullHeight,
	};
	} else if (effectiveIsLocalFile && isPDF && typeof originalImageSource === 'string') {
	propsObj = {isPDFThumbnail: true, source: originalImageSource};
	} else {
	propsObj = {
	isThumbnail,
	...(isThumbnail && {iconSize: (isSingleImage ? 'medium' : 'small') as IconSize, fileExtension}),
	shouldUseThumbnailImage: shouldUseThumbnailImage ?? true,
	isAuthTokenRequired: false,
	source: shouldUseThumbnailImage ? (effectiveThumbnail ?? effectiveImage ?? '') : originalImageSource,
	// If the image is full height, use initial position to make sure it will grow properly to fill the container
	shouldUseInitialObjectPosition: isMapDistanceRequest && !shouldUseFullHeight,
	isEmptyReceipt,
	onPress,
	};
	}
	propsObj.isPerDiemRequest = isPerDiemRequest(transaction);

diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx
@@
-import {hasEReceipt, hasReceiptSource, isDistanceRequest, isFetchingWaypointsFromServer, isManualDistanceRequest, isPerDiemRequest} from '@libs/TransactionUtils';
+import {hasEReceipt, hasReceiptSource, isDistanceRequest, isFetchingWaypointsFromServer, isManualDistanceRequest, isPerDiemRequest, shouldUsePerDiemReceiptVisual} from '@libs/TransactionUtils';
@@
     const isEReceipt = transaction && !hasReceiptSource(transaction) && hasEReceipt(transaction);
+    const isPerDiem = isPerDiemRequest(transaction);
+    const shouldUsePerDiemVisual = shouldUsePerDiemReceiptVisual(transaction);
@@
-    if (isEReceipt) {
+    if (isEReceipt || shouldUsePerDiemVisual) {
         propsObj = {isEReceipt: true, transactionID: transaction.transactionID, iconSize: isSingleImage ? 'medium' : ('small' as IconSize), shouldUseFullHeight};
@@
-    propsObj.isPerDiemRequest = isPerDiemRequest(transaction);
+    propsObj.isPerDiemRequest = isPerDiem;
+    propsObj.shouldUsePerDiemReceiptVisual = shouldUsePerDiemVisual;

This makes the report preview use the per diem visual path even when the synced transaction has a PDF source.

Then update src/components/ReceiptImage/index.tsx so the per diem thumbnail branch can be selected directly by that new rendering flag.

App/src/components/ReceiptImage/index.tsx

Lines 114 to 118 in 02b2574

	/** Whether the receipt is a per diem request */
	isPerDiemRequest?: boolean;
	/** The transaction data in search */
	transactionItem?: TransactionListItemType | Transaction;

App/src/components/ReceiptImage/index.tsx

Lines 136 to 214 in 02b2574

	function ReceiptImage({
	transactionID,
	isPDFThumbnail,
	isThumbnail = false,
	shouldUseThumbnailImage = false,
	isEReceipt = false,
	source,
	isAuthTokenRequired,
	fileExtension,
	iconSize,
	loadingIconSize,
	fallbackIcon,
	fallbackIconSize,
	shouldUseInitialObjectPosition = false,
	fallbackIconColor,
	fallbackIconBackground,
	isEmptyReceipt = false,
	reasonAttributes,
	onPress,
	transactionItem,
	isPerDiemRequest,
	shouldUseFullHeight,
	loadingIndicatorStyles,
	thumbnailContainerStyles,
	onLoad,
	onLoadFailure,
	resizeMode,
	style,
	}: ReceiptImageProps) {
	const styles = useThemeStyles();
	const [receiptImageWidth, setReceiptImageWidth] = useState<number | undefined>(undefined);
	const lastUpdateWidthTimestampRef = useRef(new Date().getTime());
	if (isEmptyReceipt) {
	return (
	<ReceiptEmptyState
	isThumbnail
	onPress={onPress}
	disabled={!onPress}
	shouldUseFullHeight={shouldUseFullHeight}
	onLoad={onLoad}
	/>
	);
	}
	if (isPDFThumbnail) {
	return (
	<PDFThumbnail
	previewSourceURL={source ?? ''}
	style={[styles.w100, styles.h100]}
	onLoadSuccess={onLoad}
	/>
	);
	}
	if (isEReceipt && !isPerDiemRequest) {
	return (
	<EReceiptWithSizeCalculation
	transactionID={transactionID}
	transactionItem={transactionItem}
	shouldUseAspectRatio={shouldUseFullHeight && shouldUseAspectRatioForEReceipts}
	onLoad={onLoad}
	/>
	);
	}
	if (isThumbnail || (isEReceipt && isPerDiemRequest)) {
	const props = isThumbnail && {fileExtension, isReceiptThumbnail: true};
	return (
	<View style={style ?? [styles.w100, styles.h100]}>
	<EReceiptThumbnail
	transactionID={transactionID}
	iconSize={iconSize}
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...props}
	/>
	</View>
	);
	}

diff --git a/src/components/ReceiptImage/index.tsx b/src/components/ReceiptImage/index.tsx
@@
     /** Whether the receipt is a per diem request */
     isPerDiemRequest?: boolean;
+
+    /** Whether the receipt should use the per diem visual path */
+    shouldUsePerDiemReceiptVisual?: boolean;
@@
     transactionItem,
     isPerDiemRequest,
+    shouldUsePerDiemReceiptVisual = false,
     shouldUseFullHeight,
@@
-    if (isThumbnail || (isEReceipt && isPerDiemRequest)) {
+    if (isThumbnail || shouldUsePerDiemReceiptVisual || (isEReceipt && isPerDiemRequest)) {

This keeps the existing rendering structure and only adds one narrow override for synced per diem PDF receipts.

Finally, update src/components/Attachments/AttachmentView/index.tsx so the opened receipt view uses the same rule.

App/src/components/Attachments/AttachmentView/index.tsx

Lines 204 to 208 in 02b2574

	if (isPerDiemRequest(transaction) && transaction && !hasReceiptSource(transaction)) {
	return <PerDiemEReceipt transactionID={transaction.transactionID} />;
	}
	if (transaction && !hasReceiptSource(transaction) && hasEReceipt(transaction)) {

diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx
@@
-import {hasEReceipt, hasReceiptSource, isDistanceRequest, isManualDistanceRequest, isOdometerDistanceRequest, isPerDiemRequest} from '@libs/TransactionUtils';
+import {hasEReceipt, hasReceiptSource, isDistanceRequest, isManualDistanceRequest, isOdometerDistanceRequest, shouldUsePerDiemReceiptVisual} from '@libs/TransactionUtils';
@@
-    if (isPerDiemRequest(transaction) && transaction && !hasReceiptSource(transaction)) {
+    if (transaction && shouldUsePerDiemReceiptVisual(transaction)) {
         return <PerDiemEReceipt transactionID={transaction.transactionID} />;
     }

This keeps the preview and opened receipt consistent and fixes the exact repro path without changing server data or broader receipt behavior.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

1. Alternative 1:

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

We should keep the fix very small and only update the two issue surfaces:

1. In src/components/ReportActionItem/ReportActionItemImage.tsx, treat a per diem transaction with a PDF-backed receipt.source as eligible for the existing per diem/eReceipt visual path.
2. In src/components/Attachments/AttachmentView/index.tsx, render PerDiemEReceipt for per diem transactions when they either:

• have no receipt.source, or
• have a PDF-backed receipt.source

This keeps the fix localized to the repro path and does not change shared receipt utility semantics.

In src/components/ReportActionItem/ReportActionItemImage.tsx, update the existing isEReceipt branch to also cover PDF-backed per diem receipts.

App/src/components/ReportActionItem/ReportActionItemImage.tsx

Lines 149 to 180 in 02b2574

	if (isEReceipt) {
	propsObj = {isEReceipt: true, transactionID: transaction.transactionID, iconSize: isSingleImage ? 'medium' : ('small' as IconSize), shouldUseFullHeight};
	} else if (effectiveThumbnail && !effectiveIsLocalFile) {
	propsObj = {
	shouldUseThumbnailImage: shouldUseThumbnailImage ?? true,
	source: thumbnailSource,
	fallbackIcon: icons.Receipt,
	fallbackIconSize: isSingleImage ? variables.iconSizeSuperLarge : variables.iconSizeExtraLarge,
	isAuthTokenRequired: true,
	// If the image is full height, use initial position to make sure it will grow properly to fill the container
	shouldUseInitialObjectPosition: isMapDistanceRequest && !shouldUseFullHeight,
	};
	} else if (effectiveIsLocalFile && isPDF && typeof originalImageSource === 'string') {
	propsObj = {isPDFThumbnail: true, source: originalImageSource};
	} else {
	propsObj = {
	isThumbnail,
	...(isThumbnail && {iconSize: (isSingleImage ? 'medium' : 'small') as IconSize, fileExtension}),
	shouldUseThumbnailImage: shouldUseThumbnailImage ?? true,
	isAuthTokenRequired: false,
	source: shouldUseThumbnailImage ? (effectiveThumbnail ?? effectiveImage ?? '') : originalImageSource,
	// If the image is full height, use initial position to make sure it will grow properly to fill the container
	shouldUseInitialObjectPosition: isMapDistanceRequest && !shouldUseFullHeight,
	isEmptyReceipt,
	onPress,
	};
	}
	propsObj.isPerDiemRequest = isPerDiemRequest(transaction);

diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx
@@
     const originalImageSource = tryResolveUrlFromApiRoot(effectiveImage ?? '');
     const thumbnailSource = tryResolveUrlFromApiRoot(effectiveThumbnail ?? '');
     const isEReceipt = transaction && !hasReceiptSource(transaction) && hasEReceipt(transaction);
+    const isPerDiem = isPerDiemRequest(transaction);
+    const perDiemReceiptFilename = transaction?.receipt?.filename;
+    const perDiemReceiptSource = typeof transaction?.receipt?.source === 'string' ? transaction.receipt.source : '';
+    const shouldUsePerDiemPDFVisual =
+        !!transaction && isPerDiem && hasReceiptSource(transaction) && (!!(perDiemReceiptFilename && Str.isPDF(perDiemReceiptFilename)) || Str.isPDF(perDiemReceiptSource));
     const isPDF = filename && Str.isPDF(filename);
@@
-    if (isEReceipt) {
+    if (isEReceipt || shouldUsePerDiemPDFVisual) {
         propsObj = {isEReceipt: true, transactionID: transaction.transactionID, iconSize: isSingleImage ? 'medium' : ('small' as IconSize), shouldUseFullHeight};
@@
-    propsObj.isPerDiemRequest = isPerDiemRequest(transaction);
+    propsObj.isPerDiemRequest = isPerDiem;

This makes the report preview keep using the existing per diem thumbnail path for synced PDF-backed per diem receipts.

In src/components/Attachments/AttachmentView/index.tsx, broaden the per diem branch so the opened receipt uses PerDiemEReceipt for the same synced PDF-backed shape.

App/src/components/Attachments/AttachmentView/index.tsx

Lines 204 to 208 in 02b2574

	if (isPerDiemRequest(transaction) && transaction && !hasReceiptSource(transaction)) {
	return <PerDiemEReceipt transactionID={transaction.transactionID} />;
	}
	if (transaction && !hasReceiptSource(transaction) && hasEReceipt(transaction)) {

diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx
@@
-    if (isPerDiemRequest(transaction) && transaction && !hasReceiptSource(transaction)) {
+    const isPerDiem = isPerDiemRequest(transaction);
+    const perDiemReceiptFilename = transaction?.receipt?.filename;
+    const perDiemReceiptSource = typeof transaction?.receipt?.source === 'string' ? transaction.receipt.source : '';
+    const shouldUsePerDiemVisual =
+        !!transaction &&
+        isPerDiem &&
+        (!hasReceiptSource(transaction) || !!(perDiemReceiptFilename && Str.isPDF(perDiemReceiptFilename)) || Str.isPDF(perDiemReceiptSource));
+
+    if (transaction && shouldUsePerDiemVisual) {
         return <PerDiemEReceipt transactionID={transaction.transactionID} />;
     }

This keeps the preview and opened receipt consistent and fixes the exact repro path without changing server data, hasEReceipt(), or hasReceiptSource().

Video demo of repro:

issue-repro.webm

Video demo of fix:

fix-demo.mp4