@qite/tide-booking-component 1.4.85 → 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 (29) hide show
  1. package/build/build-cjs/index.js +566 -286
  2. package/build/build-cjs/src/qsm/components/item-picker/index.d.ts +4 -4
  3. package/build/build-cjs/src/qsm/store/qsm-slice.d.ts +5 -5
  4. package/build/build-cjs/src/qsm/types.d.ts +4 -9
  5. package/build/build-cjs/src/search-results/components/item-picker/index.d.ts +2 -2
  6. package/build/build-cjs/src/search-results/store/search-results-slice.d.ts +5 -0
  7. package/build/build-cjs/src/shared/types.d.ts +2 -7
  8. package/build/build-esm/index.js +566 -286
  9. package/build/build-esm/src/qsm/components/item-picker/index.d.ts +4 -4
  10. package/build/build-esm/src/qsm/store/qsm-slice.d.ts +5 -5
  11. package/build/build-esm/src/qsm/types.d.ts +4 -9
  12. package/build/build-esm/src/search-results/components/item-picker/index.d.ts +2 -2
  13. package/build/build-esm/src/search-results/store/search-results-slice.d.ts +5 -0
  14. package/build/build-esm/src/shared/types.d.ts +2 -7
  15. package/package.json +2 -2
  16. package/src/content/features/content-page/content-page-self-contained.tsx +17 -17
  17. package/src/qsm/components/item-picker/index.tsx +10 -13
  18. package/src/qsm/components/travel-class-picker/index.tsx +3 -2
  19. package/src/qsm/components/travel-nationality-picker/index.tsx +3 -2
  20. package/src/qsm/components/travel-type-picker/index.tsx +3 -2
  21. package/src/qsm/store/qsm-slice.ts +5 -5
  22. package/src/qsm/types.ts +5 -10
  23. package/src/search-results/components/item-picker/index.tsx +2 -2
  24. package/src/search-results/components/search-results-container/flight-search-results.tsx +5 -5
  25. package/src/search-results/components/search-results-container/search-results-container.tsx +96 -4
  26. package/src/search-results/store/search-results-slice.ts +6 -0
  27. package/src/shared/components/flyin/accommodation-flyin.tsx +373 -157
  28. package/src/shared/types.ts +13 -7
  29. package/styles/components/_flyin.scss +187 -158
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
  )
