Merge pull request #56140 from software-mansion-labs/travel/cancellation-policy

Translate cancellation policy for hotel details page, recapitalize hotel names

Author: stitesExpensify

src/CONST.ts

@@ -5976,6 +5976,13 @@ const CONST = {
         TRAIN: 'train',
     },
 
+    CANCELLATION_POLICY: {
+        UNKNOWN: 'UNKNOWN',
+        NON_REFUNDABLE: 'NON_REFUNDABLE',
+        FREE_CANCELLATION_UNTIL: 'FREE_CANCELLATION_UNTIL',
+        PARTIALLY_REFUNDABLE: 'PARTIALLY_REFUNDABLE',
+    },
+
     DOT_SEPARATOR: '•',
 
     DEFAULT_TAX: {

src/components/ReportActionItem/TripDetailsView.tsx

@@ -1,3 +1,4 @@
+import {Str} from 'expensify-common';
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import Icon from '@components/Icon';
@@ -104,7 +105,7 @@ function ReservationView({reservation, transactionID, tripRoomReportID, reservat
                     numberOfLines={1}
                     style={[styles.textStrong, styles.lh20]}
                 >
-                    {reservation.type === CONST.RESERVATION_TYPE.CAR ? reservation.carInfo?.name : reservation.start.longName}
+                    {reservation.type === CONST.RESERVATION_TYPE.CAR ? reservation.carInfo?.name : Str.recapitalize(reservation.start.longName ?? '')}
                 </Text>
                 {!!bottomDescription && <Text style={[styles.textSmall, styles.colorMuted, styles.lh14]}>{bottomDescription}</Text>}
             </View>

src/components/ReportActionItem/TripRoomPreview.tsx

@@ -1,3 +1,4 @@
+import {Str} from 'expensify-common';
 import React, {useMemo} from 'react';
 import type {ListRenderItemInfo, StyleProp, ViewStyle} from 'react-native';
 import {FlatList, View} from 'react-native';
@@ -62,7 +63,7 @@ function ReservationView({reservation}: ReservationViewProps) {
     const {translate} = useLocalize();
 
     const reservationIcon = getTripReservationIcon(reservation.type);
-    const title = reservation.type === CONST.RESERVATION_TYPE.CAR ? reservation.carInfo?.name : reservation.start.longName;
+    const title = reservation.type === CONST.RESERVATION_TYPE.CAR ? reservation.carInfo?.name : Str.recapitalize(reservation.start.longName ?? '');
 
     let titleComponent = (
         <Text

src/languages/en.ts

@@ -2539,6 +2539,12 @@ const translations = {
             cancellation: 'Cancellation policy',
             cancellationUntil: 'Free cancellation until',
             confirmation: 'Confirmation number',
+            cancellationPolicies: {
+                unknown: 'Unknown',
+                nonRefundable: 'Non-refundable',
+                freeCancellationUntil: 'Free cancellation until',
+                partiallyRefundable: 'Partially refundable',
+            },
         },
         car: 'Car',
         carDetails: {

src/languages/es.ts

@@ -2563,6 +2563,12 @@ const translations = {
             cancellation: 'Política de cancelación',
             cancellationUntil: 'Cancelación gratuita hasta el',
             confirmation: 'Número de confirmación',
+            cancellationPolicies: {
+                unknown: 'Desconocido',
+                nonRefundable: 'No reembolsable',
+                freeCancellationUntil: 'Cancelación gratuita hasta',
+                partiallyRefundable: 'Parcialmente reembolsable',
+            },
         },
         car: 'Auto',
         carDetails: {

src/pages/Travel/HotelTripDetails.tsx

@@ -1,3 +1,4 @@
+import {Str} from 'expensify-common';
 import React from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -20,17 +21,24 @@ function HotelTripDetails({reservation, personalDetails}: HotelTripDetailsProps)
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
+    const cancellationMapping: Record<string, string> = {
+        [CONST.CANCELLATION_POLICY.UNKNOWN]: translate('travel.hotelDetails.cancellationPolicies.unknown'),
+        [CONST.CANCELLATION_POLICY.NON_REFUNDABLE]: translate('travel.hotelDetails.cancellationPolicies.nonRefundable'),
+        [CONST.CANCELLATION_POLICY.FREE_CANCELLATION_UNTIL]: translate('travel.hotelDetails.cancellationPolicies.freeCancellationUntil'),
+        [CONST.CANCELLATION_POLICY.PARTIALLY_REFUNDABLE]: translate('travel.hotelDetails.cancellationPolicies.partiallyRefundable'),
+    };
+
     const checkInDate = DateUtils.getFormattedTransportDateAndHour(new Date(reservation.start.date));
     const checkOutDate = DateUtils.getFormattedTransportDateAndHour(new Date(reservation.end.date));
     const cancellationText = reservation.cancellationDeadline
         ? `${translate('travel.hotelDetails.cancellationUntil')} ${DateUtils.getFormattedTransportDateAndHour(new Date(reservation.cancellationDeadline)).date}`
-        : reservation.cancellationPolicy;
+        : cancellationMapping[reservation.cancellationPolicy ?? CONST.CANCELLATION_POLICY.UNKNOWN];
 
     const displayName = personalDetails?.displayName ?? reservation.travelerPersonalInfo?.name;
 
     return (
         <>
-            <Text style={[styles.textHeadlineH1, styles.mh5, styles.mv3]}>{reservation.start.longName}</Text>
+            <Text style={[styles.textHeadlineH1, styles.mh5, styles.mv3]}>{Str.recapitalize(reservation.start.longName ?? '')}</Text>
             <MenuItemWithTopDescription
                 description={translate('common.address')}
                 title={reservation.start.address}