[VIP-Travel] Create Trip Room Preview

src/components/ReportActionItem/TripDetailsView.tsx

@@ -125,7 +125,7 @@ function ReservationView({reservation}: ReservationViewProps) {
             onSecondaryInteraction={() => {}}
             iconHeight={20}
             iconWidth={20}
-            iconStyles={[styles.tripReservationIconContainer, styles.mr3]}
+            iconStyles={[styles.tripReservationIconContainer(false), styles.mr3]}
             secondaryIconFill={theme.icon}
             hoverAndPressStyle={styles.hoveredComponentBG}
         />

src/components/ReportActionItem/TripRoomPreview.tsx

@@ -0,0 +1,204 @@
+import React, {useMemo} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
+import {FlatList, View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import Button from '@components/Button';
+import Icon from '@components/Icon';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import {PressableWithoutFeedback} from '@components/Pressable';
+import {showContextMenuForReport} from '@components/ShowContextMenuContext';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import ControlSelection from '@libs/ControlSelection';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
+import DateUtils from '@libs/DateUtils';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import Navigation from '@libs/Navigation/Navigation';
+import * as ReportUtils from '@libs/ReportUtils';
+import * as TripReservationUtils from '@libs/TripReservationUtils';
+import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
+import variables from '@styles/variables';
+import * as Expensicons from '@src/components/Icon/Expensicons';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type {ReportAction} from '@src/types/onyx';
+import type {Reservation} from '@src/types/onyx/Transaction';
+
+type TripRoomPreviewProps = {
+    /** All the data of the action */
+    action: ReportAction;
+
+    /** The associated chatReport */
+    chatReportID: string;
+
+    /** Extra styles to pass to View wrapper */
+    containerStyles?: StyleProp<ViewStyle>;
+
+    /** Popover context menu anchor, used for showing context menu */
+    contextMenuAnchor?: ContextMenuAnchor;
+
+    /** Callback for updating context menu active state, used for showing context menu */
+    checkIfContextMenuActive?: () => void;
+
+    /** Whether a message is a whisper */
+    isWhisper?: boolean;
+
+    /** Whether the corresponding report action item is hovered */
+    isHovered?: boolean;
+};
+
+type ReservationViewProps = {
+    reservation: Reservation;
+};
+
+function ReservationView({reservation}: ReservationViewProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
+    const reservationIcon = TripReservationUtils.getTripReservationIcon(reservation.type);
+    const title = reservation.type === CONST.RESERVATION_TYPE.CAR ? reservation.carInfo?.name : reservation.start.longName;
+
+    const titleComponent =
+        reservation.type === CONST.RESERVATION_TYPE.FLIGHT ? (
+            <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap2]}>
+                <Text style={styles.labelStrong}>{reservation.start.shortName}</Text>
+                <Icon
+                    src={Expensicons.ArrowRightLong}
+                    width={variables.iconSizeSmall}
+                    height={variables.iconSizeSmall}
+                    fill={theme.icon}
+                />
+                <Text style={styles.labelStrong}>{reservation.end.shortName}</Text>
+            </View>
+        ) : (
+            <Text
+                numberOfLines={1}
+                style={styles.labelStrong}
+            >
+                {title}
+            </Text>
+        );
+
+    return (
+        <MenuItemWithTopDescription
+            description={translate(`travel.${reservation.type}`)}
+            descriptionTextStyle={styles.textMicro}
+            titleComponent={titleComponent}
+            titleContainerStyle={styles.tripReservationTitleGap}
+            secondaryIcon={reservationIcon}
+            shouldShowRightIcon={false}
+            wrapperStyle={[styles.taskDescriptionMenuItem, styles.p0]}
+            shouldGreyOutWhenDisabled={false}
+            numberOfLinesTitle={0}
+            interactive={false}
+            shouldStackHorizontally={false}
+            hoverAndPressStyle={false}
+            iconHeight={variables.iconSizeSmall}
+            iconWidth={variables.iconSizeSmall}
+            iconStyles={[styles.tripReservationIconContainer(true), styles.mr3]}
+            secondaryIconFill={theme.icon}
+            isSmallAvatarSubscriptMenu
+        />
+    );
+}
+
+const renderItem = ({item}: {item: Reservation}) => <ReservationView reservation={item} />;
+
+function TripRoomPreview({action, chatReportID, containerStyles, contextMenuAnchor, isHovered = false, isWhisper = false, checkIfContextMenuActive = () => {}}: TripRoomPreviewProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`);
+    const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReport?.iouReportID}`);
+
+    const tripTransactions = ReportUtils.getTripTransactions(chatReport?.iouReportID, 'reportID');
+    const reservations: Reservation[] = TripReservationUtils.getReservationsFromTripTransactions(tripTransactions);
+    const dateInfo = chatReport?.tripData ? DateUtils.getFormattedDateRange(new Date(chatReport.tripData.startDate), new Date(chatReport.tripData.endDate)) : '';
+    const {totalDisplaySpend} = ReportUtils.getMoneyRequestSpendBreakdown(chatReport);
+
+    const displayAmount = useMemo(() => {
+        if (totalDisplaySpend) {
+            return CurrencyUtils.convertToDisplayString(totalDisplaySpend, iouReport?.currency);
+        }
+
+        // If iouReport is not available, get amount from the action message (Ex: "Domain20821's Workspace owes $33.00" or "paid ₫60" or "paid -₫60 elsewhere")
+        let displayAmountValue = '';
+        const actionMessage = action.message?.[0]?.text ?? '';
+        const splits = actionMessage.split(' ');
+
+        splits.forEach((split) => {
+            if (!/\d/.test(split)) {
+                return;
+            }
+
+            displayAmountValue = split;
+        });
+
+        return displayAmountValue;
+    }, [action.message, iouReport?.currency, totalDisplaySpend]);
+
+    return (
+        <OfflineWithFeedback
+            pendingAction={action?.pendingAction}
+            shouldDisableOpacity={!!(action.pendingAction ?? action.isOptimisticAction)}
+            needsOffscreenAlphaCompositing
+        >
+            <View style={[styles.chatItemMessage, containerStyles]}>
+                <PressableWithoutFeedback
+                    onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+                    onPressOut={() => ControlSelection.unblock()}
+                    onLongPress={(event) => showContextMenuForReport(event, contextMenuAnchor, chatReportID, action, checkIfContextMenuActive)}
+                    shouldUseHapticsOnLongPress
+                    style={[styles.flexRow, styles.justifyContentBetween, styles.reportPreviewBox, styles.cursorDefault]}
+                    role={CONST.ROLE.BUTTON}
+                    accessibilityLabel={translate('iou.viewDetails')}
+                >
+                    <View style={[styles.moneyRequestPreviewBox, styles.p4, styles.gap5, isHovered || isWhisper ? styles.reportPreviewBoxHoverBorder : undefined]}>
+                        <View style={styles.expenseAndReportPreviewTextContainer}>
+                            <View style={styles.reportPreviewAmountSubtitleContainer}>
+                                <View style={styles.flexRow}>
+                                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                                        <Text style={[styles.textLabelSupporting, styles.lh16]}>
+                                            {translate('travel.trip')} • {dateInfo}
+                                        </Text>
+                                    </View>
+                                </View>
+                            </View>
+                            <View style={styles.reportPreviewAmountSubtitleContainer}>
+                                <View style={styles.flexRow}>
+                                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                                        <Text style={styles.textHeadlineH2}>{displayAmount}</Text>
+                                    </View>
+                                </View>
+                                <View style={styles.flexRow}>
+                                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                                        <Text style={[styles.textLabelSupporting, styles.textNormal, styles.lh20]}>{chatReport?.reportName}</Text>
+                                    </View>
+                                </View>
+                            </View>
+                        </View>
+                        <FlatList
+                            data={reservations}
+                            style={styles.gap3}
+                            renderItem={renderItem}
+                        />
+                        <Button
+                            medium
+                            success
+                            text={translate('travel.viewTrip')}
+                            onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(chatReportID))}
+                        />
+                    </View>
+                </PressableWithoutFeedback>
+            </View>
+        </OfflineWithFeedback>
+    );
+}
+
+TripRoomPreview.displayName = 'TripRoomPreview';
+
+export default TripRoomPreview;

