@qite/tide-booking-component 1.4.100 → 1.4.101

package/build/build-cjs/index.js

@@ -13418,10 +13418,10 @@ PERFORMANCE OF THIS SOFTWARE.
   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;
@@ -13444,6 +13444,12 @@ PERFORMANCE OF THIS SOFTWARE.
     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;
@@ -13496,6 +13502,7 @@ 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;
@@ -33821,7 +33828,8 @@ var initialState$1 = {
   editablePackagingEntry: null,
   transactionId: null,
   accommodationFlyInStep: 'details',
-  priceDetails: null
+  priceDetails: null,
+  itinerary: null
 };
 var searchResultsSlice = toolkit.createSlice({
   name: 'searchResults',
@@ -33917,6 +33925,9 @@ var searchResultsSlice = toolkit.createSlice({
     },
     setPriceDetails: function (state, action) {
       state.priceDetails = action.payload;
+    },
+    setItinerary: function (state, action) {
+      state.itinerary = action.payload;
     }
   }
 });
@@ -33942,7 +33953,8 @@ var setFlyInIsOpen = _a.setFlyInIsOpen,
   setEditablePackagingEntry = _a.setEditablePackagingEntry,
   setTransactionId = _a.setTransactionId,
   setAccommodationFlyInStep = _a.setAccommodationFlyInStep,
-  setPriceDetails = _a.setPriceDetails;
+  setPriceDetails = _a.setPriceDetails,
+  setItinerary = _a.setItinerary;
 var searchResultsReducer = searchResultsSlice.reducer;
 
 var ItemPicker = function (_a) {
@@ -47322,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 : '';
@@ -47345,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],
@@ -47363,11 +47488,14 @@ var SearchResultsContainer = function () {
     pricesAreLoading = _h[0],
     setPricesAreLoading = _h[1];
   var _j = React.useState(false),
-    itineraryOpen = _j[0],
-    setItineraryOpen = _j[1];
-  var _k = React.useState(null),
-    selectedAccommodationSeed = _k[0],
-    setSelectedAccommodationSeed = _k[1];
+    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' },
@@ -47569,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);
@@ -47584,7 +47711,6 @@ var SearchResultsContainer = function () {
     var details = packagingAccoSearchDetails;
     if (!sourceEntry || !(details === null || details === void 0 ? void 0 : details.length)) return null;
     var selectedOptionsPerRoom = getSelectedOptionsPerRoom(details);
-    console.log('Selected options per room', selectedOptionsPerRoom);
     if (!selectedOptionsPerRoom.length) return null;
     var selectedHotel = details[0];
     var roomIndex = 0;
@@ -47597,7 +47723,6 @@ var SearchResultsContainer = function () {
         return x.roomIndex === roomIndex;
       });
       var selectedOption = selectedRoom === null || selectedRoom === void 0 ? void 0 : selectedRoom.option;
-      console.log('selectedRoom and selectedOption for line', line, selectedRoom, selectedOption);
       roomIndex++;
       if (!selectedOption) {
         return line;
@@ -47692,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));
@@ -47766,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();
@@ -47807,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()];
@@ -48053,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];
@@ -48156,14 +48277,6 @@ var SearchResultsContainer = function () {
           return __generator(this, function (_a) {
             switch (_a.label) {
               case 0:
-                console.log(
-                  'Fetching price details for entry',
-                  editablePackagingEntry !== null && editablePackagingEntry !== void 0
-                    ? editablePackagingEntry
-                    : context === null || context === void 0
-                    ? void 0
-                    : context.packagingEntry
-                );
                 if (!context || !editablePackagingEntry) return [2 /*return*/];
                 setPricesAreLoading(true);
                 _a.label = 1;
@@ -48190,7 +48303,42 @@ var SearchResultsContainer = function () {
           });
         });
       };
+      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]
   );
