@qite/tide-booking-component 1.4.108 → 1.4.110

package/src/content/components/image-with-text.tsx

@@ -65,7 +65,6 @@ interface ImageWithTextSectionProps {
 
 export const ImageWithTextSection: React.FC<ImageWithTextSectionProps> = ({ variant, sectionTitle, hasBackground = true, cards }) => {
   const className = ['image-with-text', hasBackground && 'image-with-text--background'].filter(Boolean).join(' ');
-  console.log('variant', variant);
   return (
     <div className={className}>
       <div className="image-with-text__container">

package/src/qsm/components/QSMContainer/qsm-container.tsx

@@ -434,107 +434,109 @@ const QSMContainer: React.FC = () => {
             {translations.QSM.CRUISES}
           </button> */}
         </div>
-        <div className="qsm__filter">
-          {(qsmType === PortalQsmType.Accommodation || qsmType === PortalQsmType.AccommodationAndFlight || qsmType === PortalQsmType.GroupTour) && (
-            <div className="radiobutton-group qsm__filter__inputgroup">
-              <div className="radiobutton">
-                <label className="radiobutton__label">
-                  <input
-                    type="radio"
-                    name="numberOfAccommodations"
-                    // onChange={handleMainBookerChange}
-                    // onBlur={formik.handleBlur}
-                    value=""
-                    checked={true}
-                    readOnly
-                    className="radiobutton__input"
-                  />
-                  <span>{translations.QSM.ONE_ACCOMMODATION}</span>
-                </label>
-              </div>
-              <div className="radiobutton">
-                <label className="radiobutton__label">
-                  <input
-                    type="radio"
-                    name="numberOfAccommodations"
-                    // onChange={handleMainBookerChange}
-                    // onBlur={formik.handleBlur}
-                    value=""
-                    className="radiobutton__input"
-                    disabled={true}
-                  />
-                  <span>{translations.QSM.MULTIPLE_ACCOMMODATIONS}</span>
-                </label>
-              </div>
-            </div>
-          )}
-          {qsmType === PortalQsmType.Flight && (
-            <div className="radiobutton-group qsm__filter__inputgroup">
-              {allowOneWay && (
+        {!isMobile && (
+          <div className="qsm__filter">
+            {(qsmType === PortalQsmType.Accommodation || qsmType === PortalQsmType.AccommodationAndFlight || qsmType === PortalQsmType.GroupTour) && (
+              <div className="radiobutton-group qsm__filter__inputgroup">
                 <div className="radiobutton">
                   <label className="radiobutton__label">
                     <input
                       type="radio"
-                      name="tripType"
-                      value="oneway"
-                      checked={tripType === 'oneway'}
-                      onChange={() => handleTripTypeChange('oneway')}
+                      name="numberOfAccommodations"
+                      // onChange={handleMainBookerChange}
+                      // onBlur={formik.handleBlur}
+                      value=""
+                      checked={true}
+                      readOnly
                       className="radiobutton__input"
                     />
-                    <span>{translations.QSM.ONEWAY}</span>
+                    <span>{translations.QSM.ONE_ACCOMMODATION}</span>
                   </label>
                 </div>
-              )}
-
-              {allowRoundtrip && (
                 <div className="radiobutton">
                   <label className="radiobutton__label">
                     <input
                       type="radio"
-                      name="tripType"
-                      value="roundtrip"
-                      checked={tripType === 'roundtrip'}
-                      onChange={() => handleTripTypeChange('roundtrip')}
+                      name="numberOfAccommodations"
+                      // onChange={handleMainBookerChange}
+                      // onBlur={formik.handleBlur}
+                      value=""
                       className="radiobutton__input"
+                      disabled={true}
                     />
-                    <span>{translations.QSM.ROUNDTRIP}</span>
+                    <span>{translations.QSM.MULTIPLE_ACCOMMODATIONS}</span>
                   </label>
                 </div>
-              )}
-
-              {allowOpenJaw && (
-                <div className="radiobutton">
-                  <label className="radiobutton__label">
-                    <input
-                      type="radio"
-                      name="tripType"
-                      value="openjaw"
-                      checked={tripType === 'openjaw'}
-                      onChange={() => handleTripTypeChange('openjaw')}
-                      className="radiobutton__input"
-                    />
-                    <span>{translations.QSM.OPENJAW}</span>
-                  </label>
-                </div>
-              )}
+              </div>
+            )}
+            {qsmType === PortalQsmType.Flight && (
+              <div className="radiobutton-group qsm__filter__inputgroup">
+                {allowOneWay && (
+                  <div className="radiobutton">
+                    <label className="radiobutton__label">
+                      <input
+                        type="radio"
+                        name="tripType"
+                        value="oneway"
+                        checked={tripType === 'oneway'}
+                        onChange={() => handleTripTypeChange('oneway')}
+                        className="radiobutton__input"
+                      />
+                      <span>{translations.QSM.ONEWAY}</span>
+                    </label>
+                  </div>
+                )}
+
+                {allowRoundtrip && (
+                  <div className="radiobutton">
+                    <label className="radiobutton__label">
+                      <input
+                        type="radio"
+                        name="tripType"
+                        value="roundtrip"
+                        checked={tripType === 'roundtrip'}
+                        onChange={() => handleTripTypeChange('roundtrip')}
+                        className="radiobutton__input"
+                      />
+                      <span>{translations.QSM.ROUNDTRIP}</span>
+                    </label>
+                  </div>
+                )}
+
+                {allowOpenJaw && (
+                  <div className="radiobutton">
+                    <label className="radiobutton__label">
+                      <input
+                        type="radio"
+                        name="tripType"
+                        value="openjaw"
+                        checked={tripType === 'openjaw'}
+                        onChange={() => handleTripTypeChange('openjaw')}
+                        className="radiobutton__input"
+                      />
+                      <span>{translations.QSM.OPENJAW}</span>
+                    </label>
+                  </div>
+                )}
+              </div>
+            )}
+            <div className="qsm__filter__classgroup">
+              {qsmType !== PortalQsmType.Accommodation &&
+                qsmType !== PortalQsmType.Car &&
+                qsmType !== PortalQsmType.Ticket &&
+                qsmType !== PortalQsmType.Cruise &&
+                qsmType !== PortalQsmType.Transfer &&
+                qsmType !== PortalQsmType.GroupTour &&
+                askTravelClass && <TravelClassPicker />}
+              {qsmType !== PortalQsmType.Multidestination &&
+                qsmType !== PortalQsmType.Car &&
+                qsmType !== PortalQsmType.Flight &&
+                qsmType !== PortalQsmType.Transfer &&
+                askTravelType && <TravelTypePicker />}
+              {askNationality && <TravelNationalityPicker />}
             </div>
-          )}
-          <div className="qsm__filter__classgroup">
-            {qsmType !== PortalQsmType.Accommodation &&
-              qsmType !== PortalQsmType.Car &&
-              qsmType !== PortalQsmType.Ticket &&
-              qsmType !== PortalQsmType.Cruise &&
-              qsmType !== PortalQsmType.Transfer &&
-              qsmType !== PortalQsmType.GroupTour &&
-              askTravelClass && <TravelClassPicker />}
-            {qsmType !== PortalQsmType.Multidestination &&
-              qsmType !== PortalQsmType.Car &&
-              qsmType !== PortalQsmType.Flight &&
-              qsmType !== PortalQsmType.Transfer &&
-              askTravelType && <TravelTypePicker />}
-            {askNationality && <TravelNationalityPicker />}
           </div>
-        </div>
+        )}
         <div className="qsm__input-group">
           {/* TODO, determine which fields to show for what type of QSM */}
           {(qsmType == PortalQsmType.Flight || qsmType == PortalQsmType.AccommodationAndFlight) && originDestinationField && (
@@ -551,6 +553,110 @@ const QSMContainer: React.FC = () => {
 
           {askTravelers && <TravelInputGroup />}
 
+          {isMobile && (
+            <div className="qsm__filter">
+              {(qsmType === PortalQsmType.Accommodation || qsmType === PortalQsmType.AccommodationAndFlight || qsmType === PortalQsmType.GroupTour) && (
+                <div className="radiobutton-group qsm__filter__inputgroup">
+                  <div className="radiobutton">
+                    <label className="radiobutton__label">
+                      <input
+                        type="radio"
+                        name="numberOfAccommodations"
+                        // onChange={handleMainBookerChange}
+                        // onBlur={formik.handleBlur}
+                        value=""
+                        checked={true}
+                        readOnly
+                        className="radiobutton__input"
+                      />
+                      <span>{translations.QSM.ONE_ACCOMMODATION}</span>
+                    </label>
+                  </div>
+                  <div className="radiobutton">
+                    <label className="radiobutton__label">
+                      <input
+                        type="radio"
+                        name="numberOfAccommodations"
+                        // onChange={handleMainBookerChange}
+                        // onBlur={formik.handleBlur}
+                        value=""
+                        className="radiobutton__input"
+                        disabled={true}
+                      />
+                      <span>{translations.QSM.MULTIPLE_ACCOMMODATIONS}</span>
+                    </label>
+                  </div>
+                </div>
+              )}
+              {qsmType === PortalQsmType.Flight && (
+                <div className="radiobutton-group qsm__filter__inputgroup">
+                  {allowOneWay && (
+                    <div className="radiobutton">
+                      <label className="radiobutton__label">
+                        <input
+                          type="radio"
+                          name="tripType"
+                          value="oneway"
+                          checked={tripType === 'oneway'}
+                          onChange={() => handleTripTypeChange('oneway')}
+                          className="radiobutton__input"
+                        />
+                        <span>{translations.QSM.ONEWAY}</span>
+                      </label>
+                    </div>
+                  )}
+
+                  {allowRoundtrip && (
+                    <div className="radiobutton">
+                      <label className="radiobutton__label">
+                        <input
+                          type="radio"
+                          name="tripType"
+                          value="roundtrip"
+                          checked={tripType === 'roundtrip'}
+                          onChange={() => handleTripTypeChange('roundtrip')}
+                          className="radiobutton__input"
+                        />
+                        <span>{translations.QSM.ROUNDTRIP}</span>
+                      </label>
+                    </div>
+                  )}
+
+                  {allowOpenJaw && (
+                    <div className="radiobutton">
+                      <label className="radiobutton__label">
+                        <input
+                          type="radio"
+                          name="tripType"
+                          value="openjaw"
+                          checked={tripType === 'openjaw'}
+                          onChange={() => handleTripTypeChange('openjaw')}
+                          className="radiobutton__input"
+                        />
+                        <span>{translations.QSM.OPENJAW}</span>
+                      </label>
+                    </div>
+                  )}
+                </div>
+              )}
+              <div className="qsm__filter__classgroup">
+                {qsmType !== PortalQsmType.Accommodation &&
+                  qsmType !== PortalQsmType.Car &&
+                  qsmType !== PortalQsmType.Ticket &&
+                  qsmType !== PortalQsmType.Cruise &&
+                  qsmType !== PortalQsmType.Transfer &&
+                  qsmType !== PortalQsmType.GroupTour &&
+                  askTravelClass && <TravelClassPicker />}
+                {qsmType !== PortalQsmType.Multidestination &&
+                  qsmType !== PortalQsmType.Car &&
+                  qsmType !== PortalQsmType.Flight &&
+                  qsmType !== PortalQsmType.Transfer &&
+                  askTravelType && <TravelTypePicker />}
+                {askNationality && <TravelNationalityPicker />}
+              </div>
+            </div>
+          )}
+
           <button type="button" className="cta" onClick={handleSubmit}>
             {submitIcon && submitIcon.toString().length > 0 && <span>{submitIcon}</span>}
             <span>{translations.QSM.CONFIRM}</span>

package/src/qsm/components/item-picker/index.tsx

@@ -14,7 +14,6 @@ interface ItemPickerProps {
 const ItemPicker: React.FC<ItemPickerProps> = ({ items, selection, label, placeholder, classModifier, valueFormatter, onPick }) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const toggleButtonRef = useRef<HTMLButtonElement | null>(null);
 
   const handlePick = (picked: string, id?: string) => {
     setIsDropdownOpen(false);
@@ -37,11 +36,8 @@ const ItemPicker: React.FC<ItemPickerProps> = ({ items, selection, label, placeh
   return (
     <div className={'dropdown__input ' + classModifier}>
       <span className="dropdown__label">{label}</span>
-      <div className="dropdown">
-        <button
-          className={`dropdown-toggle ${isDropdownOpen ? 'dropdown-toggle--open' : ''}`}
-          onClick={() => setIsDropdownOpen((prev) => !prev)}
-          ref={toggleButtonRef}>
+      <div className="dropdown" ref={dropdownRef}>
+        <button className={`dropdown-toggle ${isDropdownOpen ? 'dropdown-toggle--open' : ''}`} onClick={() => setIsDropdownOpen((prev) => !prev)}>
           <span>{selection || placeholder}</span>
           <span className="arrow">&#9662;</span>
         </button>

package/src/qsm/components/mobile-filter-modal/index.tsx

@@ -35,6 +35,8 @@ const MobileFilterModal: React.FC = () => {
     destination
   } = useSelector((state: QSMRootState) => state.qsm);
 
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
   const [inputValue, setInputValue] = useState('');
 
   /* ---------------------------------------------------------------- */
@@ -48,6 +50,18 @@ const MobileFilterModal: React.FC = () => {
     }
   }, [activeSearchFieldProps]);
 
+  useEffect(() => {
+    if (mobileFilterType !== 'search') return;
+
+    requestAnimationFrame(() => {
+      const input = searchInputRef.current;
+      if (!input) return;
+
+      input.focus();
+      input.setSelectionRange(input.value.length, input.value.length);
+    });
+  }, [mobileFilterType, activeSearchFieldProps?.fieldKey]);
+
   /* ---------------------------------------------------------------- */
   /* Helpers                                                          */
   /* ---------------------------------------------------------------- */
@@ -229,12 +243,12 @@ const MobileFilterModal: React.FC = () => {
         <div className="qsm__double-input qsm__double-input--search-modal">
           <label className="qsm__input-wrapper">
             <input
+              ref={searchInputRef}
               type="text"
               id="search"
               value={inputValue}
               onClick={(e) => e.stopPropagation()}
               onChange={(e) => handleInputChange(e.target.value)}
-              // onChange={(e) => handleLocationChange(e.target.value)}
               className="qsm__input qsm__input--modal qsm__from-to u-ps-2"
               placeholder={activeSearchFieldProps.placeholder}
             />

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