From 347714992d9d4ec941f65823e1ac0abed8fe89e2 Mon Sep 17 00:00:00 2001
From: Blazej Kustra <blazej.kustra@swmansion.com>
Date: Mon, 2 Dec 2024 11:38:20 +0100
Subject: [PATCH] Add TrainTripDetails component to display train reservation
 details

---
 src/pages/Travel/TrainTripDetails.tsx | 114 ++++++++++++++++++++++++++
 src/pages/Travel/TripDetailsPage.tsx  |   8 ++
 2 files changed, 122 insertions(+)
 create mode 100644 src/pages/Travel/TrainTripDetails.tsx

diff --git a/src/pages/Travel/TrainTripDetails.tsx b/src/pages/Travel/TrainTripDetails.tsx
new file mode 100644
index 00000000000..afaac7fdbf8
--- /dev/null
+++ b/src/pages/Travel/TrainTripDetails.tsx
@@ -0,0 +1,114 @@
+import React from 'react';
+import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import * as Expensicons from '@components/Icon/Expensicons';
+import MenuItem from '@components/MenuItem';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import DateUtils from '@libs/DateUtils';
+import * as TripReservationUtils from '@libs/TripReservationUtils';
+import CONST from '@src/CONST';
+import type {PersonalDetails, Transaction} from '@src/types/onyx';
+
+type TrainTripDetailsProps = {
+    transaction: OnyxEntry<Transaction>;
+    personalDetails: OnyxEntry<PersonalDetails>;
+    reservationIndex: number;
+};
+
+function TrainTripDetails({transaction, personalDetails, reservationIndex}: TrainTripDetailsProps) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+    const StyleUtils = useStyleUtils();
+    const {translate} = useLocalize();
+
+    const trainReservation = transaction?.receipt?.reservationList?.at(reservationIndex);
+
+    if (!trainReservation) {
+        return null;
+    }
+
+    const reservationIcon = TripReservationUtils.getTripReservationIcon(trainReservation.type);
+    const startDate = DateUtils.getFormattedTransportDateAndHour(new Date(trainReservation.start.date));
+    const endDate = DateUtils.getFormattedTransportDateAndHour(new Date(trainReservation.end.date));
+
+    return (
+        <>
+            <MenuItem
+                label={translate('travel.trainDetails.passenger')}
+                title={personalDetails?.displayName}
+                icon={personalDetails?.avatar ?? Expensicons.FallbackAvatar}
+                iconType={CONST.ICON_TYPE_AVATAR}
+                description={personalDetails?.login}
+                interactive={false}
+                wrapperStyle={styles.pb3}
+            />
+
+            <MenuItem
+                title={`${trainReservation.start.longName} (${trainReservation.start.shortName}) ${translate('common.conjunctionTo')} ${trainReservation.end.longName} (${
+                    trainReservation.end.shortName
+                })`}
+                description={`${trainReservation.company?.longName} ${CONST.DOT_SEPARATOR} ${trainReservation.route?.name}`}
+                descriptionTextStyle={[styles.textLabelSupporting, styles.lh16]}
+                secondaryIcon={reservationIcon}
+                wrapperStyle={[styles.taskDescriptionMenuItem]}
+                numberOfLinesDescription={2}
+                iconHeight={20}
+                iconWidth={20}
+                iconStyles={[StyleUtils.getTripReservationIconContainer(false), styles.mr3]}
+                secondaryIconFill={theme.icon}
+                interactive={false}
+            />
+            <MenuItemWithTopDescription
+                description={`${translate('travel.trainDetails.departs')} ${CONST.DOT_SEPARATOR} ${startDate.date}`}
+                title={startDate.hour}
+                helperText={`${trainReservation.start.longName} (${trainReservation.start.shortName})`}
+                helperTextStyle={[styles.pb3, styles.mtn2]}
+                interactive={false}
+            />
+            <MenuItemWithTopDescription
+                description={`${translate('travel.trainDetails.arrives')} ${CONST.DOT_SEPARATOR} ${endDate.date}`}
+                title={endDate.hour}
+                helperText={`${trainReservation.end.longName} (${trainReservation.end.shortName})`}
+                helperTextStyle={[styles.pb3, styles.mtn2]}
+                interactive={false}
+            />
+
+            <View style={[styles.flexRow, styles.flexWrap]}>
+                {!!trainReservation.coachNumber && (
+                    <View style={styles.w50}>
+                        <MenuItemWithTopDescription
+                            description={translate('travel.trainDetails.coachNumber')}
+                            title={trainReservation.coachNumber}
+                            interactive={false}
+                        />
+                    </View>
+                )}
+                {!!trainReservation.seatNumber && (
+                    <View style={styles.w50}>
+                        <MenuItemWithTopDescription
+                            description={translate('travel.trainDetails.seat')}
+                            title={trainReservation.seatNumber}
+                            interactive={false}
+                        />
+                    </View>
+                )}
+            </View>
+
+            {!!trainReservation.confirmations?.at(0)?.value && (
+                <MenuItemWithTopDescription
+                    description={translate('travel.trainDetails.confirmation')}
+                    title={trainReservation.confirmations?.at(0)?.value}
+                    interactive={false}
+                />
+            )}
+        </>
+    );
+}
+
+TrainTripDetails.displayName = 'TrainTripDetails';
+
+export default TrainTripDetails;
diff --git a/src/pages/Travel/TripDetailsPage.tsx b/src/pages/Travel/TripDetailsPage.tsx
index ee732829921..0b80f8b049d 100644
--- a/src/pages/Travel/TripDetailsPage.tsx
+++ b/src/pages/Travel/TripDetailsPage.tsx
@@ -21,6 +21,7 @@ import type SCREENS from '@src/SCREENS';
 import CarTripDetails from './CarTripDetails';
 import FlightTripDetails from './FlightTripDetails';
 import HotelTripDetails from './HotelTripDetails';
+import TrainTripDetails from './TrainTripDetails';
 
 type TripDetailsPageProps = StackScreenProps<TravelNavigatorParamList, typeof SCREENS.TRAVEL.TRIP_DETAILS>;
 
@@ -75,6 +76,13 @@ function TripDetailsPage({route}: TripDetailsPageProps) {
                             personalDetails={personalDetails}
                         />
                     )}
+                    {reservationType === CONST.RESERVATION_TYPE.TRAIN && (
+                        <TrainTripDetails
+                            transaction={transaction}
+                            personalDetails={personalDetails}
+                            reservationIndex={route.params.reservationIndex}
+                        />
+                    )}
                     <MenuItem
                         title={translate('travel.modifyTrip')}
                         icon={Expensicons.Pencil}