@qite/tide-booking-component 1.4.109 → 1.4.110

package/src/search-results/components/book-packaging-entry/index.tsx

@@ -0,0 +1,48 @@
+import React, { useContext } from 'react';
+import { getTranslations } from '../../../shared/utils/localization-util';
+import { SearchResultsRootState } from '../../store/search-results-store';
+import { useDispatch, useSelector } from 'react-redux';
+import SearchResultsConfigurationContext from '../../search-results-configuration-context';
+import BookingPanel from '../../../shared/booking/BookingPanel';
+import StepIndicators from '../../../shared/booking/StepIndicators';
+import WLSidebar from './wl-sidebar';
+import { SearchSeed } from '../../types';
+
+interface BookPackagingEntryProps {
+  activeSearchSeed: SearchSeed | null;
+}
+
+const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSeed }) => {
+  const context = useContext(SearchResultsConfigurationContext);
+  if (!context) {
+    return null;
+  }
+  const translations = getTranslations(context.languageCode ?? 'en-GB');
+  const { currentStep } = useSelector((state: SearchResultsRootState) => state.searchResults);
+  const dispatch = useDispatch();
+
+  const stepLabels = [translations.STEPS.PERSONAL_DETAILS, translations.STEPS.SUMMARY, translations.STEPS.CONFIRMATION];
+
+  return (
+    <div className="booking">
+      <div className="booking__content">
+        <BookingPanel
+          currentStep={currentStep}
+          stepLabels={stepLabels}
+          StepIndicatorsComponent={StepIndicators}
+          renderTitle={(step) => (
+            <>
+              {step + 1}.&nbsp;{stepLabels[step]}
+            </>
+          )}>
+          {/* Panel body content goes here */}
+          <div></div>
+        </BookingPanel>
+        <div className="backdrop" id="backdrop"></div>
+        <WLSidebar activeSearchSeed={activeSearchSeed} />
+      </div>
+    </div>
+  );
+};
+
+export default BookPackagingEntry;

package/src/search-results/components/book-packaging-entry/wl-sidebar.tsx

