@qite/tide-booking-component 1.4.108 → 1.4.110

package/build/build-cjs/index.js

@@ -596,6 +596,7 @@ var SRP$f = {
   DEPARTURE_ASC: 'تاريخ المغادرة (الأقرب أولاً)',
   FILTERS: 'عوامل التصفية',
   SHOW_ITINERARY: 'عرض خط سير الرحلة',
+  VIEW_BOOKING: 'عرض الحجز',
   ITINERARY_TITLE: 'ملخص رحلتك',
   DOSSIER_NUMBER: 'رقم الملف',
   PACKAGE_PRICE_PER_PERSON: 'سعر الباقة للشخص الواحد',
@@ -629,7 +630,12 @@ var SRP$f = {
   DURATION_ASC: 'المدة تصاعدياً',
   DURATION_DESC: 'المدة تنازلياً',
   TRAVEL_GROUP: 'مجموعة المسافرين',
-  EXCURSION: 'رحلة'
+  EXCURSION: 'رحلة',
+  LOADING_EXCURSIONS: 'جارٍ تحميل الرحلات...',
+  LOADING_FLIGHTS: 'جارٍ تحميل الرحلات الجوية...',
+  LOADING_ACCOMMODATIONS: 'جارٍ تحميل الإقامات...',
+  LOADING_ITINERARY: 'جارٍ تحميل خط سير الرحلة...',
+  LOADING_OPTIONS: 'جارٍ تحميل الخيارات...'
 };
 var ITINERARY$f = {
   DAY: 'اليوم',
@@ -1009,6 +1015,7 @@ var SRP$e = {
   DEPARTURE_ASC: 'Afrejsedato (snarest først)',
   FILTERS: 'Filtre',
   SHOW_ITINERARY: 'Vis rejseplan',
+  VIEW_BOOKING: 'Se booking',
   ITINERARY_TITLE: 'Din rejseoversigt',
   DOSSIER_NUMBER: 'Sagsnummer',
   PACKAGE_PRICE_PER_PERSON: 'pakkepris pr. person',
@@ -1042,7 +1049,12 @@ var SRP$e = {
   DURATION_ASC: 'Varighed stigende',
   DURATION_DESC: 'Varighed faldende',
   TRAVEL_GROUP: 'Rejseselskab',
-  EXCURSION: 'Udflugt'
+  EXCURSION: 'Udflugt',
+  LOADING_EXCURSIONS: 'Indlæser udflugter...',
+  LOADING_FLIGHTS: 'Indlæser fly...',
+  LOADING_ACCOMMODATIONS: 'Indlæser indkvarteringer...',
+  LOADING_ITINERARY: 'Indlæser rejseplan...',
+  LOADING_OPTIONS: 'Indlæser muligheder...'
 };
 var ITINERARY$e = {
   DAY: 'Dag',
@@ -1427,6 +1439,7 @@ var SRP$d = {
   DEPARTURE_ASC: 'Abreisedatum (früheste zuerst)',
   FILTERS: 'Filter',
   SHOW_ITINERARY: 'Reiseverlauf anzeigen',
+  VIEW_BOOKING: 'Buchung anzeigen',
   ITINERARY_TITLE: 'Ihre Reiseübersicht',
   DOSSIER_NUMBER: 'Vorgangsnummer',
   PACKAGE_PRICE_PER_PERSON: 'Paketpreis pro Person',
@@ -1456,7 +1469,12 @@ var SRP$d = {
   ARRIVAL_AIRPORTS: 'Ankunftsflughäfen',
   PRICE: 'Preis',
   TRAVEL_GROUP: 'Reisegruppe',
-  EXCURSION: 'Ausflug'
+  EXCURSION: 'Ausflug',
+  LOADING_EXCURSIONS: 'Lade Ausflüge...',
+  LOADING_FLIGHTS: 'Lade Flüge...',
+  LOADING_ACCOMMODATIONS: 'Lade Unterkünfte...',
+  LOADING_ITINERARY: 'Lade Reiseverlauf...',
+  LOADING_OPTIONS: 'Lade Optionen...'
 };
 var ITINERARY$d = {
   DAY: 'Tag',
@@ -1541,7 +1559,7 @@ var PRODUCT$c = {
   STAY_INCLUDED: 'Stay included',
   FLIGHT_INCLUDED: 'Flight included',
   TRANSFER_INCLUDED: 'Transfer included',
-  LOADING_PRICE: 'Your price is being composed.',
+  LOADING_PRICE: 'Loading price...',
   PER_PERSON: 'Per person',
   PER_NIGHT: 'Per night',
   PER_PERSON_PER_NIGHT: 'Per person / per night',
@@ -1844,6 +1862,7 @@ var SRP$c = {
   DEPARTURE_ASC: 'Departure date (soonest first)',
   FILTERS: 'Filters',
   SHOW_ITINERARY: 'Show itinerary',
+  VIEW_BOOKING: 'View booking',
   ITINERARY_TITLE: 'Your trip summary',
   DOSSIER_NUMBER: 'File number',
   PACKAGE_PRICE_PER_PERSON: 'package price per person',
@@ -1873,7 +1892,12 @@ var SRP$c = {
   DEPARTURE_AIRPORTS: 'Departure airports',
   ARRIVAL_AIRPORTS: 'Arrival airports',
   TRAVEL_GROUP: 'Travel group',
-  EXCURSION: 'Excursion'
+  EXCURSION: 'Excursion',
+  LOADING_EXCURSIONS: 'Loading excursions...',
+  LOADING_FLIGHTS: 'Loading flights...',
+  LOADING_ACCOMMODATIONS: 'Loading accommodations...',
+  LOADING_ITINERARY: 'Loading itinerary...',
+  LOADING_OPTIONS: 'Loading options...'
 };
 var ITINERARY$c = {
   DAY: 'Day',
@@ -2258,6 +2282,7 @@ var SRP$b = {
   DEPARTURE_ASC: 'Fecha de salida (más próxima primero)',
   FILTERS: 'Filtros',
   SHOW_ITINERARY: 'Mostrar itinerario',
+  VIEW_BOOKING: 'Ver reserva',
   ITINERARY_TITLE: 'Resumen de tu viaje',
   DOSSIER_NUMBER: 'Número de expediente',
   PACKAGE_PRICE_PER_PERSON: 'precio del paquete por persona',
@@ -2287,7 +2312,12 @@ var SRP$b = {
   ARRIVAL_AIRPORTS: 'Aeropuertos de llegada',
   PRICE: 'Precio',
   TRAVEL_GROUP: 'Grupo de viaje',
-  EXCURSION: 'Excursión'
+  EXCURSION: 'Excursión',
+  LOADING_EXCURSIONS: 'Cargando excursiones...',
+  LOADING_FLIGHTS: 'Cargando vuelos...',
+  LOADING_ACCOMMODATIONS: 'Cargando alojamientos...',
+  LOADING_ITINERARY: 'Cargando itinerario...',
+  LOADING_OPTIONS: 'Cargando opciones...'
 };
 var ITINERARY$b = {
   DAY: 'Día',
@@ -2676,6 +2706,7 @@ var SRP$a = {
   DEPARTURE_ASC: 'Date de départ (la plus proche d’abord)',
   FILTERS: 'Filtres',
   SHOW_ITINERARY: 'Afficher l’itinéraire',
+  VIEW_BOOKING: 'Voir la réservation',
   ITINERARY_TITLE: 'Résumé de votre voyage',
   DOSSIER_NUMBER: 'Numéro de dossier',
   PACKAGE_PRICE_PER_PERSON: 'prix du forfait par personne',
@@ -2705,7 +2736,12 @@ var SRP$a = {
   ARRIVAL_AIRPORTS: 'Aéroports d’arrivée',
   PRICE: 'Prix',
   TRAVEL_GROUP: 'Groupe de voyageurs',
-  EXCURSION: 'Excursion'
+  EXCURSION: 'Excursion',
+  LOADING_EXCURSIONS: 'Chargement des excursions...',
+  LOADING_FLIGHTS: 'Chargement des vols...',
+  LOADING_ACCOMMODATIONS: 'Chargement des hébergements...',
+  LOADING_ITINERARY: 'Chargement de l’itinéraire...',
+  LOADING_OPTIONS: 'Chargement des options...'
 };
 var ITINERARY$a = {
   DAY: 'Jour',
@@ -3089,6 +3125,7 @@ var SRP$9 = {
   DEPARTURE_ASC: 'Date de départ (la plus proche d’abord)',
   FILTERS: 'Filtres',
   SHOW_ITINERARY: 'Afficher l’itinéraire',
+  VIEW_BOOKING: 'Voir la réservation',
   ITINERARY_TITLE: 'Résumé de votre voyage',
   DOSSIER_NUMBER: 'Numéro de dossier',
   PACKAGE_PRICE_PER_PERSON: 'prix du forfait par personne',
@@ -3118,7 +3155,12 @@ var SRP$9 = {
   ARRIVAL_AIRPORTS: 'Aéroports d’arrivée',
   PRICE: 'Prix',
   TRAVEL_GROUP: 'Groupe de voyageurs',
-  EXCURSION: 'Excursion'
+  EXCURSION: 'Excursion',
+  LOADING_EXCURSIONS: 'Chargement des excursions...',
+  LOADING_FLIGHTS: 'Chargement des vols...',
+  LOADING_ACCOMMODATIONS: 'Chargement des hébergements...',
+  LOADING_ITINERARY: 'Chargement de l’itinéraire...',
+  LOADING_OPTIONS: 'Chargement des options...'
 };
 var ITINERARY$9 = {
   DAY: 'Jour',
@@ -3502,6 +3544,7 @@ var SRP$8 = {
   DEPARTURE_ASC: 'Brottfarardagur (nærst fyrst)',
   FILTERS: 'Síur',
   SHOW_ITINERARY: 'Sýna ferðaráætlun',
+  VIEW_BOOKING: 'Skoða bókun',
   ITINERARY_TITLE: 'Yfirlit ferðarinnar',
   DOSSIER_NUMBER: 'Skrárnúmer',
   PACKAGE_PRICE_PER_PERSON: 'pakka verð á mann',
@@ -3531,7 +3574,12 @@ var SRP$8 = {
   ARRIVAL_AIRPORTS: 'Komuflugvellir',
   PRICE: 'Verð',
   TRAVEL_GROUP: 'Ferðahópur',
-  EXCURSION: 'Útflutningur'
+  EXCURSION: 'Útflutningur',
+  LOADING_EXCURSIONS: 'Hleðst inn í útflutninga...',
+  LOADING_FLIGHTS: 'Hleðst inn í flug...',
+  LOADING_ACCOMMODATIONS: 'Hleðst inn í gistingar...',
+  LOADING_ITINERARY: 'Hleðst inn í ferðaráætlun...',
+  LOADING_OPTIONS: 'Hleðst inn í valkosti...'
 };
 var ITINERARY$8 = {
   DAY: 'Dagur',
@@ -3916,6 +3964,7 @@ var SRP$7 = {
   DEPARTURE_ASC: 'Data di partenza (prima la più vicina)',
   FILTERS: 'Filtri',
   SHOW_ITINERARY: 'Mostra itinerario',
+  VIEW_BOOKING: 'Visualizza prenotazione',
   ITINERARY_TITLE: 'Riepilogo del tuo viaggio',
   DOSSIER_NUMBER: 'Numero di pratica',
   PACKAGE_PRICE_PER_PERSON: 'prezzo pacchetto per persona',
@@ -3945,7 +3994,12 @@ var SRP$7 = {
   ARRIVAL_AIRPORTS: 'Aeroporti di arrivo',
   PRICE: 'Prezzo',
   TRAVEL_GROUP: 'Gruppo di viaggio',
-  EXCURSION: 'Escursione'
+  EXCURSION: 'Escursione',
+  LOADING_EXCURSIONS: 'Caricamento delle escursioni...',
+  LOADING_FLIGHTS: 'Caricamento dei voli...',
+  LOADING_ACCOMMODATIONS: 'Caricamento degli alloggi...',
+  LOADING_ITINERARY: "Caricamento dell'itinerario...",
+  LOADING_OPTIONS: 'Caricamento delle opzioni...'
 };
 var ITINERARY$7 = {
   DAY: 'Giorno',
@@ -4334,6 +4388,7 @@ var SRP$6 = {
   DEPARTURE_ASC: 'Vertrekdatum (dichtstbij eerst)',
   FILTERS: 'Filters',
   SHOW_ITINERARY: 'Toon reisplan',
+  VIEW_BOOKING: 'Bekijk boeking',
   ITINERARY_TITLE: 'Overzicht van je reis',
   DOSSIER_NUMBER: 'Dossiernummer',
   PACKAGE_PRICE_PER_PERSON: 'pakketprijs per persoon',
@@ -4363,7 +4418,12 @@ var SRP$6 = {
   ARRIVAL_AIRPORTS: 'Aankomstluchthavens',
   PRICE: 'Prijs',
   TRAVEL_GROUP: 'Reisgezelschap',
-  EXCURSION: 'Excursie'
+  EXCURSION: 'Excursie',
+  LOADING_EXCURSIONS: 'Excursies laden...',
+  LOADING_FLIGHTS: 'Vluchten laden...',
+  LOADING_ACCOMMODATIONS: 'Accommodaties laden...',
+  LOADING_ITINERARY: 'Reisplan laden...',
+  LOADING_OPTIONS: 'Opties laden...'
 };
 var ITINERARY$6 = {
   DAY: 'Dag',
@@ -4748,6 +4808,7 @@ var SRP$5 = {
   DEPARTURE_ASC: 'Vertrekdatum (dichtstbij eerst)',
   FILTERS: 'Filters',
   SHOW_ITINERARY: 'Toon reisplan',
+  VIEW_BOOKING: 'Bekijk boeking',
   ITINERARY_TITLE: 'Overzicht van je reis',
   DOSSIER_NUMBER: 'Dossiernummer',
   PACKAGE_PRICE_PER_PERSON: 'pakketprijs per persoon',
@@ -4777,7 +4838,12 @@ var SRP$5 = {
   ARRIVAL_AIRPORTS: 'Aankomstluchthavens',
   PRICE: 'Prijs',
   TRAVEL_GROUP: 'Reisgezelschap',
-  EXCURSION: 'Excursie'
+  EXCURSION: 'Excursie',
+  LOADING_EXCURSIONS: 'Excursies laden...',
+  LOADING_FLIGHTS: 'Vluchten laden...',
+  LOADING_ACCOMMODATIONS: 'Accommodaties laden...',
+  LOADING_ITINERARY: 'Reisplan laden...',
+  LOADING_OPTIONS: 'Opties laden...'
 };
 var ITINERARY$5 = {
   DAY: 'Dag',
@@ -5162,6 +5228,7 @@ var SRP$4 = {
   DEPARTURE_ASC: 'Avreisedato (nærmeste først)',
   FILTERS: 'Filtre',
   SHOW_ITINERARY: 'Vis reiserute',
+  VIEW_BOOKING: 'Se bestilling',
   ITINERARY_TITLE: 'Din reisemåloversikt',
   DOSSIER_NUMBER: 'Saksnummer',
   PACKAGE_PRICE_PER_PERSON: 'pakkepris per person',
@@ -5191,7 +5258,12 @@ var SRP$4 = {
   ARRIVAL_AIRPORTS: 'Ankomstflyplasser',
   PRICE: 'Pris',
   TRAVEL_GROUP: 'Reisefølge',
-  EXCURSION: 'Utflukt'
+  EXCURSION: 'Utflukt',
+  LOADING_EXCURSIONS: 'Laster utflukter...',
+  LOADING_FLIGHTS: 'Laster flyvninger...',
+  LOADING_ACCOMMODATIONS: 'Laster overnattinger...',
+  LOADING_ITINERARY: 'Laster reiserute...',
+  LOADING_OPTIONS: 'Laster alternativer...'
 };
 var ITINERARY$4 = {
   DAY: 'Dag',
@@ -5576,6 +5648,7 @@ var SRP$3 = {
   DEPARTURE_ASC: 'Data wyjazdu (najbliższa najpierw)',
   FILTERS: 'Filtry',
   SHOW_ITINERARY: 'Pokaż plan podróży',
+  VIEW_BOOKING: 'Zobacz rezerwację',
   ITINERARY_TITLE: 'Podsumowanie Twojej podróży',
   DOSSIER_NUMBER: 'Numer pliku',
   PACKAGE_PRICE_PER_PERSON: 'cena pakietu za osobę',
@@ -5605,7 +5678,12 @@ var SRP$3 = {
   ARRIVAL_AIRPORTS: 'Lotniska przylotu',
   PRICE: 'Cena',
   TRAVEL_GROUP: 'Grupa podróżnych',
-  EXCURSION: 'Wycieczka'
+  EXCURSION: 'Wycieczka',
+  LOADING_EXCURSIONS: 'Ładowanie wycieczek...',
+  LOADING_FLIGHTS: 'Ładowanie lotów...',
+  LOADING_ACCOMMODATIONS: 'Ładowanie zakwaterowań...',
+  LOADING_ITINERARY: 'Ładowanie planu podróży...',
+  LOADING_OPTIONS: 'Ładowanie opcji...'
 };
 var ITINERARY$3 = {
   DAY: 'Dzień',
@@ -5990,6 +6068,7 @@ var SRP$2 = {
   DEPARTURE_ASC: 'Data de partida (mais próxima primeiro)',
   FILTERS: 'Filtros',
   SHOW_ITINERARY: 'Mostrar itinerário',
+  VIEW_BOOKING: 'Ver reserva',
   ITINERARY_TITLE: 'Resumo da sua viagem',
   DOSSIER_NUMBER: 'Número do processo',
   PACKAGE_PRICE_PER_PERSON: 'preço do pacote por pessoa',
@@ -6019,7 +6098,12 @@ var SRP$2 = {
   ARRIVAL_AIRPORTS: 'Aeroportos de chegada',
   PRICE: 'Preço',
   TRAVEL_GROUP: 'Grupo de viajantes',
-  EXCURSION: 'Excursão'
+  EXCURSION: 'Excursão',
+  LOADING_EXCURSIONS: 'A carregar excursões...',
+  LOADING_FLIGHTS: 'A carregar voos...',
+  LOADING_ACCOMMODATIONS: 'A carregar alojamentos...',
+  LOADING_ITINERARY: 'A carregar itinerário...',
+  LOADING_OPTIONS: 'A carregar opções...'
 };
 var ITINERARY$2 = {
   DAY: 'Dia',
@@ -6404,6 +6488,7 @@ var SRP$1 = {
   DEPARTURE_ASC: 'Avresedatum (närmast först)',
   FILTERS: 'Filter',
   SHOW_ITINERARY: 'Visa resplan',
+  VIEW_BOOKING: 'Visa bokning',
   ITINERARY_TITLE: 'Din resesammanfattning',
   DOSSIER_NUMBER: 'Filnummer',
   PACKAGE_PRICE_PER_PERSON: 'paketpris per person',
@@ -6433,7 +6518,12 @@ var SRP$1 = {
   ARRIVAL_AIRPORTS: 'Ankomstflygplatser',
   PRICE: 'Pris',
   TRAVEL_GROUP: 'Resesällskap',
-  EXCURSION: 'Utflykt'
+  EXCURSION: 'Utflykt',
+  LOADING_EXCURSIONS: 'Laddar utflykter...',
+  LOADING_FLIGHTS: 'Laddar flyg...',
+  LOADING_ACCOMMODATIONS: 'Laddar boenden...',
+  LOADING_ITINERARY: 'Laddar resplan...',
+  LOADING_OPTIONS: 'Laddar alternativ...'
 };
 var ITINERARY$1 = {
   DAY: 'Dag',
@@ -6816,6 +6906,7 @@ var SRP = {
   DEPARTURE_ASC: '出発日（早い順）',
   FILTERS: 'フィルター',
   SHOW_ITINERARY: '旅程を表示',
+  VIEW_BOOKING: '予約を見る',
   ITINERARY_TITLE: 'あなたの旅行概要',
   DOSSIER_NUMBER: 'ファイル番号',
   PACKAGE_PRICE_PER_PERSON: '1人あたりのパッケージ料金',
@@ -6845,7 +6936,12 @@ var SRP = {
   ARRIVAL_AIRPORTS: '到着空港',
   PRICE: '価格',
   TRAVEL_GROUP: '旅行グループ',
-  EXCURSION: 'エクスカーション'
+  EXCURSION: 'エクスカーション',
+  LOADING_EXCURSIONS: 'エクスカーションを読み込み中...',
+  LOADING_FLIGHTS: 'フライトを読み込み中...',
+  LOADING_ACCOMMODATIONS: '宿泊施設を読み込み中...',
+  LOADING_ITINERARY: '旅程を読み込み中...',
+  LOADING_OPTIONS: 'オプションを読み込み中...'
 };
 var ITINERARY = {
   DAY: '日',
@@ -6995,6 +7091,14 @@ function format(text, args) {
     return typeof args[index] == 'undefined' ? match : args[index];
   });
 }
+var formatDate = function (date) {
+  return new Intl.DateTimeFormat('nl-BE', {
+    weekday: 'short',
+    day: '2-digit',
+    month: 'short',
+    year: '2-digit'
+  }).format(new Date(date));
+};
 var dateToDateStruct = function (date) {
   if (date === undefined) {
     return { year: 0, month: 0, day: 0 };
@@ -7098,6 +7202,11 @@ var getDatesBetween = function (fromDate, toDate) {
   }
   return dates;
 };
+var getDateOnlyTime = function (date) {
+  if (!date) return 0;
+  var parsedDate = new Date(date);
+  return new Date(parsedDate.getFullYear(), parsedDate.getMonth(), parsedDate.getDate()).getTime();
+};
 
 var getDateFromParams = function (params, name) {
   var dateString = params.get(name);
@@ -16748,6 +16857,28 @@ var Icon = function (_a) {
           d: 'M256 0c14.7 0 28.2 8.1 35.2 21l216 400c6.7 12.4 6.4 27.4-.8 39.5S486.1 480 472 480L40 480c-14.1 0-27.2-7.4-34.4-19.5s-7.5-27.1-.8-39.5l216-400c7-12.9 20.5-21 35.2-21zm0 352a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.5 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z'
         })
       );
+    case 'ui-shopping-cart':
+      return React__default['default'].createElement(
+        'svg',
+        {
+          className: ['icon', 'icon--'.concat(name), className]
+            .filter(function (className) {
+              return !lodash.isEmpty(className);
+            })
+            .join(' '),
+          width: width,
+          height: height,
+          viewBox: '0 0 640 512',
+          fill: fill !== null && fill !== void 0 ? fill : 'currentColor'
+        },
+        React__default['default'].createElement(HTMLComment, {
+          text: '!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.'
+        }),
+        title && React__default['default'].createElement('title', null, title),
+        React__default['default'].createElement('path', {
+          d: 'M24-16C10.7-16 0-5.3 0 8S10.7 32 24 32l45.3 0c3.9 0 7.2 2.8 7.9 6.6l52.1 286.3c6.2 34.2 36 59.1 70.8 59.1L456 384c13.3 0 24-10.7 24-24s-10.7-24-24-24l-255.9 0c-11.6 0-21.5-8.3-23.6-19.7l-5.1-28.3 303.6 0c30.8 0 57.2-21.9 62.9-52.2L568.9 69.9C572.6 50.2 557.5 32 537.4 32l-412.7 0-.4-2c-4.8-26.6-28-46-55.1-46L24-16zM208 512a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm224 0a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'
+        })
+      );
     default:
       return null;
   }
@@ -20640,47 +20771,27 @@ var SettingsContext = React__default['default'].createContext({
   }
 });
 
-var StepIndicators = function (_a) {
-  var currentStep = _a.currentStep;
-  var _b = React.useContext(SettingsContext),
-    flightOptions = _b.flightOptions,
-    roomOptions = _b.roomOptions;
-  var translations = reactRedux.useSelector(selectTranslations);
-  var travelersFirstStep = reactRedux.useSelector(selectTravelersFirstStep);
-  var allSteps = [];
-  if (travelersFirstStep) {
-    allSteps.push(translations.STEPS.PERSONAL_DETAILS);
-  }
-  if (!flightOptions.isHidden) {
-    allSteps.push(translations.STEPS.FLIGHT_OPTIONS);
-  }
-  if (!roomOptions.isHidden) {
-    allSteps.push(translations.STEPS.ROOM_OPTIONS);
-  }
-  allSteps.push(translations.STEPS.EXTRA_OPTIONS);
-  if (!travelersFirstStep) {
-    allSteps.push(translations.STEPS.PERSONAL_DETAILS);
-  }
-  allSteps.push(translations.STEPS.SUMMARY);
-  allSteps.push(translations.STEPS.CONFIRMATION);
+var StepIndicators$1 = function (_a) {
+  var currentStep = _a.currentStep,
+    stepLabels = _a.stepLabels;
   return React__default['default'].createElement(
     'div',
     { className: 'step-indicators' },
     React__default['default'].createElement(
       'div',
       { className: 'step-indicators__items' },
-      allSteps.map(function (stepName, index) {
+      stepLabels.map(function (stepName, index) {
         return React__default['default'].createElement(
           'div',
           {
             key: ''.concat(index + 1, '-').concat(stepName),
             className: buildClassName([
               'step-indicators__item',
-              currentStep === index + 1 && 'step-indicators__item--active',
-              currentStep > index + 1 && 'step-indicators__item--completed'
+              currentStep === index && 'step-indicators__item--active',
+              currentStep > index && 'step-indicators__item--completed'
             ])
           },
-          React__default['default'].createElement('div', { className: 'step-indicators__icon step-indicators__icon' }, index + 1),
+          React__default['default'].createElement('div', { className: 'step-indicators__icon' }, index + 1),
           React__default['default'].createElement('div', { className: 'step-indicators__text' }, stepName)
         );
       })
@@ -20688,27 +20799,94 @@ var StepIndicators = function (_a) {
   );
 };
 
-var StepRoute = function (_a) {
-  var number = _a.number,
-    title = _a.title,
-    component = _a.component;
+var StepIndicators = function (_a) {
+  var currentStep = _a.currentStep;
+  var _b = React.useContext(SettingsContext),
+    flightOptions = _b.flightOptions,
+    roomOptions = _b.roomOptions;
+  var translations = reactRedux.useSelector(selectTranslations);
+  var travelersFirstStep = reactRedux.useSelector(selectTravelersFirstStep);
+  var stepLabels = [];
+  if (travelersFirstStep) {
+    stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
+  }
+  if (!flightOptions.isHidden) {
+    stepLabels.push(translations.STEPS.FLIGHT_OPTIONS);
+  }
+  if (!roomOptions.isHidden) {
+    stepLabels.push(translations.STEPS.ROOM_OPTIONS);
+  }
+  stepLabels.push(translations.STEPS.EXTRA_OPTIONS);
+  if (!travelersFirstStep) {
+    stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
+  }
+  stepLabels.push(translations.STEPS.SUMMARY);
+  stepLabels.push(translations.STEPS.CONFIRMATION);
+  return React__default['default'].createElement(StepIndicators$1, { currentStep: currentStep, stepLabels: stepLabels });
+};
+
+var BookingPanel = function (_a) {
+  var currentStep = _a.currentStep,
+    stepLabels = _a.stepLabels,
+    renderTitle = _a.renderTitle,
+    children = _a.children,
+    StepIndicatorsComponent = _a.StepIndicatorsComponent;
   return React__default['default'].createElement(
-    React__default['default'].Fragment,
-    null,
-    React__default['default'].createElement(StepIndicators, { currentStep: number }),
+    'div',
+    { className: 'booking__panel' },
+    React__default['default'].createElement(StepIndicatorsComponent, { currentStep: currentStep, stepLabels: stepLabels }),
     React__default['default'].createElement(
       'div',
       { className: 'booking__panel-frame booking__panel-frame--transparent' },
       React__default['default'].createElement(
         'div',
         { className: 'booking__panel-heading' },
-        React__default['default'].createElement('h4', { className: 'booking__panel-title' }, number, '. ', title)
+        React__default['default'].createElement('h4', { className: 'booking__panel-title' }, renderTitle(currentStep))
       ),
-      React__default['default'].createElement('div', { className: 'booking__panel-body' }, component)
+      React__default['default'].createElement('div', { className: 'booking__panel-body' }, children)
     )
   );
 };
 
+var StepRoute = function (_a) {
+  var number = _a.number;
+  _a.title;
+  var component = _a.component;
+  var _b = React.useContext(SettingsContext),
+    flightOptions = _b.flightOptions,
+    roomOptions = _b.roomOptions;
+  var translations = reactRedux.useSelector(selectTranslations);
+  var travelersFirstStep = reactRedux.useSelector(selectTravelersFirstStep);
+  var stepLabels = [];
+  if (travelersFirstStep) {
+    stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
+  }
+  if (!flightOptions.isHidden) {
+    stepLabels.push(translations.STEPS.FLIGHT_OPTIONS);
+  }
+  if (!roomOptions.isHidden) {
+    stepLabels.push(translations.STEPS.ROOM_OPTIONS);
+  }
+  stepLabels.push(translations.STEPS.EXTRA_OPTIONS);
+  if (!travelersFirstStep) {
+    stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
+  }
+  stepLabels.push(translations.STEPS.SUMMARY);
+  stepLabels.push(translations.STEPS.CONFIRMATION);
+  return React__default['default'].createElement(
+    BookingPanel,
+    {
+      currentStep: number,
+      stepLabels: stepLabels,
+      StepIndicatorsComponent: StepIndicators,
+      renderTitle: function (step) {
+        return React__default['default'].createElement(React__default['default'].Fragment, null, step + 1, '. ', stepLabels[step]);
+      }
+    },
+    component
+  );
+};
+
 var _a$2;
 var initialState$4 = {
   apiUrl: '',
@@ -21863,8 +22041,7 @@ var FlightFilter = function (_a) {
   );
 };
 
-var getTravelersText = function (rooms) {
-  var translations = reactRedux.useSelector(selectTranslations);
+var getTravelersText = function (rooms, translations) {
   return rooms.map(function (r) {
     return lodash
       .compact([
@@ -25355,7 +25532,7 @@ var selectPackagePriceDetails = toolkit.createSelector(selectPriceDetails, funct
     return priceDetail.isInPackage;
   });
 });
-var selectSeparatePackagePriceDetails = toolkit.createSelector(selectPackagePriceDetails, function (pricedetails) {
+var selectSeparatePackagePriceDetails$1 = toolkit.createSelector(selectPackagePriceDetails, function (pricedetails) {
   var result = [];
   var filteredPriceDetails = pricedetails.filter(function (priceDetail) {
     return priceDetail.isSeparate;
@@ -25497,11 +25674,11 @@ var ProductCard = function (_a) {
 
 var SidebarFlight = function (_a) {
   var title = _a.title,
-    flightMetaData = _a.flightMetaData;
+    flightMetaData = _a.flightMetaData,
+    translations = _a.translations;
   var flightLines = parseFlightLines(flightMetaData);
   var firstFlight = lodash.first(flightLines);
   var lastFlight = lodash.last(flightLines);
-  var translations = reactRedux.useSelector(selectTranslations);
   return React__default['default'].createElement(
     'div',
     { className: 'pricing-summary__group' },
@@ -25567,47 +25744,50 @@ var SidebarFlight = function (_a) {
   );
 };
 
-var Sidebar = function (_a) {
+var SharedSidebar = function (_a) {
   var productName = _a.productName,
     thumbnailUrl = _a.thumbnailUrl,
     isLoading = _a.isLoading,
+    translations = _a.translations,
+    headerComponent = _a.headerComponent,
     travelerRooms = _a.travelerRooms,
     startDateText = _a.startDateText,
     endDateText = _a.endDateText,
+    loaderComponent = _a.loaderComponent,
     departureFlightMetaData = _a.departureFlightMetaData,
     returnFlightMetaData = _a.returnFlightMetaData,
+    accommodations = _a.accommodations,
+    packagingAccommodations = _a.packagingAccommodations,
+    isOnRequest = _a.isOnRequest,
+    includedServiceTypes = _a.includedServiceTypes,
     basePrice = _a.basePrice,
     commission = _a.commission,
     totalPrice = _a.totalPrice,
     includedCosts = _a.includedCosts,
     extraCosts = _a.extraCosts,
     deposit = _a.deposit,
-    accommodations = _a.accommodations,
-    includedServiceTypes = _a.includedServiceTypes,
-    isOnRequest = _a.isOnRequest,
-    headerComponent = _a.headerComponent,
-    footerComponent = _a.footerComponent,
-    loaderComponent = _a.loaderComponent,
-    isUnavailable = _a.isUnavailable,
     basePricePerPaxType = _a.basePricePerPaxType,
-    seperateExtraPricePerPaxType = _a.seperateExtraPricePerPaxType;
+    seperateExtraPricePerPaxType = _a.seperateExtraPricePerPaxType,
+    isUnavailable = _a.isUnavailable,
+    agent = _a.agent,
+    footerComponent = _a.footerComponent;
+  if (!translations) return null;
   var _b = React.useState(false),
     active = _b[0],
     setActive = _b[1];
-  var translations = reactRedux.useSelector(selectTranslations);
-  var currencyCode = reactRedux.useSelector(selectCurrencyCode);
-  var isAgent = reactRedux.useSelector(selectAgentAdressId);
+  var handleToggleClick = function () {
+    setActive(!active);
+  };
+  var isFlightOnly =
+    (includedServiceTypes === null || includedServiceTypes === void 0 ? void 0 : includedServiceTypes.length) === 1 &&
+    includedServiceTypes.includes(build.ServiceType.flight);
   var canShowPriceBreakdownSection = Boolean(basePrice && basePrice > 0) || !lodash.isEmpty(includedCosts) || !lodash.isEmpty(extraCosts);
   var canShowTotalPriceSection = Boolean(totalPrice && totalPrice > 0);
   var remainingAmount = Number(
     ((totalPrice !== null && totalPrice !== void 0 ? totalPrice : 0) - (deposit !== null && deposit !== void 0 ? deposit : 0)).toFixed(2)
   );
-  var isFlightOnly =
-    (includedServiceTypes === null || includedServiceTypes === void 0 ? void 0 : includedServiceTypes.length) === 1 &&
-    includedServiceTypes.includes(build.ServiceType.flight);
-  var handleToggleClick = function () {
-    setActive(!active);
-  };
+  // TODO: Determine currency code based on the data, for now default to EUR
+  var currencyCode = 'EUR';
   return React__default['default'].createElement(
     'div',
     { className: buildClassName(['booking__sidebar', active && 'booking__sidebar--active']) },
@@ -25619,337 +25799,392 @@ var Sidebar = function (_a) {
       React__default['default'].createElement(
         'div',
         { className: 'pricing-summary' },
-        !isUnavailable
-          ? React__default['default'].createElement(
+        React__default['default'].createElement(
+          'div',
+          { className: 'pricing-summary__wrapper' },
+          React__default['default'].createElement(
+            'div',
+            { className: 'pricing-summary__region pricing-summary__region--fade-in' },
+            React__default['default'].createElement(
               'div',
-              { className: 'pricing-summary__wrapper' },
-              React__default['default'].createElement(
-                'div',
-                { className: 'pricing-summary__region '.concat(!isLoading ? 'pricing-summary__region--fade-in' : '') },
+              { className: 'pricing-summary__group' },
+              React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SIDEBAR.TRAVEL_INFO),
+              !lodash.isEmpty(travelerRooms) &&
+                (travelerRooms === null || travelerRooms === void 0
+                  ? void 0
+                  : travelerRooms.map(function (room, rIndex) {
+                      return React__default['default'].createElement(
+                        'div',
+                        { className: 'pricing-summary__row', key: rIndex },
+                        React__default['default'].createElement(
+                          'div',
+                          { className: 'pricing-summary__property' },
+                          travelerRooms.length > 1 && ''.concat(translations.SHARED.ROOM, ' ').concat(rIndex + 1),
+                          travelerRooms.length === 1 && translations.ROOM_OPTIONS_FORM.TRAVELER_GROUP
+                        ),
+                        React__default['default'].createElement('div', { className: 'pricing-summary__value' }, room)
+                      );
+                    })),
+              startDateText &&
                 React__default['default'].createElement(
                   'div',
-                  { className: 'pricing-summary__group' },
-                  React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SIDEBAR.TRAVEL_INFO),
-                  !lodash.isEmpty(travelerRooms) &&
-                    (travelerRooms === null || travelerRooms === void 0
-                      ? void 0
-                      : travelerRooms.map(function (room, rIndex) {
-                          return React__default['default'].createElement(
-                            'div',
-                            { className: 'pricing-summary__row', key: rIndex },
-                            React__default['default'].createElement(
-                              'div',
-                              { className: 'pricing-summary__property' },
-                              travelerRooms.length > 1 && ''.concat(translations.SHARED.ROOM, ' ').concat(rIndex + 1),
-                              travelerRooms.length === 1 && translations.ROOM_OPTIONS_FORM.TRAVELER_GROUP
-                            ),
-                            React__default['default'].createElement('div', { className: 'pricing-summary__value' }, room)
-                          );
-                        })),
-                  startDateText &&
+                  { className: 'pricing-summary__row' },
+                  React__default['default'].createElement(
+                    'div',
+                    { className: 'pricing-summary__property' },
+                    startDateText && endDateText ? translations.SIDEBAR.DEPARTURE : translations.SIDEBAR.DEPARTURE_SINGLE
+                  ),
+                  React__default['default'].createElement('div', { className: 'pricing-summary__value' }, startDateText)
+                ),
+              endDateText &&
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'pricing-summary__row' },
+                  React__default['default'].createElement('div', { className: 'pricing-summary__property' }, translations.SIDEBAR.ARRIVAL),
+                  React__default['default'].createElement('div', { className: 'pricing-summary__value' }, endDateText)
+                )
+            ),
+            isLoading && loaderComponent,
+            !isLoading &&
+              departureFlightMetaData &&
+              React__default['default'].createElement(SidebarFlight, {
+                title: translations.SIDEBAR.DEPARTURE_FLIGHT,
+                flightMetaData: departureFlightMetaData,
+                translations: translations
+              }),
+            !isLoading &&
+              returnFlightMetaData &&
+              React__default['default'].createElement(SidebarFlight, {
+                title: translations.SIDEBAR.ARRIVAL_FLIGHT,
+                flightMetaData: returnFlightMetaData,
+                translations: translations
+              }),
+            accommodations &&
+              React__default['default'].createElement(
+                'div',
+                { className: 'pricing-summary__group' },
+                React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SIDEBAR.ACCOMMODATION),
+                accommodations.map(function (accommodation) {
+                  var option = accommodation.options.find(function (x) {
+                    return x.isSelected;
+                  });
+                  return React__default['default'].createElement(
+                    'div',
+                    { key: accommodation.index },
                     React__default['default'].createElement(
                       'div',
                       { className: 'pricing-summary__row' },
                       React__default['default'].createElement(
                         'div',
                         { className: 'pricing-summary__property' },
-                        startDateText && endDateText ? translations.SIDEBAR.DEPARTURE : translations.SIDEBAR.DEPARTURE_SINGLE
+                        option === null || option === void 0 ? void 0 : option.accommodationName,
+                        isOnRequest ? ' ('.concat(translations.SIDEBAR.ON_REQUEST, ')') : '',
+                        (option === null || option === void 0 ? void 0 : option.isOnRequest) ? ' ('.concat(translations.SIDEBAR.ON_REQUEST, ')') : ''
+                      )
+                    ),
+                    React__default['default'].createElement(
+                      'div',
+                      { className: 'pricing-summary__row' },
+                      React__default['default'].createElement(
+                        'div',
+                        { className: 'price-summarty__property' },
+                        option === null || option === void 0 ? void 0 : option.regimeName
                       ),
-                      React__default['default'].createElement('div', { className: 'pricing-summary__value' }, startDateText)
+                      React__default['default'].createElement(
+                        'div',
+                        { className: 'price-summary__value' },
+                        !isFlightOnly &&
+                          getDatePeriodText(
+                            translations,
+                            option === null || option === void 0 ? void 0 : option.from,
+                            option === null || option === void 0 ? void 0 : option.to,
+                            true
+                          )
+                      )
+                    )
+                  );
+                })
+              ),
+            packagingAccommodations &&
+              React__default['default'].createElement(
+                'div',
+                { className: 'pricing-summary__group' },
+                React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SIDEBAR.ACCOMMODATION),
+                packagingAccommodations.map(function (accommodation) {
+                  return React__default['default'].createElement(
+                    'div',
+                    { key: accommodation.guid },
+                    React__default['default'].createElement(
+                      'div',
+                      { className: 'pricing-summary__row' },
+                      React__default['default'].createElement(
+                        'div',
+                        { className: 'pricing-summary__property' },
+                        accommodation === null || accommodation === void 0 ? void 0 : accommodation.accommodationName,
+                        isOnRequest ? ' ('.concat(translations.SIDEBAR.ON_REQUEST, ')') : ''
+                      )
                     ),
-                  endDateText &&
                     React__default['default'].createElement(
                       'div',
                       { className: 'pricing-summary__row' },
-                      React__default['default'].createElement('div', { className: 'pricing-summary__property' }, translations.SIDEBAR.ARRIVAL),
-                      React__default['default'].createElement('div', { className: 'pricing-summary__value' }, endDateText)
+                      React__default['default'].createElement(
+                        'div',
+                        { className: 'price-summarty__property' },
+                        accommodation === null || accommodation === void 0 ? void 0 : accommodation.regimeName
+                      ),
+                      React__default['default'].createElement(
+                        'div',
+                        { className: 'price-summary__value' },
+                        !isFlightOnly &&
+                          getDatePeriodText(
+                            translations,
+                            accommodation === null || accommodation === void 0 ? void 0 : accommodation.from,
+                            accommodation === null || accommodation === void 0 ? void 0 : accommodation.to,
+                            true
+                          )
+                      )
                     )
-                ),
-                isLoading && loaderComponent,
-                !isLoading &&
-                  departureFlightMetaData &&
-                  React__default['default'].createElement(SidebarFlight, {
-                    title: translations.SIDEBAR.DEPARTURE_FLIGHT,
-                    flightMetaData: departureFlightMetaData
-                  }),
-                !isLoading &&
-                  returnFlightMetaData &&
-                  React__default['default'].createElement(SidebarFlight, { title: translations.SIDEBAR.ARRIVAL_FLIGHT, flightMetaData: returnFlightMetaData }),
-                accommodations &&
+                  );
+                })
+              )
+          ),
+          !isLoading &&
+            canShowPriceBreakdownSection &&
+            React__default['default'].createElement(
+              'div',
+              { className: 'pricing-summary__region '.concat(!isLoading ? 'pricing-summary__region--fade-in' : '') },
+              basePrice !== undefined &&
+                basePrice > 0 &&
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'pricing-summary__group' },
                   React__default['default'].createElement(
                     'div',
-                    { className: 'pricing-summary__group' },
-                    React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SIDEBAR.ACCOMMODATION),
-                    accommodations.map(function (accommodation) {
-                      var option = accommodation.options.find(function (x) {
-                        return x.isSelected;
-                      });
+                    { className: 'pricing-summary__row' },
+                    React__default['default'].createElement(
+                      'div',
+                      { className: 'pricing-summary__property' },
+                      React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SIDEBAR.BASE_PRICE)
+                    ),
+                    React__default['default'].createElement('div', { className: 'pricing-summary__value' }, formatPrice$3(basePrice, currencyCode))
+                  ),
+                  basePricePerPaxType &&
+                    basePricePerPaxType.map(function (ppt, index) {
                       return React__default['default'].createElement(
-                        'div',
-                        { key: accommodation.index },
+                        React__default['default'].Fragment,
+                        { key: ''.concat(ppt.paxType, '-').concat(index) },
                         React__default['default'].createElement(
                           'div',
                           { className: 'pricing-summary__row' },
                           React__default['default'].createElement(
                             'div',
                             { className: 'pricing-summary__property' },
-                            option === null || option === void 0 ? void 0 : option.accommodationName,
-                            isOnRequest ? ' ('.concat(translations.SIDEBAR.ON_REQUEST, ')') : '',
-                            (option === null || option === void 0 ? void 0 : option.isOnRequest) ? ' ('.concat(translations.SIDEBAR.ON_REQUEST, ')') : ''
-                          )
-                        ),
-                        React__default['default'].createElement(
-                          'div',
-                          { className: 'pricing-summary__row' },
-                          React__default['default'].createElement(
-                            'div',
-                            { className: 'price-summarty__property' },
-                            option === null || option === void 0 ? void 0 : option.regimeName
+                            ppt.numberOfPax,
+                            ' ',
+                            getPaxTypeTranslation(translations, ppt.paxType, ppt.numberOfPax)
                           ),
                           React__default['default'].createElement(
                             'div',
-                            { className: 'price-summary__value' },
-                            !isFlightOnly &&
-                              getDatePeriodText(
-                                translations,
-                                option === null || option === void 0 ? void 0 : option.from,
-                                option === null || option === void 0 ? void 0 : option.to,
-                                true
-                              )
+                            { className: 'pricing-summary__value' },
+                            formatPrice$3(ppt.pricePerPaxType, currencyCode)
                           )
-                        )
-                      );
-                    })
-                  )
-              ),
-              !isLoading &&
-                canShowPriceBreakdownSection &&
-                React__default['default'].createElement(
-                  'div',
-                  { className: 'pricing-summary__region '.concat(!isLoading ? 'pricing-summary__region--fade-in' : '') },
-                  basePrice !== undefined &&
-                    basePrice > 0 &&
-                    React__default['default'].createElement(
-                      'div',
-                      { className: 'pricing-summary__group' },
-                      React__default['default'].createElement(
-                        'div',
-                        { className: 'pricing-summary__row' },
-                        React__default['default'].createElement(
-                          'div',
-                          { className: 'pricing-summary__property' },
-                          React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SIDEBAR.BASE_PRICE)
                         ),
-                        React__default['default'].createElement('div', { className: 'pricing-summary__value' }, formatPrice$3(basePrice, currencyCode))
-                      ),
-                      basePricePerPaxType &&
-                        basePricePerPaxType.map(function (ppt, index) {
+                        ppt.details.map(function (detail, dIndex) {
                           return React__default['default'].createElement(
-                            React__default['default'].Fragment,
-                            { key: ''.concat(ppt.paxType, '-').concat(index) },
+                            'div',
+                            { className: 'pricing-summary__row pricing-summary__row--sub', key: ''.concat(ppt.paxType, '-').concat(index, '-').concat(dIndex) },
                             React__default['default'].createElement(
                               'div',
-                              { className: 'pricing-summary__row' },
+                              { className: 'pricing-summary__property' },
+                              detail.numberOfPax,
+                              'x ',
+                              detail.description
+                            ),
+                            React__default['default'].createElement(
+                              'div',
+                              { className: 'pricing-summary__value' },
+                              formatPrice$3(detail.price / detail.numberOfPax, currencyCode)
+                            )
+                          );
+                        })
+                      );
+                    })
+                ),
+              !lodash.isEmpty(includedCosts) &&
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'pricing-summary__group' },
+                  React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SIDEBAR.INCLUDED_COSTS),
+                  includedCosts === null || includedCosts === void 0
+                    ? void 0
+                    : includedCosts.map(function (priceDetail, index) {
+                        var _a;
+                        return React__default['default'].createElement(
+                          React__default['default'].Fragment,
+                          { key: lodash.compact([priceDetail.productCode, priceDetail.accommodationCode, index]).join('_') },
+                          React__default['default'].createElement(
+                            'div',
+                            { className: 'pricing-summary__row' },
+                            React__default['default'].createElement('div', { className: 'pricing-summary__property' }, priceDetail.productName),
+                            priceDetail.showPrice &&
                               React__default['default'].createElement(
                                 'div',
-                                { className: 'pricing-summary__property' },
-                                ppt.numberOfPax,
-                                ' ',
-                                getPaxTypeTranslation(translations, ppt.paxType, ppt.numberOfPax)
-                              ),
+                                { className: 'pricing-summary__value' },
+                                formatPrice$3(priceDetail.price * priceDetail.amount, currencyCode)
+                              )
+                          ),
+                          React__default['default'].createElement(
+                            'div',
+                            { className: 'pricing-summary__row' },
+                            React__default['default'].createElement(
+                              'div',
+                              { className: 'price-summary__property' },
+                              (_a = priceDetail.accommodationName) !== null && _a !== void 0 ? _a : priceDetail.accommodationCode
+                            )
+                          )
+                        );
+                      })
+                ),
+              !lodash.isEmpty(extraCosts) &&
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'pricing-summary__group' },
+                  React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SIDEBAR.EXTRA_COSTS),
+                  extraCosts === null || extraCosts === void 0
+                    ? void 0
+                    : extraCosts.map(function (priceDetail, index) {
+                        var _a;
+                        return React__default['default'].createElement(
+                          React__default['default'].Fragment,
+                          { key: lodash.compact([priceDetail.productCode, priceDetail.accommodationCode, index]).join('_') },
+                          React__default['default'].createElement(
+                            'div',
+                            { className: 'pricing-summary__row' },
+                            React__default['default'].createElement('div', { className: 'pricing-summary__property' }, priceDetail.productName),
+                            priceDetail.showPrice &&
                               React__default['default'].createElement(
                                 'div',
                                 { className: 'pricing-summary__value' },
-                                formatPrice$3(ppt.pricePerPaxType, currencyCode)
+                                formatPrice$3(priceDetail.price * priceDetail.amount, currencyCode)
                               )
-                            ),
-                            ppt.details.map(function (detail, dIndex) {
+                          ),
+                          React__default['default'].createElement(
+                            'div',
+                            { className: 'pricing-summary__row' },
+                            React__default['default'].createElement(
+                              'div',
+                              { className: 'pricing-summary__property' },
+                              (_a = priceDetail.accommodationName) !== null && _a !== void 0 ? _a : priceDetail.accommodationCode
+                            )
+                          ),
+                          seperateExtraPricePerPaxType &&
+                            seperateExtraPricePerPaxType.map(function (ppt, index) {
                               return React__default['default'].createElement(
-                                'div',
-                                {
-                                  className: 'pricing-summary__row pricing-summary__row--sub',
-                                  key: ''.concat(ppt.paxType, '-').concat(index, '-').concat(dIndex)
-                                },
-                                React__default['default'].createElement(
-                                  'div',
-                                  { className: 'pricing-summary__property' },
-                                  detail.numberOfPax,
-                                  'x ',
-                                  detail.description
-                                ),
+                                React__default['default'].Fragment,
+                                { key: ''.concat(ppt.paxType, '-').concat(index) },
                                 React__default['default'].createElement(
                                   'div',
-                                  { className: 'pricing-summary__value' },
-                                  formatPrice$3(detail.price / detail.numberOfPax, currencyCode)
-                                )
-                              );
-                            })
-                          );
-                        })
-                    ),
-                  !lodash.isEmpty(includedCosts) &&
-                    React__default['default'].createElement(
-                      'div',
-                      { className: 'pricing-summary__group' },
-                      React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SIDEBAR.INCLUDED_COSTS),
-                      includedCosts === null || includedCosts === void 0
-                        ? void 0
-                        : includedCosts.map(function (priceDetail, index) {
-                            var _a;
-                            return React__default['default'].createElement(
-                              React__default['default'].Fragment,
-                              { key: lodash.compact([priceDetail.productCode, priceDetail.accommodationCode, index]).join('_') },
-                              React__default['default'].createElement(
-                                'div',
-                                { className: 'pricing-summary__row' },
-                                React__default['default'].createElement('div', { className: 'pricing-summary__property' }, priceDetail.productName),
-                                priceDetail.showPrice &&
+                                  { className: 'pricing-summary__row' },
                                   React__default['default'].createElement(
                                     'div',
-                                    { className: 'pricing-summary__value' },
-                                    formatPrice$3(priceDetail.price * priceDetail.amount, currencyCode)
-                                  )
-                              ),
-                              React__default['default'].createElement(
-                                'div',
-                                { className: 'pricing-summary__row' },
-                                React__default['default'].createElement(
-                                  'div',
-                                  { className: 'price-summary__property' },
-                                  (_a = priceDetail.accommodationName) !== null && _a !== void 0 ? _a : priceDetail.accommodationCode
-                                )
-                              )
-                            );
-                          })
-                    ),
-                  !lodash.isEmpty(extraCosts) &&
-                    React__default['default'].createElement(
-                      'div',
-                      { className: 'pricing-summary__group' },
-                      React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SIDEBAR.EXTRA_COSTS),
-                      extraCosts === null || extraCosts === void 0
-                        ? void 0
-                        : extraCosts.map(function (priceDetail, index) {
-                            var _a;
-                            return React__default['default'].createElement(
-                              React__default['default'].Fragment,
-                              { key: lodash.compact([priceDetail.productCode, priceDetail.accommodationCode, index]).join('_') },
-                              React__default['default'].createElement(
-                                'div',
-                                { className: 'pricing-summary__row' },
-                                React__default['default'].createElement('div', { className: 'pricing-summary__property' }, priceDetail.productName),
-                                priceDetail.showPrice &&
+                                    { className: 'pricing-summary__property' },
+                                    ppt.numberOfPax,
+                                    ' ',
+                                    getPaxTypeTranslation(translations, ppt.paxType, ppt.numberOfPax)
+                                  ),
                                   React__default['default'].createElement(
                                     'div',
                                     { className: 'pricing-summary__value' },
-                                    formatPrice$3(priceDetail.price * priceDetail.amount, currencyCode)
+                                    formatPrice$3(ppt.pricePerPaxType, currencyCode)
                                   )
-                              ),
-                              React__default['default'].createElement(
-                                'div',
-                                { className: 'pricing-summary__row' },
-                                React__default['default'].createElement(
-                                  'div',
-                                  { className: 'pricing-summary__property' },
-                                  (_a = priceDetail.accommodationName) !== null && _a !== void 0 ? _a : priceDetail.accommodationCode
-                                )
-                              ),
-                              seperateExtraPricePerPaxType &&
-                                seperateExtraPricePerPaxType.map(function (ppt, index) {
+                                ),
+                                ppt.details.map(function (detail, dIndex) {
                                   return React__default['default'].createElement(
-                                    React__default['default'].Fragment,
-                                    { key: ''.concat(ppt.paxType, '-').concat(index) },
+                                    'div',
+                                    {
+                                      className: 'pricing-summary__row pricing-summary__row--sub',
+                                      key: ''.concat(ppt.paxType, '-').concat(index, '-').concat(dIndex)
+                                    },
                                     React__default['default'].createElement(
                                       'div',
-                                      { className: 'pricing-summary__row' },
-                                      React__default['default'].createElement(
-                                        'div',
-                                        { className: 'pricing-summary__property' },
-                                        ppt.numberOfPax,
-                                        ' ',
-                                        getPaxTypeTranslation(translations, ppt.paxType, ppt.numberOfPax)
-                                      ),
-                                      React__default['default'].createElement(
-                                        'div',
-                                        { className: 'pricing-summary__value' },
-                                        formatPrice$3(ppt.pricePerPaxType, currencyCode)
-                                      )
+                                      { className: 'pricing-summary__property' },
+                                      detail.numberOfPax,
+                                      'x ',
+                                      detail.description
                                     ),
-                                    ppt.details.map(function (detail, dIndex) {
-                                      return React__default['default'].createElement(
-                                        'div',
-                                        {
-                                          className: 'pricing-summary__row pricing-summary__row--sub',
-                                          key: ''.concat(ppt.paxType, '-').concat(index, '-').concat(dIndex)
-                                        },
-                                        React__default['default'].createElement(
-                                          'div',
-                                          { className: 'pricing-summary__property' },
-                                          detail.numberOfPax,
-                                          'x ',
-                                          detail.description
-                                        ),
-                                        React__default['default'].createElement(
-                                          'div',
-                                          { className: 'pricing-summary__value' },
-                                          formatPrice$3(detail.price / detail.numberOfPax, currencyCode)
-                                        )
-                                      );
-                                    })
+                                    React__default['default'].createElement(
+                                      'div',
+                                      { className: 'pricing-summary__value' },
+                                      formatPrice$3(detail.price / detail.numberOfPax, currencyCode)
+                                    )
                                   );
                                 })
-                            );
-                          })
-                    )
+                              );
+                            })
+                        );
+                      })
                 )
-            )
-          : React__default['default'].createElement(
-              'div',
-              { className: 'pricing-summary__region' },
-              React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SIDEBAR.PACKAGE_NOT_AVAILABLE)
             ),
-        !isLoading &&
-          canShowTotalPriceSection &&
-          !isUnavailable &&
-          React__default['default'].createElement(
-            'div',
-            { className: 'pricing-summary__region pricing-summary__region--pricing '.concat(!isLoading ? 'pricing-summary__region--fade-in' : '') },
-            deposit && remainingAmount > 0
-              ? React__default['default'].createElement(
-                  'div',
-                  { className: 'pricing-summary__group' },
-                  isAgent &&
-                    React__default['default'].createElement(
-                      'div',
-                      { className: 'pricing-summary__row pricing-summary__row--total-price' },
+          !isLoading &&
+            canShowTotalPriceSection &&
+            !isUnavailable &&
+            React__default['default'].createElement(
+              'div',
+              { className: 'pricing-summary__region pricing-summary__region--pricing '.concat(!isLoading ? 'pricing-summary__region--fade-in' : '') },
+              deposit && remainingAmount > 0
+                ? React__default['default'].createElement(
+                    'div',
+                    { className: 'pricing-summary__group' },
+                    agent &&
                       React__default['default'].createElement(
                         'div',
-                        { className: 'pricing-summary__property' },
-                        React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SIDEBAR.COMMISSION)
+                        { className: 'pricing-summary__row pricing-summary__row--total-price' },
+                        React__default['default'].createElement(
+                          'div',
+                          { className: 'pricing-summary__property' },
+                          React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SIDEBAR.COMMISSION)
+                        ),
+                        React__default['default'].createElement(
+                          'div',
+                          { className: 'pricing-summary__value' },
+                          React__default['default'].createElement(
+                            'div',
+                            { className: 'pricing' },
+                            React__default['default'].createElement(
+                              'div',
+                              { className: 'pricing__price' },
+                              formatPrice$3(commission !== null && commission !== void 0 ? commission : 0, currencyCode)
+                            )
+                          )
+                        )
                       ),
+                    totalPrice !== undefined &&
+                      totalPrice > 0 &&
                       React__default['default'].createElement(
                         'div',
-                        { className: 'pricing-summary__value' },
+                        { className: 'pricing-summary__row pricing-summary__row--total-price' },
                         React__default['default'].createElement(
                           'div',
-                          { className: 'pricing' },
+                          { className: 'pricing-summary__property' },
+                          React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SHARED.TOTAL_PRICE)
+                        ),
+                        React__default['default'].createElement(
+                          'div',
+                          { className: 'pricing-summary__value' },
                           React__default['default'].createElement(
                             'div',
-                            { className: 'pricing__price' },
-                            formatPrice$3(commission !== null && commission !== void 0 ? commission : 0, currencyCode)
+                            { className: 'pricing' },
+                            React__default['default'].createElement('div', { className: 'pricing__price' }, formatPrice$3(totalPrice, currencyCode))
                           )
                         )
-                      )
-                    ),
-                  totalPrice !== undefined &&
-                    totalPrice > 0 &&
+                      ),
                     React__default['default'].createElement(
                       'div',
-                      { className: 'pricing-summary__row pricing-summary__row--total-price' },
+                      { className: 'pricing-summary__row' },
                       React__default['default'].createElement(
                         'div',
                         { className: 'pricing-summary__property' },
-                        React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SHARED.TOTAL_PRICE)
+                        React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SIDEBAR.DEPOSIT)
                       ),
                       React__default['default'].createElement(
                         'div',
@@ -25957,97 +26192,80 @@ var Sidebar = function (_a) {
                         React__default['default'].createElement(
                           'div',
                           { className: 'pricing' },
-                          React__default['default'].createElement('div', { className: 'pricing__price' }, formatPrice$3(totalPrice, currencyCode))
+                          React__default['default'].createElement('div', { className: 'pricing__price' }, formatPrice$3(deposit, currencyCode))
                         )
                       )
                     ),
-                  React__default['default'].createElement(
-                    'div',
-                    { className: 'pricing-summary__row' },
-                    React__default['default'].createElement(
-                      'div',
-                      { className: 'pricing-summary__property' },
-                      React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SIDEBAR.DEPOSIT)
-                    ),
                     React__default['default'].createElement(
                       'div',
-                      { className: 'pricing-summary__value' },
-                      React__default['default'].createElement(
-                        'div',
-                        { className: 'pricing' },
-                        React__default['default'].createElement('div', { className: 'pricing__price' }, formatPrice$3(deposit, currencyCode))
-                      )
-                    )
-                  ),
-                  React__default['default'].createElement(
-                    'div',
-                    { className: 'pricing-summary__row' },
-                    React__default['default'].createElement(
-                      'small',
-                      null,
+                      { className: 'pricing-summary__row' },
                       React__default['default'].createElement(
-                        'em',
+                        'small',
                         null,
-                        translations.SIDEBAR.DEPOSIT_TEXT1,
-                        React__default['default'].createElement('strong', null, translations.SIDEBAR.DEPOSIT_TEXT2),
-                        translations.SIDEBAR.DEPOSIT_TEXT3,
-                        formatPrice$3(remainingAmount, currencyCode),
-                        translations.SIDEBAR.DEPOSIT_TEXT4,
-                        React__default['default'].createElement('strong', null, translations.SIDEBAR.DEPOSIT_TEXT5),
-                        translations.SIDEBAR.DEPOSIT_TEXT6
+                        React__default['default'].createElement(
+                          'em',
+                          null,
+                          translations.SIDEBAR.DEPOSIT_TEXT1,
+                          React__default['default'].createElement('strong', null, translations.SIDEBAR.DEPOSIT_TEXT2),
+                          translations.SIDEBAR.DEPOSIT_TEXT3,
+                          formatPrice$3(remainingAmount, currencyCode),
+                          translations.SIDEBAR.DEPOSIT_TEXT4,
+                          React__default['default'].createElement('strong', null, translations.SIDEBAR.DEPOSIT_TEXT5),
+                          translations.SIDEBAR.DEPOSIT_TEXT6
+                        )
                       )
                     )
                   )
-                )
-              : React__default['default'].createElement(
-                  'div',
-                  { className: 'pricing-summary__group' },
-                  isAgent &&
-                    React__default['default'].createElement(
-                      'div',
-                      { className: 'pricing-summary__row pricing-summary__row--total-price' },
-                      React__default['default'].createElement(
-                        'div',
-                        { className: 'pricing-summary__property' },
-                        React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SIDEBAR.COMMISSION)
-                      ),
+                : React__default['default'].createElement(
+                    'div',
+                    { className: 'pricing-summary__group' },
+                    agent &&
                       React__default['default'].createElement(
                         'div',
-                        { className: 'pricing-summary__value' },
+                        { className: 'pricing-summary__row pricing-summary__row--total-price' },
                         React__default['default'].createElement(
                           'div',
-                          { className: 'pricing' },
+                          { className: 'pricing-summary__property' },
+                          React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SIDEBAR.COMMISSION)
+                        ),
+                        React__default['default'].createElement(
+                          'div',
+                          { className: 'pricing-summary__value' },
                           React__default['default'].createElement(
                             'div',
-                            { className: 'pricing__price' },
-                            formatPrice$3(commission !== null && commission !== void 0 ? commission : 0, currencyCode)
+                            { className: 'pricing' },
+                            React__default['default'].createElement(
+                              'div',
+                              { className: 'pricing__price' },
+                              formatPrice$3(commission !== null && commission !== void 0 ? commission : 0, currencyCode)
+                            )
                           )
                         )
-                      )
-                    ),
-                  totalPrice !== undefined &&
-                    totalPrice > 0 &&
-                    React__default['default'].createElement(
-                      'div',
-                      { className: 'pricing-summary__row pricing-summary__row--total-price' },
-                      React__default['default'].createElement(
-                        'div',
-                        { className: 'pricing-summary__property' },
-                        React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SHARED.TOTAL_PRICE)
                       ),
+                    totalPrice !== undefined &&
+                      totalPrice > 0 &&
                       React__default['default'].createElement(
                         'div',
-                        { className: 'pricing-summary__value' },
+                        { className: 'pricing-summary__row pricing-summary__row--total-price' },
                         React__default['default'].createElement(
                           'div',
-                          { className: 'pricing' },
-                          React__default['default'].createElement('div', { className: 'pricing__price' }, formatPrice$3(totalPrice, currencyCode))
+                          { className: 'pricing-summary__property' },
+                          React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SHARED.TOTAL_PRICE)
+                        ),
+                        React__default['default'].createElement(
+                          'div',
+                          { className: 'pricing-summary__value' },
+                          React__default['default'].createElement(
+                            'div',
+                            { className: 'pricing' },
+                            React__default['default'].createElement('div', { className: 'pricing__price' }, formatPrice$3(totalPrice, currencyCode))
+                          )
                         )
                       )
-                    )
-                )
-          ),
-        footerComponent
+                  )
+            ),
+          footerComponent
+        )
       )
     )
   );
@@ -26064,7 +26282,8 @@ var SidebarContainer = function (_a) {
     showPricesPerPaxType = _f.showPricesPerPaxType;
   var bookingAttributes = reactRedux.useSelector(selectBookingAttributes);
   var rooms = reactRedux.useSelector(selectFormRooms);
-  var travelerRooms = getTravelersText(rooms);
+  var translations = reactRedux.useSelector(selectTranslations);
+  var travelerRooms = getTravelersText(rooms, translations);
   var departureFlight = reactRedux.useSelector(selectDepartureFlight);
   var departureFlightMetaData =
     (_b = departureFlight === null || departureFlight === void 0 ? void 0 : departureFlight.flightMetaData) !== null && _b !== void 0
@@ -26085,7 +26304,8 @@ var SidebarContainer = function (_a) {
   var includedServiceTypes = reactRedux.useSelector(selectIncludedServiceTypes);
   var isUnavailable = reactRedux.useSelector(selectIsUnavailable) || false;
   var isLoading = isFetchingProductOptions || isFetchingPriceDetails;
-  return React__default['default'].createElement(Sidebar, {
+  var agent = reactRedux.useSelector(selectAgentAdressId);
+  return React__default['default'].createElement(SharedSidebar, {
     productName: productName,
     thumbnailUrl: thumbnailUrl,
     isLoading: isLoading,
@@ -26101,7 +26321,7 @@ var SidebarContainer = function (_a) {
     basePrice: reactRedux.useSelector(selectBasePrice),
     commission: reactRedux.useSelector(selectCommission),
     totalPrice: reactRedux.useSelector(selectTotalPrice),
-    includedCosts: reactRedux.useSelector(selectSeparatePackagePriceDetails),
+    includedCosts: reactRedux.useSelector(selectSeparatePackagePriceDetails$1),
     extraCosts: reactRedux.useSelector(selectSeparateExtraPriceDetails),
     accommodations: accommodations,
     includedServiceTypes: includedServiceTypes,
@@ -26112,7 +26332,9 @@ var SidebarContainer = function (_a) {
     loaderComponent: loaderComponent !== null && loaderComponent !== void 0 ? loaderComponent : undefined,
     isUnavailable: isUnavailable,
     basePricePerPaxType: showPricesPerPaxType ? reactRedux.useSelector(selectBasePricePerPaxType) : undefined,
-    seperateExtraPricePerPaxType: showPricesPerPaxType ? reactRedux.useSelector(selectSeparateExtraPriceDetailsPerPaxType) : undefined
+    seperateExtraPricePerPaxType: showPricesPerPaxType ? reactRedux.useSelector(selectSeparateExtraPriceDetailsPerPaxType) : undefined,
+    translations: translations,
+    agent: agent
   });
 };
 
@@ -30811,19 +31033,25 @@ var qsmReducer = qsmSlice.reducer;
 
 var SearchResultsConfigurationContext = React__default['default'].createContext(undefined);
 
-var Spinner = function () {
-  var _a;
+var Spinner = function (_a) {
+  var _b;
+  var label = _a.label;
   var context = React.useContext(SearchResultsConfigurationContext);
-  var translations = getTranslations((_a = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _a !== void 0 ? _a : 'en-GB');
+  var translations = getTranslations((_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB');
   return React__default['default'].createElement(
     'div',
-    { className: 'spinner__container' },
-    React__default['default'].createElement('span', { className: 'spinner__icon' }),
+    { className: 'loader__container' },
     React__default['default'].createElement(
-      'span',
-      { className: 'spinner__label' },
-      translations === null || translations === void 0 ? void 0 : translations.SRP.LOADING
-    )
+      'div',
+      { className: 'loader__line' },
+      React__default['default'].createElement('li', { className: 'loader__ball loader__ball--1' }),
+      React__default['default'].createElement('li', { className: 'loader__ball loader__ball--2' }),
+      React__default['default'].createElement('li', { className: 'loader__ball loader__ball--3' })
+    ),
+    React__default['default'].createElement('div', {
+      'data-text': label !== null && label !== void 0 ? label : translations.SRP.LOADING,
+      className: 'loader__line__text'
+    })
   );
 };
 
@@ -31884,6 +32112,7 @@ var MobileFilterModal = function () {
     destinationAirport = _b.destinationAirport,
     returnAirport = _b.returnAirport,
     destination = _b.destination;
+  var searchInputRef = React.useRef(null);
   var _c = React.useState(''),
     inputValue = _c[0],
     setInputValue = _c[1];
@@ -31900,6 +32129,18 @@ var MobileFilterModal = function () {
     },
     [activeSearchFieldProps]
   );
+  React.useEffect(
+    function () {
+      if (mobileFilterType !== 'search') return;
+      requestAnimationFrame(function () {
+        var input = searchInputRef.current;
+        if (!input) return;
+        input.focus();
+        input.setSelectionRange(input.value.length, input.value.length);
+      });
+    },
+    [mobileFilterType, activeSearchFieldProps === null || activeSearchFieldProps === void 0 ? void 0 : activeSearchFieldProps.fieldKey]
+  );
   /* ---------------------------------------------------------------- */
   /* Helpers                                                          */
   /* ---------------------------------------------------------------- */
@@ -32092,6 +32333,7 @@ var MobileFilterModal = function () {
           'label',
           { className: 'qsm__input-wrapper' },
           React__default['default'].createElement('input', {
+            ref: searchInputRef,
             type: 'text',
             id: 'search',
             value: inputValue,
@@ -32101,7 +32343,6 @@ var MobileFilterModal = function () {
             onChange: function (e) {
               return 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
           }),
@@ -32599,7 +32840,6 @@ var ItemPicker$1 = function (_a) {
     isDropdownOpen = _b[0],
     setIsDropdownOpen = _b[1];
   var dropdownRef = React.useRef(null);
-  var toggleButtonRef = React.useRef(null);
   var handlePick = function (picked, id) {
     setIsDropdownOpen(false);
     onPick(picked, id);
@@ -32621,7 +32861,7 @@ var ItemPicker$1 = function (_a) {
     React__default['default'].createElement('span', { className: 'dropdown__label' }, label),
     React__default['default'].createElement(
       'div',
-      { className: 'dropdown' },
+      { className: 'dropdown', ref: dropdownRef },
       React__default['default'].createElement(
         'button',
         {
@@ -32630,8 +32870,7 @@ var ItemPicker$1 = function (_a) {
             return setIsDropdownOpen(function (prev) {
               return !prev;
             });
-          },
-          ref: toggleButtonRef
+          }
         },
         React__default['default'].createElement('span', null, selection || placeholder),
         React__default['default'].createElement('span', { className: 'arrow' }, '\u25BE')
@@ -33064,58 +33303,16 @@ var QSMContainer = function () {
           );
         })
       ),
-      React__default['default'].createElement(
-        'div',
-        { className: 'qsm__filter' },
-        (qsmType === build.PortalQsmType.Accommodation ||
-          qsmType === build.PortalQsmType.AccommodationAndFlight ||
-          qsmType === build.PortalQsmType.GroupTour) &&
-          React__default['default'].createElement(
-            'div',
-            { className: 'radiobutton-group qsm__filter__inputgroup' },
-            React__default['default'].createElement(
-              'div',
-              { className: 'radiobutton' },
-              React__default['default'].createElement(
-                'label',
-                { className: 'radiobutton__label' },
-                React__default['default'].createElement('input', {
-                  type: 'radio',
-                  name: 'numberOfAccommodations',
-                  // onChange={handleMainBookerChange}
-                  // onBlur={formik.handleBlur}
-                  value: '',
-                  checked: true,
-                  readOnly: true,
-                  className: 'radiobutton__input'
-                }),
-                React__default['default'].createElement('span', null, translations.QSM.ONE_ACCOMMODATION)
-              )
-            ),
+      !isMobile &&
+        React__default['default'].createElement(
+          'div',
+          { className: 'qsm__filter' },
+          (qsmType === build.PortalQsmType.Accommodation ||
+            qsmType === build.PortalQsmType.AccommodationAndFlight ||
+            qsmType === build.PortalQsmType.GroupTour) &&
             React__default['default'].createElement(
               'div',
-              { className: 'radiobutton' },
-              React__default['default'].createElement(
-                'label',
-                { className: 'radiobutton__label' },
-                React__default['default'].createElement('input', {
-                  type: 'radio',
-                  name: 'numberOfAccommodations',
-                  // onChange={handleMainBookerChange}
-                  // onBlur={formik.handleBlur}
-                  value: '',
-                  className: 'radiobutton__input',
-                  disabled: true
-                }),
-                React__default['default'].createElement('span', null, translations.QSM.MULTIPLE_ACCOMMODATIONS)
-              )
-            )
-          ),
-        qsmType === build.PortalQsmType.Flight &&
-          React__default['default'].createElement(
-            'div',
-            { className: 'radiobutton-group qsm__filter__inputgroup' },
-            allowOneWay &&
+              { className: 'radiobutton-group qsm__filter__inputgroup' },
               React__default['default'].createElement(
                 'div',
                 { className: 'radiobutton' },
@@ -33124,18 +33321,17 @@ var QSMContainer = function () {
                   { className: 'radiobutton__label' },
                   React__default['default'].createElement('input', {
                     type: 'radio',
-                    name: 'tripType',
-                    value: 'oneway',
-                    checked: tripType === 'oneway',
-                    onChange: function () {
-                      return handleTripTypeChange('oneway');
-                    },
+                    name: 'numberOfAccommodations',
+                    // onChange={handleMainBookerChange}
+                    // onBlur={formik.handleBlur}
+                    value: '',
+                    checked: true,
+                    readOnly: true,
                     className: 'radiobutton__input'
                   }),
-                  React__default['default'].createElement('span', null, translations.QSM.ONEWAY)
+                  React__default['default'].createElement('span', null, translations.QSM.ONE_ACCOMMODATION)
                 )
               ),
-            allowRoundtrip &&
               React__default['default'].createElement(
                 'div',
                 { className: 'radiobutton' },
@@ -33144,58 +33340,102 @@ var QSMContainer = function () {
                   { className: 'radiobutton__label' },
                   React__default['default'].createElement('input', {
                     type: 'radio',
-                    name: 'tripType',
-                    value: 'roundtrip',
-                    checked: tripType === 'roundtrip',
-                    onChange: function () {
-                      return handleTripTypeChange('roundtrip');
-                    },
-                    className: 'radiobutton__input'
+                    name: 'numberOfAccommodations',
+                    // onChange={handleMainBookerChange}
+                    // onBlur={formik.handleBlur}
+                    value: '',
+                    className: 'radiobutton__input',
+                    disabled: true
                   }),
-                  React__default['default'].createElement('span', null, translations.QSM.ROUNDTRIP)
+                  React__default['default'].createElement('span', null, translations.QSM.MULTIPLE_ACCOMMODATIONS)
                 )
-              ),
-            allowOpenJaw &&
-              React__default['default'].createElement(
-                'div',
-                { className: 'radiobutton' },
+              )
+            ),
+          qsmType === build.PortalQsmType.Flight &&
+            React__default['default'].createElement(
+              'div',
+              { className: 'radiobutton-group qsm__filter__inputgroup' },
+              allowOneWay &&
                 React__default['default'].createElement(
-                  'label',
-                  { className: 'radiobutton__label' },
-                  React__default['default'].createElement('input', {
-                    type: 'radio',
-                    name: 'tripType',
-                    value: 'openjaw',
-                    checked: tripType === 'openjaw',
-                    onChange: function () {
-                      return handleTripTypeChange('openjaw');
-                    },
-                    className: 'radiobutton__input'
-                  }),
-                  React__default['default'].createElement('span', null, translations.QSM.OPENJAW)
+                  'div',
+                  { className: 'radiobutton' },
+                  React__default['default'].createElement(
+                    'label',
+                    { className: 'radiobutton__label' },
+                    React__default['default'].createElement('input', {
+                      type: 'radio',
+                      name: 'tripType',
+                      value: 'oneway',
+                      checked: tripType === 'oneway',
+                      onChange: function () {
+                        return handleTripTypeChange('oneway');
+                      },
+                      className: 'radiobutton__input'
+                    }),
+                    React__default['default'].createElement('span', null, translations.QSM.ONEWAY)
+                  )
+                ),
+              allowRoundtrip &&
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'radiobutton' },
+                  React__default['default'].createElement(
+                    'label',
+                    { className: 'radiobutton__label' },
+                    React__default['default'].createElement('input', {
+                      type: 'radio',
+                      name: 'tripType',
+                      value: 'roundtrip',
+                      checked: tripType === 'roundtrip',
+                      onChange: function () {
+                        return handleTripTypeChange('roundtrip');
+                      },
+                      className: 'radiobutton__input'
+                    }),
+                    React__default['default'].createElement('span', null, translations.QSM.ROUNDTRIP)
+                  )
+                ),
+              allowOpenJaw &&
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'radiobutton' },
+                  React__default['default'].createElement(
+                    'label',
+                    { className: 'radiobutton__label' },
+                    React__default['default'].createElement('input', {
+                      type: 'radio',
+                      name: 'tripType',
+                      value: 'openjaw',
+                      checked: tripType === 'openjaw',
+                      onChange: function () {
+                        return handleTripTypeChange('openjaw');
+                      },
+                      className: 'radiobutton__input'
+                    }),
+                    React__default['default'].createElement('span', null, translations.QSM.OPENJAW)
+                  )
                 )
-              )
-          ),
-        React__default['default'].createElement(
-          'div',
-          { className: 'qsm__filter__classgroup' },
-          qsmType !== build.PortalQsmType.Accommodation &&
-            qsmType !== build.PortalQsmType.Car &&
-            qsmType !== build.PortalQsmType.Ticket &&
-            qsmType !== build.PortalQsmType.Cruise &&
-            qsmType !== build.PortalQsmType.Transfer &&
-            qsmType !== build.PortalQsmType.GroupTour &&
-            askTravelClass &&
-            React__default['default'].createElement(TravelClassPicker, null),
-          qsmType !== build.PortalQsmType.Multidestination &&
-            qsmType !== build.PortalQsmType.Car &&
-            qsmType !== build.PortalQsmType.Flight &&
-            qsmType !== build.PortalQsmType.Transfer &&
-            askTravelType &&
-            React__default['default'].createElement(TravelTypePicker, null),
-          askNationality && React__default['default'].createElement(TravelNationalityPicker, null)
-        )
-      ),
+            ),
+          React__default['default'].createElement(
+            'div',
+            { className: 'qsm__filter__classgroup' },
+            qsmType !== build.PortalQsmType.Accommodation &&
+              qsmType !== build.PortalQsmType.Car &&
+              qsmType !== build.PortalQsmType.Ticket &&
+              qsmType !== build.PortalQsmType.Cruise &&
+              qsmType !== build.PortalQsmType.Transfer &&
+              qsmType !== build.PortalQsmType.GroupTour &&
+              askTravelClass &&
+              React__default['default'].createElement(TravelClassPicker, null),
+            qsmType !== build.PortalQsmType.Multidestination &&
+              qsmType !== build.PortalQsmType.Car &&
+              qsmType !== build.PortalQsmType.Flight &&
+              qsmType !== build.PortalQsmType.Transfer &&
+              askTravelType &&
+              React__default['default'].createElement(TravelTypePicker, null),
+            askNationality && React__default['default'].createElement(TravelNationalityPicker, null)
+          )
+        ),
       React__default['default'].createElement(
         'div',
         { className: 'qsm__input-group' },
@@ -33217,6 +33457,139 @@ var QSMContainer = function () {
           React__default['default'].createElement(SearchInputGroup, { fieldConfig: destination }),
         React__default['default'].createElement(Dates, { value: dateRange, onChange: handleDateChange }),
         askTravelers && React__default['default'].createElement(TravelInputGroup, null),
+        isMobile &&
+          React__default['default'].createElement(
+            'div',
+            { className: 'qsm__filter' },
+            (qsmType === build.PortalQsmType.Accommodation ||
+              qsmType === build.PortalQsmType.AccommodationAndFlight ||
+              qsmType === build.PortalQsmType.GroupTour) &&
+              React__default['default'].createElement(
+                'div',
+                { className: 'radiobutton-group qsm__filter__inputgroup' },
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'radiobutton' },
+                  React__default['default'].createElement(
+                    'label',
+                    { className: 'radiobutton__label' },
+                    React__default['default'].createElement('input', {
+                      type: 'radio',
+                      name: 'numberOfAccommodations',
+                      // onChange={handleMainBookerChange}
+                      // onBlur={formik.handleBlur}
+                      value: '',
+                      checked: true,
+                      readOnly: true,
+                      className: 'radiobutton__input'
+                    }),
+                    React__default['default'].createElement('span', null, translations.QSM.ONE_ACCOMMODATION)
+                  )
+                ),
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'radiobutton' },
+                  React__default['default'].createElement(
+                    'label',
+                    { className: 'radiobutton__label' },
+                    React__default['default'].createElement('input', {
+                      type: 'radio',
+                      name: 'numberOfAccommodations',
+                      // onChange={handleMainBookerChange}
+                      // onBlur={formik.handleBlur}
+                      value: '',
+                      className: 'radiobutton__input',
+                      disabled: true
+                    }),
+                    React__default['default'].createElement('span', null, translations.QSM.MULTIPLE_ACCOMMODATIONS)
+                  )
+                )
+              ),
+            qsmType === build.PortalQsmType.Flight &&
+              React__default['default'].createElement(
+                'div',
+                { className: 'radiobutton-group qsm__filter__inputgroup' },
+                allowOneWay &&
+                  React__default['default'].createElement(
+                    'div',
+                    { className: 'radiobutton' },
+                    React__default['default'].createElement(
+                      'label',
+                      { className: 'radiobutton__label' },
+                      React__default['default'].createElement('input', {
+                        type: 'radio',
+                        name: 'tripType',
+                        value: 'oneway',
+                        checked: tripType === 'oneway',
+                        onChange: function () {
+                          return handleTripTypeChange('oneway');
+                        },
+                        className: 'radiobutton__input'
+                      }),
+                      React__default['default'].createElement('span', null, translations.QSM.ONEWAY)
+                    )
+                  ),
+                allowRoundtrip &&
+                  React__default['default'].createElement(
+                    'div',
+                    { className: 'radiobutton' },
+                    React__default['default'].createElement(
+                      'label',
+                      { className: 'radiobutton__label' },
+                      React__default['default'].createElement('input', {
+                        type: 'radio',
+                        name: 'tripType',
+                        value: 'roundtrip',
+                        checked: tripType === 'roundtrip',
+                        onChange: function () {
+                          return handleTripTypeChange('roundtrip');
+                        },
+                        className: 'radiobutton__input'
+                      }),
+                      React__default['default'].createElement('span', null, translations.QSM.ROUNDTRIP)
+                    )
+                  ),
+                allowOpenJaw &&
+                  React__default['default'].createElement(
+                    'div',
+                    { className: 'radiobutton' },
+                    React__default['default'].createElement(
+                      'label',
+                      { className: 'radiobutton__label' },
+                      React__default['default'].createElement('input', {
+                        type: 'radio',
+                        name: 'tripType',
+                        value: 'openjaw',
+                        checked: tripType === 'openjaw',
+                        onChange: function () {
+                          return handleTripTypeChange('openjaw');
+                        },
+                        className: 'radiobutton__input'
+                      }),
+                      React__default['default'].createElement('span', null, translations.QSM.OPENJAW)
+                    )
+                  )
+              ),
+            React__default['default'].createElement(
+              'div',
+              { className: 'qsm__filter__classgroup' },
+              qsmType !== build.PortalQsmType.Accommodation &&
+                qsmType !== build.PortalQsmType.Car &&
+                qsmType !== build.PortalQsmType.Ticket &&
+                qsmType !== build.PortalQsmType.Cruise &&
+                qsmType !== build.PortalQsmType.Transfer &&
+                qsmType !== build.PortalQsmType.GroupTour &&
+                askTravelClass &&
+                React__default['default'].createElement(TravelClassPicker, null),
+              qsmType !== build.PortalQsmType.Multidestination &&
+                qsmType !== build.PortalQsmType.Car &&
+                qsmType !== build.PortalQsmType.Flight &&
+                qsmType !== build.PortalQsmType.Transfer &&
+                askTravelType &&
+                React__default['default'].createElement(TravelTypePicker, null),
+              askNationality && React__default['default'].createElement(TravelNationalityPicker, null)
+            )
+          ),
         React__default['default'].createElement(
           'button',
           { type: 'button', className: 'cta', onClick: handleSubmit },
@@ -33292,7 +33665,9 @@ var initialState$1 = {
   itinerary: null,
   excursionSearchParams: null,
   selectedExcursionSearchResult: null,
-  confirmedExcursionsByDay: {}
+  confirmedExcursionsByDay: {},
+  bookPackagingEntry: false,
+  currentStep: 0
 };
 var searchResultsSlice = toolkit.createSlice({
   name: 'searchResults',
@@ -33473,6 +33848,12 @@ var searchResultsSlice = toolkit.createSlice({
     },
     clearConfirmedExcursionsForDay: function (state, action) {
       delete state.confirmedExcursionsByDay[action.payload.dayKey];
+    },
+    setBookPackagingEntry: function (state, action) {
+      state.bookPackagingEntry = action.payload;
+    },
+    setCurrentStep: function (state, action) {
+      state.currentStep = action.payload;
     }
   }
 });
@@ -33517,6 +33898,8 @@ var setExcursionSearchParams = _a.setExcursionSearchParams,
   confirmExcursionForDay = _a.confirmExcursionForDay,
   removeConfirmedExcursionForDay = _a.removeConfirmedExcursionForDay;
 _a.clearConfirmedExcursionsForDay;
+var setBookPackagingEntry = _a.setBookPackagingEntry;
+_a.setCurrentStep;
 var searchResultsReducer = searchResultsSlice.reducer;
 
 var ItemPicker = function (_a) {
@@ -33863,11 +34246,6 @@ var getServiceTypePriority = function (serviceType) {
   var _a;
   return (_a = SERVICE_TYPE_PRIORITY[serviceType !== null && serviceType !== void 0 ? serviceType : -1]) !== null && _a !== void 0 ? _a : 2;
 };
-var getDateOnlyTime = function (date) {
-  if (!date) return 0;
-  var parsedDate = new Date(date);
-  return new Date(parsedDate.getFullYear(), parsedDate.getMonth(), parsedDate.getDate()).getTime();
-};
 var Itinerary = function (_a) {
   var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
   var isOpen = _a.isOpen,
@@ -33881,6 +34259,7 @@ var Itinerary = function (_a) {
     }),
     editablePackagingEntry = _q.editablePackagingEntry,
     priceDetails = _q.priceDetails;
+  var dispatch = reactRedux.useDispatch();
   var packagingEntry =
     editablePackagingEntry !== null && editablePackagingEntry !== void 0
       ? editablePackagingEntry
@@ -33971,6 +34350,9 @@ var Itinerary = function (_a) {
   var numberOfPax = ((_p = packagingEntry.pax) === null || _p === void 0 ? void 0 : _p.length) || 1;
   var totalPrice = (priceDetails === null || priceDetails === void 0 ? void 0 : priceDetails.total) || packagingEntry.price || 0;
   var pricePerPerson = totalPrice / numberOfPax;
+  var handleConfirm = function () {
+    dispatch(setBookPackagingEntry(true));
+  };
   return React__default['default'].createElement(
     'div',
     { className: 'search__filters--modal '.concat(isOpen ? 'is-open' : '') },
@@ -34026,7 +34408,7 @@ var Itinerary = function (_a) {
           'div',
           { className: 'search__filter__prices' },
           isLoading
-            ? React__default['default'].createElement(Spinner, null)
+            ? React__default['default'].createElement(Spinner, { label: translations.PRODUCT.LOADING_PRICE })
             : React__default['default'].createElement(
                 React__default['default'].Fragment,
                 null,
@@ -34041,7 +34423,7 @@ var Itinerary = function (_a) {
                     React__default['default'].createElement('strong', null, '(', formatPrice$3(totalPrice, 'EUR'), ' ', translations.SRP.TOTAL, ')')
                   )
                 ),
-                React__default['default'].createElement('button', { className: 'cta' }, translations.QSM.CONFIRM)
+                React__default['default'].createElement('button', { className: 'cta', onClick: handleConfirm }, translations.QSM.CONFIRM)
               )
         ),
         React__default['default'].createElement(
@@ -35366,7 +35748,7 @@ var FlightsFlyIn = function (_a) {
       'div',
       { className: 'flyin__content' },
       flightSearchDetailsLoading || lodash.isEmpty(flights)
-        ? React__default['default'].createElement(Spinner, null)
+        ? React__default['default'].createElement(Spinner, { label: translations.SRP.LOADING_FLIGHTS })
         : flight &&
             React__default['default'].createElement(
               'div',
@@ -35993,17 +36375,17 @@ var AccommodationFlyIn = function (_a) {
     handleConfirm = _a.handleConfirm;
   var dispatch = reactRedux.useDispatch();
   var context = React.useContext(SearchResultsConfigurationContext);
+  var language = (_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB';
+  var translations = getTranslations(language);
   if (isLoading) {
     return React__default['default'].createElement(
       React__default['default'].Fragment,
       null,
-      (_b = context === null || context === void 0 ? void 0 : context.customSpinner) !== null && _b !== void 0
-        ? _b
-        : React__default['default'].createElement(Spinner, null)
+      (_c = context === null || context === void 0 ? void 0 : context.customSpinner) !== null && _c !== void 0
+        ? _c
+        : React__default['default'].createElement(Spinner, { label: translations.SRP.LOADING_ACCOMMODATIONS })
     );
   }
-  var language = (_c = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _c !== void 0 ? _c : 'en-GB';
-  var translations = getTranslations(language);
   var _d = reactRedux.useSelector(function (state) {
       return state.searchResults;
     }),
@@ -36440,17 +36822,17 @@ var GroupTourFlyIn = function (_a) {
     setIsOpen = _a.setIsOpen;
   var dispatch = reactRedux.useDispatch();
   var context = React.useContext(SearchResultsConfigurationContext);
+  var language = (_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB';
+  var translations = getTranslations(language);
   if (isLoading) {
     return React__default['default'].createElement(
       React__default['default'].Fragment,
       null,
-      (_b = context === null || context === void 0 ? void 0 : context.customSpinner) !== null && _b !== void 0
-        ? _b
-        : React__default['default'].createElement(Spinner, null)
+      (_c = context === null || context === void 0 ? void 0 : context.customSpinner) !== null && _c !== void 0
+        ? _c
+        : React__default['default'].createElement(Spinner, { label: translations.SRP.LOADING_OPTIONS })
     );
   }
-  var language = (_c = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _c !== void 0 ? _c : 'en-GB';
-  var translations = getTranslations(language);
   var bookingPackageDetails = reactRedux.useSelector(function (state) {
     return state.searchResults;
   }).bookingPackageDetails;
@@ -41247,18 +41629,13 @@ var HotelAccommodationResults = function (_a) {
         React__default['default'].createElement(
           'div',
           { className: 'search__results__label__date' },
-          firstResultDay && firstResultMonth
-            ? React__default['default'].createElement(
-                React__default['default'].Fragment,
-                null,
-                React__default['default'].createElement('p', { className: 'search__results__label__date-date' }, firstResultDay),
-                React__default['default'].createElement('p', null, firstResultMonth)
-              )
-            : React__default['default'].createElement(Icon, { name: 'ui-bed', height: 16, fill: 'white' })
+          React__default['default'].createElement('p', { className: 'search__results__label__date-date' }, firstResultDay),
+          React__default['default'].createElement('p', null, firstResultMonth)
         ),
         React__default['default'].createElement(
           'div',
           { className: 'search__results__label__text' },
+          React__default['default'].createElement(Icon, { name: 'ui-bed', height: 16 }),
           React__default['default'].createElement(
             'h3',
             null,
@@ -41272,7 +41649,9 @@ var HotelAccommodationResults = function (_a) {
       ? React__default['default'].createElement(
           React__default['default'].Fragment,
           null,
-          (_c = context.customSpinner) !== null && _c !== void 0 ? _c : React__default['default'].createElement(Spinner, null)
+          (_c = context.customSpinner) !== null && _c !== void 0
+            ? _c
+            : React__default['default'].createElement(Spinner, { label: translations.SRP.LOADING_ACCOMMODATIONS })
         )
       : renderHotelResults(visibleResults, context, activeTab, translations, selectedPackagingAccoResult, isFlyIn),
     packagingAccoResults.length > 3 &&
@@ -41993,6 +42372,8 @@ var PackageingFlightsFlyIn = function (_a) {
   var _b;
   _a.isOpen;
   _a.setIsOpen;
+  var toggleFilters = _a.toggleFilters,
+    filtersOpen = _a.filtersOpen;
   var context = React.useContext(SearchResultsConfigurationContext);
   var language = (_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB';
   var translations = getTranslations(language);
@@ -42046,15 +42427,17 @@ var PackageingFlightsFlyIn = function (_a) {
       'div',
       { className: 'flyin__content flyin__content--columns' },
       flightsLoading
-        ? React__default['default'].createElement(Spinner, null)
+        ? React__default['default'].createElement(Spinner, { label: translations.SRP.LOADING_FLIGHTS })
         : React__default['default'].createElement(
             React__default['default'].Fragment,
             null,
             React__default['default'].createElement(Filters, {
               initialFilters: initialFlightFilters,
               filters: flightFilters,
-              isOpen: false,
-              handleSetIsOpen: function () {},
+              isOpen: filtersOpen,
+              handleSetIsOpen: function () {
+                return toggleFilters && toggleFilters();
+              },
               // handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
               isLoading: flightsLoading,
               setFilters: function (filters) {
@@ -42079,6 +42462,17 @@ var PackageingFlightsFlyIn = function (_a) {
                   '\u00A0',
                   translations.FLIGHTS_FORM.FLIGHTS_FOUND_3
                 ),
+                React__default['default'].createElement(
+                  'div',
+                  {
+                    className: 'cta cta--filter',
+                    onClick: function () {
+                      return toggleFilters && toggleFilters();
+                    }
+                  },
+                  React__default['default'].createElement(Icon, { name: 'ui-filter', className: 'mobile-filters-button__icon', height: 16 }),
+                  translations.SRP.FILTERS
+                ),
                 sortByTypes &&
                   sortByTypes.length > 0 &&
                   React__default['default'].createElement(
@@ -42286,7 +42680,7 @@ var ExcursionResults = function (_a) {
     dispatch(setSelectedExcursionSearchResult(excursion));
   };
   return isLoading
-    ? React__default['default'].createElement(Spinner, null)
+    ? React__default['default'].createElement(Spinner, { label: translations.SRP.LOADING_EXCURSIONS })
     : React__default['default'].createElement(
         'div',
         { className: 'flyin__content flyin__content--columns' },
@@ -42736,7 +43130,9 @@ var FlyIn = function (_a) {
     isPackageEditFlow = _a.isPackageEditFlow,
     handleConfirm = _a.handleConfirm,
     sortByTypes = _a.sortByTypes,
-    activeSearchSeed = _a.activeSearchSeed;
+    activeSearchSeed = _a.activeSearchSeed,
+    toggleFilters = _a.toggleFilters,
+    filtersOpen = _a.filtersOpen;
   var dispatch = reactRedux.useDispatch();
   var context = React.useContext(SearchResultsConfigurationContext);
   var language = (_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB';
@@ -42885,8 +43281,10 @@ var FlyIn = function (_a) {
           React__default['default'].createElement(Filters, {
             initialFilters: initialFilters,
             filters: filters,
-            isOpen: false,
-            handleSetIsOpen: function () {},
+            isOpen: filtersOpen,
+            handleSetIsOpen: function () {
+              return toggleFilters && toggleFilters();
+            },
             // handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
             isLoading: isLoading,
             setFilters: function (filters) {
@@ -42915,6 +43313,17 @@ var FlyIn = function (_a) {
                     translations.SRP.TOTAL_RESULTS_LABEL
                   )
               ),
+              React__default['default'].createElement(
+                'div',
+                {
+                  className: 'cta cta--filter',
+                  onClick: function () {
+                    return toggleFilters && toggleFilters();
+                  }
+                },
+                React__default['default'].createElement(Icon, { name: 'ui-filter', className: 'mobile-filters-button__icon', height: 16 }),
+                translations.SRP.FILTERS
+              ),
               sortByTypes &&
                 sortByTypes.length > 0 &&
                 React__default['default'].createElement(
@@ -42944,7 +43353,12 @@ var FlyIn = function (_a) {
         React__default['default'].createElement(AccommodationFlyIn, { isLoading: detailsLoading, handleConfirm: handleConfirm }),
       srpType === build.PortalQsmType.AccommodationAndFlight &&
         (flyInType === 'flight-outward-results' || flyInType === 'flight-return-results') &&
-        React__default['default'].createElement(PackageingFlightsFlyIn, { isOpen: isOpen, setIsOpen: setIsOpen }),
+        React__default['default'].createElement(PackageingFlightsFlyIn, {
+          isOpen: isOpen,
+          setIsOpen: setIsOpen,
+          toggleFilters: toggleFilters,
+          filtersOpen: filtersOpen
+        }),
       srpType === build.PortalQsmType.AccommodationAndFlight &&
         flyInType === 'excursion-results' &&
         React__default['default'].createElement(ExcursionResults, { isFlyIn: true, activeSearchSeed: activeSearchSeed }),
@@ -43814,6 +44228,9 @@ var IndependentFlightSelection = function (_a) {
     },
     [searchResults, selectedReturnKey]
   );
+  var firstResultDate = uniqueOutwardFlights.length > 0 ? uniqueOutwardFlights[0].outward.segments[0].departureDateTime : null;
+  var firstResultDay = firstResultDate ? dateFns.format(firstResultDate, 'd') : null;
+  var firstResultMonth = firstResultDate ? dateFns.format(firstResultDate, 'MMM') : null;
   return React__default['default'].createElement(
     React__default['default'].Fragment,
     null,
@@ -43823,11 +44240,13 @@ var IndependentFlightSelection = function (_a) {
       React__default['default'].createElement(
         'div',
         { className: 'search__results__label__date' },
-        React__default['default'].createElement(Icon, { name: 'ui-flight', height: 16, fill: 'white' })
+        React__default['default'].createElement('p', { className: 'search__results__label__date-date' }, firstResultDay),
+        React__default['default'].createElement('p', null, firstResultMonth)
       ),
       React__default['default'].createElement(
         'div',
         { className: 'search__results__label__text' },
+        React__default['default'].createElement(Icon, { name: 'ui-flight', height: 16, fill: 'white' }),
         React__default['default'].createElement(
           'h3',
           null,
@@ -43866,14 +44285,11 @@ var IndependentFlightSelection = function (_a) {
     React__default['default'].createElement(
       'div',
       { className: 'search__results__label search__results__label--secondary' },
-      React__default['default'].createElement(
-        'div',
-        { className: 'search__results__label__date' },
-        React__default['default'].createElement(Icon, { name: 'ui-flight', height: 16, fill: 'white' })
-      ),
+      React__default['default'].createElement('div', { className: 'search__results__label__date' }),
       React__default['default'].createElement(
         'div',
         { className: 'search__results__label__text' },
+        React__default['default'].createElement(Icon, { name: 'ui-flight', height: 16, fill: 'white' }),
         React__default['default'].createElement(
           'h3',
           null,
@@ -44993,7 +45409,7 @@ var FlightResultsContainer = function (_a) {
         React__default['default'].createElement(
           'div',
           { className: 'search__results__wrapper' },
-          flightsLoading && React__default['default'].createElement(Spinner, null),
+          flightsLoading && React__default['default'].createElement(Spinner, { label: translations.SRP.LOADING_FLIGHTS }),
           (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) == build.PortalQsmType.Flight &&
             (context === null || context === void 0 ? void 0 : context.showFlightAccommodationResults) &&
             results &&
@@ -46100,7 +46516,7 @@ var FullItinerary = function (_a) {
   return React__default['default'].createElement(
     React__default['default'].Fragment,
     null,
-    isLoading && React__default['default'].createElement(Spinner, null),
+    isLoading && React__default['default'].createElement(Spinner, { label: translations.SRP.LOADING_ITINERARY }),
     React__default['default'].createElement('div', { ref: hostRef, style: { display: isLoading ? 'none' : 'block' } })
   );
 };
@@ -46213,7 +46629,7 @@ var DayByDayExcursions = function () {
     React__default['default'].Fragment,
     null,
     stayDates.map(function (day) {
-      var _a, _b;
+      var _a, _b, _c;
       var dayKey = dateFns.format(day, 'yyyy-MM-dd');
       var confirmedExcursions = (_a = confirmedExcursionsByDay[dayKey]) !== null && _a !== void 0 ? _a : [];
       return React__default['default'].createElement(
@@ -46225,17 +46641,31 @@ var DayByDayExcursions = function () {
           React__default['default'].createElement(
             'div',
             { className: 'search__results__label__date' },
-            React__default['default'].createElement(Icon, { name: 'ui-excursion', height: 16, fill: 'white' })
+            React__default['default'].createElement(
+              'p',
+              { className: 'search__results__label__date-date' },
+              dateFns.format(day, 'd', {
+                locale: getLocale((_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB')
+              })
+            ),
+            React__default['default'].createElement(
+              'p',
+              null,
+              dateFns.format(day, 'MMM', {
+                locale: getLocale((_c = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _c !== void 0 ? _c : 'en-GB')
+              })
+            )
           ),
           React__default['default'].createElement(
             'div',
             { className: 'search__results__label__text' },
+            React__default['default'].createElement(Icon, { name: 'ui-excursion', height: 16 }),
             React__default['default'].createElement(
               'h3',
               null,
-              dateFns.format(day, 'EEEE d MMMM', {
-                locale: getLocale((_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB')
-              })
+              translations.SRP.SELECT,
+              ' ',
+              React__default['default'].createElement('strong', null, translations.SRP.EXCURSION)
             )
           )
         ),
@@ -46323,6 +46753,264 @@ var DayByDayExcursions = function () {
   );
 };
 
+var mapToSidebarFlightMetaData = function (entryLine) {
+  var _a, _b;
+  return {
+    flightLines:
+      (_a = entryLine.flightInformation) === null || _a === void 0
+        ? void 0
+        : _a.flightLines.map(function (f) {
+            return {
+              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:
+      (_b = entryLine.flightInformation) === null || _b === void 0
+        ? void 0
+        : _b.flightLines.reduce(function (s, _a) {
+            var durationInTicks = _a.durationInTicks;
+            return s + (durationInTicks !== null && durationInTicks !== void 0 ? durationInTicks : 0);
+          }, 0)
+  };
+};
+var selectSeparatePackagePriceDetails = function (priceDetails) {
+  var result = [];
+  var filteredPriceDetails = priceDetails.filter(function (priceDetail) {
+    return priceDetail.isSeparate;
+  });
+  filteredPriceDetails.forEach(function (priceDetail) {
+    var priceDetailToMerge = result.find(function (x) {
+      return 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;
+};
+var WLSidebar = function (_a) {
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+  var activeSearchSeed = _a.activeSearchSeed;
+  var context = React.useContext(SearchResultsConfigurationContext);
+  if (!context) {
+    return null;
+  }
+  var translations = getTranslations((_b = context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB');
+  var _u = reactRedux.useSelector(function (state) {
+      return state.searchResults;
+    }),
+    editablePackagingEntry = _u.editablePackagingEntry,
+    priceDetails = _u.priceDetails;
+  // 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);
+  var sortedLines = React.useMemo(
+    function () {
+      var _a;
+      return __spreadArray(
+        [],
+        (_a = editablePackagingEntry === null || editablePackagingEntry === void 0 ? void 0 : editablePackagingEntry.lines) !== null && _a !== void 0 ? _a : [],
+        true
+      ).sort(function (a, b) {
+        var _a, _b;
+        var dateA = getDateOnlyTime(a.from);
+        var dateB = getDateOnlyTime(b.from);
+        if (dateA !== dateB) {
+          return dateA - dateB;
+        }
+        return ((_a = a.order) !== null && _a !== void 0 ? _a : Infinity) - ((_b = b.order) !== null && _b !== void 0 ? _b : Infinity);
+      });
+    },
+    [editablePackagingEntry]
+  );
+  var firstEntryLine = lodash.first(sortedLines);
+  var accommodationLines = editablePackagingEntry.lines.filter(function (line) {
+    return line.serviceType === ACCOMMODATION_SERVICE_TYPE;
+  });
+  var accommodationLine = (_c = lodash.first(accommodationLines)) !== null && _c !== void 0 ? _c : firstEntryLine;
+  var location =
+    (_l =
+      (_j =
+        (_g =
+          (_e =
+            (_d = accommodationLine === null || accommodationLine === void 0 ? void 0 : accommodationLine.location) === null || _d === void 0
+              ? void 0
+              : _d.name) !== null && _e !== void 0
+            ? _e
+            : (_f = accommodationLine === null || accommodationLine === void 0 ? void 0 : accommodationLine.oord) === null || _f === void 0
+            ? void 0
+            : _f.name) !== null && _g !== void 0
+          ? _g
+          : (_h = accommodationLine === null || accommodationLine === void 0 ? void 0 : accommodationLine.region) === null || _h === void 0
+          ? void 0
+          : _h.name) !== null && _j !== void 0
+        ? _j
+        : (_k = accommodationLine === null || accommodationLine === void 0 ? void 0 : accommodationLine.country) === null || _k === void 0
+        ? void 0
+        : _k.name) !== null && _l !== void 0
+      ? _l
+      : (_m = firstEntryLine === null || firstEntryLine === void 0 ? void 0 : firstEntryLine.location) === null || _m === void 0
+      ? void 0
+      : _m.name;
+  var rooms =
+    (activeSearchSeed === null || activeSearchSeed === void 0
+      ? void 0
+      : activeSearchSeed.rooms.map(function (room) {
+          var adults = room.pax
+            .filter(function (p) {
+              return p.age && p.age >= 18;
+            })
+            .map(function (p) {
+              return { id: p.id, age: p.age };
+            });
+          var children = room.pax
+            .filter(function (p) {
+              return p.age && p.age < 18;
+            })
+            .map(function (p) {
+              return { id: p.id, age: p.age };
+            });
+          return { adults: adults, children: children };
+        })) || [];
+  var travelerRooms = getTravelersText(rooms, translations);
+  var flightSegments = sortedLines.filter(function (line) {
+    return line.serviceType === FLIGHT_SERVICE_TYPE && line.flightInformation && Array.isArray(line.flightInformation.flightLines);
+  });
+  var outboundFlight = lodash.first(flightSegments);
+  var returnFlight = flightSegments.length > 1 ? lodash.last(flightSegments) : undefined;
+  var outboundFlightMetaData = outboundFlight ? mapToSidebarFlightMetaData(outboundFlight) : undefined;
+  var returnFlightMetaData = returnFlight ? mapToSidebarFlightMetaData(returnFlight) : undefined;
+  var basePrice = lodash.sum(
+    (_o =
+      priceDetails === null || priceDetails === void 0
+        ? void 0
+        : priceDetails.details
+            .filter(function (pd) {
+              return pd.isInPackage;
+            })
+            .map(function (pd) {
+              return pd.price * pd.amount;
+            })) !== null && _o !== void 0
+      ? _o
+      : []
+  );
+  var separateExtraPriceDetails =
+    (_p =
+      priceDetails === null || priceDetails === void 0
+        ? void 0
+        : priceDetails.details.filter(function (pd) {
+            return !pd.isInPackage && pd.isSeparate;
+          })) !== null && _p !== void 0
+      ? _p
+      : [];
+  var totalPrice = lodash.sum(
+    __spreadArray(
+      [basePrice],
+      separateExtraPriceDetails.map(function (priceDetail) {
+        return priceDetail.price * priceDetail.amount;
+      }),
+      true
+    )
+  );
+  var includedCosts = selectSeparatePackagePriceDetails(
+    (_q =
+      priceDetails === null || priceDetails === void 0
+        ? void 0
+        : priceDetails.details.filter(function (pd) {
+            return pd.isInPackage;
+          })) !== null && _q !== void 0
+      ? _q
+      : []
+  );
+  return React__default['default'].createElement(SharedSidebar, {
+    productName: location !== null && location !== void 0 ? location : '',
+    thumbnailUrl: (_r = context.destinationImage) === null || _r === void 0 ? void 0 : _r.url,
+    translations: translations,
+    travelerRooms: travelerRooms,
+    startDateText: ((_s = lodash.first(sortedLines)) === null || _s === void 0 ? void 0 : _s.from) && formatDate(new Date(lodash.first(sortedLines).from)),
+    endDateText: ((_t = lodash.last(sortedLines)) === null || _t === void 0 ? void 0 : _t.to) && formatDate(new Date(lodash.last(sortedLines).to)),
+    isLoading: !editablePackagingEntry || !priceDetails,
+    loaderComponent: React__default['default'].createElement(Spinner, null),
+    departureFlightMetaData: outboundFlightMetaData,
+    returnFlightMetaData: returnFlightMetaData,
+    includedServiceTypes: editablePackagingEntry.lines.map(function (line) {
+      return line.serviceType;
+    }),
+    packagingAccommodations: accommodationLines,
+    basePrice: basePrice,
+    commission: priceDetails === null || priceDetails === void 0 ? void 0 : priceDetails.commission,
+    totalPrice: totalPrice,
+    includedCosts: includedCosts,
+    extraCosts: separateExtraPriceDetails,
+    deposit: priceDetails === null || priceDetails === void 0 ? void 0 : priceDetails.deposit,
+    isUnavailable: false,
+    agent: context.agentId
+  });
+};
+
+var BookPackagingEntry = function (_a) {
+  var _b;
+  var activeSearchSeed = _a.activeSearchSeed;
+  var context = React.useContext(SearchResultsConfigurationContext);
+  if (!context) {
+    return null;
+  }
+  var translations = getTranslations((_b = context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB');
+  var currentStep = reactRedux.useSelector(function (state) {
+    return state.searchResults;
+  }).currentStep;
+  reactRedux.useDispatch();
+  var stepLabels = [translations.STEPS.PERSONAL_DETAILS, translations.STEPS.SUMMARY, translations.STEPS.CONFIRMATION];
+  return React__default['default'].createElement(
+    'div',
+    { className: 'booking' },
+    React__default['default'].createElement(
+      'div',
+      { className: 'booking__content' },
+      React__default['default'].createElement(
+        BookingPanel,
+        {
+          currentStep: currentStep,
+          stepLabels: stepLabels,
+          StepIndicatorsComponent: StepIndicators$1,
+          renderTitle: function (step) {
+            return React__default['default'].createElement(React__default['default'].Fragment, null, step + 1, '.\u00A0', stepLabels[step]);
+          }
+        },
+        React__default['default'].createElement('div', null)
+      ),
+      React__default['default'].createElement('div', { className: 'backdrop', id: 'backdrop' }),
+      React__default['default'].createElement(WLSidebar, { activeSearchSeed: activeSearchSeed })
+    )
+  );
+};
+
 var SearchResultsContainer = function () {
   var _a, _b;
   var currentSearch = typeof window !== 'undefined' ? window.location.search : '';
@@ -46349,10 +47037,10 @@ var SearchResultsContainer = function () {
     packagingAccoSearchDetails = _c.packagingAccoSearchDetails,
     editablePackagingEntry = _c.editablePackagingEntry,
     transactionId = _c.transactionId,
-    flyInType = _c.flyInType;
-  _c.itinerary;
-  var packagingFlightResults = _c.packagingFlightResults,
-    confirmedExcursionsByDay = _c.confirmedExcursionsByDay;
+    flyInType = _c.flyInType,
+    packagingFlightResults = _c.packagingFlightResults,
+    confirmedExcursionsByDay = _c.confirmedExcursionsByDay,
+    bookPackagingEntry = _c.bookPackagingEntry;
   var isMobile = useMediaQuery('(max-width: 1200px)');
   var _d = React.useState(false),
     initialFiltersSet = _d[0],
@@ -47406,7 +48094,7 @@ var SearchResultsContainer = function () {
       };
       var fetchItinerary = function () {
         return __awaiter(void 0, void 0, void 0, function () {
-          var config, request, itinerary_1, err_8;
+          var config, request, itinerary, err_8;
           var _a, _b;
           return __generator(this, function (_c) {
             switch (_c.label) {
@@ -47429,8 +48117,8 @@ var SearchResultsContainer = function () {
                 };
                 return [4 /*yield*/, build.getItinerary(config, request)];
               case 2:
-                itinerary_1 = _c.sent();
-                dispatch(setItinerary(itinerary_1));
+                itinerary = _c.sent();
+                dispatch(setItinerary(itinerary));
                 setItineraryIsLoading(false);
                 return [3 /*break*/, 4];
               case 3:
@@ -47871,335 +48559,368 @@ var SearchResultsContainer = function () {
       React__default['default'].createElement(
         'div',
         { className: 'search' },
-        React__default['default'].createElement(
-          'div',
-          { className: 'search__container' },
-          context.searchConfiguration.qsmType === build.PortalQsmType.Flight &&
-            React__default['default'].createElement(
-              FlightSearchProvider,
-              { tideConnection: context.tideConnection },
-              React__default['default'].createElement(FlightResultsContainer, { isMobile: isMobile }),
-              React__default['default'].createElement(FlyIn, {
-                srpType: context.searchConfiguration.qsmType,
-                isOpen: flyInIsOpen,
-                setIsOpen: handleFlyInToggle,
-                onPanelRef: function (el) {
-                  return (panelRef.current = el);
-                },
-                detailsLoading: detailsIsLoading
-              })
-            ),
-          (context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight ||
-            context.searchConfiguration.qsmType === build.PortalQsmType.Accommodation ||
-            context.searchConfiguration.qsmType === build.PortalQsmType.GroupTour ||
-            context.searchConfiguration.qsmType === build.PortalQsmType.RoundTrip) &&
-            React__default['default'].createElement(
-              React__default['default'].Fragment,
-              null,
-              context.searchConfiguration.qsmType != build.PortalQsmType.AccommodationAndFlight &&
-                context.showFilters &&
-                React__default['default'].createElement(Filters, {
-                  initialFilters: initialFilters,
-                  filters: filters,
-                  isOpen: filtersOpen,
-                  handleSetIsOpen: function () {
-                    return setFiltersOpen(!filtersOpen);
-                  },
-                  // handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
-                  isLoading: isLoading,
-                  setFilters: function (filters) {
-                    return dispatch(setFilters(filters));
-                  },
-                  resetFilters: function (filters) {
-                    return dispatch(resetFilters(filters));
-                  }
-                }),
-              context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight &&
-                React__default['default'].createElement(Itinerary, {
-                  isOpen: itineraryOpen,
-                  handleSetIsOpen: function () {
-                    return setItineraryOpen(!itineraryOpen);
-                  },
-                  isLoading: pricesAreLoading,
-                  onEditAccommodation: handleEditAccommodation
-                }),
-              React__default['default'].createElement(
-                'div',
-                { className: 'search__results' },
-                isMobile &&
+        bookPackagingEntry
+          ? React__default['default'].createElement(BookPackagingEntry, { activeSearchSeed: activeSearchSeed })
+          : React__default['default'].createElement(
+              'div',
+              { className: 'search__container' },
+              context.searchConfiguration.qsmType === build.PortalQsmType.Flight &&
+                React__default['default'].createElement(
+                  FlightSearchProvider,
+                  { tideConnection: context.tideConnection },
+                  React__default['default'].createElement(FlightResultsContainer, { isMobile: isMobile }),
+                  React__default['default'].createElement(FlyIn, {
+                    srpType: context.searchConfiguration.qsmType,
+                    isOpen: flyInIsOpen,
+                    setIsOpen: handleFlyInToggle,
+                    onPanelRef: function (el) {
+                      return (panelRef.current = el);
+                    },
+                    detailsLoading: detailsIsLoading,
+                    filtersOpen: filtersOpen
+                  })
+                ),
+              (context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight ||
+                context.searchConfiguration.qsmType === build.PortalQsmType.Accommodation ||
+                context.searchConfiguration.qsmType === build.PortalQsmType.GroupTour ||
+                context.searchConfiguration.qsmType === build.PortalQsmType.RoundTrip) &&
+                React__default['default'].createElement(
+                  React__default['default'].Fragment,
+                  null,
+                  context.searchConfiguration.qsmType != build.PortalQsmType.AccommodationAndFlight &&
+                    context.showFilters &&
+                    React__default['default'].createElement(Filters, {
+                      initialFilters: initialFilters,
+                      filters: filters,
+                      isOpen: filtersOpen,
+                      handleSetIsOpen: function () {
+                        return setFiltersOpen(!filtersOpen);
+                      },
+                      // handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
+                      isLoading: isLoading,
+                      setFilters: function (filters) {
+                        return dispatch(setFilters(filters));
+                      },
+                      resetFilters: function (filters) {
+                        return dispatch(resetFilters(filters));
+                      }
+                    }),
+                  context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight &&
+                    React__default['default'].createElement(Itinerary, {
+                      isOpen: itineraryOpen,
+                      handleSetIsOpen: function () {
+                        return setItineraryOpen(!itineraryOpen);
+                      },
+                      isLoading: isLoading || pricesAreLoading || flightsLoading || itineraryIsLoading,
+                      onEditAccommodation: handleEditAccommodation
+                    }),
                   React__default['default'].createElement(
                     'div',
-                    { className: 'search__result-row' },
-                    React__default['default'].createElement(
-                      'div',
-                      { className: 'search__results__actions' },
-                      context.searchConfiguration.qsmType != build.PortalQsmType.AccommodationAndFlight &&
-                        context.showFilters &&
+                    { className: 'search__results' },
+                    isMobile &&
+                      React__default['default'].createElement(
+                        'div',
+                        { className: 'search__result-row' },
                         React__default['default'].createElement(
                           'div',
-                          {
-                            className: 'cta cta--filter',
-                            onClick: function () {
-                              return setFiltersOpen(true);
-                            }
-                          },
-                          React__default['default'].createElement(Icon, { name: 'ui-filter', className: 'mobile-filters-button__icon', height: 16 }),
-                          translations.SRP.FILTERS
+                          { className: 'search__results__actions' },
+                          context.searchConfiguration.qsmType != build.PortalQsmType.AccommodationAndFlight &&
+                            context.showFilters &&
+                            React__default['default'].createElement(
+                              'div',
+                              {
+                                className: 'cta cta--filter',
+                                onClick: function () {
+                                  return setFiltersOpen(true);
+                                }
+                              },
+                              React__default['default'].createElement(Icon, { name: 'ui-filter', className: 'mobile-filters-button__icon', height: 16 }),
+                              translations.SRP.FILTERS
+                            ),
+                          context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight &&
+                            React__default['default'].createElement(
+                              'div',
+                              {
+                                className: 'cta cta--filter',
+                                onClick: function () {
+                                  return setItineraryOpen(true);
+                                }
+                              },
+                              React__default['default'].createElement(Icon, { name: 'ui-shopping-cart', className: 'mobile-filters-button__icon', height: 16 }),
+                              translations.SRP.VIEW_BOOKING
+                            )
                         ),
-                      context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight &&
-                        React__default['default'].createElement(
-                          'div',
-                          {
-                            className: 'cta cta--filter',
-                            onClick: function () {
-                              return setItineraryOpen(true);
+                        sortByTypes &&
+                          sortByTypes.length > 0 &&
+                          React__default['default'].createElement(ItemPicker, {
+                            items: sortByTypes,
+                            selection: (selectedSortType === null || selectedSortType === void 0 ? void 0 : selectedSortType.label) || undefined,
+                            selectedSortByType: selectedSortType,
+                            label: translations.SRP.SORTBY,
+                            placeholder: translations.SRP.SORTBY,
+                            classModifier: 'travel-class-picker__items',
+                            valueFormatter: function (value, direction) {
+                              return getSortingName(
+                                translations,
+                                findSortByType(sortByTypes, value, direction !== null && direction !== void 0 ? direction : 'asc')
+                              );
+                            },
+                            onPick: function (newSortKey, direction) {
+                              return handleSortChange(newSortKey, direction);
                             }
-                          },
-                          React__default['default'].createElement(Icon, { name: 'ui-calendar', className: 'mobile-filters-button__icon', height: 16 }),
-                          translations.SRP.SHOW_ITINERARY
-                        )
-                    ),
-                    sortByTypes &&
-                      sortByTypes.length > 0 &&
-                      React__default['default'].createElement(ItemPicker, {
-                        items: sortByTypes,
-                        selection: (selectedSortType === null || selectedSortType === void 0 ? void 0 : selectedSortType.label) || undefined,
-                        selectedSortByType: selectedSortType,
-                        label: translations.SRP.SORTBY,
-                        placeholder: translations.SRP.SORTBY,
-                        classModifier: 'travel-class-picker__items',
-                        valueFormatter: function (value, direction) {
-                          return getSortingName(
-                            translations,
-                            findSortByType(sortByTypes, value, direction !== null && direction !== void 0 ? direction : 'asc')
-                          );
-                        },
-                        onPick: function (newSortKey, direction) {
-                          return handleSortChange(newSortKey, direction);
-                        }
-                      })
-                  ),
-                context.searchConfiguration.qsmType !== build.PortalQsmType.AccommodationAndFlight &&
-                  React__default['default'].createElement(
-                    'div',
-                    { className: 'search__result-row' },
-                    React__default['default'].createElement(
-                      'span',
-                      { className: 'search__result-row-text' },
-                      !isLoading &&
-                        React__default['default'].createElement(
-                          React__default['default'].Fragment,
-                          null,
-                          context.searchConfiguration.qsmType === build.PortalQsmType.Accommodation &&
-                            (filteredPackagingAccoResults === null || filteredPackagingAccoResults === void 0 ? void 0 : filteredPackagingAccoResults.length) &&
-                            (filteredPackagingAccoResults === null || filteredPackagingAccoResults === void 0 ? void 0 : filteredPackagingAccoResults.length),
-                          context.searchConfiguration.qsmType !== build.PortalQsmType.Accommodation &&
-                            (filteredResults === null || filteredResults === void 0 ? void 0 : filteredResults.length) &&
-                            filteredResults.length,
-                          '\u00A0',
-                          translations.SRP.TOTAL_RESULTS_LABEL
-                        )
-                    ),
-                    !context.packagingEntry &&
-                      !isMobile &&
-                      sortByTypes &&
-                      sortByTypes.length > 0 &&
-                      React__default['default'].createElement(
-                        'div',
-                        { className: 'search__result-row-filter' },
-                        React__default['default'].createElement(ItemPicker, {
-                          items: sortByTypes,
-                          selection: (selectedSortType === null || selectedSortType === void 0 ? void 0 : selectedSortType.label) || undefined,
-                          selectedSortByType: selectedSortType,
-                          label: translations.SRP.SORTBY,
-                          placeholder: translations.SRP.SORTBY,
-                          classModifier: 'travel-class-picker__items',
-                          valueFormatter: function (value, direction) {
-                            return getSortingName(
-                              translations,
-                              findSortByType(sortByTypes, value, direction !== null && direction !== void 0 ? direction : 'asc')
-                            );
-                          },
-                          onPick: function (newSortKey, direction) {
-                            return handleSortChange(newSortKey, direction);
-                          }
-                        })
-                      )
-                  ),
-                React__default['default'].createElement(
-                  'div',
-                  { className: 'search__results__wrapper' },
-                  context.showTabViews &&
-                    (context.searchConfiguration.qsmType === build.PortalQsmType.GroupTour ||
-                      context.searchConfiguration.qsmType === build.PortalQsmType.Accommodation) &&
-                    React__default['default'].createElement(TabViews, null),
-                  context.showRoundTripResults && context.showMockup && React__default['default'].createElement(RoundTripResults, null),
-                  context.searchConfiguration.qsmType === build.PortalQsmType.GroupTour &&
-                    React__default['default'].createElement(GroupTourResults, { isLoading: isLoading }),
-                  context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight &&
-                    !context.packagingEntry &&
-                    context.showFlightResults &&
-                    React__default['default'].createElement(
-                      React__default['default'].Fragment,
-                      null,
+                          })
+                      ),
+                    context.searchConfiguration.qsmType !== build.PortalQsmType.AccommodationAndFlight &&
                       React__default['default'].createElement(
                         'div',
-                        { className: 'search__results__label search__results__label--secondary' },
+                        { className: 'search__result-row' },
                         React__default['default'].createElement(
-                          'div',
-                          { className: 'search__results__label__date' },
-                          React__default['default'].createElement(Icon, { name: 'ui-flight', height: 16, fill: 'white' })
+                          'span',
+                          { className: 'search__result-row-text' },
+                          !isLoading &&
+                            React__default['default'].createElement(
+                              React__default['default'].Fragment,
+                              null,
+                              context.searchConfiguration.qsmType === build.PortalQsmType.Accommodation &&
+                                (filteredPackagingAccoResults === null || filteredPackagingAccoResults === void 0
+                                  ? void 0
+                                  : filteredPackagingAccoResults.length) &&
+                                (filteredPackagingAccoResults === null || filteredPackagingAccoResults === void 0
+                                  ? void 0
+                                  : filteredPackagingAccoResults.length),
+                              context.searchConfiguration.qsmType !== build.PortalQsmType.Accommodation &&
+                                (filteredResults === null || filteredResults === void 0 ? void 0 : filteredResults.length) &&
+                                filteredResults.length,
+                              '\u00A0',
+                              translations.SRP.TOTAL_RESULTS_LABEL
+                            )
                         ),
-                        React__default['default'].createElement(
-                          'div',
-                          { className: 'search__results__label__text' },
+                        !context.packagingEntry &&
+                          !isMobile &&
+                          sortByTypes &&
+                          sortByTypes.length > 0 &&
                           React__default['default'].createElement(
-                            'h3',
-                            null,
-                            translations.SRP.SELECT,
-                            ' ',
-                            React__default['default'].createElement('strong', null, ' ', translations.SRP.DEPARTURE)
+                            'div',
+                            { className: 'search__result-row-filter' },
+                            React__default['default'].createElement(ItemPicker, {
+                              items: sortByTypes,
+                              selection: (selectedSortType === null || selectedSortType === void 0 ? void 0 : selectedSortType.label) || undefined,
+                              selectedSortByType: selectedSortType,
+                              label: translations.SRP.SORTBY,
+                              placeholder: translations.SRP.SORTBY,
+                              classModifier: 'travel-class-picker__items',
+                              valueFormatter: function (value, direction) {
+                                return getSortingName(
+                                  translations,
+                                  findSortByType(sortByTypes, value, direction !== null && direction !== void 0 ? direction : 'asc')
+                                );
+                              },
+                              onPick: function (newSortKey, direction) {
+                                return handleSortChange(newSortKey, direction);
+                              }
+                            })
                           )
-                        )
                       ),
-                      flightsLoading
-                        ? React__default['default'].createElement(Spinner, null)
-                        : React__default['default'].createElement(
-                            React__default['default'].Fragment,
-                            null,
+                    React__default['default'].createElement(
+                      'div',
+                      { className: 'search__results__wrapper' },
+                      context.showTabViews &&
+                        (context.searchConfiguration.qsmType === build.PortalQsmType.GroupTour ||
+                          context.searchConfiguration.qsmType === build.PortalQsmType.Accommodation) &&
+                        React__default['default'].createElement(TabViews, null),
+                      context.showRoundTripResults && context.showMockup && React__default['default'].createElement(RoundTripResults, null),
+                      context.searchConfiguration.qsmType === build.PortalQsmType.GroupTour &&
+                        React__default['default'].createElement(GroupTourResults, { isLoading: isLoading }),
+                      context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight &&
+                        !context.packagingEntry &&
+                        context.showFlightResults &&
+                        React__default['default'].createElement(
+                          React__default['default'].Fragment,
+                          null,
+                          React__default['default'].createElement(
+                            'div',
+                            { className: 'search__results__label search__results__label--secondary' },
                             React__default['default'].createElement(
                               'div',
-                              { className: 'search__results__cards search__results__cards--extended' },
-                              selectedOutwardKey &&
-                                selectedOutward &&
-                                React__default['default'].createElement(IndependentFlightOption, {
-                                  key: 'flight-'.concat(selectedOutwardKey),
-                                  item: selectedOutward.outward,
-                                  guid: selectedOutward.outwardGuid,
-                                  onSelect: function () {
-                                    return dispatch(setSelectedOutwardKey(null));
-                                  },
-                                  selectedGuid: selectedOutward.outwardGuid,
-                                  isOutward: true,
-                                  showSelectedState: true,
-                                  price: selectedOutward.price
-                                }),
-                              visibleOutwardFlights.map(function (result) {
-                                return React__default['default'].createElement(IndependentFlightOption, {
-                                  key: 'flight-'.concat(result.outwardGuid),
-                                  item: result.outward,
-                                  onSelect: function () {
-                                    return dispatch(setSelectedOutwardKey(getFlightKey(result.outward.segments)));
-                                  },
-                                  guid: result.outwardGuid,
-                                  isOutward: true,
-                                  price: result.price,
-                                  currentSelectedPrice: selectedOutward === null || selectedOutward === void 0 ? void 0 : selectedOutward.price
-                                });
-                              })
+                              { className: 'search__results__label__date' },
+                              (function () {
+                                var firstResultDate = uniqueOutwardFlights.length > 0 ? uniqueOutwardFlights[0].outward.segments[0].departureDateTime : null;
+                                var firstResultDay = firstResultDate ? dateFns.format(firstResultDate, 'd') : null;
+                                var firstResultMonth = firstResultDate ? dateFns.format(firstResultDate, 'MMM') : null;
+                                return React__default['default'].createElement(
+                                  React__default['default'].Fragment,
+                                  null,
+                                  React__default['default'].createElement('p', { className: 'search__results__label__date-date' }, firstResultDay),
+                                  React__default['default'].createElement('p', null, firstResultMonth)
+                                );
+                              })()
                             ),
-                            uniqueOutwardFlights &&
-                              uniqueOutwardFlights.length > 3 &&
+                            React__default['default'].createElement(
+                              'div',
+                              { className: 'search__results__label__text' },
+                              React__default['default'].createElement(Icon, { name: 'ui-flight', height: 16 }),
                               React__default['default'].createElement(
-                                'div',
-                                { className: 'search__results__cards__actions' },
+                                'h3',
+                                null,
+                                translations.SRP.SELECT,
+                                ' ',
+                                React__default['default'].createElement('strong', null, ' ', translations.SRP.DEPARTURE)
+                              )
+                            )
+                          ),
+                          flightsLoading
+                            ? React__default['default'].createElement(Spinner, { label: translations.SRP.LOADING_FLIGHTS })
+                            : React__default['default'].createElement(
+                                React__default['default'].Fragment,
+                                null,
                                 React__default['default'].createElement(
-                                  'button',
-                                  {
-                                    className: 'cta cta--secondary',
-                                    onClick: function () {
-                                      return handleShowMoreFlights('flight-outward-results');
-                                    }
-                                  },
-                                  translations.SRP.SHOW_MORE
-                                )
+                                  'div',
+                                  { className: 'search__results__cards search__results__cards--extended' },
+                                  selectedOutwardKey &&
+                                    selectedOutward &&
+                                    React__default['default'].createElement(IndependentFlightOption, {
+                                      key: 'flight-'.concat(selectedOutwardKey),
+                                      item: selectedOutward.outward,
+                                      guid: selectedOutward.outwardGuid,
+                                      onSelect: function () {
+                                        return dispatch(setSelectedOutwardKey(null));
+                                      },
+                                      selectedGuid: selectedOutward.outwardGuid,
+                                      isOutward: true,
+                                      showSelectedState: true,
+                                      price: selectedOutward.price
+                                    }),
+                                  visibleOutwardFlights.map(function (result) {
+                                    return React__default['default'].createElement(IndependentFlightOption, {
+                                      key: 'flight-'.concat(result.outwardGuid),
+                                      item: result.outward,
+                                      onSelect: function () {
+                                        return dispatch(setSelectedOutwardKey(getFlightKey(result.outward.segments)));
+                                      },
+                                      guid: result.outwardGuid,
+                                      isOutward: true,
+                                      price: result.price,
+                                      currentSelectedPrice: selectedOutward === null || selectedOutward === void 0 ? void 0 : selectedOutward.price
+                                    });
+                                  })
+                                ),
+                                uniqueOutwardFlights &&
+                                  uniqueOutwardFlights.length > 3 &&
+                                  React__default['default'].createElement(
+                                    'div',
+                                    { className: 'search__results__cards__actions' },
+                                    React__default['default'].createElement(
+                                      'button',
+                                      {
+                                        className: 'cta cta--secondary',
+                                        onClick: function () {
+                                          return handleShowMoreFlights('flight-outward-results');
+                                        }
+                                      },
+                                      translations.SRP.SHOW_MORE
+                                    )
+                                  )
                               )
-                          )
-                    ),
-                  context.showHotelAccommodationResults &&
-                    !context.packagingEntry &&
-                    React__default['default'].createElement(HotelAccommodationResults, { isLoading: isLoading }),
-                  context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight &&
-                    !context.packagingEntry &&
-                    React__default['default'].createElement(DayByDayExcursions, null),
-                  context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight &&
-                    !context.packagingEntry &&
-                    context.showFlightResults &&
-                    React__default['default'].createElement(
-                      React__default['default'].Fragment,
-                      null,
-                      React__default['default'].createElement(
-                        'div',
-                        { className: 'search__results__label search__results__label--secondary' },
-                        React__default['default'].createElement(
-                          'div',
-                          { className: 'search__results__label__date' },
-                          React__default['default'].createElement(Icon, { name: 'ui-flight', height: 16, fill: 'white' })
                         ),
+                      context.showHotelAccommodationResults &&
+                        !context.packagingEntry &&
+                        React__default['default'].createElement(HotelAccommodationResults, { isLoading: isLoading }),
+                      context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight &&
+                        !context.packagingEntry &&
+                        React__default['default'].createElement(DayByDayExcursions, null),
+                      context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight &&
+                        !context.packagingEntry &&
+                        context.showFlightResults &&
                         React__default['default'].createElement(
-                          'div',
-                          { className: 'search__results__label__text' },
+                          React__default['default'].Fragment,
+                          null,
                           React__default['default'].createElement(
-                            'h3',
-                            null,
-                            translations.SRP.SELECT,
-                            ' ',
-                            React__default['default'].createElement('strong', null, ' ', translations.SRP.RETURN)
+                            'div',
+                            { className: 'search__results__label search__results__label--secondary' },
+                            React__default['default'].createElement(
+                              'div',
+                              { className: 'search__results__label__date' },
+                              (function () {
+                                var firstResultDate = uniqueReturnFlights.length > 0 ? uniqueReturnFlights[0].return.segments[0].departureDateTime : null;
+                                var firstResultDay = firstResultDate ? dateFns.format(firstResultDate, 'd') : null;
+                                var firstResultMonth = firstResultDate ? dateFns.format(firstResultDate, 'MMM') : null;
+                                return React__default['default'].createElement(
+                                  React__default['default'].Fragment,
+                                  null,
+                                  React__default['default'].createElement('p', { className: 'search__results__label__date-date' }, firstResultDay),
+                                  React__default['default'].createElement('p', null, firstResultMonth)
+                                );
+                              })()
+                            ),
+                            React__default['default'].createElement(
+                              'div',
+                              { className: 'search__results__label__text' },
+                              React__default['default'].createElement(Icon, { name: 'ui-flight', height: 16 }),
+                              React__default['default'].createElement(
+                                'h3',
+                                null,
+                                translations.SRP.SELECT,
+                                ' ',
+                                React__default['default'].createElement('strong', null, ' ', translations.SRP.RETURN)
+                              )
+                            )
+                          ),
+                          React__default['default'].createElement(
+                            'div',
+                            { className: 'search__results__cards search__results__cards--extended' },
+                            selectedReturnKey &&
+                              selectedReturn &&
+                              React__default['default'].createElement(IndependentFlightOption, {
+                                key: 'flight-'.concat(selectedReturnKey),
+                                item: selectedReturn.return,
+                                guid: selectedReturn.outwardGuid,
+                                selectedGuid: selectedReturn.outwardGuid,
+                                isOutward: false,
+                                showSelectedState: true,
+                                price: selectedReturn.price
+                              }),
+                            uniqueReturnFlights.map(function (result) {
+                              return React__default['default'].createElement(IndependentFlightOption, {
+                                key: 'flight-'.concat(result.outwardGuid),
+                                item: result.return,
+                                onSelect: function () {
+                                  return dispatch(setSelectedReturnKey(getFlightKey(result.return.segments)));
+                                },
+                                guid: result.outwardGuid,
+                                isOutward: false,
+                                currentSelectedPrice: selectedReturn === null || selectedReturn === void 0 ? void 0 : selectedReturn.price,
+                                price: result.price
+                              });
+                            })
                           )
-                        )
-                      ),
-                      React__default['default'].createElement(
-                        'div',
-                        { className: 'search__results__cards search__results__cards--extended' },
-                        selectedReturnKey &&
-                          selectedReturn &&
-                          React__default['default'].createElement(IndependentFlightOption, {
-                            key: 'flight-'.concat(selectedReturnKey),
-                            item: selectedReturn.return,
-                            guid: selectedReturn.outwardGuid,
-                            selectedGuid: selectedReturn.outwardGuid,
-                            isOutward: false,
-                            showSelectedState: true,
-                            price: selectedReturn.price
-                          }),
-                        uniqueReturnFlights.map(function (result) {
-                          return React__default['default'].createElement(IndependentFlightOption, {
-                            key: 'flight-'.concat(result.outwardGuid),
-                            item: result.return,
-                            onSelect: function () {
-                              return dispatch(setSelectedReturnKey(getFlightKey(result.return.segments)));
-                            },
-                            guid: result.outwardGuid,
-                            isOutward: false,
-                            currentSelectedPrice: selectedReturn === null || selectedReturn === void 0 ? void 0 : selectedReturn.price,
-                            price: result.price
-                          });
-                        })
-                      )
-                    ),
-                  context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight &&
-                    context.packagingEntry &&
-                    React__default['default'].createElement(FullItinerary, { isLoading: itineraryIsLoading })
+                        ),
+                      context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight &&
+                        context.packagingEntry &&
+                        React__default['default'].createElement(FullItinerary, { isLoading: itineraryIsLoading })
+                    )
+                  ),
+                  React__default['default'].createElement(FlyIn, {
+                    srpType: context.searchConfiguration.qsmType,
+                    isOpen: flyInIsOpen,
+                    setIsOpen: handleFlyInToggle,
+                    handleConfirm: function () {
+                      return handleConfirmHotelSwap();
+                    },
+                    onPanelRef: function (el) {
+                      return (panelRef.current = el);
+                    },
+                    detailsLoading: detailsIsLoading,
+                    flyInType: flyInType,
+                    isPackageEditFlow: !!context.packagingEntry,
+                    sortByTypes: sortByTypes,
+                    activeSearchSeed: activeSearchSeed,
+                    toggleFilters: function () {
+                      return setFiltersOpen(!filtersOpen);
+                    },
+                    filtersOpen: filtersOpen
+                  })
                 )
-              ),
-              React__default['default'].createElement(FlyIn, {
-                srpType: context.searchConfiguration.qsmType,
-                isOpen: flyInIsOpen,
-                setIsOpen: handleFlyInToggle,
-                handleConfirm: function () {
-                  return handleConfirmHotelSwap();
-                },
-                onPanelRef: function (el) {
-                  return (panelRef.current = el);
-                },
-                detailsLoading: detailsIsLoading,
-                flyInType: flyInType,
-                isPackageEditFlow: !!context.packagingEntry,
-                sortByTypes: sortByTypes,
-                activeSearchSeed: activeSearchSeed
-              })
             )
-        )
       )
   );
 };