@qite/tide-booking-component 1.4.84 → 1.4.86

package/build/build-esm/index.js

@@ -6753,7 +6753,7 @@ var DepartureRange;
   DepartureRange[(DepartureRange['Night'] = 3)] = 'Night';
 })(DepartureRange || (DepartureRange = {}));
 
-var formatPrice = function (price, currencyCode, locale) {
+var formatPrice$1 = function (price, currencyCode, locale) {
   if (locale === void 0) {
     locale = 'nl-BE';
   }
@@ -6860,7 +6860,7 @@ function getLocale(code) {
   }
 }
 var getPriceDifferenceText = function (price, currencyCode) {
-  return price > 0 ? '+ '.concat(formatPrice(Math.abs(price), currencyCode)) : '- '.concat(formatPrice(Math.abs(price), currencyCode));
+  return price > 0 ? '+ '.concat(formatPrice$1(Math.abs(price), currencyCode)) : '- '.concat(formatPrice$1(Math.abs(price), currencyCode));
 };
 function format(text, args) {
   return text.replace(/{([0-9]+)}/g, function (match, index) {
@@ -13584,16 +13584,16 @@ var formatPriceByMode = function (price, priceMode, personCount, duration, perPe
   if (!price) return '';
   switch (priceMode) {
     case 0:
-      return ''.concat(formatPrice(price, currencyCode));
+      return ''.concat(formatPrice$1(price, currencyCode));
     case 1:
       var perPersonPrice = price / personCount;
-      return ''.concat(formatPrice(perPersonPrice, currencyCode), ' / ').concat(perPersonLabel);
+      return ''.concat(formatPrice$1(perPersonPrice, currencyCode), ' / ').concat(perPersonLabel);
     case 2:
       var perNightPrice = price / duration;
-      return ''.concat(formatPrice(perNightPrice, currencyCode), ' / ').concat(perNightLabel);
+      return ''.concat(formatPrice$1(perNightPrice, currencyCode), ' / ').concat(perNightLabel);
     case 3:
       var perPersonPerNightPrice = price / duration;
-      return ''.concat(formatPrice(perPersonPerNightPrice, currencyCode), ' / ').concat(perPersonPerNightLabel);
+      return ''.concat(formatPrice$1(perPersonPerNightPrice, currencyCode), ' / ').concat(perPersonPerNightLabel);
   }
 };
 
@@ -22000,7 +22000,7 @@ var NoneOption = function (_a) {
     return x.requirementType === 2;
   });
   var noneSelected = !selectedOption;
-  var priceDifferencetext = selectedOption ? '- '.concat(formatPrice(Math.abs(selectedOption.line.price), currencyCode)) : '';
+  var priceDifferencetext = selectedOption ? '- '.concat(formatPrice$1(Math.abs(selectedOption.line.price), currencyCode)) : '';
   return React__default.createElement(
     React__default.Fragment,
     null,
@@ -23273,7 +23273,7 @@ var OptionRoom = function (_a) {
     e.preventDefault();
   };
   var getPriceDifferenceText = function (price) {
-    return price > 0 ? '+ '.concat(formatPrice(Math.abs(price), currencyCode)) : '- '.concat(formatPrice(Math.abs(price), currencyCode));
+    return price > 0 ? '+ '.concat(formatPrice$1(Math.abs(price), currencyCode)) : '- '.concat(formatPrice$1(Math.abs(price), currencyCode));
   };
   var getAccommodationPriceDifference = function (accommodation) {
     var _a;
@@ -24793,7 +24793,7 @@ var Sidebar = function (_a) {
                           { className: 'pricing-summary__property' },
                           React__default.createElement('h6', { className: 'pricing-summary__title' }, translations.SIDEBAR.BASE_PRICE)
                         ),
-                        React__default.createElement('div', { className: 'pricing-summary__value' }, formatPrice(basePrice, currencyCode))
+                        React__default.createElement('div', { className: 'pricing-summary__value' }, formatPrice$1(basePrice, currencyCode))
                       ),
                       basePricePerPaxType &&
                         basePricePerPaxType.map(function (ppt, index) {
@@ -24810,7 +24810,7 @@ var Sidebar = function (_a) {
                                 ' ',
                                 getPaxTypeTranslation(translations, ppt.paxType, ppt.numberOfPax)
                               ),
-                              React__default.createElement('div', { className: 'pricing-summary__value' }, formatPrice(ppt.pricePerPaxType, currencyCode))
+                              React__default.createElement('div', { className: 'pricing-summary__value' }, formatPrice$1(ppt.pricePerPaxType, currencyCode))
                             ),
                             ppt.details.map(function (detail, dIndex) {
                               return React__default.createElement(
@@ -24823,7 +24823,7 @@ var Sidebar = function (_a) {
                                 React__default.createElement(
                                   'div',
                                   { className: 'pricing-summary__value' },
-                                  formatPrice(detail.price / detail.numberOfPax, currencyCode)
+                                  formatPrice$1(detail.price / detail.numberOfPax, currencyCode)
                                 )
                               );
                             })
@@ -24850,7 +24850,7 @@ var Sidebar = function (_a) {
                                   React__default.createElement(
                                     'div',
                                     { className: 'pricing-summary__value' },
-                                    formatPrice(priceDetail.price * priceDetail.amount, currencyCode)
+                                    formatPrice$1(priceDetail.price * priceDetail.amount, currencyCode)
                                   )
                               ),
                               React__default.createElement(
@@ -24885,7 +24885,7 @@ var Sidebar = function (_a) {
                                   React__default.createElement(
                                     'div',
                                     { className: 'pricing-summary__value' },
-                                    formatPrice(priceDetail.price * priceDetail.amount, currencyCode)
+                                    formatPrice$1(priceDetail.price * priceDetail.amount, currencyCode)
                                   )
                               ),
                               React__default.createElement(
@@ -24915,7 +24915,7 @@ var Sidebar = function (_a) {
                                       React__default.createElement(
                                         'div',
                                         { className: 'pricing-summary__value' },
-                                        formatPrice(ppt.pricePerPaxType, currencyCode)
+                                        formatPrice$1(ppt.pricePerPaxType, currencyCode)
                                       )
                                     ),
                                     ppt.details.map(function (detail, dIndex) {
@@ -24935,7 +24935,7 @@ var Sidebar = function (_a) {
                                         React__default.createElement(
                                           'div',
                                           { className: 'pricing-summary__value' },
-                                          formatPrice(detail.price / detail.numberOfPax, currencyCode)
+                                          formatPrice$1(detail.price / detail.numberOfPax, currencyCode)
                                         )
                                       );
                                     })
@@ -24977,7 +24977,7 @@ var Sidebar = function (_a) {
                         React__default.createElement(
                           'div',
                           { className: 'pricing' },
-                          React__default.createElement('div', { className: 'pricing__price' }, formatPrice(totalPrice, currencyCode))
+                          React__default.createElement('div', { className: 'pricing__price' }, formatPrice$1(totalPrice, currencyCode))
                         )
                       )
                     ),
@@ -24995,7 +24995,7 @@ var Sidebar = function (_a) {
                       React__default.createElement(
                         'div',
                         { className: 'pricing' },
-                        React__default.createElement('div', { className: 'pricing__price' }, formatPrice(deposit, currencyCode))
+                        React__default.createElement('div', { className: 'pricing__price' }, formatPrice$1(deposit, currencyCode))
                       )
                     )
                   ),
@@ -25011,7 +25011,7 @@ var Sidebar = function (_a) {
                         translations.SIDEBAR.DEPOSIT_TEXT1,
                         React__default.createElement('strong', null, translations.SIDEBAR.DEPOSIT_TEXT2),
                         translations.SIDEBAR.DEPOSIT_TEXT3,
-                        formatPrice(remainingAmount, currencyCode),
+                        formatPrice$1(remainingAmount, currencyCode),
                         translations.SIDEBAR.DEPOSIT_TEXT4,
                         React__default.createElement('strong', null, translations.SIDEBAR.DEPOSIT_TEXT5),
                         translations.SIDEBAR.DEPOSIT_TEXT6
@@ -25038,7 +25038,7 @@ var Sidebar = function (_a) {
                         React__default.createElement(
                           'div',
                           { className: 'pricing' },
-                          React__default.createElement('div', { className: 'pricing__price' }, formatPrice(totalPrice, currencyCode))
+                          React__default.createElement('div', { className: 'pricing__price' }, formatPrice$1(totalPrice, currencyCode))
                         )
                       )
                     )
@@ -29830,6 +29830,7 @@ var Navbar = function (_a) {
   var _b;
   var currentPath = _a.currentPath,
     logo = _a.logo,
+    onLogoClick = _a.onLogoClick,
     topLinks = _a.topLinks,
     items = _a.items,
     language = _a.language,
@@ -30122,7 +30123,7 @@ var Navbar = function (_a) {
       React__default.createElement(
         'div',
         { className: 'nav__container' },
-        React__default.createElement('div', { className: 'nav__logo' }, logo),
+        React__default.createElement('div', { className: 'nav__logo', onClick: onLogoClick }, logo),
         React__default.createElement(
           'div',
           { className: 'nav__wrapper' },
@@ -30368,6 +30369,7 @@ var defaultPayments = [
 var Footer = function (_a) {
   var className = _a.className,
     logo = _a.logo,
+    onLogoClick = _a.onLogoClick,
     _b = _a.social,
     social = _b === void 0 ? defaultSocial : _b,
     _c = _a.columns,
@@ -30387,7 +30389,7 @@ var Footer = function (_a) {
         { className: 'footer__top' },
         React__default.createElement(
           'div',
-          { className: 'footer__logo' },
+          { className: 'footer__logo', onClick: onLogoClick },
           logo !== null && logo !== void 0 ? logo : React__default.createElement(DefaultLogo, null)
         ),
         React__default.createElement(
@@ -32921,16 +32923,16 @@ var ItemPicker$1 = function (_a) {
     label = _a.label,
     placeholder = _a.placeholder,
     classModifier = _a.classModifier,
+    valueFormatter = _a.valueFormatter,
     onPick = _a.onPick;
-  var dispatch = useDispatch();
   var _b = useState(false),
     isDropdownOpen = _b[0],
     setIsDropdownOpen = _b[1];
   var dropdownRef = useRef(null);
   var toggleButtonRef = useRef(null);
-  var handlePick = function (picked) {
+  var handlePick = function (picked, id) {
     setIsDropdownOpen(false);
-    dispatch(onPick(picked));
+    onPick(picked, id);
   };
   useEffect(function () {
     var handleClickOutside = function (event) {
@@ -32969,20 +32971,21 @@ var ItemPicker$1 = function (_a) {
           'ul',
           { className: 'dropdown-menu' },
           items.map(function (_a) {
-            var label = _a.label,
+            var id = _a.id,
+              label = _a.label,
               icon = _a.icon;
             return React__default.createElement(
               'li',
               {
                 key: label,
                 onClick: function (e) {
-                  handlePick(label);
+                  handlePick(label, id);
                   e.stopPropagation();
                 },
                 className: 'dropdown-menu__item'.concat(selection === label ? ' dropdown-menu__item--selected' : '')
               },
               icon && React__default.createElement('span', { className: 'travel-class-icon' }, icon),
-              label
+              valueFormatter ? valueFormatter(id, label) : label
             );
           })
         )
@@ -32999,13 +33002,16 @@ var TravelClassPicker = function () {
   var selectedTravelClass = useSelector(function (state) {
     return state.qsm;
   }).selectedTravelClass;
+  var dispatch = useDispatch();
   return React__default.createElement(ItemPicker$1, {
     items: travelClasses,
     selection: selectedTravelClass,
     label: translations.QSM.TRAVEL_CLASS_LABEL,
     placeholder: translations.QSM.TRAVEL_CLASS_PLACEHOLDER,
     classModifier: 'travel-class-picker__items',
-    onPick: setSelectedTravelClass
+    onPick: function (picked) {
+      return dispatch(setSelectedTravelClass(picked));
+    }
   });
 };
 
@@ -33018,13 +33024,16 @@ var TravelTypePicker = function () {
   var selectedTravelType = useSelector(function (state) {
     return state.qsm;
   }).selectedTravelType;
+  var dispatch = useDispatch();
   return React__default.createElement(ItemPicker$1, {
     items: travelTypes,
     selection: selectedTravelType,
     label: translations.QSM.TRAVEL_TYPE_LABEL,
     placeholder: translations.QSM.TRAVEL_TYPE_PLACEHOLDER,
     classModifier: 'travel-type-picker__items',
-    onPick: setSelectedTravelType
+    onPick: function (picked) {
+      return dispatch(setSelectedTravelType(picked));
+    }
   });
 };
 
@@ -33037,13 +33046,16 @@ var TravelNationalityPicker = function () {
   var selectedNationality = useSelector(function (state) {
     return state.qsm;
   }).selectedNationality;
+  var dispatch = useDispatch();
   return React__default.createElement(ItemPicker$1, {
     items: nationalities,
     selection: selectedNationality,
     label: translations.QSM.NATIONALITY_LABEL,
     placeholder: translations.QSM.NATIONALITY_PLACEHOLDER,
     classModifier: 'travel-class-picker__items',
-    onPick: setSelectedNationality
+    onPick: function (picked) {
+      return dispatch(setSelectedNationality(picked));
+    }
   });
 };
 
@@ -33525,6 +33537,7 @@ var initialState$1 = {
   selectedSearchResultId: null,
   packagingAccoResults: [],
   filteredPackagingAccoResults: [],
+  packagingAccoSearchDetails: [],
   selectedPackagingAccoResultCode: null,
   selectedFlight: null,
   selectedFlightDetails: null,
@@ -33556,6 +33569,9 @@ var searchResultsSlice = createSlice({
     setFilteredPackagingAccoResults: function (state, action) {
       state.filteredPackagingAccoResults = action.payload;
     },
+    setPackagingAccoSearchDetails: function (state, action) {
+      state.packagingAccoSearchDetails = action.payload;
+    },
     setSelectedPackagingAccoResult: function (state, action) {
       state.selectedPackagingAccoResultCode = action.payload;
     },
@@ -33627,6 +33643,7 @@ var setResults = ((_a = searchResultsSlice.actions), _a.setResults),
   setSelectedSearchResult = _a.setSelectedSearchResult,
   setPackagingAccoResults = _a.setPackagingAccoResults,
   setFilteredPackagingAccoResults = _a.setFilteredPackagingAccoResults,
+  setPackagingAccoSearchDetails = _a.setPackagingAccoSearchDetails,
   setSelectedPackagingAccoResult = _a.setSelectedPackagingAccoResult,
   setSelectedFlight = _a.setSelectedFlight,
   setSelectedFlightDetails = _a.setSelectedFlightDetails,
@@ -34823,7 +34840,7 @@ var Itinerary = function (_a) {
                   React__default.createElement(
                     'h3',
                     { className: 'search__filter__prices--amount' },
-                    formatPrice(
+                    formatPrice$1(
                       ((entry === null || entry === void 0 ? void 0 : entry.sellingPrice) || 0) /
                         ((entry === null || entry === void 0 ? void 0 : entry.numberOfPax) || 1),
                       (entry === null || entry === void 0 ? void 0 : entry.currencyCode) || 'EUR'
@@ -34837,7 +34854,7 @@ var Itinerary = function (_a) {
                       'strong',
                       null,
                       '(',
-                      formatPrice(
+                      formatPrice$1(
                         (entry === null || entry === void 0 ? void 0 : entry.sellingPrice) || 0,
                         (entry === null || entry === void 0 ? void 0 : entry.currencyCode) || 'EUR'
                       ),
@@ -37872,295 +37889,441 @@ var FlightsFlyIn = function (_a) {
   );
 };
 
-var travelClasses = [
-  { id: 1, label: 'Standard Room' },
-  { id: 2, label: 'Deluxe Balcony Room' },
-  { id: 3, label: 'Superior Room' },
-  { id: 4, label: 'Family Room' },
-  { id: 5, label: 'Suite' }
-];
+var formatPrice = function (price, currencyCode) {
+  if (currencyCode === void 0) {
+    currencyCode = 'EUR';
+  }
+  if (typeof price !== 'number') return '';
+  return new Intl.NumberFormat('nl-BE', {
+    style: 'currency',
+    currency: currencyCode
+  }).format(price);
+};
 var AccommodationFlyIn = function (_a) {
   var _b;
   _a.isLoading;
   var isOpen = _a.isOpen,
     setIsOpen = _a.setIsOpen;
+  var dispatch = useDispatch();
   var context = useContext(SearchResultsConfigurationContext);
   var language = (_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB';
   var translations = getTranslations(language);
-  useSelector(function (state) {
-    return state.searchResults;
-  }).selectedSearchResultId;
-  var _c = useState('Standard Room'),
-    selectedTravelClass = _c[0],
-    setSelectedTravelClass = _c[1];
+  var _c = useSelector(function (state) {
+      return state.searchResults;
+    }),
+    packagingAccoSearchDetails = _c.packagingAccoSearchDetails,
+    selectedPackagingAccoResultCode = _c.selectedPackagingAccoResultCode;
+  var selectedPackagingAccoSearchDetails = useMemo(
+    function () {
+      return packagingAccoSearchDetails === null || packagingAccoSearchDetails === void 0
+        ? void 0
+        : packagingAccoSearchDetails.find(function (x) {
+            return x.code === selectedPackagingAccoResultCode;
+          });
+    },
+    [packagingAccoSearchDetails, selectedPackagingAccoResultCode]
+  );
+  var groupedRooms = useMemo(
+    function () {
+      if (!(selectedPackagingAccoSearchDetails === null || selectedPackagingAccoSearchDetails === void 0 ? void 0 : selectedPackagingAccoSearchDetails.rooms))
+        return [];
+      return selectedPackagingAccoSearchDetails.rooms.map(function (room) {
+        var groupedMap = new Map();
+        room.options.forEach(function (option) {
+          var _a;
+          var key = option.accommodationCode;
+          if (!groupedMap.has(key)) {
+            groupedMap.set(key, {
+              accommodationCode: option.accommodationCode,
+              accommodationName: option.accommodationName,
+              regimes: []
+            });
+          }
+          (_a = groupedMap.get(key)) === null || _a === void 0
+            ? void 0
+            : _a.regimes.push({
+                id: option.guid,
+                label: option.regimeName
+              });
+        });
+        return Array.from(groupedMap.values());
+      });
+    },
+    [selectedPackagingAccoSearchDetails]
+  );
+  var getSelectedOptionForRoom = function (roomIndex) {
+    var _a, _b, _c;
+    return (_c =
+      (_b =
+        (_a =
+          selectedPackagingAccoSearchDetails === null || selectedPackagingAccoSearchDetails === void 0 ? void 0 : selectedPackagingAccoSearchDetails.rooms) ===
+          null || _a === void 0
+          ? void 0
+          : _a[roomIndex]) === null || _b === void 0
+        ? void 0
+        : _b.options) === null || _c === void 0
+      ? void 0
+      : _c.find(function (option) {
+          return option.isSelected;
+        });
+  };
+  var getSelectedOptionForAccommodation = function (roomIndex, accommodationCode) {
+    var _a, _b, _c;
+    return (_c =
+      (_b =
+        (_a =
+          selectedPackagingAccoSearchDetails === null || selectedPackagingAccoSearchDetails === void 0 ? void 0 : selectedPackagingAccoSearchDetails.rooms) ===
+          null || _a === void 0
+          ? void 0
+          : _a[roomIndex]) === null || _b === void 0
+        ? void 0
+        : _b.options) === null || _c === void 0
+      ? void 0
+      : _c.find(function (option) {
+          return option.accommodationCode === accommodationCode && option.isSelected;
+        });
+  };
+  var handlePick = function (roomIndex, selectedGuid) {
+    if (!packagingAccoSearchDetails || !selectedPackagingAccoSearchDetails) return;
+    var updatedPackagingAccoSearchDetails = packagingAccoSearchDetails.map(function (product) {
+      if (product.code !== selectedPackagingAccoSearchDetails.code) {
+        return product;
+      }
+      var updatedRooms = product.rooms.map(function (room, currentRoomIndex) {
+        if (currentRoomIndex !== roomIndex) {
+          return room;
+        }
+        return __assign(__assign({}, room), {
+          options: room.options.map(function (option) {
+            return __assign(__assign({}, option), { isSelected: option.guid === selectedGuid });
+          })
+        });
+      });
+      return __assign(__assign({}, product), { rooms: updatedRooms });
+    });
+    dispatch(setPackagingAccoSearchDetails(updatedPackagingAccoSearchDetails));
+  };
   var handleConfirm = function () {
     if (isOpen) {
       setIsOpen(false);
     }
   };
+  if (!selectedPackagingAccoSearchDetails) {
+    return null;
+  }
+  var calculateTotalPrice = function () {
+    var selectedOptions = selectedPackagingAccoSearchDetails.rooms.flatMap(function (room) {
+      return room.options.filter(function (option) {
+        return option.isSelected;
+      });
+    });
+    var totalPrice = selectedOptions.reduce(function (total, option) {
+      return total + (option.price || 0);
+    }, 0);
+    return formatPrice(totalPrice, selectedPackagingAccoSearchDetails.currencyCode);
+  };
+  var getPriceDifference = function (currentSelectedPrice, roomIndex, accommodationCode, regimeId) {
+    var targetPrice = 0;
+    var selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodationCode);
+    if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.price) {
+      targetPrice = selectedOption.price;
+    } else {
+      var firstOption = selectedPackagingAccoSearchDetails.rooms[roomIndex].options.find(function (option) {
+        return option.accommodationCode === accommodationCode;
+      });
+      targetPrice = (firstOption === null || firstOption === void 0 ? void 0 : firstOption.price) || 0;
+    }
+    if (regimeId) {
+      var regimeOption = selectedPackagingAccoSearchDetails.rooms[roomIndex].options.find(function (option) {
+        return option.guid === regimeId;
+      });
+      targetPrice = (regimeOption === null || regimeOption === void 0 ? void 0 : regimeOption.price) || 0;
+    }
+    return targetPrice - (currentSelectedPrice || 0);
+  };
+  var formatPriceDifference = function (difference, currencyCode) {
+    if (difference === 0) {
+      return null;
+    }
+    var formattedAbsoluteValue = formatPrice(Math.abs(difference), currencyCode);
+    return ''.concat(difference > 0 ? '+' : '-', ' ').concat(formattedAbsoluteValue);
+  };
+  var getPriceDifferenceClassName = function (difference) {
+    if (difference < 0) {
+      return 'flyin__acco__price flyin__acco__price--decrease';
+    }
+    if (difference > 0) {
+      return 'flyin__acco__price flyin__acco__price--increase';
+    }
+    return 'flyin__acco__price';
+  };
+  var regimeFormatter = function (roomIndex, accommodation, regimeId, label) {
+    var roomOption = getSelectedOptionForRoom(roomIndex);
+    var difference = getPriceDifference(
+      roomOption === null || roomOption === void 0 ? void 0 : roomOption.price,
+      roomIndex,
+      accommodation.accommodationCode,
+      regimeId
+    );
+    return ''
+      .concat(label, ' ')
+      .concat(difference !== 0 ? '('.concat(formatPriceDifference(difference, selectedPackagingAccoSearchDetails.currencyCode), ')') : '');
+  };
   return React__default.createElement(
     React__default.Fragment,
     null,
     React__default.createElement(
       'div',
       { className: 'flyin__content' },
-      React__default.createElement(
-        'div',
-        { className: 'flyin__acco' },
-        React__default.createElement(
+      groupedRooms.map(function (roomAccommodations, roomIndex) {
+        var selectedRoomOption = getSelectedOptionForRoom(roomIndex);
+        return React__default.createElement(
           'div',
-          { className: 'flyin__acco__cards' },
+          { className: 'flyin__acco', key: 'room-'.concat(roomIndex) },
+          React__default.createElement('h3', { className: 'flyin__acco__room-title' }, 'Room ', roomIndex + 1),
           React__default.createElement(
             'div',
-            { className: 'flyin__acco__card' },
-            React__default.createElement(
-              'div',
-              { className: 'flyin__acco__img__wrapper' },
-              React__default.createElement('img', {
-                src: 'https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg',
-                alt: 'river',
-                className: 'flyin__acco__img'
-              }),
-              React__default.createElement(
-                'div',
-                { className: 'flyin__acco__price__wrapper' },
-                React__default.createElement(
-                  'span',
-                  { className: 'flyin__acco__price__label' },
-                  translations === null || translations === void 0 ? void 0 : translations.SHARED.TOTAL_PRICE
-                ),
-                React__default.createElement('span', { className: 'flyin__acco__price flyin__acco__price--increase' }, '+1.764,00')
-              )
-            ),
-            React__default.createElement(
-              'div',
-              { className: 'flyin__acco__content' },
-              React__default.createElement(
-                'div',
-                { className: 'flyin__acco__header' },
-                React__default.createElement('h4', { className: 'flyin__acco__title' }, 'Deluxe Balcony Room'),
-                React__default.createElement(
-                  'div',
-                  { className: 'flyin__acco__usps' },
-                  React__default.createElement(
-                    'div',
-                    { className: 'flyin__acco__usp' },
-                    React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
-                    React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Sea sight')
-                  ),
-                  React__default.createElement(
-                    'div',
-                    { className: 'flyin__acco__usp' },
-                    React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
-                    React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Free wifi')
-                  ),
-                  React__default.createElement(
-                    'div',
-                    { className: 'flyin__acco__usp' },
-                    React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
-                    React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Breakfast included')
-                  ),
-                  React__default.createElement(
-                    'div',
-                    { className: 'flyin__acco__usp' },
-                    React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
-                    React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Air conditioning')
-                  ),
-                  React__default.createElement(
-                    'div',
-                    { className: 'flyin__acco__usp' },
-                    React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
-                    React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Private bathroom')
-                  )
-                )
-              )
-            ),
-            React__default.createElement(
-              'div',
-              { className: 'flyin__acco__footer' },
-              React__default.createElement(ItemPicker$1, {
-                items: travelClasses,
-                selection: selectedTravelClass,
-                label: ' ',
-                placeholder: translations.QSM.TRAVEL_CLASS_PLACEHOLDER,
-                classModifier: 'travel-class-picker__items',
-                onPick: setSelectedTravelClass
-              }),
-              React__default.createElement(
-                'button',
-                { className: 'cta cta--select' },
-                translations === null || translations === void 0 ? void 0 : translations.SHARED.SELECT
-              )
-            )
-          ),
-          React__default.createElement(
-            'div',
-            { className: 'flyin__acco__card' },
-            React__default.createElement(
-              'div',
-              { className: 'flyin__acco__img__wrapper' },
-              React__default.createElement('img', {
-                src: 'https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg',
-                alt: 'river',
-                className: 'flyin__acco__img'
-              }),
-              React__default.createElement(
-                'div',
-                { className: 'flyin__acco__price__wrapper' },
-                React__default.createElement(
-                  'span',
-                  { className: 'flyin__acco__price__label' },
-                  translations === null || translations === void 0 ? void 0 : translations.SHARED.TOTAL_PRICE
-                ),
-                React__default.createElement('span', { className: 'flyin__acco__price flyin__acco__price--increase' }, '+1.764,00')
-              )
-            ),
-            React__default.createElement(
-              'div',
-              { className: 'flyin__acco__content' },
-              React__default.createElement(
+            { className: 'flyin__acco__cards' },
+            roomAccommodations.map(function (accommodation) {
+              var selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodation.accommodationCode);
+              var priceDifference = getPriceDifference(
+                selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.price,
+                roomIndex,
+                accommodation.accommodationCode
+              );
+              return React__default.createElement(
                 'div',
-                { className: 'flyin__acco__header' },
-                React__default.createElement('h4', { className: 'flyin__acco__title' }, 'Standard Room'),
+                { className: 'flyin__acco__card', key: ''.concat(roomIndex, '-').concat(accommodation.accommodationCode) },
                 React__default.createElement(
                   'div',
-                  { className: 'flyin__acco__usps' },
-                  React__default.createElement(
-                    'div',
-                    { className: 'flyin__acco__usp' },
-                    React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
-                    React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Garden view')
-                  ),
-                  React__default.createElement(
-                    'div',
-                    { className: 'flyin__acco__usp' },
-                    React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
-                    React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Free wifi')
-                  ),
-                  React__default.createElement(
-                    'div',
-                    { className: 'flyin__acco__usp' },
-                    React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
-                    React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Double bed')
-                  )
-                )
-              )
-            ),
-            React__default.createElement(
-              'div',
-              { className: 'flyin__acco__footer' },
-              React__default.createElement(ItemPicker$1, {
-                items: travelClasses,
-                selection: selectedTravelClass,
-                label: ' ',
-                placeholder: translations.QSM.TRAVEL_CLASS_PLACEHOLDER,
-                classModifier: 'travel-class-picker__items',
-                onPick: setSelectedTravelClass
-              }),
-              React__default.createElement(
-                'button',
-                { className: 'cta cta--select' },
-                translations === null || translations === void 0 ? void 0 : translations.SHARED.SELECT
-              )
-            )
-          ),
-          React__default.createElement(
-            'div',
-            { className: 'flyin__acco__card' },
-            React__default.createElement(
-              'div',
-              { className: 'flyin__acco__img__wrapper' },
-              React__default.createElement('img', {
-                src: 'https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg',
-                alt: 'river',
-                className: 'flyin__acco__img'
-              }),
-              React__default.createElement(
-                'div',
-                { className: 'flyin__acco__price__wrapper' },
-                React__default.createElement(
-                  'span',
-                  { className: 'flyin__acco__price__label' },
-                  translations === null || translations === void 0 ? void 0 : translations.SHARED.TOTAL_PRICE
+                  { className: 'flyin__acco__content' },
+                  React__default.createElement('h4', { className: 'flyin__acco__title' }, accommodation.accommodationName)
                 ),
-                React__default.createElement('span', { className: 'flyin__acco__price flyin__acco__price--increase' }, '+1.764,00')
-              )
-            ),
-            React__default.createElement(
-              'div',
-              { className: 'flyin__acco__content' },
-              React__default.createElement(
-                'div',
-                { className: 'flyin__acco__header' },
-                React__default.createElement('h4', { className: 'flyin__acco__title' }, 'Suite'),
                 React__default.createElement(
                   'div',
-                  { className: 'flyin__acco__usps' },
-                  React__default.createElement(
-                    'div',
-                    { className: 'flyin__acco__usp' },
-                    React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
-                    React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Sea sight')
-                  ),
-                  React__default.createElement(
-                    'div',
-                    { className: 'flyin__acco__usp' },
-                    React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
-                    React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Free wifi')
-                  ),
-                  React__default.createElement(
-                    'div',
-                    { className: 'flyin__acco__usp' },
-                    React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
-                    React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Breakfast included')
-                  ),
-                  React__default.createElement(
-                    'div',
-                    { className: 'flyin__acco__usp' },
-                    React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
-                    React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Jacuzzi')
-                  ),
+                  { className: 'flyin__acco__footer' },
+                  React__default.createElement(ItemPicker$1, {
+                    items: accommodation.regimes,
+                    selection: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.regimeName,
+                    label: '',
+                    placeholder: 'Select regime',
+                    classModifier: '',
+                    onPick: function (selected, selectedGuid) {
+                      return handlePick(roomIndex, selectedGuid);
+                    },
+                    valueFormatter: function (id, label) {
+                      return regimeFormatter(roomIndex, accommodation, id, label);
+                    }
+                  }),
                   React__default.createElement(
                     'div',
-                    { className: 'flyin__acco__usp' },
-                    React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
-                    React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Private terrace')
+                    { className: 'flyin__acco__footer__actions' },
+                    React__default.createElement(
+                      'button',
+                      {
+                        className:
+                          (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ==
+                          accommodation.accommodationCode
+                            ? 'cta cta--select cta--selected'
+                            : 'cta cta--select',
+                        onClick: function () {
+                          var _a;
+                          handlePick(
+                            roomIndex,
+                            selectedOption ? selectedOption.guid : (_a = first(accommodation.regimes)) === null || _a === void 0 ? void 0 : _a.id
+                          );
+                        }
+                      },
+                      (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ==
+                        accommodation.accommodationCode
+                        ? translations === null || translations === void 0
+                          ? void 0
+                          : translations.SHARED.SELECTED
+                        : translations === null || translations === void 0
+                        ? void 0
+                        : translations.SHARED.SELECT
+                    ),
+                    React__default.createElement(
+                      'div',
+                      { className: 'flyin__acco__price__wrapper' },
+                      React__default.createElement(
+                        'span',
+                        { className: getPriceDifferenceClassName(priceDifference) },
+                        formatPriceDifference(priceDifference, selectedPackagingAccoSearchDetails.currencyCode)
+                      )
+                    )
                   )
                 )
-              )
-            ),
-            React__default.createElement(
-              'div',
-              { className: 'flyin__acco__footer' },
-              React__default.createElement(ItemPicker$1, {
-                items: travelClasses,
-                selection: selectedTravelClass,
-                label: ' ',
-                placeholder: translations.QSM.TRAVEL_CLASS_PLACEHOLDER,
-                classModifier: 'travel-class-picker__items',
-                onPick: setSelectedTravelClass
-              }),
-              React__default.createElement(
-                'button',
-                { className: 'cta cta--select' },
-                translations === null || translations === void 0 ? void 0 : translations.SHARED.SELECT
-              )
-            )
+              );
+            })
           )
-        )
-      )
+        );
+      })
     ),
     React__default.createElement(
       'div',
       { className: 'flyin__footer' },
-      React__default.createElement('div', { className: 'flyin__footer__price' }, 'Total price: \u20AC'),
+      React__default.createElement('div', { className: 'flyin__footer__price' }, 'Total price: ', calculateTotalPrice()),
       React__default.createElement(
         'div',
         { className: 'flyin__button-wrapper' },
-        React__default.createElement('button', { className: 'cta cta--select', onClick: handleConfirm }, 'Toevoegen')
+        React__default.createElement('button', { className: 'cta cta--select', onClick: handleConfirm }, translations.PRODUCT.BOOK_NOW)
       )
     )
   );
+  // Slicing with image and usps, not available in the current API response.
+  // <>
+  //   <div className="flyin__content">
+  //     <div className="flyin__acco">
+  //       <div className="flyin__acco__cards">
+  //         <div className="flyin__acco__card">
+  //           <div className="flyin__acco__img__wrapper">
+  //             <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="flyin__acco__img" />
+  //             <div className="flyin__acco__price__wrapper">
+  //               <span className="flyin__acco__price__label">{translations?.SHARED.TOTAL_PRICE}</span>
+  //               <span className="flyin__acco__price flyin__acco__price--increase">+1.764,00</span>
+  //             </div>
+  //           </div>
+  //           <div className="flyin__acco__content">
+  //             <div className="flyin__acco__header">
+  //               <h4 className="flyin__acco__title">Deluxe Balcony Room</h4>
+  //               <div className="flyin__acco__usps">
+  //                 <div className="flyin__acco__usp">
+  //                   <Icon name="ui-check" width={16} />
+  //                   <span className="flyin__acco__usp__text">Sea sight</span>
+  //                 </div>
+  //                 <div className="flyin__acco__usp">
+  //                   <Icon name="ui-check" width={16} />
+  //                   <span className="flyin__acco__usp__text">Free wifi</span>
+  //                 </div>
+  //                 <div className="flyin__acco__usp">
+  //                   <Icon name="ui-check" width={16} />
+  //                   <span className="flyin__acco__usp__text">Breakfast included</span>
+  //                 </div>
+  //                 <div className="flyin__acco__usp">
+  //                   <Icon name="ui-check" width={16} />
+  //                   <span className="flyin__acco__usp__text">Air conditioning</span>
+  //                 </div>
+  //                 <div className="flyin__acco__usp">
+  //                   <Icon name="ui-check" width={16} />
+  //                   <span className="flyin__acco__usp__text">Private bathroom</span>
+  //                 </div>
+  //               </div>
+  //             </div>
+  //           </div>
+  //           <div className="flyin__acco__footer">
+  //             <ItemPicker
+  //               items={travelClasses}
+  //               selection={selectedTravelClass}
+  //               label=" "
+  //               placeholder={translations.QSM.TRAVEL_CLASS_PLACEHOLDER}
+  //               classModifier="travel-class-picker__items"
+  //               onPick={(item) => setSelectedTravelClass(item)}
+  //             />
+  //             <button className="cta cta--select">{translations?.SHARED.SELECT}</button>
+  //           </div>
+  //         </div>
+  //         <div className="flyin__acco__card">
+  //           <div className="flyin__acco__img__wrapper">
+  //             <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="flyin__acco__img" />
+  //             <div className="flyin__acco__price__wrapper">
+  //               <span className="flyin__acco__price__label">{translations?.SHARED.TOTAL_PRICE}</span>
+  //               <span className="flyin__acco__price flyin__acco__price--increase">+1.764,00</span>
+  //             </div>
+  //           </div>
+  //           <div className="flyin__acco__content">
+  //             <div className="flyin__acco__header">
+  //               <h4 className="flyin__acco__title">Standard Room</h4>
+  //               <div className="flyin__acco__usps">
+  //                 <div className="flyin__acco__usp">
+  //                   <Icon name="ui-check" width={16} />
+  //                   <span className="flyin__acco__usp__text">Garden view</span>
+  //                 </div>
+  //                 <div className="flyin__acco__usp">
+  //                   <Icon name="ui-check" width={16} />
+  //                   <span className="flyin__acco__usp__text">Free wifi</span>
+  //                 </div>
+  //                 <div className="flyin__acco__usp">
+  //                   <Icon name="ui-check" width={16} />
+  //                   <span className="flyin__acco__usp__text">Double bed</span>
+  //                 </div>
+  //               </div>
+  //             </div>
+  //           </div>
+  //           <div className="flyin__acco__footer">
+  //             <ItemPicker
+  //               items={travelClasses}
+  //               selection={selectedTravelClass}
+  //               label=" "
+  //               placeholder={translations.QSM.TRAVEL_CLASS_PLACEHOLDER}
+  //               classModifier="travel-class-picker__items"
+  //               onPick={setSelectedTravelClass}
+  //             />
+  //             <button className="cta cta--select">{translations?.SHARED.SELECT}</button>
+  //           </div>
+  //         </div>
+  //         <div className="flyin__acco__card">
+  //           <div className="flyin__acco__img__wrapper">
+  //             <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="flyin__acco__img" />
+  //             <div className="flyin__acco__price__wrapper">
+  //               <span className="flyin__acco__price__label">{translations?.SHARED.TOTAL_PRICE}</span>
+  //               <span className="flyin__acco__price flyin__acco__price--increase">+1.764,00</span>
+  //             </div>
+  //           </div>
+  //           <div className="flyin__acco__content">
+  //             <div className="flyin__acco__header">
+  //               <h4 className="flyin__acco__title">Suite</h4>
+  //               <div className="flyin__acco__usps">
+  //                 <div className="flyin__acco__usp">
+  //                   <Icon name="ui-check" width={16} />
+  //                   <span className="flyin__acco__usp__text">Sea sight</span>
+  //                 </div>
+  //                 <div className="flyin__acco__usp">
+  //                   <Icon name="ui-check" width={16} />
+  //                   <span className="flyin__acco__usp__text">Free wifi</span>
+  //                 </div>
+  //                 <div className="flyin__acco__usp">
+  //                   <Icon name="ui-check" width={16} />
+  //                   <span className="flyin__acco__usp__text">Breakfast included</span>
+  //                 </div>
+  //                 <div className="flyin__acco__usp">
+  //                   <Icon name="ui-check" width={16} />
+  //                   <span className="flyin__acco__usp__text">Jacuzzi</span>
+  //                 </div>
+  //                 <div className="flyin__acco__usp">
+  //                   <Icon name="ui-check" width={16} />
+  //                   <span className="flyin__acco__usp__text">Private terrace</span>
+  //                 </div>
+  //               </div>
+  //             </div>
+  //           </div>
+  //           <div className="flyin__acco__footer">
+  //             <ItemPicker
+  //               items={travelClasses}
+  //               selection={selectedTravelClass}
+  //               label=" "
+  //               placeholder={translations.QSM.TRAVEL_CLASS_PLACEHOLDER}
+  //               classModifier="travel-class-picker__items"
+  //               onPick={setSelectedTravelClass}
+  //             />
+  //             <button className="cta cta--select">{translations?.SHARED.SELECT}</button>
+  //           </div>
+  //         </div>
+  //       </div>
+  //     </div>
+  //     {/* {isLoading && (
+  //       <Spinner />
+  //     )} */}
+  //   </div>
+  //   <div className="flyin__footer">
+  //     <div className="flyin__footer__price">Total price: €</div>
+  //     <div className="flyin__button-wrapper">
+  //       <button className="cta cta--select" onClick={handleConfirm}>
+  //         Toevoegen
+  //       </button>
+  //     </div>
+  //   </div>
+  // </>
 };
 
 var FlyIn = function (_a) {
@@ -42557,7 +42720,7 @@ var getBaseHotelResult = function (searchResult, cmsItem, languageCode, translat
       searchResult.countryName,
       (_h = cmsItem === null || cmsItem === void 0 ? void 0 : cmsItem.parentItem) === null || _h === void 0 ? void 0 : _h.name
     ),
-    price: formatPrice(searchResult.price, searchResult.currencyCode, languageCode),
+    price: formatPrice$1(searchResult.price, searchResult.currencyCode, languageCode),
     ctaText: translations === null || translations === void 0 ? void 0 : translations.SRP.VIEW_DETAILS
   };
 };
@@ -43316,7 +43479,7 @@ var PairedFlightOption = function (_a) {
                   React__default.createElement(
                     'span',
                     { className: 'price' },
-                    formatPrice(
+                    formatPrice$1(
                       item.price,
                       'EUR',
                       (_c = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _c !== void 0 ? _c : 'en-GB'
@@ -45135,8 +45298,8 @@ var FlightFilters = function (_a) {
 };
 
 var selectionTypes = [
-  { id: 0, label: 'Independent Selection', code: 'independent' },
-  { id: 1, label: 'Paired Selection', code: 'paired' }
+  { id: 'independent', label: 'Independent Selection' },
+  { id: 'paired', label: 'Paired Selection' }
 ];
 var FlightResultsContainer = function (_a) {
   var _b, _c;
@@ -45261,7 +45424,7 @@ var FlightResultsContainer = function (_a) {
                   items: selectionTypes,
                   selection:
                     ((_c = selectionTypes.find(function (type) {
-                      return type.code === flightSelectionType;
+                      return type.id === flightSelectionType;
                     })) === null || _c === void 0
                       ? void 0
                       : _c.label) || undefined,
@@ -45278,7 +45441,7 @@ var FlightResultsContainer = function (_a) {
                         return type.label === value;
                       })) === null || _a === void 0
                         ? void 0
-                        : _a.code) || 'independent'
+                        : _a.id) || 'independent'
                     );
                   }
                 })
@@ -45676,7 +45839,7 @@ var GroupTourCard = function (_a) {
           React__default.createElement(
             'div',
             { className: 'search__result-card__allotment__price' },
-            formatPrice(result.price, result.currencyCode, languageCode),
+            formatPrice$1(result.price, result.currencyCode, languageCode),
             ' ',
             translations.PRODUCT.PER_PERSON
           )
@@ -46610,14 +46773,14 @@ var SearchResultsContainer = function () {
   // Seperate detailsCall
   useEffect(
     function () {
-      var fetchPackageDetails = function () {
+      var fetchDetails = function () {
         return __awaiter(void 0, void 0, void 0, function () {
           var config, selectedItem, params, entryId, requestRooms, rooms, detailsRequest, detailsResponse, detailsWLResponse, err_3;
           var _a, _b;
           return __generator(this, function (_c) {
             switch (_c.label) {
               case 0:
-                if ((!selectedSearchResultId && !selectedPackagingAccoResultCode) || !context) return [2 /*return*/];
+                if (!selectedSearchResultId || !context) return [2 /*return*/];
                 if (
                   (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.Accommodation ||
                   (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.GroupTour
@@ -46708,7 +46871,126 @@ var SearchResultsContainer = function () {
           });
         });
       };
-      fetchPackageDetails();
+      var fetchPackagingAccoSearchDetails = function () {
+        return __awaiter(void 0, void 0, void 0, function () {
+          var config,
+            selectedItem,
+            params,
+            rooms,
+            tagId,
+            agentId,
+            destinationAirport,
+            destinationId,
+            destinationIsCountry,
+            destinationIsRegion,
+            destinationIsOord,
+            destinationIsLocation,
+            destinationCode,
+            destinationIsAirport,
+            detailSearchRequest,
+            packageAccoSearchDetails,
+            err_4;
+          var _a, _b;
+          return __generator(this, function (_c) {
+            switch (_c.label) {
+              case 0:
+                if (!selectedPackagingAccoResultCode || !context) return [2 /*return*/];
+                if (
+                  (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.Accommodation ||
+                  (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.GroupTour
+                ) {
+                  handleFlyInToggle(true);
+                }
+                _c.label = 1;
+              case 1:
+                _c.trys.push([1, 3, , 4]);
+                config = {
+                  host: context.tideConnection.host,
+                  apiKey: context.tideConnection.apiKey
+                };
+                console.log('selectedPackagingAccoResultCode', selectedPackagingAccoResultCode);
+                selectedItem = packagingAccoResults.find(function (r) {
+                  return r.code === selectedPackagingAccoResultCode;
+                });
+                console.log('Selected packaging acco item', selectedItem);
+                if (!selectedItem) {
+                  // TODO: handle this case better, show an error message to the user
+                  return [2 /*return*/];
+                }
+                params = new URLSearchParams(location.search);
+                rooms = getRoomsFromParams(params, 'rooms');
+                tagId = getNumberFromParams(params, 'tagId');
+                agentId = getNumberFromParams(params, 'agentId');
+                destinationAirport = getStringFromParams(params, 'destinationAirport');
+                destinationId = null;
+                destinationIsCountry = false;
+                destinationIsRegion = false;
+                destinationIsOord = false;
+                destinationIsLocation = false;
+                destinationCode = null;
+                destinationIsAirport = false;
+                if (selectedItem.countryId) {
+                  destinationId = selectedItem.countryId;
+                  destinationIsCountry = true;
+                } else if (selectedItem.regionId) {
+                  destinationId = selectedItem.regionId;
+                  destinationIsRegion = true;
+                } else if (selectedItem.oordId) {
+                  destinationId = selectedItem.oordId;
+                  destinationIsOord = true;
+                } else if (selectedItem.locationId) {
+                  destinationId = selectedItem.locationId;
+                  destinationIsLocation = true;
+                } else if (destinationAirport) {
+                  destinationCode = destinationAirport;
+                  destinationIsAirport = true;
+                }
+                detailSearchRequest = {
+                  officeId: 1,
+                  portalId: context.portalId,
+                  agentId: agentId !== null && agentId !== void 0 ? agentId : null,
+                  catalogueId: (_a = context.searchConfiguration.defaultCatalogueId) !== null && _a !== void 0 ? _a : 0,
+                  searchConfigurationId: context.searchConfiguration.id,
+                  vendorConfigurationId: selectedItem.vendorId,
+                  language: (_b = context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB',
+                  serviceType: 3,
+                  fromDate: selectedItem.fromDate,
+                  toDate: selectedItem.toDate,
+                  destination: {
+                    id: Number(destinationId),
+                    isCountry: destinationIsCountry,
+                    isRegion: destinationIsRegion,
+                    isOord: destinationIsOord,
+                    isLocation: destinationIsLocation,
+                    isAirport: destinationIsAirport,
+                    code: destinationCode
+                  },
+                  productCode: selectedItem.code ? selectedItem.code : '',
+                  rooms: getPackagingRequestRooms(rooms),
+                  tagIds: tagId ? [tagId] : []
+                };
+                return [4 /*yield*/, build.searchPackagingAccommodations(config, detailSearchRequest)];
+              case 2:
+                packageAccoSearchDetails = _c.sent();
+                console.log('Packaging Acco Search details', packageAccoSearchDetails);
+                dispatch(setPackagingAccoSearchDetails(packageAccoSearchDetails));
+                return [3 /*break*/, 4];
+              case 3:
+                err_4 = _c.sent();
+                console.error('Failed to fetch package details', err_4);
+                return [3 /*break*/, 4];
+              case 4:
+                return [2 /*return*/];
+            }
+          });
+        });
+      };
+      if (selectedSearchResultId) {
+        fetchDetails();
+      }
+      if (selectedPackagingAccoResultCode) {
+        fetchPackagingAccoSearchDetails();
+      }
     },
     [selectedSearchResultId, selectedPackagingAccoResultCode]
   );