@qite/tide-booking-component 1.4.70 → 1.4.72

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 (44) hide show
  1. package/build/build-cjs/index.js +772 -642
  2. package/build/build-cjs/src/qsm/components/search-input/index.d.ts +1 -0
  3. package/build/build-cjs/src/search-results/store/search-results-slice.d.ts +2 -2
  4. package/build/build-cjs/src/shared/components/flyin/accommodation-flyin.d.ts +8 -0
  5. package/build/build-cjs/src/shared/components/flyin/flights-flyin.d.ts +7 -0
  6. package/build/build-cjs/src/shared/components/{flyin.d.ts → flyin/flyin.d.ts} +3 -2
  7. package/build/build-cjs/src/shared/utils/localization-util.d.ts +1 -0
  8. package/build/build-esm/index.js +754 -634
  9. package/build/build-esm/src/qsm/components/search-input/index.d.ts +1 -0
  10. package/build/build-esm/src/search-results/store/search-results-slice.d.ts +2 -2
  11. package/build/build-esm/src/shared/components/flyin/accommodation-flyin.d.ts +8 -0
  12. package/build/build-esm/src/shared/components/flyin/flights-flyin.d.ts +7 -0
  13. package/build/build-esm/src/shared/components/{flyin.d.ts → flyin/flyin.d.ts} +3 -2
  14. package/build/build-esm/src/shared/utils/localization-util.d.ts +1 -0
  15. package/package.json +2 -2
  16. package/src/qsm/components/QSMContainer/qsm-container.tsx +13 -1
  17. package/src/qsm/components/search-input/index.tsx +16 -4
  18. package/src/qsm/components/search-input-group/index.tsx +9 -2
  19. package/src/search-results/components/group-tour/group-tour-card.tsx +15 -1
  20. package/src/search-results/components/hotel/hotel-card.tsx +11 -8
  21. package/src/search-results/components/search-results-container/search-results-container.tsx +32 -12
  22. package/src/search-results/store/search-results-slice.ts +5 -5
  23. package/src/shared/components/flyin/accommodation-flyin.tsx +40 -0
  24. package/src/shared/components/flyin/flights-flyin.tsx +499 -0
  25. package/src/shared/components/flyin/flyin.tsx +79 -0
  26. package/src/shared/translations/ar-SA.json +2 -1
  27. package/src/shared/translations/da-DK.json +2 -1
  28. package/src/shared/translations/de-DE.json +2 -1
  29. package/src/shared/translations/en-GB.json +2 -1
  30. package/src/shared/translations/es-ES.json +2 -1
  31. package/src/shared/translations/fr-BE.json +2 -1
  32. package/src/shared/translations/fr-FR.json +2 -1
  33. package/src/shared/translations/is-IS.json +2 -1
  34. package/src/shared/translations/it-IT.json +2 -1
  35. package/src/shared/translations/ja-JP.json +2 -1
  36. package/src/shared/translations/nl-BE.json +2 -1
  37. package/src/shared/translations/nl-NL.json +2 -1
  38. package/src/shared/translations/no-NO.json +2 -1
  39. package/src/shared/translations/pl-PL.json +2 -1
  40. package/src/shared/translations/pt-PT.json +2 -1
  41. package/src/shared/translations/sv-SE.json +2 -1
  42. package/src/shared/utils/localization-util.ts +1 -1
  43. package/styles/components/_flyin.scss +10 -0
  44. package/src/shared/components/flyin.tsx +0 -547
package/build/build-esm/index.js CHANGED
@@ -325,7 +325,8 @@ var FLIGHTS_FORM$f = {
325
325
  EVENING_DEPARTURE: 'مساءً (18:00 - 00:00)',
326
326
  FLIGHTS_FOUND_1: '',
327
327
  FLIGHTS_FOUND_2: 'رحلات',
328
- FLIGHTS_FOUND_3: 'تم العثور عليها'
328
+ FLIGHTS_FOUND_3: 'تم العثور عليها',
329
+ SELECT_YOUR_FARE: 'اختر السعر الخاص بك'
329
330
  };