@@ -48384,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, BookingPriceDetails, 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[];
@@ -21,6 +28,7 @@ export interface SearchResultsState {
   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'>,
@@ -64,6 +72,7 @@ export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPay
   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'>,
-  setPriceDetails: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPriceDetails | null, 'searchResults/setPriceDetails'>;
+  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;

package/build/build-esm/index.js

@@ -13450,10 +13450,10 @@ PERFORMANCE OF THIS SOFTWARE.
   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;
@@ -13476,6 +13476,12 @@ PERFORMANCE OF THIS SOFTWARE.
     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;
@@ -13528,6 +13534,7 @@ 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;
@@ -33680,7 +33687,8 @@ var initialState$1 = {
   editablePackagingEntry: null,
   transactionId: null,
   accommodationFlyInStep: 'details',
-  priceDetails: null
+  priceDetails: null,
+  itinerary: null
 };
 var searchResultsSlice = createSlice({
   name: 'searchResults',
@@ -33776,6 +33784,9 @@ var searchResultsSlice = createSlice({
     },
     setPriceDetails: function (state, action) {
       state.priceDetails = action.payload;
+    },
+    setItinerary: function (state, action) {
+      state.itinerary = action.payload;
     }
   }
 });
@@ -33801,7 +33812,8 @@ var setFlyInIsOpen = _a.setFlyInIsOpen,
   setEditablePackagingEntry = _a.setEditablePackagingEntry,
   setTransactionId = _a.setTransactionId,
   setAccommodationFlyInStep = _a.setAccommodationFlyInStep,
-  setPriceDetails = _a.setPriceDetails;
+  setPriceDetails = _a.setPriceDetails,
+  setItinerary = _a.setItinerary;
 var searchResultsReducer = searchResultsSlice.reducer;
 
 var ItemPicker = function (_a) {
@@ -47076,6 +47088,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.createElement(Spinner, null);
+  }
+  var itinerary = useSelector(function (state) {
+    return state.searchResults;
+  }).itinerary;
+  var hostRef = useRef(null);
+  var shadowRootRef = useRef(null);
+  var html = useMemo(
+    function () {
+      return buildItineraryHtml(itinerary);
+    },
+    [itinerary]
+  );
+  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.createElement('div', { ref: hostRef });
+};
+
 var SearchResultsContainer = function () {
   var _a, _b;
   var currentSearch = typeof window !== 'undefined' ? window.location.search : '';
@@ -47099,7 +47223,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 = useState(false),
     initialFiltersSet = _d[0],
@@ -47117,11 +47242,14 @@ var SearchResultsContainer = function () {
     pricesAreLoading = _h[0],
     setPricesAreLoading = _h[1];
   var _j = useState(false),
-    itineraryOpen = _j[0],
-    setItineraryOpen = _j[1];
-  var _k = useState(null),
-    selectedAccommodationSeed = _k[0],
-    setSelectedAccommodationSeed = _k[1];
+    itineraryIsLoading = _j[0],
+    setItineraryIsLoading = _j[1];
+  var _k = useState(false),
+    itineraryOpen = _k[0],
+    setItineraryOpen = _k[1];
+  var _l = useState(null),
+    selectedAccommodationSeed = _l[0],
+    setSelectedAccommodationSeed = _l[1];
   var panelRef = useRef(null);
   var sortByTypes = [
     { direction: 'asc', label: 'default' },
@@ -47323,7 +47451,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);
@@ -47338,7 +47465,6 @@ var SearchResultsContainer = function () {
     var details = packagingAccoSearchDetails;
     if (!sourceEntry || !(details === null || details === void 0 ? void 0 : details.length)) return null;
     var selectedOptionsPerRoom = getSelectedOptionsPerRoom(details);
-    console.log('Selected options per room', selectedOptionsPerRoom);
     if (!selectedOptionsPerRoom.length) return null;
     var selectedHotel = details[0];
     var roomIndex = 0;
@@ -47351,7 +47477,6 @@ var SearchResultsContainer = function () {
         return x.roomIndex === roomIndex;
       });
       var selectedOption = selectedRoom === null || selectedRoom === void 0 ? void 0 : selectedRoom.option;
-      console.log('selectedRoom and selectedOption for line', line, selectedRoom, selectedOption);
       roomIndex++;
       if (!selectedOption) {
         return line;
@@ -47446,7 +47571,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));
@@ -47520,7 +47644,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();
@@ -47561,7 +47684,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()];
@@ -47807,7 +47929,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];
@@ -47910,14 +48031,6 @@ var SearchResultsContainer = function () {
           return __generator(this, function (_a) {
             switch (_a.label) {
               case 0:
-                console.log(
-                  'Fetching price details for entry',
-                  editablePackagingEntry !== null && editablePackagingEntry !== void 0
-                    ? editablePackagingEntry
-                    : context === null || context === void 0
-                    ? void 0
-                    : context.packagingEntry
-                );
                 if (!context || !editablePackagingEntry) return [2 /*return*/];
                 setPricesAreLoading(true);
                 _a.label = 1;
@@ -47944,7 +48057,42 @@ var SearchResultsContainer = function () {
           });
         });
       };
+      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]
   );
