@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-esm/index.js CHANGED
@@ -6753,7 +6753,7 @@ var DepartureRange;
6753
6753
  DepartureRange[(DepartureRange['Night'] = 3)] = 'Night';
6754
6754
  })(DepartureRange || (DepartureRange = {}));
6755
6755
 
6756
- var formatPrice = function (price, currencyCode, locale) {
6756
+ var formatPrice$1 = function (price, currencyCode, locale) {
6757
6757
  if (locale === void 0) {
6758
6758
  locale = 'nl-BE';
6759
6759
  }
@@ -6860,7 +6860,7 @@ function getLocale(code) {
6860
6860
  }
6861
6861
  }
6862
6862
  var getPriceDifferenceText = function (price, currencyCode) {
6863
- return price > 0 ? '+ '.concat(formatPrice(Math.abs(price), currencyCode)) : '- '.concat(formatPrice(Math.abs(price), currencyCode));
6863
+ return price > 0 ? '+ '.concat(formatPrice$1(Math.abs(price), currencyCode)) : '- '.concat(formatPrice$1(Math.abs(price), currencyCode));
6864
6864
  };
6865
6865
  function format(text, args) {
6866
6866
  return text.replace(/{([0-9]+)}/g, function (match, index) {
@@ -13584,16 +13584,16 @@ var formatPriceByMode = function (price, priceMode, personCount, duration, perPe
13584
13584
  if (!price) return '';
13585
13585
  switch (priceMode) {
13586
13586
  case 0:
13587
- return ''.concat(formatPrice(price, currencyCode));
13587
+ return ''.concat(formatPrice$1(price, currencyCode));
13588
13588
  case 1:
13589
13589
  var perPersonPrice = price / personCount;
13590
- return ''.concat(formatPrice(perPersonPrice, currencyCode), ' / ').concat(perPersonLabel);
13590
+ return ''.concat(formatPrice$1(perPersonPrice, currencyCode), ' / ').concat(perPersonLabel);
13591
13591
  case 2:
13592
13592
  var perNightPrice = price / duration;
13593
- return ''.concat(formatPrice(perNightPrice, currencyCode), ' / ').concat(perNightLabel);
13593
+ return ''.concat(formatPrice$1(perNightPrice, currencyCode), ' / ').concat(perNightLabel);
13594
13594
  case 3:
13595
13595
  var perPersonPerNightPrice = price / duration;
13596
- return ''.concat(formatPrice(perPersonPerNightPrice, currencyCode), ' / ').concat(perPersonPerNightLabel);
13596
+ return ''.concat(formatPrice$1(perPersonPerNightPrice, currencyCode), ' / ').concat(perPersonPerNightLabel);
13597
13597
  }
13598
13598
  };
13599
13599
 
@@ -22000,7 +22000,7 @@ var NoneOption = function (_a) {
22000
22000
  return x.requirementType === 2;
22001
22001
  });
22002
22002
  var noneSelected = !selectedOption;
22003
- var priceDifferencetext = selectedOption ? '- '.concat(formatPrice(Math.abs(selectedOption.line.price), currencyCode)) : '';
22003
+ var priceDifferencetext = selectedOption ? '- '.concat(formatPrice$1(Math.abs(selectedOption.line.price), currencyCode)) : '';
22004
22004
  return React__default.createElement(
22005
22005
  React__default.Fragment,
22006
22006
  null,
@@ -23273,7 +23273,7 @@ var OptionRoom = function (_a) {
23273
23273
  e.preventDefault();
23274
23274
  };
23275
23275
  var getPriceDifferenceText = function (price) {
23276
- return price > 0 ? '+ '.concat(formatPrice(Math.abs(price), currencyCode)) : '- '.concat(formatPrice(Math.abs(price), currencyCode));
23276
+ return price > 0 ? '+ '.concat(formatPrice$1(Math.abs(price), currencyCode)) : '- '.concat(formatPrice$1(Math.abs(price), currencyCode));
23277
23277
  };
23278
23278
  var getAccommodationPriceDifference = function (accommodation) {
23279
23279
  var _a;
@@ -24793,7 +24793,7 @@ var Sidebar = function (_a) {
24793
24793
  { className: 'pricing-summary__property' },
24794
24794
  React__default.createElement('h6', { className: 'pricing-summary__title' }, translations.SIDEBAR.BASE_PRICE)
24795
24795
  ),
24796
- React__default.createElement('div', { className: 'pricing-summary__value' }, formatPrice(basePrice, currencyCode))
24796
+ React__default.createElement('div', { className: 'pricing-summary__value' }, formatPrice$1(basePrice, currencyCode))
24797
24797
  ),
24798
24798
  basePricePerPaxType &&
24799
24799
  basePricePerPaxType.map(function (ppt, index) {
@@ -24810,7 +24810,7 @@ var Sidebar = function (_a) {
24810
24810
  ' ',
24811
24811
  getPaxTypeTranslation(translations, ppt.paxType, ppt.numberOfPax)
24812
24812
  ),
24813
- React__default.createElement('div', { className: 'pricing-summary__value' }, formatPrice(ppt.pricePerPaxType, currencyCode))
24813
+ React__default.createElement('div', { className: 'pricing-summary__value' }, formatPrice$1(ppt.pricePerPaxType, currencyCode))
24814
24814
  ),
24815
24815
  ppt.details.map(function (detail, dIndex) {
24816
24816
  return React__default.createElement(
@@ -24823,7 +24823,7 @@ var Sidebar = function (_a) {
24823
24823
  React__default.createElement(
24824
24824
  'div',
24825
24825
  { className: 'pricing-summary__value' },
24826
- formatPrice(detail.price / detail.numberOfPax, currencyCode)
24826
+ formatPrice$1(detail.price / detail.numberOfPax, currencyCode)
24827
24827
  )
24828
24828
  );
24829
24829
  })
@@ -24850,7 +24850,7 @@ var Sidebar = function (_a) {
24850
24850
  React__default.createElement(
24851
24851
  'div',
24852
24852
  { className: 'pricing-summary__value' },
24853
- formatPrice(priceDetail.price * priceDetail.amount, currencyCode)
24853
+ formatPrice$1(priceDetail.price * priceDetail.amount, currencyCode)
24854
24854
  )
24855
24855
  ),
24856
24856
  React__default.createElement(
@@ -24885,7 +24885,7 @@ var Sidebar = function (_a) {
24885
24885
  React__default.createElement(
24886
24886
  'div',
24887
24887
  { className: 'pricing-summary__value' },
24888
- formatPrice(priceDetail.price * priceDetail.amount, currencyCode)
24888
+ formatPrice$1(priceDetail.price * priceDetail.amount, currencyCode)
24889
24889
  )
24890
24890
  ),
24891
24891
  React__default.createElement(
@@ -24915,7 +24915,7 @@ var Sidebar = function (_a) {
24915
24915
  React__default.createElement(
24916
24916
  'div',
24917
24917
  { className: 'pricing-summary__value' },
24918
- formatPrice(ppt.pricePerPaxType, currencyCode)
24918
+ formatPrice$1(ppt.pricePerPaxType, currencyCode)
24919
24919
  )
24920
24920
  ),
24921
24921
  ppt.details.map(function (detail, dIndex) {
@@ -24935,7 +24935,7 @@ var Sidebar = function (_a) {
24935
24935
  React__default.createElement(
24936
24936
  'div',
24937
24937
  { className: 'pricing-summary__value' },
24938
- formatPrice(detail.price / detail.numberOfPax, currencyCode)
24938
+ formatPrice$1(detail.price / detail.numberOfPax, currencyCode)
24939
24939
  )
24940
24940
  );
24941
24941
  })
@@ -24977,7 +24977,7 @@ var Sidebar = function (_a) {
24977
24977
  React__default.createElement(
24978
24978
  'div',
24979
24979
  { className: 'pricing' },
24980
- React__default.createElement('div', { className: 'pricing__price' }, formatPrice(totalPrice, currencyCode))
24980
+ React__default.createElement('div', { className: 'pricing__price' }, formatPrice$1(totalPrice, currencyCode))
24981
24981
  )
24982
24982
  )
24983
24983
  ),
@@ -24995,7 +24995,7 @@ var Sidebar = function (_a) {
24995
24995
  React__default.createElement(
24996
24996
  'div',
24997
24997
  { className: 'pricing' },
24998
- React__default.createElement('div', { className: 'pricing__price' }, formatPrice(deposit, currencyCode))
24998
+ React__default.createElement('div', { className: 'pricing__price' }, formatPrice$1(deposit, currencyCode))
24999
24999
  )
25000
25000
  )
25001
25001
  ),
@@ -25011,7 +25011,7 @@ var Sidebar = function (_a) {
25011
25011
  translations.SIDEBAR.DEPOSIT_TEXT1,
25012
25012
  React__default.createElement('strong', null, translations.SIDEBAR.DEPOSIT_TEXT2),
25013
25013
  translations.SIDEBAR.DEPOSIT_TEXT3,
25014
- formatPrice(remainingAmount, currencyCode),
25014
+ formatPrice$1(remainingAmount, currencyCode),
25015
25015
  translations.SIDEBAR.DEPOSIT_TEXT4,
25016
25016
  React__default.createElement('strong', null, translations.SIDEBAR.DEPOSIT_TEXT5),
25017
25017
  translations.SIDEBAR.DEPOSIT_TEXT6
@@ -25038,7 +25038,7 @@ var Sidebar = function (_a) {
25038
25038
  React__default.createElement(
25039
25039
  'div',
25040
25040
  { className: 'pricing' },
25041
- React__default.createElement('div', { className: 'pricing__price' }, formatPrice(totalPrice, currencyCode))
25041
+ React__default.createElement('div', { className: 'pricing__price' }, formatPrice$1(totalPrice, currencyCode))
25042
25042
  )
25043
25043
  )
25044
25044
  )
@@ -32923,16 +32923,16 @@ var ItemPicker$1 = function (_a) {
32923
32923
  label = _a.label,
32924
32924
  placeholder = _a.placeholder,
32925
32925
  classModifier = _a.classModifier,
32926
+ valueFormatter = _a.valueFormatter,
32926
32927
  onPick = _a.onPick;
32927
- var dispatch = useDispatch();
32928
32928
  var _b = useState(false),
32929
32929
  isDropdownOpen = _b[0],
32930
32930
  setIsDropdownOpen = _b[1];
32931
32931
  var dropdownRef = useRef(null);
32932
32932
  var toggleButtonRef = useRef(null);
32933
- var handlePick = function (picked) {
32933
+ var handlePick = function (picked, id) {
32934
32934
  setIsDropdownOpen(false);
32935
- dispatch(onPick(picked));
32935
+ onPick(picked, id);
32936
32936
  };
32937
32937
  useEffect(function () {
32938
32938
  var handleClickOutside = function (event) {
@@ -32971,20 +32971,21 @@ var ItemPicker$1 = function (_a) {
32971
32971
  'ul',
32972
32972
  { className: 'dropdown-menu' },
32973
32973
  items.map(function (_a) {
32974
- var label = _a.label,
32974
+ var id = _a.id,
32975
+ label = _a.label,
32975
32976
  icon = _a.icon;
32976
32977
  return React__default.createElement(
32977
32978
  'li',
32978
32979
  {
32979
32980
  key: label,
32980
32981
  onClick: function (e) {
32981
- handlePick(label);
32982
+ handlePick(label, id);
32982
32983
  e.stopPropagation();
32983
32984
  },
32984
32985
  className: 'dropdown-menu__item'.concat(selection === label ? ' dropdown-menu__item--selected' : '')
32985
32986
  },
32986
32987
  icon && React__default.createElement('span', { className: 'travel-class-icon' }, icon),
32987
- label
32988
+ valueFormatter ? valueFormatter(id, label) : label
32988
32989
  );
32989
32990
  })
32990
32991
  )
@@ -33001,13 +33002,16 @@ var TravelClassPicker = function () {
33001
33002
  var selectedTravelClass = useSelector(function (state) {
33002
33003
  return state.qsm;
33003
33004
  }).selectedTravelClass;
33005
+ var dispatch = useDispatch();
33004
33006
  return React__default.createElement(ItemPicker$1, {
33005
33007
  items: travelClasses,
33006
33008
  selection: selectedTravelClass,
33007
33009
  label: translations.QSM.TRAVEL_CLASS_LABEL,
33008
33010
  placeholder: translations.QSM.TRAVEL_CLASS_PLACEHOLDER,
33009
33011
  classModifier: 'travel-class-picker__items',
33010
- onPick: setSelectedTravelClass
33012
+ onPick: function (picked) {
33013
+ return dispatch(setSelectedTravelClass(picked));
33014
+ }
33011
33015
  });
33012
33016
  };
33013
33017
 
@@ -33020,13 +33024,16 @@ var TravelTypePicker = function () {
33020
33024
  var selectedTravelType = useSelector(function (state) {
33021
33025
  return state.qsm;
33022
33026
  }).selectedTravelType;
33027
+ var dispatch = useDispatch();
33023
33028
  return React__default.createElement(ItemPicker$1, {
33024
33029
  items: travelTypes,
33025
33030
  selection: selectedTravelType,
33026
33031
  label: translations.QSM.TRAVEL_TYPE_LABEL,
33027
33032
  placeholder: translations.QSM.TRAVEL_TYPE_PLACEHOLDER,
33028
33033
  classModifier: 'travel-type-picker__items',
33029
- onPick: setSelectedTravelType
33034
+ onPick: function (picked) {
33035
+ return dispatch(setSelectedTravelType(picked));
33036
+ }
33030
33037
  });
33031
33038
  };
33032
33039
 
@@ -33039,13 +33046,16 @@ var TravelNationalityPicker = function () {
33039
33046
  var selectedNationality = useSelector(function (state) {
33040
33047
  return state.qsm;
33041
33048
  }).selectedNationality;
33049
+ var dispatch = useDispatch();
33042
33050
  return React__default.createElement(ItemPicker$1, {
33043
33051
  items: nationalities,
33044
33052
  selection: selectedNationality,
33045
33053
  label: translations.QSM.NATIONALITY_LABEL,
33046
33054
  placeholder: translations.QSM.NATIONALITY_PLACEHOLDER,
33047
33055
  classModifier: 'travel-class-picker__items',
33048
- onPick: setSelectedNationality
33056
+ onPick: function (picked) {
33057
+ return dispatch(setSelectedNationality(picked));
33058
+ }
33049
33059
  });
33050
33060
  };
33051
33061
 
@@ -33527,6 +33537,7 @@ var initialState$1 = {
33527
33537
  selectedSearchResultId: null,
33528
33538
  packagingAccoResults: [],
33529
33539
  filteredPackagingAccoResults: [],
33540
+ packagingAccoSearchDetails: [],
33530
33541
  selectedPackagingAccoResultCode: null,
33531
33542
  selectedFlight: null,
33532
33543
  selectedFlightDetails: null,
@@ -33558,6 +33569,9 @@ var searchResultsSlice = createSlice({
33558
33569
  setFilteredPackagingAccoResults: function (state, action) {
33559
33570
  state.filteredPackagingAccoResults = action.payload;
33560
33571
  },
33572
+ setPackagingAccoSearchDetails: function (state, action) {
33573
+ state.packagingAccoSearchDetails = action.payload;
33574
+ },
33561
33575
  setSelectedPackagingAccoResult: function (state, action) {
33562
33576
  state.selectedPackagingAccoResultCode = action.payload;
33563
33577
  },
@@ -33629,6 +33643,7 @@ var setResults = ((_a = searchResultsSlice.actions), _a.setResults),
33629
33643
  setSelectedSearchResult = _a.setSelectedSearchResult,
33630
33644
  setPackagingAccoResults = _a.setPackagingAccoResults,
33631
33645
  setFilteredPackagingAccoResults = _a.setFilteredPackagingAccoResults,
33646
+ setPackagingAccoSearchDetails = _a.setPackagingAccoSearchDetails,
33632
33647
  setSelectedPackagingAccoResult = _a.setSelectedPackagingAccoResult,
33633
33648
  setSelectedFlight = _a.setSelectedFlight,
33634
33649
  setSelectedFlightDetails = _a.setSelectedFlightDetails,
@@ -34825,7 +34840,7 @@ var Itinerary = function (_a) {
34825
34840
  React__default.createElement(
34826
34841
  'h3',
34827
34842
  { className: 'search__filter__prices--amount' },
34828
- formatPrice(
34843
+ formatPrice$1(
34829
34844
  ((entry === null || entry === void 0 ? void 0 : entry.sellingPrice) || 0) /
34830
34845
  ((entry === null || entry === void 0 ? void 0 : entry.numberOfPax) || 1),
34831
34846
  (entry === null || entry === void 0 ? void 0 : entry.currencyCode) || 'EUR'
@@ -34839,7 +34854,7 @@ var Itinerary = function (_a) {
34839
34854
  'strong',
34840
34855
  null,
34841
34856
  '(',
34842
- formatPrice(
34857
+ formatPrice$1(
34843
34858
  (entry === null || entry === void 0 ? void 0 : entry.sellingPrice) || 0,
34844
34859
  (entry === null || entry === void 0 ? void 0 : entry.currencyCode) || 'EUR'
34845
34860
  ),
@@ -37874,295 +37889,441 @@ var FlightsFlyIn = function (_a) {
37874
37889
  );
37875
37890
  };
37876
37891
 
37877
- var travelClasses = [
37878
- { id: 1, label: 'Standard Room' },
37879
- { id: 2, label: 'Deluxe Balcony Room' },
37880
- { id: 3, label: 'Superior Room' },
37881
- { id: 4, label: 'Family Room' },
37882
- { id: 5, label: 'Suite' }
37883
- ];
37892
+ var formatPrice = function (price, currencyCode) {
37893
+ if (currencyCode === void 0) {
37894
+ currencyCode = 'EUR';
37895
+ }
37896
+ if (typeof price !== 'number') return '';
37897
+ return new Intl.NumberFormat('nl-BE', {
37898
+ style: 'currency',
37899
+ currency: currencyCode
37900
+ }).format(price);
37901
+ };
37884
37902
  var AccommodationFlyIn = function (_a) {
37885
37903
  var _b;
37886
37904
  _a.isLoading;
37887
37905
  var isOpen = _a.isOpen,
37888
37906
  setIsOpen = _a.setIsOpen;
37907
+ var dispatch = useDispatch();
37889
37908
  var context = useContext(SearchResultsConfigurationContext);
37890
37909
  var language = (_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB';
37891
37910
  var translations = getTranslations(language);
37892
- useSelector(function (state) {
37893
- return state.searchResults;
37894
- }).selectedSearchResultId;
37895
- var _c = useState('Standard Room'),
37896
- selectedTravelClass = _c[0],
37897
- setSelectedTravelClass = _c[1];
37911
+ var _c = useSelector(function (state) {
37912
+ return state.searchResults;
37913
+ }),
37914
+ packagingAccoSearchDetails = _c.packagingAccoSearchDetails,
37915
+ selectedPackagingAccoResultCode = _c.selectedPackagingAccoResultCode;
37916
+ var selectedPackagingAccoSearchDetails = useMemo(
37917
+ function () {
37918
+ return packagingAccoSearchDetails === null || packagingAccoSearchDetails === void 0
37919
+ ? void 0
37920
+ : packagingAccoSearchDetails.find(function (x) {
37921
+ return x.code === selectedPackagingAccoResultCode;
37922
+ });
37923
+ },
37924
+ [packagingAccoSearchDetails, selectedPackagingAccoResultCode]
37925
+ );
37926
+ var groupedRooms = useMemo(
37927
+ function () {
37928
+ if (!(selectedPackagingAccoSearchDetails === null || selectedPackagingAccoSearchDetails === void 0 ? void 0 : selectedPackagingAccoSearchDetails.rooms))
37929
+ return [];
37930
+ return selectedPackagingAccoSearchDetails.rooms.map(function (room) {
37931
+ var groupedMap = new Map();
37932
+ room.options.forEach(function (option) {
37933
+ var _a;
37934
+ var key = option.accommodationCode;
37935
+ if (!groupedMap.has(key)) {
37936
+ groupedMap.set(key, {
37937
+ accommodationCode: option.accommodationCode,
37938
+ accommodationName: option.accommodationName,
37939
+ regimes: []
37940
+ });
37941
+ }
37942
+ (_a = groupedMap.get(key)) === null || _a === void 0
37943
+ ? void 0
37944
+ : _a.regimes.push({
37945
+ id: option.guid,
37946
+ label: option.regimeName
37947
+ });
37948
+ });
37949
+ return Array.from(groupedMap.values());
37950
+ });
37951
+ },
37952
+ [selectedPackagingAccoSearchDetails]
37953
+ );
37954
+ var getSelectedOptionForRoom = function (roomIndex) {
37955
+ var _a, _b, _c;
37956
+ return (_c =
37957
+ (_b =
37958
+ (_a =
37959
+ selectedPackagingAccoSearchDetails === null || selectedPackagingAccoSearchDetails === void 0 ? void 0 : selectedPackagingAccoSearchDetails.rooms) ===
37960
+ null || _a === void 0
37961
+ ? void 0
37962
+ : _a[roomIndex]) === null || _b === void 0
37963
+ ? void 0
37964
+ : _b.options) === null || _c === void 0
37965
+ ? void 0
37966
+ : _c.find(function (option) {
37967
+ return option.isSelected;
37968
+ });
37969
+ };
37970
+ var getSelectedOptionForAccommodation = function (roomIndex, accommodationCode) {
37971
+ var _a, _b, _c;
37972
+ return (_c =
37973
+ (_b =
37974
+ (_a =
37975
+ selectedPackagingAccoSearchDetails === null || selectedPackagingAccoSearchDetails === void 0 ? void 0 : selectedPackagingAccoSearchDetails.rooms) ===
37976
+ null || _a === void 0
37977
+ ? void 0
37978
+ : _a[roomIndex]) === null || _b === void 0
37979
+ ? void 0
37980
+ : _b.options) === null || _c === void 0
37981
+ ? void 0
37982
+ : _c.find(function (option) {
37983
+ return option.accommodationCode === accommodationCode && option.isSelected;
37984
+ });
37985
+ };
37986
+ var handlePick = function (roomIndex, selectedGuid) {
37987
+ if (!packagingAccoSearchDetails || !selectedPackagingAccoSearchDetails) return;
37988
+ var updatedPackagingAccoSearchDetails = packagingAccoSearchDetails.map(function (product) {
37989
+ if (product.code !== selectedPackagingAccoSearchDetails.code) {
37990
+ return product;
37991
+ }
37992
+ var updatedRooms = product.rooms.map(function (room, currentRoomIndex) {
37993
+ if (currentRoomIndex !== roomIndex) {
37994
+ return room;
37995
+ }
37996
+ return __assign(__assign({}, room), {
37997
+ options: room.options.map(function (option) {
37998
+ return __assign(__assign({}, option), { isSelected: option.guid === selectedGuid });
37999
+ })
38000
+ });
38001
+ });
38002
+ return __assign(__assign({}, product), { rooms: updatedRooms });
38003
+ });
38004
+ dispatch(setPackagingAccoSearchDetails(updatedPackagingAccoSearchDetails));
38005
+ };
37898
38006
  var handleConfirm = function () {
37899
38007
  if (isOpen) {
37900
38008
  setIsOpen(false);
37901
38009
  }
37902
38010
  };
38011
+ if (!selectedPackagingAccoSearchDetails) {
38012
+ return null;
38013
+ }
38014
+ var calculateTotalPrice = function () {
38015
+ var selectedOptions = selectedPackagingAccoSearchDetails.rooms.flatMap(function (room) {
38016
+ return room.options.filter(function (option) {
38017
+ return option.isSelected;
38018
+ });
38019
+ });
38020
+ var totalPrice = selectedOptions.reduce(function (total, option) {
38021
+ return total + (option.price || 0);
38022
+ }, 0);
38023
+ return formatPrice(totalPrice, selectedPackagingAccoSearchDetails.currencyCode);
38024
+ };
38025
+ var getPriceDifference = function (currentSelectedPrice, roomIndex, accommodationCode, regimeId) {
38026
+ var targetPrice = 0;
38027
+ var selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodationCode);
38028
+ if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.price) {
38029
+ targetPrice = selectedOption.price;
38030
+ } else {
38031
+ var firstOption = selectedPackagingAccoSearchDetails.rooms[roomIndex].options.find(function (option) {
38032
+ return option.accommodationCode === accommodationCode;
38033
+ });
38034
+ targetPrice = (firstOption === null || firstOption === void 0 ? void 0 : firstOption.price) || 0;
38035
+ }
38036
+ if (regimeId) {
38037
+ var regimeOption = selectedPackagingAccoSearchDetails.rooms[roomIndex].options.find(function (option) {
38038
+ return option.guid === regimeId;
38039
+ });
38040
+ targetPrice = (regimeOption === null || regimeOption === void 0 ? void 0 : regimeOption.price) || 0;
38041
+ }
38042
+ return targetPrice - (currentSelectedPrice || 0);
38043
+ };
38044
+ var formatPriceDifference = function (difference, currencyCode) {
38045
+ if (difference === 0) {
38046
+ return null;
38047
+ }
38048
+ var formattedAbsoluteValue = formatPrice(Math.abs(difference), currencyCode);
38049
+ return ''.concat(difference > 0 ? '+' : '-', ' ').concat(formattedAbsoluteValue);
38050
+ };
38051
+ var getPriceDifferenceClassName = function (difference) {
38052
+ if (difference < 0) {
38053
+ return 'flyin__acco__price flyin__acco__price--decrease';
38054
+ }
38055
+ if (difference > 0) {
38056
+ return 'flyin__acco__price flyin__acco__price--increase';
38057
+ }
38058
+ return 'flyin__acco__price';
38059
+ };
38060
+ var regimeFormatter = function (roomIndex, accommodation, regimeId, label) {
38061
+ var roomOption = getSelectedOptionForRoom(roomIndex);
38062
+ var difference = getPriceDifference(
38063
+ roomOption === null || roomOption === void 0 ? void 0 : roomOption.price,
38064
+ roomIndex,
38065
+ accommodation.accommodationCode,
38066
+ regimeId
38067
+ );
38068
+ return ''
38069
+ .concat(label, ' ')
38070
+ .concat(difference !== 0 ? '('.concat(formatPriceDifference(difference, selectedPackagingAccoSearchDetails.currencyCode), ')') : '');
38071
+ };
37903
38072
  return React__default.createElement(
37904
38073
  React__default.Fragment,
37905
38074
  null,
37906
38075
  React__default.createElement(
37907
38076
  'div',
37908
38077
  { className: 'flyin__content' },
37909
- React__default.createElement(
37910
- 'div',
37911
- { className: 'flyin__acco' },
37912
- React__default.createElement(
38078
+ groupedRooms.map(function (roomAccommodations, roomIndex) {
38079
+ var selectedRoomOption = getSelectedOptionForRoom(roomIndex);
38080
+ return React__default.createElement(
37913
38081
  'div',
37914
- { className: 'flyin__acco__cards' },
38082
+ { className: 'flyin__acco', key: 'room-'.concat(roomIndex) },
38083
+ React__default.createElement('h3', { className: 'flyin__acco__room-title' }, 'Room ', roomIndex + 1),
37915
38084
  React__default.createElement(
37916
38085
  'div',
37917
- { className: 'flyin__acco__card' },
37918
- React__default.createElement(
37919
- 'div',
37920
- { className: 'flyin__acco__img__wrapper' },
37921
- React__default.createElement('img', {
37922
- src: 'https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg',
37923
- alt: 'river',
37924
- className: 'flyin__acco__img'
37925
- }),
37926
- React__default.createElement(
37927
- 'div',
37928
- { className: 'flyin__acco__price__wrapper' },
37929
- React__default.createElement(
37930
- 'span',
37931
- { className: 'flyin__acco__price__label' },
37932
- translations === null || translations === void 0 ? void 0 : translations.SHARED.TOTAL_PRICE
37933
- ),
37934
- React__default.createElement('span', { className: 'flyin__acco__price flyin__acco__price--increase' }, '+1.764,00')
37935
- )
37936
- ),
37937
- React__default.createElement(
37938
- 'div',
37939
- { className: 'flyin__acco__content' },
37940
- React__default.createElement(
37941
- 'div',
37942
- { className: 'flyin__acco__header' },
37943
- React__default.createElement('h4', { className: 'flyin__acco__title' }, 'Deluxe Balcony Room'),
37944
- React__default.createElement(
37945
- 'div',
37946
- { className: 'flyin__acco__usps' },
37947
- React__default.createElement(
37948
- 'div',
37949
- { className: 'flyin__acco__usp' },
37950
- React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
37951
- React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Sea sight')
37952
- ),
37953
- React__default.createElement(
37954
- 'div',
37955
- { className: 'flyin__acco__usp' },
37956
- React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
37957
- React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Free wifi')
37958
- ),
37959
- React__default.createElement(
37960
- 'div',
37961
- { className: 'flyin__acco__usp' },
37962
- React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
37963
- React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Breakfast included')
37964
- ),
37965
- React__default.createElement(
37966
- 'div',
37967
- { className: 'flyin__acco__usp' },
37968
- React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
37969
- React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Air conditioning')
37970
- ),
37971
- React__default.createElement(
37972
- 'div',
37973
- { className: 'flyin__acco__usp' },
37974
- React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
37975
- React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Private bathroom')
37976
- )
37977
- )
37978
- )
37979
- ),
37980
- React__default.createElement(
37981
- 'div',
37982
- { className: 'flyin__acco__footer' },
37983
- React__default.createElement(ItemPicker$1, {
37984
- items: travelClasses,
37985
- selection: selectedTravelClass,
37986
- label: ' ',
37987
- placeholder: translations.QSM.TRAVEL_CLASS_PLACEHOLDER,
37988
- classModifier: 'travel-class-picker__items',
37989
- onPick: setSelectedTravelClass
37990
- }),
37991
- React__default.createElement(
37992
- 'button',
37993
- { className: 'cta cta--select' },
37994
- translations === null || translations === void 0 ? void 0 : translations.SHARED.SELECT
37995
- )
37996
- )
37997
- ),
37998
- React__default.createElement(
37999
- 'div',
38000
- { className: 'flyin__acco__card' },
38001
- React__default.createElement(
38002
- 'div',
38003
- { className: 'flyin__acco__img__wrapper' },
38004
- React__default.createElement('img', {
38005
- src: 'https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg',
38006
- alt: 'river',
38007
- className: 'flyin__acco__img'
38008
- }),
38009
- React__default.createElement(
38010
- 'div',
38011
- { className: 'flyin__acco__price__wrapper' },
38012
- React__default.createElement(
38013
- 'span',
38014
- { className: 'flyin__acco__price__label' },
38015
- translations === null || translations === void 0 ? void 0 : translations.SHARED.TOTAL_PRICE
38016
- ),
38017
- React__default.createElement('span', { className: 'flyin__acco__price flyin__acco__price--increase' }, '+1.764,00')
38018
- )
38019
- ),
38020
- React__default.createElement(
38021
- 'div',
38022
- { className: 'flyin__acco__content' },
38023
- React__default.createElement(
38086
+ { className: 'flyin__acco__cards' },
38087
+ roomAccommodations.map(function (accommodation) {
38088
+ var selectedOption = getSelectedOptionForAccommodation(roomIndex, accommodation.accommodationCode);
38089
+ var priceDifference = getPriceDifference(
38090
+ selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.price,
38091
+ roomIndex,
38092
+ accommodation.accommodationCode
38093
+ );
38094
+ return React__default.createElement(
38024
38095
  'div',
38025
- { className: 'flyin__acco__header' },
38026
- React__default.createElement('h4', { className: 'flyin__acco__title' }, 'Standard Room'),
38096
+ { className: 'flyin__acco__card', key: ''.concat(roomIndex, '-').concat(accommodation.accommodationCode) },
38027
38097
  React__default.createElement(
38028
38098
  'div',
38029
- { className: 'flyin__acco__usps' },
38030
- React__default.createElement(
38031
- 'div',
38032
- { className: 'flyin__acco__usp' },
38033
- React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
38034
- React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Garden view')
38035
- ),
38036
- React__default.createElement(
38037
- 'div',
38038
- { className: 'flyin__acco__usp' },
38039
- React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
38040
- React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Free wifi')
38041
- ),
38042
- React__default.createElement(
38043
- 'div',
38044
- { className: 'flyin__acco__usp' },
38045
- React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
38046
- React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Double bed')
38047
- )
38048
- )
38049
- )
38050
- ),
38051
- React__default.createElement(
38052
- 'div',
38053
- { className: 'flyin__acco__footer' },
38054
- React__default.createElement(ItemPicker$1, {
38055
- items: travelClasses,
38056
- selection: selectedTravelClass,
38057
- label: ' ',
38058
- placeholder: translations.QSM.TRAVEL_CLASS_PLACEHOLDER,
38059
- classModifier: 'travel-class-picker__items',
38060
- onPick: setSelectedTravelClass
38061
- }),
38062
- React__default.createElement(
38063
- 'button',
38064
- { className: 'cta cta--select' },
38065
- translations === null || translations === void 0 ? void 0 : translations.SHARED.SELECT
38066
- )
38067
- )
38068
- ),
38069
- React__default.createElement(
38070
- 'div',
38071
- { className: 'flyin__acco__card' },
38072
- React__default.createElement(
38073
- 'div',
38074
- { className: 'flyin__acco__img__wrapper' },
38075
- React__default.createElement('img', {
38076
- src: 'https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg',
38077
- alt: 'river',
38078
- className: 'flyin__acco__img'
38079
- }),
38080
- React__default.createElement(
38081
- 'div',
38082
- { className: 'flyin__acco__price__wrapper' },
38083
- React__default.createElement(
38084
- 'span',
38085
- { className: 'flyin__acco__price__label' },
38086
- translations === null || translations === void 0 ? void 0 : translations.SHARED.TOTAL_PRICE
38099
+ { className: 'flyin__acco__content' },
38100
+ React__default.createElement('h4', { className: 'flyin__acco__title' }, accommodation.accommodationName)
38087
38101
  ),
38088
- React__default.createElement('span', { className: 'flyin__acco__price flyin__acco__price--increase' }, '+1.764,00')
38089
- )
38090
- ),
38091
- React__default.createElement(
38092
- 'div',
38093
- { className: 'flyin__acco__content' },
38094
- React__default.createElement(
38095
- 'div',
38096
- { className: 'flyin__acco__header' },
38097
- React__default.createElement('h4', { className: 'flyin__acco__title' }, 'Suite'),
38098
38102
  React__default.createElement(
38099
38103
  'div',
38100
- { className: 'flyin__acco__usps' },
38101
- React__default.createElement(
38102
- 'div',
38103
- { className: 'flyin__acco__usp' },
38104
- React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
38105
- React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Sea sight')
38106
- ),
38107
- React__default.createElement(
38108
- 'div',
38109
- { className: 'flyin__acco__usp' },
38110
- React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
38111
- React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Free wifi')
38112
- ),
38113
- React__default.createElement(
38114
- 'div',
38115
- { className: 'flyin__acco__usp' },
38116
- React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
38117
- React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Breakfast included')
38118
- ),
38119
- React__default.createElement(
38120
- 'div',
38121
- { className: 'flyin__acco__usp' },
38122
- React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
38123
- React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Jacuzzi')
38124
- ),
38104
+ { className: 'flyin__acco__footer' },
38105
+ React__default.createElement(ItemPicker$1, {
38106
+ items: accommodation.regimes,
38107
+ selection: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.regimeName,
38108
+ label: '',
38109
+ placeholder: 'Select regime',
38110
+ classModifier: '',
38111
+ onPick: function (selected, selectedGuid) {
38112
+ return handlePick(roomIndex, selectedGuid);
38113
+ },
38114
+ valueFormatter: function (id, label) {
38115
+ return regimeFormatter(roomIndex, accommodation, id, label);
38116
+ }
38117
+ }),
38125
38118
  React__default.createElement(
38126
38119
  'div',
38127
- { className: 'flyin__acco__usp' },
38128
- React__default.createElement(Icon, { name: 'ui-check', width: 16 }),
38129
- React__default.createElement('span', { className: 'flyin__acco__usp__text' }, 'Private terrace')
38120
+ { className: 'flyin__acco__footer__actions' },
38121
+ React__default.createElement(
38122
+ 'button',
38123
+ {
38124
+ className:
38125
+ (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ==
38126
+ accommodation.accommodationCode
38127
+ ? 'cta cta--select cta--selected'
38128
+ : 'cta cta--select',
38129
+ onClick: function () {
38130
+ var _a;
38131
+ handlePick(
38132
+ roomIndex,
38133
+ selectedOption ? selectedOption.guid : (_a = first(accommodation.regimes)) === null || _a === void 0 ? void 0 : _a.id
38134
+ );
38135
+ }
38136
+ },
38137
+ (selectedRoomOption === null || selectedRoomOption === void 0 ? void 0 : selectedRoomOption.accommodationCode) ==
38138
+ accommodation.accommodationCode
38139
+ ? translations === null || translations === void 0
38140
+ ? void 0
38141
+ : translations.SHARED.SELECTED
38142
+ : translations === null || translations === void 0
38143
+ ? void 0
38144
+ : translations.SHARED.SELECT
38145
+ ),
38146
+ React__default.createElement(
38147
+ 'div',
38148
+ { className: 'flyin__acco__price__wrapper' },
38149
+ React__default.createElement(
38150
+ 'span',
38151
+ { className: getPriceDifferenceClassName(priceDifference) },
38152
+ formatPriceDifference(priceDifference, selectedPackagingAccoSearchDetails.currencyCode)
38153
+ )
38154
+ )
38130
38155
  )
38131
38156
  )
38132
- )
38133
- ),
38134
- React__default.createElement(
38135
- 'div',
38136
- { className: 'flyin__acco__footer' },
38137
- React__default.createElement(ItemPicker$1, {
38138
- items: travelClasses,
38139
- selection: selectedTravelClass,
38140
- label: ' ',
38141
- placeholder: translations.QSM.TRAVEL_CLASS_PLACEHOLDER,
38142
- classModifier: 'travel-class-picker__items',
38143
- onPick: setSelectedTravelClass
38144
- }),
38145
- React__default.createElement(
38146
- 'button',
38147
- { className: 'cta cta--select' },
38148
- translations === null || translations === void 0 ? void 0 : translations.SHARED.SELECT
38149
- )
38150
- )
38157
+ );
38158
+ })
38151
38159
  )
38152
- )
38153
- )
38160
+ );
38161
+ })
38154
38162
  ),
38155
38163
  React__default.createElement(
38156
38164
  'div',
38157
38165
  { className: 'flyin__footer' },
38158
- React__default.createElement('div', { className: 'flyin__footer__price' }, 'Total price: \u20AC'),
38166
+ React__default.createElement('div', { className: 'flyin__footer__price' }, 'Total price: ', calculateTotalPrice()),
38159
38167
  React__default.createElement(
38160
38168
  'div',
38161
38169
  { className: 'flyin__button-wrapper' },
38162
- React__default.createElement('button', { className: 'cta cta--select', onClick: handleConfirm }, 'Toevoegen')
38170
+ React__default.createElement('button', { className: 'cta cta--select', onClick: handleConfirm }, translations.PRODUCT.BOOK_NOW)
38163
38171
  )
38164
38172
  )
38165
38173
  );
38174
+ // Slicing with image and usps, not available in the current API response.
38175
+ // <>
38176
+ // <div className="flyin__content">
38177
+ // <div className="flyin__acco">
38178
+ // <div className="flyin__acco__cards">
38179
+ // <div className="flyin__acco__card">
38180
+ // <div className="flyin__acco__img__wrapper">
38181
+ // <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="flyin__acco__img" />
38182
+ // <div className="flyin__acco__price__wrapper">
38183
+ // <span className="flyin__acco__price__label">{translations?.SHARED.TOTAL_PRICE}</span>
38184
+ // <span className="flyin__acco__price flyin__acco__price--increase">+1.764,00</span>
38185
+ // </div>
38186
+ // </div>
38187
+ // <div className="flyin__acco__content">
38188
+ // <div className="flyin__acco__header">
38189
+ // <h4 className="flyin__acco__title">Deluxe Balcony Room</h4>
38190
+ // <div className="flyin__acco__usps">
38191
+ // <div className="flyin__acco__usp">
38192
+ // <Icon name="ui-check" width={16} />
38193
+ // <span className="flyin__acco__usp__text">Sea sight</span>
38194
+ // </div>
38195
+ // <div className="flyin__acco__usp">
38196
+ // <Icon name="ui-check" width={16} />
38197
+ // <span className="flyin__acco__usp__text">Free wifi</span>
38198
+ // </div>
38199
+ // <div className="flyin__acco__usp">
38200
+ // <Icon name="ui-check" width={16} />
38201
+ // <span className="flyin__acco__usp__text">Breakfast included</span>
38202
+ // </div>
38203
+ // <div className="flyin__acco__usp">
38204
+ // <Icon name="ui-check" width={16} />
38205
+ // <span className="flyin__acco__usp__text">Air conditioning</span>
38206
+ // </div>
38207
+ // <div className="flyin__acco__usp">
38208
+ // <Icon name="ui-check" width={16} />
38209
+ // <span className="flyin__acco__usp__text">Private bathroom</span>
38210
+ // </div>
38211
+ // </div>
38212
+ // </div>
38213
+ // </div>
38214
+ // <div className="flyin__acco__footer">
38215
+ // <ItemPicker
38216
+ // items={travelClasses}
38217
+ // selection={selectedTravelClass}
38218
+ // label=" "
38219
+ // placeholder={translations.QSM.TRAVEL_CLASS_PLACEHOLDER}
38220
+ // classModifier="travel-class-picker__items"
38221
+ // onPick={(item) => setSelectedTravelClass(item)}
38222
+ // />
38223
+ // <button className="cta cta--select">{translations?.SHARED.SELECT}</button>
38224
+ // </div>
38225
+ // </div>
38226
+ // <div className="flyin__acco__card">
38227
+ // <div className="flyin__acco__img__wrapper">
38228
+ // <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="flyin__acco__img" />
38229
+ // <div className="flyin__acco__price__wrapper">
38230
+ // <span className="flyin__acco__price__label">{translations?.SHARED.TOTAL_PRICE}</span>
38231
+ // <span className="flyin__acco__price flyin__acco__price--increase">+1.764,00</span>
38232
+ // </div>
38233
+ // </div>
38234
+ // <div className="flyin__acco__content">
38235
+ // <div className="flyin__acco__header">
38236
+ // <h4 className="flyin__acco__title">Standard Room</h4>
38237
+ // <div className="flyin__acco__usps">
38238
+ // <div className="flyin__acco__usp">
38239
+ // <Icon name="ui-check" width={16} />
38240
+ // <span className="flyin__acco__usp__text">Garden view</span>
38241
+ // </div>
38242
+ // <div className="flyin__acco__usp">
38243
+ // <Icon name="ui-check" width={16} />
38244
+ // <span className="flyin__acco__usp__text">Free wifi</span>
38245
+ // </div>
38246
+ // <div className="flyin__acco__usp">
38247
+ // <Icon name="ui-check" width={16} />
38248
+ // <span className="flyin__acco__usp__text">Double bed</span>
38249
+ // </div>
38250
+ // </div>
38251
+ // </div>
38252
+ // </div>
38253
+ // <div className="flyin__acco__footer">
38254
+ // <ItemPicker
38255
+ // items={travelClasses}
38256
+ // selection={selectedTravelClass}
38257
+ // label=" "
38258
+ // placeholder={translations.QSM.TRAVEL_CLASS_PLACEHOLDER}
38259
+ // classModifier="travel-class-picker__items"
38260
+ // onPick={setSelectedTravelClass}
38261
+ // />
38262
+ // <button className="cta cta--select">{translations?.SHARED.SELECT}</button>
38263
+ // </div>
38264
+ // </div>
38265
+ // <div className="flyin__acco__card">
38266
+ // <div className="flyin__acco__img__wrapper">
38267
+ // <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="flyin__acco__img" />
38268
+ // <div className="flyin__acco__price__wrapper">
38269
+ // <span className="flyin__acco__price__label">{translations?.SHARED.TOTAL_PRICE}</span>
38270
+ // <span className="flyin__acco__price flyin__acco__price--increase">+1.764,00</span>
38271
+ // </div>
38272
+ // </div>
38273
+ // <div className="flyin__acco__content">
38274
+ // <div className="flyin__acco__header">
38275
+ // <h4 className="flyin__acco__title">Suite</h4>
38276
+ // <div className="flyin__acco__usps">
38277
+ // <div className="flyin__acco__usp">
38278
+ // <Icon name="ui-check" width={16} />
38279
+ // <span className="flyin__acco__usp__text">Sea sight</span>
38280
+ // </div>
38281
+ // <div className="flyin__acco__usp">
38282
+ // <Icon name="ui-check" width={16} />
38283
+ // <span className="flyin__acco__usp__text">Free wifi</span>
38284
+ // </div>
38285
+ // <div className="flyin__acco__usp">
38286
+ // <Icon name="ui-check" width={16} />
38287
+ // <span className="flyin__acco__usp__text">Breakfast included</span>
38288
+ // </div>
38289
+ // <div className="flyin__acco__usp">
38290
+ // <Icon name="ui-check" width={16} />
38291
+ // <span className="flyin__acco__usp__text">Jacuzzi</span>
38292
+ // </div>
38293
+ // <div className="flyin__acco__usp">
38294
+ // <Icon name="ui-check" width={16} />
38295
+ // <span className="flyin__acco__usp__text">Private terrace</span>
38296
+ // </div>
38297
+ // </div>
38298
+ // </div>
38299
+ // </div>
38300
+ // <div className="flyin__acco__footer">
38301
+ // <ItemPicker
38302
+ // items={travelClasses}
38303
+ // selection={selectedTravelClass}
38304
+ // label=" "
38305
+ // placeholder={translations.QSM.TRAVEL_CLASS_PLACEHOLDER}
38306
+ // classModifier="travel-class-picker__items"
38307
+ // onPick={setSelectedTravelClass}
38308
+ // />
38309
+ // <button className="cta cta--select">{translations?.SHARED.SELECT}</button>
38310
+ // </div>
38311
+ // </div>
38312
+ // </div>
38313
+ // </div>
38314
+ // {/* {isLoading && (
38315
+ // <Spinner />
38316
+ // )} */}
38317
+ // </div>
38318
+ // <div className="flyin__footer">
38319
+ // <div className="flyin__footer__price">Total price: €</div>
38320
+ // <div className="flyin__button-wrapper">
38321
+ // <button className="cta cta--select" onClick={handleConfirm}>
38322
+ // Toevoegen
38323
+ // </button>
38324
+ // </div>
38325
+ // </div>
38326
+ // </>
38166
38327
  };
38167
38328
 
38168
38329
  var FlyIn = function (_a) {
@@ -42559,7 +42720,7 @@ var getBaseHotelResult = function (searchResult, cmsItem, languageCode, translat
42559
42720
  searchResult.countryName,
42560
42721
  (_h = cmsItem === null || cmsItem === void 0 ? void 0 : cmsItem.parentItem) === null || _h === void 0 ? void 0 : _h.name
42561
42722
  ),
42562
- price: formatPrice(searchResult.price, searchResult.currencyCode, languageCode),
42723
+ price: formatPrice$1(searchResult.price, searchResult.currencyCode, languageCode),
42563
42724
  ctaText: translations === null || translations === void 0 ? void 0 : translations.SRP.VIEW_DETAILS
42564
42725
  };
42565
42726
  };
@@ -43318,7 +43479,7 @@ var PairedFlightOption = function (_a) {
43318
43479
  React__default.createElement(
43319
43480
  'span',
43320
43481
  { className: 'price' },
43321
- formatPrice(
43482
+ formatPrice$1(
43322
43483
  item.price,
43323
43484
  'EUR',
43324
43485
  (_c = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _c !== void 0 ? _c : 'en-GB'
@@ -45137,8 +45298,8 @@ var FlightFilters = function (_a) {
45137
45298
  };
45138
45299
 
45139
45300
  var selectionTypes = [
45140
- { id: 0, label: 'Independent Selection', code: 'independent' },
45141
- { id: 1, label: 'Paired Selection', code: 'paired' }
45301
+ { id: 'independent', label: 'Independent Selection' },
45302
+ { id: 'paired', label: 'Paired Selection' }
45142
45303
  ];
45143
45304
  var FlightResultsContainer = function (_a) {
45144
45305
  var _b, _c;
@@ -45263,7 +45424,7 @@ var FlightResultsContainer = function (_a) {
45263
45424
  items: selectionTypes,
45264
45425
  selection:
45265
45426
  ((_c = selectionTypes.find(function (type) {
45266
- return type.code === flightSelectionType;
45427
+ return type.id === flightSelectionType;
45267
45428
  })) === null || _c === void 0
45268
45429
  ? void 0
45269
45430
  : _c.label) || undefined,
@@ -45280,7 +45441,7 @@ var FlightResultsContainer = function (_a) {
45280
45441
  return type.label === value;
45281
45442
  })) === null || _a === void 0
45282
45443
  ? void 0
45283
- : _a.code) || 'independent'
45444
+ : _a.id) || 'independent'
45284
45445
  );
45285
45446
  }
45286
45447
  })
@@ -45678,7 +45839,7 @@ var GroupTourCard = function (_a) {
45678
45839
  React__default.createElement(
45679
45840
  'div',
45680
45841
  { className: 'search__result-card__allotment__price' },
45681
- formatPrice(result.price, result.currencyCode, languageCode),
45842
+ formatPrice$1(result.price, result.currencyCode, languageCode),
45682
45843
  ' ',
45683
45844
  translations.PRODUCT.PER_PERSON
45684
45845
  )
@@ -46612,14 +46773,14 @@ var SearchResultsContainer = function () {
46612
46773
  // Seperate detailsCall
46613
46774
  useEffect(
46614
46775
  function () {
46615
- var fetchPackageDetails = function () {
46776
+ var fetchDetails = function () {
46616
46777
  return __awaiter(void 0, void 0, void 0, function () {
46617
46778
  var config, selectedItem, params, entryId, requestRooms, rooms, detailsRequest, detailsResponse, detailsWLResponse, err_3;
46618
46779
  var _a, _b;
46619
46780
  return __generator(this, function (_c) {
46620
46781
  switch (_c.label) {
46621
46782
  case 0:
46622
- if ((!selectedSearchResultId && !selectedPackagingAccoResultCode) || !context) return [2 /*return*/];
46783
+ if (!selectedSearchResultId || !context) return [2 /*return*/];
46623
46784
  if (
46624
46785
  (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.Accommodation ||
46625
46786
  (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.GroupTour
@@ -46710,7 +46871,126 @@ var SearchResultsContainer = function () {
46710
46871
  });
46711
46872
  });
46712
46873
  };
46713
- fetchPackageDetails();
46874
+ var fetchPackagingAccoSearchDetails = function () {
46875
+ return __awaiter(void 0, void 0, void 0, function () {
46876
+ var config,
46877
+ selectedItem,
46878
+ params,
46879
+ rooms,
46880
+ tagId,
46881
+ agentId,
46882
+ destinationAirport,
46883
+ destinationId,
46884
+ destinationIsCountry,
46885
+ destinationIsRegion,
46886
+ destinationIsOord,
46887
+ destinationIsLocation,
46888
+ destinationCode,
46889
+ destinationIsAirport,
46890
+ detailSearchRequest,
46891
+ packageAccoSearchDetails,
46892
+ err_4;
46893
+ var _a, _b;
46894
+ return __generator(this, function (_c) {
46895
+ switch (_c.label) {
46896
+ case 0:
46897
+ if (!selectedPackagingAccoResultCode || !context) return [2 /*return*/];
46898
+ if (
46899
+ (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.Accommodation ||
46900
+ (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.GroupTour
46901
+ ) {
46902
+ handleFlyInToggle(true);
46903
+ }
46904
+ _c.label = 1;
46905
+ case 1:
46906
+ _c.trys.push([1, 3, , 4]);
46907
+ config = {
46908
+ host: context.tideConnection.host,
46909
+ apiKey: context.tideConnection.apiKey
46910
+ };
46911
+ console.log('selectedPackagingAccoResultCode', selectedPackagingAccoResultCode);
46912
+ selectedItem = packagingAccoResults.find(function (r) {
46913
+ return r.code === selectedPackagingAccoResultCode;
46914
+ });
46915
+ console.log('Selected packaging acco item', selectedItem);
46916
+ if (!selectedItem) {
46917
+ // TODO: handle this case better, show an error message to the user
46918
+ return [2 /*return*/];
46919
+ }
46920
+ params = new URLSearchParams(location.search);
46921
+ rooms = getRoomsFromParams(params, 'rooms');
46922
+ tagId = getNumberFromParams(params, 'tagId');
46923
+ agentId = getNumberFromParams(params, 'agentId');
46924
+ destinationAirport = getStringFromParams(params, 'destinationAirport');
46925
+ destinationId = null;
46926
+ destinationIsCountry = false;
46927
+ destinationIsRegion = false;
46928
+ destinationIsOord = false;
46929
+ destinationIsLocation = false;
46930
+ destinationCode = null;
46931
+ destinationIsAirport = false;
46932
+ if (selectedItem.countryId) {
46933
+ destinationId = selectedItem.countryId;
46934
+ destinationIsCountry = true;
46935
+ } else if (selectedItem.regionId) {
46936
+ destinationId = selectedItem.regionId;
46937
+ destinationIsRegion = true;
46938
+ } else if (selectedItem.oordId) {
46939
+ destinationId = selectedItem.oordId;
46940
+ destinationIsOord = true;
46941
+ } else if (selectedItem.locationId) {
46942
+ destinationId = selectedItem.locationId;
46943
+ destinationIsLocation = true;
46944
+ } else if (destinationAirport) {
46945
+ destinationCode = destinationAirport;
46946
+ destinationIsAirport = true;
46947
+ }
46948
+ detailSearchRequest = {
46949
+ officeId: 1,
46950
+ portalId: context.portalId,
46951
+ agentId: agentId !== null && agentId !== void 0 ? agentId : null,
46952
+ catalogueId: (_a = context.searchConfiguration.defaultCatalogueId) !== null && _a !== void 0 ? _a : 0,
46953
+ searchConfigurationId: context.searchConfiguration.id,
46954
+ vendorConfigurationId: selectedItem.vendorId,
46955
+ language: (_b = context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB',
46956
+ serviceType: 3,
46957
+ fromDate: selectedItem.fromDate,
46958
+ toDate: selectedItem.toDate,
46959
+ destination: {
46960
+ id: Number(destinationId),
46961
+ isCountry: destinationIsCountry,
46962
+ isRegion: destinationIsRegion,
46963
+ isOord: destinationIsOord,
46964
+ isLocation: destinationIsLocation,
46965
+ isAirport: destinationIsAirport,
46966
+ code: destinationCode
46967
+ },
46968
+ productCode: selectedItem.code ? selectedItem.code : '',
46969
+ rooms: getPackagingRequestRooms(rooms),
46970
+ tagIds: tagId ? [tagId] : []
46971
+ };
46972
+ return [4 /*yield*/, build.searchPackagingAccommodations(config, detailSearchRequest)];
46973
+ case 2:
46974
+ packageAccoSearchDetails = _c.sent();
46975
+ console.log('Packaging Acco Search details', packageAccoSearchDetails);
46976
+ dispatch(setPackagingAccoSearchDetails(packageAccoSearchDetails));
46977
+ return [3 /*break*/, 4];
46978
+ case 3:
46979
+ err_4 = _c.sent();
46980
+ console.error('Failed to fetch package details', err_4);
46981
+ return [3 /*break*/, 4];
46982
+ case 4:
46983
+ return [2 /*return*/];
46984
+ }
46985
+ });
46986
+ });
46987
+ };
46988
+ if (selectedSearchResultId) {
46989
+ fetchDetails();
46990
+ }
46991
+ if (selectedPackagingAccoResultCode) {
46992
+ fetchPackagingAccoSearchDetails();
46993
+ }
46714
46994
  },
46715
46995
  [selectedSearchResultId, selectedPackagingAccoResultCode]
46716
46996
  );