Merge pull request Expensify#64891 from parasharrajat/revert-64769-revert-63853-parasharrajat/travel-update

Use tripdata payload to get reservations setup

Author: rlinoz

cspell.json

@@ -682,7 +682,8 @@
         "zoneinfo",
         "zxcv",
         "zxldvw",
-        "مثال"
+        "مثال",
+        "pnrs"
     ],
     "ignorePaths": [
         "src/languages/de.ts",

src/ROUTES.ts

@@ -1957,12 +1957,12 @@ const ROUTES = {
         },
     },
     TRAVEL_TRIP_DETAILS: {
-        route: 'r/:reportID/trip/:transactionID/:reservationIndex',
-        getRoute: (reportID: string | undefined, transactionID: string | undefined, reservationIndex: number, backTo?: string) => {
-            if (!reportID || !transactionID) {
-                Log.warn('Invalid reportID or transactionID is used to build the TRAVEL_TRIP_DETAILS route');
+        route: 'r/:reportID/trip/:transactionID/:pnr/:sequenceIndex',
+        getRoute: (reportID: string | undefined, transactionID: string | undefined, pnr: string | undefined, sequenceIndex: number, backTo?: string) => {
+            if (!reportID || !transactionID || !pnr) {
+                Log.warn('Invalid reportID, transactionID or pnr is used to build the TRAVEL_TRIP_DETAILS route');
             }
-            return getUrlWithBackToParam(`r/${reportID}/trip/${transactionID}/${reservationIndex}`, backTo);
+            return getUrlWithBackToParam(`r/${reportID}/trip/${transactionID}/${pnr}/${sequenceIndex}`, backTo);
         },
     },
     TRAVEL_DOMAIN_SELECTOR: {

src/components/ReportActionItem/MoneyRequestView.tsx

@@ -866,7 +866,7 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals
                             if (reservations > 1) {
                                 Navigation.navigate(ROUTES.TRAVEL_TRIP_SUMMARY.getRoute(report.reportID, transaction.transactionID, getReportRHPActiveRoute()));
                             }
-                            Navigation.navigate(ROUTES.TRAVEL_TRIP_DETAILS.getRoute(report.reportID, transaction.transactionID, 0, getReportRHPActiveRoute()));
+                            Navigation.navigate(ROUTES.TRAVEL_TRIP_DETAILS.getRoute(report.reportID, transaction.transactionID, '0', 0, getReportRHPActiveRoute()));
                         }}
                     />
                 )}

src/components/ReportActionItem/TripDetailsView.tsx

@@ -1,6 +1,7 @@
 import {Str} from 'expensify-common';
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import Icon from '@components/Icon';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
@@ -18,19 +19,20 @@ import variables from '@styles/variables';
 import * as Expensicons from '@src/components/Icon/Expensicons';
 import CONST from '@src/CONST';
 import type {ReservationData} from '@src/libs/TripReservationUtils';
-import {getReservationsFromTripTransactions, getTripReservationCode, getTripReservationIcon} from '@src/libs/TripReservationUtils';
+import {getReservationsFromTripReport, getTripReservationCode, getTripReservationIcon} from '@src/libs/TripReservationUtils';
 import ROUTES from '@src/ROUTES';
+import type {Report} from '@src/types/onyx';
 import type {Reservation, ReservationTimeDetails} from '@src/types/onyx/Transaction';
 import type Transaction from '@src/types/onyx/Transaction';
 
 type ReservationViewProps = {
     reservation: Reservation;
     transactionID: string;
     tripRoomReportID: string;
-    reservationIndex: number;
+    sequenceIndex: number;
 };
 
