@qite/tide-booking-component 1.4.109 → 1.4.111

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

@@ -0,0 +1,229 @@
+import React, { useContext, useEffect, useMemo, useState } 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/booking-panel';
+import StepIndicators from '../../../shared/booking/step-indicators';
+import WLSidebar from './wl-sidebar';
+import { SearchSeed } from '../../types';
+import SharedTravelersForm, {
+  applyTravelersFormValuesToEditablePackagingEntry,
+  createInitialValuesFromEditablePackagingEntry,
+  SharedTravelersSettings
+} from '../../../shared/booking/travelers-form';
+import { useFormik } from 'formik';
+import { TravelersFormValues } from '../../../booking-wizard/types';
+import { setBookingNumber, setCurrentStep, setEditablePackagingEntry } from '../../store/search-results-slice';
+import validateForm from '../../../booking-wizard/features/travelers-form/validate-form';
+import { bookPackagingEntry, CountryItem, getCountries, PackagingEntry, TideClientConfig } from '@qite/tide-client';
+import SharedSummary from '../../../shared/booking/summary';
+import { renderEditablePackagingEntrySummaryOptions } from '../../../shared/utils/booking-summary';
+
+// TODO; fix import
+import { PackagingRequestBase } from '@qite/tide-client/build/types/booking-v2/request/packaging/packaging-request-base';
+import SharedConfirmation from '../../../shared/booking/shared-confirmation';
+
+interface BookPackagingEntryProps {
+  activeSearchSeed: SearchSeed | null;
+  isConfirmationPage?: boolean;
+}
+
+const travelerFormFields = [{ type: 'gender' }, { type: 'firstName' }, { type: 'lastName' }, { type: 'birthDate' }];
+
+const mainBookerFormFields = [
+  { type: 'street' },
+  { type: 'houseNumber' },
+  { type: 'box' },
+  { type: 'zipCode' },
+  { type: 'place' },
+  { type: 'country' },
+  { type: 'phone' },
+  { type: 'email' }
+];
+
+const travellersSettings: SharedTravelersSettings = {
+  countries: [
+    { iso2: 'BE', name: 'Belgium', phonePrefix: '+32' },
+    { iso2: 'NL', name: 'Netherlands', phonePrefix: '+31' },
+    { iso2: 'FR', name: 'France', phonePrefix: '+33' }
+  ],
+  formFields: travelerFormFields,
+  mainBookerFormFields
+};
+
+const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSeed, isConfirmationPage }) => {
+  const context = useContext(SearchResultsConfigurationContext);
+  const dispatch = useDispatch();
+  const { editablePackagingEntry, priceDetails, currentStep, bookingNumber } = useSelector((state: SearchResultsRootState) => state.searchResults);
+
+  const [countries, setCountries] = useState<CountryItem[]>([]);
+  const [userValidated, setUserValidated] = useState(true);
+  const [remarks, setRemarks] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  if (!context || !editablePackagingEntry || !priceDetails) return null;
+
+  const config: TideClientConfig = {
+    host: context.tideConnection.host,
+    apiKey: context.tideConnection.apiKey
+  };
+
+  const translations = getTranslations(context?.languageCode ?? 'en-GB');
+  const stepLabels = [translations.STEPS.PERSONAL_DETAILS, translations.STEPS.SUMMARY, translations.STEPS.CONFIRMATION];
+
+  console.log('editablePackagingEntry in WLSidebar:', editablePackagingEntry);
+  console.log('priceDetails in WLSidebar:', priceDetails);
+
+  const initialValues = useMemo(() => createInitialValuesFromEditablePackagingEntry(editablePackagingEntry), [editablePackagingEntry?.transactionId]);
+
+  const formik = useFormik<TravelersFormValues>({
+    initialValues,
+    enableReinitialize: true,
+    validate: (values) => validateForm(values, false, 'b2c', translations, travellersSettings.formFields, travellersSettings.mainBookerFormFields),
+    onSubmit: (values) => {
+      dispatch(setEditablePackagingEntry(applyTravelersFormValuesToEditablePackagingEntry(editablePackagingEntry, values)));
+      dispatch(setCurrentStep(1));
+    }
+  });
+
+  useEffect(() => {
+    if (!context) return;
+    const controller = new AbortController();
+
+    (async () => {
+      try {
+        const result = await getCountries(config, controller.signal);
+        setCountries(result.items);
+      } catch {}
+    })();
+
+    return () => controller.abort();
+  }, []);
+
+  useEffect(() => {
+    if (isConfirmationPage) {
+      dispatch(setCurrentStep(2));
+    }
+  }, [isConfirmationPage, dispatch]);
+
+  const handleSummarySubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
+    e.preventDefault();
+
+    setIsSubmitting(true);
+
+    if (typeof window !== 'undefined') {
+      window.scrollTo(0, 0);
+    }
+
+    let updatedEditablePackagingEntry: PackagingEntry = {
+      ...editablePackagingEntry,
+      remarks
+    };
+
+    if (context.generatePaymentUrl && typeof window !== 'undefined') {
+      const redirectUrl = new URL(window.location.href);
+
+      redirectUrl.searchParams.set('bookingConfirmation', 'true');
+      redirectUrl.searchParams.set('link', '');
+
+      updatedEditablePackagingEntry = {
+        ...updatedEditablePackagingEntry,
+        redirectUrl: redirectUrl.toString(),
+        returnPaymentUrl: true
+      };
+    }
+
+    dispatch(setEditablePackagingEntry(updatedEditablePackagingEntry));
+
+    try {
+      const request = {
+        language: context.languageCode ?? 'en-GB',
+        officeId: context.tideConnection.officeId,
+        catalogueId: context.searchConfiguration.defaultCatalogueId ?? 0,
+        agentId: context.agentId,
+        payload: updatedEditablePackagingEntry
+      } as PackagingRequestBase<PackagingEntry>;
+      const bookingResponse = await bookPackagingEntry(config, request);
+
+      dispatch(setBookingNumber(bookingResponse.number));
+
+      if (bookingResponse.paymentUrl) {
+        window.location.href = bookingResponse.paymentUrl;
+      } else {
+        dispatch(setCurrentStep(2));
+      }
+    } catch (error) {
+      dispatch(setCurrentStep(3));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="booking">
+      <div className="booking__content">
+        <BookingPanel
+          currentStep={currentStep}
+          stepLabels={stepLabels}
+          StepIndicatorsComponent={StepIndicators}
+          renderTitle={(step) => (
+            <>
+              {step + 1}.&nbsp;{stepLabels[step]}
+            </>
+          )}>
+          {currentStep === 0 && (
+            <SharedTravelersForm
+              formik={formik}
+              translations={translations}
+              travellersSettings={travellersSettings}
+              countries={countries}
+              travelersFirstStep={false}
+              isUnavailable={false}
+              useCompactForm={false}
+              showAgentSelection={false}
+            />
+          )}
+
+          {currentStep === 1 && (
+            <SharedSummary
+              translations={translations}
+              travelerFormValues={formik.values}
+              isSubmitting={isSubmitting}
+              userValidated={userValidated}
+              remarks={remarks}
+              enableVoucher={false}
+              allowOption={false}
+              isOffer={false}
+              onUserValidatedChange={setUserValidated}
+              onRemarksChange={setRemarks}
+              onSubmit={handleSummarySubmit}
+              renderOptions={() => renderEditablePackagingEntrySummaryOptions(editablePackagingEntry, priceDetails, translations)}
+              renderPreviousButton={() => (
+                <button type="button" title={translations.STEPS.PREVIOUS} onClick={() => dispatch(setCurrentStep(0))} className="cta cta--secondary">
+                  {translations.STEPS.PREVIOUS}
+                </button>
+              )}
+            />
+          )}
+          {currentStep === 2 && (
+            <SharedConfirmation
+              bookingNumber={bookingNumber ?? editablePackagingEntry?.dossierNumber ?? ''}
+              isOption={false}
+              isOffer={false}
+              translations={translations.CONFIRMATION}
+              // companyContactPhone={context?.companyContactPhone || ''}
+              // companyContactEmail={context?.companyContactEmail || ''}
+              // homeUrl={context?.homeUrl || '/'}
+            />
+          )}
+          {currentStep === 3 && <div>{/* error */}</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,162 @@
+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 { 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';
+import SharedSidebar from '../../../shared/booking/shared-sidebar';
+
+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;
+  }
+
+  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/group-tour/group-tour-card.tsx

@@ -19,7 +19,7 @@ const GroupTourCard: React.FC<GroupTourCardProps> = ({ result, languageCode, cms
   const context = useContext(SearchResultsConfigurationContext);
   const { selectedSearchResult } = useSelector((state: SearchResultsRootState) => state.searchResults);
   if (!context) {
-    return;
+    return null;
   }
   const dispatch = useDispatch();
   const translations = getTranslations(languageCode ?? 'en-GB');

package/src/search-results/components/group-tour/group-tour-results.tsx

@@ -15,7 +15,7 @@ interface GroupTourResultsProps {
 const GroupTourResults: React.FC<GroupTourResultsProps> = ({ isLoading }) => {
   const context = useContext(SearchResultsConfigurationContext);
   if (!context) {
-    return;
+    return null;
   }
 
   if (isLoading) {

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} />
             )}