[VIP-Travel] Trip room summary

src/CONST.ts

@@ -50,6 +50,7 @@ const KEYBOARD_SHORTCUT_NAVIGATION_TYPE = 'NAVIGATION_SHORTCUT';
 const chatTypes = {
     POLICY_ANNOUNCE: 'policyAnnounce',
     POLICY_ADMINS: 'policyAdmins',
+    TRIP_ROOM: 'tripRoom',
     GROUP: 'group',
     DOMAIN_ALL: 'domainAll',
     POLICY_ROOM: 'policyRoom',
@@ -697,6 +698,7 @@ const CONST = {
                 TASK_COMPLETED: 'TASKCOMPLETED',
                 TASK_EDITED: 'TASKEDITED',
                 TASK_REOPENED: 'TASKREOPENED',
+                TRIPPREVIEW: 'TRIPPREVIEW',
                 UNAPPROVED: 'UNAPPROVED', // OldDot Action
                 UNHOLD: 'UNHOLD',
                 UNSHARE: 'UNSHARE', // OldDot Action
@@ -4740,6 +4742,12 @@ const CONST = {
         INITIAL_URL: 'INITIAL_URL',
     },
 
+    RESERVATION_TYPE: {
+        CAR: 'car',
+        HOTEL: 'hotel',
+        FLIGHT: 'flight',
+    },
+
     DOT_SEPARATOR: '•',
 
     DEFAULT_TAX: {

src/components/Icon/Expensicons.ts

@@ -19,6 +19,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';
@@ -28,6 +29,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';
@@ -124,6 +126,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';
@@ -344,6 +347,9 @@ export {
     ChatBubbleUnread,
     ChatBubbleReply,
     Lightbulb,
+    Plane,
+    Bed,
+    CarWithKey,
     DocumentPlus,
     Clear,
 };

src/components/MenuItem.tsx

@@ -1,6 +1,6 @@
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import type {ImageContentFit} from 'expo-image';
-import type {ReactNode} from 'react';
+import type {ReactElement, ReactNode} from 'react';
 import React, {forwardRef, useContext, useMemo} from 'react';
 import type {GestureResponderEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
@@ -105,6 +105,9 @@ type MenuItemBaseProps = {
     /** The fill color to pass into the secondary icon. */
     secondaryIconFill?: string;
 
+    /** Whether the secondary icon should have hover style */
+    isSecondaryIconHoverable?: boolean;
+
     /** Icon Width */
     iconWidth?: number;
 
@@ -182,6 +185,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;
 
@@ -300,6 +309,7 @@ function MenuItem(
         secondaryIcon,
         secondaryIconFill,
         iconType = CONST.ICON_TYPE_ICON,
+        isSecondaryIconHoverable = false,
         iconWidth,
         iconHeight,
         iconStyles,
@@ -321,6 +331,8 @@ function MenuItem(
         focused = false,
         disabled = false,
         title,
+        titleComponent,
+        titleContainerStyle,
         subtitle,
         shouldShowBasicTitle,
         label,
@@ -554,7 +566,7 @@ function MenuItem(
                                                 </View>
                                             )}
                                             {secondaryIcon && (
-                                                <View style={[styles.popoverMenuIcon, iconStyles]}>
+                                                <View style={[styles.popoverMenuIcon, iconStyles, isSecondaryIconHoverable && StyleUtils.getBackgroundAndBorderStyle(theme.border)]}>
                                                     <Icon
                                                         contentFit={contentFit}
                                                         src={secondaryIcon}
@@ -567,7 +579,9 @@ 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}
@@ -576,30 +590,32 @@ function MenuItem(
                                                         {description}
                                                     </Text>
                                                 )}
-                                                <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                                    {!!title && (shouldRenderAsHTML || (shouldParseTitle && !!html.length)) && (
-                                                        <View style={styles.renderHTMLTitle}>
-                                                            <RenderHTML html={processedTitle} />
-                                                        </View>
-                                                    )}
-                                                    {!shouldRenderAsHTML && !shouldParseTitle && !!title && (
-                                                        <Text
-                                                            style={combinedTitleTextStyle}
-                                                            numberOfLines={numberOfLinesTitle || undefined}
-                                                            dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: interactive && disabled}}
-                                                        >
-                                                            {renderTitleContent()}
-                                                        </Text>
-                                                    )}
-                                                    {shouldShowTitleIcon && titleIcon && (
-                                                        <View style={[styles.ml2]}>
-                                                            <Icon
-                                                                src={titleIcon}
-                                                                fill={theme.iconSuccessFill}
-                                                            />
-                                                        </View>
-                                                    )}
-                                                </View>
+                                                {(!!title || !!shouldShowTitleIcon) && (
+                                                    <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                                                        {!!title && (shouldRenderAsHTML || (shouldParseTitle && !!html.length)) && (
+                                                            <View style={styles.renderHTMLTitle}>
+                                                                <RenderHTML html={processedTitle} />
+                                                            </View>
+                                                        )}
+                                                        {!shouldRenderAsHTML && !shouldParseTitle && !!title && (
+                                                            <Text
+                                                                style={combinedTitleTextStyle}
+                                                                numberOfLines={numberOfLinesTitle || undefined}
+                                                                dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: interactive && disabled}}
+                                                            >
+                                                                {renderTitleContent()}
+                                                            </Text>
+                                                        )}
+                                                        {shouldShowTitleIcon && titleIcon && (
+                                                            <View style={[styles.ml2]}>
+                                                                <Icon
+                                                                    src={titleIcon}
+                                                                    fill={theme.iconSuccessFill}
+                                                                />
+                                                            </View>
+                                                        )}
+                                                    </View>
+                                                )}
                                                 {!!description && !shouldShowDescriptionOnTop && (
                                                     <Text
                                                         style={descriptionTextStyles}
@@ -626,6 +642,7 @@ function MenuItem(
                                                         </Text>
                                                     </View>
                                                 )}
+                                                {titleComponent}
                                             </View>
                                         </View>
                                     </View>