[Travel] Create Trip Receipt for newDot

src/components/EReceiptThumbnail.tsx

@@ -5,6 +5,7 @@ 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';
@@ -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 ? (
+                        <Icon
+                            src={tripIcon}
+                            height={receiptMCCSize}
+                            width={receiptMCCSize}
+                            fill={primaryColor}
+                        />
+                    ) : null}
                 </View>
             </View>
         </View>

src/libs/TripReservationUtils.ts

@@ -1,3 +1,4 @@
+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';
@@ -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.Bed, tripBGColor: CONST.ERECEIPT_COLORS.YELLOW};
+        default:
+            return {};
+    }
+}
+
+export {getTripReservationIcon, getReservationsFromTripTransactions, getTripEReceiptData};