@qite/tide-booking-component 1.4.87 → 1.4.89

package/build/build-cjs/index.js

@@ -6721,7 +6721,7 @@ exports.DepartureRange = void 0;
   DepartureRange[(DepartureRange['Night'] = 3)] = 'Night';
 })(exports.DepartureRange || (exports.DepartureRange = {}));
 
-var formatPrice$1 = function (price, currencyCode, locale) {
+var formatPrice$2 = function (price, currencyCode, locale) {
   if (locale === void 0) {
     locale = 'nl-BE';
   }
@@ -6828,7 +6828,7 @@ function getLocale(code) {
   }
 }
 var getPriceDifferenceText = function (price, currencyCode) {
-  return price > 0 ? '+ '.concat(formatPrice$1(Math.abs(price), currencyCode)) : '- '.concat(formatPrice$1(Math.abs(price), currencyCode));
+  return price > 0 ? '+ '.concat(formatPrice$2(Math.abs(price), currencyCode)) : '- '.concat(formatPrice$2(Math.abs(price), currencyCode));
 };
 function format(text, args) {
   return text.replace(/{([0-9]+)}/g, function (match, index) {
@@ -13552,16 +13552,16 @@ var formatPriceByMode = function (price, priceMode, personCount, duration, perPe
   if (!price) return '';
   switch (priceMode) {
     case 0:
-      return ''.concat(formatPrice$1(price, currencyCode));
+      return ''.concat(formatPrice$2(price, currencyCode));
     case 1:
       var perPersonPrice = price / personCount;
-      return ''.concat(formatPrice$1(perPersonPrice, currencyCode), ' / ').concat(perPersonLabel);
+      return ''.concat(formatPrice$2(perPersonPrice, currencyCode), ' / ').concat(perPersonLabel);
     case 2:
       var perNightPrice = price / duration;
-      return ''.concat(formatPrice$1(perNightPrice, currencyCode), ' / ').concat(perNightLabel);
+      return ''.concat(formatPrice$2(perNightPrice, currencyCode), ' / ').concat(perNightLabel);
     case 3:
       var perPersonPerNightPrice = price / duration;
-      return ''.concat(formatPrice$1(perPersonPerNightPrice, currencyCode), ' / ').concat(perPersonPerNightLabel);
+      return ''.concat(formatPrice$2(perPersonPerNightPrice, currencyCode), ' / ').concat(perPersonPerNightLabel);
   }
 };
 
@@ -22039,7 +22039,7 @@ var NoneOption = function (_a) {
     return x.requirementType === 2;
   });
   var noneSelected = !selectedOption;
-  var priceDifferencetext = selectedOption ? '- '.concat(formatPrice$1(Math.abs(selectedOption.line.price), currencyCode)) : '';
+  var priceDifferencetext = selectedOption ? '- '.concat(formatPrice$2(Math.abs(selectedOption.line.price), currencyCode)) : '';
   return React__default['default'].createElement(
     React__default['default'].Fragment,
     null,
@@ -23316,7 +23316,7 @@ var OptionRoom = function (_a) {
     e.preventDefault();
   };
   var getPriceDifferenceText = function (price) {
-    return price > 0 ? '+ '.concat(formatPrice$1(Math.abs(price), currencyCode)) : '- '.concat(formatPrice$1(Math.abs(price), currencyCode));
+    return price > 0 ? '+ '.concat(formatPrice$2(Math.abs(price), currencyCode)) : '- '.concat(formatPrice$2(Math.abs(price), currencyCode));
   };
   var getAccommodationPriceDifference = function (accommodation) {
     var _a;
@@ -24847,7 +24847,7 @@ var Sidebar = function (_a) {
                           { className: 'pricing-summary__property' },
                           React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SIDEBAR.BASE_PRICE)
                         ),
-                        React__default['default'].createElement('div', { className: 'pricing-summary__value' }, formatPrice$1(basePrice, currencyCode))
+                        React__default['default'].createElement('div', { className: 'pricing-summary__value' }, formatPrice$2(basePrice, currencyCode))
                       ),
                       basePricePerPaxType &&
                         basePricePerPaxType.map(function (ppt, index) {
@@ -24867,7 +24867,7 @@ var Sidebar = function (_a) {
                               React__default['default'].createElement(
                                 'div',
                                 { className: 'pricing-summary__value' },
-                                formatPrice$1(ppt.pricePerPaxType, currencyCode)
+                                formatPrice$2(ppt.pricePerPaxType, currencyCode)
                               )
                             ),
                             ppt.details.map(function (detail, dIndex) {
@@ -24887,7 +24887,7 @@ var Sidebar = function (_a) {
                                 React__default['default'].createElement(
                                   'div',
                                   { className: 'pricing-summary__value' },
-                                  formatPrice$1(detail.price / detail.numberOfPax, currencyCode)
+                                  formatPrice$2(detail.price / detail.numberOfPax, currencyCode)
                                 )
                               );
                             })
@@ -24914,7 +24914,7 @@ var Sidebar = function (_a) {
                                   React__default['default'].createElement(
                                     'div',
                                     { className: 'pricing-summary__value' },
-                                    formatPrice$1(priceDetail.price * priceDetail.amount, currencyCode)
+                                    formatPrice$2(priceDetail.price * priceDetail.amount, currencyCode)
                                   )
                               ),
                               React__default['default'].createElement(
@@ -24949,7 +24949,7 @@ var Sidebar = function (_a) {
                                   React__default['default'].createElement(
                                     'div',
                                     { className: 'pricing-summary__value' },
-                                    formatPrice$1(priceDetail.price * priceDetail.amount, currencyCode)
+                                    formatPrice$2(priceDetail.price * priceDetail.amount, currencyCode)
                                   )
                               ),
                               React__default['default'].createElement(
@@ -24979,7 +24979,7 @@ var Sidebar = function (_a) {
                                       React__default['default'].createElement(
                                         'div',
                                         { className: 'pricing-summary__value' },
-                                        formatPrice$1(ppt.pricePerPaxType, currencyCode)
+                                        formatPrice$2(ppt.pricePerPaxType, currencyCode)
                                       )
                                     ),
                                     ppt.details.map(function (detail, dIndex) {
@@ -24999,7 +24999,7 @@ var Sidebar = function (_a) {
                                         React__default['default'].createElement(
                                           'div',
                                           { className: 'pricing-summary__value' },
-                                          formatPrice$1(detail.price / detail.numberOfPax, currencyCode)
+                                          formatPrice$2(detail.price / detail.numberOfPax, currencyCode)
                                         )
                                       );
                                     })
@@ -25041,7 +25041,7 @@ var Sidebar = function (_a) {
                         React__default['default'].createElement(
                           'div',
                           { className: 'pricing' },
-                          React__default['default'].createElement('div', { className: 'pricing__price' }, formatPrice$1(totalPrice, currencyCode))
+                          React__default['default'].createElement('div', { className: 'pricing__price' }, formatPrice$2(totalPrice, currencyCode))
                         )
                       )
                     ),
@@ -25059,7 +25059,7 @@ var Sidebar = function (_a) {
                       React__default['default'].createElement(
                         'div',
                         { className: 'pricing' },
-                        React__default['default'].createElement('div', { className: 'pricing__price' }, formatPrice$1(deposit, currencyCode))
+                        React__default['default'].createElement('div', { className: 'pricing__price' }, formatPrice$2(deposit, currencyCode))
                       )
                     )
                   ),
@@ -25075,7 +25075,7 @@ var Sidebar = function (_a) {
                         translations.SIDEBAR.DEPOSIT_TEXT1,
                         React__default['default'].createElement('strong', null, translations.SIDEBAR.DEPOSIT_TEXT2),
                         translations.SIDEBAR.DEPOSIT_TEXT3,
-                        formatPrice$1(remainingAmount, currencyCode),
+                        formatPrice$2(remainingAmount, currencyCode),
                         translations.SIDEBAR.DEPOSIT_TEXT4,
                         React__default['default'].createElement('strong', null, translations.SIDEBAR.DEPOSIT_TEXT5),
                         translations.SIDEBAR.DEPOSIT_TEXT6
@@ -25102,7 +25102,7 @@ var Sidebar = function (_a) {
                         React__default['default'].createElement(
                           'div',
                           { className: 'pricing' },
-                          React__default['default'].createElement('div', { className: 'pricing__price' }, formatPrice$1(totalPrice, currencyCode))
+                          React__default['default'].createElement('div', { className: 'pricing__price' }, formatPrice$2(totalPrice, currencyCode))
                         )
                       )
                     )
@@ -33675,7 +33675,7 @@ var _a;
 var initialState$1 = {
   results: [],
   filteredResults: [],
-  selectedSearchResultId: null,
+  selectedSearchResult: null,
   packagingAccoResults: [],
   filteredPackagingAccoResults: [],
   packagingAccoSearchDetails: [],
@@ -33702,7 +33702,7 @@ var searchResultsSlice = toolkit.createSlice({
       state.filteredResults = action.payload;
     },
     setSelectedSearchResult: function (state, action) {
-      state.selectedSearchResultId = action.payload;
+      state.selectedSearchResult = action.payload;
     },
     setPackagingAccoResults: function (state, action) {
       state.packagingAccoResults = action.payload;
@@ -34983,7 +34983,7 @@ var Itinerary = function (_a) {
                   React__default['default'].createElement(
                     'h3',
                     { className: 'search__filter__prices--amount' },
-                    formatPrice$1(
+                    formatPrice$2(
                       ((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'
@@ -34997,7 +34997,7 @@ var Itinerary = function (_a) {
                       'strong',
                       null,
                       '(',
-                      formatPrice$1(
+                      formatPrice$2(
                         (entry === null || entry === void 0 ? void 0 : entry.sellingPrice) || 0,
                         (entry === null || entry === void 0 ? void 0 : entry.currencyCode) || 'EUR'
                       ),
@@ -38066,7 +38066,7 @@ var FlightsFlyIn = function (_a) {
   );
 };
 
-var formatPrice = function (price, currencyCode) {
+var formatPrice$1 = function (price, currencyCode) {
   if (currencyCode === void 0) {
     currencyCode = 'EUR';
   }
@@ -38197,7 +38197,7 @@ var AccommodationFlyIn = function (_a) {
     var totalPrice = selectedOptions.reduce(function (total, option) {
       return total + (option.price || 0);
     }, 0);
-    return formatPrice(totalPrice, selectedPackagingAccoSearchDetails.currencyCode);
+    return formatPrice$1(totalPrice, selectedPackagingAccoSearchDetails.currencyCode);
   };
   var getPriceDifference = function (currentSelectedPrice, roomIndex, accommodationCode, regimeId) {
     var targetPrice = 0;
@@ -38222,7 +38222,7 @@ var AccommodationFlyIn = function (_a) {
     if (difference === 0) {
       return null;
     }
-    var formattedAbsoluteValue = formatPrice(Math.abs(difference), currencyCode);
+    var formattedAbsoluteValue = formatPrice$1(Math.abs(difference), currencyCode);
     return ''.concat(difference > 0 ? '+' : '-', ' ').concat(formattedAbsoluteValue);
   };
   var getPriceDifferenceClassName = function (difference) {
@@ -38503,6 +38503,320 @@ var AccommodationFlyIn = function (_a) {
   // </>
 };
 
+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 GroupTourFlyIn = function (_a) {
+  var _b, _c;
+  var isLoading = _a.isLoading,
+    isOpen = _a.isOpen,
+    setIsOpen = _a.setIsOpen;
+  var dispatch = reactRedux.useDispatch();
+  var context = React.useContext(SearchResultsConfigurationContext);
+  if (isLoading) {
+    return React__default['default'].createElement(
+      React__default['default'].Fragment,
+      null,
+      (_b = context === null || context === void 0 ? void 0 : context.customSpinner) !== null && _b !== void 0
+        ? _b
+        : React__default['default'].createElement(Spinner, null)
+    );
+  }
+  var language = (_c = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _c !== void 0 ? _c : 'en-GB';
+  var translations = getTranslations(language);
+  var bookingPackageDetails = reactRedux.useSelector(function (state) {
+    return state.searchResults;
+  }).bookingPackageDetails;
+  var selectedBookingPackageDetails = React.useMemo(
+    function () {
+      var _a;
+      return (_a = bookingPackageDetails === null || bookingPackageDetails === void 0 ? void 0 : bookingPackageDetails.options) === null || _a === void 0
+        ? void 0
+        : _a.find(function (x) {
+            return x.isSelected;
+          });
+    },
+    [bookingPackageDetails]
+  );
+  var groupedRooms = React.useMemo(
+    function () {
+      if (!(selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.rooms)) return [];
+      return selectedBookingPackageDetails.rooms.map(function (room) {
+        var groupedMap = new Map();
+        room.options.forEach(function (option) {
+          var _a, _b;
+          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.entryLineGuid,
+                label: (_b = option.regimeName) !== null && _b !== void 0 ? _b : 'No regime'
+              });
+        });
+        return Array.from(groupedMap.values());
+      });
+    },
+    [selectedBookingPackageDetails]
+  );
+  if (!bookingPackageDetails) {
+    return null;
+  }
+  var getSelectedOptionForRoom = function (roomIndex) {
+    var _a, _b, _c;
+    return (_c =
+      (_b =
+        (_a = selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.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 = selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0 ? void 0 : selectedBookingPackageDetails.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 (!bookingPackageDetails || !selectedBookingPackageDetails) return;
+    var updatedBookingPackageDetails = __assign(__assign({}, bookingPackageDetails), {
+      options: bookingPackageDetails.options.map(function (bookingOption) {
+        if (!bookingOption.isSelected) {
+          return bookingOption;
+        }
+        return __assign(__assign({}, bookingOption), {
+          rooms: bookingOption.rooms.map(function (room, currentRoomIndex) {
+            if (currentRoomIndex !== roomIndex) {
+              return room;
+            }
+            return __assign(__assign({}, room), {
+              options: room.options.map(function (roomOption) {
+                return __assign(__assign({}, roomOption), { isSelected: roomOption.entryLineGuid === selectedGuid });
+              })
+            });
+          })
+        });
+      })
+    });
+    dispatch(setBookingPackageDetails({ details: updatedBookingPackageDetails }));
+  };
+  var handleConfirm = function () {
+    if (isOpen) {
+      setIsOpen(false);
+    }
+    console.log('Booking package details sent to onBook callback:', bookingPackageDetails);
+    if (context === null || context === void 0 ? void 0 : context.onBook) {
+      context.onBook(bookingPackageDetails);
+    }
+  };
+  var calculateTotalPrice = function () {
+    var selectedOptions =
+      selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0
+        ? void 0
+        : selectedBookingPackageDetails.rooms.flatMap(function (room) {
+            return room.options.filter(function (option) {
+              return option.isSelected;
+            });
+          });
+    var totalPrice =
+      selectedOptions === null || selectedOptions === void 0
+        ? void 0
+        : selectedOptions.reduce(function (total, option) {
+            return total + (option.price || 0);
+          }, 0);
+    return formatPrice(totalPrice, bookingPackageDetails === null || bookingPackageDetails === void 0 ? void 0 : bookingPackageDetails.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 =
+        selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0
+          ? void 0
+          : selectedBookingPackageDetails.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 =
+        selectedBookingPackageDetails === null || selectedBookingPackageDetails === void 0
+          ? void 0
+          : selectedBookingPackageDetails.rooms[roomIndex].options.find(function (option) {
+              return option.entryLineGuid === 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, bookingPackageDetails.currencyCode), ')') : '');
+  };
+  return React__default['default'].createElement(
+    React__default['default'].Fragment,
+    null,
+    React__default['default'].createElement(
+      'div',
+      { className: 'flyin__content' },
+      groupedRooms.map(function (roomAccommodations, roomIndex) {
+        var selectedRoomOption = getSelectedOptionForRoom(roomIndex);
+        return React__default['default'].createElement(
+          'div',
+          { className: 'flyin__acco', key: 'room-'.concat(roomIndex) },
+          React__default['default'].createElement('h3', { className: 'flyin__acco__room-title' }, 'Room ', roomIndex + 1),
+          React__default['default'].createElement(
+            'div',
+            { className: 'flyin__acco__cards' },
+            roomAccommodations.map(function (accommodation) {
+              var _a;
+              var selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodation.accommodationCode);
+              var priceDifference = getPriceDifference(
+                selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.price,
+                roomIndex,
+                accommodation.accommodationCode
+              );
+              return React__default['default'].createElement(
+                'div',
+                { className: 'flyin__acco__card', key: ''.concat(roomIndex, '-').concat(accommodation.accommodationCode) },
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'flyin__acco__content' },
+                  React__default['default'].createElement('h4', { className: 'flyin__acco__title' }, accommodation.accommodationName)
+                ),
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'flyin__acco__footer' },
+                  React__default['default'].createElement(ItemPicker$1, {
+                    items: accommodation.regimes,
+                    selection: selectedOption != null ? ((_a = selectedOption.regimeName) !== null && _a !== void 0 ? _a : 'No regime') : undefined,
+                    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['default'].createElement(
+                    'div',
+                    { className: 'flyin__acco__footer__actions' },
+                    React__default['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.entryLineGuid
+                              : (_a = lodash.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['default'].createElement(
+                      'div',
+                      { className: 'flyin__acco__price__wrapper' },
+                      React__default['default'].createElement(
+                        'span',
+                        { className: getPriceDifferenceClassName(priceDifference) },
+                        formatPriceDifference(
+                          priceDifference,
+                          bookingPackageDetails === null || bookingPackageDetails === void 0 ? void 0 : bookingPackageDetails.currencyCode
+                        )
+                      )
+                    )
+                  )
+                )
+              );
+            })
+          )
+        );
+      })
+    ),
+    React__default['default'].createElement(
+      'div',
+      { className: 'flyin__footer' },
+      React__default['default'].createElement('div', { className: 'flyin__footer__price' }, 'Total price: ', calculateTotalPrice()),
+      React__default['default'].createElement(
+        'div',
+        { className: 'flyin__button-wrapper' },
+        React__default['default'].createElement('button', { className: 'cta cta--select', onClick: handleConfirm }, translations.PRODUCT.BOOK_NOW)
+      )
+    )
+  );
+};
+
 var FlyIn = function (_a) {
   var title = _a.title,
     srpType = _a.srpType,
@@ -38510,7 +38824,8 @@ var FlyIn = function (_a) {
     setIsOpen = _a.setIsOpen,
     _b = _a.className,
     className = _b === void 0 ? '' : _b,
-    onPanelRef = _a.onPanelRef;
+    onPanelRef = _a.onPanelRef,
+    detailsLoading = _a.detailsLoading;
   var dispatch = reactRedux.useDispatch();
   var onCancelSearch = useFlightSearch().onCancelSearch;
   var panelRef = React.useRef(null);
@@ -38585,8 +38900,10 @@ var FlyIn = function (_a) {
         )
       ),
       srpType === build.PortalQsmType.Flight && React__default['default'].createElement(FlightsFlyIn, { isOpen: isOpen, setIsOpen: setIsOpen }),
-      (srpType === build.PortalQsmType.Accommodation || srpType === build.PortalQsmType.GroupTour) &&
-        React__default['default'].createElement(AccommodationFlyIn, { isLoading: true, isOpen: isOpen, setIsOpen: setIsOpen })
+      srpType === build.PortalQsmType.Accommodation &&
+        React__default['default'].createElement(AccommodationFlyIn, { isLoading: true, isOpen: isOpen, setIsOpen: setIsOpen }),
+      srpType === build.PortalQsmType.GroupTour &&
+        React__default['default'].createElement(GroupTourFlyIn, { isLoading: detailsLoading, isOpen: isOpen, setIsOpen: setIsOpen })
     )
   );
 };
@@ -42897,7 +43214,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$1(searchResult.price, searchResult.currencyCode, languageCode),
+    price: formatPrice$2(searchResult.price, searchResult.currencyCode, languageCode),
     ctaText: translations === null || translations === void 0 ? void 0 : translations.SRP.VIEW_DETAILS
   };
 };
@@ -43681,7 +43998,7 @@ var PairedFlightOption = function (_a) {
                   React__default['default'].createElement(
                     'span',
                     { className: 'price' },
-                    formatPrice$1(
+                    formatPrice$2(
                       item.price,
                       'EUR',
                       (_c = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _c !== void 0 ? _c : 'en-GB'
@@ -45957,9 +46274,9 @@ var GroupTourCard = function (_a) {
     languageCode = _a.languageCode,
     cmsItem = _a.cmsItem;
   var context = React.useContext(SearchResultsConfigurationContext);
-  var selectedSearchResultId = reactRedux.useSelector(function (state) {
+  var selectedSearchResult = reactRedux.useSelector(function (state) {
     return state.searchResults;
-  }).selectedSearchResultId;
+  }).selectedSearchResult;
   if (!context) {
     return;
   }
@@ -45975,9 +46292,8 @@ var GroupTourCard = function (_a) {
   var otherCount = genders.filter(function (g) {
     return g === 2;
   }).length;
-  var handleChange = function (productId) {
-    console.log('Selected product ID:', productId);
-    dispatch(setSelectedSearchResult(productId));
+  var handleChange = function (result) {
+    dispatch(setSelectedSearchResult(result));
   };
   return React__default['default'].createElement(
     'div',
@@ -46092,7 +46408,7 @@ var GroupTourCard = function (_a) {
           React__default['default'].createElement(
             'div',
             { className: 'search__result-card__allotment__price' },
-            formatPrice$1(result.price, result.currencyCode, languageCode),
+            formatPrice$2(result.price, result.currencyCode, languageCode),
             ' ',
             translations.PRODUCT.PER_PERSON
           )
@@ -46101,23 +46417,12 @@ var GroupTourCard = function (_a) {
           'button',
           {
             type: 'button',
-            className: 'cta cta--select',
+            className: 'cta '.concat(selectedSearchResult === result ? 'cta--selected' : 'cta--select'),
             onClick: function () {
-              return context.onBook && context.onBook(result);
+              return handleChange(result);
             }
           },
-          translations === null || translations === void 0 ? void 0 : translations.PRODUCT.BOOK_NOW
-        ),
-        React__default['default'].createElement(
-          'button',
-          {
-            type: 'button',
-            className: 'cta '.concat(selectedSearchResultId === result.productId ? 'cta--selected' : 'cta--select'),
-            onClick: function () {
-              return handleChange(result.productId);
-            }
-          },
-          selectedSearchResultId === result.productId
+          selectedSearchResult === result
             ? translations === null || translations === void 0
               ? void 0
               : translations.SHARED.SELECTED
@@ -46513,7 +46818,7 @@ var SearchResultsContainer = function () {
     isLoading = _b.isLoading,
     filters = _b.filters,
     selectedSortType = _b.selectedSortType,
-    selectedSearchResultId = _b.selectedSearchResultId,
+    selectedSearchResult = _b.selectedSearchResult,
     selectedPackagingAccoResultCode = _b.selectedPackagingAccoResultCode,
     flyInIsOpen = _b.flyInIsOpen;
   var isMobile = useMediaQuery('(max-width: 1200px)');
@@ -46527,8 +46832,11 @@ var SearchResultsContainer = function () {
     filtersOpen = _e[0],
     setFiltersOpen = _e[1];
   var _f = React.useState(false),
-    itineraryOpen = _f[0],
-    setItineraryOpen = _f[1];
+    detailsIsLoading = _f[0],
+    setDetailsIsLoading = _f[1];
+  var _g = React.useState(false),
+    itineraryOpen = _g[0],
+    setItineraryOpen = _g[1];
   var panelRef = React.useRef(null);
   var sortByTypes = [
     { direction: 'asc', label: 'default' },
@@ -46879,14 +47187,14 @@ var SearchResultsContainer = function () {
       var runSearch = function () {
         return __awaiter(void 0, void 0, void 0, function () {
           var config, params, entryId, entryLight, searchRequest, rq, packageSearchResults, enrichedFilters, initialFilteredResults, matching, err_1;
-          var _a, _b;
-          return __generator(this, function (_c) {
-            switch (_c.label) {
+          var _a;
+          return __generator(this, function (_b) {
+            switch (_b.label) {
               case 0:
                 dispatch(setIsLoading(true));
-                _c.label = 1;
+                _b.label = 1;
               case 1:
-                _c.trys.push([1, 6, , 7]);
+                _b.trys.push([1, 6, , 7]);
                 if (!context) {
                   return [2 /*return*/];
                 }
@@ -46901,7 +47209,7 @@ var SearchResultsContainer = function () {
                 if (!entryId) return [3 /*break*/, 3];
                 return [4 /*yield*/, build.getEntryLight(config, entryId)];
               case 2:
-                entryLight = _c.sent();
+                entryLight = _b.sent();
                 // populate itinerary store
                 dispatch(setEntry({ entry: entryLight }));
                 searchRequest = buildSearchFromEntry(entryLight);
@@ -46912,11 +47220,11 @@ var SearchResultsContainer = function () {
                   throw new Error('Invalid search parameters');
                 }
                 searchRequest = rq;
-                _c.label = 4;
+                _b.label = 4;
               case 4:
                 return [4 /*yield*/, build.search(config, searchRequest)];
               case 5:
-                packageSearchResults = _c.sent();
+                packageSearchResults = _b.sent();
                 console.log('Search results', packageSearchResults);
                 enrichedFilters = enrichFiltersWithResults(packageSearchResults, context.filters, (_a = context.tags) !== null && _a !== void 0 ? _a : []);
                 if (!initialFiltersSet) {
@@ -46933,18 +47241,18 @@ var SearchResultsContainer = function () {
                       return r.productId === (entry === null || entry === void 0 ? void 0 : entry.id);
                     });
                     if (matching) {
-                      dispatch(setSelectedSearchResult(matching.productId));
+                      dispatch(setSelectedSearchResult(matching));
                     }
                   } else {
                     if (context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight) {
-                      dispatch(setSelectedSearchResult((_b = packageSearchResults[0]) === null || _b === void 0 ? void 0 : _b.productId));
+                      dispatch(setSelectedSearchResult(packageSearchResults[0]));
                     }
                   }
                 }
                 dispatch(setIsLoading(false));
                 return [3 /*break*/, 7];
               case 6:
-                err_1 = _c.sent();
+                err_1 = _b.sent();
                 console.error('Search failed', err_1);
                 dispatch(setIsLoading(false));
                 return [3 /*break*/, 7];
@@ -47043,8 +47351,9 @@ var SearchResultsContainer = function () {
           return __generator(this, function (_a) {
             switch (_a.label) {
               case 0:
-                console.log('Fetching details for selected search result', selectedSearchResultId);
-                if (!selectedSearchResultId || !context) return [2 /*return*/];
+                setDetailsIsLoading(true);
+                console.log('Fetching details for selected search result', selectedSearchResult);
+                if (!selectedSearchResult || !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
@@ -47059,7 +47368,7 @@ var SearchResultsContainer = function () {
                   apiKey: context.tideConnection.apiKey
                 };
                 selectedItem = results.find(function (r) {
-                  return r.productId === selectedSearchResultId;
+                  return r.productId === selectedSearchResult.productId;
                 });
                 if (!selectedItem) {
                   // TODO: handle this case better, show an error message to the user
@@ -47106,12 +47415,14 @@ var SearchResultsContainer = function () {
               case 4:
                 detailsResponse = _a.sent();
                 dispatch(setBookingPackageDetails({ details: detailsResponse === null || detailsResponse === void 0 ? void 0 : detailsResponse.payload }));
+                setDetailsIsLoading(false);
                 _a.label = 5;
               case 5:
                 return [3 /*break*/, 7];
               case 6:
                 err_3 = _a.sent();
                 console.error('Failed to fetch package details', err_3);
+                setDetailsIsLoading(false);
                 return [3 /*break*/, 7];
               case 7:
                 return [2 /*return*/];
@@ -47233,14 +47544,14 @@ var SearchResultsContainer = function () {
           });
         });
       };
-      if (selectedSearchResultId) {
+      if (selectedSearchResult) {
         fetchDetails();
       }
       if (selectedPackagingAccoResultCode) {
         fetchPackagingAccoSearchDetails();
       }
     },
-    [selectedSearchResultId, selectedPackagingAccoResultCode]
+    [selectedSearchResult, selectedPackagingAccoResultCode]
   );
   React.useEffect(
     function () {
@@ -47276,7 +47587,8 @@ var SearchResultsContainer = function () {
                 setIsOpen: handleFlyInToggle,
                 onPanelRef: function (el) {
                   return (panelRef.current = el);
-                }
+                },
+                detailsLoading: detailsIsLoading
               })
             ),
           (context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight ||
@@ -47440,7 +47752,8 @@ var SearchResultsContainer = function () {
                 setIsOpen: handleFlyInToggle,
                 onPanelRef: function (el) {
                   return (panelRef.current = el);
-                }
+                },
+                detailsLoading: detailsIsLoading
               })
             )
         )