Revert "Hover-to-view for receipt thumbnails"

Author: jasperhuangg

src/CONST/index.ts

@@ -1058,7 +1058,6 @@ const CONST = {
         SHUTTER_SIZE: 90,
         MAX_REPORT_PREVIEW_RECEIPTS: 3,
     },
-    RECEIPT_PREVIEW_TOP_BOTTOM_MARGIN: 120,
     REPORT: {
         ROLE: {
             ADMIN: 'admin',
@@ -1533,8 +1532,6 @@ 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,12 +22,9 @@ 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, hoverPreview = false}: DistanceEReceiptProps) {
+function DistanceEReceipt({transaction}: DistanceEReceiptProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const thumbnail = hasReceipt(transaction) ? getThumbnailAndImageURIs(transaction).thumbnail : null;
@@ -45,7 +42,7 @@ function DistanceEReceipt({transaction, hoverPreview = false}: DistanceEReceiptP
         [waypoints],
     );
     return (
-        <View style={[styles.flex1, styles.alignItemsCenter, hoverPreview && styles.mhv5]}>
+        <View style={[styles.flex1, styles.alignItemsCenter]}>
             <ScrollView
                 style={styles.w100}
                 contentContainerStyle={[styles.flexGrow1, styles.justifyContentCenter, styles.alignItemsCenter]}

src/components/SelectionList/types.ts

@@ -276,20 +276,11 @@ 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,8 +3,6 @@ import {View} from 'react-native';
 import type {ViewStyle} 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';
@@ -20,10 +18,10 @@ function ReceiptCell({transactionItem, isSelected, style}: {transactionItem: Tra
     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) {
+
+    if (source && typeof source === 'string') {
         const filename = getFileName(source);
         const receiptURIs = getThumbnailAndImageURIs(transactionItem, null, filename);
         source = tryResolveUrlFromApiRoot(receiptURIs.thumbnail ?? receiptURIs.image ?? '');
@@ -38,12 +36,10 @@ function ReceiptCell({transactionItem, isSelected, style}: {transactionItem: Tra
                 backgroundStyles,
                 style,
             ]}
-            onMouseEnter={bind.onMouseEnter}
-            onMouseLeave={bind.onMouseLeave}
         >
             <ReceiptImage
                 source={source}
-                isEReceipt={isEReceipt}
+                isEReceipt={transactionItem.hasEReceipt && !hasReceiptSource(transactionItem)}
                 transactionID={transactionItem.transactionID}
                 shouldUseThumbnailImage={!transactionItem?.receipt?.source}
                 isAuthTokenRequired
@@ -56,12 +52,6 @@ function ReceiptCell({transactionItem, isSelected, style}: {transactionItem: Tra
                 loadingIndicatorStyles={styles.bgTransparent}
                 transactionItem={transactionItem}
             />
-            <ReceiptPreview
-                source={source}
-                hovered={hovered}
-                isEReceipt={!!isEReceipt}
-                transactionItem={transactionItem}
-            />
         </View>
     );
 }

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

@@ -750,10 +750,12 @@ function getTransactionsSections(data: OnyxTypes.SearchResults['data'], metadata
         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 = {
@@ -778,7 +780,7 @@ function getTransactionsSections(data: OnyxTypes.SearchResults['data'], metadata
             isAmountColumnWide: shouldShowAmountInWideColumn,
             isTaxAmountColumnWide: shouldShowTaxAmountInWideColumn,
             violations: transactionViolations,
-            filename: transactionItem.filename,
+
             // Manually copying all the properties from transactionItem
             transactionID: transactionItem.transactionID,
             created: transactionItem.created,
@@ -816,8 +818,6 @@ function getTransactionsSections(data: OnyxTypes.SearchResults['data'], metadata
             errors: transactionItem.errors,
             isActionLoading: transactionItem.isActionLoading,
             hasViolation: transactionItem.hasViolation,
-            cardID: transactionItem.cardID,
-            cardName: transactionItem.cardName,
         };
 
         transactionsSections.push(transactionSection);

src/components/TransactionItemRow/ReceiptPreview/index.tsx

@@ -5689,32 +5689,6 @@ 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/libs/SearchUIUtils.ts

@@ -409,9 +409,6 @@ 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;
 
@@ -438,12 +435,6 @@ 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 */