@qite/tide-booking-component 1.4.99 → 1.4.100

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,6 +13417,7 @@ 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_ENTRY = function (magicLinkCode) {
     return ENDPOINT + '/entry/' + magicLinkCode;
   };
@@ -13437,6 +13438,12 @@ 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);
+  };
 
   exports.AllotmentType = AllotmentType;
   exports.ContactForm = ContactForm;
@@ -13492,6 +13499,7 @@ PERFORMANCE OF THIS SOFTWARE.
   exports.getLocations = getLocations;
   exports.getMolliePayment = getMolliePayment;
   exports.getPortal = getPortal;
+  exports.getPriceDetails = getPriceDetails;
   exports.getPrintActions = getPrintActions;
   exports.getStyleSheet = getStyleSheet;
   exports.getTranslationDictionary = getTranslationDictionary;
@@ -33812,7 +33820,8 @@ var initialState$1 = {
   flyInIsOpen: false,
   editablePackagingEntry: null,
   transactionId: null,
-  accommodationFlyInStep: 'details'
+  accommodationFlyInStep: 'details',
+  priceDetails: null
 };
 var searchResultsSlice = toolkit.createSlice({
   name: 'searchResults',
@@ -33905,6 +33914,9 @@ var searchResultsSlice = toolkit.createSlice({
     },
     setAccommodationFlyInStep: function (state, action) {
       state.accommodationFlyInStep = action.payload;
+    },
+    setPriceDetails: function (state, action) {
+      state.priceDetails = action.payload;
     }
   }
 });
@@ -33929,7 +33941,8 @@ _a.resetSearchState;
 var setFlyInIsOpen = _a.setFlyInIsOpen,
   setEditablePackagingEntry = _a.setEditablePackagingEntry,
   setTransactionId = _a.setTransactionId,
-  setAccommodationFlyInStep = _a.setAccommodationFlyInStep;
+  setAccommodationFlyInStep = _a.setAccommodationFlyInStep,
+  setPriceDetails = _a.setPriceDetails;
 var searchResultsReducer = searchResultsSlice.reducer;
 
 var ItemPicker = function (_a) {
@@ -35195,14 +35208,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 +35305,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 +35361,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 +47257,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)
@@ -47347,11 +47360,14 @@ 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),
+    itineraryOpen = _j[0],
+    setItineraryOpen = _j[1];
+  var _k = React.useState(null),
+    selectedAccommodationSeed = _k[0],
+    setSelectedAccommodationSeed = _k[1];
   var panelRef = React.useRef(null);
   var sortByTypes = [
     { direction: 'asc', label: 'default' },
@@ -47568,20 +47584,21 @@ 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;
     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;
+      console.log('selectedRoom and selectedOption for line', line, selectedRoom, selectedOption);
+      roomIndex++;
       if (!selectedOption) {
         return line;
       }
@@ -48131,6 +48148,52 @@ 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:
+                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;
+              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*/];
+            }
+          });
+        });
+      };
+      fetchPriceDetails();
+    },
+    [editablePackagingEntry]
+  );
   return React__default['default'].createElement(
     'div',
     { id: 'tide-booking', className: 'search__bg' },
@@ -48182,7 +48245,7 @@ var SearchResultsContainer = function () {
                   handleSetIsOpen: function () {
                     return setItineraryOpen(!itineraryOpen);
                   },
-                  isLoading: isLoading,
+                  isLoading: pricesAreLoading,
                   onEditAccommodation: handleEditAccommodation
                 }),
               React__default['default'].createElement(

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

@@ -1,5 +1,5 @@
 import { AccommodationFlyInStep, ExtendedFlightSearchResponseItem, Filter, SortByType } from '../types';
-import { BookingPackage, BookingPackageItem, PackagingAccommodationResponse, PackagingEntry } from '@qite/tide-client/build/types';
+import { BookingPackage, BookingPackageItem, BookingPriceDetails, PackagingAccommodationResponse, PackagingEntry } from '@qite/tide-client/build/types';
 export interface SearchResultsState {
   results: BookingPackageItem[];
   filteredResults: BookingPackageItem[];
@@ -20,6 +20,7 @@ export interface SearchResultsState {
   editablePackagingEntry: PackagingEntry | null;
   transactionId: string | null;
   accommodationFlyInStep: AccommodationFlyInStep;
+  priceDetails: BookingPriceDetails | null;
 }
 export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem[], 'searchResults/setResults'>,
   setFilteredResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem[], 'searchResults/setFilteredResults'>,
@@ -62,6 +63,7 @@ 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'>;
 declare const _default: import('@reduxjs/toolkit').Reducer<SearchResultsState>;
 export default _default;

package/build/build-esm/index.js

@@ -12823,7 +12823,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';
@@ -12923,7 +12923,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);
@@ -13449,6 +13449,7 @@ 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_ENTRY = function (magicLinkCode) {
     return ENDPOINT + '/entry/' + magicLinkCode;
   };
@@ -13469,6 +13470,12 @@ 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);
+  };
 
   exports.AllotmentType = AllotmentType;
   exports.ContactForm = ContactForm;