@@ -0,0 +1,165 @@
+import React, { useContext, useMemo } from 'react';
+import { formatDate, getDateOnlyTime, getTranslations } from '../../../shared/utils/localization-util';
+import { SearchResultsRootState } from '../../store/search-results-store';
+import { useSelector } from 'react-redux';
+import SearchResultsConfigurationContext from '../../search-results-configuration-context';
+import SharedSidebar from '../../../shared/booking/Sidebar';
+
+import { ACCOMMODATION_SERVICE_TYPE, FLIGHT_SERVICE_TYPE } from '../../utils/query-utils';
+import { first, last, sum } from 'lodash';
+import { SearchSeed } from '../../types';
+import { getTravelersText } from '../../../booking-wizard/features/sidebar/sidebar-util';
+import { RoomTraveler } from '../../../booking-wizard/types';
+
+import { BookingPackageFlightMetaData, BookingPriceDetail, PackagingEntryLine } from '@qite/tide-client';
+import Spinner from '../spinner/spinner';
+
+interface WLSidebarProps {
+  activeSearchSeed: SearchSeed | null;
+}
+
+const mapToSidebarFlightMetaData = (entryLine: PackagingEntryLine) => {
+  return {
+    flightLines: entryLine.flightInformation?.flightLines.map((f) => ({
+      number: f.flightNumber,
+      departureDate: f.departureDate,
+      departureAirport: f.departureAirportCode,
+      departureAirportDescription: f.departureAirportDescription,
+      departureTime: f.departureTime,
+      arrivalDate: f.arrivalDate,
+      arrivalAirport: f.arrivalAirportCode,
+      arrivalAirportDescription: f.arrivalAirportDescription,
+      arrivalTime: f.arrivalTime,
+      flightClass: '',
+      travelClass: '',
+      airline: f.airlineDescription,
+      airlineCode: f.airlineCode,
+      operatingAirlineCode: f.operatingAirlineCode,
+      operatingAirlineDescription: f.operatingAirlineDescription,
+      durationInTicks: f.durationInTicks
+    })),
+    luggageIncluded: false, // Not present in editablePackagingEntry, set default
+    bagageAllowed: false, // Not present in editablePackagingEntry, set default
+    bagage: '', // Not present in editablePackagingEntry, set default
+    mealIncluded: false, // Not present in editablePackagingEntry, set default
+    meal: '', // Not present in editablePackagingEntry, set default
+    durationInTicks: entryLine.flightInformation?.flightLines.reduce((s, { durationInTicks }) => s + (durationInTicks ?? 0), 0)
+  } as BookingPackageFlightMetaData;
+};
+
+const selectSeparatePackagePriceDetails = (priceDetails: BookingPriceDetail[]) => {
+  const result: BookingPriceDetail[] = [];
+  const filteredPriceDetails = priceDetails.filter((priceDetail) => priceDetail.isSeparate);
+
+  filteredPriceDetails.forEach((priceDetail) => {
+    const priceDetailToMerge = result.find(
+      (x) => x.productCode === priceDetail.productCode && x.accommodationCode === priceDetail.accommodationCode && x.productType === priceDetail.productType
+    );
+    if (priceDetailToMerge) {
+      priceDetailToMerge.total += priceDetail.total;
+      priceDetailToMerge.price += priceDetail.price;
+    } else {
+      result.push(Object.assign({}, priceDetail));
+    }
+  });
+
+  return result;
+};
+
+const WLSidebar: React.FC<WLSidebarProps> = ({ activeSearchSeed }) => {
+  const context = useContext(SearchResultsConfigurationContext);
+  if (!context) {
+    return null;
+  }
+  const translations = getTranslations(context.languageCode ?? 'en-GB');
+  const { editablePackagingEntry, priceDetails } = useSelector((state: SearchResultsRootState) => state.searchResults);
+
+  // Map editablePackagingEntry to sidebar props (example, adjust as needed)
+  if (!editablePackagingEntry) {
+    return null;
+  }
+
+  console.log('editablePackagingEntry in WLSidebar:', editablePackagingEntry);
+  console.log('priceDetails in WLSidebar:', priceDetails);
+
+  const sortedLines = useMemo(() => {
+    return [...(editablePackagingEntry?.lines ?? [])].sort((a, b) => {
+      const dateA = getDateOnlyTime(a.from);
+      const dateB = getDateOnlyTime(b.from);
+
+      if (dateA !== dateB) {
+        return dateA - dateB;
+      }
+
+      return (a.order ?? Infinity) - (b.order ?? Infinity);
+    });
+  }, [editablePackagingEntry]);
+
+  const firstEntryLine = first(sortedLines);
+  const accommodationLines = editablePackagingEntry.lines.filter((line) => line.serviceType === ACCOMMODATION_SERVICE_TYPE);
+  const accommodationLine = first(accommodationLines) ?? firstEntryLine;
+
+  const location =
+    accommodationLine?.location?.name ??
+    accommodationLine?.oord?.name ??
+    accommodationLine?.region?.name ??
+    accommodationLine?.country?.name ??
+    firstEntryLine?.location?.name;
+
+  const rooms =
+    activeSearchSeed?.rooms.map((room) => {
+      const adults = room.pax
+        .filter((p) => p.age && p.age >= 18)
+        .map((p) => {
+          return { id: p.id, age: p.age } as RoomTraveler;
+        });
+      const children = room.pax
+        .filter((p) => p.age && p.age < 18)
+        .map((p) => {
+          return { id: p.id, age: p.age } as RoomTraveler;
+        });
+      return { adults, children };
+    }) || [];
+
+  const travelerRooms = getTravelersText(rooms, translations);
+
+  const flightSegments = sortedLines.filter(
+    (line) => line.serviceType === FLIGHT_SERVICE_TYPE && line.flightInformation && Array.isArray(line.flightInformation.flightLines)
+  );
+  const outboundFlight = first(flightSegments);
+  const returnFlight = flightSegments.length > 1 ? last(flightSegments) : undefined;
+  const outboundFlightMetaData = outboundFlight ? mapToSidebarFlightMetaData(outboundFlight) : undefined;
+  const returnFlightMetaData = returnFlight ? mapToSidebarFlightMetaData(returnFlight) : undefined;
+
+  const basePrice = sum(priceDetails?.details.filter((pd) => pd.isInPackage).map((pd) => pd.price * pd.amount) ?? []);
+  const separateExtraPriceDetails = priceDetails?.details.filter((pd) => !pd.isInPackage && pd.isSeparate) ?? [];
+  const totalPrice = sum([basePrice, ...separateExtraPriceDetails.map((priceDetail) => priceDetail.price * priceDetail.amount)]);
+
+  const includedCosts = selectSeparatePackagePriceDetails(priceDetails?.details.filter((pd) => pd.isInPackage) ?? []);
+  return (
+    <SharedSidebar
+      productName={location ?? ''}
+      thumbnailUrl={context.destinationImage?.url}
+      translations={translations}
+      travelerRooms={travelerRooms}
+      startDateText={first(sortedLines)?.from && formatDate(new Date(first(sortedLines)!.from))}
+      endDateText={last(sortedLines)?.to && formatDate(new Date(last(sortedLines)!.to))}
+      isLoading={!editablePackagingEntry || !priceDetails}
+      loaderComponent={<Spinner />}
+      departureFlightMetaData={outboundFlightMetaData}
+      returnFlightMetaData={returnFlightMetaData}
+      includedServiceTypes={editablePackagingEntry.lines.map((line) => line.serviceType)}
+      packagingAccommodations={accommodationLines}
+      basePrice={basePrice}
+      commission={priceDetails?.commission}
+      totalPrice={totalPrice}
+      includedCosts={includedCosts}
+      extraCosts={separateExtraPriceDetails}
+      deposit={priceDetails?.deposit}
+      isUnavailable={false}
+      agent={context.agentId}
+    />
+  );
+};
+
+export default WLSidebar;

