[Follow-up fix] Correct color pick for EReceipt Thumbnails and remove duplication of MCC and Trip icons.

src/components/EReceiptThumbnail.tsx

@@ -57,8 +57,7 @@ const backgroundImages = {
 function EReceiptThumbnail({transaction, borderRadius, fileExtension, isReceiptThumbnail = false, centerIconV = true, iconSize = 'large'}: EReceiptThumbnailProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const {tripIcon, tripBGColor} = TripReservationUtils.getTripEReceiptData(transaction);
-    const colorCode = tripBGColor ?? (isReceiptThumbnail ? StyleUtils.getFileExtensionColorCode(fileExtension) : StyleUtils.getEReceiptColorCode(transaction));
+    const colorCode = isReceiptThumbnail ? StyleUtils.getFileExtensionColorCode(fileExtension) : StyleUtils.getEReceiptColorCode(transaction);
 
     const backgroundImage = useMemo(() => backgroundImages[colorCode], [colorCode]);
 
@@ -68,6 +67,7 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isReceiptT
     const transactionDetails = ReportUtils.getTransactionDetails(transaction);
     const transactionMCCGroup = transactionDetails?.mccGroup;
     const MCCIcon = transactionMCCGroup ? MCCIcons[`${transactionMCCGroup}`] : undefined;
+    const tripIcon = TripReservationUtils.getTripEReceiptIcon(transaction);
 
     let receiptIconWidth: number = variables.eReceiptIconWidth;
     let receiptIconHeight: number = variables.eReceiptIconHeight;
@@ -143,7 +143,7 @@ function EReceiptThumbnail({transaction, borderRadius, fileExtension, isReceiptT
                             fill={primaryColor}
                         />
                     ) : null}
-                    {tripIcon ? (
+                    {!MCCIcon && tripIcon ? (
                         <Icon
                             src={tripIcon}
                             height={receiptMCCSize}

src/libs/TripReservationUtils.ts

@@ -1,4 +1,3 @@
-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';
@@ -25,26 +24,18 @@ function getReservationsFromTripTransactions(transactions: Transaction[]): Reser
         .flat();
 }
 
-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 {
+function getTripEReceiptIcon(transaction?: Transaction): IconAsset | undefined {
     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};
+            return Expensicons.Plane;
         case CONST.RESERVATION_TYPE.HOTEL:
-            return {tripIcon: Expensicons.Bed, tripBGColor: CONST.ERECEIPT_COLORS.YELLOW};
+            return Expensicons.Bed;
         default:
-            return {};
+            return undefined;
     }
 }
 
-export {getTripReservationIcon, getReservationsFromTripTransactions, getTripEReceiptData};
+export {getTripReservationIcon, getReservationsFromTripTransactions, getTripEReceiptIcon};