src/libs/ReportActionsUtils.ts

@@ -563,7 +563,12 @@ function shouldReportActionBeVisible(reportAction: OnyxEntry<ReportAction>, key:
     // All other actions are displayed except thread parents, deleted, or non-pending actions
     const isDeleted = isDeletedAction(reportAction);
     const isPending = !!reportAction.pendingAction;
-    return !isDeleted || isPending || isDeletedParentAction(reportAction) || isReversedTransaction(reportAction);
+
+    // @TODO: isTripRoomPreview condition has been added to make the TripRoomPreview component visible.
+    // Remove it when the reportAction.message array is not empty for this type, then !isDeleted will be true.
+    const isTripRoomPreview = reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.TRIPPREVIEW;
+
+    return isTripRoomPreview || !isDeleted || isPending || isDeletedParentAction(reportAction) || isReversedTransaction(reportAction);
 }
 
 /**

src/libs/ReportUtils.ts

@@ -6694,9 +6694,9 @@ function shouldCreateNewMoneyRequestReport(existingIOUReport: OnyxEntry<Report>
     return !existingIOUReport || hasIOUWaitingOnCurrentUserBankAccount(chatReport) || !canAddOrDeleteTransactions(existingIOUReport);
 }
 
-function getTripTransactions(tripRoomReportID: string | undefined): Transaction[] {
+function getTripTransactions(tripRoomReportID: string | undefined, reportFieldToCompare: 'parentReportID' | 'reportID' = 'parentReportID'): Transaction[] {
     const tripTransactionReportIDs = Object.values(allReports ?? {})
-        .filter((report) => report && report?.parentReportID === tripRoomReportID)
+        .filter((report) => report && report?.[reportFieldToCompare] === tripRoomReportID)
         .map((report) => report?.reportID);
     return tripTransactionReportIDs.flatMap((reportID) => TransactionUtils.getAllReportTransactions(reportID));
 }

src/pages/home/report/ReportActionItem.tsx

@@ -30,11 +30,13 @@ import TaskAction from '@components/ReportActionItem/TaskAction';
 import TaskPreview from '@components/ReportActionItem/TaskPreview';
 import TaskView from '@components/ReportActionItem/TaskView';
 import TripDetailsView from '@components/ReportActionItem/TripDetailsView';
+import TripRoomPreview from '@components/ReportActionItem/TripRoomPreview';
 import {ShowContextMenuContext} from '@components/ShowContextMenuContext';
 import SpacerView from '@components/SpacerView';
 import Text from '@components/Text';
 import UnreadActionIndicator from '@components/UnreadActionIndicator';
 import useLocalize from '@hooks/useLocalize';
+import usePermissions from '@hooks/usePermissions';
 import usePrevious from '@hooks/usePrevious';
 import useReportScrollManager from '@hooks/useReportScrollManager';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -200,6 +202,7 @@ function ReportActionItem({
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
+    const {canUseSpotnanaTravel} = usePermissions();
     const [isContextMenuActive, setIsContextMenuActive] = useState(() => ReportActionContextMenu.isActiveReportAction(action.reportActionID));
     const [isEmojiPickerActive, setIsEmojiPickerActive] = useState<boolean | undefined>();
 
@@ -540,6 +543,18 @@ function ReportActionItem({
                     isWhisper={isWhisper}
                 />
             );
+        } else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.TRIPPREVIEW && canUseSpotnanaTravel) {
+            children = (
+                <TripRoomPreview
+                    action={action}
+                    chatReportID={action.originalMessage.linkedReportID}
+                    isHovered={hovered}
+                    contextMenuAnchor={popoverAnchorRef.current}
+                    containerStyles={displayAsGroup ? [] : [styles.mt2]}
+                    checkIfContextMenuActive={toggleContextMenuFromActiveReportAction}
+                    isWhisper={isWhisper}
+                />
+            );
         } else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW) {
             children = ReportUtils.isClosedExpenseReportWithNoExpenses(iouReport) ? (
                 <RenderHTML html={`<comment>${translate('parentReportAction.deletedReport')}</comment>`} />

src/styles/index.ts

@@ -4971,13 +4971,17 @@ const styles = (theme: ThemeColors) =>
             flex: 1,
         },
 
-        tripReservationIconContainer: {
-            width: variables.avatarSizeNormal,
-            height: variables.avatarSizeNormal,
+        tripReservationIconContainer: (isSmallIcon: boolean) => ({
+            width: isSmallIcon ? variables.avatarSizeSmallNormal : variables.avatarSizeNormal,
+            height: isSmallIcon ? variables.avatarSizeSmallNormal : variables.avatarSizeNormal,
+            borderRadius: isSmallIcon ? variables.avatarSizeSmallNormal : variables.componentBorderRadiusXLarge,
             backgroundColor: theme.border,
-            borderRadius: variables.componentBorderRadiusXLarge,
             alignItems: 'center',
             justifyContent: 'center',
+        }),
+
+        tripReservationTitleGap: {
+            gap: 2,
         },
 
         textLineThrough: {

src/types/onyx/Report.ts

@@ -203,6 +203,12 @@ type Report = OnyxCommon.OnyxValueWithOfflineFeedback<
         fieldList?: Record<string, PolicyReportField>;
 
         permissions?: Array<ValueOf<typeof CONST.REPORT.PERMISSIONS>>;
+
+        tripData?: {
+            startDate: string;
+            endDate: string;
+            tripId: string;
+        };
     },
     PolicyReportField['fieldID']
 >;