@qite/tide-booking-component 1.4.105 → 1.4.106

package/build/build-cjs/index.js

@@ -631,6 +631,10 @@ var SRP$f = {
   TRAVEL_GROUP: 'مجموعة المسافرين',
   EXCURSION: 'رحلة'
 };
+var ITINERARY$f = {
+  DAY: 'اليوم',
+  NO_ITEMS: 'لا توجد عناصر لهذا اليوم.'
+};
 var arJson = {
   STEPS: STEPS$f,
   INPUT: INPUT$f,
@@ -649,7 +653,8 @@ var arJson = {
   NAVBAR: NAVBAR$f,
   LOGIN: LOGIN$f,
   QSM: QSM$g,
-  SRP: SRP$f
+  SRP: SRP$f,
+  ITINERARY: ITINERARY$f
 };
 
 var STEPS$e = {
@@ -1039,6 +1044,10 @@ var SRP$e = {
   TRAVEL_GROUP: 'Rejseselskab',
   EXCURSION: 'Udflugt'
 };
+var ITINERARY$e = {
+  DAY: 'Dag',
+  NO_ITEMS: 'Ingen elementer for denne dag.'
+};
 var daJson = {
   STEPS: STEPS$e,
   INPUT: INPUT$e,
@@ -1057,7 +1066,8 @@ var daJson = {
   NAVBAR: NAVBAR$e,
   LOGIN: LOGIN$e,
   QSM: QSM$f,
-  SRP: SRP$e
+  SRP: SRP$e,
+  ITINERARY: ITINERARY$e
 };
 
 var STEPS$d = {
@@ -1448,6 +1458,10 @@ var SRP$d = {
   TRAVEL_GROUP: 'Reisegruppe',
   EXCURSION: 'Ausflug'
 };
+var ITINERARY$d = {
+  DAY: 'Tag',
+  NO_ITEMS: 'Keine Elemente für diesen Tag.'
+};
 var deJson = {
   STEPS: STEPS$d,
   INPUT: INPUT$d,
@@ -1466,7 +1480,8 @@ var deJson = {
   NAVBAR: NAVBAR$d,
   LOGIN: LOGIN$d,
   QSM: QSM$e,
-  SRP: SRP$d
+  SRP: SRP$d,
+  ITINERARY: ITINERARY$d
 };
 
 var STEPS$c = {
@@ -1860,6 +1875,10 @@ var SRP$c = {
   TRAVEL_GROUP: 'Travel group',
   EXCURSION: 'Excursion'
 };
+var ITINERARY$c = {
+  DAY: 'Day',
+  NO_ITEMS: 'No items for this day.'
+};
 var enJson = {
   STEPS: STEPS$c,
   INPUT: INPUT$c,
@@ -1878,7 +1897,8 @@ var enJson = {
   NAVBAR: NAVBAR$c,
   LOGIN: LOGIN$c,
   QSM: QSM$d,
-  SRP: SRP$c
+  SRP: SRP$c,
+  ITINERARY: ITINERARY$c
 };
 
 var STEPS$b = {
@@ -2269,6 +2289,10 @@ var SRP$b = {
   TRAVEL_GROUP: 'Grupo de viaje',
   EXCURSION: 'Excursión'
 };
+var ITINERARY$b = {
+  DAY: 'Día',
+  NO_ITEMS: 'No hay elementos para este día.'
+};
 var esJson = {
   STEPS: STEPS$b,
   INPUT: INPUT$b,
@@ -2287,7 +2311,8 @@ var esJson = {
   NAVBAR: NAVBAR$b,
   LOGIN: LOGIN$b,
   QSM: QSM$c,
-  SRP: SRP$b
+  SRP: SRP$b,
+  ITINERARY: ITINERARY$b
 };
 
 var STEPS$a = {
@@ -2682,6 +2707,10 @@ var SRP$a = {
   TRAVEL_GROUP: 'Groupe de voyageurs',
   EXCURSION: 'Excursion'
 };
+var ITINERARY$a = {
+  DAY: 'Jour',
+  NO_ITEMS: 'Aucun élément pour ce jour.'
+};
 var frBeJson = {
   STEPS: STEPS$a,
   INPUT: INPUT$a,
@@ -2700,7 +2729,8 @@ var frBeJson = {
   NAVBAR: NAVBAR$a,
   LOGIN: LOGIN$a,
   QSM: QSM$b,
-  SRP: SRP$a
+  SRP: SRP$a,
+  ITINERARY: ITINERARY$a
 };
 
 var STEPS$9 = {
@@ -3090,6 +3120,10 @@ var SRP$9 = {
   TRAVEL_GROUP: 'Groupe de voyageurs',
   EXCURSION: 'Excursion'
 };
+var ITINERARY$9 = {
+  DAY: 'Jour',
+  NO_ITEMS: 'Aucun élément pour ce jour.'
+};
 var frFrJson = {
   STEPS: STEPS$9,
   INPUT: INPUT$9,
@@ -3108,7 +3142,8 @@ var frFrJson = {
   NAVBAR: NAVBAR$9,
   LOGIN: LOGIN$9,
   QSM: QSM$a,
-  SRP: SRP$9
+  SRP: SRP$9,
+  ITINERARY: ITINERARY$9
 };
 
 var STEPS$8 = {
@@ -3498,6 +3533,10 @@ var SRP$8 = {
   TRAVEL_GROUP: 'Ferðahópur',
   EXCURSION: 'Útflutningur'
 };
+var ITINERARY$8 = {
+  DAY: 'Dagur',
+  NO_ITEMS: 'Engar upplýsingar fyrir þennan dag.'
+};
 var isJson = {
   STEPS: STEPS$8,
   INPUT: INPUT$8,
@@ -3516,7 +3555,8 @@ var isJson = {
   NAVBAR: NAVBAR$8,
   LOGIN: LOGIN$8,
   QSM: QSM$9,
-  SRP: SRP$8
+  SRP: SRP$8,
+  ITINERARY: ITINERARY$8
 };
 
 var STEPS$7 = {
@@ -3907,6 +3947,10 @@ var SRP$7 = {
   TRAVEL_GROUP: 'Gruppo di viaggio',
   EXCURSION: 'Escursione'
 };
+var ITINERARY$7 = {
+  DAY: 'Giorno',
+  NO_ITEMS: 'Nessun elemento per questo giorno.'
+};
 var itJson = {
   STEPS: STEPS$7,
   INPUT: INPUT$7,
@@ -3925,7 +3969,8 @@ var itJson = {
   NAVBAR: NAVBAR$7,
   LOGIN: LOGIN$7,
   QSM: QSM$8,
-  SRP: SRP$7
+  SRP: SRP$7,
+  ITINERARY: ITINERARY$7
 };
 
 var STEPS$6 = {
@@ -4320,6 +4365,10 @@ var SRP$6 = {
   TRAVEL_GROUP: 'Reisgezelschap',
   EXCURSION: 'Excursie'
 };
+var ITINERARY$6 = {
+  DAY: 'Dag',
+  NO_ITEMS: 'Geen elementen voor deze dag.'
+};
 var nlBeJson = {
   STEPS: STEPS$6,
   INPUT: INPUT$6,
@@ -4338,7 +4387,8 @@ var nlBeJson = {
   NAVBAR: NAVBAR$6,
   LOGIN: LOGIN$6,
   QSM: QSM$7,
-  SRP: SRP$6
+  SRP: SRP$6,
+  ITINERARY: ITINERARY$6
 };
 
 var STEPS$5 = {
@@ -4729,6 +4779,10 @@ var SRP$5 = {
   TRAVEL_GROUP: 'Reisgezelschap',
   EXCURSION: 'Excursie'
 };
+var ITINERARY$5 = {
+  DAY: 'Dag',
+  NO_ITEMS: 'Geen elementen voor deze dag.'
+};
 var nlNlJson = {
   STEPS: STEPS$5,
   INPUT: INPUT$5,
@@ -4747,7 +4801,8 @@ var nlNlJson = {
   NAVBAR: NAVBAR$5,
   LOGIN: LOGIN$5,
   QSM: QSM$6,
-  SRP: SRP$5
+  SRP: SRP$5,
+  ITINERARY: ITINERARY$5
 };
 
 var STEPS$4 = {
@@ -5138,6 +5193,10 @@ var SRP$4 = {
   TRAVEL_GROUP: 'Reisefølge',
   EXCURSION: 'Utflukt'
 };
+var ITINERARY$4 = {
+  DAY: 'Dag',
+  NO_ITEMS: 'Ingen elementer for denne dagen.'
+};
 var noJson = {
   STEPS: STEPS$4,
   INPUT: INPUT$4,
@@ -5156,7 +5215,8 @@ var noJson = {
   NAVBAR: NAVBAR$4,
   LOGIN: LOGIN$4,
   QSM: QSM$5,
-  SRP: SRP$4
+  SRP: SRP$4,
+  ITINERARY: ITINERARY$4
 };
 
 var STEPS$3 = {
@@ -5547,6 +5607,10 @@ var SRP$3 = {
   TRAVEL_GROUP: 'Grupa podróżnych',
   EXCURSION: 'Wycieczka'
 };
+var ITINERARY$3 = {
+  DAY: 'Dzień',
+  NO_ITEMS: 'Brak elementów dla tego dnia.'
+};
 var plJson = {
   STEPS: STEPS$3,
   INPUT: INPUT$3,
@@ -5565,7 +5629,8 @@ var plJson = {
   NAVBAR: NAVBAR$3,
   LOGIN: LOGIN$3,
   QSM: QSM$4,
-  SRP: SRP$3
+  SRP: SRP$3,
+  ITINERARY: ITINERARY$3
 };
 
 var STEPS$2 = {
@@ -5956,6 +6021,10 @@ var SRP$2 = {
   TRAVEL_GROUP: 'Grupo de viajantes',
   EXCURSION: 'Excursão'
 };
+var ITINERARY$2 = {
+  DAY: 'Dia',
+  NO_ITEMS: 'Nenhum item para este dia.'
+};
 var ptJson = {
   STEPS: STEPS$2,
   INPUT: INPUT$2,
@@ -5974,7 +6043,8 @@ var ptJson = {
   NAVBAR: NAVBAR$2,
   LOGIN: LOGIN$2,
   QSM: QSM$3,
-  SRP: SRP$2
+  SRP: SRP$2,
+  ITINERARY: ITINERARY$2
 };
 
 var STEPS$1 = {
@@ -6365,6 +6435,10 @@ var SRP$1 = {
   TRAVEL_GROUP: 'Resesällskap',
   EXCURSION: 'Utflykt'
 };
+var ITINERARY$1 = {
+  DAY: 'Dag',
+  NO_ITEMS: 'Inga element för denna dag.'
+};
 var svJson = {
   STEPS: STEPS$1,
   INPUT: INPUT$1,
@@ -6383,7 +6457,8 @@ var svJson = {
   NAVBAR: NAVBAR$1,
   LOGIN: LOGIN$1,
   QSM: QSM$2,
-  SRP: SRP$1
+  SRP: SRP$1,
+  ITINERARY: ITINERARY$1
 };
 
 var STEPS = {
@@ -6772,6 +6847,10 @@ var SRP = {
   TRAVEL_GROUP: '旅行グループ',
   EXCURSION: 'エクスカーション'
 };
+var ITINERARY = {
+  DAY: '日',
+  NO_ITEMS: 'この日のアイテムはありません。'
+};
 var jaJson = {
   STEPS: STEPS,
   INPUT: INPUT,
@@ -6790,7 +6869,8 @@ var jaJson = {
   NAVBAR: NAVBAR,
   LOGIN: LOGIN,
   QSM: QSM$1,
-  SRP: SRP
+  SRP: SRP,
+  ITINERARY: ITINERARY
 };
 
 exports.DepartureRange = void 0;
@@ -35423,6 +35503,21 @@ var getSegmentTitle = function (segment) {
   var _a;
   return (_a = segment.productName) !== null && _a !== void 0 ? _a : segment.accommodationName;
 };
+var SERVICE_TYPE_PRIORITY = {
+  7: 0, // Flight
+  13: 1, // Transfer
+  3: 2, // Hotel
+  4: 3 // Excursion
+};
+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,
@@ -35451,14 +35546,17 @@ var Itinerary = function (_a) {
         true
       ).sort(function (a, b) {
         var _a, _b;
-        var orderA = (_a = a.order) !== null && _a !== void 0 ? _a : Infinity;
-        var orderB = (_b = b.order) !== null && _b !== void 0 ? _b : Infinity;
-        // First sort by order
-        if (orderA !== orderB) {
-          return orderA - orderB;
-        }
-        // Fallback to date
-        return new Date(a.from).getTime() - new Date(b.from).getTime();
+        var dateA = getDateOnlyTime(a.from);
+        var dateB = getDateOnlyTime(b.from);
+        if (dateA !== dateB) {
+          return dateA - dateB;
+        }
+        var priorityA = getServiceTypePriority(a.serviceType);
+        var priorityB = getServiceTypePriority(b.serviceType);
+        if (priorityA !== priorityB) {
+          return priorityA - priorityB;
+        }
+        return ((_a = a.order) !== null && _a !== void 0 ? _a : Infinity) - ((_b = b.order) !== null && _b !== void 0 ? _b : Infinity);
       });
     },
     [packagingEntry]
@@ -48617,33 +48715,98 @@ var getRequestRoomsFromPackagingSegments = function (entry, segments) {
   });
 };
 
-var formatNodeDate = function (date) {
-  if (!date) return '';
-  try {
-    return new Intl.DateTimeFormat('nl-BE', {
-      weekday: 'long',
-      day: '2-digit',
-      month: '2-digit',
-      year: 'numeric'
-    }).format(date);
-  } catch (_a) {
-    return '';
-  }
-};
 var escapeHtml = function (value) {
   if (!value) return '';
   return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
 };
-var buildItineraryHtml = function (itinerary) {
+var getNodeDayRange = function (node) {
+  var _a, _b;
+  var startDay = Number((_a = node.startDay) !== null && _a !== void 0 ? _a : 0);
+  var endDay = Number((_b = node.endDay) !== null && _b !== void 0 ? _b : startDay);
+  return { startDay: startDay, endDay: endDay };
+};
+var getItemDuration = function (item) {
+  var _a;
+  var duration = Number((_a = item.productDuration) !== null && _a !== void 0 ? _a : 0);
+  return Number.isFinite(duration) && duration > 0 ? duration : 0;
+};
+var isAccommodationItem = function (item) {
+  var _a;
+  return getItemDuration(item) > 1 && ((_a = item.templateName) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes('hotel'));
+};
+var getAccommodationName = function (item) {
+  return item.title || 'Onbekende accommodatie';
+};
+var getItemDeduplicationKey = function (item) {
+  var _a;
+  (_a = item.templateName) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+  // if (templateName === 'hotel') {
+  //   return [item.templateName, item.productCode, item.accommodationCode, item.regimeCode].filter(Boolean).join('|');
+  // }
+  // if (templateName === 'excursion') {
+  //   return [item.templateName, item.productCode].filter(Boolean).join('|');
+  // }
+  return [item.templateName, item.productCode, item.title].filter(Boolean).join('|');
+};
+var getUniqueItems = function (items) {
+  if (items === void 0) {
+    items = [];
+  }
+  var seen = new Set();
+  return items.filter(function (item) {
+    var key = getItemDeduplicationKey(item) || item.itemGuid;
+    if (seen.has(key)) {
+      return false;
+    }
+    seen.add(key);
+    return true;
+  });
+};
+var findAccommodationForDay = function (nodes, currentDay) {
+  var _a;
+  for (var _i = 0, _b = nodes !== null && nodes !== void 0 ? nodes : []; _i < _b.length; _i++) {
+    var node = _b[_i];
+    var startDay = getNodeDayRange(node).startDay;
+    var uniqueItems = getUniqueItems((_a = node.items) !== null && _a !== void 0 ? _a : []);
+    for (var _c = 0, uniqueItems_1 = uniqueItems; _c < uniqueItems_1.length; _c++) {
+      var item = uniqueItems_1[_c];
+      if (!isAccommodationItem(item)) {
+        continue;
+      }
+      var duration = getItemDuration(item);
+      var accommodationEndDay = startDay + duration - 1;
+      if (currentDay >= startDay && currentDay <= accommodationEndDay) {
+        return item;
+      }
+    }
+  }
+  return null;
+};
+var buildItineraryHtml = function (itinerary, translations) {
   var _a;
   if (!itinerary) {
     return '\n      <div class="itinerary-shell">\n        <div class="itinerary-empty">Geen reisroute beschikbaar.</div>\n      </div>\n    ';
   }
-  var nodesHtml = ((_a = itinerary.nodes) !== null && _a !== void 0 ? _a : [])
+  var allNodes = (_a = itinerary.nodes) !== null && _a !== void 0 ? _a : [];
+  var nodesHtml = allNodes
     .map(function (node) {
-      var hasItems = Array.isArray(node.items) && node.items.length > 0;
+      var _a;
+      var startDay = getNodeDayRange(node).startDay;
+      var day = node.startDate ? dateFns.format(node.startDate, 'd') : null;
+      var month = node.startDate ? dateFns.format(node.startDate, 'MMM') : null;
+      var uniqueItems = getUniqueItems((_a = node.items) !== null && _a !== void 0 ? _a : []);
+      var hasItems = uniqueItems.length > 0;
+      var hasAccommodationInCurrentNode = uniqueItems.some(isAccommodationItem);
+      var activeAccommodation = findAccommodationForDay(allNodes, startDay);
+      var accommodationBanner =
+        !hasAccommodationInCurrentNode && activeAccommodation
+          ? '\n            <div class="itinerary-node__accommodation-banner">\n              Accommodatie voor deze dag: <strong>'.concat(
+              escapeHtml(getAccommodationName(activeAccommodation)),
+              '</strong>\n            </div>\n          '
+            )
+          : '';
       var itemsHtml = hasItems
-        ? node.items
+        ? uniqueItems
             .map(function (item) {
               var _a;
               return '\n                <article class="itinerary-item" data-template="'
@@ -48651,25 +48814,19 @@ var buildItineraryHtml = function (itinerary) {
                 .concat((_a = item.contents) !== null && _a !== void 0 ? _a : '', '\n                </article>\n              ');
             })
             .join('')
-        : '<div class="itinerary-node__empty">Geen items voor deze dag.</div>';
-      return '\n        <section class="itinerary-node">\n          <header class="itinerary-node__header">\n            <div class="itinerary-node__day">Dag '
-        .concat(node.startDay)
-        .concat(
-          node.endDay > node.startDay ? ' - '.concat(node.endDay) : '',
-          '</div>\n            <div class="itinerary-node__meta">\n              <h2 class="itinerary-node__title">'
-        )
-        .concat(escapeHtml(node.title), '</h2>\n              <div class="itinerary-node__date">')
-        .concat(
-          escapeHtml(formatNodeDate(node.startDate)),
-          '</div>\n            </div>\n          </header>\n\n          <div class="itinerary-node__content">\n            '
-        )
+        : '<div class="itinerary-node__empty">'.concat(translations.ITINERARY.NO_ITEMS, '</div>');
+      return '\n        <section class="itinerary-node">\n          <header class="itinerary-node__header">\n            \n          <div class="itinerary-node__day">\n            <p class="itinerary-node__day-day">'
+        .concat(day, '</p>\n            <p class="itinerary-node__day-month">')
+        .concat(month, '</p>\n          </div>\n\n            <div>\n              <h2 class="itinerary-node__title">')
+        .concat(escapeHtml(node.title), '</h2>\n            </div>\n          </header>\n\n          <div class="itinerary-node__content">\n            ')
+        .concat(accommodationBanner, '\n            ')
         .concat(itemsHtml, '\n          </div>\n        </section>\n      ');
     })
     .join('');
   var defaultItemsHtml =
     itinerary.defaultItems && itinerary.defaultItems.length > 0
       ? '\n        <section class="itinerary-default-items">\n          <h2 class="itinerary-default-items__title">Algemene info</h2>\n          '.concat(
-          itinerary.defaultItems
+          getUniqueItems(itinerary.defaultItems)
             .map(function (item) {
               var _a;
               return '\n                <article class="itinerary-item" data-template="'
@@ -48691,42 +48848,49 @@ var buildItineraryHtml = function (itinerary) {
     .concat(defaultItemsHtml, '\n      </div>\n    </div>\n  ');
 };
 var FullItinerary = function (_a) {
+  var _b;
   var isLoading = _a.isLoading;
-  if (isLoading) {
-    return React__default['default'].createElement(Spinner, null);
-  }
   var itinerary = reactRedux.useSelector(function (state) {
     return state.searchResults;
   }).itinerary;
+  var context = React.useContext(SearchResultsConfigurationContext);
+  var translations = getTranslations((_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB');
   var hostRef = React.useRef(null);
   var shadowRootRef = React.useRef(null);
   var html = React.useMemo(
     function () {
-      return buildItineraryHtml(itinerary);
+      return buildItineraryHtml(itinerary, translations);
     },
-    [itinerary]
+    [itinerary, translations]
   );
   React.useEffect(
     function () {
-      var _a;
-      if (!hostRef.current) {
+      var _a, _b;
+      if (isLoading) {
         return;
       }
-      if (!shadowRootRef.current) {
-        shadowRootRef.current = hostRef.current.attachShadow({ mode: 'open' });
+      var host = hostRef.current;
+      if (!host) {
+        return;
       }
-      var shadowRoot = shadowRootRef.current;
+      var shadowRoot = (_a = host.shadowRoot) !== null && _a !== void 0 ? _a : host.attachShadow({ mode: 'open' });
+      shadowRootRef.current = shadowRoot;
       shadowRoot.innerHTML =
-        "\n      <style>\n        :host {\n          all: initial;\n        }\n\n        *,\n        *::before,\n        *::after {\n          box-sizing: border-box;\n        }\n\n        .itinerary-shell {\n          width: 100%;\n          margin: 0 auto;\n          font-family: 'Outfit', sans-serif;\n          color: #222;\n        }\n\n        .itinerary-shell__header {\n          margin-bottom: 24px;\n        }\n\n        .itinerary-shell__title {\n          margin: 0;\n          font-size: 32px;\n          line-height: 1.2;\n        }\n\n        .itinerary-shell__content {\n          display: grid;\n          gap: 24px;\n        }\n\n        .itinerary-node {\n          border: 1px solid #e5e7eb;\n          border-radius: 16px;\n          overflow: hidden;\n          background: #fff;\n          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);\n        }\n\n        .itinerary-node__header {\n          display: flex;\n          gap: 16px;\n          align-items: flex-start;\n          padding: 20px 20px 16px;\n          border-bottom: 1px solid #eef0f2;\n          background: #fafafa;\n        }\n\n        .itinerary-node__day {\n          flex: 0 0 auto;\n          min-width: 72px;\n          padding: 8px 12px;\n          border-radius: 999px;\n          font-size: 14px;\n          font-weight: 700;\n          line-height: 1;\n          background: #111827;\n          color: #fff;\n          text-align: center;\n        }\n\n        .itinerary-node__meta {\n          min-width: 0;\n        }\n\n        .itinerary-node__title {\n          margin: 0;\n          font-size: 22px;\n          line-height: 1.25;\n        }\n\n        .itinerary-node__date {\n          margin-top: 6px;\n          font-size: 14px;\n          color: #6b7280;\n        }\n\n        .itinerary-node__content {\n          display: grid;\n          gap: 20px;\n          padding: 20px;\n        }\n\n        .itinerary-item {\n          display: block;\n          border-radius: 12px;\n          overflow: hidden;\n          background: #fff;\n        }\n\n        .itinerary-node__empty,\n        .itinerary-empty {\n          padding: 20px;\n          border: 1px dashed #d1d5db;\n          border-radius: 12px;\n          color: #6b7280;\n          background: #fafafa;\n        }\n\n        .itinerary-default-items {\n          border: 1px solid #e5e7eb;\n          border-radius: 16px;\n          padding: 20px;\n          background: #fff;\n          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);\n        }\n\n        .itinerary-default-items__title {\n          margin: 0 0 16px;\n          font-size: 22px;\n        }\n\n        @media (max-width: 768px) {\n          .itinerary-shell {\n            padding: 16px;\n          }\n\n          .itinerary-node__header {\n            flex-direction: column;\n          }\n\n          .itinerary-node__day {\n            min-width: auto;\n          }\n        }\n\n        "
+        "\n      <style>\n        :host {\n          all: initial;\n          display: block;\n          width: 100%;\n        }\n\n        *,\n        *::before,\n        *::after {\n          box-sizing: border-box;\n        }\n\n        .itinerary-shell {\n          width: 100%;\n          margin: 0 auto;\n          font-family: 'Outfit', sans-serif;\n          color: #222;\n        }\n\n        .itinerary-shell__header {\n          margin-bottom: 24px;\n        }\n\n        .itinerary-shell__title {\n          margin: 0;\n          font-size: 32px;\n          line-height: 1.2;\n        }\n\n        .itinerary-shell__content {\n          display: grid;\n          gap: 24px;\n        }\n\n        .itinerary-node {\n          border: 1px solid #e5e7eb;\n          border-radius: 16px;\n          overflow: hidden;\n          background: #fff;\n          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);\n        }\n\n        .itinerary-node__header {\n          display: flex;\n          gap: 16px;\n          align-items: center;\n          border-bottom: 1px solid #eef0f2;\n          background: #fafafa;\n        }\n\n        .itinerary-node__day {\n          flex: 50px 0 0;\n          display: flex;\n          flex-flow: column;\n          align-items: center;\n          justify-content: center;\n          background: #1f9470;\n          color: white;\n          border: 1.5px solid var(--tide-booking-color-secondary);\n        }\n\n        .itinerary-node__day-month {\n          margin: 0px;\n        }\n\n        .itinerary-node__day-day {\n          margin: 0px;\n          font-weight: var(--tide-booking-search-results-label-date-month-font-weight);\n          color: var(--tide-booking-search-results-label-date-month-color);\n          font-size: 24px;\n        }\n\n        .itinerary-node__title {\n          margin: 0;\n          font-size: 22px;\n          line-height: 1.25;\n        }\n\n        .itinerary-node__content {\n          display: grid;\n          gap: 20px;\n          padding: 20px;\n        }\n\n        .itinerary-node__accommodation-banner {\n          padding: 12px 16px;\n          border: 1px solid #dbeafe;\n          border-radius: 12px;\n          background: #eff6ff;\n          color: #1e3a8a;\n          font-size: 14px;\n          line-height: 1.4;\n        }\n\n        .itinerary-item {\n          display: block;\n          border-radius: 12px;\n          overflow: hidden;\n          background: #fff;\n        }\n\n        .itinerary-node__empty,\n        .itinerary-empty {\n          padding: 20px;\n          border: 1px dashed #d1d5db;\n          border-radius: 12px;\n          color: #6b7280;\n          background: #fafafa;\n        }\n\n        .itinerary-default-items {\n          border: 1px solid #e5e7eb;\n          border-radius: 16px;\n          padding: 20px;\n          background: #fff;\n          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);\n        }\n\n        .itinerary-default-items__title {\n          margin: 0 0 16px;\n          font-size: 22px;\n        }\n\n        @media (max-width: 768px) {\n          .itinerary-shell {\n            padding: 16px;\n          }\n        }\n\n        "
           .concat(
-            (_a = itinerary === null || itinerary === void 0 ? void 0 : itinerary.styleSheetBody) !== null && _a !== void 0 ? _a : '',
+            (_b = itinerary === null || itinerary === void 0 ? void 0 : itinerary.styleSheetBody) !== null && _b !== void 0 ? _b : '',
             '\n      </style>\n\n      '
           )
           .concat(html, '\n    ');
     },
-    [html, itinerary === null || itinerary === void 0 ? void 0 : itinerary.styleSheetBody]
+    [html, itinerary === null || itinerary === void 0 ? void 0 : itinerary.styleSheetBody, isLoading]
+  );
+  return React__default['default'].createElement(
+    React__default['default'].Fragment,
+    null,
+    isLoading && React__default['default'].createElement(Spinner, null),
+    React__default['default'].createElement('div', { ref: hostRef, style: { display: isLoading ? 'none' : 'block' } })
   );
-  return React__default['default'].createElement('div', { ref: hostRef });
 };
 
 var getExcursionContentWithUpdatedPrice = function (contents, totalPrice, currencyCode) {
@@ -48976,9 +49140,9 @@ var SearchResultsContainer = function () {
     packagingAccoSearchDetails = _c.packagingAccoSearchDetails,
     editablePackagingEntry = _c.editablePackagingEntry,
     transactionId = _c.transactionId,
-    flyInType = _c.flyInType,
-    itinerary = _c.itinerary,
-    packagingFlightResults = _c.packagingFlightResults,
+    flyInType = _c.flyInType;
+  _c.itinerary;
+  var packagingFlightResults = _c.packagingFlightResults,
     confirmedExcursionsByDay = _c.confirmedExcursionsByDay;
   var isMobile = useMediaQuery('(max-width: 1200px)');
   var _d = React.useState(false),
@@ -50161,7 +50325,6 @@ var SearchResultsContainer = function () {
             : '',
         language: (_d = context.languageCode) !== null && _d !== void 0 ? _d : 'en-GB'
       });
-      console.log('Built nextEntry', nextEntry);
       if (!nextEntry) return;
       dispatch(setEditablePackagingEntry(nextEntry));
       if (selectedCombinationFlight) {
@@ -50807,7 +50970,6 @@ var SearchResultsContainer = function () {
                     ),
                   context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight &&
                     context.packagingEntry &&
-                    itinerary &&
                     React__default['default'].createElement(FullItinerary, { isLoading: itineraryIsLoading })
                 )
               ),