[VIP-Travel] Create Trip Room Preview

src/CONST.ts

@@ -335,6 +335,7 @@ const CONST = {
         TRACK_EXPENSE: 'trackExpense',
         P2P_DISTANCE_REQUESTS: 'p2pDistanceRequests',
         WORKFLOWS_DELAYED_SUBMISSION: 'workflowsDelayedSubmission',
+        SPOTNANA_TRAVEL: 'spotnanaTravel',
         ACCOUNTING: 'accounting',
     },
     BUTTON_STATES: {
@@ -613,6 +614,7 @@ const CONST = {
             LIMIT: 50,
             // OldDot Actions render getMessage from Web-Expensify/lib/Report/Action PHP files via getMessageOfOldDotReportAction in ReportActionsUtils.ts
             TYPE: {
+                ACTION_TRIPPREVIEW: 'ACTION_TRIPPREVIEW',
                 ACTIONABLEMENTIONWHISPER: 'ACTIONABLEMENTIONWHISPER',
                 ADDCOMMENT: 'ADDCOMMENT',
                 ACTIONABLEJOINREQUEST: 'ACTIONABLEJOINREQUEST',
@@ -4127,6 +4129,14 @@ const CONST = {
     SESSION_STORAGE_KEYS: {
         INITIAL_URL: 'INITIAL_URL',
     },
+
+    RESERVATION_TYPE: {
+        CAR: 'car',
+        HOTEL: 'hotel',
+        FLIGHT: 'flight',
+        RAIL: 'rail',
+        MISC: 'misc',
+    },
     DEFAULT_TAX: {
         defaultExternalID: 'id_TAX_EXEMPT',
         defaultValue: '0%',

src/components/Icon/Expensicons.ts

@@ -16,6 +16,7 @@ import NotificationsAvatar from '@assets/images/avatars/notifications-avatar.svg
 import ActiveRoomAvatar from '@assets/images/avatars/room.svg';
 import BackArrow from '@assets/images/back-left.svg';
 import Bank from '@assets/images/bank.svg';
+import Bed from '@assets/images/bed.svg';
 import Bell from '@assets/images/bell.svg';
 import BellSlash from '@assets/images/bellSlash.svg';
 import Bill from '@assets/images/bill.svg';
@@ -25,6 +26,7 @@ import Bug from '@assets/images/bug.svg';
 import Building from '@assets/images/building.svg';
 import Calendar from '@assets/images/calendar.svg';
 import Camera from '@assets/images/camera.svg';
+import CarWithKey from '@assets/images/car-with-key.svg';
 import Car from '@assets/images/car.svg';
 import CardsAndDomains from '@assets/images/cards-and-domains.svg';
 import Cash from '@assets/images/cash.svg';
@@ -113,6 +115,7 @@ import Paycheck from '@assets/images/paycheck.svg';
 import Pencil from '@assets/images/pencil.svg';
 import Phone from '@assets/images/phone.svg';
 import Pin from '@assets/images/pin.svg';
+import Plane from '@assets/images/plane.svg';
 import Play from '@assets/images/play.svg';
 import Plus from '@assets/images/plus.svg';
 import Printer from '@assets/images/printer.svg';
@@ -142,6 +145,7 @@ import Task from '@assets/images/task.svg';
 import Tax from '@assets/images/tax.svg';
 import ThreeDots from '@assets/images/three-dots.svg';
 import ThumbsUp from '@assets/images/thumbs-up.svg';
+import Train from '@assets/images/train.svg';
 import Transfer from '@assets/images/transfer.svg';
 import Trashcan from '@assets/images/trashcan.svg';
 import Unlock from '@assets/images/unlock.svg';
@@ -315,5 +319,9 @@ export {
     ChatBubbleUnread,
     ChatBubbleReply,
     Lightbulb,
+    Plane,
+    Bed,
+    CarWithKey,
     DocumentPlus,
+    Train,
 };

src/components/MenuItem.tsx

@@ -1,6 +1,6 @@
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import type {ImageContentFit} from 'expo-image';
-import type {ForwardedRef, ReactNode} from 'react';
+import type {ForwardedRef, ReactElement, ReactNode} from 'react';
 import React, {forwardRef, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import type {GestureResponderEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
@@ -163,6 +163,12 @@ type MenuItemBaseProps = {
     /** Text to display for the item */
     title?: string;
 
+    /** Component to display as the title */
+    titleComponent?: ReactElement;
+
+    /** Any additional styles to apply to the container for title components */
+    titleContainerStyle?: StyleProp<ViewStyle>;
+
     /** A right-aligned subtitle for this menu option */
     subtitle?: string | number;
 
@@ -287,6 +293,8 @@ function MenuItem(
         focused = false,
         disabled = false,
         title,
+        titleComponent,
+        titleContainerStyle,
         subtitle,
         shouldShowBasicTitle,
         label,
@@ -524,7 +532,7 @@ function MenuItem(
                                                 />
                                             </View>
                                         )}
-                                        <View style={[styles.justifyContentCenter, styles.flex1, StyleUtils.getMenuItemTextContainerStyle(isSmallAvatarSubscriptMenu)]}>
+                                        <View style={[styles.justifyContentCenter, styles.flex1, StyleUtils.getMenuItemTextContainerStyle(isSmallAvatarSubscriptMenu), titleContainerStyle]}>
                                             {!!description && shouldShowDescriptionOnTop && (
                                                 <Text
                                                     style={descriptionTextStyles}
@@ -588,6 +596,7 @@ function MenuItem(
                                                     </Text>
                                                 </View>
                                             )}
+                                            {titleComponent}
                                         </View>
                                     </View>
                                 </View>

src/components/ReportActionItem/ReportPreview.tsx

@@ -33,6 +33,9 @@ import type {Policy, Report, ReportAction, Transaction, TransactionViolations, U
 import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
 import ReportActionItemImages from './ReportActionItemImages';
 
+// @TODO: Used for testing purposes only. Uncomment to test. Remove when real data is available for testing.
+// import TripRoomPreview from './TripRoomPreview';
+
 type ReportPreviewOnyxProps = {
     /** The policy tied to the money request report */
     policy: OnyxEntry<Policy>;
@@ -104,6 +107,19 @@ function ReportPreview({
     const {translate} = useLocalize();
     const {canUseViolations} = usePermissions();
 
+    // @TODO: Used for testing purposes only. Uncomment to test. Remove when real data is available for testing.
+    // return (
+    //     <TripRoomPreview
+    //         action={action}
+    //         iouReportID={iouReportID}
+    //         chatReportID={chatReportID}
+    //         isHovered={isHovered}
+    //         isWhisper={isWhisper}
+    //         checkIfContextMenuActive={checkIfContextMenuActive}
+    //         containerStyles={containerStyles}
+    //     />
+    // );
+
     const {hasMissingSmartscanFields, areAllRequestsBeingSmartScanned, hasOnlyTransactionsWithPendingRoutes, hasNonReimbursableTransactions} = useMemo(
         () => ({
             hasMissingSmartscanFields: ReportUtils.hasMissingSmartscanFields(iouReportID),