-function ReservationView({reservation, transactionID, tripRoomReportID, reservationIndex}: ReservationViewProps) {
+function ReservationView({reservation, transactionID, tripRoomReportID, sequenceIndex}: ReservationViewProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -139,14 +141,18 @@ function ReservationView({reservation, transactionID, tripRoomReportID, reservat
             iconWidth={20}
             iconStyles={[StyleUtils.getTripReservationIconContainer(false), styles.mr3]}
             secondaryIconFill={theme.icon}
-            onPress={() => Navigation.navigate(ROUTES.TRAVEL_TRIP_DETAILS.getRoute(tripRoomReportID, transactionID, reservationIndex, Navigation.getReportRHPActiveRoute()))}
+            onPress={() =>
+                Navigation.navigate(
+                    ROUTES.TRAVEL_TRIP_DETAILS.getRoute(tripRoomReportID, transactionID, String(reservation.reservationID), sequenceIndex, Navigation.getReportRHPActiveRoute()),
+                )
+            }
         />
     );
 }
 
 type TripDetailsViewProps = {
     /** The active tripRoomReportID, used for Onyx subscription */
-    tripRoomReportID: string;
+    tripRoomReport: OnyxEntry<Report>;
 
     /** Whether we should display the horizontal rule below the component */
     shouldShowHorizontalRule: boolean;
@@ -155,11 +161,15 @@ type TripDetailsViewProps = {
     tripTransactions: Transaction[];
 };
 
-function TripDetailsView({tripRoomReportID, shouldShowHorizontalRule, tripTransactions}: TripDetailsViewProps) {
+function TripDetailsView({tripRoomReport, shouldShowHorizontalRule, tripTransactions}: TripDetailsViewProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
-    const reservationsData: ReservationData[] = getReservationsFromTripTransactions(tripTransactions);
+    if (!tripRoomReport) {
+        return null;
+    }
+
+    const reservationsData: ReservationData[] = getReservationsFromTripReport(tripRoomReport, tripTransactions);
 
     return (
         <View>
@@ -174,14 +184,14 @@ function TripDetailsView({tripRoomReportID, shouldShowHorizontalRule, tripTransa
                 </View>
             </View>
             <>
-                {reservationsData.map(({reservation, transactionID, reservationIndex}) => {
+                {reservationsData.map(({reservation, transactionID, sequenceIndex}) => {
                     return (
                         <OfflineWithFeedback>
                             <ReservationView
                                 reservation={reservation}
                                 transactionID={transactionID}
-                                tripRoomReportID={tripRoomReportID}
-                                reservationIndex={reservationIndex}
+                                tripRoomReportID={tripRoomReport.reportID}
+                                sequenceIndex={sequenceIndex}
                             />
                         </OfflineWithFeedback>
                     );

src/components/ReportActionItem/TripRoomPreview.tsx

@@ -20,9 +20,8 @@ import {convertToDisplayString} from '@libs/CurrencyUtils';
 import DateUtils from '@libs/DateUtils';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import Navigation from '@libs/Navigation/Navigation';
-import {getMoneyRequestSpendBreakdown} from '@libs/ReportUtils';
 import type {ReservationData} from '@libs/TripReservationUtils';
-import {getReservationsFromTripTransactions, getTripReservationIcon} from '@libs/TripReservationUtils';
+import {getReservationsFromTripReport, getTripReservationIcon, getTripTotal} 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';
@@ -154,14 +153,15 @@ function TripRoomPreview({
     const chatReportID = chatReport?.reportID;
     const tripTransactions = useTripTransactions(chatReportID);
 
-    const reservationsData: ReservationData[] = getReservationsFromTripTransactions(tripTransactions);
+    const reservationsData: ReservationData[] = getReservationsFromTripReport(chatReport, tripTransactions);
     const dateInfo =
         chatReport?.tripData?.startDate && chatReport?.tripData?.endDate
             ? DateUtils.getFormattedDateRange(new Date(chatReport.tripData.startDate), new Date(chatReport.tripData.endDate))
             : '';
-    const {totalDisplaySpend} = getMoneyRequestSpendBreakdown(chatReport);
+    const reportCurrency = iouReport?.currency ?? chatReport?.currency;
+
+    const {totalDisplaySpend = 0, currency = reportCurrency} = chatReport ? getTripTotal(chatReport) : {};
 
-    const currency = iouReport?.currency ?? chatReport?.currency;
     const displayAmount = useMemo(() => {
         if (totalDisplaySpend) {
             return convertToDisplayString(totalDisplaySpend, currency);

src/libs/DebugUtils.ts

@@ -558,6 +558,7 @@ function validateReportDraftProperty(key: keyof Report | keyof ReportNameValuePa
                 startDate: 'string',
                 endDate: 'string',
                 tripID: 'string',
+                payload: 'object',
             });
         case 'calendlySchedule':
             return validateObject<ObjectElement<ReportNameValuePairs, 'calendlySchedule'>>(value, {

src/libs/Navigation/types.ts

@@ -1726,7 +1726,8 @@ type TravelNavigatorParamList = {
     [SCREENS.TRAVEL.TRIP_DETAILS]: {
         reportID: string;
         transactionID: string;
-        reservationIndex: number;
+        sequenceIndex: number;
+        pnr: string;
         backTo?: string;
     };
     [SCREENS.TRAVEL.TCS]: {