diff --git a/src/CONST/index.ts b/src/CONST/index.ts index b25bb18cf598..a7005d343a28 100755 --- a/src/CONST/index.ts +++ b/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', diff --git a/src/components/DistanceEReceipt.tsx b/src/components/DistanceEReceipt.tsx index 19fdc23c2412..8de8546150a6 100644 --- a/src/components/DistanceEReceipt.tsx +++ b/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 ( - + - ); } diff --git a/src/components/TransactionItemRow/ReceiptPreview/index.native.tsx b/src/components/TransactionItemRow/ReceiptPreview/index.native.tsx deleted file mode 100644 index eb62a4c48e37..000000000000 --- a/src/components/TransactionItemRow/ReceiptPreview/index.native.tsx +++ /dev/null @@ -1,5 +0,0 @@ -function ReceiptPreview() { - return null; -} - -export default ReceiptPreview; diff --git a/src/components/TransactionItemRow/ReceiptPreview/index.tsx b/src/components/TransactionItemRow/ReceiptPreview/index.tsx deleted file mode 100644 index a444b4cc5772..000000000000 --- a/src/components/TransactionItemRow/ReceiptPreview/index.tsx +++ /dev/null @@ -1,146 +0,0 @@ -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(undefined); - const [distanceEReceiptAspectRatio, setDistanceEReceiptAspectRatio] = useState(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( - - {shouldShowImage ? ( - - - - ) : ( - - {shouldShowDistanceEReceipt ? ( - - - - ) : ( - - - - )} - - )} - , - document.body, - ); -} - -export default ReceiptPreview; diff --git a/src/libs/SearchUIUtils.ts b/src/libs/SearchUIUtils.ts index 1d29ca9fec1f..fb4d4764d1da 100644 --- a/src/libs/SearchUIUtils.ts +++ b/src/libs/SearchUIUtils.ts @@ -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); diff --git a/src/styles/index.ts b/src/styles/index.ts index 8d0a5ea17ca3..7c9650c98aa4 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -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, }, diff --git a/src/types/onyx/SearchResults.ts b/src/types/onyx/SearchResults.ts index 03d209719770..85ea2213270c 100644 --- a/src/types/onyx/SearchResults.ts +++ b/src/types/onyx/SearchResults.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 */ diff --git a/tests/unit/Search/SearchUIUtilsTest.ts b/tests/unit/Search/SearchUIUtilsTest.ts index 96d17e618b84..968c45a9fe9f 100644 --- a/tests/unit/Search/SearchUIUtilsTest.ts +++ b/tests/unit/Search/SearchUIUtilsTest.ts @@ -271,8 +271,6 @@ const searchResults: OnyxTypes.SearchResults = { canDelete: true, canHold: true, canUnhold: false, - cardID: undefined, - cardName: undefined, category: '', comment: { comment: '', @@ -304,7 +302,6 @@ const searchResults: OnyxTypes.SearchResults = { modifiedMCCGroup: undefined, moneyRequestReportActionID: undefined, errors: undefined, - filename: undefined, isActionLoading: false, }, [`transactions_${transactionID2}`]: { @@ -314,8 +311,6 @@ const searchResults: OnyxTypes.SearchResults = { canDelete: true, canHold: true, canUnhold: false, - cardID: undefined, - cardName: undefined, category: '', comment: { comment: '', @@ -347,7 +342,6 @@ const searchResults: OnyxTypes.SearchResults = { moneyRequestReportActionID: undefined, pendingAction: undefined, errors: undefined, - filename: undefined, isActionLoading: false, }, ...allViolations, @@ -358,8 +352,6 @@ const searchResults: OnyxTypes.SearchResults = { canDelete: true, canHold: true, canUnhold: false, - cardID: undefined, - cardName: undefined, category: '', comment: { comment: '', @@ -390,7 +382,6 @@ const searchResults: OnyxTypes.SearchResults = { moneyRequestReportActionID: undefined, pendingAction: undefined, errors: undefined, - filename: undefined, isActionLoading: false, hasViolation: undefined, }, @@ -401,8 +392,6 @@ const searchResults: OnyxTypes.SearchResults = { canDelete: true, canHold: true, canUnhold: false, - cardID: undefined, - cardName: undefined, category: '', comment: { comment: '', @@ -433,7 +422,6 @@ const searchResults: OnyxTypes.SearchResults = { moneyRequestReportActionID: undefined, pendingAction: undefined, errors: undefined, - filename: undefined, isActionLoading: false, hasViolation: undefined, }, @@ -498,8 +486,6 @@ const transactionsListItems = [ canDelete: true, canHold: true, canUnhold: false, - cardID: undefined, - cardName: undefined, category: '', comment: {comment: ''}, created: '2024-12-21', @@ -556,7 +542,6 @@ const transactionsListItems = [ modifiedMCCGroup: undefined, moneyRequestReportActionID: undefined, errors: undefined, - filename: undefined, isActionLoading: false, hasViolation: false, violations: [], @@ -569,8 +554,6 @@ const transactionsListItems = [ canDelete: true, canHold: true, canUnhold: false, - cardID: undefined, - cardName: undefined, category: '', comment: {comment: ''}, created: '2024-12-21', @@ -627,7 +610,6 @@ const transactionsListItems = [ moneyRequestReportActionID: undefined, pendingAction: undefined, errors: undefined, - filename: undefined, isActionLoading: false, hasViolation: true, violations: [ @@ -645,8 +627,6 @@ const transactionsListItems = [ canDelete: true, canHold: true, canUnhold: false, - cardID: undefined, - cardName: undefined, category: '', comment: {comment: ''}, created: '2025-03-05', @@ -703,7 +683,6 @@ const transactionsListItems = [ moneyRequestReportActionID: undefined, pendingAction: undefined, errors: undefined, - filename: undefined, isActionLoading: false, hasViolation: undefined, violations: [], @@ -716,8 +695,6 @@ const transactionsListItems = [ canDelete: true, canHold: true, canUnhold: false, - cardID: undefined, - cardName: undefined, category: '', comment: {comment: ''}, created: '2025-03-05', @@ -774,7 +751,6 @@ const transactionsListItems = [ moneyRequestReportActionID: undefined, pendingAction: undefined, errors: undefined, - filename: undefined, isActionLoading: false, hasViolation: undefined, violations: [], @@ -823,8 +799,6 @@ const transactionReportGroupListItems = [ canDelete: true, canHold: true, canUnhold: false, - cardID: undefined, - cardName: undefined, category: '', comment: {comment: ''}, created: '2024-12-21', @@ -882,7 +856,6 @@ const transactionReportGroupListItems = [ modifiedMCCGroup: undefined, moneyRequestReportActionID: undefined, errors: undefined, - filename: undefined, isActionLoading: false, violations: [], }, @@ -931,8 +904,6 @@ const transactionReportGroupListItems = [ canDelete: true, canHold: true, canUnhold: false, - cardID: undefined, - cardName: undefined, category: '', comment: {comment: ''}, created: '2024-12-21', @@ -996,7 +967,6 @@ const transactionReportGroupListItems = [ moneyRequestReportActionID: undefined, pendingAction: undefined, errors: undefined, - filename: undefined, isActionLoading: false, }, ], @@ -1599,8 +1569,6 @@ describe('SearchUIUtils', () => { canDelete: false, canHold: true, canUnhold: false, - cardID: undefined, - cardName: undefined, category: 'Employee Meals Remote (Fringe Benefit)', action: 'approve', comment: {