@@ -13524,6 +13531,7 @@ PERFORMANCE OF THIS SOFTWARE.
   exports.getLocations = getLocations;
   exports.getMolliePayment = getMolliePayment;
   exports.getPortal = getPortal;
+  exports.getPriceDetails = getPriceDetails;
   exports.getPrintActions = getPrintActions;
   exports.getStyleSheet = getStyleSheet;
   exports.getTranslationDictionary = getTranslationDictionary;
@@ -33671,7 +33679,8 @@ var initialState$1 = {
   flyInIsOpen: false,
   editablePackagingEntry: null,
   transactionId: null,
-  accommodationFlyInStep: 'details'
+  accommodationFlyInStep: 'details',
+  priceDetails: null
 };
 var searchResultsSlice = createSlice({
   name: 'searchResults',
@@ -33764,6 +33773,9 @@ var searchResultsSlice = createSlice({
     },
     setAccommodationFlyInStep: function (state, action) {
       state.accommodationFlyInStep = action.payload;
+    },
+    setPriceDetails: function (state, action) {
+      state.priceDetails = action.payload;
     }
   }
 });
@@ -33788,7 +33800,8 @@ _a.resetSearchState;
 var setFlyInIsOpen = _a.setFlyInIsOpen,
   setEditablePackagingEntry = _a.setEditablePackagingEntry,
   setTransactionId = _a.setTransactionId,
