@qite/tide-booking-component 1.4.84 → 1.4.86

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/build/build-cjs/index.js +570 -288
  2. package/build/build-cjs/src/content/footer/types.d.ts +1 -0
  3. package/build/build-cjs/src/content/navbar/types.d.ts +1 -0
  4. package/build/build-cjs/src/qsm/components/item-picker/index.d.ts +4 -4
  5. package/build/build-cjs/src/qsm/store/qsm-slice.d.ts +5 -5
  6. package/build/build-cjs/src/qsm/types.d.ts +4 -9
  7. package/build/build-cjs/src/search-results/components/item-picker/index.d.ts +2 -2
  8. package/build/build-cjs/src/search-results/store/search-results-slice.d.ts +5 -0
  9. package/build/build-cjs/src/shared/types.d.ts +2 -7
  10. package/build/build-esm/index.js +570 -288
  11. package/build/build-esm/src/content/footer/types.d.ts +1 -0
  12. package/build/build-esm/src/content/navbar/types.d.ts +1 -0
  13. package/build/build-esm/src/qsm/components/item-picker/index.d.ts +4 -4
  14. package/build/build-esm/src/qsm/store/qsm-slice.d.ts +5 -5
  15. package/build/build-esm/src/qsm/types.d.ts +4 -9
  16. package/build/build-esm/src/search-results/components/item-picker/index.d.ts +2 -2
  17. package/build/build-esm/src/search-results/store/search-results-slice.d.ts +5 -0
  18. package/build/build-esm/src/shared/types.d.ts +2 -7
  19. package/package.json +2 -2
  20. package/src/content/features/content-page/content-page-self-contained.tsx +17 -17
  21. package/src/content/footer/index.tsx +4 -1
  22. package/src/content/footer/types.ts +1 -0
  23. package/src/content/navbar/index.tsx +17 -2
  24. package/src/content/navbar/types.ts +1 -0
  25. package/src/qsm/components/item-picker/index.tsx +10 -13
  26. package/src/qsm/components/travel-class-picker/index.tsx +3 -2
  27. package/src/qsm/components/travel-nationality-picker/index.tsx +3 -2
  28. package/src/qsm/components/travel-type-picker/index.tsx +3 -2
  29. package/src/qsm/store/qsm-slice.ts +5 -5
  30. package/src/qsm/types.ts +5 -10
  31. package/src/search-results/components/item-picker/index.tsx +2 -2
  32. package/src/search-results/components/search-results-container/flight-search-results.tsx +5 -5
  33. package/src/search-results/components/search-results-container/search-results-container.tsx +96 -4
  34. package/src/search-results/store/search-results-slice.ts +6 -0
  35. package/src/shared/components/flyin/accommodation-flyin.tsx +373 -157
  36. package/src/shared/types.ts +13 -7
  37. package/styles/components/_flyin.scss +187 -158
  38. package/styles/components/_footer.scss +1 -0
  39. package/styles/components/_navbar.scss +1 -0
package/build/build-cjs/index.js CHANGED
@@ -6721,7 +6721,7 @@ exports.DepartureRange = void 0;
6721
6721
  DepartureRange[(DepartureRange['Night'] = 3)] = 'Night';
6722
6722
  })(exports.DepartureRange || (exports.DepartureRange = {}));
6723
6723
 