@@ -33057,16 +33057,16 @@ var ItemPicker$1 = function (_a) {
33057
33057
  label = _a.label,
33058
33058
  placeholder = _a.placeholder,
33059
33059
  classModifier = _a.classModifier,
33060
+ valueFormatter = _a.valueFormatter,
33060
33061
  onPick = _a.onPick;
33061
- var dispatch = reactRedux.useDispatch();
33062
33062
  var _b = React.useState(false),
33063
33063
  isDropdownOpen = _b[0],
33064
33064
  setIsDropdownOpen = _b[1];
33065
33065
  var dropdownRef = React.useRef(null);
33066
33066
  var toggleButtonRef = React.useRef(null);
33067
- var handlePick = function (picked) {
33067
+ var handlePick = function (picked, id) {
33068
33068
  setIsDropdownOpen(false);
33069
- dispatch(onPick(picked));
33069
+ onPick(picked, id);
33070
33070
  };
33071
33071
  React.useEffect(function () {
33072
33072
  var handleClickOutside = function (event) {
@@ -33105,20 +33105,21 @@ var ItemPicker$1 = function (_a) {
33105
33105
  'ul',
33106
33106
  { className: 'dropdown-menu' },
33107
33107
  items.map(function (_a) {
33108
- var label = _a.label,
33108
+ var id = _a.id,
33109
+ label = _a.label,
33109
33110
  icon = _a.icon;
33110
33111
  return React__default['default'].createElement(
33111
33112
  'li',
33112
33113
  {
33113
33114
  key: label,
33114
33115
  onClick: function (e) {
33115
- handlePick(label);
33116
+ handlePick(label, id);
33116
33117
  e.stopPropagation();
33117
33118
  },
33118
33119
  className: 'dropdown-menu__item'.concat(selection === label ? ' dropdown-menu__item--selected' : '')
33119
33120
  },
33120
33121
  icon && React__default['default'].createElement('span', { className: 'travel-class-icon' }, icon),
33121
- label
33122
+ valueFormatter ? valueFormatter(id, label) : label
33122
33123
  );
33123
33124
  })
33124
33125
  )
@@ -33135,13 +33136,16 @@ var TravelClassPicker = function () {
33135
33136
  var selectedTravelClass = reactRedux.useSelector(function (state) {
33136
33137
  return state.qsm;
33137
33138
  }).selectedTravelClass;
33139
+ var dispatch = reactRedux.useDispatch();
33138
33140
  return React__default['default'].createElement(ItemPicker$1, {
33139
33141
  items: travelClasses,
33140
33142
  selection: selectedTravelClass,
33141
33143
  label: translations.QSM.TRAVEL_CLASS_LABEL,
33142
33144
  placeholder: translations.QSM.TRAVEL_CLASS_PLACEHOLDER,
33143
33145
  classModifier: 'travel-class-picker__items',
33144
- onPick: setSelectedTravelClass
33146
+ onPick: function (picked) {
33147
+ return dispatch(setSelectedTravelClass(picked));
33148
+ }
33145
33149
  });
33146
33150
  };
33147
33151
 
@@ -33154,13 +33158,16 @@ var TravelTypePicker = function () {
33154
33158
  var selectedTravelType = reactRedux.useSelector(function (state) {
33155
33159
  return state.qsm;
33156
33160
  }).selectedTravelType;
33161
+ var dispatch = reactRedux.useDispatch();
33157
33162
  return React__default['default'].createElement(ItemPicker$1, {
33158
33163
  items: travelTypes,
33159
33164
  selection: selectedTravelType,
33160
33165
  label: translations.QSM.TRAVEL_TYPE_LABEL,
33161
33166
  placeholder: translations.QSM.TRAVEL_TYPE_PLACEHOLDER,
33162
33167
  classModifier: 'travel-type-picker__items',
33163
- onPick: setSelectedTravelType
33168
+ onPick: function (picked) {
33169
+ return dispatch(setSelectedTravelType(picked));
33170
+ }
33164
33171
  });
33165
33172
  };
33166
33173
 
@@ -33173,13 +33180,16 @@ var TravelNationalityPicker = function () {
33173
33180
  var selectedNationality = reactRedux.useSelector(function (state) {
33174
33181
  return state.qsm;
33175
33182
  }).selectedNationality;
33183
+ var dispatch = reactRedux.useDispatch();
33176
33184
  return React__default['default'].createElement(ItemPicker$1, {
33177
33185
  items: nationalities,
33178
33186
  selection: selectedNationality,
33179
33187
  label: translations.QSM.NATIONALITY_LABEL,
33180
33188
  placeholder: translations.QSM.NATIONALITY_PLACEHOLDER,
33181
33189
  classModifier: 'travel-class-picker__items',
33182
- onPick: setSelectedNationality
33190
+ onPick: function (picked) {
33191
+ return dispatch(setSelectedNationality(picked));
33192
+ }
33183
33193
  });
33184
33194
  };
33185
33195
 
@@ -33668,6 +33678,7 @@ var initialState$1 = {
33668
33678
  selectedSearchResultId: null,
33669
33679
  packagingAccoResults: [],
33670
33680
  filteredPackagingAccoResults: [],
33681
+ packagingAccoSearchDetails: [],
33671
33682
  selectedPackagingAccoResultCode: null,
33672
33683
  selectedFlight: null,
33673
33684
  selectedFlightDetails: null,
@@ -33699,6 +33710,9 @@ var searchResultsSlice = toolkit.createSlice({
33699
33710
  setFilteredPackagingAccoResults: function (state, action) {
33700
33711
  state.filteredPackagingAccoResults = action.payload;
33701
33712
  },
33713
+ setPackagingAccoSearchDetails: function (state, action) {
33714
+ state.packagingAccoSearchDetails = action.payload;
33715
+ },
33702
33716
  setSelectedPackagingAccoResult: function (state, action) {
33703
33717
  state.selectedPackagingAccoResultCode = action.payload;
33704
33718
  },
@@ -33770,6 +33784,7 @@ var setResults = ((_a = searchResultsSlice.actions), _a.setResults),
33770
33784
  setSelectedSearchResult = _a.setSelectedSearchResult,
33771
33785
  setPackagingAccoResults = _a.setPackagingAccoResults,
33772
33786
  setFilteredPackagingAccoResults = _a.setFilteredPackagingAccoResults,
33787
+ setPackagingAccoSearchDetails = _a.setPackagingAccoSearchDetails,
33773
33788
  setSelectedPackagingAccoResult = _a.setSelectedPackagingAccoResult,
33774
33789
  setSelectedFlight = _a.setSelectedFlight,
33775
33790
  setSelectedFlightDetails = _a.setSelectedFlightDetails,
@@ -34968,7 +34983,7 @@ var Itinerary = function (_a) {
34968
34983
  React__default['default'].createElement(
34969
34984
  'h3',
34970
34985
  { className: 'search__filter__prices--amount' },
34971
- formatPrice(
34986
+ formatPrice$1(
34972
34987
  ((entry === null || entry === void 0 ? void 0 : entry.sellingPrice) || 0) /
34973
34988
  ((entry === null || entry === void 0 ? void 0 : entry.numberOfPax) || 1),
34974
34989
  (entry === null || entry === void 0 ? void 0 : entry.currencyCode) || 'EUR'
@@ -34982,7 +34997,7 @@ var Itinerary = function (_a) {
34982
34997
  'strong',
34983
34998
  null,
34984
34999
  '(',
34985
- formatPrice(
35000
+ formatPrice$1(
34986
35001
  (entry === null || entry === void 0 ? void 0 : entry.sellingPrice) || 0,
34987
35002
  (entry === null || entry === void 0 ? void 0 : entry.currencyCode) || 'EUR'
34988
35003
  ),
@@ -38051,295 +38066,441 @@ var FlightsFlyIn = function (_a) {
38051
38066
  );
38052
38067
  };
38053
38068
 
38054
- var travelClasses = [
38055
- { id: 1, label: 'Standard Room' },
38056
- { id: 2, label: 'Deluxe Balcony Room' },
38057
- { id: 3, label: 'Superior Room' },
38058
- { id: 4, label: 'Family Room' },
38059
- { id: 5, label: 'Suite' }
38060
- ];
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
+ };
38061
38079
  var AccommodationFlyIn = function (_a) {
38062
38080
  var _b;
38063
38081
  _a.isLoading;
38064
38082
  var isOpen = _a.isOpen,
38065
38083
  setIsOpen = _a.setIsOpen;
38084
+ var dispatch = reactRedux.useDispatch();
38066
38085
  var context = React.useContext(SearchResultsConfigurationContext);
38067
38086
  var language = (_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB';
38068
38087
  var translations = getTranslations(language);
38069
- reactRedux.useSelector(function (state) {
38070
- return state.searchResults;
38071
- }).selectedSearchResultId;
38072
- var _c = React.useState('Standard Room'),
38073
- selectedTravelClass = _c[0],
38074
- 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
+ };
38075
38183
  var handleConfirm = function () {
38076
38184
  if (isOpen) {
38077
38185
  setIsOpen(false);
38078
38186
  }
38079
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
+ };
38080
38249
  return React__default['default'].createElement(
38081
38250
  React__default['default'].Fragment,
38082
38251
  null,
38083
38252
  React__default['default'].createElement(
38084
38253
  'div',
38085
38254
  { className: 'flyin__content' },
38086
- React__default['default'].createElement(
38087
- 'div',
38088
- { className: 'flyin__acco' },
38089
- React__default['default'].createElement(
38255
+ groupedRooms.map(function (roomAccommodations, roomIndex) {
38256
+ var selectedRoomOption = getSelectedOptionForRoom(roomIndex);
38257
+ return React__default['default'].createElement(
38090
38258
  'div',
38091
- { 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),
38092
38261
  React__default['default'].createElement(
38093
38262
  'div',
38094
- { className: 'flyin__acco__card' },
38095
- React__default['default'].createElement(
38096
- 'div',
38097
- { className: 'flyin__acco__img__wrapper' },
38098
- React__default['default'].createElement('img', {
38099
- src: 'https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg',
38100
- alt: 'river',
38101
- className: 'flyin__acco__img'
38102
- }),
38103
- React__default['default'].createElement(
38104
- 'div',
38105
- { className: 'flyin__acco__price__wrapper' },
38106
- React__default['default'].createElement(
38107
- 'span',
38108
- { className: 'flyin__acco__price__label' },
38109
- translations === null || translations === void 0 ? void 0 : translations.SHARED.TOTAL_PRICE
38110
- ),
38111
- React__default['default'].createElement('span', { className: 'flyin__acco__price flyin__acco__price--increase' }, '+1.764,00')
38112
- )
38113
- ),
38114
- React__default['default'].createElement(
38115
- 'div',
38116
- { className: 'flyin__acco__content' },
38117
- React__default['default'].createElement(
38118
- 'div',
38119
- { className: 'flyin__acco__header' },
38120
- React__default['default'].createElement('h4', { className: 'flyin__acco__title' }, 'Deluxe Balcony Room'),
38121
- React__default['default'].createElement(
38122
- 'div',
38123
- { className: 'flyin__acco__usps' },
38124
- React__default['default'].createElement(
38125
- 'div',
38126
- { className: 'flyin__acco__usp' },
38127
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38128
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Sea sight')
38129
- ),
38130
- React__default['default'].createElement(
38131
- 'div',
38132
- { className: 'flyin__acco__usp' },
38133
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38134
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Free wifi')
38135
- ),
38136
- React__default['default'].createElement(
38137
- 'div',
38138
- { className: 'flyin__acco__usp' },
38139
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38140
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Breakfast included')
38141
- ),
38142
- React__default['default'].createElement(
38143
- 'div',
38144
- { className: 'flyin__acco__usp' },
38145
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38146
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Air conditioning')
38147
- ),
38148
- React__default['default'].createElement(
38149
- 'div',
38150
- { className: 'flyin__acco__usp' },
38151
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38152
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Private bathroom')
38153
- )
38154
- )
38155
- )
38156
- ),
38157
- React__default['default'].createElement(
38158
- 'div',
38159
- { className: 'flyin__acco__footer' },
38160
- React__default['default'].createElement(ItemPicker$1, {
38161
- items: travelClasses,
38162
- selection: selectedTravelClass,
38163
- label: ' ',
38164
- placeholder: translations.QSM.TRAVEL_CLASS_PLACEHOLDER,
38165
- classModifier: 'travel-class-picker__items',
38166
- onPick: setSelectedTravelClass
38167
- }),
38168
- React__default['default'].createElement(
38169
- 'button',
38170
- { className: 'cta cta--select' },
38171
- translations === null || translations === void 0 ? void 0 : translations.SHARED.SELECT
38172
- )
38173
- )
38174
- ),
38175
- React__default['default'].createElement(
38176
- 'div',
38177
- { className: 'flyin__acco__card' },
38178
- React__default['default'].createElement(
38179
- 'div',
38180
- { className: 'flyin__acco__img__wrapper' },
38181
- React__default['default'].createElement('img', {
38182
- src: 'https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg',
38183
- alt: 'river',
38184
- className: 'flyin__acco__img'
38185
- }),
38186
- React__default['default'].createElement(
38187
- 'div',
38188
- { className: 'flyin__acco__price__wrapper' },
38189
- React__default['default'].createElement(
38190
- 'span',
38191
- { className: 'flyin__acco__price__label' },
38192
- translations === null || translations === void 0 ? void 0 : translations.SHARED.TOTAL_PRICE
38193
- ),
38194
- React__default['default'].createElement('span', { className: 'flyin__acco__price flyin__acco__price--increase' }, '+1.764,00')
38195
- )
38196
- ),
38197
- React__default['default'].createElement(
38198
- 'div',
38199
- { className: 'flyin__acco__content' },
38200
- 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(
38201
38272
  'div',
38202
- { className: 'flyin__acco__header' },
38203
- React__default['default'].createElement('h4', { className: 'flyin__acco__title' }, 'Standard Room'),
38273
+ { className: 'flyin__acco__card', key: ''.concat(roomIndex, '-').concat(accommodation.accommodationCode) },
38204
38274
  React__default['default'].createElement(
38205
38275
  'div',
38206
- { className: 'flyin__acco__usps' },
38207
- React__default['default'].createElement(
38208
- 'div',
38209
- { className: 'flyin__acco__usp' },
38210
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38211
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Garden view')
38212
- ),
38213
- React__default['default'].createElement(
38214
- 'div',
38215
- { className: 'flyin__acco__usp' },
38216
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38217
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Free wifi')
38218
- ),
38219
- React__default['default'].createElement(
38220
- 'div',
38221
- { className: 'flyin__acco__usp' },
38222
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38223
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Double bed')
38224
- )
38225
- )
38226
- )
38227
- ),
38228
- React__default['default'].createElement(
38229
- 'div',
38230
- { className: 'flyin__acco__footer' },
38231
- React__default['default'].createElement(ItemPicker$1, {
38232
- items: travelClasses,
38233
- selection: selectedTravelClass,
38234
- label: ' ',
38235
- placeholder: translations.QSM.TRAVEL_CLASS_PLACEHOLDER,
38236
- classModifier: 'travel-class-picker__items',
38237
- onPick: setSelectedTravelClass
38238
- }),
38239
- React__default['default'].createElement(
38240
- 'button',
38241
- { className: 'cta cta--select' },
38242
- translations === null || translations === void 0 ? void 0 : translations.SHARED.SELECT
38243
- )
38244
- )
38245
- ),
38246
- React__default['default'].createElement(
38247
- 'div',
38248
- { className: 'flyin__acco__card' },
38249
- React__default['default'].createElement(
38250
- 'div',
38251
- { className: 'flyin__acco__img__wrapper' },
38252
- React__default['default'].createElement('img', {
38253
- src: 'https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg',
38254
- alt: 'river',
38255
- className: 'flyin__acco__img'
38256
- }),
38257
- React__default['default'].createElement(
38258
- 'div',
38259
- { className: 'flyin__acco__price__wrapper' },
38260
- React__default['default'].createElement(
38261
- 'span',
38262
- { className: 'flyin__acco__price__label' },
38263
- 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)
38264
38278
  ),
38265
- React__default['default'].createElement('span', { className: 'flyin__acco__price flyin__acco__price--increase' }, '+1.764,00')
38266
- )
38267
- ),
38268
- React__default['default'].createElement(
38269
- 'div',
38270
- { className: 'flyin__acco__content' },
38271
- React__default['default'].createElement(
38272
- 'div',
38273
- { className: 'flyin__acco__header' },
38274
- React__default['default'].createElement('h4', { className: 'flyin__acco__title' }, 'Suite'),
38275
38279
  React__default['default'].createElement(
38276
38280
  'div',
38277
- { className: 'flyin__acco__usps' },
38278
- React__default['default'].createElement(
38279
- 'div',
38280
- { className: 'flyin__acco__usp' },
38281
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38282
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Sea sight')
38283
- ),
38284
- React__default['default'].createElement(
38285
- 'div',
38286
- { className: 'flyin__acco__usp' },
38287
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38288
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Free wifi')
38289
- ),
38290
- React__default['default'].createElement(
38291
- 'div',
38292
- { className: 'flyin__acco__usp' },
38293
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38294
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Breakfast included')
38295
- ),
38296
- React__default['default'].createElement(
38297
- 'div',
38298
- { className: 'flyin__acco__usp' },
38299
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38300
- React__default['default'].createElement('span', { className: 'flyin__acco__usp__text' }, 'Jacuzzi')
38301
- ),
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
+ }),
38302
38295
  React__default['default'].createElement(
38303
38296
  'div',
38304
- { className: 'flyin__acco__usp' },
38305
- React__default['default'].createElement(Icon, { name: 'ui-check', width: 16 }),
38306
- 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
+ )
38307
38332
  )
38308
38333
  )
38309
- )
38310
- ),
38311
- React__default['default'].createElement(
38312
- 'div',
38313
- { className: 'flyin__acco__footer' },
38314
- React__default['default'].createElement(ItemPicker$1, {
38315
- items: travelClasses,
38316
- selection: selectedTravelClass,
38317
- label: ' ',
38318
- placeholder: translations.QSM.TRAVEL_CLASS_PLACEHOLDER,
38319
- classModifier: 'travel-class-picker__items',
38320
- onPick: setSelectedTravelClass
38321
- }),
38322
- React__default['default'].createElement(
38323
- 'button',
38324
- { className: 'cta cta--select' },
38325
- translations === null || translations === void 0 ? void 0 : translations.SHARED.SELECT
38326
- )
38327
- )
38334
+ );
38335
+ })
38328
38336
  )
38329
- )
38330
- )
38337
+ );
38338
+ })
38331
38339
  ),
38332
38340
  React__default['default'].createElement(
38333
38341
  'div',
38334
38342
  { className: 'flyin__footer' },
38335
- 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()),
38336
38344
  React__default['default'].createElement(
38337
38345
  'div',
38338
38346
  { className: 'flyin__button-wrapper' },
38339
- 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)
38340
38348
  )
38341
38349
  )
38342
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
+ // </>
38343
38504
  };
38344
38505
 
38345
38506
  var FlyIn = function (_a) {
@@ -42736,7 +42897,7 @@ var getBaseHotelResult = function (searchResult, cmsItem, languageCode, translat
42736
42897
  searchResult.countryName,
42737
42898
  (_h = cmsItem === null || cmsItem === void 0 ? void 0 : cmsItem.parentItem) === null || _h === void 0 ? void 0 : _h.name
42738
42899
  ),
42739
- price: formatPrice(searchResult.price, searchResult.currencyCode, languageCode),
42900
+ price: formatPrice$1(searchResult.price, searchResult.currencyCode, languageCode),
42740
42901
  ctaText: translations === null || translations === void 0 ? void 0 : translations.SRP.VIEW_DETAILS
42741
42902
  };
42742
42903
  };
@@ -43520,7 +43681,7 @@ var PairedFlightOption = function (_a) {
43520
43681
  React__default['default'].createElement(
43521
43682
  'span',
43522
43683
  { className: 'price' },
43523
- formatPrice(
43684
+ formatPrice$1(
43524
43685
  item.price,
43525
43686
  'EUR',
43526
43687
  (_c = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _c !== void 0 ? _c : 'en-GB'
@@ -45385,8 +45546,8 @@ var FlightFilters = function (_a) {
45385
45546
  };
45386
45547
 
45387
45548
  var selectionTypes = [
45388
- { id: 0, label: 'Independent Selection', code: 'independent' },
45389
- { id: 1, label: 'Paired Selection', code: 'paired' }
45549
+ { id: 'independent', label: 'Independent Selection' },
45550
+ { id: 'paired', label: 'Paired Selection' }
45390
45551
  ];
45391
45552
  var FlightResultsContainer = function (_a) {
45392
45553
  var _b, _c;
@@ -45511,7 +45672,7 @@ var FlightResultsContainer = function (_a) {
45511
45672
  items: selectionTypes,
45512
45673
  selection:
45513
45674
  ((_c = selectionTypes.find(function (type) {
45514
- return type.code === flightSelectionType;
45675
+ return type.id === flightSelectionType;
45515
45676
  })) === null || _c === void 0
45516
45677
  ? void 0
45517
45678
  : _c.label) || undefined,
@@ -45528,7 +45689,7 @@ var FlightResultsContainer = function (_a) {
45528
45689
  return type.label === value;
45529
45690
  })) === null || _a === void 0
45530
45691
  ? void 0
45531
- : _a.code) || 'independent'
45692
+ : _a.id) || 'independent'
45532
45693
  );
45533
45694
  }
45534
45695
  })
@@ -45926,7 +46087,7 @@ var GroupTourCard = function (_a) {
45926
46087
  React__default['default'].createElement(
45927
46088
  'div',
45928
46089
  { className: 'search__result-card__allotment__price' },
45929
- formatPrice(result.price, result.currencyCode, languageCode),
46090
+ formatPrice$1(result.price, result.currencyCode, languageCode),
45930
46091
  ' ',
45931
46092
  translations.PRODUCT.PER_PERSON
45932
46093
  )
@@ -46860,14 +47021,14 @@ var SearchResultsContainer = function () {
46860
47021
  // Seperate detailsCall
46861
47022
  React.useEffect(
46862
47023
  function () {
46863
- var fetchPackageDetails = function () {
47024
+ var fetchDetails = function () {
46864
47025
  return __awaiter(void 0, void 0, void 0, function () {
46865
47026
  var config, selectedItem, params, entryId, requestRooms, rooms, detailsRequest, detailsResponse, detailsWLResponse, err_3;
46866
47027
  var _a, _b;
46867
47028
  return __generator(this, function (_c) {
46868
47029
  switch (_c.label) {
46869
47030
  case 0:
46870
- if ((!selectedSearchResultId && !selectedPackagingAccoResultCode) || !context) return [2 /*return*/];
47031
+ if (!selectedSearchResultId || !context) return [2 /*return*/];
46871
47032
  if (
46872
47033
  (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.Accommodation ||
46873
47034
  (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.GroupTour
@@ -46958,7 +47119,126 @@ var SearchResultsContainer = function () {
46958
47119
  });
46959
47120
  });
46960
47121
  };
46961
- 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
+ }
46962
47242
  },
46963
47243
  [selectedSearchResultId, selectedPackagingAccoResultCode]
46964
47244
  );