@@ -48138,7 +48286,8 @@ var SearchResultsContainer = function () {
                     }),
                   context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight &&
                     context.packagingEntry &&
-                    React__default.createElement('span', null, 'TODO: Show Full Itinerary here')
+                    itinerary &&
+                    React__default.createElement(FullItinerary, { isLoading: itineraryIsLoading })
                 )
               ),
               React__default.createElement(FlyIn, {

package/build/build-esm/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-esm/src/search-results/store/search-results-slice.d.ts

@@ -1,5 +1,12 @@
 import { AccommodationFlyInStep, ExtendedFlightSearchResponseItem, Filter, SortByType } from '../types';
-import { BookingPackage, BookingPackageItem, BookingPriceDetails, 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[];
@@ -21,6 +28,7 @@ export interface SearchResultsState {
   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'>,
@@ -64,6 +72,7 @@ export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPay
   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'>,
-  setPriceDetails: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPriceDetails | null, 'searchResults/setPriceDetails'>;
+  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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.100",
+  "version": "1.4.101",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@jsonurl/jsonurl": "^1.1.4",
     "@popperjs/core": "^2.10.2",
-    "@qite/tide-client": "^1.1.157",
+    "@qite/tide-client": "^1.1.158",
     "@reduxjs/toolkit": "^2.8.2",
     "@rollup/plugin-commonjs": "^19.0.1",
     "@rollup/plugin-json": "^4.1.0",

package/src/search-results/components/itinerary/full-itinerary.tsx

@@ -0,0 +1,266 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { useSelector } from 'react-redux';
+import { SearchResultsRootState } from '../../store/search-results-store';
+import { ClientPortalItinerary } from '@qite/tide-client';
+import Spinner from '../spinner/spinner';
+
+const formatNodeDate = (date?: Date | null) => {
+  if (!date) return '';
+
+  try {
+    return new Intl.DateTimeFormat('nl-BE', {
+      weekday: 'long',
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric'
+    }).format(date);
+  } catch {
+    return '';
+  }
+};
+
+const escapeHtml = (value?: string | null) => {
+  if (!value) return '';
+
+  return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+};
+
+const buildItineraryHtml = (itinerary?: ClientPortalItinerary | null) => {
+  if (!itinerary) {
+    return `
+      <div class="itinerary-shell">
+        <div class="itinerary-empty">Geen reisroute beschikbaar.</div>
+      </div>
+    `;
+  }
+
+  const nodesHtml = (itinerary.nodes ?? [])
+    .map((node) => {
+      const hasItems = Array.isArray(node.items) && node.items.length > 0;
+
+      const itemsHtml = hasItems
+        ? node.items
+            .map(
+              (item) => `
+                <article class="itinerary-item" data-template="${escapeHtml(item.templateName)}">
+                  ${item.contents ?? ''}
+                </article>
+              `
+            )
+            .join('')
+        : `<div class="itinerary-node__empty">Geen items voor deze dag.</div>`;
+
+      return `
+        <section class="itinerary-node">
+          <header class="itinerary-node__header">
+            <div class="itinerary-node__day">Dag ${node.startDay}${node.endDay > node.startDay ? ` - ${node.endDay}` : ''}</div>
+            <div class="itinerary-node__meta">
+              <h2 class="itinerary-node__title">${escapeHtml(node.title)}</h2>
+              <div class="itinerary-node__date">${escapeHtml(formatNodeDate(node.startDate))}</div>
+            </div>
+          </header>
+
+          <div class="itinerary-node__content">
+            ${itemsHtml}
+          </div>
+        </section>
+      `;
+    })
+    .join('');
+
+  const defaultItemsHtml =
+    itinerary.defaultItems && itinerary.defaultItems.length > 0
+      ? `
+        <section class="itinerary-default-items">
+          <h2 class="itinerary-default-items__title">Algemene info</h2>
+          ${itinerary.defaultItems
+            .map(
+              (item) => `
+                <article class="itinerary-item" data-template="${escapeHtml(item.templateName)}">
+                  ${item.contents ?? ''}
+                </article>
+              `
+            )
+            .join('')}
+        </section>
+      `
+      : '';
+
+  return `
+    <div class="itinerary-shell">
+      ${itinerary.title ? `<header class="itinerary-shell__header"><h1 class="itinerary-shell__title">${escapeHtml(itinerary.title)}</h1></header>` : ''}
+
+      <div class="itinerary-shell__content">
+        ${nodesHtml}
+        ${defaultItemsHtml}
+      </div>
+    </div>
+  `;
+};
+
+interface FullItineraryProps {
+  isLoading: boolean;
+}
+
+const FullItinerary: React.FC<FullItineraryProps> = ({ isLoading }) => {
+  if (isLoading) {
+    return <Spinner />;
+  }
+
+  const { itinerary } = useSelector((state: SearchResultsRootState) => state.searchResults);
+  const hostRef = useRef<HTMLDivElement | null>(null);
+  const shadowRootRef = useRef<ShadowRoot | null>(null);
+
+  const html = useMemo(() => buildItineraryHtml(itinerary as ClientPortalItinerary | null), [itinerary]);
+
+  useEffect(() => {
+    if (!hostRef.current) {
+      return;
+    }
+
+    if (!shadowRootRef.current) {
+      shadowRootRef.current = hostRef.current.attachShadow({ mode: 'open' });
+    }
+
+    const shadowRoot = shadowRootRef.current;
+
+    shadowRoot.innerHTML = `
+      <style>
+        :host {
+          all: initial;
+        }
+
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        .itinerary-shell {
+          width: 100%;
+          margin: 0 auto;
+          font-family: 'Outfit', sans-serif;
+          color: #222;
+        }
+
+        .itinerary-shell__header {
+          margin-bottom: 24px;
+        }
+
+        .itinerary-shell__title {
+          margin: 0;
+          font-size: 32px;
+          line-height: 1.2;
+        }
+
+        .itinerary-shell__content {
+          display: grid;
+          gap: 24px;
+        }
+
+        .itinerary-node {
+          border: 1px solid #e5e7eb;
+          border-radius: 16px;
+          overflow: hidden;
+          background: #fff;
+          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
+        }
+
+        .itinerary-node__header {
+          display: flex;
+          gap: 16px;
+          align-items: flex-start;
+          padding: 20px 20px 16px;
+          border-bottom: 1px solid #eef0f2;
+          background: #fafafa;
+        }
+
+        .itinerary-node__day {
+          flex: 0 0 auto;
+          min-width: 72px;
+          padding: 8px 12px;
+          border-radius: 999px;
+          font-size: 14px;
+          font-weight: 700;
+          line-height: 1;
+          background: #111827;
+          color: #fff;
+          text-align: center;
+        }
+
+        .itinerary-node__meta {
+          min-width: 0;
+        }
+
+        .itinerary-node__title {
+          margin: 0;
+          font-size: 22px;
+          line-height: 1.25;
+        }
+
+        .itinerary-node__date {
+          margin-top: 6px;
+          font-size: 14px;
+          color: #6b7280;
+        }
+
+        .itinerary-node__content {
+          display: grid;
+          gap: 20px;
+          padding: 20px;
+        }
+
+        .itinerary-item {
+          display: block;
+          border-radius: 12px;
+          overflow: hidden;
+          background: #fff;
+        }
+
+        .itinerary-node__empty,
+        .itinerary-empty {
+          padding: 20px;
+          border: 1px dashed #d1d5db;
+          border-radius: 12px;
+          color: #6b7280;
+          background: #fafafa;
+        }
+
+        .itinerary-default-items {
+          border: 1px solid #e5e7eb;
+          border-radius: 16px;
+          padding: 20px;
+          background: #fff;
+          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
+        }
+
+        .itinerary-default-items__title {
+          margin: 0 0 16px;
+          font-size: 22px;
+        }
+
+        @media (max-width: 768px) {
+          .itinerary-shell {
+            padding: 16px;
+          }
+
+          .itinerary-node__header {
+            flex-direction: column;
+          }
+
+          .itinerary-node__day {
+            min-width: auto;
+          }
+        }
+
+        ${itinerary?.styleSheetBody ?? ''}
+      </style>
+
+      ${html}
+    `;
+  }, [html, itinerary?.styleSheetBody]);
+
+  return <div ref={hostRef} />;
+};
+
+export default FullItinerary;

package/src/search-results/components/search-results-container/search-results-container.tsx

@@ -17,7 +17,8 @@ import {
   setEditablePackagingEntry,
   setTransactionId,
   setAccommodationFlyInStep,
-  setPriceDetails
+  setPriceDetails,
+  setItinerary
 } from '../../store/search-results-slice';
 import { AccommodationFlyInStep, Filter, SearchSeed, SortByType } from '../../types';
 import useMediaQuery from '../../../shared/utils/use-media-query-util';
@@ -39,7 +40,8 @@ import {
   PackagingEntry,
   startTransaction,
   PackagingEntryLine,
-  getPriceDetails
+  getPriceDetails,
+  getItinerary
 } from '@qite/tide-client';
 import { getDateFromParams, getNumberFromParams, getRoomsFromParams, getStringFromParams } from '../../../shared/utils/query-string-util';
 import { first, last, range } from 'lodash';
@@ -74,6 +76,7 @@ import {
   toDateOnlyString
 } from '../../utils/query-utils';
 import { getRequestRoomsFromPackagingSegments, getRoomIndexFromLine, getSelectedOptionsPerRoom } from '../../utils/packaging-utils';
+import FullItinerary from '../itinerary/full-itinerary';
 
 const SearchResultsContainer: React.FC = () => {
   const currentSearch = typeof window !== 'undefined' ? window.location.search : '';
@@ -98,7 +101,8 @@ const SearchResultsContainer: React.FC = () => {
     packagingAccoSearchDetails,
     editablePackagingEntry,
     transactionId,
-    accommodationFlyInStep
+    accommodationFlyInStep,
+    itinerary
   } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
   const isMobile = useMediaQuery('(max-width: 1200px)');
@@ -109,6 +113,7 @@ const SearchResultsContainer: React.FC = () => {
 
   const [detailsIsLoading, setDetailsIsLoading] = useState(false);
   const [pricesAreLoading, setPricesAreLoading] = useState(false);
+  const [itineraryIsLoading, setItineraryIsLoading] = useState(false);
 
   const [itineraryOpen, setItineraryOpen] = useState(false);
 
@@ -816,7 +821,28 @@ const SearchResultsContainer: React.FC = () => {
       }
     };
 
+    const fetchItinerary = async () => {
+      console.log('Fetching itinerary for entry', editablePackagingEntry);
+      if (!context || !editablePackagingEntry) return;
+      setItineraryIsLoading(true);
+      try {
+        const config: TideClientConfig = {
+          host: context.tideConnection.host,
+          apiKey: context.tideConnection.apiKey
+        };
+
+        const itinerary = await getItinerary(config, editablePackagingEntry);
+        console.log('Fetched itinerary', itinerary);
+        dispatch(setItinerary(itinerary));
+        setItineraryIsLoading(false);
+      } catch (err) {
+        console.error('Error fetching itinerary', err);
+        setItineraryIsLoading(false);
+      }
+    };
+
     fetchPriceDetails();
+    fetchItinerary();
   }, [editablePackagingEntry]);
 
   return (
@@ -943,8 +969,8 @@ const SearchResultsContainer: React.FC = () => {
                       context.showFlightResults &&
                       bookingPackageDetails?.returnFlights && <FlightResults flights={bookingPackageDetails?.returnFlights} isDeparture={false} />}
 
-                    {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && context.packagingEntry && (
-                      <span>TODO: Show Full Itinerary here</span>
+                    {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && context.packagingEntry && itinerary && (
+                      <FullItinerary isLoading={itineraryIsLoading} />
                     )}
                   </div>
                 </div>

package/src/search-results/store/search-results-slice.ts

@@ -1,6 +1,13 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { AccommodationFlyInStep, ExtendedFlightSearchResponseItem, Filter, SortByType } from '../types';
-import { BookingPackage, BookingPackageItem, BookingPriceDetails, 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[];
@@ -23,6 +30,7 @@ export interface SearchResultsState {
   transactionId: string | null;
   accommodationFlyInStep: AccommodationFlyInStep;
   priceDetails: BookingPriceDetails | null;
+  itinerary: ClientPortalItinerary | null;
 }
 
 const initialState: SearchResultsState = {
@@ -45,7 +53,8 @@ const initialState: SearchResultsState = {
   editablePackagingEntry: null,
   transactionId: null,
   accommodationFlyInStep: 'details',
-  priceDetails: null
+  priceDetails: null,
+  itinerary: null
 };
 
 const searchResultsSlice = createSlice({
@@ -143,6 +152,9 @@ const searchResultsSlice = createSlice({
     },
     setPriceDetails(state, action: PayloadAction<BookingPriceDetails | null>) {
       state.priceDetails = action.payload;
+    },
+    setItinerary(state, action: PayloadAction<ClientPortalItinerary | null>) {
+      state.itinerary = action.payload;
     }
   }
 });
@@ -170,7 +182,8 @@ export const {
   setEditablePackagingEntry,
   setTransactionId,
   setAccommodationFlyInStep,
-  setPriceDetails
+  setPriceDetails,
+  setItinerary
 } = searchResultsSlice.actions;
 
 export default searchResultsSlice.reducer;