6724
- var formatPrice = function (price, currencyCode, locale) {
6724
+ var formatPrice$1 = function (price, currencyCode, locale) {
6725
6725
  if (locale === void 0) {
6726
6726
  locale = 'nl-BE';
6727
6727
  }
@@ -6828,7 +6828,7 @@ function getLocale(code) {
6828
6828
  }
6829
6829
  }
6830
6830
  var getPriceDifferenceText = function (price, currencyCode) {
6831
- return price > 0 ? '+ '.concat(formatPrice(Math.abs(price), currencyCode)) : '- '.concat(formatPrice(Math.abs(price), currencyCode));
6831
+ return price > 0 ? '+ '.concat(formatPrice$1(Math.abs(price), currencyCode)) : '- '.concat(formatPrice$1(Math.abs(price), currencyCode));
6832
6832
  };
6833
6833
  function format(text, args) {
6834
6834
  return text.replace(/{([0-9]+)}/g, function (match, index) {
@@ -13552,16 +13552,16 @@ var formatPriceByMode = function (price, priceMode, personCount, duration, perPe
13552
13552
  if (!price) return '';
13553
13553
  switch (priceMode) {
13554
13554
  case 0:
13555
- return ''.concat(formatPrice(price, currencyCode));
13555
+ return ''.concat(formatPrice$1(price, currencyCode));
13556
13556
  case 1:
13557
13557
  var perPersonPrice = price / personCount;
13558
- return ''.concat(formatPrice(perPersonPrice, currencyCode), ' / ').concat(perPersonLabel);
13558
+ return ''.concat(formatPrice$1(perPersonPrice, currencyCode), ' / ').concat(perPersonLabel);
13559
13559
  case 2:
13560
13560
  var perNightPrice = price / duration;
13561
- return ''.concat(formatPrice(perNightPrice, currencyCode), ' / ').concat(perNightLabel);
13561
+ return ''.concat(formatPrice$1(perNightPrice, currencyCode), ' / ').concat(perNightLabel);
13562
13562
  case 3:
13563
13563
  var perPersonPerNightPrice = price / duration;
13564
- return ''.concat(formatPrice(perPersonPerNightPrice, currencyCode), ' / ').concat(perPersonPerNightLabel);
13564
+ return ''.concat(formatPrice$1(perPersonPerNightPrice, currencyCode), ' / ').concat(perPersonPerNightLabel);
13565
13565
  }
13566
13566
  };
13567
13567
 
@@ -22039,7 +22039,7 @@ var NoneOption = function (_a) {
22039
22039
  return x.requirementType === 2;
22040
22040
  });
22041
22041
  var noneSelected = !selectedOption;
22042
- var priceDifferencetext = selectedOption ? '- '.concat(formatPrice(Math.abs(selectedOption.line.price), currencyCode)) : '';
22042
+ var priceDifferencetext = selectedOption ? '- '.concat(formatPrice$1(Math.abs(selectedOption.line.price), currencyCode)) : '';
22043
22043
  return React__default['default'].createElement(
22044
22044
  React__default['default'].Fragment,
22045
22045
  null,
@@ -23316,7 +23316,7 @@ var OptionRoom = function (_a) {
23316
23316
  e.preventDefault();
23317
23317
  };
23318
23318
  var getPriceDifferenceText = function (price) {
23319
- return price > 0 ? '+ '.concat(formatPrice(Math.abs(price), currencyCode)) : '- '.concat(formatPrice(Math.abs(price), currencyCode));
23319
+ return price > 0 ? '+ '.concat(formatPrice$1(Math.abs(price), currencyCode)) : '- '.concat(formatPrice$1(Math.abs(price), currencyCode));
23320
23320
  };
23321
23321
  var getAccommodationPriceDifference = function (accommodation) {
23322
23322
  var _a;
@@ -24847,7 +24847,7 @@ var Sidebar = function (_a) {
24847
24847
  { className: 'pricing-summary__property' },
24848
24848
  React__default['default'].createElement('h6', { className: 'pricing-summary__title' }, translations.SIDEBAR.BASE_PRICE)
24849
24849
  ),
24850
- React__default['default'].createElement('div', { className: 'pricing-summary__value' }, formatPrice(basePrice, currencyCode))
24850
+ React__default['default'].createElement('div', { className: 'pricing-summary__value' }, formatPrice$1(basePrice, currencyCode))
24851
24851
  ),
24852
24852
  basePricePerPaxType &&
24853
24853
  basePricePerPaxType.map(function (ppt, index) {
@@ -24867,7 +24867,7 @@ var Sidebar = function (_a) {
24867
24867
  React__default['default'].createElement(
24868
24868
  'div',
24869
24869
  { className: 'pricing-summary__value' },
24870
- formatPrice(ppt.pricePerPaxType, currencyCode)
24870
+ formatPrice$1(ppt.pricePerPaxType, currencyCode)
24871
24871
  )
24872
24872
  ),
24873
24873
  ppt.details.map(function (detail, dIndex) {
@@ -24887,7 +24887,7 @@ var Sidebar = function (_a) {
24887
24887
  React__default['default'].createElement(
24888
24888
  'div',
24889
24889
  { className: 'pricing-summary__value' },
24890
- formatPrice(detail.price / detail.numberOfPax, currencyCode)
24890
+ formatPrice$1(detail.price / detail.numberOfPax, currencyCode)
24891
24891
  )
24892
24892
  );
24893
24893
  })
@@ -24914,7 +24914,7 @@ var Sidebar = function (_a) {
24914
24914
  React__default['default'].createElement(
24915
24915
  'div',
24916
24916
  { className: 'pricing-summary__value' },
24917
- formatPrice(priceDetail.price * priceDetail.amount, currencyCode)
24917
+ formatPrice$1(priceDetail.price * priceDetail.amount, currencyCode)
24918
24918
  )
24919
24919
  ),
24920
24920
  React__default['default'].createElement(
@@ -24949,7 +24949,7 @@ var Sidebar = function (_a) {
24949
24949
  React__default['default'].createElement(
24950
24950
  'div',
24951
24951
  { className: 'pricing-summary__value' },
24952
- formatPrice(priceDetail.price * priceDetail.amount, currencyCode)
24952
+ formatPrice$1(priceDetail.price * priceDetail.amount, currencyCode)
24953
24953
  )
24954
24954
  ),
24955
24955
  React__default['default'].createElement(
@@ -24979,7 +24979,7 @@ var Sidebar = function (_a) {
24979
24979
  React__default['default'].createElement(
24980
24980
  'div',
24981
24981
  { className: 'pricing-summary__value' },
24982
- formatPrice(ppt.pricePerPaxType, currencyCode)
24982
+ formatPrice$1(ppt.pricePerPaxType, currencyCode)
24983
24983
  )
24984
24984
  ),
24985
24985
  ppt.details.map(function (detail, dIndex) {
@@ -24999,7 +24999,7 @@ var Sidebar = function (_a) {
24999
24999
  React__default['default'].createElement(
25000
25000
  'div',
25001
25001
  { className: 'pricing-summary__value' },
25002
- formatPrice(detail.price / detail.numberOfPax, currencyCode)
25002
+ formatPrice$1(detail.price / detail.numberOfPax, currencyCode)
25003
25003
  )
25004
25004
  );
25005
25005
  })
@@ -25041,7 +25041,7 @@ var Sidebar = function (_a) {
25041
25041
  React__default['default'].createElement(
25042
25042
  'div',
25043
25043
  { className: 'pricing' },
25044
- React__default['default'].createElement('div', { className: 'pricing__price' }, formatPrice(totalPrice, currencyCode))
25044
+ React__default['default'].createElement('div', { className: 'pricing__price' }, formatPrice$1(totalPrice, currencyCode))
25045
25045
  )
25046
25046
  )
25047
25047
  ),
@@ -25059,7 +25059,7 @@ var Sidebar = function (_a) {
25059
25059
  React__default['default'].createElement(
25060
25060
  'div',
25061
25061
  { className: 'pricing' },
25062
- React__default['default'].createElement('div', { className: 'pricing__price' }, formatPrice(deposit, currencyCode))
25062
+ React__default['default'].createElement('div', { className: 'pricing__price' }, formatPrice$1(deposit, currencyCode))
25063
25063
  )
25064
25064
  )
25065
25065
  ),
@@ -25075,7 +25075,7 @@ var Sidebar = function (_a) {
25075
25075
  translations.SIDEBAR.DEPOSIT_TEXT1,
25076
25076
  React__default['default'].createElement('strong', null, translations.SIDEBAR.DEPOSIT_TEXT2),
25077
25077
  translations.SIDEBAR.DEPOSIT_TEXT3,
25078
- formatPrice(remainingAmount, currencyCode),
25078
+ formatPrice$1(remainingAmount, currencyCode),
25079
25079
  translations.SIDEBAR.DEPOSIT_TEXT4,
25080
25080
  React__default['default'].createElement('strong', null, translations.SIDEBAR.DEPOSIT_TEXT5),
25081
25081
  translations.SIDEBAR.DEPOSIT_TEXT6
@@ -25102,7 +25102,7 @@ var Sidebar = function (_a) {
25102
25102
  React__default['default'].createElement(
25103
25103
  'div',
25104
25104
  { className: 'pricing' },
25105
- React__default['default'].createElement('div', { className: 'pricing__price' }, formatPrice(totalPrice, currencyCode))
25105
+ React__default['default'].createElement('div', { className: 'pricing__price' }, formatPrice$1(totalPrice, currencyCode))
25106
25106
  )
25107
25107
  )
25108
25108
  )
@@ -29940,6 +29940,7 @@ var Navbar = function (_a) {
29940
29940
  var _b;
29941
29941
  var currentPath = _a.currentPath,
29942
29942
  logo = _a.logo,
29943
+ onLogoClick = _a.onLogoClick,
29943
29944
  topLinks = _a.topLinks,
29944
29945
  items = _a.items,
29945
29946
  language = _a.language,
@@ -30234,7 +30235,7 @@ var Navbar = function (_a) {
30234
30235
  React__default['default'].createElement(
30235
30236
  'div',
30236
30237
  { className: 'nav__container' },
30237
- React__default['default'].createElement('div', { className: 'nav__logo' }, logo),
30238
+ React__default['default'].createElement('div', { className: 'nav__logo', onClick: onLogoClick }, logo),
30238
30239
  React__default['default'].createElement(
30239
30240
  'div',
30240
30241
  { className: 'nav__wrapper' },
@@ -30480,6 +30481,7 @@ var defaultPayments = [
30480
30481
  var Footer = function (_a) {
30481
30482
  var className = _a.className,
30482
30483
  logo = _a.logo,
30484
+ onLogoClick = _a.onLogoClick,
30483
30485
  _b = _a.social,
30484
30486
  social = _b === void 0 ? defaultSocial : _b,
30485
30487
  _c = _a.columns,
@@ -30499,7 +30501,7 @@ var Footer = function (_a) {
30499
30501
  { className: 'footer__top' },
30500
30502
  React__default['default'].createElement(
30501
30503
  'div',
30502
- { className: 'footer__logo' },
30504
+ { className: 'footer__logo', onClick: onLogoClick },
30503
30505
  logo !== null && logo !== void 0 ? logo : React__default['default'].createElement(DefaultLogo, null)
30504
30506
  ),
30505
30507
  React__default['default'].createElement(
@@ -33055,16 +33057,16 @@ var ItemPicker$1 = function (_a) {
33055
33057
  label = _a.label,
33056
33058
  placeholder = _a.placeholder,
33057
33059
  classModifier = _a.classModifier,
33060
+ valueFormatter = _a.valueFormatter,
33058
33061
  onPick = _a.onPick;
33059
- var dispatch = reactRedux.useDispatch();
33060
33062
  var _b = React.useState(false),
33061
33063
  isDropdownOpen = _b[0],
33062
33064
  setIsDropdownOpen = _b[1];
33063
33065
  var dropdownRef = React.useRef(null);
33064
33066
  var toggleButtonRef = React.useRef(null);
33065
- var handlePick = function (picked) {
33067
+ var handlePick = function (picked, id) {
33066
33068
  setIsDropdownOpen(false);
33067
- dispatch(onPick(picked));
33069
+ onPick(picked, id);
33068
33070
  };
33069
33071
  React.useEffect(function () {
33070
33072
  var handleClickOutside = function (event) {
@@ -33103,20 +33105,21 @@ var ItemPicker$1 = function (_a) {
33103
33105
  'ul',
33104
33106
  { className: 'dropdown-menu' },
33105
33107
  items.map(function (_a) {
33106
- var label = _a.label,
33108
+ var id = _a.id,
33109
+ label = _a.label,
33107
33110
  icon = _a.icon;
33108
33111
  return React__default['default'].createElement(
33109
33112
  'li',
33110
33113
  {
33111
33114
  key: label,
33112
33115
  onClick: function (e) {
33113
- handlePick(label);
33116
+ handlePick(label, id);
33114
33117
  e.stopPropagation();
33115
33118
  },
33116
33119
  className: 'dropdown-menu__item'.concat(selection === label ? ' dropdown-menu__item--selected' : '')
33117
33120
  },
33118
33121
  icon && React__default['default'].createElement('span', { className: 'travel-class-icon' }, icon),
33119
- label
33122
+ valueFormatter ? valueFormatter(id, label) : label
33120
33123
  );
33121
33124
  })
33122
33125
  )
@@ -33133,13 +33136,16 @@ var TravelClassPicker = function () {
33133
33136
  var selectedTravelClass = reactRedux.useSelector(function (state) {
33134
33137
  return state.qsm;
33135
33138
  }).selectedTravelClass;
33139
+ var dispatch = reactRedux.useDispatch();
33136
33140
  return React__default['default'].createElement(ItemPicker$1, {
33137
33141
  items: travelClasses,
33138
33142
  selection: selectedTravelClass,
33139
33143
  label: translations.QSM.TRAVEL_CLASS_LABEL,
33140
33144
  placeholder: translations.QSM.TRAVEL_CLASS_PLACEHOLDER,
33141
33145
  classModifier: 'travel-class-picker__items',
33142
- onPick: setSelectedTravelClass
33146
+ onPick: function (picked) {
33147
+ return dispatch(setSelectedTravelClass(picked));
33148
+ }
33143
33149
  });
33144
33150
  };
33145
33151
 
@@ -33152,13 +33158,16 @@ var TravelTypePicker = function () {
33152
33158
  var selectedTravelType = reactRedux.useSelector(function (state) {
33153
33159
  return state.qsm;
33154
33160
  }).selectedTravelType;
33161
+ var dispatch = reactRedux.useDispatch();
33155
33162
  return React__default['default'].createElement(ItemPicker$1, {
33156
33163
  items: travelTypes,
33157
33164
  selection: selectedTravelType,
33158
33165
  label: translations.QSM.TRAVEL_TYPE_LABEL,
33159
33166
  placeholder: translations.QSM.TRAVEL_TYPE_PLACEHOLDER,
33160
33167
  classModifier: 'travel-type-picker__items',
33161
- onPick: setSelectedTravelType
33168
+ onPick: function (picked) {
33169
+ return dispatch(setSelectedTravelType(picked));
33170
+ }
33162
33171
  });
33163
33172
  };
33164
33173
 
@@ -33171,13 +33180,16 @@ var TravelNationalityPicker = function () {
33171
33180
  var selectedNationality = reactRedux.useSelector(function (state) {
33172
33181
  return state.qsm;
33173
33182
  }).selectedNationality;
33183
+ var dispatch = reactRedux.useDispatch();
33174
33184
  return React__default['default'].createElement(ItemPicker$1, {
33175
33185
  items: nationalities,
33176
33186
  selection: selectedNationality,
33177
33187
  label: translations.QSM.NATIONALITY_LABEL,
33178
33188
  placeholder: translations.QSM.NATIONALITY_PLACEHOLDER,
33179
33189
  classModifier: 'travel-class-picker__items',
33180
- onPick: setSelectedNationality
33190
+ onPick: function (picked) {
33191
+ return dispatch(setSelectedNationality(picked));
33192
+ }
33181
33193
  });
33182
33194
  };
33183
33195
 
@@ -33666,6 +33678,7 @@ var initialState$1 = {
33666
33678
  selectedSearchResultId: null,
33667
33679
  packagingAccoResults: [],
33668
33680
  filteredPackagingAccoResults: [],
33681
+ packagingAccoSearchDetails: [],
33669
33682
  selectedPackagingAccoResultCode: null,
33670
33683
  selectedFlight: null,
33671
33684
  selectedFlightDetails: null,
@@ -33697,6 +33710,9 @@ var searchResultsSlice = toolkit.createSlice({
33697
33710
  setFilteredPackagingAccoResults: function (state, action) {
33698
33711
  state.filteredPackagingAccoResults = action.payload;
33699
33712
  },
33713
+ setPackagingAccoSearchDetails: function (state, action) {
33714
+ state.packagingAccoSearchDetails = action.payload;
33715
+ },
33700
33716
  setSelectedPackagingAccoResult: function (state, action) {
33701
33717
  state.selectedPackagingAccoResultCode = action.payload;
33702
33718
  },
@@ -33768,6 +33784,7 @@ var setResults = ((_a = searchResultsSlice.actions), _a.setResults),
33768
33784
  setSelectedSearchResult = _a.setSelectedSearchResult,
33769
33785
  setPackagingAccoResults = _a.setPackagingAccoResults,
33770
33786
  setFilteredPackagingAccoResults = _a.setFilteredPackagingAccoResults,
33787
+ setPackagingAccoSearchDetails = _a.setPackagingAccoSearchDetails,
33771
33788
  setSelectedPackagingAccoResult = _a.setSelectedPackagingAccoResult,
33772
33789
  setSelectedFlight = _a.setSelectedFlight,
33773
33790
  setSelectedFlightDetails = _a.setSelectedFlightDetails,
@@ -34966,7 +34983,7 @@ var Itinerary = function (_a) {
34966
34983
  React__default['default'].createElement(
34967
34984
  'h3',
34968
34985
  { className: 'search__filter__prices--amount' },
34969
- formatPrice(
34986
+ formatPrice$1(
34970
34987
  ((entry === null || entry === void 0 ? void 0 : entry.sellingPrice) || 0) /
34971
34988
  ((entry === null || entry === void 0 ? void 0 : entry.numberOfPax) || 1),
34972
34989
  (entry === null || entry === void 0 ? void 0 : entry.currencyCode) || 'EUR'
@@ -34980,7 +34997,7 @@ var Itinerary = function (_a) {
34980
34997
  'strong',
34981
34998
  null,
34982
34999
  '(',
34983
- formatPrice(
35000
+ formatPrice$1(
34984
35001
  (entry === null || entry === void 0 ? void 0 : entry.sellingPrice) || 0,
34985
35002
  (entry === null || entry === void 0 ? void 0 : entry.currencyCode) || 'EUR'
34986
35003
  ),
@@ -38049,295 +38066,441 @@ var FlightsFlyIn = function (_a) {
38049
38066
  );
38050
38067
  };
38051
38068
 
38052
- var travelClasses = [
38053
- { id: 1, label: 'Standard Room' },
38054
- { id: 2, label: 'Deluxe Balcony Room' },
38055
- { id: 3, label: 'Superior Room' },
38056
- { id: 4, label: 'Family Room' },
38057
- { id: 5, label: 'Suite' }
38058
- ];
38069
+ var formatPrice = function (price, currencyCode) {
38070
+ if (currencyCode === void 0) {
38071
+ currencyCode = 'EUR';
38072
+ }
38073
+ if (typeof price !== 'number') return '';
38074
+ return new Intl.NumberFormat('nl-BE', {
38075
+ style: 'currency',
38076
+ currency: currencyCode
38077
+ }).format(price);
38078
+ };
38059
38079
  var AccommodationFlyIn = function (_a) {
38060
38080
  var _b;
38061
38081
  _a.isLoading;
38062
38082
  var isOpen = _a.isOpen,
38063
38083
  setIsOpen = _a.setIsOpen;
38084
+ var dispatch = reactRedux.useDispatch();
38064
38085
  var context = React.useContext(SearchResultsConfigurationContext);
38065
38086
  var language = (_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB';
38066
38087
  var translations = getTranslations(language);
38067
- reactRedux.useSelector(function (state) {
38068
- return state.searchResults;
38069
- }).selectedSearchResultId;
38070
- var _c = React.useState('Standard Room'),
38071
- selectedTravelClass = _c[0],
38072
- setSelectedTravelClass = _c[1];
38088
+ var _c = reactRedux.useSelector(function (state) {
38089
+ return state.searchResults;
38090
+ }),
38091
+ packagingAccoSearchDetails = _c.packagingAccoSearchDetails,
38092
+ selectedPackagingAccoResultCode = _c.selectedPackagingAccoResultCode;
38093
+ var selectedPackagingAccoSearchDetails = React.useMemo(
38094
+ function () {
38095
+ return packagingAccoSearchDetails === null || packagingAccoSearchDetails === void 0
38096
+ ? void 0
38097
+ : packagingAccoSearchDetails.find(function (x) {
38098
+ return x.code === selectedPackagingAccoResultCode;
38099
+ });
38100
+ },
38101
+ [packagingAccoSearchDetails, selectedPackagingAccoResultCode]
38102
+ );
38103
+ var groupedRooms = React.useMemo(
38104
+ function () {
38105
+ if (!(selectedPackagingAccoSearchDetails === null || selectedPackagingAccoSearchDetails === void 0 ? void 0 : selectedPackagingAccoSearchDetails.rooms))
38106
+ return [];
38107
+ return selectedPackagingAccoSearchDetails.rooms.map(function (room) {
38108
+ var groupedMap = new Map();
38109
+ room.options.forEach(function (option) {
38110
+ var _a;
38111
+ var key = option.accommodationCode;
38112
+ if (!groupedMap.has(key)) {
38113
+ groupedMap.set(key, {
38114
+ accommodationCode: option.accommodationCode,
38115
+ accommodationName: option.accommodationName,
38116
+ regimes: []
38117
+ });
38118
+ }
38119
+ (_a = groupedMap.get(key)) === null || _a === void 0
38120
+ ? void 0
38121
+ : _a.regimes.push({
38122
+ id: option.guid,
38123
+ label: option.regimeName
38124
+ });
38125
+ });
38126
+ return Array.from(groupedMap.values());
38127
+ });
38128
+ },
38129
+ [selectedPackagingAccoSearchDetails]
38130
+ );
38131
+ var getSelectedOptionForRoom = function (roomIndex) {
38132
+ var _a, _b, _c;
38133
+ return (_c =
38134
+ (_b =
38135
+ (_a =
38136
+ selectedPackagingAccoSearchDetails === null || selectedPackagingAccoSearchDetails === void 0 ? void 0 : selectedPackagingAccoSearchDetails.rooms) ===
38137
+ null || _a === void 0
38138
+ ? void 0
38139
+ : _a[roomIndex]) === null || _b === void 0
38140
+ ? void 0
38141
+ : _b.options) === null || _c === void 0
38142
+ ? void 0
38143
+ : _c.find(function (option) {
38144
+ return option.isSelected;
38145
+ });
38146
+ };
38147
+ var getSelectedOptionForAccommodation = function (roomIndex, accommodationCode) {
38148
+ var _a, _b, _c;
38149
+ return (_c =
38150
+ (_b =
38151
+ (_a =
38152
+ selectedPackagingAccoSearchDetails === null || selectedPackagingAccoSearchDetails === void 0 ? void 0 : selectedPackagingAccoSearchDetails.rooms) ===
38153
+ null || _a === void 0
38154
+ ? void 0
38155
+ : _a[roomIndex]) === null || _b === void 0
38156
+ ? void 0
38157
+ : _b.options) === null || _c === void 0
38158
+ ? void 0
38159
+ : _c.find(function (option) {
38160
+ return option.accommodationCode === accommodationCode && option.isSelected;
38161
+ });
38162
+ };
38163
+ var handlePick = function (roomIndex, selectedGuid) {
38164
+ if (!packagingAccoSearchDetails || !selectedPackagingAccoSearchDetails) return;
38165
+ var updatedPackagingAccoSearchDetails = packagingAccoSearchDetails.map(function (product) {
38166
+ if (product.code !== selectedPackagingAccoSearchDetails.code) {
38167
+ return product;
38168
+ }
38169
+ var updatedRooms = product.rooms.map(function (room, currentRoomIndex) {
38170
+ if (currentRoomIndex !== roomIndex) {
38171
+ return room;
38172
+ }
38173
+ return __assign(__assign({}, room), {
38174
+ options: room.options.map(function (option) {
38175
+ return __assign(__assign({}, option), { isSelected: option.guid === selectedGuid });
38176
+ })
38177
+ });
38178
+ });
38179
+ return __assign(__assign({}, product), { rooms: updatedRooms });
38180
+ });
38181
+ dispatch(setPackagingAccoSearchDetails(updatedPackagingAccoSearchDetails));
38182
+ };
38073
38183
  var handleConfirm = function () {
38074
38184
  if (isOpen) {
38075
38185
  setIsOpen(false);
38076
38186
  }
38077
38187
  };
38188
+ if (!selectedPackagingAccoSearchDetails) {
38189
+ return null;
38190
+ }
38191
+ var calculateTotalPrice = function () {
38192
+ var selectedOptions = selectedPackagingAccoSearchDetails.rooms.flatMap(function (room) {
38193
+ return room.options.filter(function (option) {
38194
+ return option.isSelected;
38195
+ });
38196
+ });
38197
+ var totalPrice = selectedOptions.reduce(function (total, option) {
38198
+ return total + (option.price || 0);
38199
+ }, 0);
38200
+ return formatPrice(totalPrice, selectedPackagingAccoSearchDetails.currencyCode);
38201
+ };
38202
+ var getPriceDifference = function (currentSelectedPrice, roomIndex, accommodationCode, regimeId) {
38203
+ var targetPrice = 0;
38204
+ var selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodationCode);
38205
+ if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.price) {
38206
+ targetPrice = selectedOption.price;
38207
+ } else {
38208
+ var firstOption = selectedPackagingAccoSearchDetails.rooms[roomIndex].options.find(function (option) {
38209
+ return option.accommodationCode === accommodationCode;
38210
+ });
38211
+ targetPrice = (firstOption === null || firstOption === void 0 ? void 0 : firstOption.price) || 0;
38212
+ }
38213
+ if (regimeId) {
38214
+ var regimeOption = selectedPackagingAccoSearchDetails.rooms[roomIndex].options.find(function (option) {
38215
+ return option.guid === regimeId;
38216
+ });
38217
+ targetPrice = (regimeOption === null || regimeOption === void 0 ? void 0 : regimeOption.price) || 0;
38218
+ }
38219
+ return targetPrice - (currentSelectedPrice || 0);
38220
+ };
38221
+ var formatPriceDifference = function (difference, currencyCode) {
38222
+ if (difference === 0) {
38223
+ return null;
38224
+ }
38225
+ var formattedAbsoluteValue = formatPrice(Math.abs(difference), currencyCode);
38226
+ return ''.concat(difference > 0 ? '+' : '-', ' ').concat(formattedAbsoluteValue);
38227
+ };
38228
+ var getPriceDifferenceClassName = function (difference) {
38229
+ if (difference < 0) {
38230
+ return 'flyin__acco__price flyin__acco__price--decrease';
38231
+ }
38232
+ if (difference > 0) {
38233
+ return 'flyin__acco__price flyin__acco__price--increase';
38234
+ }
38235
+ return 'flyin__acco__price';
38236
+ };
38237
+ var regimeFormatter = function (roomIndex, accommodation, regimeId, label) {
38238
+ var roomOption = getSelectedOptionForRoom(roomIndex);
38239
+ var difference = getPriceDifference(
38240
+ roomOption === null || roomOption === void 0 ? void 0 : roomOption.price,
38241
+ roomIndex,
38242
+ accommodation.accommodationCode,
38243
+ regimeId
38244
+ );
38245
+ return ''
38246
+ .concat(label, ' ')
38247
+ .concat(difference !== 0 ? '('.concat(formatPriceDifference(difference, selectedPackagingAccoSearchDetails.currencyCode), ')') : '');
38248
+ };
38078
38249
  return React__default['default'].createElement(
38079
38250
  React__default['default'].Fragment,
38080
38251
  null,
38081
38252
  React__default['default'].createElement(
38082
38253
  'div',
38083
38254
  { className: 'flyin__content' },
38084
- React__default['default'].createElement(
38085
- 'div',
38086
- { className: 'flyin__acco' },
38087
- React__default['default'].createElement(
38255
+ groupedRooms.map(function (roomAccommodations, roomIndex) {
38256
+ var selectedRoomOption = getSelectedOptionForRoom(roomIndex);
38257
+ return React__default['default'].createElement(
38088
38258
  'div',
38089
- { className: 'flyin__acco__cards' },
38259
+ { className: 'flyin__acco', key: 'room-'.concat(roomIndex) },
38260
+ React__default['default'].createElement('h3', { className: 'flyin__acco__room-title' }, 'Room ', roomIndex + 1),
38090
38261
  React__default['default'].createElement(
38091
38262
  'div',
38092
- { className: 'flyin__acco__card' },
38093
- React__default['default'].createElement(
38094
- 'div',
38095
- { className: 'flyin__acco__img__wrapper' },
38096
- React__default['default'].createElement('img', {
38097
- src: 'https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg',
38098
- alt: 'river',
38099
- className: 'flyin__acco__img'
38100
- }),
38101
- React__default['default'].createElement(
38102
- 'div',
38103
- { className: 'flyin__acco__price__wrapper' },
38104
- React__default['default'].createElement(
38105
- 'span',
38106
- { className: 'flyin__acco__price__label' },
38107
- translations === null || translations === void 0 ? void 0 : translations.SHARED.TOTAL_PRICE
38108
- ),
38109
- React__default['default'].createElement('span', { className: 'flyin__acco__price flyin__acco__price--increase' }, '+1.764,00')
38110
- )
38111
- ),
38112
- React__default['default'].createElement(
38113
- 'div',
38114
- { className: 'flyin__acco__content' },
38115
- React__default['default'].createElement(
38116
- 'div',
38117
- { className: 'flyin__acco__header' },
38118
- React__default['default'].createElement('h4', { className: 'flyin__acco__title' }, 'Deluxe Balcony Room'),
38119
- React__default['default'].createElement(
38120
- 'div',
38121
- { className: 'flyin__acco__usps' },
38122
- React__default['default'].createElement(
38123
- 'div',
38124
- { className: 'flyin__acco__usp' },
38125
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38126
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Sea sight')
38127
- ),
38128
- React__default['default'].createElement(
38129
- 'div',
38130
- { className: 'flyin__acco__usp' },
38131
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38132
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Free wifi')
38133
- ),
38134
- React__default['default'].createElement(
38135
- 'div',
38136
- { className: 'flyin__acco__usp' },
38137
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38138
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Breakfast included')
38139
- ),
38140
- React__default['default'].createElement(
38141
- 'div',
38142
- { className: 'flyin__acco__usp' },
38143
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38144
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Air conditioning')
38145
- ),
38146
- React__default['default'].createElement(
38147
- 'div',
38148
- { className: 'flyin__acco__usp' },
38149
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38150
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Private bathroom')
38151
- )
38152
- )
38153
- )
38154
- ),
38155
- React__default['default'].createElement(
38156
- 'div',
38157
- { className: 'flyin__acco__footer' },
38158
- React__default['default'].createElement(ItemPicker$1, {
38159
- items: travelClasses,
38160
- selection: selectedTravelClass,
38161
- label: ' ',
38162
- placeholder: translations.QSM.TRAVEL_CLASS_PLACEHOLDER,
38163
- classModifier: 'travel-class-picker__items',
38164
- onPick: setSelectedTravelClass
38165
- }),
38166
- React__default['default'].createElement(
38167
- 'button',
38168
- { className: 'cta cta--select' },
38169
- translations === null || translations === void 0 ? void 0 : translations.SHARED.SELECT
38170
- )
38171
- )
38172
- ),
38173
- React__default['default'].createElement(
38174
- 'div',
38175
- { className: 'flyin__acco__card' },
38176
- React__default['default'].createElement(
38177
- 'div',
38178
- { className: 'flyin__acco__img__wrapper' },
38179
- React__default['default'].createElement('img', {
38180
- src: 'https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg',
38181
- alt: 'river',
38182
- className: 'flyin__acco__img'
38183
- }),
38184
- React__default['default'].createElement(
38185
- 'div',
38186
- { className: 'flyin__acco__price__wrapper' },
38187
- React__default['default'].createElement(
38188
- 'span',
38189
- { className: 'flyin__acco__price__label' },
38190
- translations === null || translations === void 0 ? void 0 : translations.SHARED.TOTAL_PRICE
38191
- ),
38192
- React__default['default'].createElement('span', { className: 'flyin__acco__price flyin__acco__price--increase' }, '+1.764,00')
38193
- )
38194
- ),
38195
- React__default['default'].createElement(
38196
- 'div',
38197
- { className: 'flyin__acco__content' },
38198
- React__default['default'].createElement(
38263
+ { className: 'flyin__acco__cards' },
38264
+ roomAccommodations.map(function (accommodation) {
38265
+ var selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodation.accommodationCode);
38266
+ var priceDifference = getPriceDifference(
38267
+ selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.price,
38268
+ roomIndex,
38269
+ accommodation.accommodationCode
38270
+ );
38271
+ return React__default['default'].createElement(
38199
38272
  'div',
38200
- { className: 'flyin__acco__header' },
38201
- React__default['default'].createElement('h4', { className: 'flyin__acco__title' }, 'Standard Room'),
38273
+ { className: 'flyin__acco__card', key: ''.concat(roomIndex, '-').concat(accommodation.accommodationCode) },
38202
38274
  React__default['default'].createElement(
38203
38275
  'div',
38204
- { className: 'flyin__acco__usps' },
38205
- React__default['default'].createElement(
38206
- 'div',
38207
- { className: 'flyin__acco__usp' },
38208
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38209
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Garden view')
38210
- ),
38211
- React__default['default'].createElement(
38212
- 'div',
38213
- { className: 'flyin__acco__usp' },
38214
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38215
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Free wifi')
38216
- ),
38217
- React__default['default'].createElement(
38218
- 'div',
38219
- { className: 'flyin__acco__usp' },
38220
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38221
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Double bed')
38222
- )
38223
- )
38224
- )
38225
- ),
38226
- React__default['default'].createElement(
38227
- 'div',
38228
- { className: 'flyin__acco__footer' },
38229
- React__default['default'].createElement(ItemPicker$1, {
38230
- items: travelClasses,
38231
- selection: selectedTravelClass,
38232
- label: ' ',
38233
- placeholder: translations.QSM.TRAVEL_CLASS_PLACEHOLDER,
38234
- classModifier: 'travel-class-picker__items',
38235
- onPick: setSelectedTravelClass
38236
- }),
38237
- React__default['default'].createElement(
38238
- 'button',
38239
- { className: 'cta cta--select' },
38240
- translations === null || translations === void 0 ? void 0 : translations.SHARED.SELECT
38241
- )
38242
- )
38243
- ),
38244
- React__default['default'].createElement(
38245
- 'div',
38246
- { className: 'flyin__acco__card' },
38247
- React__default['default'].createElement(
38248
- 'div',
38249
- { className: 'flyin__acco__img__wrapper' },
38250
- React__default['default'].createElement('img', {
38251
- src: 'https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg',
38252
- alt: 'river',
38253
- className: 'flyin__acco__img'
38254
- }),
38255
- React__default['default'].createElement(
38256
- 'div',
38257
- { className: 'flyin__acco__price__wrapper' },
38258
- React__default['default'].createElement(
38259
- 'span',
38260
- { className: 'flyin__acco__price__label' },
38261
- translations === null || translations === void 0 ? void 0 : translations.SHARED.TOTAL_PRICE
38276
+ { className: 'flyin__acco__content' },
38277
+ React__default['default'].createElement('h4', { className: 'flyin__acco__title' }, accommodation.accommodationName)
38262
38278
  ),
38263
- React__default['default'].createElement('span', { className: 'flyin__acco__price flyin__acco__price--increase' }, '+1.764,00')
38264
- )
38265
- ),
38266
- React__default['default'].createElement(
38267
- 'div',
38268
- { className: 'flyin__acco__content' },
38269
- React__default['default'].createElement(
38270
- 'div',
38271
- { className: 'flyin__acco__header' },
38272
- React__default['default'].createElement('h4', { className: 'flyin__acco__title' }, 'Suite'),
38273
38279
  React__default['default'].createElement(
38274
38280
  'div',
38275
- { className: 'flyin__acco__usps' },
38276
- React__default['default'].createElement(
38277
- 'div',
38278
- { className: 'flyin__acco__usp' },
38279
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38280
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Sea sight')
38281
- ),
38282
- React__default['default'].createElement(
38283
- 'div',
38284
- { className: 'flyin__acco__usp' },
38285
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38286
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Free wifi')
38287
- ),
38288
- React__default['default'].createElement(
38289
- 'div',
38290
- { className: 'flyin__acco__usp' },
38291
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38292
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Breakfast included')
38293
- ),
38294
- React__default['default'].createElement(
38295
- 'div',
38296
- { className: 'flyin__acco__usp' },
38297
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38298
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Jacuzzi')
38299
- ),
38281
+ { className: 'flyin__acco__footer' },
38282
+ React__default['default'].createElement(ItemPicker$1, {
38283
+ items: accommodation.regimes,
38284
+ selection: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.regimeName,
38285
+ label: '',
38286
+ placeholder: 'Select regime',
38287
+ classModifier: '',
38288
+ onPick: function (selected, selectedGuid) {
38289
+ return handlePick(roomIndex, selectedGuid);
38290
+ },
38291
+ valueFormatter: function (id, label) {
38292
+ return regimeFormatter(roomIndex, accommodation, id, label);
38293
+ }
38294
+ }),
38300
38295
  React__default['default'].createElement(
38301
38296
  'div',
38302
- { className: 'flyin__acco__usp' },
38303
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38304
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Private terrace')
38297
+ { className: 'flyin__acco__footer__actions' },
38298
+ React__default['default'].createElement(
38299
+ 'button',
38300
+ {
38301
+ className:
38302
+ (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ==
38303
+ accommodation.accommodationCode
38304
+ ? 'cta cta--select cta--selected'
38305
+ : 'cta cta--select',
38306
+ onClick: function () {
38307
+ var _a;
38308
+ handlePick(
38309
+ roomIndex,
38310
+ selectedOption ? selectedOption.guid : (_a = lodash.first(accommodation.regimes)) === null || _a === void 0 ? void 0 : _a.id
38311
+ );
38312
+ }
38313
+ },
38314
+ (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ==
38315
+ accommodation.accommodationCode
38316
+ ? translations === null || translations === void 0
38317
+ ? void 0
38318
+ : translations.SHARED.SELECTED
38319
+ : translations === null || translations === void 0
38320
+ ? void 0
38321
+ : translations.SHARED.SELECT
38322
+ ),
38323
+ React__default['default'].createElement(
38324
+ 'div',
38325
+ { className: 'flyin__acco__price__wrapper' },
38326
+ React__default['default'].createElement(
38327
+ 'span',
38328
+ { className: getPriceDifferenceClassName(priceDifference) },
38329
+ formatPriceDifference(priceDifference, selectedPackagingAccoSearchDetails.currencyCode)
38330
+ )
38331
+ )
38305
38332
  )
38306
38333
  )
38307
- )
38308
- ),
38309
- React__default['default'].createElement(
38310
- 'div',
38311
- { className: 'flyin__acco__footer' },
38312
- React__default['default'].createElement(ItemPicker$1, {
38313
- items: travelClasses,
38314
- selection: selectedTravelClass,
38315
- label: ' ',
38316
- placeholder: translations.QSM.TRAVEL_CLASS_PLACEHOLDER,
38317
- classModifier: 'travel-class-picker__items',
38318
- onPick: setSelectedTravelClass
38319
- }),
38320
- React__default['default'].createElement(
38321
- 'button',
38322
- { className: 'cta cta--select' },
38323
- translations === null || translations === void 0 ? void 0 : translations.SHARED.SELECT
38324
- )
38325
- )
38334
+ );
38335
+ })
38326
38336
  )
38327
- )
38328
- )
38337
+ );
38338
+ })
38329
38339
  ),
38330
38340
  React__default['default'].createElement(
38331
38341
  'div',
38332
38342
  { className: 'flyin__footer' },
38333
- React__default['default'].createElement('div', { className: 'flyin__footer__price' }, 'Total price: \u20AC'),
38343
+ React__default['default'].createElement('div', { className: 'flyin__footer__price' }, 'Total price: ', calculateTotalPrice()),
38334
38344
  React__default['default'].createElement(
38335
38345
  'div',
38336
38346
  { className: 'flyin__button-wrapper' },
38337
- React__default['default'].createElement('button', { className: 'cta cta--select', onClick: handleConfirm }, 'Toevoegen')
38347
+ React__default['default'].createElement('button', { className: 'cta cta--select', onClick: handleConfirm }, translations.PRODUCT.BOOK_NOW)
38338
38348
  )
38339
38349
  )
38340
38350
  );
38351
+ // Slicing with image and usps, not available in the current API response.
38352
+ // <>
38353
+ // <div className="flyin__content">
38354
+ // <div className="flyin__acco">
38355
+ // <div className="flyin__acco__cards">
38356
+ // <div className="flyin__acco__card">
38357
+ // <div className="flyin__acco__img__wrapper">
38358
+ // <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="flyin__acco__img" />
38359
+ // <div className="flyin__acco__price__wrapper">
38360
+ // <span className="flyin__acco__price__label">{translations?.SHARED.TOTAL_PRICE}</span>
38361
+ // <span className="flyin__acco__price flyin__acco__price--increase">+1.764,00</span>
38362
+ // </div>
38363
+ // </div>
38364
+ // <div className="flyin__acco__content">
38365
+ // <div className="flyin__acco__header">
38366
+ // <h4 className="flyin__acco__title">Deluxe Balcony Room</h4>
38367
+ // <div className="flyin__acco__usps">
38368
+ // <div className="flyin__acco__usp">
38369
+ // <Icon name="ui-check" width={16} />
38370
+ // <span className="flyin__acco__usp__text">Sea sight</span>
38371
+ // </div>
38372
+ // <div className="flyin__acco__usp">
38373
+ // <Icon name="ui-check" width={16} />
38374
+ // <span className="flyin__acco__usp__text">Free wifi</span>
38375
+ // </div>
38376
+ // <div className="flyin__acco__usp">
38377
+ // <Icon name="ui-check" width={16} />
38378
+ // <span className="flyin__acco__usp__text">Breakfast included</span>
38379
+ // </div>
38380
+ // <div className="flyin__acco__usp">
38381
+ // <Icon name="ui-check" width={16} />
38382
+ // <span className="flyin__acco__usp__text">Air conditioning</span>
38383
+ // </div>
38384
+ // <div className="flyin__acco__usp">
38385
+ // <Icon name="ui-check" width={16} />
38386
+ // <span className="flyin__acco__usp__text">Private bathroom</span>
38387
+ // </div>
38388
+ // </div>
38389
+ // </div>
38390
+ // </div>
38391
+ // <div className="flyin__acco__footer">
38392
+ // <ItemPicker
38393
+ // items={travelClasses}
38394
+ // selection={selectedTravelClass}
38395
+ // label=" "
38396
+ // placeholder={translations.QSM.TRAVEL_CLASS_PLACEHOLDER}
38397
+ // classModifier="travel-class-picker__items"
38398
+ // onPick={(item) => setSelectedTravelClass(item)}
38399
+ // />
38400
+ // <button className="cta cta--select">{translations?.SHARED.SELECT}</button>
38401
+ // </div>
38402
+ // </div>
38403
+ // <div className="flyin__acco__card">
38404
+ // <div className="flyin__acco__img__wrapper">
38405
+ // <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="flyin__acco__img" />
38406
+ // <div className="flyin__acco__price__wrapper">
38407
+ // <span className="flyin__acco__price__label">{translations?.SHARED.TOTAL_PRICE}</span>
38408
+ // <span className="flyin__acco__price flyin__acco__price--increase">+1.764,00</span>
38409
+ // </div>
38410
+ // </div>
38411
+ // <div className="flyin__acco__content">
38412
+ // <div className="flyin__acco__header">
38413
+ // <h4 className="flyin__acco__title">Standard Room</h4>
38414
+ // <div className="flyin__acco__usps">
38415
+ // <div className="flyin__acco__usp">
38416
+ // <Icon name="ui-check" width={16} />
38417
+ // <span className="flyin__acco__usp__text">Garden view</span>
38418
+ // </div>
38419
+ // <div className="flyin__acco__usp">
38420
+ // <Icon name="ui-check" width={16} />
38421
+ // <span className="flyin__acco__usp__text">Free wifi</span>
38422
+ // </div>
38423
+ // <div className="flyin__acco__usp">
38424
+ // <Icon name="ui-check" width={16} />
38425
+ // <span className="flyin__acco__usp__text">Double bed</span>
38426
+ // </div>
38427
+ // </div>
38428
+ // </div>
38429
+ // </div>
38430
+ // <div className="flyin__acco__footer">
38431
+ // <ItemPicker
38432
+ // items={travelClasses}
38433
+ // selection={selectedTravelClass}
38434
+ // label=" "
38435
+ // placeholder={translations.QSM.TRAVEL_CLASS_PLACEHOLDER}
38436
+ // classModifier="travel-class-picker__items"
38437
+ // onPick={setSelectedTravelClass}
38438
+ // />
38439
+ // <button className="cta cta--select">{translations?.SHARED.SELECT}</button>
38440
+ // </div>
38441
+ // </div>
38442
+ // <div className="flyin__acco__card">
38443
+ // <div className="flyin__acco__img__wrapper">
38444
+ // <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="flyin__acco__img" />
38445
+ // <div className="flyin__acco__price__wrapper">
38446
+ // <span className="flyin__acco__price__label">{translations?.SHARED.TOTAL_PRICE}</span>
38447
+ // <span className="flyin__acco__price flyin__acco__price--increase">+1.764,00</span>
38448
+ // </div>
38449
+ // </div>
38450
+ // <div className="flyin__acco__content">
38451
+ // <div className="flyin__acco__header">
38452
+ // <h4 className="flyin__acco__title">Suite</h4>
38453
+ // <div className="flyin__acco__usps">
38454
+ // <div className="flyin__acco__usp">
38455
+ // <Icon name="ui-check" width={16} />
38456
+ // <span className="flyin__acco__usp__text">Sea sight</span>
38457
+ // </div>
38458
+ // <div className="flyin__acco__usp">
38459
+ // <Icon name="ui-check" width={16} />
38460
+ // <span className="flyin__acco__usp__text">Free wifi</span>
38461
+ // </div>
38462
+ // <div className="flyin__acco__usp">
38463
+ // <Icon name="ui-check" width={16} />
38464
+ // <span className="flyin__acco__usp__text">Breakfast included</span>
38465
+ // </div>
38466
+ // <div className="flyin__acco__usp">
38467
+ // <Icon name="ui-check" width={16} />
38468
+ // <span className="flyin__acco__usp__text">Jacuzzi</span>
38469
+ // </div>
38470
+ // <div className="flyin__acco__usp">
38471
+ // <Icon name="ui-check" width={16} />
38472
+ // <span className="flyin__acco__usp__text">Private terrace</span>
38473
+ // </div>
38474
+ // </div>
38475
+ // </div>
38476
+ // </div>
38477
+ // <div className="flyin__acco__footer">
38478
+ // <ItemPicker
38479
+ // items={travelClasses}
38480
+ // selection={selectedTravelClass}
38481
+ // label=" "
38482
+ // placeholder={translations.QSM.TRAVEL_CLASS_PLACEHOLDER}
38483
+ // classModifier="travel-class-picker__items"
38484
+ // onPick={setSelectedTravelClass}
38485
+ // />
38486
+ // <button className="cta cta--select">{translations?.SHARED.SELECT}</button>
38487
+ // </div>
38488
+ // </div>
38489
+ // </div>
38490
+ // </div>
38491
+ // {/* {isLoading && (
38492
+ // <Spinner />
38493
+ // )} */}
38494
+ // </div>
38495
+ // <div className="flyin__footer">
38496
+ // <div className="flyin__footer__price">Total price: €</div>
38497
+ // <div className="flyin__button-wrapper">
38498
+ // <button className="cta cta--select" onClick={handleConfirm}>
38499
+ // Toevoegen
38500
+ // </button>
38501
+ // </div>
38502
+ // </div>
38503
+ // </>
38341
38504
  };
38342
38505
 
38343
38506
  var FlyIn = function (_a) {
@@ -42734,7 +42897,7 @@ var getBaseHotelResult = function (searchResult, cmsItem, languageCode, translat
42734
42897
  searchResult.countryName,
42735
42898
  (_h = cmsItem === null || cmsItem === void 0 ? void 0 : cmsItem.parentItem) === null || _h === void 0 ? void 0 : _h.name
42736
42899
  ),
42737
- price: formatPrice(searchResult.price, searchResult.currencyCode, languageCode),
42900
+ price: formatPrice$1(searchResult.price, searchResult.currencyCode, languageCode),
42738
42901
  ctaText: translations === null || translations === void 0 ? void 0 : translations.SRP.VIEW_DETAILS
42739
42902
  };
42740
42903
  };
@@ -43518,7 +43681,7 @@ var PairedFlightOption = function (_a) {
43518
43681
  React__default['default'].createElement(
43519
43682
  'span',
43520
43683
  { className: 'price' },
43521
- formatPrice(
43684
+ formatPrice$1(
43522
43685
  item.price,
43523
43686
  'EUR',
43524
43687
  (_c = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _c !== void 0 ? _c : 'en-GB'
@@ -45383,8 +45546,8 @@ var FlightFilters = function (_a) {
45383
45546
  };
45384
45547
 
45385
45548
  var selectionTypes = [
45386
- { id: 0, label: 'Independent Selection', code: 'independent' },
45387
- { id: 1, label: 'Paired Selection', code: 'paired' }
45549
+ { id: 'independent', label: 'Independent Selection' },
45550
+ { id: 'paired', label: 'Paired Selection' }
45388
45551
  ];
45389
45552
  var FlightResultsContainer = function (_a) {
45390
45553
  var _b, _c;
@@ -45509,7 +45672,7 @@ var FlightResultsContainer = function (_a) {
45509
45672
  items: selectionTypes,
45510
45673
  selection:
45511
45674
  ((_c = selectionTypes.find(function (type) {
45512
- return type.code === flightSelectionType;
45675
+ return type.id === flightSelectionType;
45513
45676
  })) === null || _c === void 0
45514
45677
  ? void 0
45515
45678
  : _c.label) || undefined,
@@ -45526,7 +45689,7 @@ var FlightResultsContainer = function (_a) {
45526
45689
  return type.label === value;
45527
45690
  })) === null || _a === void 0
45528
45691
  ? void 0
45529
- : _a.code) || 'independent'
45692
+ : _a.id) || 'independent'
45530
45693
  );
45531
45694
  }
45532
45695
  })
@@ -45924,7 +46087,7 @@ var GroupTourCard = function (_a) {
45924
46087
  React__default['default'].createElement(
45925
46088
  'div',
45926
46089
  { className: 'search__result-card__allotment__price' },
45927
- formatPrice(result.price, result.currencyCode, languageCode),
46090
+ formatPrice$1(result.price, result.currencyCode, languageCode),
45928
46091
  ' ',
45929
46092
  translations.PRODUCT.PER_PERSON
45930
46093
  )
@@ -46858,14 +47021,14 @@ var SearchResultsContainer = function () {
46858
47021
  // Seperate detailsCall
46859
47022
  React.useEffect(
46860
47023
  function () {
46861
- var fetchPackageDetails = function () {
47024
+ var fetchDetails = function () {
46862
47025
  return __awaiter(void 0, void 0, void 0, function () {
46863
47026
  var config, selectedItem, params, entryId, requestRooms, rooms, detailsRequest, detailsResponse, detailsWLResponse, err_3;
46864
47027
  var _a, _b;
46865
47028
  return __generator(this, function (_c) {
46866
47029
  switch (_c.label) {
46867
47030
  case 0:
46868
- if ((!selectedSearchResultId && !selectedPackagingAccoResultCode) || !context) return [2 /*return*/];
47031
+ if (!selectedSearchResultId || !context) return [2 /*return*/];
46869
47032
  if (
46870
47033
  (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.Accommodation ||
46871
47034
  (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.GroupTour
@@ -46956,7 +47119,126 @@ var SearchResultsContainer = function () {
46956
47119
  });
46957
47120
  });
46958
47121
  };
46959
- fetchPackageDetails();
47122
+ var fetchPackagingAccoSearchDetails = function () {
47123
+ return __awaiter(void 0, void 0, void 0, function () {
47124
+ var config,
47125
+ selectedItem,
47126
+ params,
47127
+ rooms,
47128
+ tagId,
47129
+ agentId,
47130
+ destinationAirport,
47131
+ destinationId,
47132
+ destinationIsCountry,
47133
+ destinationIsRegion,
47134
+ destinationIsOord,
47135
+ destinationIsLocation,
47136
+ destinationCode,
47137
+ destinationIsAirport,
47138
+ detailSearchRequest,
47139
+ packageAccoSearchDetails,
47140
+ err_4;
47141
+ var _a, _b;
47142
+ return __generator(this, function (_c) {
47143
+ switch (_c.label) {
47144
+ case 0:
47145
+ if (!selectedPackagingAccoResultCode || !context) return [2 /*return*/];
47146
+ if (
47147
+ (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.Accommodation ||
47148
+ (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.GroupTour
47149
+ ) {
47150
+ handleFlyInToggle(true);
47151
+ }
47152
+ _c.label = 1;
47153
+ case 1:
47154
+ _c.trys.push([1, 3, , 4]);
47155
+ config = {
47156
+ host: context.tideConnection.host,
47157
+ apiKey: context.tideConnection.apiKey
47158
+ };
47159
+ console.log('selectedPackagingAccoResultCode', selectedPackagingAccoResultCode);
47160
+ selectedItem = packagingAccoResults.find(function (r) {
47161
+ return r.code === selectedPackagingAccoResultCode;
47162
+ });
47163
+ console.log('Selected packaging acco item', selectedItem);
47164
+ if (!selectedItem) {
47165
+ // TODO: handle this case better, show an error message to the user
47166
+ return [2 /*return*/];
47167
+ }
47168
+ params = new URLSearchParams(location.search);
47169
+ rooms = getRoomsFromParams(params, 'rooms');
47170
+ tagId = getNumberFromParams(params, 'tagId');
47171
+ agentId = getNumberFromParams(params, 'agentId');
47172
+ destinationAirport = getStringFromParams(params, 'destinationAirport');
47173
+ destinationId = null;
47174
+ destinationIsCountry = false;
47175
+ destinationIsRegion = false;
47176
+ destinationIsOord = false;
47177
+ destinationIsLocation = false;
47178
+ destinationCode = null;
47179
+ destinationIsAirport = false;
47180
+ if (selectedItem.countryId) {
47181
+ destinationId = selectedItem.countryId;
47182
+ destinationIsCountry = true;
47183
+ } else if (selectedItem.regionId) {
47184
+ destinationId = selectedItem.regionId;
47185
+ destinationIsRegion = true;
47186
+ } else if (selectedItem.oordId) {
47187
+ destinationId = selectedItem.oordId;
47188
+ destinationIsOord = true;
47189
+ } else if (selectedItem.locationId) {
47190
+ destinationId = selectedItem.locationId;
47191
+ destinationIsLocation = true;
47192
+ } else if (destinationAirport) {
47193
+ destinationCode = destinationAirport;
47194
+ destinationIsAirport = true;
47195
+ }
47196
+ detailSearchRequest = {
47197
+ officeId: 1,
47198
+ portalId: context.portalId,
47199
+ agentId: agentId !== null && agentId !== void 0 ? agentId : null,
47200
+ catalogueId: (_a = context.searchConfiguration.defaultCatalogueId) !== null && _a !== void 0 ? _a : 0,
47201
+ searchConfigurationId: context.searchConfiguration.id,
47202
+ vendorConfigurationId: selectedItem.vendorId,
47203
+ language: (_b = context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB',
47204
+ serviceType: 3,
47205
+ fromDate: selectedItem.fromDate,
47206
+ toDate: selectedItem.toDate,
47207
+ destination: {
47208
+ id: Number(destinationId),
47209
+ isCountry: destinationIsCountry,
47210
+ isRegion: destinationIsRegion,
47211
+ isOord: destinationIsOord,
47212
+ isLocation: destinationIsLocation,
47213
+ isAirport: destinationIsAirport,
47214
+ code: destinationCode
47215
+ },
47216
+ productCode: selectedItem.code ? selectedItem.code : '',
47217
+ rooms: getPackagingRequestRooms(rooms),
47218
+ tagIds: tagId ? [tagId] : []
47219
+ };
47220
+ return [4 /*yield*/, build.searchPackagingAccommodations(config, detailSearchRequest)];
47221
+ case 2:
47222
+ packageAccoSearchDetails = _c.sent();
47223
+ console.log('Packaging Acco Search details', packageAccoSearchDetails);
47224
+ dispatch(setPackagingAccoSearchDetails(packageAccoSearchDetails));
47225
+ return [3 /*break*/, 4];
47226
+ case 3:
47227
+ err_4 = _c.sent();
47228
+ console.error('Failed to fetch package details', err_4);
47229
+ return [3 /*break*/, 4];
47230
+ case 4:
47231
+ return [2 /*return*/];
47232
+ }
47233
+ });
47234
+ });
47235
+ };
47236
+ if (selectedSearchResultId) {
47237
+ fetchDetails();
47238
+ }
47239
+ if (selectedPackagingAccoResultCode) {
47240
+ fetchPackagingAccoSearchDetails();
47241
+ }
46960
47242
  },
46961
47243
  [selectedSearchResultId, selectedPackagingAccoResultCode]
46962
47244
  );