@qite/tide-booking-component 1.4.97 → 1.4.99

package/src/search-results/store/search-results-slice.ts

@@ -1,6 +1,6 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { ExtendedFlightSearchResponseItem, Filter, SortByType } from '../types';
-import { BookingPackage, BookingPackageItem, EntryLight, PackagingAccommodationResponse } from '@qite/tide-client/build/types';
+import { AccommodationFlyInStep, ExtendedFlightSearchResponseItem, Filter, SortByType } from '../types';
+import { BookingPackage, BookingPackageItem, PackagingAccommodationResponse, PackagingEntry } from '@qite/tide-client/build/types';
 
 export interface SearchResultsState {
   results: BookingPackageItem[];
@@ -13,13 +13,15 @@ export interface SearchResultsState {
   selectedFlight: ExtendedFlightSearchResponseItem | null;
   selectedFlightDetails: ExtendedFlightSearchResponseItem | null;
   bookingPackageDetails: BookingPackage | null;
-  entry: EntryLight | null;
   isLoading: boolean;
   filters: Filter[];
   selectedSortType: SortByType | null;
   activeTab: string | null;
   currentPage: number;
   flyInIsOpen: boolean;
+  editablePackagingEntry: PackagingEntry | null;
+  transactionId: string | null;
+  accommodationFlyInStep: AccommodationFlyInStep;
 }
 
 const initialState: SearchResultsState = {
@@ -33,13 +35,15 @@ const initialState: SearchResultsState = {
   selectedFlight: null,
   selectedFlightDetails: null,
   bookingPackageDetails: null,
-  entry: null,
   isLoading: false,
   filters: [],
   selectedSortType: null,
   activeTab: 'compact',
   currentPage: 1,
-  flyInIsOpen: false
+  flyInIsOpen: false,
+  editablePackagingEntry: null,
+  transactionId: null,
+  accommodationFlyInStep: 'details'
 };
 
 const searchResultsSlice = createSlice({
@@ -76,9 +80,6 @@ const searchResultsSlice = createSlice({
     setBookingPackageDetails(state, action: PayloadAction<{ details: BookingPackage }>) {
       state.bookingPackageDetails = action.payload.details;
     },
-    setEntry(state, action: PayloadAction<{ entry: EntryLight }>) {
-      state.entry = action.payload.entry;
-    },
     selectFlight(state, action: PayloadAction<{ flightOptionId: string; isDeparture: boolean }>) {
       if (!state.bookingPackageDetails) return;
 
@@ -128,6 +129,15 @@ const searchResultsSlice = createSlice({
     },
     setFlyInIsOpen(state, action: PayloadAction<boolean>) {
       state.flyInIsOpen = action.payload;
+    },
+    setEditablePackagingEntry(state, action: PayloadAction<PackagingEntry | null>) {
+      state.editablePackagingEntry = action.payload;
+    },
+    setTransactionId(state, action: PayloadAction<string | null>) {
+      state.transactionId = action.payload;
+    },
+    setAccommodationFlyInStep(state, action: PayloadAction<AccommodationFlyInStep>) {
+      state.accommodationFlyInStep = action.payload;
     }
   }
 });
@@ -143,7 +153,6 @@ export const {
   setSelectedFlight,
   setSelectedFlightDetails,
   setBookingPackageDetails,
-  setEntry,
   selectFlight,
   setIsLoading,
   setFilters,
@@ -152,7 +161,10 @@ export const {
   setActiveTab,
   setCurrentPage,
   resetSearchState,
-  setFlyInIsOpen
+  setFlyInIsOpen,
+  setEditablePackagingEntry,
+  setTransactionId,
+  setAccommodationFlyInStep
 } = searchResultsSlice.actions;
 
 export default searchResultsSlice.reducer;

package/src/search-results/types.ts

@@ -1,4 +1,10 @@
-import { BookingPackage, FlightSearchResponseItem, WebsiteConfigurationSearchConfiguration } from '@qite/tide-client';
+import {
+  BookingPackage,
+  BookingPackageRequestRoom,
+  FlightSearchResponseItem,
+  PackagingEntry,
+  WebsiteConfigurationSearchConfiguration
+} from '@qite/tide-client';
 import { ReactNode } from 'react';
 
 export type FlightSelectionMode = 'paired' | 'independent';
@@ -53,6 +59,7 @@ export interface SearchResultsConfiguration {
 
   destinationImage?: { url: string; alt: string };
   onBook?: (result: BookingPackage) => void;
+  packagingEntry?: PackagingEntry;
 }
 
 export type FilterType = 'checkbox' | 'toggle' | 'slider' | 'star-rating';
@@ -179,3 +186,21 @@ export interface TideTag {
   id: number;
   name: string;
 }
+
+export type SearchSeed = {
+  fromDate: string;
+  toDate: string;
+  country?: number | null;
+  region?: number | null;
+  oord?: number | null;
+  location?: number | null;
+  hotel?: number | null;
+  hotelCode?: string | null;
+  tagId?: number | null;
+  departureAirport?: string | null;
+  returnAirport?: string | null;
+  destinationAirport?: string | null;
+  rooms: BookingPackageRequestRoom[];
+};
+
+export type AccommodationFlyInStep = 'results' | 'details';

package/src/search-results/utils/packaging-utils.ts

@@ -0,0 +1,75 @@
+import { BookingPackagePax, BookingPackageRequestRoom, PackagingAccommodationResponse, PackagingEntry, PackagingEntryLine } from '@qite/tide-client';
+import { ACCOMMODATION_SERVICE_TYPE } from './query-utils';
+
+export const getSelectedOptionsPerRoom = (details: PackagingAccommodationResponse[]) => {
+  const firstResult = details[0];
+  if (!firstResult?.rooms?.length) return [];
+
+  return firstResult.rooms.map((room, roomIndex) => {
+    const selectedOption = room.options.find((option) => option.isSelected) ?? room.options[0];
+
+    return {
+      roomIndex,
+      option: selectedOption ?? null
+    };
+  });
+};
+
+export const getRoomIndexFromLine = (line: PackagingEntryLine): number => {
+  if (!line.pax?.length) return 0;
+
+  const firstPax = [...line.pax].sort((a, b) => a.order - b.order)[0];
+  return firstPax?.room ?? 0;
+};
+
+export const getRequestRoomsFromPackagingSegments = (entry: PackagingEntry, segments: PackagingEntryLine[]): BookingPackageRequestRoom[] => {
+  const accommodationLines = [...(segments ?? [])]
+    .filter((line) => line.serviceType === ACCOMMODATION_SERVICE_TYPE && line.pax?.length > 0)
+    .sort((a, b) => a.order - b.order);
+
+  const paxById = new Map((entry.pax ?? []).map((p) => [p.id, p]));
+
+  if (!accommodationLines.length) {
+    return [];
+  }
+
+  const roomGroups: BookingPackagePax[][] = [];
+
+  accommodationLines.forEach((line) => {
+    const groupedByRoom = new Map<number, BookingPackagePax[]>();
+
+    line.pax.forEach((linePax) => {
+      const roomIndexWithinLine = Number(linePax.room ?? 0);
+      const paxId = Number(linePax.paxId);
+      const paxSource = paxById.get(paxId);
+
+      const pax: BookingPackagePax = {
+        id: paxSource?.id ?? paxId,
+        guid: paxSource?.id?.toString() ?? paxId.toString(),
+        firstName: paxSource?.firstName ?? '',
+        lastName: paxSource?.lastName ?? '',
+        dateOfBirth: paxSource?.dateOfBirth ?? undefined,
+        age: paxSource?.dateOfBirth ? undefined : 30,
+        isMainBooker: paxSource?.isMainBooker,
+        email: ''
+      };
+
+      if (!groupedByRoom.has(roomIndexWithinLine)) {
+        groupedByRoom.set(roomIndexWithinLine, []);
+      }
+
+      groupedByRoom.get(roomIndexWithinLine)!.push(pax);
+    });
+
+    const sortedGroups = Array.from(groupedByRoom.entries())
+      .sort(([a], [b]) => a - b)
+      .map(([, pax]) => pax);
+
+    roomGroups.push(...sortedGroups);
+  });
+
+  return roomGroups.map((pax, index) => ({
+    index,
+    pax
+  }));
+};

package/src/search-results/utils/query-utils.ts

@@ -0,0 +1,152 @@
+import {
+  PackagingEntryLine,
+  PackagingEntryPax,
+  BookingPackagePax,
+  PackagingEntry,
+  BookingPackageRequestRoom,
+  PackagingRoom,
+  PackagingTraveller
+} from '@qite/tide-client';
+import { range } from 'lodash';
+
+export const GROUP_TOUR_SERVICE_TYPE = 1;
+export const ACCOMMODATION_SERVICE_TYPE = 3;
+export const FLIGHT_SERVICE_TYPE = 7;
+
+export const toDateOnlyString = (value: string | Date): string => {
+  const date = value instanceof Date ? value : new Date(value);
+  return date.toISOString().split('T')[0];
+};
+
+const getAgeAtReferenceDate = (dateOfBirth: string | Date, referenceDate: string | Date): number => {
+  const dob = dateOfBirth instanceof Date ? dateOfBirth : new Date(dateOfBirth);
+  const ref = referenceDate instanceof Date ? referenceDate : new Date(referenceDate);
+
+  let age = ref.getFullYear() - dob.getFullYear();
+  const monthDiff = ref.getMonth() - dob.getMonth();
+
+  if (monthDiff < 0 || (monthDiff === 0 && ref.getDate() < dob.getDate())) {
+    age--;
+  }
+
+  return age;
+};
+
+export const getPrimaryAccommodationLine = (lines: PackagingEntryLine[]): PackagingEntryLine | undefined => {
+  return [...lines]
+    .filter((line) => line.serviceType === ACCOMMODATION_SERVICE_TYPE)
+    .sort((a, b) => new Date(a.from).getTime() - new Date(b.from).getTime())[0];
+};
+
+const getFlightLines = (lines: PackagingEntryLine[]): PackagingEntryLine[] => {
+  return [...lines].filter((line) => line.serviceType === FLIGHT_SERVICE_TYPE).sort((a, b) => new Date(a.from).getTime() - new Date(b.from).getTime());
+};
+
+export const getDepartureAirportFromEntry = (lines: PackagingEntryLine[]): string | null => {
+  const firstFlight = getFlightLines(lines)[0];
+  const firstSegment = firstFlight?.flightInformation?.flightLines?.[0];
+  return firstSegment?.departureAirportCode ?? null;
+};
+
+export const getDestinationAirportFromEntry = (lines: PackagingEntryLine[]): string | null => {
+  const outboundFlight = getFlightLines(lines)[0];
+  const flightSegments = outboundFlight?.flightInformation?.flightLines;
+
+  if (!flightSegments?.length) return null;
+
+  return flightSegments[flightSegments.length - 1]?.arrivalAirportCode ?? null;
+};
+
+const mapPackagingPaxToBookingPax = (pax: PackagingEntryPax | undefined, fallbackId: number, referenceDate: string): BookingPackagePax => ({
+  id: pax?.id ?? fallbackId,
+  guid: pax?.id?.toString() ?? fallbackId.toString(),
+  firstName: pax?.firstName ?? '',
+  lastName: pax?.lastName ?? '',
+  dateOfBirth: pax?.dateOfBirth ?? undefined,
+  age: pax?.dateOfBirth ? getAgeAtReferenceDate(pax.dateOfBirth, referenceDate) : undefined,
+  isMainBooker: pax?.isMainBooker,
+  email: ''
+});
+
+export const getRequestRoomsFromPackagingEntry = (entry: PackagingEntry): BookingPackageRequestRoom[] => {
+  const accommodationLines = (entry.lines ?? []).filter((line) => line.serviceType === ACCOMMODATION_SERVICE_TYPE && line.pax?.length > 0);
+
+  const paxById = new Map((entry.pax ?? []).map((p) => [p.id, p]));
+
+  if (!accommodationLines.length) {
+    return [
+      {
+        index: 0,
+        pax: (entry.pax ?? []).map((p) => mapPackagingPaxToBookingPax(p, p.id, new Date().toISOString()))
+      }
+    ];
+  }
+
+  const roomGroups: BookingPackagePax[][] = [];
+
+  accommodationLines.forEach((line) => {
+    const groupedByRoom = new Map<number, BookingPackagePax[]>();
+
+    line.pax.forEach((linePax) => {
+      const roomIndexWithinLine = Number(linePax.room ?? 0);
+      const paxId = Number(linePax.paxId);
+      const pax = mapPackagingPaxToBookingPax(paxById.get(paxId), paxId, line.from);
+
+      if (!groupedByRoom.has(roomIndexWithinLine)) {
+        groupedByRoom.set(roomIndexWithinLine, []);
+      }
+
+      groupedByRoom.get(roomIndexWithinLine)!.push(pax);
+    });
+
+    const sortedGroups = Array.from(groupedByRoom.entries())
+      .sort(([a], [b]) => a - b)
+      .map(([, pax]) => pax);
+
+    roomGroups.push(...sortedGroups);
+  });
+
+  if (!roomGroups.length) {
+    return [
+      {
+        index: 0,
+        pax: (entry.pax ?? []).map((p) => mapPackagingPaxToBookingPax(p, p.id, accommodationLines[0].from))
+      }
+    ];
+  }
+
+  return roomGroups.map((pax, index) => ({
+    index,
+    pax
+  }));
+};
+
+export const parseHotelId = (line?: PackagingEntryLine): number | null => {
+  if (!line?.productCode) return null;
+  const parsed = Number(line.productCode);
+  return Number.isNaN(parsed) ? null : parsed;
+};
+
+export const getPackagingRequestRoomsFromBookingRooms = (rooms: BookingPackageRequestRoom[] | null) => {
+  if (!rooms?.length) {
+    const room = { index: 0, travellers: [] } as PackagingRoom;
+    range(0, 2).forEach(() => {
+      room.travellers.push({
+        age: 30
+      } as PackagingTraveller);
+    });
+    return [room];
+  }
+
+  return rooms.map((x, i) => {
+    const room = { index: x.index ?? i, travellers: [] } as PackagingRoom;
+
+    x.pax.forEach((p) => {
+      room.travellers.push({
+        age: p.age ?? 30
+      } as PackagingTraveller);
+    });
+
+    return room;
+  });
+};

package/src/shared/components/flyin/accommodation-flyin.tsx

@@ -5,14 +5,14 @@ import { SearchResultsRootState } from '../../../search-results/store/search-res
 import SearchResultsConfigurationContext from '../../../search-results/search-results-configuration-context';
 import { getTranslations } from '../../utils/localization-util';
 import { setPackagingAccoSearchDetails } from '../../../search-results/store/search-results-slice';
-import { PackageMainRoom } from '@qite/tide-client';
+import { PackageMainRoom, PortalQsmType } from '@qite/tide-client';
 import { PickerItem } from '../../types';
 import { first } from 'lodash';
+import Spinner from '../../../search-results/components/spinner/spinner';
 
 type AccommodationFlyInProps = {
   isLoading: boolean;
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
+  handleConfirm: () => void;
 };
 
 type PackagingAccommodationResponse = {
@@ -38,9 +38,14 @@ const formatPrice = (price?: number, currencyCode = 'EUR') => {
   }).format(price);
 };
 
-const AccommodationFlyIn: React.FC<AccommodationFlyInProps> = ({ isLoading, isOpen, setIsOpen }) => {
+const AccommodationFlyIn: React.FC<AccommodationFlyInProps> = ({ isLoading, handleConfirm }) => {
   const dispatch = useDispatch();
   const context = useContext(SearchResultsConfigurationContext);
+
+  if (isLoading) {
+    return <>{context?.customSpinner ?? <Spinner />}</>;
+  }
+
   const language = context?.languageCode ?? 'en-GB';
   const translations = getTranslations(language);
 
@@ -118,12 +123,6 @@ const AccommodationFlyIn: React.FC<AccommodationFlyInProps> = ({ isLoading, isOp
     dispatch(setPackagingAccoSearchDetails(updatedPackagingAccoSearchDetails));
   };
 
-  const handleConfirm = () => {
-    if (isOpen) {
-      setIsOpen(false);
-    }
-  };
-
   if (!selectedPackagingAccoSearchDetails) {
     return null;
   }
@@ -248,7 +247,7 @@ const AccommodationFlyIn: React.FC<AccommodationFlyInProps> = ({ isLoading, isOp
 
         <div className="flyin__button-wrapper">
           <button className="cta cta--select" onClick={handleConfirm}>
-            {translations.PRODUCT.BOOK_NOW}
+            {context?.searchConfiguration.qsmType == PortalQsmType.AccommodationAndFlight ? translations.QSM.CONFIRM : translations.PRODUCT.BOOK_NOW}
           </button>
         </div>
       </div>

package/src/shared/components/flyin/flyin.tsx

@@ -2,11 +2,19 @@ import React, { useEffect, useRef } from 'react';
 import Icon from '../icon';
 import { useFlightSearch } from '../../../search-results/components/flight/flight-search-context';
 import { useDispatch } from 'react-redux';
-import { setSelectedFlight, setSelectedFlightDetails } from '../../../search-results/store/search-results-slice';
+import {
+  setAccommodationFlyInStep,
+  setSelectedFlight,
+  setSelectedFlightDetails,
+  setSelectedPackagingAccoResult,
+  setSelectedSearchResult
+} from '../../../search-results/store/search-results-slice';
 import FlightsFlyIn from './flights-flyin';
 import AccommodationFlyIn from './accommodation-flyin';
 import { PortalQsmType } from '@qite/tide-client';
 import GroupTourFlyIn from './group-tour-flyin';
+import { AccommodationFlyInStep } from '../../../search-results/types';
+import HotelAccommodationResults from '../../../search-results/components/hotel/hotel-accommodation-results';
 
 type FlyInProps = {
   title: string;
@@ -16,9 +24,23 @@ type FlyInProps = {
   className?: string;
   onPanelRef?: (el: HTMLDivElement | null) => void;
   detailsLoading: boolean;
+  handleConfirm?: () => void;
+  accommodationStep?: AccommodationFlyInStep;
+  isPackageEditFlow?: boolean;
 };
 
-const FlyIn: React.FC<FlyInProps> = ({ title, srpType, isOpen, setIsOpen, className = '', onPanelRef, detailsLoading }) => {
+const FlyIn: React.FC<FlyInProps> = ({
+  title,
+  srpType,
+  isOpen,
+  setIsOpen,
+  className = '',
+  onPanelRef,
+  detailsLoading,
+  accommodationStep,
+  isPackageEditFlow,
+  handleConfirm
+}) => {
   const dispatch = useDispatch();
   const { onCancelSearch } = useFlightSearch();
   const panelRef = useRef<HTMLDivElement>(null);
@@ -55,13 +77,21 @@ const FlyIn: React.FC<FlyInProps> = ({ title, srpType, isOpen, setIsOpen, classN
         dispatch(setSelectedFlight(null));
         dispatch(setSelectedFlightDetails(null));
         onCancelSearch();
+      } else {
+        dispatch(setSelectedSearchResult(null));
+        dispatch(setSelectedPackagingAccoResult(null));
       }
+      dispatch(setAccommodationFlyInStep('details'));
       setIsOpen(false);
     }
   };
 
+  const handleGoBack = () => {
+    dispatch(setAccommodationFlyInStep('results'));
+  };
+
   return (
-    <div className={`flyin ${isOpen ? 'flyin--active' : ''} ${className}`}>
+    <div className={`flyin ${isOpen ? 'flyin--active' : ''} ${className} ${isPackageEditFlow ? 'flyin--large' : ''}`}>
       <div className={`flyin__panel ${isOpen ? 'flyin__panel--active' : ''}`} ref={panelRef}>
         <div className="flyin__content">
           <div className="flyin__content-title-row">
@@ -70,9 +100,27 @@ const FlyIn: React.FC<FlyInProps> = ({ title, srpType, isOpen, setIsOpen, classN
               <Icon name="ui-close" width={30} height={30} aria-hidden="true" />
             </span>
           </div>
+          {isPackageEditFlow && accommodationStep === 'details' && (
+            <div className="flyin__content-title-row">
+              <div onClick={handleGoBack} className="flyin__content-title__back">
+                <Icon name="ui-chevron" width={14} height={14} aria-hidden="true" />
+                Go Back
+              </div>
+            </div>
+          )}
         </div>
         {srpType === PortalQsmType.Flight && <FlightsFlyIn isOpen={isOpen} setIsOpen={setIsOpen} />}
-        {srpType === PortalQsmType.Accommodation && <AccommodationFlyIn isLoading={true} isOpen={isOpen} setIsOpen={setIsOpen} />}
+
+        {(srpType === PortalQsmType.Accommodation || srpType === PortalQsmType.AccommodationAndFlight) && accommodationStep === 'results' && (
+          <div className="flyin__content">
+            <HotelAccommodationResults isLoading={detailsLoading} />
+          </div>
+        )}
+
+        {(srpType === PortalQsmType.Accommodation || srpType === PortalQsmType.AccommodationAndFlight) && accommodationStep === 'details' && (
+          <AccommodationFlyIn isLoading={detailsLoading} handleConfirm={handleConfirm!} />
+        )}
+
         {srpType === PortalQsmType.GroupTour && <GroupTourFlyIn isLoading={detailsLoading} isOpen={isOpen} setIsOpen={setIsOpen} />}
       </div>
     </div>

package/styles/components/_flyin.scss

@@ -19,6 +19,20 @@
     pointer-events: auto;
   }
 
+  &--large {
+    .flyin__panel {
+      @include mixins.media-sm {
+        width: 80%;
+      }
+    }
+
+    .flyin__acco__cards {
+      @include mixins.media-lg {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+  }
+
   &__panel {
     background: var(--tide-booking-gray-xlight);
     height: 100%;
@@ -89,6 +103,17 @@
         align-items: center;
         padding-bottom: 15px;
       }
+
+      &__back {
+        display: flex;
+        align-items: center;
+        gap: 3px;
+        cursor: pointer;
+
+        svg {
+          transform: rotate(180deg);
+        }
+      }
     }
 
     &-arrow {

package/styles/components/_search.scss

@@ -370,6 +370,7 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+
         p {
           margin: 0px;
           line-height: 1.5;
@@ -493,6 +494,8 @@
         }
 
         &-date {
+          min-width: 26px;
+
           p {
             margin: 0px;
             color: var(--tide-booking-search-itinerary-filter-transport-date-month-color);
@@ -626,6 +629,14 @@
           &--start {
             align-items: flex-start;
           }
+
+          &--editable {
+            cursor: pointer;
+
+            &:hover {
+              background-color: rgba(0, 0, 0, 0.05);
+            }
+          }
         }
 
         &-badge {
@@ -670,6 +681,7 @@
           display: flex;
           align-items: center;
           flex-flow: row nowrap;
+          min-width: 26px;
           max-width: 26px;
 
           svg {
@@ -690,11 +702,18 @@
             color: var(--tide-booking-search-itinerary-filter-segment-title-color);
           }
 
-          p {
+          &__room {
+            display: flex;
+            align-items: center;
+            gap: 5px;
             margin: 0px;
             line-height: 1.2;
             font-weight: var(--tide-booking-search-itinerary-filter-segment-text-font-weight);
             color: var(--tide-booking-search-itinerary-filter-segment-text-color);
+
+            svg {
+              flex: 12px 0 0;
+            }
           }
 
           .rating {
@@ -1001,6 +1020,7 @@
 
         &--custom {
           gap: 20px;
+
           .search__result-card__footer {
             padding: 20px;
             padding-top: 0px;
@@ -1667,6 +1687,7 @@
 
       &__allotment {
         padding: 0px;
+
         @include mixins.media-sm {
           flex-direction: column;
         }
@@ -1689,9 +1710,11 @@
           @include mixins.media-md {
             padding: 20px 0px;
           }
+
           @include mixins.media-lg {
             padding: 0px 20px;
           }
+
           @include mixins.media-xl {
             padding: 20px 0px;
           }
@@ -1700,6 +1723,7 @@
         &__footer {
           padding: 0px 20px;
           padding-bottom: 20px;
+
           @include mixins.media-sm {
             flex-direction: row;
             align-items: flex-start;
@@ -1732,12 +1756,15 @@
             @include mixins.media-sm {
               align-items: flex-start;
             }
+
             @include mixins.media-md {
               align-items: flex-end;
             }
+
             @include mixins.media-lg {
               align-items: flex-start;
             }
+
             @include mixins.media-xl {
               align-items: flex-end;
             }