@qite/tide-booking-component 1.4.1 → 1.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "module": "build/build-esm/index.js",
@@ -69,7 +69,7 @@
     "uuid": "^8.3.2"
   },
   "dependencies": {
-    "@qite/tide-client": "^1.1.90",
+    "@qite/tide-client": "^1.1.94",
     "react-html-comment": "^2.0.16"
   }
 }

package/src/booking-wizard/features/booking/selectors.ts

@@ -3,8 +3,11 @@ import { Gender } from "@qite/tide-client";
 import {
   BookingPackageAddress,
   BookingPackageBookRequest,
+  BookingPackageEntryLineFlightMetaData,
+  BookingPackageFlight,
   BookingPackagePax,
   BookingPackageRequest,
+  BookingPackageRoomOption,
 } from "@qite/tide-client/build/types";
 import { createSelector } from "@reduxjs/toolkit";
 import { format, parseISO } from "date-fns";
@@ -67,6 +70,9 @@ export const selectPackageFlights = (state: RootState) => ({
   return: state.booking.package?.returnFlights,
 });
 
+export const selectFlightMetaData = (state: RootState) =>
+  state.booking.package?.flightInfo.metaData;
+
 export const selectActiveOption = (state: RootState) =>
   state.booking.package?.options.find((x) => x.isSelected);
 
@@ -94,6 +100,24 @@ export const selectPackageAirportGroups = createSelector(
     )
 );
 
+export const selectRoomOptionDepartureFlightsMetaData = createSelector(
+  selectActiveOption,
+  selectFlightMetaData,
+  (ativeOption, flightMetaData) => {
+    const roomOptions = ativeOption?.rooms.map(r => r.options.filter(o => o.isSelected).shift());
+    return roomOptions?.map(ro => flightMetaData?.find(f => f.entryLineGuid === ro?.entryLineGuid)?.flightMetaData).filter(f => f !== undefined) ?? [];
+  }
+);
+
+export const selectRoomOptionReturnFlightsMetaData = createSelector(
+  selectActiveOption,
+  selectFlightMetaData,
+  (ativeOption, flightMetaData) => {
+    const roomOptions = ativeOption?.rooms.map(r => r.options.filter(o => o.isSelected).reverse().shift());
+    return roomOptions?.map(ro => flightMetaData?.find(f => f.entryLineGuid === ro?.entryLineGuid)?.flightMetaData).filter(f => f !== undefined) ?? [];
+  }
+);
+
 export const selectApiSettings = (state: RootState) => state.apiSettings;
 
 export const selectIsUnavailable = (state: RootState) =>
@@ -157,7 +181,7 @@ export const selectBookingAttributes = (state: RootState) =>
 export const selectBookingNumber = (state: RootState) =>
   state.booking.bookingNumber;
 
-export const selectIsOption = (state: RootState) => 
+export const selectIsOption = (state: RootState) =>
   state.booking.isOption;
 
 export const selectBookingRooms = (state: RootState) =>

package/src/booking-wizard/features/sidebar/index.tsx

@@ -5,6 +5,8 @@ import {
   selectIsOnRequest,
   selectPackageRooms,
   selectReturnFlight,
+  selectRoomOptionDepartureFlightsMetaData,
+  selectRoomOptionReturnFlightsMetaData,
 } from "../booking/selectors";
 import { getDateText, getTravelersText } from "./sidebar-util";
 import { selectFormRooms } from "../travelers-form/travelers-form-slice";
