Add Cancelled badge for cancelled trips

src/CONST/index.ts

@@ -7305,6 +7305,7 @@ const CONST = {
 
     PNR_STATUS: {
         CANCELLED: 'CANCELLED',
+        CANCELLED_STATUS: 'CANCELLED_STATUS',
         VOIDED: 'VOIDED',
     },
 

src/libs/TripReservationUtils.ts

@@ -153,7 +153,8 @@ function getAirReservations(pnr: Pnr, travelers: PnrTraveler[]): ReservationItem
     const airports = pnr.data.additionalMetadata?.airportInfo ?? [];
 
     for (const travelerInfo of pnrData.travelerInfos) {
-        for (const ticket of travelerInfo.tickets) {
+        const ticketSource = travelerInfo.tickets.some((t) => t.flightCoupons.length > 0) ? travelerInfo.tickets : (travelerInfo.lastConfirmedTickets ?? travelerInfo.tickets);
+        for (const ticket of ticketSource) {
             const flightCoupons = ticket.flightCoupons;
             for (const [index, flightDetails] of flightCoupons.sort((a, b) => a.legIdx - b.legIdx).entries()) {
                 const legIdx = flightDetails.legIdx;
@@ -399,7 +400,7 @@ function getRailReservations(pnr: Pnr, travelers: PnrTraveler[]): ReservationIte
 }
 
 function isCancelledPnrStatus(status: string): boolean {
-    return status === CONST.PNR_STATUS.CANCELLED || status === CONST.PNR_STATUS.VOIDED;
+    return status === CONST.PNR_STATUS.CANCELLED || status === CONST.PNR_STATUS.CANCELLED_STATUS || status === CONST.PNR_STATUS.VOIDED;
 }
 
 function isPnrCancelled(pnr: Pnr): boolean {
@@ -541,6 +542,7 @@ function getReservationDetailsFromSequence(icons: TripReservationIcons, tripRese
         prevReservation,
         reservationType,
         reservationIcon,
+        isCancelled: reservationData?.isCancelled,
     };
 }
 

src/pages/Travel/TripDetailsPage.tsx

@@ -1,5 +1,5 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback, useState} from 'react';
+import React, {useState} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -17,7 +17,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import type {TravelNavigatorParamList} from '@libs/Navigation/types';
 import {getTripIDFromTransactionParentReportID} from '@libs/ReportUtils';
-import {getReservationDetailsFromSequence, getReservationsFromTripReport} from '@libs/TripReservationUtils';
+import {formatCancelledDescription, getReservationDetailsFromSequence, getReservationsFromTripReport} from '@libs/TripReservationUtils';
 import {openTravelDotLink} from '@userActions/Link';
 import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
@@ -73,8 +73,8 @@ function TripDetailsPage({route}: TripDetailsPageProps) {
     // If pnr is not passed and transaction is present, we want to use transaction to get the trip reservations as the provided sequenceIndex now refers to the position of trip reservation in transaction's reservation list
     const tripReservations = getReservationsFromTripReport(!Number(pnr) && transaction ? undefined : parentReport, transaction ? [transaction] : []);
 
-    const {reservation, prevReservation, reservationType, reservationIcon} = getReservationDetailsFromSequence(icons, tripReservations, Number(sequenceIndex));
-    const travelerPersonalDetailsSelector = useCallback((personalDetails: OnyxEntry<PersonalDetailsList>) => pickTravelerPersonalDetails(personalDetails, reservation), [reservation]);
+    const {reservation, prevReservation, reservationType, reservationIcon, isCancelled} = getReservationDetailsFromSequence(icons, tripReservations, Number(sequenceIndex));
+    const travelerPersonalDetailsSelector = (personalDetails: OnyxEntry<PersonalDetailsList>) => pickTravelerPersonalDetails(personalDetails, reservation);
 
     const [travelerPersonalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: travelerPersonalDetailsSelector}, [travelerPersonalDetailsSelector]);
 
@@ -91,7 +91,11 @@ function TripDetailsPage({route}: TripDetailsPageProps) {
                 shouldShow={!reservation || (!CONFIG.IS_HYBRID_APP && isBlockedFromSpotnanaTravel)}
             >
                 <HeaderWithBackButton
-                    title={reservationType ? `${translate(`travel.${reservationType}`)} ${translate('common.details').toLowerCase()}` : translate('common.details')}
+                    title={formatCancelledDescription(
+                        translate('iou.canceled'),
+                        reservationType ? `${translate(`travel.${reservationType}`)} ${translate('common.details').toLowerCase()}` : translate('common.details'),
+                        isCancelled,
+                    )}
                     shouldShowBackButton
                     icon={reservationIcon}
                     iconHeight={20}

src/pages/Travel/TripSummaryPage.tsx

@@ -41,14 +41,15 @@ function TripSummaryPage({route}: TripSummaryPageProps) {
                     shouldShowBackButton
                 />
                 <ScrollView>
-                    {reservationsData.map(({reservation, transactionID, sequenceIndex}) => {
+                    {reservationsData.map(({reservation, transactionID, sequenceIndex, isCancelled}) => {
                         return (
                             <OfflineWithFeedback key={`${transactionID}-${sequenceIndex}`}>
                                 <ReservationView
                                     reservation={reservation}
                                     transactionID={transactionID}
                                     tripRoomReportID={route.params.reportID}
                                     sequenceIndex={sequenceIndex}
+                                    isCancelled={isCancelled}
                                 />
                             </OfflineWithFeedback>
                         );

src/types/onyx/TripData.ts

@@ -887,6 +887,18 @@ type AirPnr = {
             /** Vendor cancellation ID for the ticket. */
             vendorCancellationId: string;
         }>;
+        /** Last confirmed tickets before cancellation/voiding. */
+        lastConfirmedTickets?: Array<{
+            /** Flight coupons associated with the ticket. */
+            flightCoupons: Array<{
+                /** Index of the flight. */
+                flightIdx: number;
+                /** Index of the leg. */
+                legIdx: number;
+                /** Status of the flight coupon. */
+                status: string;
+            }>;
+        }>;
         /** Index of the traveler. */
         travelerIdx: number;
         /** User ID associated with the traveler. */