330
331
  var PRODUCT$f = {
331
332
  STAY_INCLUDED: 'الإقامة متضمنة',
@@ -725,7 +726,8 @@ var FLIGHTS_FORM$e = {
725
726
  EVENING_DEPARTURE: 'Aften (18:00 - 00:00)',
726
727
  FLIGHTS_FOUND_1: '',
727
728
  FLIGHTS_FOUND_2: 'fly',
728
- FLIGHTS_FOUND_3: 'fundet'
729
+ FLIGHTS_FOUND_3: 'fundet',
730
+ SELECT_YOUR_FARE: 'Vælg din pris'
729
731
  };
730
732
  var PRODUCT$e = {
731
733
  STAY_INCLUDED: 'Ophold inkluderet',
@@ -1125,7 +1127,8 @@ var FLIGHTS_FORM$d = {
1125
1127
  EVENING_DEPARTURE: 'Abend (18:00 - 00:00)',
1126
1128
  FLIGHTS_FOUND_1: '',
1127
1129
  FLIGHTS_FOUND_2: 'Flüge',
1128
- FLIGHTS_FOUND_3: 'gefunden'
1130
+ FLIGHTS_FOUND_3: 'gefunden',
1131
+ SELECT_YOUR_FARE: 'Wählen Sie Ihren Tarif'
1129
1132
  };
1130
1133
  var PRODUCT$d = {
1131
1134
  STAY_INCLUDED: 'Aufenthalt inbegriffen',
@@ -1526,7 +1529,8 @@ var FLIGHTS_FORM$c = {
1526
1529
  EVENING_DEPARTURE: 'Evening (18:00 - 00:00)',
1527
1530
  FLIGHTS_FOUND_1: '',
1528
1531
  FLIGHTS_FOUND_2: 'flights',
1529
- FLIGHTS_FOUND_3: 'found'
1532
+ FLIGHTS_FOUND_3: 'found',
1533
+ SELECT_YOUR_FARE: 'Select your fare'
1530
1534
  };
1531
1535
  var PRODUCT$c = {
1532
1536
  STAY_INCLUDED: 'Stay included',
@@ -1930,7 +1934,8 @@ var FLIGHTS_FORM$b = {
1930
1934
  EVENING_DEPARTURE: 'Noche (18:00 - 00:00)',
1931
1935
  FLIGHTS_FOUND_1: '',
1932
1936
  FLIGHTS_FOUND_2: 'vuelos',
1933
- FLIGHTS_FOUND_3: 'encontrados'
1937
+ FLIGHTS_FOUND_3: 'encontrados',
1938
+ SELECT_YOUR_FARE: 'Seleccione su tarifa'
1934
1939
  };
1935
1940
  var PRODUCT$b = {
1936
1941
  STAY_INCLUDED: 'Estancia incluida',
@@ -2331,7 +2336,8 @@ var FLIGHTS_FORM$a = {
2331
2336
  EVENING_DEPARTURE: 'Soir (18:00 - 00:00)',
2332
2337
  FLIGHTS_FOUND_1: '',
2333
2338
  FLIGHTS_FOUND_2: 'vols',
2334
- FLIGHTS_FOUND_3: 'trouvés'
2339
+ FLIGHTS_FOUND_3: 'trouvés',
2340
+ SELECT_YOUR_FARE: 'Sélectionnez votre tarif'
2335
2341
  };
2336
2342
  var PRODUCT$a = {
2337
2343
  STAY_INCLUDED: 'Séjour inclus',
@@ -2736,7 +2742,8 @@ var FLIGHTS_FORM$9 = {
2736
2742
  EVENING_DEPARTURE: 'Soir (18:00 - 00:00)',
2737
2743
  FLIGHTS_FOUND_1: '',
2738
2744
  FLIGHTS_FOUND_2: 'vols',
2739
- FLIGHTS_FOUND_3: 'trouvés'
2745
+ FLIGHTS_FOUND_3: 'trouvés',
2746
+ SELECT_YOUR_FARE: 'Sélectionnez votre tarif'
2740
2747
  };
2741
2748
  var PRODUCT$9 = {
2742
2749
  STAY_INCLUDED: 'Séjour inclus',
@@ -3136,7 +3143,8 @@ var FLIGHTS_FORM$8 = {
3136
3143
  EVENING_DEPARTURE: 'Kvöld (18:00 - 00:00)',
3137
3144
  FLIGHTS_FOUND_1: '',
3138
3145
  FLIGHTS_FOUND_2: 'flug',
3139
- FLIGHTS_FOUND_3: 'fundust'
3146
+ FLIGHTS_FOUND_3: 'fundust',
3147
+ SELECT_YOUR_FARE: 'Veldu flugverð'
3140
3148
  };
3141
3149
  var PRODUCT$8 = {
3142
3150
  STAY_INCLUDED: 'Dvöl innifalin',
@@ -3536,7 +3544,8 @@ var FLIGHTS_FORM$7 = {
3536
3544
  EVENING_DEPARTURE: 'Sera (18:00 - 00:00)',
3537
3545
  FLIGHTS_FOUND_1: '',
3538
3546
  FLIGHTS_FOUND_2: 'voli',
3539
- FLIGHTS_FOUND_3: 'trovati'
3547
+ FLIGHTS_FOUND_3: 'trovati',
3548
+ SELECT_YOUR_FARE: 'Seleziona la tua tariffa'
3540
3549
  };
3541
3550
  var PRODUCT$7 = {
3542
3551
  STAY_INCLUDED: 'Soggiorno incluso',
@@ -3937,7 +3946,8 @@ var FLIGHTS_FORM$6 = {
3937
3946
  EVENING_DEPARTURE: 'Avond (18:00 - 00:00)',
3938
3947
  FLIGHTS_FOUND_1: 'Er zijn',
3939
3948
  FLIGHTS_FOUND_2: 'vluchten',
3940
- FLIGHTS_FOUND_3: 'gevonden'
3949
+ FLIGHTS_FOUND_3: 'gevonden',
3950
+ SELECT_YOUR_FARE: 'Selecteer uw tarief'
3941
3951
  };
3942
3952
  var PRODUCT$6 = {
3943
3953
  STAY_INCLUDED: 'Inclusief verblijf',
@@ -4342,7 +4352,8 @@ var FLIGHTS_FORM$5 = {
4342
4352
  EVENING_DEPARTURE: 'Avond (18:00 - 00:00)',
4343
4353
  FLIGHTS_FOUND_1: '',
4344
4354
  FLIGHTS_FOUND_2: 'vluchten',
4345
- FLIGHTS_FOUND_3: 'gevonden'
4355
+ FLIGHTS_FOUND_3: 'gevonden',
4356
+ SELECT_YOUR_FARE: 'Selecteer uw tarief'
4346
4357
  };
4347
4358
  var PRODUCT$5 = {
4348
4359
  STAY_INCLUDED: 'Verblijf inbegrepen',
@@ -4743,7 +4754,8 @@ var FLIGHTS_FORM$4 = {
4743
4754
  EVENING_DEPARTURE: 'Kveld (18:00 - 00:00)',
4744
4755
  FLIGHTS_FOUND_1: '',
4745
4756
  FLIGHTS_FOUND_2: 'fly',
4746
- FLIGHTS_FOUND_3: 'funnet'
4757
+ FLIGHTS_FOUND_3: 'funnet',
4758
+ SELECT_YOUR_FARE: 'Velg din pris:'
4747
4759
  };
4748
4760
  var PRODUCT$4 = {
4749
4761
  STAY_INCLUDED: 'Opphold inkludert',
@@ -5144,7 +5156,8 @@ var FLIGHTS_FORM$3 = {
5144
5156
  EVENING_DEPARTURE: 'Wieczór (18:00 - 00:00)',
5145
5157
  FLIGHTS_FOUND_1: '',
5146
5158
  FLIGHTS_FOUND_2: 'lotów',
5147
- FLIGHTS_FOUND_3: 'znaleziono'
5159
+ FLIGHTS_FOUND_3: 'znaleziono',
5160
+ SELECT_YOUR_FARE: 'Wybierz swój taryfę'
5148
5161
  };
5149
5162
  var PRODUCT$3 = {
5150
5163
  STAY_INCLUDED: 'Pobyt wliczony w cenę',
@@ -5545,7 +5558,8 @@ var FLIGHTS_FORM$2 = {
5545
5558
  EVENING_DEPARTURE: 'Noite (18:00 - 00:00)',
5546
5559
  FLIGHTS_FOUND_1: '',
5547
5560
  FLIGHTS_FOUND_2: 'voos',
5548
- FLIGHTS_FOUND_3: 'encontrados'
5561
+ FLIGHTS_FOUND_3: 'encontrados',
5562
+ SELECT_YOUR_FARE: 'Selecione a sua tarifa:'
5549
5563
  };
5550
5564
  var PRODUCT$2 = {
5551
5565
  STAY_INCLUDED: 'Estadia incluída',
@@ -5946,7 +5960,8 @@ var FLIGHTS_FORM$1 = {
5946
5960
  EVENING_DEPARTURE: 'Kväll (18:00 – 00:00)',
5947
5961
  FLIGHTS_FOUND_1: '',
5948
5962
  FLIGHTS_FOUND_2: 'flyg',
5949
- FLIGHTS_FOUND_3: 'hittades'
5963
+ FLIGHTS_FOUND_3: 'hittades',
5964
+ SELECT_YOUR_FARE: 'Välj din pris:'
5950
5965
  };
5951
5966
  var PRODUCT$1 = {
5952
5967
  STAY_INCLUDED: 'Boende ingår',
@@ -6347,7 +6362,8 @@ var FLIGHTS_FORM = {
6347
6362
  EVENING_DEPARTURE: '夜 (18:00 - 00:00)',
6348
6363
  FLIGHTS_FOUND_1: '',
6349
6364
  FLIGHTS_FOUND_2: '件のフライトが',
6350
- FLIGHTS_FOUND_3: '見つかりました'
6365
+ FLIGHTS_FOUND_3: '見つかりました',
6366
+ SELECT_YOUR_FARE: '料金を選択してください'
6351
6367
  };
6352
6368
  var PRODUCT = {
6353
6369
  STAY_INCLUDED: '宿泊込み',
@@ -6887,7 +6903,7 @@ var calculateNights = function (fromDate, toDate) {
6887
6903
  from.setHours(0, 0, 0, 0);
6888
6904
  to.setHours(0, 0, 0, 0);
6889
6905
  var diffTime = to.getTime() - from.getTime();
6890
- return diffTime / (1000 * 60 * 60 * 24);
6906
+ return Math.round(diffTime / (1000 * 60 * 60 * 24));
6891
6907
  };
6892
6908
  var calculateDays = function (fromDate, toDate) {
6893
6909
  return calculateNights(fromDate, toDate) + 1;
@@ -12930,6 +12946,7 @@ PERFORMANCE OF THIS SOFTWARE.
12930
12946
  var ENDPOINT_PORTAL = function (portalId) {
12931
12947
  return ENDPOINT$4 + '/portal/' + portalId;
12932
12948
  };
12949
+ var ENDPOINT_AIRPORT = '/api/web/entity/airport';
12933
12950
  /**
12934
12951
  * api/search/countries
12935
12952
  * Gets all Countries
@@ -12942,6 +12959,13 @@ PERFORMANCE OF THIS SOFTWARE.
12942
12959
  var apiKey = config.apiKey;
12943
12960
  return get(url, apiKey, config.token, signal, true);
12944
12961
  };
12962
+ var searchCountries = function (config, searchTerm, signal) {
12963
+ var apiKey = config.apiKey;
12964
+ var safeSearch = searchTerm.replace(/'/g, "''");
12965
+ var filter = "$skip=0&$top=20&$orderby=name%20asc&$filter=contains(name,'" + safeSearch.toLowerCase() + "')";
12966
+ var url = '' + config.host + ENDPOINT_COUNTRIES + '?' + filter;
12967
+ return get(url, apiKey, config.token, signal, true);
12968
+ };
12945
12969
  var searchRegions = function (config, searchTerm, signal) {
12946
12970
  var apiKey = config.apiKey;
12947
12971
  var safeSearch = searchTerm.replace(/'/g, "''");
@@ -12968,6 +12992,11 @@ PERFORMANCE OF THIS SOFTWARE.
12968
12992
  var apiKey = config.apiKey;
12969
12993
  return get(url, apiKey, config.token, signal, true);
12970
12994
  };
12995
+ var getAirports = function (config, signal) {
12996
+ var url = '' + config.host + ENDPOINT_AIRPORT;
12997
+ var apiKey = config.apiKey;
12998
+ return get(url, apiKey, config.token, signal, true);
12999
+ };
12971
13000
 
12972
13001
  var createParams = function (filter, all, gridColumns, mode, forceToLower) {
12973
13002
  var params = {};
@@ -13347,6 +13376,7 @@ PERFORMANCE OF THIS SOFTWARE.
13347
13376
  exports.forgotPassword = forgotPassword;
13348
13377
  exports.generateBookingAccommodations = generateBookingAccommodations;
13349
13378
  exports.getAffiliates = getAffiliates;
13379
+ exports.getAirports = getAirports;
13350
13380
  exports.getAllotment = getAllotment;
13351
13381
  exports.getAllotmentAvailability = getAllotmentAvailability;
13352
13382
  exports.getAllotmentList = getAllotmentList;
@@ -13371,6 +13401,7 @@ PERFORMANCE OF THIS SOFTWARE.
13371
13401
  exports.print = print;
13372
13402
  exports.resetPassword = resetPassword;
13373
13403
  exports.search = search;
13404
+ exports.searchCountries = searchCountries;
13374
13405
  exports.searchElastic = searchElastic;
13375
13406
  exports.searchFlightPool = searchFlightPool;
13376
13407
  exports.searchLocations = searchLocations;
@@ -30949,6 +30980,20 @@ var Icon$2 = function (_a) {
30949
30980
  }
30950
30981
  };
30951
30982
 
30983
+ var SearchResultsConfigurationContext = React__default.createContext(undefined);
30984
+
30985
+ var Spinner = function () {
30986
+ var _a;
30987
+ var context = useContext(SearchResultsConfigurationContext);
30988
+ var translations = getTranslations((_a = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _a !== void 0 ? _a : 'en-GB');
30989
+ return React__default.createElement(
30990
+ 'div',
30991
+ { className: 'spinner__container' },
30992
+ React__default.createElement('span', { className: 'spinner__icon' }),
30993
+ React__default.createElement('span', { className: 'spinner__label' }, translations === null || translations === void 0 ? void 0 : translations.SRP.LOADING)
30994
+ );
30995
+ };
30996
+
30952
30997
  var SearchInput = function (_a) {
30953
30998
  var searchResults = _a.searchResults,
30954
30999
  onOptionSelect = _a.onOptionSelect,
@@ -30956,7 +31001,8 @@ var SearchInput = function (_a) {
30956
31001
  _a.label;
30957
31002
  var isSecondInput = _a.isSecondInput,
30958
31003
  isDoubleInput = _a.isDoubleInput,
30959
- isDisabled = _a.isDisabled;
31004
+ isDisabled = _a.isDisabled,
31005
+ isLoading = _a.isLoading;
30960
31006
  if (isDisabled) {
30961
31007
  return null;
30962
31008
  }
@@ -30975,9 +31021,9 @@ var SearchInput = function (_a) {
30975
31021
  })
30976
31022
  );
30977
31023
  };
30978
- if (searchResults.length === 0) {
30979
- return null;
30980
- }
31024
+ // if (searchResults.length === 0) {
31025
+ // return null;
31026
+ // }
30981
31027
  return React__default.createElement(
30982
31028
  'div',
30983
31029
  {
@@ -30985,6 +31031,7 @@ var SearchInput = function (_a) {
30985
31031
  .concat(isSecondInput ? ' qsm__double-input-options--second-input' : '')
30986
31032
  .concat(isDoubleInput ? ' qsm__double-input-options--splittable' : '')
30987
31033
  },
31034
+ isLoading && React__default.createElement(Spinner, null),
30988
31035
  searchResults.map(function (option, index) {
30989
31036
  return React__default.createElement(
30990
31037
  'div',
@@ -32296,6 +32343,9 @@ var SearchInputGroup = function (_a) {
32296
32343
  placeholder = fieldConfig.placeholder,
32297
32344
  options = fieldConfig.options,
32298
32345
  autoComplete = fieldConfig.autoComplete;
32346
+ var _j = useState(false),
32347
+ isLoading = _j[0],
32348
+ setIsLoading = _j[1];
32299
32349
  var selector = useMemo(
32300
32350
  function () {
32301
32351
  return function (state) {
@@ -32306,11 +32356,11 @@ var SearchInputGroup = function (_a) {
32306
32356
  [fieldKey]
32307
32357
  );
32308
32358
  var value = useSelector(selector);
32309
- var _j = useSelector(function (state) {
32359
+ var _k = useSelector(function (state) {
32310
32360
  return state.qsm;
32311
32361
  }),
32312
- searchResults = _j.searchResults,
32313
- activeSearchField = _j.activeSearchField;
32362
+ searchResults = _k.searchResults,
32363
+ activeSearchField = _k.activeSearchField;
32314
32364
  var selectedOption = options.find(function (option) {
32315
32365
  return option.value === value;
32316
32366
  });
@@ -32338,6 +32388,7 @@ var SearchInputGroup = function (_a) {
32338
32388
  // if field has custom onChange (API search)
32339
32389
  if (fieldConfig.onChange) {
32340
32390
  fieldConfig.onChange(input);
32391
+ setIsLoading(true);
32341
32392
  return;
32342
32393
  }
32343
32394
  // fallback to local filtering
@@ -32345,6 +32396,13 @@ var SearchInputGroup = function (_a) {
32345
32396
  },
32346
32397
  [dispatch, fieldKey, small, match, fieldConfig]
32347
32398
  );
32399
+ useEffect(
32400
+ function () {
32401
+ console.log('options updated, resetting loading state');
32402
+ setIsLoading(false);
32403
+ },
32404
+ [options]
32405
+ );
32348
32406
  useEffect(
32349
32407
  function () {
32350
32408
  if (!value || activeSearchField !== fieldKey) return;
@@ -32462,7 +32520,8 @@ var SearchInputGroup = function (_a) {
32462
32520
  label: label,
32463
32521
  isSecondInput: isSecondInput,
32464
32522
  isDoubleInput: isDoubleInput,
32465
- isDisabled: isDisabled
32523
+ isDisabled: isDisabled,
32524
+ isLoading: isLoading
32466
32525
  })
32467
32526
  );
32468
32527
  };
@@ -32860,6 +32919,17 @@ var QSMContainer = function () {
32860
32919
  };
32861
32920
  var handleQsmTypeChange = function (value) {
32862
32921
  dispatch(setSelectedQsmType(value));
32922
+ if (value === 'groupTour') {
32923
+ handleDateChange({
32924
+ fromDate: new Date(fromDate !== null && fromDate !== void 0 ? fromDate : Date.now()),
32925
+ toDate: addYears(new Date(fromDate !== null && fromDate !== void 0 ? fromDate : Date.now()), 1)
32926
+ });
32927
+ } else {
32928
+ handleDateChange({
32929
+ fromDate: new Date(fromDate !== null && fromDate !== void 0 ? fromDate : Date.now()),
32930
+ toDate: addDays(new Date(fromDate !== null && fromDate !== void 0 ? fromDate : Date.now()), 7)
32931
+ });
32932
+ }
32863
32933
  };
32864
32934
  var handleSubmit = function () {
32865
32935
  if (!onSubmit) return;
@@ -33274,13 +33344,11 @@ var QSM = function (_a) {
33274
33344
  );
33275
33345
  };
33276
33346
 
33277
- var SearchResultsConfigurationContext = React__default.createContext(undefined);
33278
-
33279
33347
  var _a;
33280
33348
  var initialState$1 = {
33281
33349
  results: [],
33282
33350
  filteredResults: [],
33283
- selectedHotelId: null,
33351
+ selectedSearchResultId: null,
33284
33352
  selectedFlight: null,
33285
33353
  selectedFlightDetails: null,
33286
33354
  bookingPackageDetails: null,
@@ -33302,8 +33370,8 @@ var searchResultsSlice = createSlice({
33302
33370
  setFilteredResults: function (state, action) {
33303
33371
  state.filteredResults = action.payload;
33304
33372
  },
33305
- setSelectedHotel: function (state, action) {
33306
- state.selectedHotelId = action.payload;
33373
+ setSelectedSearchResult: function (state, action) {
33374
+ state.selectedSearchResultId = action.payload;
33307
33375
  },
33308
33376
  setSelectedFlight: function (state, action) {
33309
33377
  state.selectedFlight = action.payload;
@@ -33370,7 +33438,7 @@ var searchResultsSlice = createSlice({
33370
33438
  });
33371
33439
  var setResults = ((_a = searchResultsSlice.actions), _a.setResults),
33372
33440
  setFilteredResults = _a.setFilteredResults,
33373
- setSelectedHotel = _a.setSelectedHotel,
33441
+ setSelectedSearchResult = _a.setSelectedSearchResult,
33374
33442
  setSelectedFlight = _a.setSelectedFlight,
33375
33443
  setSelectedFlightDetails = _a.setSelectedFlightDetails,
33376
33444
  setBookingPackageDetails = _a.setBookingPackageDetails,
@@ -34410,18 +34478,6 @@ var Icon$1 = function (_a) {
34410
34478
  }
34411
34479
  };
34412
34480
 
34413
- var Spinner = function () {
34414
- var _a;
34415
- var context = useContext(SearchResultsConfigurationContext);
34416
- var translations = getTranslations((_a = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _a !== void 0 ? _a : 'en-GB');
34417
- return React__default.createElement(
34418
- 'div',
34419
- { className: 'spinner__container' },
34420
- React__default.createElement('span', { className: 'spinner__icon' }),
34421
- React__default.createElement('span', { className: 'spinner__label' }, translations === null || translations === void 0 ? void 0 : translations.SRP.LOADING)
34422
- );
34423
- };
34424
-
34425
34481
  var getDepartureTime = function (flight) {
34426
34482
  var _a, _b;
34427
34483
  if (isEmpty(flight === null || flight === void 0 ? void 0 : flight.metaDatas)) return '';
@@ -36817,88 +36873,40 @@ var useFlightSearch = function () {
36817
36873
  return context;
36818
36874
  };
36819
36875
 
36820
- var FlyIn = function (_a) {
36876
+ var FlightsFlyIn = function (_a) {
36821
36877
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
36822
- _a.srpType;
36823
36878
  var isOpen = _a.isOpen,
36824
- setIsOpen = _a.setIsOpen,
36825
- _p = _a.className,
36826
- className = _p === void 0 ? '' : _p,
36827
- onPanelRef = _a.onPanelRef;
36879
+ setIsOpen = _a.setIsOpen;
36828
36880
  var context = useContext(SearchResultsConfigurationContext);
36829
36881
  var language = (_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB';
36830
36882
  var translations = getTranslations(language);
36831
36883
  var dispatch = useDispatch();
36832
- var _q = useFlightSearch(),
36833
- flightSearchDetailsLoading = _q.flightSearchDetailsLoading,
36834
- flightDetailsSearchResults = _q.flightDetailsSearchResults,
36835
- onCancelSearch = _q.onCancelSearch,
36836
- numberOfTravellers = _q.numberOfTravellers;
36884
+ var _p = useFlightSearch(),
36885
+ flightSearchDetailsLoading = _p.flightSearchDetailsLoading,
36886
+ flightDetailsSearchResults = _p.flightDetailsSearchResults,
36887
+ onCancelSearch = _p.onCancelSearch,
36888
+ numberOfTravellers = _p.numberOfTravellers;
36837
36889
  var selectedFlight = useSelector(function (state) {
36838
36890
  return state.searchResults;
36839
36891
  }).selectedFlight;
36840
- var panelRef = useRef(null);
36841
- var _r = useState([]),
36842
- flights = _r[0],
36843
- setFlights = _r[1];
36844
- var _s = useState(undefined),
36845
- flight = _s[0],
36846
- setFlight = _s[1];
36847
- var _t = useState([]),
36848
- uniqueOutwardFlights = _t[0],
36849
- setUniqueOutwardFlights = _t[1];
36850
- var _u = useState(null),
36851
- selectedOutwardFareCode = _u[0],
36852
- setSelectedOutwardFareCode = _u[1];
36853
- var _v = useState([]),
36854
- uniqueReturnFlights = _v[0],
36855
- setUniqueReturnFlights = _v[1];
36856
- var _w = useState(null),
36857
- selectedReturnFareCode = _w[0],
36858
- setSelectedReturnFareCode = _w[1];
36859
- // expose DOM node if needed
36860
- useEffect(
36861
- function () {
36862
- onPanelRef === null || onPanelRef === void 0 ? void 0 : onPanelRef(panelRef.current);
36863
- return function () {
36864
- return onPanelRef === null || onPanelRef === void 0 ? void 0 : onPanelRef(null);
36865
- };
36866
- },
36867
- [onPanelRef]
36868
- );
36869
- useEffect(
36870
- function () {
36871
- // click outside detection
36872
- var handleClickOutside = function (event) {
36873
- if (isOpen && panelRef.current && !panelRef.current.contains(event.target)) {
36874
- handleClose();
36875
- }
36876
- };
36877
- document.addEventListener('mousedown', handleClickOutside);
36878
- return function () {
36879
- return document.removeEventListener('mousedown', handleClickOutside);
36880
- };
36881
- },
36882
- [isOpen, setIsOpen]
36883
- );
36884
- // body scroll lock
36885
- useEffect(
36886
- function () {
36887
- document.body.style.overflow = isOpen ? 'hidden' : '';
36888
- return function () {
36889
- document.body.style.overflow = '';
36890
- };
36891
- },
36892
- [isOpen]
36893
- );
36894
- var handleClose = function () {
36895
- if (isOpen && panelRef.current) {
36896
- dispatch(setSelectedFlight(null));
36897
- dispatch(setSelectedFlightDetails(null));
36898
- onCancelSearch();
36899
- setIsOpen(false);
36900
- }
36901
- };
36892
+ var _q = useState([]),
36893
+ flights = _q[0],
36894
+ setFlights = _q[1];
36895
+ var _r = useState(undefined),
36896
+ flight = _r[0],
36897
+ setFlight = _r[1];
36898
+ var _s = useState([]),
36899
+ uniqueOutwardFlights = _s[0],
36900
+ setUniqueOutwardFlights = _s[1];
36901
+ var _t = useState(null),
36902
+ selectedOutwardFareCode = _t[0],
36903
+ setSelectedOutwardFareCode = _t[1];
36904
+ var _u = useState([]),
36905
+ uniqueReturnFlights = _u[0],
36906
+ setUniqueReturnFlights = _u[1];
36907
+ var _v = useState(null),
36908
+ selectedReturnFareCode = _v[0],
36909
+ setSelectedReturnFareCode = _v[1];
36902
36910
  useEffect(
36903
36911
  function () {
36904
36912
  var _a, _b, _c, _d;
@@ -37086,330 +37094,20 @@ var FlyIn = function (_a) {
37086
37094
  };
37087
37095
  // TODO: go to booking page?
37088
37096
  var handleConfirm = function () {
37089
- if (isOpen && panelRef.current) {
37097
+ if (isOpen) {
37090
37098
  onCancelSearch();
37091
37099
  setIsOpen(false);
37092
37100
  }
37093
37101
  };
37094
37102
  return React__default.createElement(
37095
- 'div',
37096
- { className: 'flyin '.concat(isOpen ? 'flyin--active' : '', ' ').concat(className) },
37103
+ React__default.Fragment,
37104
+ null,
37097
37105
  React__default.createElement(
37098
37106
  'div',
37099
- { className: 'flyin__panel '.concat(isOpen ? 'flyin__panel--active' : ''), ref: panelRef },
37100
- React__default.createElement(
37101
- 'div',
37102
- { className: 'flyin__content' },
37103
- React__default.createElement(
37104
- 'div',
37105
- { className: 'flyin__content-title-row' },
37106
- React__default.createElement('h3', { className: 'flyin__content-title' }, 'Select your fare'),
37107
- React__default.createElement(
37108
- 'span',
37109
- {
37110
- className: 'flyin__close',
37111
- onClick: function () {
37112
- return handleClose();
37113
- }
37114
- },
37115
- React__default.createElement(Icon, { name: 'ui-close', width: 30, height: 30, 'aria-hidden': 'true' })
37116
- )
37117
- ),
37118
- flightSearchDetailsLoading || isEmpty(flights)
37119
- ? React__default.createElement(Spinner, null)
37120
- : flight &&
37121
- React__default.createElement(
37122
- 'div',
37123
- { className: 'flyin__content-text-row' },
37124
- React__default.createElement(
37125
- 'div',
37126
- { className: 'flyin__content-text-icon-row' },
37127
- React__default.createElement('img', {
37128
- src: 'https://media.tidesoftware.be/media/shared/Airlines/'.concat(
37129
- (_c = getDepartureSegment(flight.outward)) === null || _c === void 0 ? void 0 : _c.marketingAirlineCode,
37130
- '.png?height=256'
37131
- ),
37132
- alt: 'airline-logo',
37133
- className: 'logo',
37134
- 'aria-hidden': 'true'
37135
- }),
37136
- React__default.createElement(
37137
- 'div',
37138
- { className: 'flyin__content-text-col' },
37139
- React__default.createElement(
37140
- 'span',
37141
- { className: 'flyin__content-text-title-row' },
37142
- React__default.createElement('strong', null, translations.SRP.DEPARTURE),
37143
- ' ',
37144
- (_d = getDepartureSegment(flight === null || flight === void 0 ? void 0 : flight.outward)) === null || _d === void 0
37145
- ? void 0
37146
- : _d.departureAirportCode,
37147
- ' -',
37148
- ' ',
37149
- (_e = getArrivalSegment(flight === null || flight === void 0 ? void 0 : flight.outward)) === null || _e === void 0
37150
- ? void 0
37151
- : _e.arrivalAirportCode
37152
- ),
37153
- React__default.createElement(
37154
- 'span',
37155
- { className: 'flyin__content-text' },
37156
- timeFromDateTime(
37157
- (_f = getDepartureSegment(flight === null || flight === void 0 ? void 0 : flight.outward)) === null || _f === void 0
37158
- ? void 0
37159
- : _f.departureDateTime
37160
- ),
37161
- ' -',
37162
- ' ',
37163
- timeFromDateTime(
37164
- (_g = getArrivalSegment(flight === null || flight === void 0 ? void 0 : flight.outward)) === null || _g === void 0
37165
- ? void 0
37166
- : _g.arrivalDateTime
37167
- ),
37168
- ' (',
37169
- durationTicksInHoursString(flight.outward.durationInTicks),
37170
- ',',
37171
- ' ',
37172
- getNumberOfStopsLabel(flight.outward, translations.SRP.DIRECT, translations.SRP.STOPS, translations.SRP.STOP),
37173
- '), ',
37174
- numberOfTravellers,
37175
- ' ',
37176
- 'travellers'
37177
- )
37178
- )
37179
- ),
37180
- React__default.createElement(
37181
- 'div',
37182
- { className: 'flyin__content-arrow-row' },
37183
- React__default.createElement(
37184
- 'div',
37185
- { className: 'flyin__content-arrow is-disabled', 'aria-disabled': 'true' },
37186
- React__default.createElement(Icon, {
37187
- name: 'ui-arrow',
37188
- className: 'flyin__content-arrow-icon',
37189
- width: 16,
37190
- height: 16,
37191
- 'aria-hidden': 'true'
37192
- })
37193
- ),
37194
- React__default.createElement(
37195
- 'div',
37196
- { className: 'flyin__content-arrow' },
37197
- React__default.createElement(Icon, {
37198
- name: 'ui-arrow',
37199
- className: 'flyin__content-arrow-icon flyin__content-arrow-icon--forward',
37200
- width: 16,
37201
- height: 16,
37202
- 'aria-hidden': 'true'
37203
- })
37204
- )
37205
- )
37206
- )
37207
- ),
37208
- !flightSearchDetailsLoading &&
37209
- flight &&
37210
- React__default.createElement(
37211
- React__default.Fragment,
37212
- null,
37213
- React__default.createElement(
37214
- 'div',
37215
- { className: 'flyin__content-cards-wrapper' },
37216
- React__default.createElement(
37217
- 'div',
37218
- { className: 'flyin__content-cards' },
37219
- uniqueOutwardFlights.map(function (flightOption, index) {
37220
- var firstSegment = first(flightOption.outward.segments);
37221
- if (!firstSegment) return null;
37222
- var diff = getOutwardPriceDiff(firstSegment.metaData.fareCode);
37223
- return React__default.createElement(
37224
- 'div',
37225
- {
37226
- key: 'outward-flight-option-'.concat(index),
37227
- className: 'flyin__content-card '.concat(selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : '')
37228
- },
37229
- React__default.createElement(
37230
- 'div',
37231
- { className: 'flyin__content-card-top' },
37232
- React__default.createElement('span', { className: 'flyin__content-card-top-tag' }, firstSegment.metaData.fareMarketingName),
37233
- diff !== null &&
37234
- diff != 0 &&
37235
- React__default.createElement(
37236
- 'span',
37237
- {
37238
- className: 'flyin__content-card-top-price '.concat(
37239
- diff > 0 ? 'flyin__content-card-top-price--increase' : diff < 0 ? 'flyin__content-card-top-price--decrease' : ''
37240
- )
37241
- },
37242
- diff > 0 ? '+\u20AC'.concat(diff) : '-\u20AC'.concat(Math.abs(diff))
37243
- )
37244
- ),
37245
- React__default.createElement(
37246
- 'div',
37247
- { className: 'flyin__content-card-middle' },
37248
- React__default.createElement(
37249
- 'div',
37250
- { className: 'flyin__content-card-middle-rows' },
37251
- React__default.createElement(
37252
- 'div',
37253
- { className: 'flyin__content-card-middle-row' },
37254
- React__default.createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Number of travellers'),
37255
- React__default.createElement('span', { className: 'flyin__content-card-middle-row-right' }, numberOfTravellers)
37256
- ),
37257
- React__default.createElement(
37258
- 'div',
37259
- { className: 'flyin__content-card-middle-row' },
37260
- React__default.createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Travel class'),
37261
- React__default.createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.metaData.fareMarketingName)
37262
- ),
37263
- React__default.createElement(
37264
- 'div',
37265
- { className: 'flyin__content-card-middle-row' },
37266
- React__default.createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Booking class'),
37267
- React__default.createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.bookingClassCode)
37268
- ),
37269
- React__default.createElement(
37270
- 'div',
37271
- { className: 'flyin__content-card-middle-row' },
37272
- React__default.createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Fare basis'),
37273
- React__default.createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.metaData.fareCode)
37274
- ),
37275
- React__default.createElement(
37276
- 'div',
37277
- { className: 'flyin__content-data' },
37278
- firstSegment.metaData.luggageCarryOn &&
37279
- React__default.createElement(
37280
- 'div',
37281
- { className: 'flyin__content-data__item' },
37282
- React__default.createElement(
37283
- 'div',
37284
- { className: 'flyin__content-data__item-icon' },
37285
- React__default.createElement(Icon, { name: 'ui-bag', width: 20, 'aria-hidden': 'true' })
37286
- ),
37287
- React__default.createElement(
37288
- 'div',
37289
- { className: 'flyin__content-data__item-content' },
37290
- React__default.createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Carry-on luggage'),
37291
- React__default.createElement(
37292
- 'div',
37293
- { className: 'flyin__content-data__item-content-description' },
37294
- firstSegment.metaData.luggageCarryOn.text
37295
- )
37296
- )
37297
- ),
37298
- firstSegment.metaData.luggageChecked &&
37299
- React__default.createElement(
37300
- 'div',
37301
- { className: 'flyin__content-data__item' },
37302
- React__default.createElement(
37303
- 'div',
37304
- { className: 'flyin__content-data__item-icon' },
37305
- React__default.createElement(Icon, { name: 'ui-suitcase', width: 20 })
37306
- ),
37307
- React__default.createElement(
37308
- 'div',
37309
- { className: 'flyin__content-data__item-content' },
37310
- React__default.createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Checked luggage'),
37311
- React__default.createElement(
37312
- 'div',
37313
- { className: 'flyin__content-data__item-content-description' },
37314
- firstSegment.metaData.luggageChecked.text
37315
- )
37316
- )
37317
- ),
37318
- firstSegment.metaData.seatSelection &&
37319
- React__default.createElement(
37320
- 'div',
37321
- { className: 'flyin__content-data__item' },
37322
- React__default.createElement(
37323
- 'div',
37324
- { className: 'flyin__content-data__item-icon' },
37325
- React__default.createElement(Icon, { name: 'ui-seat', width: 20 })
37326
- ),
37327
- React__default.createElement(
37328
- 'div',
37329
- { className: 'flyin__content-data__item-content' },
37330
- React__default.createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Seat selection'),
37331
- React__default.createElement(
37332
- 'div',
37333
- { className: 'flyin__content-data__item-content-description' },
37334
- firstSegment.metaData.seatSelection.text
37335
- )
37336
- )
37337
- ),
37338
- firstSegment.metaData.cancel &&
37339
- React__default.createElement(
37340
- 'div',
37341
- { className: 'flyin__content-data__item' },
37342
- React__default.createElement(
37343
- 'div',
37344
- { className: 'flyin__content-data__item-icon' },
37345
- React__default.createElement(Icon, { name: 'ui-refund', width: 20 })
37346
- ),
37347
- React__default.createElement(
37348
- 'div',
37349
- { className: 'flyin__content-data__item-content' },
37350
- React__default.createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Refund'),
37351
- React__default.createElement(
37352
- 'div',
37353
- { className: 'flyin__content-data__item-content-description' },
37354
- firstSegment.metaData.cancel.text
37355
- )
37356
- )
37357
- ),
37358
- firstSegment.metaData.other &&
37359
- React__default.createElement(
37360
- 'div',
37361
- { className: 'flyin__content-data__item' },
37362
- React__default.createElement(
37363
- 'div',
37364
- { className: 'flyin__content-data__item-icon flyin__content-data__item-icon--other' },
37365
- React__default.createElement(Icon, { name: 'ui-else', width: 20 })
37366
- ),
37367
- React__default.createElement(
37368
- 'div',
37369
- { className: 'flyin__content-data__item-content' },
37370
- React__default.createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Other'),
37371
- React__default.createElement(
37372
- 'ul',
37373
- { className: 'flyin__content-data__item-content-description flyin__content-data__item-content-description--list' },
37374
- firstSegment.metaData.other.map(function (other, index) {
37375
- return React__default.createElement('li', { key: 'other-'.concat(index) }, other.text);
37376
- })
37377
- )
37378
- )
37379
- )
37380
- )
37381
- )
37382
- ),
37383
- React__default.createElement(
37384
- 'div',
37385
- {
37386
- className: 'flyin__content-card-button',
37387
- onClick: function () {
37388
- var _a, _b, _c;
37389
- var fareCode =
37390
- (_c =
37391
- (_b = (_a = flightOption.outward.segments) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0
37392
- ? void 0
37393
- : _b.metaData) === null || _c === void 0
37394
- ? void 0
37395
- : _c.fareCode;
37396
- setSelectedOutwardFareCode(fareCode !== null && fareCode !== void 0 ? fareCode : null);
37397
- }
37398
- },
37399
- React__default.createElement(
37400
- 'div',
37401
- { className: 'cta '.concat(selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'cta--selected' : '') },
37402
- ' ',
37403
- selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'Selected' : 'Select'
37404
- )
37405
- )
37406
- );
37407
- })
37408
- )
37409
- ),
37410
- React__default.createElement(
37411
- 'div',
37412
- { className: 'flyin__content' },
37107
+ { className: 'flyin__content' },
37108
+ flightSearchDetailsLoading || isEmpty(flights)
37109
+ ? React__default.createElement(Spinner, null)
37110
+ : flight &&
37413
37111
  React__default.createElement(
37414
37112
  'div',
37415
37113
  { className: 'flyin__content-text-row' },
@@ -37418,7 +37116,7 @@ var FlyIn = function (_a) {
37418
37116
  { className: 'flyin__content-text-icon-row' },
37419
37117
  React__default.createElement('img', {
37420
37118
  src: 'https://media.tidesoftware.be/media/shared/Airlines/'.concat(
37421
- (_h = getDepartureSegment(flight.return)) === null || _h === void 0 ? void 0 : _h.marketingAirlineCode,
37119
+ (_c = getDepartureSegment(flight.outward)) === null || _c === void 0 ? void 0 : _c.marketingAirlineCode,
37422
37120
  '.png?height=256'
37423
37121
  ),
37424
37122
  alt: 'airline-logo',
@@ -37431,37 +37129,37 @@ var FlyIn = function (_a) {
37431
37129
  React__default.createElement(
37432
37130
  'span',
37433
37131
  { className: 'flyin__content-text-title-row' },
37434
- React__default.createElement('strong', null, translations.SRP.RETURN),
37132
+ React__default.createElement('strong', null, translations.SRP.DEPARTURE),
37435
37133
  ' ',
37436
- (_j = getDepartureSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _j === void 0
37134
+ (_d = getDepartureSegment(flight === null || flight === void 0 ? void 0 : flight.outward)) === null || _d === void 0
37437
37135
  ? void 0
37438
- : _j.departureAirportCode,
37136
+ : _d.departureAirportCode,
37439
37137
  ' -',
37440
37138
  ' ',
37441
- (_k = getArrivalSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _k === void 0
37139
+ (_e = getArrivalSegment(flight === null || flight === void 0 ? void 0 : flight.outward)) === null || _e === void 0
37442
37140
  ? void 0
37443
- : _k.arrivalAirportCode
37141
+ : _e.arrivalAirportCode
37444
37142
  ),
37445
37143
  React__default.createElement(
37446
37144
  'span',
37447
37145
  { className: 'flyin__content-text' },
37448
37146
  timeFromDateTime(
37449
- (_l = getDepartureSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _l === void 0
37147
+ (_f = getDepartureSegment(flight === null || flight === void 0 ? void 0 : flight.outward)) === null || _f === void 0
37450
37148
  ? void 0
37451
- : _l.departureDateTime
37149
+ : _f.departureDateTime
37452
37150
  ),
37453
37151
  ' -',
37454
37152
  ' ',
37455
37153
  timeFromDateTime(
37456
- (_m = getArrivalSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _m === void 0
37154
+ (_g = getArrivalSegment(flight === null || flight === void 0 ? void 0 : flight.outward)) === null || _g === void 0
37457
37155
  ? void 0
37458
- : _m.arrivalDateTime
37156
+ : _g.arrivalDateTime
37459
37157
  ),
37460
37158
  ' (',
37461
- durationTicksInHoursString(flight.return.durationInTicks),
37159
+ durationTicksInHoursString(flight.outward.durationInTicks),
37462
37160
  ',',
37463
37161
  ' ',
37464
- getNumberOfStopsLabel(flight.return, translations.SRP.DIRECT, translations.SRP.STOPS, translations.SRP.STOP),
37162
+ getNumberOfStopsLabel(flight.outward, translations.SRP.DIRECT, translations.SRP.STOPS, translations.SRP.STOP),
37465
37163
  '), ',
37466
37164
  numberOfTravellers,
37467
37165
  ' ',
@@ -37490,225 +37188,610 @@ var FlyIn = function (_a) {
37490
37188
  )
37491
37189
  )
37492
37190
  )
37493
- ),
37191
+ ),
37192
+ !flightSearchDetailsLoading &&
37193
+ flight &&
37194
+ React__default.createElement(
37195
+ React__default.Fragment,
37196
+ null,
37197
+ React__default.createElement(
37198
+ 'div',
37199
+ { className: 'flyin__content-cards-wrapper' },
37494
37200
  React__default.createElement(
37495
37201
  'div',
37496
- { className: 'flyin__content-cards-wrapper' },
37497
- React__default.createElement(
37498
- 'div',
37499
- { className: 'flyin__content-cards' },
37500
- uniqueReturnFlights.map(function (flightOption, index) {
37501
- var firstSegment = first(flightOption.return.segments);
37502
- if (!firstSegment) return null;
37503
- var diff = getReturnPriceDiff(firstSegment.metaData.fareCode);
37504
- return React__default.createElement(
37202
+ { className: 'flyin__content-cards' },
37203
+ uniqueOutwardFlights.map(function (flightOption, index) {
37204
+ var firstSegment = first(flightOption.outward.segments);
37205
+ if (!firstSegment) return null;
37206
+ var diff = getOutwardPriceDiff(firstSegment.metaData.fareCode);
37207
+ return React__default.createElement(
37208
+ 'div',
37209
+ {
37210
+ key: 'outward-flight-option-'.concat(index),
37211
+ className: 'flyin__content-card '.concat(selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : '')
37212
+ },
37213
+ React__default.createElement(
37505
37214
  'div',
37506
- {
37507
- key: 'return-flight-option-'.concat(index),
37508
- className: 'flyin__content-card '.concat(selectedReturnFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : '')
37509
- },
37510
- React__default.createElement(
37511
- 'div',
37512
- { className: 'flyin__content-card-top' },
37513
- React__default.createElement('span', { className: 'flyin__content-card-top-tag' }, firstSegment.metaData.fareMarketingName),
37514
- diff !== null &&
37515
- diff != 0 &&
37516
- React__default.createElement(
37517
- 'span',
37518
- {
37519
- className: 'flyin__content-card-top-price '.concat(
37520
- diff > 0 ? 'flyin__content-card-top-price--increase' : diff < 0 ? 'flyin__content-card-top-price--decrease' : ''
37521
- )
37522
- },
37523
- diff > 0 ? '+\u20AC'.concat(diff) : '-\u20AC'.concat(Math.abs(diff))
37524
- )
37525
- ),
37215
+ { className: 'flyin__content-card-top' },
37216
+ React__default.createElement('span', { className: 'flyin__content-card-top-tag' }, firstSegment.metaData.fareMarketingName),
37217
+ diff !== null &&
37218
+ diff != 0 &&
37219
+ React__default.createElement(
37220
+ 'span',
37221
+ {
37222
+ className: 'flyin__content-card-top-price '.concat(
37223
+ diff > 0 ? 'flyin__content-card-top-price--increase' : diff < 0 ? 'flyin__content-card-top-price--decrease' : ''
37224
+ )
37225
+ },
37226
+ diff > 0 ? '+\u20AC'.concat(diff) : '-\u20AC'.concat(Math.abs(diff))
37227
+ )
37228
+ ),
37229
+ React__default.createElement(
37230
+ 'div',
37231
+ { className: 'flyin__content-card-middle' },
37526
37232
  React__default.createElement(
37527
37233
  'div',
37528
- { className: 'flyin__content-card-middle' },
37234
+ { className: 'flyin__content-card-middle-rows' },
37529
37235
  React__default.createElement(
37530
37236
  'div',
37531
- { className: 'flyin__content-card-middle-rows' },
37532
- React__default.createElement(
37533
- 'div',
37534
- { className: 'flyin__content-card-middle-row' },
37535
- React__default.createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Number of travellers'),
37536
- React__default.createElement('span', { className: 'flyin__content-card-middle-row-right' }, numberOfTravellers)
37537
- ),
37538
- React__default.createElement(
37539
- 'div',
37540
- { className: 'flyin__content-card-middle-row' },
37541
- React__default.createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Travel class'),
37542
- React__default.createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.metaData.fareMarketingName)
37543
- ),
37544
- React__default.createElement(
37545
- 'div',
37546
- { className: 'flyin__content-card-middle-row' },
37547
- React__default.createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Booking class'),
37548
- React__default.createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.bookingClassCode)
37549
- ),
37550
- React__default.createElement(
37551
- 'div',
37552
- { className: 'flyin__content-card-middle-row' },
37553
- React__default.createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Fare basis'),
37554
- React__default.createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.metaData.fareCode)
37555
- ),
37556
- React__default.createElement(
37557
- 'div',
37558
- { className: 'flyin__content-data' },
37559
- firstSegment.metaData.luggageCarryOn &&
37237
+ { className: 'flyin__content-card-middle-row' },
37238
+ React__default.createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Number of travellers'),
37239
+ React__default.createElement('span', { className: 'flyin__content-card-middle-row-right' }, numberOfTravellers)
37240
+ ),
37241
+ React__default.createElement(
37242
+ 'div',
37243
+ { className: 'flyin__content-card-middle-row' },
37244
+ React__default.createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Travel class'),
37245
+ React__default.createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.metaData.fareMarketingName)
37246
+ ),
37247
+ React__default.createElement(
37248
+ 'div',
37249
+ { className: 'flyin__content-card-middle-row' },
37250
+ React__default.createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Booking class'),
37251
+ React__default.createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.bookingClassCode)
37252
+ ),
37253
+ React__default.createElement(
37254
+ 'div',
37255
+ { className: 'flyin__content-card-middle-row' },
37256
+ React__default.createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Fare basis'),
37257
+ React__default.createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.metaData.fareCode)
37258
+ ),
37259
+ React__default.createElement(
37260
+ 'div',
37261
+ { className: 'flyin__content-data' },
37262
+ firstSegment.metaData.luggageCarryOn &&
37263
+ React__default.createElement(
37264
+ 'div',
37265
+ { className: 'flyin__content-data__item' },
37560
37266
  React__default.createElement(
37561
37267
  'div',
37562
- { className: 'flyin__content-data__item' },
37268
+ { className: 'flyin__content-data__item-icon' },
37269
+ React__default.createElement(Icon, { name: 'ui-bag', width: 20, 'aria-hidden': 'true' })
37270
+ ),
37271
+ React__default.createElement(
37272
+ 'div',
37273
+ { className: 'flyin__content-data__item-content' },
37274
+ React__default.createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Carry-on luggage'),
37563
37275
  React__default.createElement(
37564
37276
  'div',
37565
- { className: 'flyin__content-data__item-icon' },
37566
- React__default.createElement(Icon, { name: 'ui-bag', width: 20, 'aria-hidden': 'true' })
37567
- ),
37277
+ { className: 'flyin__content-data__item-content-description' },
37278
+ firstSegment.metaData.luggageCarryOn.text
37279
+ )
37280
+ )
37281
+ ),
37282
+ firstSegment.metaData.luggageChecked &&
37283
+ React__default.createElement(
37284
+ 'div',
37285
+ { className: 'flyin__content-data__item' },
37286
+ React__default.createElement(
37287
+ 'div',
37288
+ { className: 'flyin__content-data__item-icon' },
37289
+ React__default.createElement(Icon, { name: 'ui-suitcase', width: 20 })
37290
+ ),
37291
+ React__default.createElement(
37292
+ 'div',
37293
+ { className: 'flyin__content-data__item-content' },
37294
+ React__default.createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Checked luggage'),
37568
37295
  React__default.createElement(
37569
37296
  'div',
37570
- { className: 'flyin__content-data__item-content' },
37571
- React__default.createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Carry-on luggage'),
37572
- React__default.createElement(
37573
- 'div',
37574
- { className: 'flyin__content-data__item-content-description' },
37575
- firstSegment.metaData.luggageCarryOn.text
37576
- )
37297
+ { className: 'flyin__content-data__item-content-description' },
37298
+ firstSegment.metaData.luggageChecked.text
37577
37299
  )
37300
+ )
37301
+ ),
37302
+ firstSegment.metaData.seatSelection &&
37303
+ React__default.createElement(
37304
+ 'div',
37305
+ { className: 'flyin__content-data__item' },
37306
+ React__default.createElement(
37307
+ 'div',
37308
+ { className: 'flyin__content-data__item-icon' },
37309
+ React__default.createElement(Icon, { name: 'ui-seat', width: 20 })
37578
37310
  ),
37579
- firstSegment.metaData.luggageChecked &&
37580
37311
  React__default.createElement(
37581
37312
  'div',
37582
- { className: 'flyin__content-data__item' },
37313
+ { className: 'flyin__content-data__item-content' },
37314
+ React__default.createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Seat selection'),
37583
37315
  React__default.createElement(
37584
37316
  'div',
37585
- { className: 'flyin__content-data__item-icon' },
37586
- React__default.createElement(Icon, { name: 'ui-suitcase', width: 20 })
37587
- ),
37317
+ { className: 'flyin__content-data__item-content-description' },
37318
+ firstSegment.metaData.seatSelection.text
37319
+ )
37320
+ )
37321
+ ),
37322
+ firstSegment.metaData.cancel &&
37323
+ React__default.createElement(
37324
+ 'div',
37325
+ { className: 'flyin__content-data__item' },
37326
+ React__default.createElement(
37327
+ 'div',
37328
+ { className: 'flyin__content-data__item-icon' },
37329
+ React__default.createElement(Icon, { name: 'ui-refund', width: 20 })
37330
+ ),
37331
+ React__default.createElement(
37332
+ 'div',
37333
+ { className: 'flyin__content-data__item-content' },
37334
+ React__default.createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Refund'),
37588
37335
  React__default.createElement(
37589
37336
  'div',
37590
- { className: 'flyin__content-data__item-content' },
37591
- React__default.createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Checked luggage'),
37592
- React__default.createElement(
37593
- 'div',
37594
- { className: 'flyin__content-data__item-content-description' },
37595
- firstSegment.metaData.luggageChecked.text
37596
- )
37337
+ { className: 'flyin__content-data__item-content-description' },
37338
+ firstSegment.metaData.cancel.text
37597
37339
  )
37340
+ )
37341
+ ),
37342
+ firstSegment.metaData.other &&
37343
+ React__default.createElement(
37344
+ 'div',
37345
+ { className: 'flyin__content-data__item' },
37346
+ React__default.createElement(
37347
+ 'div',
37348
+ { className: 'flyin__content-data__item-icon flyin__content-data__item-icon--other' },
37349
+ React__default.createElement(Icon, { name: 'ui-else', width: 20 })
37598
37350
  ),
37599
- firstSegment.metaData.seatSelection &&
37600
37351
  React__default.createElement(
37601
37352
  'div',
37602
- { className: 'flyin__content-data__item' },
37353
+ { className: 'flyin__content-data__item-content' },
37354
+ React__default.createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Other'),
37603
37355
  React__default.createElement(
37604
- 'div',
37605
- { className: 'flyin__content-data__item-icon' },
37606
- React__default.createElement(Icon, { name: 'ui-seat', width: 20 })
37607
- ),
37356
+ 'ul',
37357
+ { className: 'flyin__content-data__item-content-description flyin__content-data__item-content-description--list' },
37358
+ firstSegment.metaData.other.map(function (other, index) {
37359
+ return React__default.createElement('li', { key: 'other-'.concat(index) }, other.text);
37360
+ })
37361
+ )
37362
+ )
37363
+ )
37364
+ )
37365
+ )
37366
+ ),
37367
+ React__default.createElement(
37368
+ 'div',
37369
+ {
37370
+ className: 'flyin__content-card-button',
37371
+ onClick: function () {
37372
+ var _a, _b, _c;
37373
+ var fareCode =
37374
+ (_c =
37375
+ (_b = (_a = flightOption.outward.segments) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0
37376
+ ? void 0
37377
+ : _b.metaData) === null || _c === void 0
37378
+ ? void 0
37379
+ : _c.fareCode;
37380
+ setSelectedOutwardFareCode(fareCode !== null && fareCode !== void 0 ? fareCode : null);
37381
+ }
37382
+ },
37383
+ React__default.createElement(
37384
+ 'div',
37385
+ { className: 'cta '.concat(selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'cta--selected' : '') },
37386
+ ' ',
37387
+ selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'Selected' : 'Select'
37388
+ )
37389
+ )
37390
+ );
37391
+ })
37392
+ )
37393
+ ),
37394
+ React__default.createElement(
37395
+ 'div',
37396
+ { className: 'flyin__content' },
37397
+ React__default.createElement(
37398
+ 'div',
37399
+ { className: 'flyin__content-text-row' },
37400
+ React__default.createElement(
37401
+ 'div',
37402
+ { className: 'flyin__content-text-icon-row' },
37403
+ React__default.createElement('img', {
37404
+ src: 'https://media.tidesoftware.be/media/shared/Airlines/'.concat(
37405
+ (_h = getDepartureSegment(flight.return)) === null || _h === void 0 ? void 0 : _h.marketingAirlineCode,
37406
+ '.png?height=256'
37407
+ ),
37408
+ alt: 'airline-logo',
37409
+ className: 'logo',
37410
+ 'aria-hidden': 'true'
37411
+ }),
37412
+ React__default.createElement(
37413
+ 'div',
37414
+ { className: 'flyin__content-text-col' },
37415
+ React__default.createElement(
37416
+ 'span',
37417
+ { className: 'flyin__content-text-title-row' },
37418
+ React__default.createElement('strong', null, translations.SRP.RETURN),
37419
+ ' ',
37420
+ (_j = getDepartureSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _j === void 0
37421
+ ? void 0
37422
+ : _j.departureAirportCode,
37423
+ ' -',
37424
+ ' ',
37425
+ (_k = getArrivalSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _k === void 0
37426
+ ? void 0
37427
+ : _k.arrivalAirportCode
37428
+ ),
37429
+ React__default.createElement(
37430
+ 'span',
37431
+ { className: 'flyin__content-text' },
37432
+ timeFromDateTime(
37433
+ (_l = getDepartureSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _l === void 0
37434
+ ? void 0
37435
+ : _l.departureDateTime
37436
+ ),
37437
+ ' -',
37438
+ ' ',
37439
+ timeFromDateTime(
37440
+ (_m = getArrivalSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _m === void 0
37441
+ ? void 0
37442
+ : _m.arrivalDateTime
37443
+ ),
37444
+ ' (',
37445
+ durationTicksInHoursString(flight.return.durationInTicks),
37446
+ ',',
37447
+ ' ',
37448
+ getNumberOfStopsLabel(flight.return, translations.SRP.DIRECT, translations.SRP.STOPS, translations.SRP.STOP),
37449
+ '), ',
37450
+ numberOfTravellers,
37451
+ ' ',
37452
+ 'travellers'
37453
+ )
37454
+ )
37455
+ ),
37456
+ React__default.createElement(
37457
+ 'div',
37458
+ { className: 'flyin__content-arrow-row' },
37459
+ React__default.createElement(
37460
+ 'div',
37461
+ { className: 'flyin__content-arrow is-disabled', 'aria-disabled': 'true' },
37462
+ React__default.createElement(Icon, { name: 'ui-arrow', className: 'flyin__content-arrow-icon', width: 16, height: 16, 'aria-hidden': 'true' })
37463
+ ),
37464
+ React__default.createElement(
37465
+ 'div',
37466
+ { className: 'flyin__content-arrow' },
37467
+ React__default.createElement(Icon, {
37468
+ name: 'ui-arrow',
37469
+ className: 'flyin__content-arrow-icon flyin__content-arrow-icon--forward',
37470
+ width: 16,
37471
+ height: 16,
37472
+ 'aria-hidden': 'true'
37473
+ })
37474
+ )
37475
+ )
37476
+ )
37477
+ ),
37478
+ React__default.createElement(
37479
+ 'div',
37480
+ { className: 'flyin__content-cards-wrapper' },
37481
+ React__default.createElement(
37482
+ 'div',
37483
+ { className: 'flyin__content-cards' },
37484
+ uniqueReturnFlights.map(function (flightOption, index) {
37485
+ var firstSegment = first(flightOption.return.segments);
37486
+ if (!firstSegment) return null;
37487
+ var diff = getReturnPriceDiff(firstSegment.metaData.fareCode);
37488
+ return React__default.createElement(
37489
+ 'div',
37490
+ {
37491
+ key: 'return-flight-option-'.concat(index),
37492
+ className: 'flyin__content-card '.concat(selectedReturnFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : '')
37493
+ },
37494
+ React__default.createElement(
37495
+ 'div',
37496
+ { className: 'flyin__content-card-top' },
37497
+ React__default.createElement('span', { className: 'flyin__content-card-top-tag' }, firstSegment.metaData.fareMarketingName),
37498
+ diff !== null &&
37499
+ diff != 0 &&
37500
+ React__default.createElement(
37501
+ 'span',
37502
+ {
37503
+ className: 'flyin__content-card-top-price '.concat(
37504
+ diff > 0 ? 'flyin__content-card-top-price--increase' : diff < 0 ? 'flyin__content-card-top-price--decrease' : ''
37505
+ )
37506
+ },
37507
+ diff > 0 ? '+\u20AC'.concat(diff) : '-\u20AC'.concat(Math.abs(diff))
37508
+ )
37509
+ ),
37510
+ React__default.createElement(
37511
+ 'div',
37512
+ { className: 'flyin__content-card-middle' },
37513
+ React__default.createElement(
37514
+ 'div',
37515
+ { className: 'flyin__content-card-middle-rows' },
37516
+ React__default.createElement(
37517
+ 'div',
37518
+ { className: 'flyin__content-card-middle-row' },
37519
+ React__default.createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Number of travellers'),
37520
+ React__default.createElement('span', { className: 'flyin__content-card-middle-row-right' }, numberOfTravellers)
37521
+ ),
37522
+ React__default.createElement(
37523
+ 'div',
37524
+ { className: 'flyin__content-card-middle-row' },
37525
+ React__default.createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Travel class'),
37526
+ React__default.createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.metaData.fareMarketingName)
37527
+ ),
37528
+ React__default.createElement(
37529
+ 'div',
37530
+ { className: 'flyin__content-card-middle-row' },
37531
+ React__default.createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Booking class'),
37532
+ React__default.createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.bookingClassCode)
37533
+ ),
37534
+ React__default.createElement(
37535
+ 'div',
37536
+ { className: 'flyin__content-card-middle-row' },
37537
+ React__default.createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Fare basis'),
37538
+ React__default.createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.metaData.fareCode)
37539
+ ),
37540
+ React__default.createElement(
37541
+ 'div',
37542
+ { className: 'flyin__content-data' },
37543
+ firstSegment.metaData.luggageCarryOn &&
37544
+ React__default.createElement(
37545
+ 'div',
37546
+ { className: 'flyin__content-data__item' },
37547
+ React__default.createElement(
37548
+ 'div',
37549
+ { className: 'flyin__content-data__item-icon' },
37550
+ React__default.createElement(Icon, { name: 'ui-bag', width: 20, 'aria-hidden': 'true' })
37551
+ ),
37552
+ React__default.createElement(
37553
+ 'div',
37554
+ { className: 'flyin__content-data__item-content' },
37555
+ React__default.createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Carry-on luggage'),
37608
37556
  React__default.createElement(
37609
37557
  'div',
37610
- { className: 'flyin__content-data__item-content' },
37611
- React__default.createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Seat selection'),
37612
- React__default.createElement(
37613
- 'div',
37614
- { className: 'flyin__content-data__item-content-description' },
37615
- firstSegment.metaData.seatSelection.text
37616
- )
37558
+ { className: 'flyin__content-data__item-content-description' },
37559
+ firstSegment.metaData.luggageCarryOn.text
37617
37560
  )
37561
+ )
37562
+ ),
37563
+ firstSegment.metaData.luggageChecked &&
37564
+ React__default.createElement(
37565
+ 'div',
37566
+ { className: 'flyin__content-data__item' },
37567
+ React__default.createElement(
37568
+ 'div',
37569
+ { className: 'flyin__content-data__item-icon' },
37570
+ React__default.createElement(Icon, { name: 'ui-suitcase', width: 20 })
37618
37571
  ),
37619
- firstSegment.metaData.cancel &&
37620
37572
  React__default.createElement(
37621
37573
  'div',
37622
- { className: 'flyin__content-data__item' },
37574
+ { className: 'flyin__content-data__item-content' },
37575
+ React__default.createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Checked luggage'),
37623
37576
  React__default.createElement(
37624
37577
  'div',
37625
- { className: 'flyin__content-data__item-icon' },
37626
- React__default.createElement(Icon, { name: 'ui-refund', width: 20 })
37627
- ),
37578
+ { className: 'flyin__content-data__item-content-description' },
37579
+ firstSegment.metaData.luggageChecked.text
37580
+ )
37581
+ )
37582
+ ),
37583
+ firstSegment.metaData.seatSelection &&
37584
+ React__default.createElement(
37585
+ 'div',
37586
+ { className: 'flyin__content-data__item' },
37587
+ React__default.createElement(
37588
+ 'div',
37589
+ { className: 'flyin__content-data__item-icon' },
37590
+ React__default.createElement(Icon, { name: 'ui-seat', width: 20 })
37591
+ ),
37592
+ React__default.createElement(
37593
+ 'div',
37594
+ { className: 'flyin__content-data__item-content' },
37595
+ React__default.createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Seat selection'),
37628
37596
  React__default.createElement(
37629
37597
  'div',
37630
- { className: 'flyin__content-data__item-content' },
37631
- React__default.createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Refund'),
37632
- React__default.createElement(
37633
- 'div',
37634
- { className: 'flyin__content-data__item-content-description' },
37635
- firstSegment.metaData.cancel.text
37636
- )
37598
+ { className: 'flyin__content-data__item-content-description' },
37599
+ firstSegment.metaData.seatSelection.text
37637
37600
  )
37601
+ )
37602
+ ),
37603
+ firstSegment.metaData.cancel &&
37604
+ React__default.createElement(
37605
+ 'div',
37606
+ { className: 'flyin__content-data__item' },
37607
+ React__default.createElement(
37608
+ 'div',
37609
+ { className: 'flyin__content-data__item-icon' },
37610
+ React__default.createElement(Icon, { name: 'ui-refund', width: 20 })
37638
37611
  ),
37639
- firstSegment.metaData.other &&
37640
37612
  React__default.createElement(
37641
37613
  'div',
37642
- { className: 'flyin__content-data__item' },
37614
+ { className: 'flyin__content-data__item-content' },
37615
+ React__default.createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Refund'),
37643
37616
  React__default.createElement(
37644
37617
  'div',
37645
- { className: 'flyin__content-data__item-icon flyin__content-data__item-icon--other' },
37646
- React__default.createElement(Icon, { name: 'ui-else', width: 20 })
37647
- ),
37618
+ { className: 'flyin__content-data__item-content-description' },
37619
+ firstSegment.metaData.cancel.text
37620
+ )
37621
+ )
37622
+ ),
37623
+ firstSegment.metaData.other &&
37624
+ React__default.createElement(
37625
+ 'div',
37626
+ { className: 'flyin__content-data__item' },
37627
+ React__default.createElement(
37628
+ 'div',
37629
+ { className: 'flyin__content-data__item-icon flyin__content-data__item-icon--other' },
37630
+ React__default.createElement(Icon, { name: 'ui-else', width: 20 })
37631
+ ),
37632
+ React__default.createElement(
37633
+ 'div',
37634
+ { className: 'flyin__content-data__item-content' },
37635
+ React__default.createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Other'),
37648
37636
  React__default.createElement(
37649
- 'div',
37650
- { className: 'flyin__content-data__item-content' },
37651
- React__default.createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Other'),
37652
- React__default.createElement(
37653
- 'ul',
37654
- { className: 'flyin__content-data__item-content-description flyin__content-data__item-content-description--list' },
37655
- firstSegment.metaData.other.map(function (other, index) {
37656
- return React__default.createElement('li', { key: 'other-'.concat(index) }, other.text);
37657
- })
37658
- )
37637
+ 'ul',
37638
+ { className: 'flyin__content-data__item-content-description flyin__content-data__item-content-description--list' },
37639
+ firstSegment.metaData.other.map(function (other, index) {
37640
+ return React__default.createElement('li', { key: 'other-'.concat(index) }, other.text);
37641
+ })
37659
37642
  )
37660
37643
  )
37661
- )
37644
+ )
37662
37645
  )
37663
- ),
37646
+ )
37647
+ ),
37648
+ React__default.createElement(
37649
+ 'div',
37650
+ {
37651
+ className: 'flyin__content-card-button',
37652
+ onClick: function () {
37653
+ var _a, _b, _c;
37654
+ var fareCode =
37655
+ (_c =
37656
+ (_b = (_a = flightOption.return.segments) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0
37657
+ ? void 0
37658
+ : _b.metaData) === null || _c === void 0
37659
+ ? void 0
37660
+ : _c.fareCode;
37661
+ setSelectedReturnFareCode(fareCode !== null && fareCode !== void 0 ? fareCode : null);
37662
+ }
37663
+ },
37664
37664
  React__default.createElement(
37665
37665
  'div',
37666
- {
37667
- className: 'flyin__content-card-button',
37668
- onClick: function () {
37669
- var _a, _b, _c;
37670
- var fareCode =
37671
- (_c =
37672
- (_b = (_a = flightOption.return.segments) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0
37673
- ? void 0
37674
- : _b.metaData) === null || _c === void 0
37675
- ? void 0
37676
- : _c.fareCode;
37677
- setSelectedReturnFareCode(fareCode !== null && fareCode !== void 0 ? fareCode : null);
37678
- }
37679
- },
37680
- React__default.createElement(
37681
- 'div',
37682
- { className: 'cta '.concat(selectedReturnFareCode === firstSegment.metaData.fareCode ? 'cta--selected' : '') },
37683
- ' ',
37684
- selectedReturnFareCode === firstSegment.metaData.fareCode ? 'Selected' : 'Select'
37685
- )
37666
+ { className: 'cta '.concat(selectedReturnFareCode === firstSegment.metaData.fareCode ? 'cta--selected' : '') },
37667
+ ' ',
37668
+ selectedReturnFareCode === firstSegment.metaData.fareCode ? 'Selected' : 'Select'
37686
37669
  )
37687
- );
37688
- })
37689
- )
37670
+ )
37671
+ );
37672
+ })
37690
37673
  )
37674
+ )
37675
+ ),
37676
+ !flightSearchDetailsLoading &&
37677
+ React__default.createElement(
37678
+ 'div',
37679
+ { className: 'flyin__footer' },
37680
+ React__default.createElement(
37681
+ 'div',
37682
+ { className: 'flyin__footer__price' },
37683
+ 'Total price: \u20AC',
37684
+ (_o = selectedCombinationFlight === null || selectedCombinationFlight === void 0 ? void 0 : selectedCombinationFlight.price) === null || _o === void 0
37685
+ ? void 0
37686
+ : _o.toFixed(2)
37691
37687
  ),
37692
- selectedCombinationFlight &&
37693
- !flightSearchDetailsLoading &&
37694
37688
  React__default.createElement(
37695
37689
  'div',
37696
- { className: 'flyin__footer' },
37697
- React__default.createElement(
37698
- 'div',
37699
- { className: 'flyin__footer__price' },
37700
- 'Total price: \u20AC',
37701
- (_o = selectedCombinationFlight === null || selectedCombinationFlight === void 0 ? void 0 : selectedCombinationFlight.price) === null ||
37702
- _o === void 0
37703
- ? void 0
37704
- : _o.toFixed(2)
37705
- ),
37690
+ { className: 'flyin__button-wrapper' },
37691
+ React__default.createElement('button', { className: 'cta cta--select', onClick: handleConfirm }, translations.PRODUCT.BOOK_NOW)
37692
+ )
37693
+ )
37694
+ );
37695
+ };
37696
+
37697
+ var AccommodationFlyIn = function (_a) {
37698
+ var _b;
37699
+ _a.isLoading;
37700
+ _a.isOpen;
37701
+ _a.setIsOpen;
37702
+ var context = useContext(SearchResultsConfigurationContext);
37703
+ var language = (_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB';
37704
+ getTranslations(language);
37705
+ useSelector(function (state) {
37706
+ return state.searchResults;
37707
+ }).selectedSearchResultId;
37708
+ return React__default.createElement(React__default.Fragment, null, React__default.createElement('div', { className: 'flyin__content' }, 'TODO'));
37709
+ };
37710
+
37711
+ var FlyIn = function (_a) {
37712
+ var title = _a.title,
37713
+ srpType = _a.srpType,
37714
+ isOpen = _a.isOpen,
37715
+ setIsOpen = _a.setIsOpen,
37716
+ _b = _a.className,
37717
+ className = _b === void 0 ? '' : _b,
37718
+ onPanelRef = _a.onPanelRef;
37719
+ var dispatch = useDispatch();
37720
+ var onCancelSearch = useFlightSearch().onCancelSearch;
37721
+ var panelRef = useRef(null);
37722
+ // expose DOM node if needed
37723
+ useEffect(
37724
+ function () {
37725
+ onPanelRef === null || onPanelRef === void 0 ? void 0 : onPanelRef(panelRef.current);
37726
+ return function () {
37727
+ return onPanelRef === null || onPanelRef === void 0 ? void 0 : onPanelRef(null);
37728
+ };
37729
+ },
37730
+ [onPanelRef]
37731
+ );
37732
+ useEffect(
37733
+ function () {
37734
+ // click outside detection
37735
+ var handleClickOutside = function (event) {
37736
+ if (isOpen && panelRef.current && !panelRef.current.contains(event.target)) {
37737
+ handleClose();
37738
+ }
37739
+ };
37740
+ document.addEventListener('mousedown', handleClickOutside);
37741
+ return function () {
37742
+ return document.removeEventListener('mousedown', handleClickOutside);
37743
+ };
37744
+ },
37745
+ [isOpen, setIsOpen]
37746
+ );
37747
+ // body scroll lock
37748
+ useEffect(
37749
+ function () {
37750
+ document.body.style.overflow = isOpen ? 'hidden' : '';
37751
+ return function () {
37752
+ document.body.style.overflow = '';
37753
+ };
37754
+ },
37755
+ [isOpen]
37756
+ );
37757
+ var handleClose = function () {
37758
+ if (isOpen && panelRef.current) {
37759
+ if (srpType === 'flight') {
37760
+ dispatch(setSelectedFlight(null));
37761
+ dispatch(setSelectedFlightDetails(null));
37762
+ onCancelSearch();
37763
+ }
37764
+ setIsOpen(false);
37765
+ }
37766
+ };
37767
+ return React__default.createElement(
37768
+ 'div',
37769
+ { className: 'flyin '.concat(isOpen ? 'flyin--active' : '', ' ').concat(className) },
37770
+ React__default.createElement(
37771
+ 'div',
37772
+ { className: 'flyin__panel '.concat(isOpen ? 'flyin__panel--active' : ''), ref: panelRef },
37773
+ React__default.createElement(
37774
+ 'div',
37775
+ { className: 'flyin__content' },
37776
+ React__default.createElement(
37777
+ 'div',
37778
+ { className: 'flyin__content-title-row' },
37779
+ React__default.createElement('h3', { className: 'flyin__content-title' }, title),
37706
37780
  React__default.createElement(
37707
- 'div',
37708
- { className: 'flyin__button-wrapper' },
37709
- React__default.createElement('button', { className: 'cta cta--select', onClick: handleConfirm }, translations.PRODUCT.BOOK_NOW)
37781
+ 'span',
37782
+ {
37783
+ className: 'flyin__close',
37784
+ onClick: function () {
37785
+ return handleClose();
37786
+ }
37787
+ },
37788
+ React__default.createElement(Icon, { name: 'ui-close', width: 30, height: 30, 'aria-hidden': 'true' })
37710
37789
  )
37711
37790
  )
37791
+ ),
37792
+ srpType === 'flight' && React__default.createElement(FlightsFlyIn, { isOpen: isOpen, setIsOpen: setIsOpen }),
37793
+ (srpType === 'hotel' || srpType === 'groupTour') &&
37794
+ React__default.createElement(AccommodationFlyIn, { isLoading: true, isOpen: isOpen, setIsOpen: setIsOpen })
37712
37795
  )
37713
37796
  );
37714
37797
  };
@@ -37717,11 +37800,11 @@ var HotelCard = function (_a) {
37717
37800
  var result = _a.result,
37718
37801
  translations = _a.translations;
37719
37802
  var dispatch = useDispatch();
37720
- var selectedHotelId = useSelector(function (state) {
37803
+ var selectedSearchResultId = useSelector(function (state) {
37721
37804
  return state.searchResults;
37722
- }).selectedHotelId;
37723
- var handleChange = function (hotelProductId) {
37724
- dispatch(setSelectedHotel(hotelProductId));
37805
+ }).selectedSearchResultId;
37806
+ var handleChange = function (productId) {
37807
+ dispatch(setSelectedSearchResult(productId));
37725
37808
  };
37726
37809
  return React__default.createElement(
37727
37810
  'div',
@@ -37806,23 +37889,18 @@ var HotelCard = function (_a) {
37806
37889
  'button',
37807
37890
  {
37808
37891
  type: 'button',
37809
- className: 'cta '.concat(selectedHotelId === result.id ? 'cta--selected' : 'cta--select'),
37892
+ className: 'cta '.concat(selectedSearchResultId === result.id ? 'cta--selected' : 'cta--select'),
37810
37893
  onClick: function () {
37811
37894
  return handleChange(result.id);
37812
37895
  }
37813
37896
  },
37814
- selectedHotelId === result.id ? 'Selected' : 'Select'
37815
- ),
37816
- React__default.createElement(
37817
- 'button',
37818
- {
37819
- type: 'button',
37820
- className: 'cta cta--select',
37821
- onClick: function () {
37822
- return console.log('Clicked on customCard with id:', result.id);
37823
- }
37824
- },
37825
- translations === null || translations === void 0 ? void 0 : translations.SRP.VIEW_DETAILS
37897
+ selectedSearchResultId === result.id
37898
+ ? translations === null || translations === void 0
37899
+ ? void 0
37900
+ : translations.SHARED.SELECTED
37901
+ : translations === null || translations === void 0
37902
+ ? void 0
37903
+ : translations.SHARED.SELECT
37826
37904
  )
37827
37905
  )
37828
37906
  )
@@ -40921,7 +40999,11 @@ var GroupTourCard = function (_a) {
40921
40999
  var _b;
40922
41000
  var result = _a.result,
40923
41001
  languageCode = _a.languageCode;
41002
+ var dispatch = useDispatch();
40924
41003
  var translations = getTranslations(languageCode !== null && languageCode !== void 0 ? languageCode : 'en-GB');
41004
+ var selectedSearchResultId = useSelector(function (state) {
41005
+ return state.searchResults;
41006
+ }).selectedSearchResultId;
40925
41007
  var genders = ((_b = result.allotment) === null || _b === void 0 ? void 0 : _b.travellerGenders) || [];
40926
41008
  var maleCount = genders.filter(function (g) {
40927
41009
  return g === 0;
@@ -40932,6 +41014,9 @@ var GroupTourCard = function (_a) {
40932
41014
  var otherCount = genders.filter(function (g) {
40933
41015
  return g === 2;
40934
41016
  }).length;
41017
+ var handleChange = function (productId) {
41018
+ dispatch(setSelectedSearchResult(productId));
41019
+ };
40935
41020
  return React__default.createElement(
40936
41021
  'div',
40937
41022
  { className: 'search__result-card' },
@@ -41036,7 +41121,23 @@ var GroupTourCard = function (_a) {
41036
41121
  translations.PRODUCT.PER_PERSON
41037
41122
  )
41038
41123
  ),
41039
- React__default.createElement('button', { className: 'cta cta--select' }, 'Bekijk reis')
41124
+ React__default.createElement(
41125
+ 'button',
41126
+ {
41127
+ type: 'button',
41128
+ className: 'cta '.concat(selectedSearchResultId === result.productId ? 'cta--selected' : 'cta--select'),
41129
+ onClick: function () {
41130
+ return handleChange(result.productId);
41131
+ }
41132
+ },
41133
+ selectedSearchResultId === result.productId
41134
+ ? translations === null || translations === void 0
41135
+ ? void 0
41136
+ : translations.SHARED.SELECTED
41137
+ : translations === null || translations === void 0
41138
+ ? void 0
41139
+ : translations.SHARED.SELECT
41140
+ )
41040
41141
  )
41041
41142
  )
41042
41143
  );
@@ -41155,7 +41256,7 @@ var SearchResultsContainer = function () {
41155
41256
  isLoading = _b.isLoading,
41156
41257
  filters = _b.filters,
41157
41258
  sortKey = _b.sortKey,
41158
- selectedHotelId = _b.selectedHotelId,
41259
+ selectedSearchResultId = _b.selectedSearchResultId,
41159
41260
  flyInIsOpen = _b.flyInIsOpen;
41160
41261
  var isMobile = useMediaQuery('(max-width: 1200px)');
41161
41262
  var _c = useState(false),
@@ -41332,6 +41433,7 @@ var SearchResultsContainer = function () {
41332
41433
  productTagIds: tagId ? [tagId] : []
41333
41434
  }
41334
41435
  };
41436
+ console.log('Built search request from query params', searchRequest);
41335
41437
  return searchRequest;
41336
41438
  };
41337
41439
  var getRequestRoomsFromEntry = function (rooms) {
@@ -41378,7 +41480,7 @@ var SearchResultsContainer = function () {
41378
41480
  var room = { index: i, pax: [] };
41379
41481
  range(0, x.adults).forEach(function () {
41380
41482
  room.pax.push({
41381
- age: 30
41483
+ age: Math.floor(Math.random() * 100)
41382
41484
  });
41383
41485
  });
41384
41486
  x.childAges.forEach(function (x) {
@@ -41458,10 +41560,12 @@ var SearchResultsContainer = function () {
41458
41560
  return r.productId === (entry === null || entry === void 0 ? void 0 : entry.id);
41459
41561
  });
41460
41562
  if (matching) {
41461
- dispatch(setSelectedHotel(matching.productId));
41563
+ dispatch(setSelectedSearchResult(matching.productId));
41462
41564
  }
41463
41565
  } else {
41464
- dispatch(setSelectedHotel((_b = packageSearchResults[0]) === null || _b === void 0 ? void 0 : _b.productId));
41566
+ if (context.type === 'hotel-flight') {
41567
+ dispatch(setSelectedSearchResult((_b = packageSearchResults[0]) === null || _b === void 0 ? void 0 : _b.productId));
41568
+ }
41465
41569
  }
41466
41570
  }
41467
41571
  dispatch(setIsLoading(false));
@@ -41499,7 +41603,13 @@ var SearchResultsContainer = function () {
41499
41603
  return __generator(this, function (_c) {
41500
41604
  switch (_c.label) {
41501
41605
  case 0:
41502
- if (!selectedHotelId || !context) return [2 /*return*/];
41606
+ if (!selectedSearchResultId || !context) return [2 /*return*/];
41607
+ if (
41608
+ (context === null || context === void 0 ? void 0 : context.type) === 'hotel' ||
41609
+ (context === null || context === void 0 ? void 0 : context.type) === 'groupTour'
41610
+ ) {
41611
+ handleFlyInToggle(true);
41612
+ }
41503
41613
  _c.label = 1;
41504
41614
  case 1:
41505
41615
  _c.trys.push([1, 6, , 7]);
@@ -41508,7 +41618,7 @@ var SearchResultsContainer = function () {
41508
41618
  apiKey: context.tideConnection.apiKey
41509
41619
  };
41510
41620
  selectedItem = results.find(function (r) {
41511
- return r.productId === selectedHotelId;
41621
+ return r.productId === selectedSearchResultId;
41512
41622
  });
41513
41623
  if (!selectedItem) {
41514
41624
  // TODO: handle this case better, show an error message to the user
@@ -41586,7 +41696,7 @@ var SearchResultsContainer = function () {
41586
41696
  };
41587
41697
  fetchPackageDetails();
41588
41698
  },
41589
- [selectedHotelId]
41699
+ [selectedSearchResultId]
41590
41700
  );
41591
41701
  useEffect(
41592
41702
  function () {
@@ -41611,6 +41721,7 @@ var SearchResultsContainer = function () {
41611
41721
  { tideConnection: context.tideConnection },
41612
41722
  React__default.createElement(FlightResultsContainer, { isMobile: isMobile }),
41613
41723
  React__default.createElement(FlyIn, {
41724
+ title: 'Select your fare',
41614
41725
  srpType: context.type,
41615
41726
  isOpen: flyInIsOpen,
41616
41727
  setIsOpen: handleFlyInToggle,
@@ -41743,7 +41854,16 @@ var SearchResultsContainer = function () {
41743
41854
  isDeparture: false
41744
41855
  })
41745
41856
  )
41746
- )
41857
+ ),
41858
+ React__default.createElement(FlyIn, {
41859
+ title: ''.concat(translations.SRP.SELECT, ' ').concat(translations.SRP.ACCOMMODATION),
41860
+ srpType: context.type,
41861
+ isOpen: flyInIsOpen,
41862
+ setIsOpen: handleFlyInToggle,
41863
+ onPanelRef: function (el) {
41864
+ return (panelRef.current = el);
41865
+ }
41866
+ })
41747
41867
  )
41748
41868
  )
41749
41869
  )