-  setAccommodationFlyInStep = _a.setAccommodationFlyInStep;
+  setAccommodationFlyInStep = _a.setAccommodationFlyInStep,
+  setPriceDetails = _a.setPriceDetails;
 var searchResultsReducer = searchResultsSlice.reducer;
 
 var ItemPicker = function (_a) {
@@ -35052,14 +35065,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 = useContext(SearchResultsConfigurationContext);
   var translations = getTranslations((_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB');
-  var editablePackagingEntry = useSelector(function (state) {
-    return state.searchResults;
-  }).editablePackagingEntry;
+  var _q = useSelector(function (state) {
+      return state.searchResults;
+    }),
+    editablePackagingEntry = _q.editablePackagingEntry,
+    priceDetails = _q.priceDetails;
   var packagingEntry =
     editablePackagingEntry !== null && editablePackagingEntry !== void 0
       ? editablePackagingEntry
@@ -35147,7 +35162,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.createElement(
     'div',
@@ -35199,18 +35214,24 @@ var Itinerary = function (_a) {
         React__default.createElement(
           'div',
           { className: 'search__filter__prices' },
-          React__default.createElement(
-            'div',
-            { className: 'search__filter__prices__wrapper' },
-            React__default.createElement('h3', { className: 'search__filter__prices--amount' }, formatPrice$2(pricePerPerson, 'EUR')),
-            React__default.createElement('p', null, translations.SRP.PACKAGE_PRICE_PER_PERSON),
-            React__default.createElement(
-              'p',
-              null,
-              React__default.createElement('strong', null, '(', formatPrice$2(totalPrice, 'EUR'), ' ', translations.SRP.TOTAL, ')')
-            )
-          ),
-          React__default.createElement('button', { className: 'cta' }, translations.QSM.CONFIRM)
+          isLoading
+            ? React__default.createElement(Spinner, null)
+            : React__default.createElement(
+                React__default.Fragment,
+                null,
+                React__default.createElement(
+                  'div',
+                  { className: 'search__filter__prices__wrapper' },
+                  React__default.createElement('h3', { className: 'search__filter__prices--amount' }, formatPrice$2(pricePerPerson, 'EUR')),
+                  React__default.createElement('p', null, translations.SRP.PACKAGE_PRICE_PER_PERSON),
+                  React__default.createElement(
+                    'p',
+                    null,
+                    React__default.createElement('strong', null, '(', formatPrice$2(totalPrice, 'EUR'), ' ', translations.SRP.TOTAL, ')')
+                  )
+                ),
+                React__default.createElement('button', { className: 'cta' }, translations.QSM.CONFIRM)
+              )
         ),
         React__default.createElement(
           'div',
@@ -46990,14 +47011,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)
@@ -47101,11 +47114,14 @@ var SearchResultsContainer = function () {
     detailsIsLoading = _g[0],
     setDetailsIsLoading = _g[1];
   var _h = useState(false),
-    itineraryOpen = _h[0],
-    setItineraryOpen = _h[1];
-  var _j = useState(null),
-    selectedAccommodationSeed = _j[0],
-    setSelectedAccommodationSeed = _j[1];
+    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];
   var panelRef = useRef(null);
   var sortByTypes = [
     { direction: 'asc', label: 'default' },
@@ -47322,20 +47338,21 @@ 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;
     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;
+      console.log('selectedRoom and selectedOption for line', line, selectedRoom, selectedOption);
+      roomIndex++;
       if (!selectedOption) {
         return line;
       }
@@ -47885,6 +47902,52 @@ var SearchResultsContainer = function () {
       rooms: getRequestRoomsFromPackagingSegments(entry, sortedSegments)
     };
   };
+  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:
+                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;
+              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*/];
+            }
+          });
+        });
+      };
+      fetchPriceDetails();
+    },
+    [editablePackagingEntry]
+  );
   return React__default.createElement(
     'div',
     { id: 'tide-booking', className: 'search__bg' },
@@ -47936,7 +47999,7 @@ var SearchResultsContainer = function () {
                   handleSetIsOpen: function () {
                     return setItineraryOpen(!itineraryOpen);
                   },
-                  isLoading: isLoading,
+                  isLoading: pricesAreLoading,
                   onEditAccommodation: handleEditAccommodation
                 }),
               React__default.createElement(

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

@@ -1,5 +1,5 @@
 import { AccommodationFlyInStep, ExtendedFlightSearchResponseItem, Filter, SortByType } from '../types';
-import { BookingPackage, BookingPackageItem, PackagingAccommodationResponse, PackagingEntry } from '@qite/tide-client/build/types';
+import { BookingPackage, BookingPackageItem, BookingPriceDetails, PackagingAccommodationResponse, PackagingEntry } from '@qite/tide-client/build/types';
 export interface SearchResultsState {
   results: BookingPackageItem[];
   filteredResults: BookingPackageItem[];
@@ -20,6 +20,7 @@ export interface SearchResultsState {
   editablePackagingEntry: PackagingEntry | null;
   transactionId: string | null;
   accommodationFlyInStep: AccommodationFlyInStep;
+  priceDetails: BookingPriceDetails | null;
 }
 export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem[], 'searchResults/setResults'>,
   setFilteredResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem[], 'searchResults/setFilteredResults'>,
@@ -62,6 +63,7 @@ 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'>;
 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.99",
+  "version": "1.4.100",
   "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.155",
+    "@qite/tide-client": "^1.1.157",
     "@reduxjs/toolkit": "^2.8.2",
     "@rollup/plugin-commonjs": "^19.0.1",
     "@rollup/plugin-json": "^4.1.0",

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

@@ -8,6 +8,7 @@ import { formatPrice, getTranslations } from '../../../shared/utils/localization
 import { useSelector } from 'react-redux';
 import { SearchResultsRootState } from '../../store/search-results-store';
 import { ACCOMMODATION_SERVICE_TYPE, FLIGHT_SERVICE_TYPE } from '../../utils/query-utils';
+import Spinner from '../spinner/spinner';
 
 interface ItineraryProps {
   isOpen: boolean;
@@ -104,7 +105,7 @@ const getSegmentTitle = (segment: PackagingEntryLine) => {
 const Itinerary: React.FC<ItineraryProps> = ({ isOpen, handleSetIsOpen, isLoading, onEditAccommodation }) => {
   const context = useContext(SearchResultsConfigurationContext);
   const translations = getTranslations(context?.languageCode ?? 'en-GB');
-  const { editablePackagingEntry } = useSelector((state: SearchResultsRootState) => state.searchResults);
+  const { editablePackagingEntry, priceDetails } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
   const packagingEntry = editablePackagingEntry ?? context?.packagingEntry;
 
@@ -151,7 +152,7 @@ const Itinerary: React.FC<ItineraryProps> = ({ isOpen, handleSetIsOpen, isLoadin
   console.log('groupedOtherSegments', groupedOtherSegments);
 
   const numberOfPax = packagingEntry.pax?.length || 1;
-  const totalPrice = packagingEntry.price || 0;
+  const totalPrice = priceDetails?.total || packagingEntry.price || 0;
   const pricePerPerson = totalPrice / numberOfPax;
 
   return (
@@ -187,16 +188,22 @@ const Itinerary: React.FC<ItineraryProps> = ({ isOpen, handleSetIsOpen, isLoadin
           </div>
 
           <div className="search__filter__prices">
-            <div className="search__filter__prices__wrapper">
-              <h3 className="search__filter__prices--amount">{formatPrice(pricePerPerson, 'EUR')}</h3>
-              <p>{translations.SRP.PACKAGE_PRICE_PER_PERSON}</p>
-              <p>
-                <strong>
-                  ({formatPrice(totalPrice, 'EUR')} {translations.SRP.TOTAL})
-                </strong>
-              </p>
-            </div>
-            <button className="cta">{translations.QSM.CONFIRM}</button>
+            {isLoading ? (
+              <Spinner />
+            ) : (
+              <>
+                <div className="search__filter__prices__wrapper">
+                  <h3 className="search__filter__prices--amount">{formatPrice(pricePerPerson, 'EUR')}</h3>
+                  <p>{translations.SRP.PACKAGE_PRICE_PER_PERSON}</p>
+                  <p>
+                    <strong>
+                      ({formatPrice(totalPrice, 'EUR')} {translations.SRP.TOTAL})
+                    </strong>
+                  </p>
+                </div>
+                <button className="cta">{translations.QSM.CONFIRM}</button>
+              </>
+            )}
           </div>
 
           <div className="search__filter__itinerary">

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

@@ -16,7 +16,8 @@ import {
   setPackagingAccoSearchDetails,
   setEditablePackagingEntry,
   setTransactionId,
-  setAccommodationFlyInStep
+  setAccommodationFlyInStep,
+  setPriceDetails
 } from '../../store/search-results-slice';
 import { AccommodationFlyInStep, Filter, SearchSeed, SortByType } from '../../types';
 import useMediaQuery from '../../../shared/utils/use-media-query-util';
@@ -37,7 +38,8 @@ import {
   PortalQsmType,
   PackagingEntry,
   startTransaction,
-  PackagingEntryLine
+  PackagingEntryLine,
+  getPriceDetails
 } from '@qite/tide-client';
 import { getDateFromParams, getNumberFromParams, getRoomsFromParams, getStringFromParams } from '../../../shared/utils/query-string-util';
 import { first, last, range } from 'lodash';
@@ -106,6 +108,7 @@ const SearchResultsContainer: React.FC = () => {
   const [filtersOpen, setFiltersOpen] = useState(false);
 
   const [detailsIsLoading, setDetailsIsLoading] = useState(false);
+  const [pricesAreLoading, setPricesAreLoading] = useState(false);
 
   const [itineraryOpen, setItineraryOpen] = useState(false);
 
@@ -326,7 +329,6 @@ const SearchResultsContainer: React.FC = () => {
 
   const handleConfirmHotelSwap = () => {
     const updatedEntry = swapHotelInPackagingEntry();
-    console.log('Updated entry after hotel swap', updatedEntry);
     if (!updatedEntry) return;
 
     dispatch(setEditablePackagingEntry(updatedEntry));
@@ -344,16 +346,15 @@ const SearchResultsContainer: React.FC = () => {
 
     const selectedHotel = details[0];
 
+    let roomIndex = 0;
     const updatedLines = sourceEntry.lines.map((line) => {
       if (line.serviceType !== ACCOMMODATION_SERVICE_TYPE) {
         return line;
       }
 
-      // TODO: fix roomIndex
-      const roomIndex = getRoomIndexFromLine(line);
-      console.log('Processing line', line, 'with room index', roomIndex);
       const selectedRoom = selectedOptionsPerRoom.find((x) => x.roomIndex === roomIndex);
       const selectedOption = selectedRoom?.option;
+      roomIndex++;
 
       if (!selectedOption) {
         return line;
@@ -443,8 +444,6 @@ const SearchResultsContainer: React.FC = () => {
       const searchRequest = buildSearchFromSeed(seed);
       const packageSearchResults = await search(config, searchRequest);
 
-      console.log('Search results', packageSearchResults);
-
       const enrichedFilters = enrichFiltersWithResults(packageSearchResults, context.filters, context.tags ?? []);
       if (!initialFiltersSet) {
         dispatch(resetFilters(enrichedFilters));
@@ -503,7 +502,6 @@ const SearchResultsContainer: React.FC = () => {
       searchRequest.portalId = context.portalId;
       searchRequest.agentId = context.agentId;
 
-      console.log('Packaging accommodation search request', searchRequest);
       const packageAccoSearchResults = await searchPackagingAccommodations(config, searchRequest);
 
       const enrichedFilters = enrichFiltersWithPackageAccoResults(packageAccoSearchResults, context.filters, context.tags ?? []);
@@ -528,7 +526,6 @@ const SearchResultsContainer: React.FC = () => {
     if (!context || context.showMockup) return;
 
     let currentTransactionId = context?.packagingEntry?.transactionId || transactionId;
-    console.log('Current transaction ID', currentTransactionId);
     if (!currentTransactionId) {
       dispatch(setIsLoading(true));
       currentTransactionId = await runStartTransaction();
@@ -726,7 +723,6 @@ const SearchResultsContainer: React.FC = () => {
         };
 
         const packageAccoSearchDetails = await searchPackagingAccommodations(config, detailSearchRequest);
-        console.log('Packaging Acco Search details', packageAccoSearchDetails);
         dispatch(setPackagingAccoSearchDetails(packageAccoSearchDetails));
         setDetailsIsLoading(false);
       } catch (err) {
@@ -801,6 +797,28 @@ const SearchResultsContainer: React.FC = () => {
     };
   };
 
+  useEffect(() => {
+    const fetchPriceDetails = async () => {
+      if (!context || !editablePackagingEntry) return;
+      setPricesAreLoading(true);
+      try {
+        const config: TideClientConfig = {
+          host: context.tideConnection.host,
+          apiKey: context.tideConnection.apiKey
+        };
+
+        const priceDetails = await getPriceDetails(config, editablePackagingEntry);
+        dispatch(setPriceDetails(priceDetails));
+        setPricesAreLoading(false);
+      } catch (err) {
+        console.error('Error fetching price details', err);
+        setPricesAreLoading(false);
+      }
+    };
+
+    fetchPriceDetails();
+  }, [editablePackagingEntry]);
+
   return (
     <div id="tide-booking" className="search__bg">
       {context && (
@@ -838,7 +856,7 @@ const SearchResultsContainer: React.FC = () => {
                   <Itinerary
                     isOpen={itineraryOpen}
                     handleSetIsOpen={() => setItineraryOpen(!itineraryOpen)}
-                    isLoading={isLoading}
+                    isLoading={pricesAreLoading}
                     onEditAccommodation={handleEditAccommodation}
                   />
                 )}

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

@@ -1,6 +1,6 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { AccommodationFlyInStep, ExtendedFlightSearchResponseItem, Filter, SortByType } from '../types';
-import { BookingPackage, BookingPackageItem, PackagingAccommodationResponse, PackagingEntry } from '@qite/tide-client/build/types';
+import { BookingPackage, BookingPackageItem, BookingPriceDetails, PackagingAccommodationResponse, PackagingEntry } from '@qite/tide-client/build/types';
 
 export interface SearchResultsState {
   results: BookingPackageItem[];
@@ -22,6 +22,7 @@ export interface SearchResultsState {
   editablePackagingEntry: PackagingEntry | null;
   transactionId: string | null;
   accommodationFlyInStep: AccommodationFlyInStep;
+  priceDetails: BookingPriceDetails | null;
 }
 
 const initialState: SearchResultsState = {
@@ -43,7 +44,8 @@ const initialState: SearchResultsState = {
   flyInIsOpen: false,
   editablePackagingEntry: null,
   transactionId: null,
-  accommodationFlyInStep: 'details'
+  accommodationFlyInStep: 'details',
+  priceDetails: null
 };
 
 const searchResultsSlice = createSlice({
@@ -138,6 +140,9 @@ const searchResultsSlice = createSlice({
     },
     setAccommodationFlyInStep(state, action: PayloadAction<AccommodationFlyInStep>) {
       state.accommodationFlyInStep = action.payload;
+    },
+    setPriceDetails(state, action: PayloadAction<BookingPriceDetails | null>) {
+      state.priceDetails = action.payload;
     }
   }
 });
@@ -164,7 +169,8 @@ export const {
   setFlyInIsOpen,
   setEditablePackagingEntry,
   setTransactionId,
-  setAccommodationFlyInStep
+  setAccommodationFlyInStep,
+  setPriceDetails
 } = searchResultsSlice.actions;
 
 export default searchResultsSlice.reducer;