Hover-to-view for receipt thumbnails

src/CONST/index.ts

@@ -1035,6 +1035,7 @@ const CONST = {
         SHUTTER_SIZE: 90,
         MAX_REPORT_PREVIEW_RECEIPTS: 3,
     },
+    RECEIPT_PREVIEW_TOP_BOTTOM_MARGIN: 120,
     REPORT: {
         ROLE: {
             ADMIN: 'admin',
@@ -1503,6 +1504,8 @@ const CONST = {
         SEARCH_MOST_RECENT_OPTIONS: 'search_most_recent_options',
         DEBOUNCE_HANDLE_SEARCH: 'debounce_handle_search',
         FAST_SEARCH_TREE_CREATION: 'fast_search_tree_creation',
+        SHOW_HOVER_PREVIEW_DELAY: 270,
+        SHOW_HOVER_PREVIEW_ANIMATION_DURATION: 200,
     },
     PRIORITY_MODE: {
         GSD: 'gsd',

src/components/DistanceEReceipt.tsx

@@ -22,9 +22,12 @@ import Text from './Text';
 type DistanceEReceiptProps = {
     /** The transaction for the distance expense */
     transaction: Transaction;
+
+    /** Whether the distanceEReceipt is shown as hover preview */
+    hoverPreview?: boolean;
 };
 
-function DistanceEReceipt({transaction}: DistanceEReceiptProps) {
+function DistanceEReceipt({transaction, hoverPreview = false}: DistanceEReceiptProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const thumbnail = hasReceipt(transaction) ? getThumbnailAndImageURIs(transaction).thumbnail : null;
@@ -42,7 +45,7 @@ function DistanceEReceipt({transaction}: DistanceEReceiptProps) {
         [waypoints],
     );
     return (
-        <View style={[styles.flex1, styles.alignItemsCenter]}>
+        <View style={[styles.flex1, styles.alignItemsCenter, hoverPreview && styles.mhv5]}>
             <ScrollView
                 style={styles.w100}
                 contentContainerStyle={[styles.flexGrow1, styles.justifyContentCenter, styles.alignItemsCenter]}

src/components/SelectionList/types.ts

@@ -264,11 +264,20 @@ type TransactionListItemType = ListItem &
         /** Key used internally by React */
         keyForList: string;
 
+        /** The name of the file used for a receipt */
+        filename?: string;
+
         /** Attendees in the transaction */
         attendees?: Attendee[];
 
         /** Precomputed violations */
         violations?: TransactionViolation[];
+
+        /** The CC for this transaction */
+        cardID?: number;
+
+        /** The display name of the purchaser card, if any */
+        cardName?: string;
     };
 
 type ReportActionListItemType = ListItem &

src/components/TransactionItemRow/DataCells/ReceiptCell.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import {View} from 'react-native';
 import {Receipt} from '@components/Icon/Expensicons';
 import ReceiptImage from '@components/ReceiptImage';
+import ReceiptPreview from '@components/TransactionItemRow/ReceiptPreview';
+import useHover from '@hooks/useHover';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -18,10 +20,10 @@ function ReceiptCell({transactionItem, isSelected}: {transactionItem: Transactio
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const backgroundStyles = isSelected ? StyleUtils.getBackgroundColorStyle(theme.buttonHoveredBG) : StyleUtils.getBackgroundColorStyle(theme.border);
-
+    const {hovered, bind} = useHover();
+    const isEReceipt = transactionItem.hasEReceipt && !hasReceiptSource(transactionItem);
     let source = transactionItem?.receipt?.source ?? '';
-
-    if (source && typeof source === 'string') {
+    if (source) {
         const filename = getFileName(source);
         const receiptURIs = getThumbnailAndImageURIs(transactionItem, null, filename);
         const isReceiptPDF = Str.isPDF(filename);
@@ -36,10 +38,12 @@ function ReceiptCell({transactionItem, isSelected}: {transactionItem: Transactio
                 styles.overflowHidden,
                 backgroundStyles,
             ]}
+            onMouseEnter={bind.onMouseEnter}
+            onMouseLeave={bind.onMouseLeave}
         >
             <ReceiptImage
                 source={source}
-                isEReceipt={transactionItem.hasEReceipt && !hasReceiptSource(transactionItem)}
+                isEReceipt={isEReceipt}
                 transactionID={transactionItem.transactionID}
                 shouldUseThumbnailImage={!transactionItem?.receipt?.source}
                 isAuthTokenRequired
@@ -52,6 +56,12 @@ function ReceiptCell({transactionItem, isSelected}: {transactionItem: Transactio
                 loadingIndicatorStyles={styles.bgTransparent}
                 transactionItem={transactionItem}
             />
+            <ReceiptPreview
+                source={source}
+                hovered={hovered}
+                isEReceipt={!!isEReceipt}
+                transactionItem={transactionItem}
+            />
         </View>
     );
 }

src/components/TransactionItemRow/ReceiptPreview/index.native.tsx

@@ -0,0 +1,5 @@
+function ReceiptPreview() {
+    return null;
+}
+
+export default ReceiptPreview;

src/components/TransactionItemRow/ReceiptPreview/index.tsx

@@ -0,0 +1,146 @@
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import ReactDOM from 'react-dom';
+import type {LayoutChangeEvent} from 'react-native';
+import {View} from 'react-native';
+import Animated, {FadeIn, FadeOut} from 'react-native-reanimated';
+import DistanceEReceipt from '@components/DistanceEReceipt';
+import EReceipt from '@components/EReceipt';
+import BaseImage from '@components/Image/BaseImage';
+import type {ImageOnLoadEvent} from '@components/Image/types';
+import useDebouncedState from '@hooks/useDebouncedState';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import {isDistanceRequest} from '@libs/TransactionUtils';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+import type {Transaction} from '@src/types/onyx';
+
+const eReceiptAspectRatio = variables.eReceiptBGHWidth / variables.eReceiptBGHeight;
+
+type ReceiptPreviewProps = {
+    /** Path to the image to be opened in the preview */
+    source: string;
+
+    /** Whether the preview should be shown (e.g. if we are hovered over certain ReceiptCell) */
+    hovered: boolean;
+
+    /** Is preview for an e-receipt */
+    isEReceipt: boolean;
+
+    /** Transaction object related to the preview */
+    transactionItem: Transaction;
+};
+
+function ReceiptPreview({source, hovered, isEReceipt = false, transactionItem}: ReceiptPreviewProps) {
+    const isDistanceEReceipt = isDistanceRequest(transactionItem);
+    const styles = useThemeStyles();
+    const [eReceiptScaleFactor, setEReceiptScaleFactor] = useState(0);
+    const [imageAspectRatio, setImageAspectRatio] = useState<string | number | undefined>(undefined);
+    const [distanceEReceiptAspectRatio, setDistanceEReceiptAspectRatio] = useState<string | number | undefined>(undefined);
+    const [shouldShow, debounceShouldShow, setShouldShow] = useDebouncedState(false, CONST.TIMING.SHOW_HOVER_PREVIEW_DELAY);
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const hasMeasured = useRef(false);
+    const {windowHeight} = useWindowDimensions();
+
+    const handleDistanceEReceiptLayout = (e: LayoutChangeEvent) => {
+        if (hasMeasured.current) {
+            return;
+        }
+        hasMeasured.current = true;
+
+        const {height, width} = e.nativeEvent.layout;
+        if (height === 0) {
+            // on the initial layout, measured height is 0, so we want to set everything on the second one
+            hasMeasured.current = false;
+            return;
+        }
+        if (height * eReceiptScaleFactor > windowHeight - CONST.RECEIPT_PREVIEW_TOP_BOTTOM_MARGIN) {
+            setDistanceEReceiptAspectRatio(variables.eReceiptBGHWidth / (windowHeight - CONST.RECEIPT_PREVIEW_TOP_BOTTOM_MARGIN));
+            return;
+        }
+        setDistanceEReceiptAspectRatio(variables.eReceiptBGHWidth / height);
+        setEReceiptScaleFactor(width / variables.eReceiptBGHWidth);
+    };
+
+    const updateImageAspectRatio = useCallback(
+        (width: number, height: number) => {
+            if (!source) {
+                return;
+            }
+
+            setImageAspectRatio(height ? width / height : 'auto');
+        },
+        [source],
+    );
+
+    const handleLoad = useCallback(
+        (event: ImageOnLoadEvent) => {
+            const {width, height} = event.nativeEvent;
+
+            updateImageAspectRatio(width, height);
+        },
+        [updateImageAspectRatio],
+    );
+
+    const handleEReceiptLayout = (e: LayoutChangeEvent) => {
+        const {width} = e.nativeEvent.layout;
+        setEReceiptScaleFactor(width / variables.eReceiptBGHWidth);
+    };
+
+    useEffect(() => {
+        setShouldShow(hovered);
+    }, [hovered, setShouldShow]);
+
+    if (shouldUseNarrowLayout || !debounceShouldShow || !shouldShow || (!source && !isEReceipt && !isDistanceEReceipt)) {
+        return null;
+    }
+
+    const shouldShowImage = source && !(isEReceipt || isDistanceEReceipt);
+    const shouldShowDistanceEReceipt = isDistanceEReceipt && !isEReceipt;
+
+    return ReactDOM.createPortal(
+        <Animated.View
+            entering={FadeIn.duration(CONST.TIMING.SHOW_HOVER_PREVIEW_ANIMATION_DURATION)}
+            exiting={FadeOut.duration(CONST.TIMING.SHOW_HOVER_PREVIEW_ANIMATION_DURATION)}
+            style={[styles.receiptPreview, styles.flexColumn, styles.alignItemsCenter, styles.justifyContentStart]}
+        >
+            {shouldShowImage ? (
+                <View style={[styles.w100]}>
+                    <BaseImage
+                        source={{uri: source}}
+                        style={[styles.w100, {aspectRatio: imageAspectRatio}]}
+                        onLoad={handleLoad}
+                    />
+                </View>
+            ) : (
+                <View style={styles.receiptPreviewEReceiptsContainer}>
+                    {shouldShowDistanceEReceipt ? (
+                        <View
+                            onLayout={handleDistanceEReceiptLayout}
+                            style={[{transformOrigin: 'center', scale: eReceiptScaleFactor, aspectRatio: distanceEReceiptAspectRatio}]}
+                        >
+                            <DistanceEReceipt
+                                transaction={transactionItem}
+                                hoverPreview
+                            />
+                        </View>
+                    ) : (
+                        <View
+                            onLayout={handleEReceiptLayout}
+                            style={[styles.receiptPreviewEReceipt, {aspectRatio: eReceiptAspectRatio, scale: eReceiptScaleFactor}]}
+                        >
+                            <EReceipt
+                                transactionID={transactionItem.transactionID}
+                                transactionItem={transactionItem}
+                            />
+                        </View>
+                    )}
+                </View>
+            )}
+        </Animated.View>,
+        document.body,
+    );
+}
+
+export default ReceiptPreview;

src/libs/SearchUIUtils.ts

@@ -158,7 +158,7 @@
 ];
 
 let currentAccountID: number | undefined;
 Onyx.connect({
     key: ONYXKEYS.SESSION,
     callback: (session) => {
         currentAccountID = session?.accountID;
@@ -773,12 +773,10 @@
         const report = data[`${ONYXKEYS.COLLECTION.REPORT}${transactionItem.reportID}`];
         const policy = data[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`];
         const shouldShowBlankTo = !report || isOpenExpenseReport(report);
-
         const transactionViolations = getTransactionViolations(allViolations, transactionItem);
         // Use Map.get() for faster lookups with default values
         const from = personalDetailsMap.get(transactionItem.accountID.toString()) ?? emptyPersonalDetails;
         const to = transactionItem.managerID && !shouldShowBlankTo ? (personalDetailsMap.get(transactionItem.managerID.toString()) ?? emptyPersonalDetails) : emptyPersonalDetails;
-
         const {formattedFrom, formattedTo, formattedTotal, formattedMerchant, date} = getTransactionItemCommonFormattedProperties(transactionItem, from, to, policy);
 
         const transactionSection: TransactionListItemType = {
@@ -799,7 +797,7 @@
             isAmountColumnWide: shouldShowAmountInWideColumn,
             isTaxAmountColumnWide: shouldShowTaxAmountInWideColumn,
             violations: transactionViolations,
-
+            filename: transactionItem.filename,
             // Manually copying all the properties from transactionItem
             transactionID: transactionItem.transactionID,
             created: transactionItem.created,
@@ -837,6 +835,8 @@
             errors: transactionItem.errors,
             isActionLoading: transactionItem.isActionLoading,
             hasViolation: transactionItem.hasViolation,
+            cardID: transactionItem.cardID,
+            cardName: transactionItem.cardName,
         };
 
         transactionsSections.push(transactionSection);

src/styles/index.ts

@@ -5664,6 +5664,32 @@ const styles = (theme: ThemeColors) =>
             aspectRatio: 1.7,
         },
 
+        receiptPreview: {
+            position: 'absolute',
+            left: 60,
+            top: 60,
+            width: 380,
+            maxHeight: 'calc(100vh - 120px)',
+            borderRadius: variables.componentBorderRadiusLarge,
+            borderWidth: 1,
+            borderColor: theme.border,
+            overflow: 'hidden',
+            boxShadow: theme.shadow,
+            backgroundColor: theme.appBG,
+        },
+
+        receiptPreviewEReceiptsContainer: {
+            ...sizing.w100,
+            ...sizing.h100,
+            backgroundColor: colors.green800,
+        },
+
+        receiptPreviewEReceipt: {
+            ...flex.flexColumn,
+            ...flex.justifyContentCenter,
+            ...flex.alignItemsCenter,
+        },
+
         topBarWrapper: {
             zIndex: 15,
         },

src/types/onyx/SearchResults.ts

@@ -391,6 +391,9 @@ type SearchTransaction = {
     /** The ID of the report the transaction is associated with */
     reportID: string;
 
+    /** The name of the file used for a receipt */
+    filename?: string;
+
     /** The report ID of the transaction thread associated with the transaction */
     transactionThreadReportID: string;
 
@@ -417,6 +420,12 @@ type SearchTransaction = {
 
     /** The type of action that's pending  */
     pendingAction?: OnyxCommon.PendingAction;
+
+    /** The CC for this transaction */
+    cardID?: number;
+
+    /** The display name of the purchaser card, if any */
+    cardName?: string;
 };
 
 /** Model of tasks search result */