From ee0f65bce82043d41855d65b58e6385f2b68d15c Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Thu, 20 Jun 2024 16:28:02 +0200 Subject: [PATCH 1/7] add trip receipt case --- src/components/EReceiptThumbnail.tsx | 12 ++++++++- .../ReportActionItemImage.tsx | 12 +++++++++ src/libs/TripReservationUtils.ts | 25 ++++++++++++++++++- 3 files changed, 47 insertions(+), 2 deletions(-) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index f4216dcc9f8a..6762538b3c91 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -9,6 +9,7 @@ import colors from '@styles/theme/colors'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import * as TripReservationUtils from '@libs/TripReservationUtils'; import type {Transaction} from '@src/types/onyx'; import Icon from './Icon'; import * as eReceiptBGs from './Icon/EReceiptBGs'; @@ -56,7 +57,8 @@ const backgroundImages = { function EReceiptThumbnail({transaction, borderRadius, fileExtension, isReceiptThumbnail = false, centerIconV = true, iconSize = 'large'}: EReceiptThumbnailProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); - const colorCode = isReceiptThumbnail ? StyleUtils.getFileExtensionColorCode(fileExtension) : StyleUtils.getEReceiptColorCode(transaction); + const {tripIcon, tripBGColor} = TripReservationUtils.getTripEReceiptData(transaction); + const colorCode = tripBGColor ?? (isReceiptThumbnail ? StyleUtils.getFileExtensionColorCode(fileExtension) : StyleUtils.getEReceiptColorCode(transaction)); const backgroundImage = useMemo(() => backgroundImages[colorCode], [colorCode]); @@ -141,6 +143,14 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isReceiptT fill={primaryColor} /> ) : null} + {tripIcon && isReceiptThumbnail ? ( + + ) : null} diff --git a/src/components/ReportActionItem/ReportActionItemImage.tsx b/src/components/ReportActionItem/ReportActionItemImage.tsx index 1251be83994b..b0105039bc18 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.tsx +++ b/src/components/ReportActionItem/ReportActionItemImage.tsx @@ -95,6 +95,8 @@ function ReportActionItemImage({ const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail ?? ''); const isEReceipt = transaction && TransactionUtils.hasEReceipt(transaction); + const shouldUseTripEReceiptThumbnail = transaction?.receipt?.reservationList?.length !== 0; + let propsObj: ReceiptImageProps; if (isEReceipt) { @@ -110,6 +112,16 @@ function ReportActionItemImage({ }; } else if (isLocalFile && filename && Str.isPDF(filename) && typeof attachmentModalSource === 'string') { propsObj = {isPDFThumbnail: true, source: attachmentModalSource}; + } else if (shouldUseTripEReceiptThumbnail) { + propsObj = { + isThumbnail, + transactionID: transaction?.transactionID, + ...(isThumbnail && {iconSize: (isSingleImage ? 'medium' : 'small') as IconSize, fileExtension}), + shouldUseThumbnailImage: true, + isAuthTokenRequired: false, + source: thumbnail ?? image ?? '', + shouldUseInitialObjectPosition: isDistanceRequest, + }; } else { propsObj = { isThumbnail, diff --git a/src/libs/TripReservationUtils.ts b/src/libs/TripReservationUtils.ts index ead786b8eafd..ced50c7ec0ac 100644 --- a/src/libs/TripReservationUtils.ts +++ b/src/libs/TripReservationUtils.ts @@ -3,6 +3,7 @@ import CONST from '@src/CONST'; import type {Reservation, ReservationType} from '@src/types/onyx/Transaction'; import type Transaction from '@src/types/onyx/Transaction'; import type IconAsset from '@src/types/utils/IconAsset'; +import { EReceiptColorName } from '@styles/utils/types'; function getTripReservationIcon(reservationType: ReservationType): IconAsset { switch (reservationType) { @@ -24,4 +25,26 @@ function getReservationsFromTripTransactions(transactions: Transaction[]): Reser .flat(); } -export {getTripReservationIcon, getReservationsFromTripTransactions}; +type TripEReceiptData = { + /** Icon asset associated with the type of trip reservation */ + tripIcon?: IconAsset, + + /** EReceipt background color associated with the type of trip reservation */ + tripBGColor?: EReceiptColorName, +} + +function getTripEReceiptData(transaction?: Transaction): TripEReceiptData { + const reservationType = transaction ? transaction.receipt?.reservationList?.[0]?.type : ''; + + switch (reservationType) { + case CONST.RESERVATION_TYPE.FLIGHT: + case CONST.RESERVATION_TYPE.CAR: + return {tripIcon: Expensicons.Plane, tripBGColor: CONST.ERECEIPT_COLORS.PINK}; + case CONST.RESERVATION_TYPE.HOTEL: + return {tripIcon: Expensicons.Plane, tripBGColor: CONST.ERECEIPT_COLORS.YELLOW}; + default: + return {}; + } +} + +export {getTripReservationIcon, getReservationsFromTripTransactions, getTripEReceiptData}; From 4e34eb15f41366c75698a3eb0567ae508d686bcd Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Thu, 20 Jun 2024 16:29:11 +0200 Subject: [PATCH 2/7] fix prettier --- src/components/EReceiptThumbnail.tsx | 2 +- src/libs/TripReservationUtils.ts | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index 6762538b3c91..aebfff1f5a00 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -5,11 +5,11 @@ import {withOnyx} from 'react-native-onyx'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ReportUtils from '@libs/ReportUtils'; +import * as TripReservationUtils from '@libs/TripReservationUtils'; import colors from '@styles/theme/colors'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import * as TripReservationUtils from '@libs/TripReservationUtils'; import type {Transaction} from '@src/types/onyx'; import Icon from './Icon'; import * as eReceiptBGs from './Icon/EReceiptBGs'; diff --git a/src/libs/TripReservationUtils.ts b/src/libs/TripReservationUtils.ts index ced50c7ec0ac..23a1743d65f4 100644 --- a/src/libs/TripReservationUtils.ts +++ b/src/libs/TripReservationUtils.ts @@ -1,9 +1,9 @@ +import {EReceiptColorName} from '@styles/utils/types'; import * as Expensicons from '@src/components/Icon/Expensicons'; import CONST from '@src/CONST'; import type {Reservation, ReservationType} from '@src/types/onyx/Transaction'; import type Transaction from '@src/types/onyx/Transaction'; import type IconAsset from '@src/types/utils/IconAsset'; -import { EReceiptColorName } from '@styles/utils/types'; function getTripReservationIcon(reservationType: ReservationType): IconAsset { switch (reservationType) { @@ -27,11 +27,11 @@ function getReservationsFromTripTransactions(transactions: Transaction[]): Reser type TripEReceiptData = { /** Icon asset associated with the type of trip reservation */ - tripIcon?: IconAsset, + tripIcon?: IconAsset; /** EReceipt background color associated with the type of trip reservation */ - tripBGColor?: EReceiptColorName, -} + tripBGColor?: EReceiptColorName; +}; function getTripEReceiptData(transaction?: Transaction): TripEReceiptData { const reservationType = transaction ? transaction.receipt?.reservationList?.[0]?.type : ''; From 44a368f7cd09575073433837bee635a0dd2cf833 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Thu, 20 Jun 2024 17:04:47 +0200 Subject: [PATCH 3/7] correct type imports and lint --- src/libs/TripReservationUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/TripReservationUtils.ts b/src/libs/TripReservationUtils.ts index 23a1743d65f4..140347a99ed7 100644 --- a/src/libs/TripReservationUtils.ts +++ b/src/libs/TripReservationUtils.ts @@ -1,4 +1,4 @@ -import {EReceiptColorName} from '@styles/utils/types'; +import type {EReceiptColorName} from '@styles/utils/types'; import * as Expensicons from '@src/components/Icon/Expensicons'; import CONST from '@src/CONST'; import type {Reservation, ReservationType} from '@src/types/onyx/Transaction'; From 85f4941b0c71952a64e352ec9fbe60a1ad1419d2 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Thu, 20 Jun 2024 17:05:53 +0200 Subject: [PATCH 4/7] set correct icon for accommodation --- src/libs/TripReservationUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/TripReservationUtils.ts b/src/libs/TripReservationUtils.ts index 140347a99ed7..e937979ae7b9 100644 --- a/src/libs/TripReservationUtils.ts +++ b/src/libs/TripReservationUtils.ts @@ -41,7 +41,7 @@ function getTripEReceiptData(transaction?: Transaction): TripEReceiptData { case CONST.RESERVATION_TYPE.CAR: return {tripIcon: Expensicons.Plane, tripBGColor: CONST.ERECEIPT_COLORS.PINK}; case CONST.RESERVATION_TYPE.HOTEL: - return {tripIcon: Expensicons.Plane, tripBGColor: CONST.ERECEIPT_COLORS.YELLOW}; + return {tripIcon: Expensicons.Bed, tripBGColor: CONST.ERECEIPT_COLORS.YELLOW}; default: return {}; } From 4d700b7292e1b782cfe021a52e8a8ba7613a4dda Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Fri, 21 Jun 2024 17:52:44 +0200 Subject: [PATCH 5/7] correct conditional for displaying the EReceipt icon --- src/components/EReceiptThumbnail.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index aebfff1f5a00..a8d636db460b 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -143,7 +143,7 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isReceiptT fill={primaryColor} /> ) : null} - {tripIcon && isReceiptThumbnail ? ( + {tripIcon ? ( Date: Wed, 26 Jun 2024 13:01:38 +0200 Subject: [PATCH 6/7] fix conditional for displaying travel ereceipt --- src/components/EReceiptThumbnail.tsx | 2 +- src/components/ReportActionItem/ReportActionItemImage.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index a8d636db460b..aebfff1f5a00 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -143,7 +143,7 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isReceiptT fill={primaryColor} /> ) : null} - {tripIcon ? ( + {tripIcon && isReceiptThumbnail ? ( Date: Wed, 3 Jul 2024 13:02:11 +0200 Subject: [PATCH 7/7] correct logic for displaying the trip receipt --- src/components/EReceiptThumbnail.tsx | 2 +- .../ReportActionItem/ReportActionItemImage.tsx | 14 +------------- 2 files changed, 2 insertions(+), 14 deletions(-) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index aebfff1f5a00..a8d636db460b 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -143,7 +143,7 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isReceiptT fill={primaryColor} /> ) : null} - {tripIcon && isReceiptThumbnail ? ( + {tripIcon ? (