@@ -39,7 +41,9 @@ const SidebarContainer: React.FC<SidebarProps> = ({
   const rooms = useSelector(selectFormRooms);
   const travelerRooms = getTravelersText(rooms);
   const departureFlight = useSelector(selectDepartureFlight);
+  const departureFlightMetaData = departureFlight?.flightMetaData ?? useSelector(selectRoomOptionDepartureFlightsMetaData)?.[0];
   const returnFlight = useSelector(selectReturnFlight);
+  const returnFlightMetaData = returnFlight?.flightMetaData ?? useSelector(selectRoomOptionReturnFlightsMetaData)?.[0];
   const isFetchingProductOptions = useSelector(selectIsFetchingProductOptions);
   const isFetchingPriceDetails = useSelector(selectIsFetchingPriceDetails);
   const accommodations = useSelector(selectPackageRooms);
@@ -59,8 +63,8 @@ const SidebarContainer: React.FC<SidebarProps> = ({
           : undefined
       }
       travelerRooms={travelerRooms}
-      departureFlight={departureFlight}
-      returnFlight={returnFlight}
+      departureFlightMetaData={departureFlightMetaData}
+      returnFlightMetaData={returnFlightMetaData}
       basePrice={useSelector(selectBasePrice)}
       totalPrice={useSelector(selectTotalPrice)}
       includedCosts={useSelector(selectSeparatePackagePriceDetails)}

package/src/booking-wizard/features/sidebar/sidebar-flight.tsx

@@ -1,4 +1,4 @@
-import { BookingPackageFlight } from "@qite/tide-client/build/types";
+import { BookingPackageFlightMetaData } from "@qite/tide-client/build/types";
 import { first, last } from "lodash";
 import React from "react";
 import { useSelector } from "react-redux";
@@ -7,11 +7,11 @@ import { getAirlines, getDateText, parseFlightLines } from "./sidebar-util";
 
 interface SidebarFlightProps {
   title: string;
-  flight: BookingPackageFlight;
+  flightMetaData: BookingPackageFlightMetaData;
 }
 
-const SidebarFlight: React.FC<SidebarFlightProps> = ({ title, flight }) => {
-  const flightLines = parseFlightLines(flight.flightMetaData);
+const SidebarFlight: React.FC<SidebarFlightProps> = ({ title, flightMetaData }) => {
+  const flightLines = parseFlightLines(flightMetaData);
   const firstFlight = first(flightLines);
   const lastFlight = last(flightLines);
   const translations = useSelector(selectTranslations);
@@ -43,9 +43,9 @@ const SidebarFlight: React.FC<SidebarFlightProps> = ({ title, flight }) => {
 
       <div className="pricing-summary__row">
         <div className="pricing-summary__property">
-          {flight.flightMetaData.flightLines.length > 1 && (
+          {flightMetaData.flightLines.length > 1 && (
             <i>
-              {flight.flightMetaData.flightLines.length - 1}
+              {flightMetaData.flightLines.length - 1}
               {"x "}
               {translations.SIDEBAR.CHANGES}
             </i>
@@ -53,7 +53,7 @@ const SidebarFlight: React.FC<SidebarFlightProps> = ({ title, flight }) => {
         </div>
         <div className="pricing-summary__value">{getAirlines(flightLines)}</div>
       </div>
-      {flight.flightMetaData.luggageIncluded && (
+      {flightMetaData.luggageIncluded && (
         <div className="pricing-summary__row">
           <div className="pricing-summary__property"></div>
           <div className="pricing-summary__value">

package/src/booking-wizard/features/sidebar/sidebar.tsx

@@ -1,5 +1,5 @@
 import {
-  BookingPackageFlight,
+  BookingPackageFlightMetaData,
   BookingPackageRoom,
   BookingPriceDetail
 } from "@qite/tide-client/build/types";
@@ -21,8 +21,8 @@ interface SidebarProps {
   travelerRooms?: string[];
   startDateText?: string;
   endDateText?: string;
-  departureFlight?: BookingPackageFlight;
-  returnFlight?: BookingPackageFlight;
+  departureFlightMetaData?: BookingPackageFlightMetaData;
+  returnFlightMetaData?: BookingPackageFlightMetaData;
   basePrice?: number;
   totalPrice?: number;
   remainingAmountText?: string;
@@ -44,8 +44,8 @@ const Sidebar: React.FC<SidebarProps> = ({
   travelerRooms,
   startDateText,
   endDateText,
-  departureFlight,
-  returnFlight,
+  departureFlightMetaData,
+  returnFlightMetaData,
   basePrice,
   totalPrice,
   includedCosts,
@@ -136,15 +136,15 @@ const Sidebar: React.FC<SidebarProps> = ({
               </div>
 
               {isLoading && loaderComponent}
-              {!isLoading && departureFlight && returnFlight && (
+              {!isLoading && departureFlightMetaData && returnFlightMetaData && (
                 <>
                   <SidebarFlight
                     title={translations.SIDEBAR.DEPARTURE_FLIGHT}
-                    flight={departureFlight}
+                    flightMetaData={departureFlightMetaData}
                   />
                   <SidebarFlight
                     title={translations.SIDEBAR.ARRIVAL_FLIGHT}
-                    flight={returnFlight}
+                    flightMetaData={returnFlightMetaData}
                   />
                 </>
               )}

package/src/booking-wizard/features/summary/summary.tsx

@@ -284,7 +284,7 @@ const Summary: React.FC<SummaryProps> = () => {
                 </div>
               </div>
               {rooms.map((r, rIndex) => (
-                <div className="form__row">
+                <div className="form__row" key={rIndex}>
                   <div className="form__group">
                     <div className="form__region-header">
                       <h5 className="form__region-heading">
@@ -371,61 +371,58 @@ const Summary: React.FC<SummaryProps> = () => {
               <div className="form__row">
                 <div className="form__group">
                   <ul className="list list--booking-summary">
-                    <li>
-                      <h6>{activeOption?.name}</h6>
-                      <ul>
-                        {activeOption?.rooms.map((r, ri) => {
-                          const roomOption = r.options.find(
-                            (x) => x.isSelected
-                          );
-                          return (
-                            <li key={ri} className="list__item">
-                              {roomOption?.accommodationName}
-                              {!isNil(roomOption?.regimeName) && ", "}
-                              {roomOption?.regimeName}
-                            </li>
-                          );
+                    {activeOption?.rooms.flatMap((r) => r.options).filter(x => x.isSelected).map((roomOption, roomOptionIndex) => (<>
+                      <li key={roomOptionIndex}>
+                        <h6>{roomOption?.productName}</h6>
+                        <ul>
+                          <li className="list__item">
+                            {roomOption?.accommodationName}
+                            {!isNil(roomOption?.regimeName) && ", "}
+                            {roomOption?.regimeName}
+                          </li>
+                        </ul>
+                        <p>
+                          ({roomOption?.from === roomOption?.to
+                              ? getDateText(roomOption?.from)
+                              : <>{getDateText(roomOption?.from)} &gt; {getDateText(roomOption?.to)}</>})
+                        </p>
+                      </li>
+                      {!isEmpty(activeOption?.groups) &&
+                        activeOption?.groups.map((x, i) => {
+                          if (!x.options.some((y) => y.isSelected)) return;
+
+                          return <SummaryBookingOption key={i} group={x} />;
                         })}
-                      </ul>
-                      <p>
-                        ({getDateText(activeOption?.fromDate)} &gt;{" "}
-                        {getDateText(activeOption?.toDate)})
-                      </p>
-                    </li>
-                    {!isEmpty(activeOption?.groups) &&
-                      activeOption?.groups.map((x, i) => {
-                        if (!x.options.some((y) => y.isSelected)) return;
-
-                        return <SummaryBookingOption key={i} group={x} />;
-                      })}
-                    {!isEmpty(activeOption?.optionUnits) &&
-                      activeOption?.optionUnits.map((x, i) => (
-                        <SummaryBookingOptionUnit key={i} unit={x} />
-                      ))}
-                    {!isEmpty(activeOption?.optionPax) &&
-                      activeOption?.optionPax.map((x, i) => (
-                        <SummaryBookingOptionPax key={i} pax={x} />
-                      ))}
-                    {packageDetails?.outwardFlights &&
-                      packageDetails.outwardFlights
-                        .filter((x) => x.isSelected)
-                        .map((flight, i) => (
-                          <SummaryFlight
-                            key={i}
-                            flight={flight}
-                            header={translations.SIDEBAR.DEPARTURE_FLIGHT}
-                          />
+                      {!isEmpty(activeOption?.optionUnits) &&
+                        activeOption?.optionUnits.map((x, i) => (
+                          <SummaryBookingOptionUnit key={i} unit={x} />
                         ))}
-                    {packageDetails?.returnFlights &&
-                      packageDetails.returnFlights
-                        .filter((x) => x.isSelected)
-                        .map((flight, i) => (
-                          <SummaryFlight
-                            key={i}
-                            flight={flight}
-                            header={translations.SIDEBAR.ARRIVAL_FLIGHT}
-                          />
+                      {!isEmpty(activeOption?.optionPax) &&
+                        activeOption?.optionPax.map((x, i) => (
+                          <SummaryBookingOptionPax key={i} pax={x} />
+                        ))}
+                      {packageDetails?.outwardFlights &&
+                        packageDetails.outwardFlights
+                          .filter((x) => x.isSelected)
+                          .map((flight, i) => (
+                            <SummaryFlight
+                              key={i}
+                              flight={flight}
+                              header={translations.SIDEBAR.DEPARTURE_FLIGHT}
+                            />
+                          ))}
+                      {packageDetails?.returnFlights &&
+                        packageDetails.returnFlights
+                          .filter((x) => x.isSelected)
+                          .map((flight, i) => (
+                            <SummaryFlight
+                              key={i}
+                              flight={flight}
+                              header={translations.SIDEBAR.ARRIVAL_FLIGHT}
+                            />
                         ))}
+                      </>
+                    ))}                 
                   </ul>
                 </div>
               </div>