feat: show full distance e-receipt on hover for map distance requests

src/components/ReportActionItem/HoveredDistanceEReceipt.tsx

@@ -0,0 +1,56 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import type {LayoutChangeEvent} from 'react-native';
+import DistanceEReceipt from '@components/DistanceEReceipt';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+import type {Transaction} from '@src/types/onyx';
+
+// The DistanceEReceipt panel is `variables.eReceiptBGHWidth` wide plus the 20px margin on each side (styles.m5).
+const E_RECEIPT_CARD_WIDTH = variables.eReceiptBGHWidth + 40;
+
+type HoveredDistanceEReceiptProps = {
+    /** The transaction for the distance expense */
+    transaction: Transaction;
+};
+
+/**
+ * Overlay that shows the full distance e-receipt on hover scaled down (object-fit: contain) to sit inside the
+ * fixed-size receipt box without changing the box dimensions. The space around the portrait card is filled with
+ * the card's own background color so there is no white gap.
+ */
+function HoveredDistanceEReceipt({transaction}: HoveredDistanceEReceiptProps) {
+    const styles = useThemeStyles();
+    const [boxWidth, setBoxWidth] = useState(0);
+    const [boxHeight, setBoxHeight] = useState(0);
+    const [cardHeight, setCardHeight] = useState(0);
+
+    const scale = boxWidth && boxHeight && cardHeight ? Math.min(boxWidth / E_RECEIPT_CARD_WIDTH, boxHeight / cardHeight) : 0;
+
+    const onOverlayLayout = (event: LayoutChangeEvent) => {
+        setBoxWidth(event.nativeEvent.layout.width);
+        setBoxHeight(event.nativeEvent.layout.height);
+    };
+
+    const onCardLayout = (event: LayoutChangeEvent) => {
+        setCardHeight(event.nativeEvent.layout.height);
+    };
+
+    return (
+        <View
+            style={[styles.pAbsolute, styles.t0, styles.l0, styles.r0, styles.b0, styles.justifyContentCenter, styles.alignItemsCenter, styles.overflowHidden, styles.eReceiptHoverFill]}
+            onLayout={onOverlayLayout}
+        >
+            <View
+                style={[{width: E_RECEIPT_CARD_WIDTH}, scale ? {transform: [{scale}]} : styles.opacity0]}
+                onLayout={onCardLayout}
+            >
+                <DistanceEReceipt transaction={transaction} />
+            </View>
+        </View>
+    );
+}
+
+HoveredDistanceEReceipt.displayName = 'HoveredDistanceEReceipt';
+
+export default HoveredDistanceEReceipt;

src/components/ReportActionItem/MoneyRequestReceiptView.tsx

@@ -79,6 +79,7 @@ import type * as OnyxTypes from '@src/types/onyx';
 import type {TransactionPendingFieldsKey} from '@src/types/onyx/Transaction';
 import type {FileObject} from '@src/types/utils/Attachment';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import HoveredDistanceEReceipt from './HoveredDistanceEReceipt';
 import {isElementHovered, resetButtonHoverState} from './receiptHoverUtils';
 import ReportActionItemImage from './ReportActionItemImage';
 
@@ -172,6 +173,7 @@ function MoneyRequestReceiptView({
     const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${moneyRequestReport?.policyID}`);
 
     const isDistanceRequest = isDistanceRequestTransactionUtils(transaction);
+    const isMapDistanceRequest = !!transaction && isDistanceRequest && !isManualDistanceRequest(transaction);
     const hasReceipt = hasReceiptTransactionUtils(updatedTransaction ?? transaction);
     const isTransactionScanning = isScanning(updatedTransaction ?? transaction);
     const didReceiptScanSucceed = hasReceipt && didReceiptScanSucceedTransactionUtils(transaction);
@@ -504,8 +506,6 @@ function MoneyRequestReceiptView({
 
     const showBorderlessLoading = isLoading && fillSpace;
 
-    const isMapDistanceRequest = !!transaction && isDistanceRequest && !isManualDistanceRequest(transaction);
-
     const canShowReceiptActions = hasReceipt && !isLoading && isEditable && !isMapDistanceRequest && !mergeTransactionID;
     const receiptPendingAction = isDistanceRequest ? getPendingFieldAction('waypoints') : getPendingFieldAction('receipt');
     const isReceiptOfflinePending = isOffline && !!receiptPendingAction;
@@ -623,23 +623,28 @@ function MoneyRequestReceiptView({
                                     isEnabled={canZoomReceipt}
                                     hoverContainerRef={receiptContainerRef}
                                 >
-                                    <ReportActionItemImage
-                                        shouldUseThumbnailImage={!fillSpace}
-                                        shouldUseFullHeight={fillSpace}
-                                        thumbnail={receiptURIs?.thumbnail}
-                                        fileExtension={receiptURIs?.fileExtension}
-                                        isThumbnail={receiptURIs?.isThumbnail}
-                                        image={receiptURIs?.image}
-                                        isLocalFile={receiptURIs?.isLocalFile}
-                                        filename={receiptURIs?.filename}
-                                        transaction={updatedTransaction ?? transaction}
-                                        enablePreviewModal
-                                        readonly={readonly || !canEditReceipt}
-                                        mergeTransactionID={mergeTransactionID}
-                                        report={report}
-                                        onLoad={() => setIsLoading(false)}
-                                        onLoadFailure={() => setIsLoading(false)}
-                                    />
+                                    <>
+                                        <ReportActionItemImage
+                                            shouldUseThumbnailImage={!fillSpace}
+                                            shouldUseFullHeight={fillSpace}
+                                            thumbnail={receiptURIs?.thumbnail}
+                                            fileExtension={receiptURIs?.fileExtension}
+                                            isThumbnail={receiptURIs?.isThumbnail}
+                                            image={receiptURIs?.image}
+                                            isLocalFile={receiptURIs?.isLocalFile}
+                                            filename={receiptURIs?.filename}
+                                            transaction={updatedTransaction ?? transaction}
+                                            enablePreviewModal
+                                            readonly={readonly || !canEditReceipt}
+                                            mergeTransactionID={mergeTransactionID}
+                                            report={report}
+                                            onLoad={() => setIsLoading(false)}
+                                            onLoadFailure={() => setIsLoading(false)}
+                                        />
+                                        {/* On hover, a map distance receipt overlays the full e-receipt (map + amount + waypoints), scaled to fit the
+                                            box without resizing it, matching Expensify Classic. The map underneath keeps the box at its resting size. */}
+                                        {isMapDistanceRequest && hovered && !!transactionForReceipt && <HoveredDistanceEReceipt transaction={transactionForReceipt} />}
+                                    </>
                                 </ReceiptHoverZoom>
                             </View>
                             {canShowReceiptActions && (

src/styles/index.ts

@@ -4225,6 +4225,10 @@ const staticStyles = (theme: ThemeColors) =>
             overflow: 'hidden',
         },
 
+        eReceiptHoverFill: {
+            backgroundColor: colors.green800,
+        },
+
         eReceiptBackgroundThumbnail: {
             ...sizing.w100,
             position: 'absolute',