@qite/tide-booking-component 1.4.99 → 1.4.101

package/build/build-cjs/index.js

@@ -12791,7 +12791,7 @@ PERFORMANCE OF THIS SOFTWARE.
     return ENDPOINT$8 + '/details/' + transactionId + '/alternate-flights';
   };
   var ENDPOINT_BOOKABLE_DATES = ENDPOINT$8 + '/bookable-dates';
-  var ENDPOINT_PRICE_DETAILS = ENDPOINT$8 + '/price-details';
+  var ENDPOINT_PRICE_DETAILS$1 = ENDPOINT$8 + '/price-details';
   var ENDPOINT_BOOK = ENDPOINT$8 + '/book';
   var ENDPOINT_UPDATE = ENDPOINT$8 + '/update';
   var ENDPOINT_AGENTS = ENDPOINT$8 + '/agents';
@@ -12891,7 +12891,7 @@ PERFORMANCE OF THIS SOFTWARE.
     return post(url, apiKey, body, config.token, signal, true);
   };
   var priceDetails = function (config, request, signal, languageCode) {
-    var url = '' + config.host + ENDPOINT_PRICE_DETAILS;
+    var url = '' + config.host + ENDPOINT_PRICE_DETAILS$1;
     var apiKey = config.apiKey;
     var body = JSON.stringify(request);
     return post(url, apiKey, body, config.token, signal, true, languageCode);
@@ -13417,10 +13417,11 @@ PERFORMANCE OF THIS SOFTWARE.
   var ENDPOINT = '/api/web/packaging';
   var ENDPOINT_START_TRANSACTION = ENDPOINT + '/start';
   var ENDPOINT_ACCOMMODATIONS = ENDPOINT + '/accommodations';
+  var ENDPOINT_PRICE_DETAILS = ENDPOINT + '/price-details';
+  var ENDPOINT_ITINERARY = ENDPOINT + '/itinerary';
   var ENDPOINT_ENTRY = function (magicLinkCode) {
     return ENDPOINT + '/entry/' + magicLinkCode;
   };
-  // MANUAL PACKAGING SEARCH
   var startTransaction = function (config, signal) {
     var apiKey = config.apiKey;
     var url = '' + config.host + ENDPOINT_START_TRANSACTION;
@@ -13437,6 +13438,18 @@ PERFORMANCE OF THIS SOFTWARE.
     var url = '' + config.host + ENDPOINT_ENTRY(magicLinkCode);
     return get(url, apiKey, config.token, signal, true);
   };
+  var getPriceDetails = function (config, request, signal) {
+    var url = '' + config.host + ENDPOINT_PRICE_DETAILS;
+    var apiKey = config.apiKey;
+    var body = JSON.stringify(request);
+    return post(url, apiKey, body, config.token, signal, true);
+  };
+  var getItinerary = function (config, request, signal) {
+    var url = '' + config.host + ENDPOINT_ITINERARY;
+    var apiKey = config.apiKey;
+    var body = JSON.stringify(request);
+    return post(url, apiKey, body, config.token, signal, true);
+  };
 
   exports.AllotmentType = AllotmentType;
   exports.ContactForm = ContactForm;
@@ -13489,9 +13502,11 @@ PERFORMANCE OF THIS SOFTWARE.
   exports.getEntryStatus = getEntryStatus;
   exports.getEntryTotals = getEntryTotals;
   exports.getInvoiceList = getInvoiceList;
+  exports.getItinerary = getItinerary;
   exports.getLocations = getLocations;
   exports.getMolliePayment = getMolliePayment;
   exports.getPortal = getPortal;
+  exports.getPriceDetails = getPriceDetails;
   exports.getPrintActions = getPrintActions;
   exports.getStyleSheet = getStyleSheet;
   exports.getTranslationDictionary = getTranslationDictionary;
@@ -33812,7 +33827,9 @@ var initialState$1 = {
   flyInIsOpen: false,
   editablePackagingEntry: null,
   transactionId: null,
-  accommodationFlyInStep: 'details'
+  accommodationFlyInStep: 'details',
+  priceDetails: null,
+  itinerary: null
 };
 var searchResultsSlice = toolkit.createSlice({
   name: 'searchResults',
@@ -33905,6 +33922,12 @@ var searchResultsSlice = toolkit.createSlice({
     },
     setAccommodationFlyInStep: function (state, action) {
       state.accommodationFlyInStep = action.payload;
+    },
+    setPriceDetails: function (state, action) {
+      state.priceDetails = action.payload;
+    },
+    setItinerary: function (state, action) {
+      state.itinerary = action.payload;
     }
   }
 });
@@ -33929,7 +33952,9 @@ _a.resetSearchState;
 var setFlyInIsOpen = _a.setFlyInIsOpen,
   setEditablePackagingEntry = _a.setEditablePackagingEntry,
   setTransactionId = _a.setTransactionId,
-  setAccommodationFlyInStep = _a.setAccommodationFlyInStep;
+  setAccommodationFlyInStep = _a.setAccommodationFlyInStep,
+  setPriceDetails = _a.setPriceDetails,
+  setItinerary = _a.setItinerary;
 var searchResultsReducer = searchResultsSlice.reducer;
 
 var ItemPicker = function (_a) {
@@ -35195,14 +35220,16 @@ var getSegmentTitle = function (segment) {
 var Itinerary = function (_a) {
   var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
   var isOpen = _a.isOpen,
-    handleSetIsOpen = _a.handleSetIsOpen;
-  _a.isLoading;
-  var onEditAccommodation = _a.onEditAccommodation;
+    handleSetIsOpen = _a.handleSetIsOpen,
+    isLoading = _a.isLoading,
+    onEditAccommodation = _a.onEditAccommodation;
   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 editablePackagingEntry = reactRedux.useSelector(function (state) {
-    return state.searchResults;
-  }).editablePackagingEntry;
+  var _q = reactRedux.useSelector(function (state) {
+      return state.searchResults;
+    }),
+    editablePackagingEntry = _q.editablePackagingEntry,
+    priceDetails = _q.priceDetails;
   var packagingEntry =
     editablePackagingEntry !== null && editablePackagingEntry !== void 0
       ? editablePackagingEntry
@@ -35290,7 +35317,7 @@ var Itinerary = function (_a) {
   console.log('otherSegments', otherSegments);
   console.log('groupedOtherSegments', groupedOtherSegments);
   var numberOfPax = ((_p = packagingEntry.pax) === null || _p === void 0 ? void 0 : _p.length) || 1;
-  var totalPrice = packagingEntry.price || 0;
+  var totalPrice = (priceDetails === null || priceDetails === void 0 ? void 0 : priceDetails.total) || packagingEntry.price || 0;
   var pricePerPerson = totalPrice / numberOfPax;
   return React__default['default'].createElement(
     'div',
@@ -35346,18 +35373,24 @@ var Itinerary = function (_a) {
         React__default['default'].createElement(
           'div',
           { className: 'search__filter__prices' },
-          React__default['default'].createElement(
-            'div',
-            { className: 'search__filter__prices__wrapper' },
-            React__default['default'].createElement('h3', { className: 'search__filter__prices--amount' }, formatPrice$2(pricePerPerson, 'EUR')),
-            React__default['default'].createElement('p', null, translations.SRP.PACKAGE_PRICE_PER_PERSON),
-            React__default['default'].createElement(
-              'p',
-              null,
-              React__default['default'].createElement('strong', null, '(', formatPrice$2(totalPrice, 'EUR'), ' ', translations.SRP.TOTAL, ')')
-            )
-          ),
-          React__default['default'].createElement('button', { className: 'cta' }, translations.QSM.CONFIRM)
+          isLoading
+            ? React__default['default'].createElement(Spinner, null)
+            : React__default['default'].createElement(
+                React__default['default'].Fragment,
+                null,
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'search__filter__prices__wrapper' },
+                  React__default['default'].createElement('h3', { className: 'search__filter__prices--amount' }, formatPrice$2(pricePerPerson, 'EUR')),
+                  React__default['default'].createElement('p', null, translations.SRP.PACKAGE_PRICE_PER_PERSON),
+                  React__default['default'].createElement(
+                    'p',
+                    null,
+                    React__default['default'].createElement('strong', null, '(', formatPrice$2(totalPrice, 'EUR'), ' ', translations.SRP.TOTAL, ')')
+                  )
+                ),
+                React__default['default'].createElement('button', { className: 'cta' }, translations.QSM.CONFIRM)
+              )
         ),
         React__default['default'].createElement(
           'div',
@@ -47236,14 +47269,6 @@ var getSelectedOptionsPerRoom = function (details) {
     };
   });
 };
-var getRoomIndexFromLine = function (line) {
-  var _a, _b;
-  if (!((_a = line.pax) === null || _a === void 0 ? void 0 : _a.length)) return 0;
-  var firstPax = __spreadArray([], line.pax, true).sort(function (a, b) {
-    return a.order - b.order;
-  })[0];
-  return (_b = firstPax === null || firstPax === void 0 ? void 0 : firstPax.room) !== null && _b !== void 0 ? _b : 0;
-};
 var getRequestRoomsFromPackagingSegments = function (entry, segments) {
   var _a;
   var accommodationLines = __spreadArray([], segments !== null && segments !== void 0 ? segments : [], true)
@@ -47309,6 +47334,118 @@ 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 _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 : [])
+    .map(function (node) {
+      var hasItems = Array.isArray(node.items) && node.items.length > 0;
+      var itemsHtml = hasItems
+        ? node.items
+            .map(function (item) {
+              var _a;
+              return '\n                <article class="itinerary-item" data-template="'
+                .concat(escapeHtml(item.templateName), '">\n                  ')
+                .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            '
+        )
+        .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
+            .map(function (item) {
+              var _a;
+              return '\n                <article class="itinerary-item" data-template="'
+                .concat(escapeHtml(item.templateName), '">\n                  ')
+                .concat((_a = item.contents) !== null && _a !== void 0 ? _a : '', '\n                </article>\n              ');
+            })
+            .join(''),
+          '\n        </section>\n      '
+        )
+      : '';
+  return '\n    <div class="itinerary-shell">\n      '
+    .concat(
+      itinerary.title
+        ? '<header class="itinerary-shell__header"><h1 class="itinerary-shell__title">'.concat(escapeHtml(itinerary.title), '</h1></header>')
+        : '',
+      '\n\n      <div class="itinerary-shell__content">\n        '
+    )
+    .concat(nodesHtml, '\n        ')
+    .concat(defaultItemsHtml, '\n      </div>\n    </div>\n  ');
+};
+var FullItinerary = function (_a) {
+  var isLoading = _a.isLoading;
+  if (isLoading) {
+    return React__default['default'].createElement(Spinner, null);
+  }
+  var itinerary = reactRedux.useSelector(function (state) {
+    return state.searchResults;
+  }).itinerary;
+  var hostRef = React.useRef(null);
+  var shadowRootRef = React.useRef(null);
+  var html = React.useMemo(
+    function () {
+      return buildItineraryHtml(itinerary);
+    },
+    [itinerary]
+  );
+  React.useEffect(
+    function () {
+      var _a;
+      if (!hostRef.current) {
+        return;
+      }
+      if (!shadowRootRef.current) {
+        shadowRootRef.current = hostRef.current.attachShadow({ mode: 'open' });
+      }
+      var shadowRoot = shadowRootRef.current;
+      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        "
+          .concat(
+            (_a = itinerary === null || itinerary === void 0 ? void 0 : itinerary.styleSheetBody) !== null && _a !== void 0 ? _a : '',
+            '\n      </style>\n\n      '
+          )
+          .concat(html, '\n    ');
+    },
+    [html, itinerary === null || itinerary === void 0 ? void 0 : itinerary.styleSheetBody]
+  );
+  return React__default['default'].createElement('div', { ref: hostRef });
+};
+
 var SearchResultsContainer = function () {
   var _a, _b;
   var currentSearch = typeof window !== 'undefined' ? window.location.search : '';
@@ -47332,7 +47469,8 @@ var SearchResultsContainer = function () {
     packagingAccoSearchDetails = _c.packagingAccoSearchDetails,
     editablePackagingEntry = _c.editablePackagingEntry,
     transactionId = _c.transactionId,
-    accommodationFlyInStep = _c.accommodationFlyInStep;
+    accommodationFlyInStep = _c.accommodationFlyInStep,
+    itinerary = _c.itinerary;
   var isMobile = useMediaQuery('(max-width: 1200px)');
   var _d = React.useState(false),
     initialFiltersSet = _d[0],
@@ -47347,11 +47485,17 @@ var SearchResultsContainer = function () {
     detailsIsLoading = _g[0],
     setDetailsIsLoading = _g[1];
   var _h = React.useState(false),
-    itineraryOpen = _h[0],
-    setItineraryOpen = _h[1];
-  var _j = React.useState(null),
-    selectedAccommodationSeed = _j[0],
-    setSelectedAccommodationSeed = _j[1];
+    pricesAreLoading = _h[0],
+    setPricesAreLoading = _h[1];
+  var _j = React.useState(false),
+    itineraryIsLoading = _j[0],
+    setItineraryIsLoading = _j[1];
+  var _k = React.useState(false),
+    itineraryOpen = _k[0],
+    setItineraryOpen = _k[1];
+  var _l = React.useState(null),
+    selectedAccommodationSeed = _l[0],
+    setSelectedAccommodationSeed = _l[1];
   var panelRef = React.useRef(null);
   var sortByTypes = [
     { direction: 'asc', label: 'default' },
@@ -47553,7 +47697,6 @@ var SearchResultsContainer = function () {
   };
   var handleConfirmHotelSwap = function () {
     var updatedEntry = swapHotelInPackagingEntry();
-    console.log('Updated entry after hotel swap', updatedEntry);
     if (!updatedEntry) return;
     dispatch(setEditablePackagingEntry(updatedEntry));
     handleFlyInToggle(false);
@@ -47570,18 +47713,17 @@ var SearchResultsContainer = function () {
     var selectedOptionsPerRoom = getSelectedOptionsPerRoom(details);
     if (!selectedOptionsPerRoom.length) return null;
     var selectedHotel = details[0];
+    var roomIndex = 0;
     var updatedLines = sourceEntry.lines.map(function (line) {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
       if (line.serviceType !== ACCOMMODATION_SERVICE_TYPE) {
         return line;
       }
-      // TODO: fix roomIndex
-      var roomIndex = getRoomIndexFromLine(line);
-      console.log('Processing line', line, 'with room index', roomIndex);
       var selectedRoom = selectedOptionsPerRoom.find(function (x) {
         return x.roomIndex === roomIndex;
       });
       var selectedOption = selectedRoom === null || selectedRoom === void 0 ? void 0 : selectedRoom.option;
+      roomIndex++;
       if (!selectedOption) {
         return line;
       }
@@ -47675,7 +47817,6 @@ var SearchResultsContainer = function () {
             return [4 /*yield*/, build.search(config, searchRequest)];
           case 1:
             packageSearchResults = _b.sent();
-            console.log('Search results', packageSearchResults);
             enrichedFilters = enrichFiltersWithResults(packageSearchResults, context.filters, (_a = context.tags) !== null && _a !== void 0 ? _a : []);
             if (!initialFiltersSet) {
               dispatch(resetFilters(enrichedFilters));
@@ -47749,7 +47890,6 @@ var SearchResultsContainer = function () {
             searchRequest = buildPackagingAccommodationRequestFromSeed(seed, currentTransactionId);
             searchRequest.portalId = context.portalId;
             searchRequest.agentId = context.agentId;
-            console.log('Packaging accommodation search request', searchRequest);
             return [4 /*yield*/, build.searchPackagingAccommodations(config, searchRequest)];
           case 1:
             packageAccoSearchResults = _b.sent();
@@ -47790,7 +47930,6 @@ var SearchResultsContainer = function () {
             currentTransactionId =
               ((_a = context === null || context === void 0 ? void 0 : context.packagingEntry) === null || _a === void 0 ? void 0 : _a.transactionId) ||
               transactionId;
-            console.log('Current transaction ID', currentTransactionId);
             if (!!currentTransactionId) return [3 /*break*/, 2];
             dispatch(setIsLoading(true));
             return [4 /*yield*/, runStartTransaction()];
@@ -48036,7 +48175,6 @@ var SearchResultsContainer = function () {
                 return [4 /*yield*/, build.searchPackagingAccommodations(config, detailSearchRequest)];
               case 2:
                 packageAccoSearchDetails = _f.sent();
-                console.log('Packaging Acco Search details', packageAccoSearchDetails);
                 dispatch(setPackagingAccoSearchDetails(packageAccoSearchDetails));
                 setDetailsIsLoading(false);
                 return [3 /*break*/, 4];
@@ -48131,6 +48269,79 @@ var SearchResultsContainer = function () {
       rooms: getRequestRoomsFromPackagingSegments(entry, sortedSegments)
     };
   };
+  React.useEffect(
+    function () {
+      var fetchPriceDetails = function () {
+        return __awaiter(void 0, void 0, void 0, function () {
+          var config, priceDetails, err_6;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                if (!context || !editablePackagingEntry) return [2 /*return*/];
+                setPricesAreLoading(true);
+                _a.label = 1;
+              case 1:
+                _a.trys.push([1, 3, , 4]);
+                config = {
+                  host: context.tideConnection.host,
+                  apiKey: context.tideConnection.apiKey
+                };
+                return [4 /*yield*/, build.getPriceDetails(config, editablePackagingEntry)];
+              case 2:
+                priceDetails = _a.sent();
+                dispatch(setPriceDetails(priceDetails));
+                setPricesAreLoading(false);
+                return [3 /*break*/, 4];
+              case 3:
+                err_6 = _a.sent();
+                console.error('Error fetching price details', err_6);
+                setPricesAreLoading(false);
+                return [3 /*break*/, 4];
+              case 4:
+                return [2 /*return*/];
+            }
+          });
+        });
+      };
+      var fetchItinerary = function () {
+        return __awaiter(void 0, void 0, void 0, function () {
+          var config, itinerary_1, err_7;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                console.log('Fetching itinerary for entry', editablePackagingEntry);
+                if (!context || !editablePackagingEntry) return [2 /*return*/];
+                setItineraryIsLoading(true);
+                _a.label = 1;
+              case 1:
+                _a.trys.push([1, 3, , 4]);
+                config = {
+                  host: context.tideConnection.host,
+                  apiKey: context.tideConnection.apiKey
+                };
+                return [4 /*yield*/, build.getItinerary(config, editablePackagingEntry)];
+              case 2:
+                itinerary_1 = _a.sent();
+                console.log('Fetched itinerary', itinerary_1);
+                dispatch(setItinerary(itinerary_1));
+                setItineraryIsLoading(false);
+                return [3 /*break*/, 4];
+              case 3:
+                err_7 = _a.sent();
+                console.error('Error fetching itinerary', err_7);
+                setItineraryIsLoading(false);
+                return [3 /*break*/, 4];
+              case 4:
+                return [2 /*return*/];
+            }
+          });
+        });
+      };
+      fetchPriceDetails();
+      fetchItinerary();
+    },
+    [editablePackagingEntry]
+  );
   return React__default['default'].createElement(
     'div',
     { id: 'tide-booking', className: 'search__bg' },
@@ -48182,7 +48393,7 @@ var SearchResultsContainer = function () {
                   handleSetIsOpen: function () {
                     return setItineraryOpen(!itineraryOpen);
                   },
-                  isLoading: isLoading,
+                  isLoading: pricesAreLoading,
                   onEditAccommodation: handleEditAccommodation
                 }),
               React__default['default'].createElement(
@@ -48321,7 +48532,8 @@ var SearchResultsContainer = function () {
                     }),
                   context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight &&
                     context.packagingEntry &&
-                    React__default['default'].createElement('span', null, 'TODO: Show Full Itinerary here')
+                    itinerary &&
+                    React__default['default'].createElement(FullItinerary, { isLoading: itineraryIsLoading })
                 )
               ),
               React__default['default'].createElement(FlyIn, {

package/build/build-cjs/src/search-results/components/itinerary/full-itinerary.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface FullItineraryProps {
+  isLoading: boolean;
+}
+declare const FullItinerary: React.FC<FullItineraryProps>;
+export default FullItinerary;

package/build/build-cjs/src/search-results/store/search-results-slice.d.ts

@@ -1,5 +1,12 @@
 import { AccommodationFlyInStep, ExtendedFlightSearchResponseItem, Filter, SortByType } from '../types';
-import { BookingPackage, BookingPackageItem, PackagingAccommodationResponse, PackagingEntry } from '@qite/tide-client/build/types';
+import {
+  BookingPackage,
+  BookingPackageItem,
+  BookingPriceDetails,
+  ClientPortalItinerary,
+  PackagingAccommodationResponse,
+  PackagingEntry
+} from '@qite/tide-client/build/types';
 export interface SearchResultsState {
   results: BookingPackageItem[];
   filteredResults: BookingPackageItem[];
@@ -20,6 +27,8 @@ export interface SearchResultsState {
   editablePackagingEntry: PackagingEntry | null;
   transactionId: string | null;
   accommodationFlyInStep: AccommodationFlyInStep;
+  priceDetails: BookingPriceDetails | null;
+  itinerary: ClientPortalItinerary | null;
 }
 export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem[], 'searchResults/setResults'>,
   setFilteredResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem[], 'searchResults/setFilteredResults'>,
@@ -62,6 +71,8 @@ export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPay
   setFlyInIsOpen: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, 'searchResults/setFlyInIsOpen'>,
   setEditablePackagingEntry: import('@reduxjs/toolkit').ActionCreatorWithPayload<PackagingEntry | null, 'searchResults/setEditablePackagingEntry'>,
   setTransactionId: import('@reduxjs/toolkit').ActionCreatorWithPayload<string | null, 'searchResults/setTransactionId'>,
-  setAccommodationFlyInStep: import('@reduxjs/toolkit').ActionCreatorWithPayload<AccommodationFlyInStep, 'searchResults/setAccommodationFlyInStep'>;
+  setAccommodationFlyInStep: import('@reduxjs/toolkit').ActionCreatorWithPayload<AccommodationFlyInStep, 'searchResults/setAccommodationFlyInStep'>,
+  setPriceDetails: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPriceDetails | null, 'searchResults/setPriceDetails'>,
+  setItinerary: import('@reduxjs/toolkit').ActionCreatorWithPayload<ClientPortalItinerary | null, 'searchResults/setItinerary'>;
 declare const _default: import('@reduxjs/toolkit').Reducer<SearchResultsState>;
 export default _default;