package/src/search-results/components/excursions/day-by-day-excursions.tsx

@@ -93,10 +93,14 @@ const DayByDayExcursions: React.FC<DayByDayExcursionsProps> = () => {
           <React.Fragment key={dayKey}>
             <div className="search__results__label search__results__label--secondary">
               <div className="search__results__label__date">
-                <Icon name="ui-excursion" height={16} fill="white" />
+                <p className="search__results__label__date-date">{format(day, 'd', { locale: getLocale(context?.languageCode ?? 'en-GB') })}</p>
+                <p>{format(day, 'MMM', { locale: getLocale(context?.languageCode ?? 'en-GB') })}</p>
               </div>
               <div className="search__results__label__text">
-                <h3>{format(day, 'EEEE d MMMM', { locale: getLocale(context?.languageCode ?? 'en-GB') })}</h3>
+                <Icon name="ui-excursion" height={16} />
+                <h3>
+                  {translations.SRP.SELECT} <strong>{translations.SRP.EXCURSION}</strong>
+                </h3>
               </div>
             </div>
 

package/src/search-results/components/excursions/excursion-results.tsx

@@ -122,7 +122,7 @@ const ExcursionResults: React.FC<ExcursionResultsProps> = ({ isFlyIn, activeSear
   };
 
   return isLoading ? (
-    <Spinner />
+    <Spinner label={translations.SRP.LOADING_EXCURSIONS} />
   ) : (
     <div className="flyin__content flyin__content--columns">
       {/* <Filters

package/src/search-results/components/flight/flight-selection/independent-flight-selection.tsx

@@ -3,12 +3,12 @@ import Icon from '../../../../shared/components/icon';
 import { ExtendedFlightSearchResponseItem } from '../../../types';
 import SearchResultsConfigurationContext from '../../../search-results-configuration-context';
 import { getTranslations } from '../../../../shared/utils/localization-util';
-import { FlightSearchResponseFlightSegment } from '@qite/tide-client';
 import IndependentFlightOption from './independent-flight-option';
 import { useDispatch } from 'react-redux';
 import { setFlyInIsOpen, setSelectedFlight } from '../../../store/search-results-slice';
 import { useFlightSearch } from '../flight-search-context';
 import { getFlightKey } from '../../../utils/flight-utils';
+import { format } from 'date-fns';
 
 interface IndependentFlightSelectionProps {
   searchResults: ExtendedFlightSearchResponseItem[];
@@ -93,13 +93,20 @@ const IndependentFlightSelection: React.FC<IndependentFlightSelectionProps> = ({
     return searchResults.find((flight) => getFlightKey(flight.return.segments) === selectedReturnKey) || null;
   }, [searchResults, selectedReturnKey]);
 
+  const firstResultDate = uniqueOutwardFlights.length > 0 ? uniqueOutwardFlights[0].outward.segments[0].departureDateTime : null;
+
+  const firstResultDay = firstResultDate ? format(firstResultDate, 'd') : null;
+  const firstResultMonth = firstResultDate ? format(firstResultDate, 'MMM') : null;
+
   return (
     <>
       <div className="search__results__label search__results__label--secondary">
         <div className="search__results__label__date">
-          <Icon name="ui-flight" height={16} fill="white" />
+          <p className="search__results__label__date-date">{firstResultDay}</p>
+          <p>{firstResultMonth}</p>
         </div>
         <div className="search__results__label__text">
+          <Icon name="ui-flight" height={16} fill="white" />
           <h3>
             {translations.SRP.SELECT} <strong> {translations.SRP.DEPARTURE}</strong>
           </h3>
@@ -131,9 +138,11 @@ const IndependentFlightSelection: React.FC<IndependentFlightSelectionProps> = ({
 
       <div className="search__results__label search__results__label--secondary">
         <div className="search__results__label__date">
-          <Icon name="ui-flight" height={16} fill="white" />
+          {/* <p className="search__results__label__date-date">{format(day, 'd', { locale: getLocale(context?.languageCode ?? 'en-GB') })}</p>
+          <p>{format(day, 'MMM', { locale: getLocale(context?.languageCode ?? 'en-GB') })}</p> */}
         </div>
         <div className="search__results__label__text">
+          <Icon name="ui-flight" height={16} fill="white" />
           <h3>
             {translations.SRP.SELECT} <strong> {translations.SRP.RETURN}</strong>
           </h3>

package/src/search-results/components/hotel/hotel-accommodation-results.tsx

@@ -196,16 +196,19 @@ const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ i
       {!isFlyIn && (
         <div className="search__results__label search__results__label--secondary">
           <div className="search__results__label__date">
-            {firstResultDay && firstResultMonth ? (
+            {/* /* {firstResultDay && firstResultMonth ? (
               <>
                 <p className="search__results__label__date-date">{firstResultDay}</p>
                 <p>{firstResultMonth}</p>
               </>
             ) : (
               <Icon name="ui-bed" height={16} fill="white" />
-            )}
+            )} */}
+            <p className="search__results__label__date-date">{firstResultDay}</p>
+            <p>{firstResultMonth}</p>
           </div>
           <div className="search__results__label__text">
+            <Icon name="ui-bed" height={16} />
             <h3>
               {translations.SRP.SELECT} <strong>{translations.SRP.ACCOMMODATION}</strong>
             </h3>
@@ -213,7 +216,7 @@ const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ i
         </div>
       )}
       {isLoading ? (
-        <>{context.customSpinner ?? <Spinner />}</>
+        <>{context.customSpinner ?? <Spinner label={translations.SRP.LOADING_ACCOMMODATIONS} />}</>
       ) : (
         renderHotelResults(visibleResults, context, activeTab, translations, selectedPackagingAccoResult, isFlyIn)
       )}

package/src/search-results/components/itinerary/full-itinerary.tsx

@@ -365,7 +365,7 @@ const FullItinerary: React.FC<FullItineraryProps> = ({ isLoading }) => {
 
   return (
     <>
-      {isLoading && <Spinner />}
+      {isLoading && <Spinner label={translations.SRP.LOADING_ITINERARY} />}
       <div ref={hostRef} style={{ display: isLoading ? 'none' : 'block' }} />
     </>
   );

package/src/search-results/components/itinerary/index.tsx

@@ -4,11 +4,12 @@ import { first, groupBy, isEmpty, last } from 'lodash';
 import { PackagingEntryLine, PackagingEntryLineFlightLine } from '@qite/tide-client';
 import Icon from '../../../shared/components/icon';
 import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import { formatPrice, getTranslations } from '../../../shared/utils/localization-util';
-import { useSelector } from 'react-redux';
+import { formatPrice, getDateOnlyTime, getTranslations } from '../../../shared/utils/localization-util';
+import { useDispatch, useSelector } from 'react-redux';
 import { SearchResultsRootState } from '../../store/search-results-store';
 import { ACCOMMODATION_SERVICE_TYPE, FLIGHT_SERVICE_TYPE } from '../../utils/query-utils';
 import Spinner from '../spinner/spinner';
+import { setBookPackagingEntry } from '../../store/search-results-slice';
 
 interface ItineraryProps {
   isOpen: boolean;
@@ -113,19 +114,13 @@ const getServiceTypePriority = (serviceType?: number) => {
   return SERVICE_TYPE_PRIORITY[serviceType ?? -1] ?? 2;
 };
 
-const getDateOnlyTime = (date?: string | Date | null) => {
-  if (!date) return 0;
-
-  const parsedDate = new Date(date);
-
-  return new Date(parsedDate.getFullYear(), parsedDate.getMonth(), parsedDate.getDate()).getTime();
-};
-
 const Itinerary: React.FC<ItineraryProps> = ({ isOpen, handleSetIsOpen, isLoading, onEditAccommodation }) => {
   const context = useContext(SearchResultsConfigurationContext);
   const translations = getTranslations(context?.languageCode ?? 'en-GB');
   const { editablePackagingEntry, priceDetails } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
+  const dispatch = useDispatch();
+
   const packagingEntry = editablePackagingEntry ?? context?.packagingEntry;
 
   const sortedLines = useMemo(() => {
@@ -177,6 +172,10 @@ const Itinerary: React.FC<ItineraryProps> = ({ isOpen, handleSetIsOpen, isLoadin
   const totalPrice = priceDetails?.total || packagingEntry.price || 0;
   const pricePerPerson = totalPrice / numberOfPax;
 
+  const handleConfirm = () => {
+    dispatch(setBookPackagingEntry(true));
+  };
+
   return (
     <div className={`search__filters--modal ${isOpen ? 'is-open' : ''}`}>
       <div className="search__filters--background" onClick={handleSetIsOpen}></div>
@@ -211,7 +210,7 @@ const Itinerary: React.FC<ItineraryProps> = ({ isOpen, handleSetIsOpen, isLoadin
 
           <div className="search__filter__prices">
             {isLoading ? (
-              <Spinner />
+              <Spinner label={translations.PRODUCT.LOADING_PRICE} />
             ) : (
               <>
                 <div className="search__filter__prices__wrapper">
@@ -223,7 +222,9 @@ const Itinerary: React.FC<ItineraryProps> = ({ isOpen, handleSetIsOpen, isLoadin
                     </strong>
                   </p>
                 </div>
-                <button className="cta">{translations.QSM.CONFIRM}</button>
+                <button className="cta" onClick={handleConfirm}>
+                  {translations.QSM.CONFIRM}
+                </button>
               </>
             )}
           </div>

package/src/search-results/components/search-results-container/flight-search-results.tsx

@@ -123,7 +123,7 @@ const FlightResultsContainer: React.FC<FlightResultsContainerProps> = ({ isMobil
           </div>
 
           <div className="search__results__wrapper">
-            {flightsLoading && <Spinner />}
+            {flightsLoading && <Spinner label={translations.SRP.LOADING_FLIGHTS} />}
             {context?.searchConfiguration.qsmType == PortalQsmType.Flight && context?.showFlightAccommodationResults && results && results.length > 0 && (
               <FlightSelection searchResults={results} flightSelectionType={flightSelectionType} />
             )}