@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-cjs/index.js CHANGED
@@ -294,7 +294,8 @@ var FLIGHTS_FORM$f = {
294
294
  EVENING_DEPARTURE: 'مساءً (18:00 - 00:00)',
295
295
  FLIGHTS_FOUND_1: '',
296
296
  FLIGHTS_FOUND_2: 'رحلات',
297
- FLIGHTS_FOUND_3: 'تم العثور عليها'
297
+ FLIGHTS_FOUND_3: 'تم العثور عليها',
298
+ SELECT_YOUR_FARE: 'اختر السعر الخاص بك'
298
299
  };
299
300
  var PRODUCT$f = {
300
301
  STAY_INCLUDED: 'الإقامة متضمنة',
@@ -694,7 +695,8 @@ var FLIGHTS_FORM$e = {
694
695
  EVENING_DEPARTURE: 'Aften (18:00 - 00:00)',
695
696
  FLIGHTS_FOUND_1: '',
696
697
  FLIGHTS_FOUND_2: 'fly',
697
- FLIGHTS_FOUND_3: 'fundet'
698
+ FLIGHTS_FOUND_3: 'fundet',
699
+ SELECT_YOUR_FARE: 'Vælg din pris'
698
700
  };
699
701
  var PRODUCT$e = {
700
702
  STAY_INCLUDED: 'Ophold inkluderet',
@@ -1094,7 +1096,8 @@ var FLIGHTS_FORM$d = {
1094
1096
  EVENING_DEPARTURE: 'Abend (18:00 - 00:00)',
1095
1097
  FLIGHTS_FOUND_1: '',
1096
1098
  FLIGHTS_FOUND_2: 'Flüge',
1097
- FLIGHTS_FOUND_3: 'gefunden'
1099
+ FLIGHTS_FOUND_3: 'gefunden',
1100
+ SELECT_YOUR_FARE: 'Wählen Sie Ihren Tarif'
1098
1101
  };
1099
1102
  var PRODUCT$d = {
1100
1103
  STAY_INCLUDED: 'Aufenthalt inbegriffen',
@@ -1495,7 +1498,8 @@ var FLIGHTS_FORM$c = {
1495
1498
  EVENING_DEPARTURE: 'Evening (18:00 - 00:00)',
1496
1499
  FLIGHTS_FOUND_1: '',
1497
1500
  FLIGHTS_FOUND_2: 'flights',
1498
- FLIGHTS_FOUND_3: 'found'
1501
+ FLIGHTS_FOUND_3: 'found',
1502
+ SELECT_YOUR_FARE: 'Select your fare'
1499
1503
  };
1500
1504
  var PRODUCT$c = {
1501
1505
  STAY_INCLUDED: 'Stay included',
@@ -1899,7 +1903,8 @@ var FLIGHTS_FORM$b = {
1899
1903
  EVENING_DEPARTURE: 'Noche (18:00 - 00:00)',
1900
1904
  FLIGHTS_FOUND_1: '',
1901
1905
  FLIGHTS_FOUND_2: 'vuelos',
1902
- FLIGHTS_FOUND_3: 'encontrados'
1906
+ FLIGHTS_FOUND_3: 'encontrados',
1907
+ SELECT_YOUR_FARE: 'Seleccione su tarifa'
1903
1908
  };
1904
1909
  var PRODUCT$b = {
1905
1910
  STAY_INCLUDED: 'Estancia incluida',
@@ -2300,7 +2305,8 @@ var FLIGHTS_FORM$a = {
2300
2305
  EVENING_DEPARTURE: 'Soir (18:00 - 00:00)',
2301
2306
  FLIGHTS_FOUND_1: '',
2302
2307
  FLIGHTS_FOUND_2: 'vols',
2303
- FLIGHTS_FOUND_3: 'trouvés'
2308
+ FLIGHTS_FOUND_3: 'trouvés',
2309
+ SELECT_YOUR_FARE: 'Sélectionnez votre tarif'
2304
2310
  };
2305
2311
  var PRODUCT$a = {
2306
2312
  STAY_INCLUDED: 'Séjour inclus',
@@ -2705,7 +2711,8 @@ var FLIGHTS_FORM$9 = {
2705
2711
  EVENING_DEPARTURE: 'Soir (18:00 - 00:00)',
2706
2712
  FLIGHTS_FOUND_1: '',
2707
2713
  FLIGHTS_FOUND_2: 'vols',
2708
- FLIGHTS_FOUND_3: 'trouvés'
2714
+ FLIGHTS_FOUND_3: 'trouvés',
2715
+ SELECT_YOUR_FARE: 'Sélectionnez votre tarif'
2709
2716
  };
2710
2717
  var PRODUCT$9 = {
2711
2718
  STAY_INCLUDED: 'Séjour inclus',
@@ -3105,7 +3112,8 @@ var FLIGHTS_FORM$8 = {
3105
3112
  EVENING_DEPARTURE: 'Kvöld (18:00 - 00:00)',
3106
3113
  FLIGHTS_FOUND_1: '',
3107
3114
  FLIGHTS_FOUND_2: 'flug',
3108
- FLIGHTS_FOUND_3: 'fundust'
3115
+ FLIGHTS_FOUND_3: 'fundust',
3116
+ SELECT_YOUR_FARE: 'Veldu flugverð'
3109
3117
  };
3110
3118
  var PRODUCT$8 = {
3111
3119
  STAY_INCLUDED: 'Dvöl innifalin',
@@ -3505,7 +3513,8 @@ var FLIGHTS_FORM$7 = {
3505
3513
  EVENING_DEPARTURE: 'Sera (18:00 - 00:00)',
3506
3514
  FLIGHTS_FOUND_1: '',
3507
3515
  FLIGHTS_FOUND_2: 'voli',
3508
- FLIGHTS_FOUND_3: 'trovati'
3516
+ FLIGHTS_FOUND_3: 'trovati',
3517
+ SELECT_YOUR_FARE: 'Seleziona la tua tariffa'
3509
3518
  };
3510
3519
  var PRODUCT$7 = {
3511
3520
  STAY_INCLUDED: 'Soggiorno incluso',
@@ -3906,7 +3915,8 @@ var FLIGHTS_FORM$6 = {
3906
3915
  EVENING_DEPARTURE: 'Avond (18:00 - 00:00)',
3907
3916
  FLIGHTS_FOUND_1: 'Er zijn',
3908
3917
  FLIGHTS_FOUND_2: 'vluchten',
3909
- FLIGHTS_FOUND_3: 'gevonden'
3918
+ FLIGHTS_FOUND_3: 'gevonden',
3919
+ SELECT_YOUR_FARE: 'Selecteer uw tarief'
3910
3920
  };
3911
3921
  var PRODUCT$6 = {
3912
3922
  STAY_INCLUDED: 'Inclusief verblijf',
@@ -4311,7 +4321,8 @@ var FLIGHTS_FORM$5 = {
4311
4321
  EVENING_DEPARTURE: 'Avond (18:00 - 00:00)',
4312
4322
  FLIGHTS_FOUND_1: '',
4313
4323
  FLIGHTS_FOUND_2: 'vluchten',
4314
- FLIGHTS_FOUND_3: 'gevonden'
4324
+ FLIGHTS_FOUND_3: 'gevonden',
4325
+ SELECT_YOUR_FARE: 'Selecteer uw tarief'
4315
4326
  };
4316
4327
  var PRODUCT$5 = {
4317
4328
  STAY_INCLUDED: 'Verblijf inbegrepen',
@@ -4712,7 +4723,8 @@ var FLIGHTS_FORM$4 = {
4712
4723
  EVENING_DEPARTURE: 'Kveld (18:00 - 00:00)',
4713
4724
  FLIGHTS_FOUND_1: '',
4714
4725
  FLIGHTS_FOUND_2: 'fly',
4715
- FLIGHTS_FOUND_3: 'funnet'
4726
+ FLIGHTS_FOUND_3: 'funnet',
4727
+ SELECT_YOUR_FARE: 'Velg din pris:'
4716
4728
  };
4717
4729
  var PRODUCT$4 = {
4718
4730
  STAY_INCLUDED: 'Opphold inkludert',
@@ -5113,7 +5125,8 @@ var FLIGHTS_FORM$3 = {
5113
5125
  EVENING_DEPARTURE: 'Wieczór (18:00 - 00:00)',
5114
5126
  FLIGHTS_FOUND_1: '',
5115
5127
  FLIGHTS_FOUND_2: 'lotów',
5116
- FLIGHTS_FOUND_3: 'znaleziono'
5128
+ FLIGHTS_FOUND_3: 'znaleziono',
5129
+ SELECT_YOUR_FARE: 'Wybierz swój taryfę'
5117
5130
  };
5118
5131
  var PRODUCT$3 = {
5119
5132
  STAY_INCLUDED: 'Pobyt wliczony w cenę',
@@ -5514,7 +5527,8 @@ var FLIGHTS_FORM$2 = {
5514
5527
  EVENING_DEPARTURE: 'Noite (18:00 - 00:00)',
5515
5528
  FLIGHTS_FOUND_1: '',
5516
5529
  FLIGHTS_FOUND_2: 'voos',
5517
- FLIGHTS_FOUND_3: 'encontrados'
5530
+ FLIGHTS_FOUND_3: 'encontrados',
5531
+ SELECT_YOUR_FARE: 'Selecione a sua tarifa:'
5518
5532
  };
5519
5533
  var PRODUCT$2 = {
5520
5534
  STAY_INCLUDED: 'Estadia incluída',
@@ -5915,7 +5929,8 @@ var FLIGHTS_FORM$1 = {
5915
5929
  EVENING_DEPARTURE: 'Kväll (18:00 – 00:00)',
5916
5930
  FLIGHTS_FOUND_1: '',
5917
5931
  FLIGHTS_FOUND_2: 'flyg',
5918
- FLIGHTS_FOUND_3: 'hittades'
5932
+ FLIGHTS_FOUND_3: 'hittades',
5933
+ SELECT_YOUR_FARE: 'Välj din pris:'
5919
5934
  };
5920
5935
  var PRODUCT$1 = {
5921
5936
  STAY_INCLUDED: 'Boende ingår',
@@ -6316,7 +6331,8 @@ var FLIGHTS_FORM = {
6316
6331
  EVENING_DEPARTURE: '夜 (18:00 - 00:00)',
6317
6332
  FLIGHTS_FOUND_1: '',
6318
6333
  FLIGHTS_FOUND_2: '件のフライトが',
6319
- FLIGHTS_FOUND_3: '見つかりました'
6334
+ FLIGHTS_FOUND_3: '見つかりました',
6335
+ SELECT_YOUR_FARE: '料金を選択してください'
6320
6336
  };
6321
6337
  var PRODUCT = {
6322
6338
  STAY_INCLUDED: '宿泊込み',
@@ -6856,7 +6872,7 @@ var calculateNights = function (fromDate, toDate) {
6856
6872
  from.setHours(0, 0, 0, 0);
6857
6873
  to.setHours(0, 0, 0, 0);
6858
6874
  var diffTime = to.getTime() - from.getTime();
6859
- return diffTime / (1000 * 60 * 60 * 24);
6875
+ return Math.round(diffTime / (1000 * 60 * 60 * 24));
6860
6876
  };
6861
6877
  var calculateDays = function (fromDate, toDate) {
6862
6878
  return calculateNights(fromDate, toDate) + 1;
@@ -12899,6 +12915,7 @@ PERFORMANCE OF THIS SOFTWARE.
12899
12915
  var ENDPOINT_PORTAL = function (portalId) {
12900
12916
  return ENDPOINT$4 + '/portal/' + portalId;
12901
12917
  };
12918
+ var ENDPOINT_AIRPORT = '/api/web/entity/airport';
12902
12919
  /**
12903
12920
  * api/search/countries
12904
12921
  * Gets all Countries
@@ -12911,6 +12928,13 @@ PERFORMANCE OF THIS SOFTWARE.
12911
12928
  var apiKey = config.apiKey;
12912
12929
  return get(url, apiKey, config.token, signal, true);
12913
12930
  };
12931
+ var searchCountries = function (config, searchTerm, signal) {
12932
+ var apiKey = config.apiKey;
12933
+ var safeSearch = searchTerm.replace(/'/g, "''");
12934
+ var filter = "$skip=0&$top=20&$orderby=name%20asc&$filter=contains(name,'" + safeSearch.toLowerCase() + "')";
12935
+ var url = '' + config.host + ENDPOINT_COUNTRIES + '?' + filter;
12936
+ return get(url, apiKey, config.token, signal, true);
12937
+ };
12914
12938
  var searchRegions = function (config, searchTerm, signal) {
12915
12939
  var apiKey = config.apiKey;
12916
12940
  var safeSearch = searchTerm.replace(/'/g, "''");
@@ -12937,6 +12961,11 @@ PERFORMANCE OF THIS SOFTWARE.
12937
12961
  var apiKey = config.apiKey;
12938
12962
  return get(url, apiKey, config.token, signal, true);
12939
12963
  };
12964
+ var getAirports = function (config, signal) {
12965
+ var url = '' + config.host + ENDPOINT_AIRPORT;
12966
+ var apiKey = config.apiKey;
12967
+ return get(url, apiKey, config.token, signal, true);
12968
+ };
12940
12969
 
12941
12970
  var createParams = function (filter, all, gridColumns, mode, forceToLower) {
12942
12971
  var params = {};
@@ -13316,6 +13345,7 @@ PERFORMANCE OF THIS SOFTWARE.
13316
13345
  exports.forgotPassword = forgotPassword;
13317
13346
  exports.generateBookingAccommodations = generateBookingAccommodations;
13318
13347
  exports.getAffiliates = getAffiliates;
13348
+ exports.getAirports = getAirports;
13319
13349
  exports.getAllotment = getAllotment;
13320
13350
  exports.getAllotmentAvailability = getAllotmentAvailability;
13321
13351
  exports.getAllotmentList = getAllotmentList;
@@ -13340,6 +13370,7 @@ PERFORMANCE OF THIS SOFTWARE.
13340
13370
  exports.print = print;
13341
13371
  exports.resetPassword = resetPassword;
13342
13372
  exports.search = search;
13373
+ exports.searchCountries = searchCountries;
13343
13374
  exports.searchElastic = searchElastic;
13344
13375
  exports.searchFlightPool = searchFlightPool;
13345
13376
  exports.searchLocations = searchLocations;
@@ -31064,6 +31095,24 @@ var Icon$2 = function (_a) {
31064
31095
  }
31065
31096
  };
31066
31097
 
31098
+ var SearchResultsConfigurationContext = React__default['default'].createContext(undefined);
31099
+
31100
+ var Spinner = function () {
31101
+ var _a;
31102
+ var context = React.useContext(SearchResultsConfigurationContext);
31103
+ var translations = getTranslations((_a = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _a !== void 0 ? _a : 'en-GB');
31104
+ return React__default['default'].createElement(
31105
+ 'div',
31106
+ { className: 'spinner__container' },
31107
+ React__default['default'].createElement('span', { className: 'spinner__icon' }),
31108
+ React__default['default'].createElement(
31109
+ 'span',
31110
+ { className: 'spinner__label' },
31111
+ translations === null || translations === void 0 ? void 0 : translations.SRP.LOADING
31112
+ )
31113
+ );
31114
+ };
31115
+
31067
31116
  var SearchInput = function (_a) {
31068
31117
  var searchResults = _a.searchResults,
31069
31118
  onOptionSelect = _a.onOptionSelect,
@@ -31071,7 +31120,8 @@ var SearchInput = function (_a) {
31071
31120
  _a.label;
31072
31121
  var isSecondInput = _a.isSecondInput,
31073
31122
  isDoubleInput = _a.isDoubleInput,
31074
- isDisabled = _a.isDisabled;
31123
+ isDisabled = _a.isDisabled,
31124
+ isLoading = _a.isLoading;
31075
31125
  if (isDisabled) {
31076
31126
  return null;
31077
31127
  }
@@ -31090,9 +31140,9 @@ var SearchInput = function (_a) {
31090
31140
  })
31091
31141
  );
31092
31142
  };
31093
- if (searchResults.length === 0) {
31094
- return null;
31095
- }
31143
+ // if (searchResults.length === 0) {
31144
+ // return null;
31145
+ // }
31096
31146
  return React__default['default'].createElement(
31097
31147
  'div',
31098
31148
  {
@@ -31100,6 +31150,7 @@ var SearchInput = function (_a) {
31100
31150
  .concat(isSecondInput ? ' qsm__double-input-options--second-input' : '')
31101
31151
  .concat(isDoubleInput ? ' qsm__double-input-options--splittable' : '')
31102
31152
  },
31153
+ isLoading && React__default['default'].createElement(Spinner, null),
31103
31154
  searchResults.map(function (option, index) {
31104
31155
  return React__default['default'].createElement(
31105
31156
  'div',
@@ -32427,6 +32478,9 @@ var SearchInputGroup = function (_a) {
32427
32478
  placeholder = fieldConfig.placeholder,
32428
32479
  options = fieldConfig.options,
32429
32480
  autoComplete = fieldConfig.autoComplete;
32481
+ var _j = React.useState(false),
32482
+ isLoading = _j[0],
32483
+ setIsLoading = _j[1];
32430
32484
  var selector = React.useMemo(
32431
32485
  function () {
32432
32486
  return function (state) {
@@ -32437,11 +32491,11 @@ var SearchInputGroup = function (_a) {
32437
32491
  [fieldKey]
32438
32492
  );
32439
32493
  var value = reactRedux.useSelector(selector);
32440
- var _j = reactRedux.useSelector(function (state) {
32494
+ var _k = reactRedux.useSelector(function (state) {
32441
32495
  return state.qsm;
32442
32496
  }),
32443
- searchResults = _j.searchResults,
32444
- activeSearchField = _j.activeSearchField;
32497
+ searchResults = _k.searchResults,
32498
+ activeSearchField = _k.activeSearchField;
32445
32499
  var selectedOption = options.find(function (option) {
32446
32500
  return option.value === value;
32447
32501
  });
@@ -32469,6 +32523,7 @@ var SearchInputGroup = function (_a) {
32469
32523
  // if field has custom onChange (API search)
32470
32524
  if (fieldConfig.onChange) {
32471
32525
  fieldConfig.onChange(input);
32526
+ setIsLoading(true);
32472
32527
  return;
32473
32528
  }
32474
32529
  // fallback to local filtering
@@ -32476,6 +32531,13 @@ var SearchInputGroup = function (_a) {
32476
32531
  },
32477
32532
  [dispatch, fieldKey, small, match, fieldConfig]
32478
32533
  );
32534
+ React.useEffect(
32535
+ function () {
32536
+ console.log('options updated, resetting loading state');
32537
+ setIsLoading(false);
32538
+ },
32539
+ [options]
32540
+ );
32479
32541
  React.useEffect(
32480
32542
  function () {
32481
32543
  if (!value || activeSearchField !== fieldKey) return;
@@ -32593,7 +32655,8 @@ var SearchInputGroup = function (_a) {
32593
32655
  label: label,
32594
32656
  isSecondInput: isSecondInput,
32595
32657
  isDoubleInput: isDoubleInput,
32596
- isDisabled: isDisabled
32658
+ isDisabled: isDisabled,
32659
+ isLoading: isLoading
32597
32660
  })
32598
32661
  );
32599
32662
  };
@@ -32991,6 +33054,17 @@ var QSMContainer = function () {
32991
33054
  };
32992
33055
  var handleQsmTypeChange = function (value) {
32993
33056
  dispatch(setSelectedQsmType(value));
33057
+ if (value === 'groupTour') {
33058
+ handleDateChange({
33059
+ fromDate: new Date(fromDate !== null && fromDate !== void 0 ? fromDate : Date.now()),
33060
+ toDate: dateFns.addYears(new Date(fromDate !== null && fromDate !== void 0 ? fromDate : Date.now()), 1)
33061
+ });
33062
+ } else {
33063
+ handleDateChange({
33064
+ fromDate: new Date(fromDate !== null && fromDate !== void 0 ? fromDate : Date.now()),
33065
+ toDate: dateFns.addDays(new Date(fromDate !== null && fromDate !== void 0 ? fromDate : Date.now()), 7)
33066
+ });
33067
+ }
32994
33068
  };
32995
33069
  var handleSubmit = function () {
32996
33070
  if (!onSubmit) return;
@@ -33448,13 +33522,11 @@ var QSM = function (_a) {
33448
33522
  );
33449
33523
  };
33450
33524
 
33451
- var SearchResultsConfigurationContext = React__default['default'].createContext(undefined);
33452
-
33453
33525
  var _a;
33454
33526
  var initialState$1 = {
33455
33527
  results: [],
33456
33528
  filteredResults: [],
33457
- selectedHotelId: null,
33529
+ selectedSearchResultId: null,
33458
33530
  selectedFlight: null,
33459
33531
  selectedFlightDetails: null,
33460
33532
  bookingPackageDetails: null,
@@ -33476,8 +33548,8 @@ var searchResultsSlice = toolkit.createSlice({
33476
33548
  setFilteredResults: function (state, action) {
33477
33549
  state.filteredResults = action.payload;
33478
33550
  },
33479
- setSelectedHotel: function (state, action) {
33480
- state.selectedHotelId = action.payload;
33551
+ setSelectedSearchResult: function (state, action) {
33552
+ state.selectedSearchResultId = action.payload;
33481
33553
  },
33482
33554
  setSelectedFlight: function (state, action) {
33483
33555
  state.selectedFlight = action.payload;
@@ -33544,7 +33616,7 @@ var searchResultsSlice = toolkit.createSlice({
33544
33616
  });
33545
33617
  var setResults = ((_a = searchResultsSlice.actions), _a.setResults),
33546
33618
  setFilteredResults = _a.setFilteredResults,
33547
- setSelectedHotel = _a.setSelectedHotel,
33619
+ setSelectedSearchResult = _a.setSelectedSearchResult,
33548
33620
  setSelectedFlight = _a.setSelectedFlight,
33549
33621
  setSelectedFlightDetails = _a.setSelectedFlightDetails,
33550
33622
  setBookingPackageDetails = _a.setBookingPackageDetails,
@@ -34586,22 +34658,6 @@ var Icon$1 = function (_a) {
34586
34658
  }
34587
34659
  };
34588
34660
 
34589
- var Spinner = function () {
34590
- var _a;
34591
- var context = React.useContext(SearchResultsConfigurationContext);
34592
- var translations = getTranslations((_a = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _a !== void 0 ? _a : 'en-GB');
34593
- return React__default['default'].createElement(
34594
- 'div',
34595
- { className: 'spinner__container' },
34596
- React__default['default'].createElement('span', { className: 'spinner__icon' }),
34597
- React__default['default'].createElement(
34598
- 'span',
34599
- { className: 'spinner__label' },
34600
- translations === null || translations === void 0 ? void 0 : translations.SRP.LOADING
34601
- )
34602
- );
34603
- };
34604
-
34605
34661
  var getDepartureTime = function (flight) {
34606
34662
  var _a, _b;
34607
34663
  if (lodash.isEmpty(flight === null || flight === void 0 ? void 0 : flight.metaDatas)) return '';
@@ -37011,88 +37067,40 @@ var useFlightSearch = function () {
37011
37067
  return context;
37012
37068
  };
37013
37069
 
37014
- var FlyIn = function (_a) {
37070
+ var FlightsFlyIn = function (_a) {
37015
37071
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
37016
- _a.srpType;
37017
37072
  var isOpen = _a.isOpen,
37018
- setIsOpen = _a.setIsOpen,
37019
- _p = _a.className,
37020
- className = _p === void 0 ? '' : _p,
37021
- onPanelRef = _a.onPanelRef;
37073
+ setIsOpen = _a.setIsOpen;
37022
37074
  var context = React.useContext(SearchResultsConfigurationContext);
37023
37075
  var language = (_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB';
37024
37076
  var translations = getTranslations(language);
37025
37077
  var dispatch = reactRedux.useDispatch();
37026
- var _q = useFlightSearch(),
37027
- flightSearchDetailsLoading = _q.flightSearchDetailsLoading,
37028
- flightDetailsSearchResults = _q.flightDetailsSearchResults,
37029
- onCancelSearch = _q.onCancelSearch,
37030
- numberOfTravellers = _q.numberOfTravellers;
37078
+ var _p = useFlightSearch(),
37079
+ flightSearchDetailsLoading = _p.flightSearchDetailsLoading,
37080
+ flightDetailsSearchResults = _p.flightDetailsSearchResults,
37081
+ onCancelSearch = _p.onCancelSearch,
37082
+ numberOfTravellers = _p.numberOfTravellers;
37031
37083
  var selectedFlight = reactRedux.useSelector(function (state) {
37032
37084
  return state.searchResults;
37033
37085
  }).selectedFlight;
37034
- var panelRef = React.useRef(null);
37035
- var _r = React.useState([]),
37036
- flights = _r[0],
37037
- setFlights = _r[1];
37038
- var _s = React.useState(undefined),
37039
- flight = _s[0],
37040
- setFlight = _s[1];
37041
- var _t = React.useState([]),
37042
- uniqueOutwardFlights = _t[0],
37043
- setUniqueOutwardFlights = _t[1];
37044
- var _u = React.useState(null),
37045
- selectedOutwardFareCode = _u[0],
37046
- setSelectedOutwardFareCode = _u[1];
37047
- var _v = React.useState([]),
37048
- uniqueReturnFlights = _v[0],
37049
- setUniqueReturnFlights = _v[1];
37050
- var _w = React.useState(null),
37051
- selectedReturnFareCode = _w[0],
37052
- setSelectedReturnFareCode = _w[1];
37053
- // expose DOM node if needed
37054
- React.useEffect(
37055
- function () {
37056
- onPanelRef === null || onPanelRef === void 0 ? void 0 : onPanelRef(panelRef.current);
37057
- return function () {
37058
- return onPanelRef === null || onPanelRef === void 0 ? void 0 : onPanelRef(null);
37059
- };
37060
- },
37061
- [onPanelRef]
37062
- );
37063
- React.useEffect(
37064
- function () {
37065
- // click outside detection
37066
- var handleClickOutside = function (event) {
37067
- if (isOpen && panelRef.current && !panelRef.current.contains(event.target)) {
37068
- handleClose();
37069
- }
37070
- };
37071
- document.addEventListener('mousedown', handleClickOutside);
37072
- return function () {
37073
- return document.removeEventListener('mousedown', handleClickOutside);
37074
- };
37075
- },
37076
- [isOpen, setIsOpen]
37077
- );
37078
- // body scroll lock
37079
- React.useEffect(
37080
- function () {
37081
- document.body.style.overflow = isOpen ? 'hidden' : '';
37082
- return function () {
37083
- document.body.style.overflow = '';
37084
- };
37085
- },
37086
- [isOpen]
37087
- );
37088
- var handleClose = function () {
37089
- if (isOpen && panelRef.current) {
37090
- dispatch(setSelectedFlight(null));
37091
- dispatch(setSelectedFlightDetails(null));
37092
- onCancelSearch();
37093
- setIsOpen(false);
37094
- }
37095
- };
37086
+ var _q = React.useState([]),
37087
+ flights = _q[0],
37088
+ setFlights = _q[1];
37089
+ var _r = React.useState(undefined),
37090
+ flight = _r[0],
37091
+ setFlight = _r[1];
37092
+ var _s = React.useState([]),
37093
+ uniqueOutwardFlights = _s[0],
37094
+ setUniqueOutwardFlights = _s[1];
37095
+ var _t = React.useState(null),
37096
+ selectedOutwardFareCode = _t[0],
37097
+ setSelectedOutwardFareCode = _t[1];
37098
+ var _u = React.useState([]),
37099
+ uniqueReturnFlights = _u[0],
37100
+ setUniqueReturnFlights = _u[1];
37101
+ var _v = React.useState(null),
37102
+ selectedReturnFareCode = _v[0],
37103
+ setSelectedReturnFareCode = _v[1];
37096
37104
  React.useEffect(
37097
37105
  function () {
37098
37106
  var _a, _b, _c, _d;
@@ -37280,334 +37288,20 @@ var FlyIn = function (_a) {
37280
37288
  };
37281
37289
  // TODO: go to booking page?
37282
37290
  var handleConfirm = function () {
37283
- if (isOpen && panelRef.current) {
37291
+ if (isOpen) {
37284
37292
  onCancelSearch();
37285
37293
  setIsOpen(false);
37286
37294
  }
37287
37295
  };
37288
37296
  return React__default['default'].createElement(
37289
- 'div',
37290
- { className: 'flyin '.concat(isOpen ? 'flyin--active' : '', ' ').concat(className) },
37297
+ React__default['default'].Fragment,
37298
+ null,
37291
37299
  React__default['default'].createElement(
37292
37300
  'div',
37293
- { className: 'flyin__panel '.concat(isOpen ? 'flyin__panel--active' : ''), ref: panelRef },
37294
- React__default['default'].createElement(
37295
- 'div',
37296
- { className: 'flyin__content' },
37297
- React__default['default'].createElement(
37298
- 'div',
37299
- { className: 'flyin__content-title-row' },
37300
- React__default['default'].createElement('h3', { className: 'flyin__content-title' }, 'Select your fare'),
37301
- React__default['default'].createElement(
37302
- 'span',
37303
- {
37304
- className: 'flyin__close',
37305
- onClick: function () {
37306
- return handleClose();
37307
- }
37308
- },
37309
- React__default['default'].createElement(Icon, { name: 'ui-close', width: 30, height: 30, 'aria-hidden': 'true' })
37310
- )
37311
- ),
37312
- flightSearchDetailsLoading || lodash.isEmpty(flights)
37313
- ? React__default['default'].createElement(Spinner, null)
37314
- : flight &&
37315
- React__default['default'].createElement(
37316
- 'div',
37317
- { className: 'flyin__content-text-row' },
37318
- React__default['default'].createElement(
37319
- 'div',
37320
- { className: 'flyin__content-text-icon-row' },
37321
- React__default['default'].createElement('img', {
37322
- src: 'https://media.tidesoftware.be/media/shared/Airlines/'.concat(
37323
- (_c = getDepartureSegment(flight.outward)) === null || _c === void 0 ? void 0 : _c.marketingAirlineCode,
37324
- '.png?height=256'
37325
- ),
37326
- alt: 'airline-logo',
37327
- className: 'logo',
37328
- 'aria-hidden': 'true'
37329
- }),
37330
- React__default['default'].createElement(
37331
- 'div',
37332
- { className: 'flyin__content-text-col' },
37333
- React__default['default'].createElement(
37334
- 'span',
37335
- { className: 'flyin__content-text-title-row' },
37336
- React__default['default'].createElement('strong', null, translations.SRP.DEPARTURE),
37337
- ' ',
37338
- (_d = getDepartureSegment(flight === null || flight === void 0 ? void 0 : flight.outward)) === null || _d === void 0
37339
- ? void 0
37340
- : _d.departureAirportCode,
37341
- ' -',
37342
- ' ',
37343
- (_e = getArrivalSegment(flight === null || flight === void 0 ? void 0 : flight.outward)) === null || _e === void 0
37344
- ? void 0
37345
- : _e.arrivalAirportCode
37346
- ),
37347
- React__default['default'].createElement(
37348
- 'span',
37349
- { className: 'flyin__content-text' },
37350
- timeFromDateTime(
37351
- (_f = getDepartureSegment(flight === null || flight === void 0 ? void 0 : flight.outward)) === null || _f === void 0
37352
- ? void 0
37353
- : _f.departureDateTime
37354
- ),
37355
- ' -',
37356
- ' ',
37357
- timeFromDateTime(
37358
- (_g = getArrivalSegment(flight === null || flight === void 0 ? void 0 : flight.outward)) === null || _g === void 0
37359
- ? void 0
37360
- : _g.arrivalDateTime
37361
- ),
37362
- ' (',
37363
- durationTicksInHoursString(flight.outward.durationInTicks),
37364
- ',',
37365
- ' ',
37366
- getNumberOfStopsLabel(flight.outward, translations.SRP.DIRECT, translations.SRP.STOPS, translations.SRP.STOP),
37367
- '), ',
37368
- numberOfTravellers,
37369
- ' ',
37370
- 'travellers'
37371
- )
37372
- )
37373
- ),
37374
- React__default['default'].createElement(
37375
- 'div',
37376
- { className: 'flyin__content-arrow-row' },
37377
- React__default['default'].createElement(
37378
- 'div',
37379
- { className: 'flyin__content-arrow is-disabled', 'aria-disabled': 'true' },
37380
- React__default['default'].createElement(Icon, {
37381
- name: 'ui-arrow',
37382
- className: 'flyin__content-arrow-icon',
37383
- width: 16,
37384
- height: 16,
37385
- 'aria-hidden': 'true'
37386
- })
37387
- ),
37388
- React__default['default'].createElement(
37389
- 'div',
37390
- { className: 'flyin__content-arrow' },
37391
- React__default['default'].createElement(Icon, {
37392
- name: 'ui-arrow',
37393
- className: 'flyin__content-arrow-icon flyin__content-arrow-icon--forward',
37394
- width: 16,
37395
- height: 16,
37396
- 'aria-hidden': 'true'
37397
- })
37398
- )
37399
- )
37400
- )
37401
- ),
37402
- !flightSearchDetailsLoading &&
37403
- flight &&
37404
- React__default['default'].createElement(
37405
- React__default['default'].Fragment,
37406
- null,
37407
- React__default['default'].createElement(
37408
- 'div',
37409
- { className: 'flyin__content-cards-wrapper' },
37410
- React__default['default'].createElement(
37411
- 'div',
37412
- { className: 'flyin__content-cards' },
37413
- uniqueOutwardFlights.map(function (flightOption, index) {
37414
- var firstSegment = lodash.first(flightOption.outward.segments);
37415
- if (!firstSegment) return null;
37416
- var diff = getOutwardPriceDiff(firstSegment.metaData.fareCode);
37417
- return React__default['default'].createElement(
37418
- 'div',
37419
- {
37420
- key: 'outward-flight-option-'.concat(index),
37421
- className: 'flyin__content-card '.concat(selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : '')
37422
- },
37423
- React__default['default'].createElement(
37424
- 'div',
37425
- { className: 'flyin__content-card-top' },
37426
- React__default['default'].createElement('span', { className: 'flyin__content-card-top-tag' }, firstSegment.metaData.fareMarketingName),
37427
- diff !== null &&
37428
- diff != 0 &&
37429
- React__default['default'].createElement(
37430
- 'span',
37431
- {
37432
- className: 'flyin__content-card-top-price '.concat(
37433
- diff > 0 ? 'flyin__content-card-top-price--increase' : diff < 0 ? 'flyin__content-card-top-price--decrease' : ''
37434
- )
37435
- },
37436
- diff > 0 ? '+\u20AC'.concat(diff) : '-\u20AC'.concat(Math.abs(diff))
37437
- )
37438
- ),
37439
- React__default['default'].createElement(
37440
- 'div',
37441
- { className: 'flyin__content-card-middle' },
37442
- React__default['default'].createElement(
37443
- 'div',
37444
- { className: 'flyin__content-card-middle-rows' },
37445
- React__default['default'].createElement(
37446
- 'div',
37447
- { className: 'flyin__content-card-middle-row' },
37448
- React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Number of travellers'),
37449
- React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-right' }, numberOfTravellers)
37450
- ),
37451
- React__default['default'].createElement(
37452
- 'div',
37453
- { className: 'flyin__content-card-middle-row' },
37454
- React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Travel class'),
37455
- React__default['default'].createElement(
37456
- 'span',
37457
- { className: 'flyin__content-card-middle-row-right' },
37458
- firstSegment.metaData.fareMarketingName
37459
- )
37460
- ),
37461
- React__default['default'].createElement(
37462
- 'div',
37463
- { className: 'flyin__content-card-middle-row' },
37464
- React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Booking class'),
37465
- React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.bookingClassCode)
37466
- ),
37467
- React__default['default'].createElement(
37468
- 'div',
37469
- { className: 'flyin__content-card-middle-row' },
37470
- React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Fare basis'),
37471
- React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.metaData.fareCode)
37472
- ),
37473
- React__default['default'].createElement(
37474
- 'div',
37475
- { className: 'flyin__content-data' },
37476
- firstSegment.metaData.luggageCarryOn &&
37477
- React__default['default'].createElement(
37478
- 'div',
37479
- { className: 'flyin__content-data__item' },
37480
- React__default['default'].createElement(
37481
- 'div',
37482
- { className: 'flyin__content-data__item-icon' },
37483
- React__default['default'].createElement(Icon, { name: 'ui-bag', width: 20, 'aria-hidden': 'true' })
37484
- ),
37485
- React__default['default'].createElement(
37486
- 'div',
37487
- { className: 'flyin__content-data__item-content' },
37488
- React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Carry-on luggage'),
37489
- React__default['default'].createElement(
37490
- 'div',
37491
- { className: 'flyin__content-data__item-content-description' },
37492
- firstSegment.metaData.luggageCarryOn.text
37493
- )
37494
- )
37495
- ),
37496
- firstSegment.metaData.luggageChecked &&
37497
- React__default['default'].createElement(
37498
- 'div',
37499
- { className: 'flyin__content-data__item' },
37500
- React__default['default'].createElement(
37501
- 'div',
37502
- { className: 'flyin__content-data__item-icon' },
37503
- React__default['default'].createElement(Icon, { name: 'ui-suitcase', width: 20 })
37504
- ),
37505
- React__default['default'].createElement(
37506
- 'div',
37507
- { className: 'flyin__content-data__item-content' },
37508
- React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Checked luggage'),
37509
- React__default['default'].createElement(
37510
- 'div',
37511
- { className: 'flyin__content-data__item-content-description' },
37512
- firstSegment.metaData.luggageChecked.text
37513
- )
37514
- )
37515
- ),
37516
- firstSegment.metaData.seatSelection &&
37517
- React__default['default'].createElement(
37518
- 'div',
37519
- { className: 'flyin__content-data__item' },
37520
- React__default['default'].createElement(
37521
- 'div',
37522
- { className: 'flyin__content-data__item-icon' },
37523
- React__default['default'].createElement(Icon, { name: 'ui-seat', width: 20 })
37524
- ),
37525
- React__default['default'].createElement(
37526
- 'div',
37527
- { className: 'flyin__content-data__item-content' },
37528
- React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Seat selection'),
37529
- React__default['default'].createElement(
37530
- 'div',
37531
- { className: 'flyin__content-data__item-content-description' },
37532
- firstSegment.metaData.seatSelection.text
37533
- )
37534
- )
37535
- ),
37536
- firstSegment.metaData.cancel &&
37537
- React__default['default'].createElement(
37538
- 'div',
37539
- { className: 'flyin__content-data__item' },
37540
- React__default['default'].createElement(
37541
- 'div',
37542
- { className: 'flyin__content-data__item-icon' },
37543
- React__default['default'].createElement(Icon, { name: 'ui-refund', width: 20 })
37544
- ),
37545
- React__default['default'].createElement(
37546
- 'div',
37547
- { className: 'flyin__content-data__item-content' },
37548
- React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Refund'),
37549
- React__default['default'].createElement(
37550
- 'div',
37551
- { className: 'flyin__content-data__item-content-description' },
37552
- firstSegment.metaData.cancel.text
37553
- )
37554
- )
37555
- ),
37556
- firstSegment.metaData.other &&
37557
- React__default['default'].createElement(
37558
- 'div',
37559
- { className: 'flyin__content-data__item' },
37560
- React__default['default'].createElement(
37561
- 'div',
37562
- { className: 'flyin__content-data__item-icon flyin__content-data__item-icon--other' },
37563
- React__default['default'].createElement(Icon, { name: 'ui-else', width: 20 })
37564
- ),
37565
- React__default['default'].createElement(
37566
- 'div',
37567
- { className: 'flyin__content-data__item-content' },
37568
- React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Other'),
37569
- React__default['default'].createElement(
37570
- 'ul',
37571
- { className: 'flyin__content-data__item-content-description flyin__content-data__item-content-description--list' },
37572
- firstSegment.metaData.other.map(function (other, index) {
37573
- return React__default['default'].createElement('li', { key: 'other-'.concat(index) }, other.text);
37574
- })
37575
- )
37576
- )
37577
- )
37578
- )
37579
- )
37580
- ),
37581
- React__default['default'].createElement(
37582
- 'div',
37583
- {
37584
- className: 'flyin__content-card-button',
37585
- onClick: function () {
37586
- var _a, _b, _c;
37587
- var fareCode =
37588
- (_c =
37589
- (_b = (_a = flightOption.outward.segments) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0
37590
- ? void 0
37591
- : _b.metaData) === null || _c === void 0
37592
- ? void 0
37593
- : _c.fareCode;
37594
- setSelectedOutwardFareCode(fareCode !== null && fareCode !== void 0 ? fareCode : null);
37595
- }
37596
- },
37597
- React__default['default'].createElement(
37598
- 'div',
37599
- { className: 'cta '.concat(selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'cta--selected' : '') },
37600
- ' ',
37601
- selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'Selected' : 'Select'
37602
- )
37603
- )
37604
- );
37605
- })
37606
- )
37607
- ),
37608
- React__default['default'].createElement(
37609
- 'div',
37610
- { className: 'flyin__content' },
37301
+ { className: 'flyin__content' },
37302
+ flightSearchDetailsLoading || lodash.isEmpty(flights)
37303
+ ? React__default['default'].createElement(Spinner, null)
37304
+ : flight &&
37611
37305
  React__default['default'].createElement(
37612
37306
  'div',
37613
37307
  { className: 'flyin__content-text-row' },
@@ -37616,7 +37310,7 @@ var FlyIn = function (_a) {
37616
37310
  { className: 'flyin__content-text-icon-row' },
37617
37311
  React__default['default'].createElement('img', {
37618
37312
  src: 'https://media.tidesoftware.be/media/shared/Airlines/'.concat(
37619
- (_h = getDepartureSegment(flight.return)) === null || _h === void 0 ? void 0 : _h.marketingAirlineCode,
37313
+ (_c = getDepartureSegment(flight.outward)) === null || _c === void 0 ? void 0 : _c.marketingAirlineCode,
37620
37314
  '.png?height=256'
37621
37315
  ),
37622
37316
  alt: 'airline-logo',
@@ -37629,37 +37323,37 @@ var FlyIn = function (_a) {
37629
37323
  React__default['default'].createElement(
37630
37324
  'span',
37631
37325
  { className: 'flyin__content-text-title-row' },
37632
- React__default['default'].createElement('strong', null, translations.SRP.RETURN),
37326
+ React__default['default'].createElement('strong', null, translations.SRP.DEPARTURE),
37633
37327
  ' ',
37634
- (_j = getDepartureSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _j === void 0
37328
+ (_d = getDepartureSegment(flight === null || flight === void 0 ? void 0 : flight.outward)) === null || _d === void 0
37635
37329
  ? void 0
37636
- : _j.departureAirportCode,
37330
+ : _d.departureAirportCode,
37637
37331
  ' -',
37638
37332
  ' ',
37639
- (_k = getArrivalSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _k === void 0
37333
+ (_e = getArrivalSegment(flight === null || flight === void 0 ? void 0 : flight.outward)) === null || _e === void 0
37640
37334
  ? void 0
37641
- : _k.arrivalAirportCode
37335
+ : _e.arrivalAirportCode
37642
37336
  ),
37643
37337
  React__default['default'].createElement(
37644
37338
  'span',
37645
37339
  { className: 'flyin__content-text' },
37646
37340
  timeFromDateTime(
37647
- (_l = getDepartureSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _l === void 0
37341
+ (_f = getDepartureSegment(flight === null || flight === void 0 ? void 0 : flight.outward)) === null || _f === void 0
37648
37342
  ? void 0
37649
- : _l.departureDateTime
37343
+ : _f.departureDateTime
37650
37344
  ),
37651
37345
  ' -',
37652
37346
  ' ',
37653
37347
  timeFromDateTime(
37654
- (_m = getArrivalSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _m === void 0
37348
+ (_g = getArrivalSegment(flight === null || flight === void 0 ? void 0 : flight.outward)) === null || _g === void 0
37655
37349
  ? void 0
37656
- : _m.arrivalDateTime
37350
+ : _g.arrivalDateTime
37657
37351
  ),
37658
37352
  ' (',
37659
- durationTicksInHoursString(flight.return.durationInTicks),
37353
+ durationTicksInHoursString(flight.outward.durationInTicks),
37660
37354
  ',',
37661
37355
  ' ',
37662
- getNumberOfStopsLabel(flight.return, translations.SRP.DIRECT, translations.SRP.STOPS, translations.SRP.STOP),
37356
+ getNumberOfStopsLabel(flight.outward, translations.SRP.DIRECT, translations.SRP.STOPS, translations.SRP.STOP),
37663
37357
  '), ',
37664
37358
  numberOfTravellers,
37665
37359
  ' ',
@@ -37694,229 +37388,628 @@ var FlyIn = function (_a) {
37694
37388
  )
37695
37389
  )
37696
37390
  )
37697
- ),
37391
+ ),
37392
+ !flightSearchDetailsLoading &&
37393
+ flight &&
37394
+ React__default['default'].createElement(
37395
+ React__default['default'].Fragment,
37396
+ null,
37397
+ React__default['default'].createElement(
37398
+ 'div',
37399
+ { className: 'flyin__content-cards-wrapper' },
37698
37400
  React__default['default'].createElement(
37699
37401
  'div',
37700
- { className: 'flyin__content-cards-wrapper' },
37701
- React__default['default'].createElement(
37702
- 'div',
37703
- { className: 'flyin__content-cards' },
37704
- uniqueReturnFlights.map(function (flightOption, index) {
37705
- var firstSegment = lodash.first(flightOption.return.segments);
37706
- if (!firstSegment) return null;
37707
- var diff = getReturnPriceDiff(firstSegment.metaData.fareCode);
37708
- return React__default['default'].createElement(
37402
+ { className: 'flyin__content-cards' },
37403
+ uniqueOutwardFlights.map(function (flightOption, index) {
37404
+ var firstSegment = lodash.first(flightOption.outward.segments);
37405
+ if (!firstSegment) return null;
37406
+ var diff = getOutwardPriceDiff(firstSegment.metaData.fareCode);
37407
+ return React__default['default'].createElement(
37408
+ 'div',
37409
+ {
37410
+ key: 'outward-flight-option-'.concat(index),
37411
+ className: 'flyin__content-card '.concat(selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : '')
37412
+ },
37413
+ React__default['default'].createElement(
37709
37414
  'div',
37710
- {
37711
- key: 'return-flight-option-'.concat(index),
37712
- className: 'flyin__content-card '.concat(selectedReturnFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : '')
37713
- },
37415
+ { className: 'flyin__content-card-top' },
37416
+ React__default['default'].createElement('span', { className: 'flyin__content-card-top-tag' }, firstSegment.metaData.fareMarketingName),
37417
+ diff !== null &&
37418
+ diff != 0 &&
37419
+ React__default['default'].createElement(
37420
+ 'span',
37421
+ {
37422
+ className: 'flyin__content-card-top-price '.concat(
37423
+ diff > 0 ? 'flyin__content-card-top-price--increase' : diff < 0 ? 'flyin__content-card-top-price--decrease' : ''
37424
+ )
37425
+ },
37426
+ diff > 0 ? '+\u20AC'.concat(diff) : '-\u20AC'.concat(Math.abs(diff))
37427
+ )
37428
+ ),
37429
+ React__default['default'].createElement(
37430
+ 'div',
37431
+ { className: 'flyin__content-card-middle' },
37714
37432
  React__default['default'].createElement(
37715
37433
  'div',
37716
- { className: 'flyin__content-card-top' },
37717
- React__default['default'].createElement('span', { className: 'flyin__content-card-top-tag' }, firstSegment.metaData.fareMarketingName),
37718
- diff !== null &&
37719
- diff != 0 &&
37434
+ { className: 'flyin__content-card-middle-rows' },
37435
+ React__default['default'].createElement(
37436
+ 'div',
37437
+ { className: 'flyin__content-card-middle-row' },
37438
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Number of travellers'),
37439
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-right' }, numberOfTravellers)
37440
+ ),
37441
+ React__default['default'].createElement(
37442
+ 'div',
37443
+ { className: 'flyin__content-card-middle-row' },
37444
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Travel class'),
37720
37445
  React__default['default'].createElement(
37721
37446
  'span',
37722
- {
37723
- className: 'flyin__content-card-top-price '.concat(
37724
- diff > 0 ? 'flyin__content-card-top-price--increase' : diff < 0 ? 'flyin__content-card-top-price--decrease' : ''
37725
- )
37726
- },
37727
- diff > 0 ? '+\u20AC'.concat(diff) : '-\u20AC'.concat(Math.abs(diff))
37447
+ { className: 'flyin__content-card-middle-row-right' },
37448
+ firstSegment.metaData.fareMarketingName
37728
37449
  )
37729
- ),
37730
- React__default['default'].createElement(
37731
- 'div',
37732
- { className: 'flyin__content-card-middle' },
37450
+ ),
37733
37451
  React__default['default'].createElement(
37734
37452
  'div',
37735
- { className: 'flyin__content-card-middle-rows' },
37736
- React__default['default'].createElement(
37737
- 'div',
37738
- { className: 'flyin__content-card-middle-row' },
37739
- React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Number of travellers'),
37740
- React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-right' }, numberOfTravellers)
37741
- ),
37742
- React__default['default'].createElement(
37743
- 'div',
37744
- { className: 'flyin__content-card-middle-row' },
37745
- React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Travel class'),
37453
+ { className: 'flyin__content-card-middle-row' },
37454
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Booking class'),
37455
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.bookingClassCode)
37456
+ ),
37457
+ React__default['default'].createElement(
37458
+ 'div',
37459
+ { className: 'flyin__content-card-middle-row' },
37460
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Fare basis'),
37461
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.metaData.fareCode)
37462
+ ),
37463
+ React__default['default'].createElement(
37464
+ 'div',
37465
+ { className: 'flyin__content-data' },
37466
+ firstSegment.metaData.luggageCarryOn &&
37746
37467
  React__default['default'].createElement(
37747
- 'span',
37748
- { className: 'flyin__content-card-middle-row-right' },
37749
- firstSegment.metaData.fareMarketingName
37750
- )
37751
- ),
37752
- React__default['default'].createElement(
37753
- 'div',
37754
- { className: 'flyin__content-card-middle-row' },
37755
- React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Booking class'),
37756
- React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.bookingClassCode)
37757
- ),
37758
- React__default['default'].createElement(
37759
- 'div',
37760
- { className: 'flyin__content-card-middle-row' },
37761
- React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Fare basis'),
37762
- React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.metaData.fareCode)
37763
- ),
37764
- React__default['default'].createElement(
37765
- 'div',
37766
- { className: 'flyin__content-data' },
37767
- firstSegment.metaData.luggageCarryOn &&
37468
+ 'div',
37469
+ { className: 'flyin__content-data__item' },
37768
37470
  React__default['default'].createElement(
37769
37471
  'div',
37770
- { className: 'flyin__content-data__item' },
37472
+ { className: 'flyin__content-data__item-icon' },
37473
+ React__default['default'].createElement(Icon, { name: 'ui-bag', width: 20, 'aria-hidden': 'true' })
37474
+ ),
37475
+ React__default['default'].createElement(
37476
+ 'div',
37477
+ { className: 'flyin__content-data__item-content' },
37478
+ React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Carry-on luggage'),
37771
37479
  React__default['default'].createElement(
37772
37480
  'div',
37773
- { className: 'flyin__content-data__item-icon' },
37774
- React__default['default'].createElement(Icon, { name: 'ui-bag', width: 20, 'aria-hidden': 'true' })
37775
- ),
37481
+ { className: 'flyin__content-data__item-content-description' },
37482
+ firstSegment.metaData.luggageCarryOn.text
37483
+ )
37484
+ )
37485
+ ),
37486
+ firstSegment.metaData.luggageChecked &&
37487
+ React__default['default'].createElement(
37488
+ 'div',
37489
+ { className: 'flyin__content-data__item' },
37490
+ React__default['default'].createElement(
37491
+ 'div',
37492
+ { className: 'flyin__content-data__item-icon' },
37493
+ React__default['default'].createElement(Icon, { name: 'ui-suitcase', width: 20 })
37494
+ ),
37495
+ React__default['default'].createElement(
37496
+ 'div',
37497
+ { className: 'flyin__content-data__item-content' },
37498
+ React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Checked luggage'),
37776
37499
  React__default['default'].createElement(
37777
37500
  'div',
37778
- { className: 'flyin__content-data__item-content' },
37779
- React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Carry-on luggage'),
37780
- React__default['default'].createElement(
37781
- 'div',
37782
- { className: 'flyin__content-data__item-content-description' },
37783
- firstSegment.metaData.luggageCarryOn.text
37784
- )
37501
+ { className: 'flyin__content-data__item-content-description' },
37502
+ firstSegment.metaData.luggageChecked.text
37785
37503
  )
37504
+ )
37505
+ ),
37506
+ firstSegment.metaData.seatSelection &&
37507
+ React__default['default'].createElement(
37508
+ 'div',
37509
+ { className: 'flyin__content-data__item' },
37510
+ React__default['default'].createElement(
37511
+ 'div',
37512
+ { className: 'flyin__content-data__item-icon' },
37513
+ React__default['default'].createElement(Icon, { name: 'ui-seat', width: 20 })
37786
37514
  ),
37787
- firstSegment.metaData.luggageChecked &&
37788
37515
  React__default['default'].createElement(
37789
37516
  'div',
37790
- { className: 'flyin__content-data__item' },
37517
+ { className: 'flyin__content-data__item-content' },
37518
+ React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Seat selection'),
37791
37519
  React__default['default'].createElement(
37792
37520
  'div',
37793
- { className: 'flyin__content-data__item-icon' },
37794
- React__default['default'].createElement(Icon, { name: 'ui-suitcase', width: 20 })
37795
- ),
37521
+ { className: 'flyin__content-data__item-content-description' },
37522
+ firstSegment.metaData.seatSelection.text
37523
+ )
37524
+ )
37525
+ ),
37526
+ firstSegment.metaData.cancel &&
37527
+ React__default['default'].createElement(
37528
+ 'div',
37529
+ { className: 'flyin__content-data__item' },
37530
+ React__default['default'].createElement(
37531
+ 'div',
37532
+ { className: 'flyin__content-data__item-icon' },
37533
+ React__default['default'].createElement(Icon, { name: 'ui-refund', width: 20 })
37534
+ ),
37535
+ React__default['default'].createElement(
37536
+ 'div',
37537
+ { className: 'flyin__content-data__item-content' },
37538
+ React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Refund'),
37796
37539
  React__default['default'].createElement(
37797
37540
  'div',
37798
- { className: 'flyin__content-data__item-content' },
37799
- React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Checked luggage'),
37800
- React__default['default'].createElement(
37801
- 'div',
37802
- { className: 'flyin__content-data__item-content-description' },
37803
- firstSegment.metaData.luggageChecked.text
37804
- )
37541
+ { className: 'flyin__content-data__item-content-description' },
37542
+ firstSegment.metaData.cancel.text
37805
37543
  )
37544
+ )
37545
+ ),
37546
+ firstSegment.metaData.other &&
37547
+ React__default['default'].createElement(
37548
+ 'div',
37549
+ { className: 'flyin__content-data__item' },
37550
+ React__default['default'].createElement(
37551
+ 'div',
37552
+ { className: 'flyin__content-data__item-icon flyin__content-data__item-icon--other' },
37553
+ React__default['default'].createElement(Icon, { name: 'ui-else', width: 20 })
37806
37554
  ),
37807
- firstSegment.metaData.seatSelection &&
37808
37555
  React__default['default'].createElement(
37809
37556
  'div',
37810
- { className: 'flyin__content-data__item' },
37557
+ { className: 'flyin__content-data__item-content' },
37558
+ React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Other'),
37811
37559
  React__default['default'].createElement(
37812
- 'div',
37813
- { className: 'flyin__content-data__item-icon' },
37814
- React__default['default'].createElement(Icon, { name: 'ui-seat', width: 20 })
37815
- ),
37560
+ 'ul',
37561
+ { className: 'flyin__content-data__item-content-description flyin__content-data__item-content-description--list' },
37562
+ firstSegment.metaData.other.map(function (other, index) {
37563
+ return React__default['default'].createElement('li', { key: 'other-'.concat(index) }, other.text);
37564
+ })
37565
+ )
37566
+ )
37567
+ )
37568
+ )
37569
+ )
37570
+ ),
37571
+ React__default['default'].createElement(
37572
+ 'div',
37573
+ {
37574
+ className: 'flyin__content-card-button',
37575
+ onClick: function () {
37576
+ var _a, _b, _c;
37577
+ var fareCode =
37578
+ (_c =
37579
+ (_b = (_a = flightOption.outward.segments) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0
37580
+ ? void 0
37581
+ : _b.metaData) === null || _c === void 0
37582
+ ? void 0
37583
+ : _c.fareCode;
37584
+ setSelectedOutwardFareCode(fareCode !== null && fareCode !== void 0 ? fareCode : null);
37585
+ }
37586
+ },
37587
+ React__default['default'].createElement(
37588
+ 'div',
37589
+ { className: 'cta '.concat(selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'cta--selected' : '') },
37590
+ ' ',
37591
+ selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'Selected' : 'Select'
37592
+ )
37593
+ )
37594
+ );
37595
+ })
37596
+ )
37597
+ ),
37598
+ React__default['default'].createElement(
37599
+ 'div',
37600
+ { className: 'flyin__content' },
37601
+ React__default['default'].createElement(
37602
+ 'div',
37603
+ { className: 'flyin__content-text-row' },
37604
+ React__default['default'].createElement(
37605
+ 'div',
37606
+ { className: 'flyin__content-text-icon-row' },
37607
+ React__default['default'].createElement('img', {
37608
+ src: 'https://media.tidesoftware.be/media/shared/Airlines/'.concat(
37609
+ (_h = getDepartureSegment(flight.return)) === null || _h === void 0 ? void 0 : _h.marketingAirlineCode,
37610
+ '.png?height=256'
37611
+ ),
37612
+ alt: 'airline-logo',
37613
+ className: 'logo',
37614
+ 'aria-hidden': 'true'
37615
+ }),
37616
+ React__default['default'].createElement(
37617
+ 'div',
37618
+ { className: 'flyin__content-text-col' },
37619
+ React__default['default'].createElement(
37620
+ 'span',
37621
+ { className: 'flyin__content-text-title-row' },
37622
+ React__default['default'].createElement('strong', null, translations.SRP.RETURN),
37623
+ ' ',
37624
+ (_j = getDepartureSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _j === void 0
37625
+ ? void 0
37626
+ : _j.departureAirportCode,
37627
+ ' -',
37628
+ ' ',
37629
+ (_k = getArrivalSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _k === void 0
37630
+ ? void 0
37631
+ : _k.arrivalAirportCode
37632
+ ),
37633
+ React__default['default'].createElement(
37634
+ 'span',
37635
+ { className: 'flyin__content-text' },
37636
+ timeFromDateTime(
37637
+ (_l = getDepartureSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _l === void 0
37638
+ ? void 0
37639
+ : _l.departureDateTime
37640
+ ),
37641
+ ' -',
37642
+ ' ',
37643
+ timeFromDateTime(
37644
+ (_m = getArrivalSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _m === void 0
37645
+ ? void 0
37646
+ : _m.arrivalDateTime
37647
+ ),
37648
+ ' (',
37649
+ durationTicksInHoursString(flight.return.durationInTicks),
37650
+ ',',
37651
+ ' ',
37652
+ getNumberOfStopsLabel(flight.return, translations.SRP.DIRECT, translations.SRP.STOPS, translations.SRP.STOP),
37653
+ '), ',
37654
+ numberOfTravellers,
37655
+ ' ',
37656
+ 'travellers'
37657
+ )
37658
+ )
37659
+ ),
37660
+ React__default['default'].createElement(
37661
+ 'div',
37662
+ { className: 'flyin__content-arrow-row' },
37663
+ React__default['default'].createElement(
37664
+ 'div',
37665
+ { className: 'flyin__content-arrow is-disabled', 'aria-disabled': 'true' },
37666
+ React__default['default'].createElement(Icon, {
37667
+ name: 'ui-arrow',
37668
+ className: 'flyin__content-arrow-icon',
37669
+ width: 16,
37670
+ height: 16,
37671
+ 'aria-hidden': 'true'
37672
+ })
37673
+ ),
37674
+ React__default['default'].createElement(
37675
+ 'div',
37676
+ { className: 'flyin__content-arrow' },
37677
+ React__default['default'].createElement(Icon, {
37678
+ name: 'ui-arrow',
37679
+ className: 'flyin__content-arrow-icon flyin__content-arrow-icon--forward',
37680
+ width: 16,
37681
+ height: 16,
37682
+ 'aria-hidden': 'true'
37683
+ })
37684
+ )
37685
+ )
37686
+ )
37687
+ ),
37688
+ React__default['default'].createElement(
37689
+ 'div',
37690
+ { className: 'flyin__content-cards-wrapper' },
37691
+ React__default['default'].createElement(
37692
+ 'div',
37693
+ { className: 'flyin__content-cards' },
37694
+ uniqueReturnFlights.map(function (flightOption, index) {
37695
+ var firstSegment = lodash.first(flightOption.return.segments);
37696
+ if (!firstSegment) return null;
37697
+ var diff = getReturnPriceDiff(firstSegment.metaData.fareCode);
37698
+ return React__default['default'].createElement(
37699
+ 'div',
37700
+ {
37701
+ key: 'return-flight-option-'.concat(index),
37702
+ className: 'flyin__content-card '.concat(selectedReturnFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : '')
37703
+ },
37704
+ React__default['default'].createElement(
37705
+ 'div',
37706
+ { className: 'flyin__content-card-top' },
37707
+ React__default['default'].createElement('span', { className: 'flyin__content-card-top-tag' }, firstSegment.metaData.fareMarketingName),
37708
+ diff !== null &&
37709
+ diff != 0 &&
37710
+ React__default['default'].createElement(
37711
+ 'span',
37712
+ {
37713
+ className: 'flyin__content-card-top-price '.concat(
37714
+ diff > 0 ? 'flyin__content-card-top-price--increase' : diff < 0 ? 'flyin__content-card-top-price--decrease' : ''
37715
+ )
37716
+ },
37717
+ diff > 0 ? '+\u20AC'.concat(diff) : '-\u20AC'.concat(Math.abs(diff))
37718
+ )
37719
+ ),
37720
+ React__default['default'].createElement(
37721
+ 'div',
37722
+ { className: 'flyin__content-card-middle' },
37723
+ React__default['default'].createElement(
37724
+ 'div',
37725
+ { className: 'flyin__content-card-middle-rows' },
37726
+ React__default['default'].createElement(
37727
+ 'div',
37728
+ { className: 'flyin__content-card-middle-row' },
37729
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Number of travellers'),
37730
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-right' }, numberOfTravellers)
37731
+ ),
37732
+ React__default['default'].createElement(
37733
+ 'div',
37734
+ { className: 'flyin__content-card-middle-row' },
37735
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Travel class'),
37736
+ React__default['default'].createElement(
37737
+ 'span',
37738
+ { className: 'flyin__content-card-middle-row-right' },
37739
+ firstSegment.metaData.fareMarketingName
37740
+ )
37741
+ ),
37742
+ React__default['default'].createElement(
37743
+ 'div',
37744
+ { className: 'flyin__content-card-middle-row' },
37745
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Booking class'),
37746
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.bookingClassCode)
37747
+ ),
37748
+ React__default['default'].createElement(
37749
+ 'div',
37750
+ { className: 'flyin__content-card-middle-row' },
37751
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Fare basis'),
37752
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.metaData.fareCode)
37753
+ ),
37754
+ React__default['default'].createElement(
37755
+ 'div',
37756
+ { className: 'flyin__content-data' },
37757
+ firstSegment.metaData.luggageCarryOn &&
37758
+ React__default['default'].createElement(
37759
+ 'div',
37760
+ { className: 'flyin__content-data__item' },
37761
+ React__default['default'].createElement(
37762
+ 'div',
37763
+ { className: 'flyin__content-data__item-icon' },
37764
+ React__default['default'].createElement(Icon, { name: 'ui-bag', width: 20, 'aria-hidden': 'true' })
37765
+ ),
37766
+ React__default['default'].createElement(
37767
+ 'div',
37768
+ { className: 'flyin__content-data__item-content' },
37769
+ React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Carry-on luggage'),
37816
37770
  React__default['default'].createElement(
37817
37771
  'div',
37818
- { className: 'flyin__content-data__item-content' },
37819
- React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Seat selection'),
37820
- React__default['default'].createElement(
37821
- 'div',
37822
- { className: 'flyin__content-data__item-content-description' },
37823
- firstSegment.metaData.seatSelection.text
37824
- )
37772
+ { className: 'flyin__content-data__item-content-description' },
37773
+ firstSegment.metaData.luggageCarryOn.text
37825
37774
  )
37775
+ )
37776
+ ),
37777
+ firstSegment.metaData.luggageChecked &&
37778
+ React__default['default'].createElement(
37779
+ 'div',
37780
+ { className: 'flyin__content-data__item' },
37781
+ React__default['default'].createElement(
37782
+ 'div',
37783
+ { className: 'flyin__content-data__item-icon' },
37784
+ React__default['default'].createElement(Icon, { name: 'ui-suitcase', width: 20 })
37826
37785
  ),
37827
- firstSegment.metaData.cancel &&
37828
37786
  React__default['default'].createElement(
37829
37787
  'div',
37830
- { className: 'flyin__content-data__item' },
37788
+ { className: 'flyin__content-data__item-content' },
37789
+ React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Checked luggage'),
37831
37790
  React__default['default'].createElement(
37832
37791
  'div',
37833
- { className: 'flyin__content-data__item-icon' },
37834
- React__default['default'].createElement(Icon, { name: 'ui-refund', width: 20 })
37835
- ),
37792
+ { className: 'flyin__content-data__item-content-description' },
37793
+ firstSegment.metaData.luggageChecked.text
37794
+ )
37795
+ )
37796
+ ),
37797
+ firstSegment.metaData.seatSelection &&
37798
+ React__default['default'].createElement(
37799
+ 'div',
37800
+ { className: 'flyin__content-data__item' },
37801
+ React__default['default'].createElement(
37802
+ 'div',
37803
+ { className: 'flyin__content-data__item-icon' },
37804
+ React__default['default'].createElement(Icon, { name: 'ui-seat', width: 20 })
37805
+ ),
37806
+ React__default['default'].createElement(
37807
+ 'div',
37808
+ { className: 'flyin__content-data__item-content' },
37809
+ React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Seat selection'),
37836
37810
  React__default['default'].createElement(
37837
37811
  'div',
37838
- { className: 'flyin__content-data__item-content' },
37839
- React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Refund'),
37840
- React__default['default'].createElement(
37841
- 'div',
37842
- { className: 'flyin__content-data__item-content-description' },
37843
- firstSegment.metaData.cancel.text
37844
- )
37812
+ { className: 'flyin__content-data__item-content-description' },
37813
+ firstSegment.metaData.seatSelection.text
37845
37814
  )
37815
+ )
37816
+ ),
37817
+ firstSegment.metaData.cancel &&
37818
+ React__default['default'].createElement(
37819
+ 'div',
37820
+ { className: 'flyin__content-data__item' },
37821
+ React__default['default'].createElement(
37822
+ 'div',
37823
+ { className: 'flyin__content-data__item-icon' },
37824
+ React__default['default'].createElement(Icon, { name: 'ui-refund', width: 20 })
37846
37825
  ),
37847
- firstSegment.metaData.other &&
37848
37826
  React__default['default'].createElement(
37849
37827
  'div',
37850
- { className: 'flyin__content-data__item' },
37828
+ { className: 'flyin__content-data__item-content' },
37829
+ React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Refund'),
37851
37830
  React__default['default'].createElement(
37852
37831
  'div',
37853
- { className: 'flyin__content-data__item-icon flyin__content-data__item-icon--other' },
37854
- React__default['default'].createElement(Icon, { name: 'ui-else', width: 20 })
37855
- ),
37832
+ { className: 'flyin__content-data__item-content-description' },
37833
+ firstSegment.metaData.cancel.text
37834
+ )
37835
+ )
37836
+ ),
37837
+ firstSegment.metaData.other &&
37838
+ React__default['default'].createElement(
37839
+ 'div',
37840
+ { className: 'flyin__content-data__item' },
37841
+ React__default['default'].createElement(
37842
+ 'div',
37843
+ { className: 'flyin__content-data__item-icon flyin__content-data__item-icon--other' },
37844
+ React__default['default'].createElement(Icon, { name: 'ui-else', width: 20 })
37845
+ ),
37846
+ React__default['default'].createElement(
37847
+ 'div',
37848
+ { className: 'flyin__content-data__item-content' },
37849
+ React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Other'),
37856
37850
  React__default['default'].createElement(
37857
- 'div',
37858
- { className: 'flyin__content-data__item-content' },
37859
- React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Other'),
37860
- React__default['default'].createElement(
37861
- 'ul',
37862
- { className: 'flyin__content-data__item-content-description flyin__content-data__item-content-description--list' },
37863
- firstSegment.metaData.other.map(function (other, index) {
37864
- return React__default['default'].createElement('li', { key: 'other-'.concat(index) }, other.text);
37865
- })
37866
- )
37851
+ 'ul',
37852
+ { className: 'flyin__content-data__item-content-description flyin__content-data__item-content-description--list' },
37853
+ firstSegment.metaData.other.map(function (other, index) {
37854
+ return React__default['default'].createElement('li', { key: 'other-'.concat(index) }, other.text);
37855
+ })
37867
37856
  )
37868
37857
  )
37869
- )
37858
+ )
37870
37859
  )
37871
- ),
37860
+ )
37861
+ ),
37862
+ React__default['default'].createElement(
37863
+ 'div',
37864
+ {
37865
+ className: 'flyin__content-card-button',
37866
+ onClick: function () {
37867
+ var _a, _b, _c;
37868
+ var fareCode =
37869
+ (_c =
37870
+ (_b = (_a = flightOption.return.segments) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0
37871
+ ? void 0
37872
+ : _b.metaData) === null || _c === void 0
37873
+ ? void 0
37874
+ : _c.fareCode;
37875
+ setSelectedReturnFareCode(fareCode !== null && fareCode !== void 0 ? fareCode : null);
37876
+ }
37877
+ },
37872
37878
  React__default['default'].createElement(
37873
37879
  'div',
37874
- {
37875
- className: 'flyin__content-card-button',
37876
- onClick: function () {
37877
- var _a, _b, _c;
37878
- var fareCode =
37879
- (_c =
37880
- (_b = (_a = flightOption.return.segments) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0
37881
- ? void 0
37882
- : _b.metaData) === null || _c === void 0
37883
- ? void 0
37884
- : _c.fareCode;
37885
- setSelectedReturnFareCode(fareCode !== null && fareCode !== void 0 ? fareCode : null);
37886
- }
37887
- },
37888
- React__default['default'].createElement(
37889
- 'div',
37890
- { className: 'cta '.concat(selectedReturnFareCode === firstSegment.metaData.fareCode ? 'cta--selected' : '') },
37891
- ' ',
37892
- selectedReturnFareCode === firstSegment.metaData.fareCode ? 'Selected' : 'Select'
37893
- )
37880
+ { className: 'cta '.concat(selectedReturnFareCode === firstSegment.metaData.fareCode ? 'cta--selected' : '') },
37881
+ ' ',
37882
+ selectedReturnFareCode === firstSegment.metaData.fareCode ? 'Selected' : 'Select'
37894
37883
  )
37895
- );
37896
- })
37897
- )
37884
+ )
37885
+ );
37886
+ })
37898
37887
  )
37888
+ )
37889
+ ),
37890
+ !flightSearchDetailsLoading &&
37891
+ React__default['default'].createElement(
37892
+ 'div',
37893
+ { className: 'flyin__footer' },
37894
+ React__default['default'].createElement(
37895
+ 'div',
37896
+ { className: 'flyin__footer__price' },
37897
+ 'Total price: \u20AC',
37898
+ (_o = selectedCombinationFlight === null || selectedCombinationFlight === void 0 ? void 0 : selectedCombinationFlight.price) === null || _o === void 0
37899
+ ? void 0
37900
+ : _o.toFixed(2)
37899
37901
  ),
37900
- selectedCombinationFlight &&
37901
- !flightSearchDetailsLoading &&
37902
37902
  React__default['default'].createElement(
37903
37903
  'div',
37904
- { className: 'flyin__footer' },
37905
- React__default['default'].createElement(
37906
- 'div',
37907
- { className: 'flyin__footer__price' },
37908
- 'Total price: \u20AC',
37909
- (_o = selectedCombinationFlight === null || selectedCombinationFlight === void 0 ? void 0 : selectedCombinationFlight.price) === null ||
37910
- _o === void 0
37911
- ? void 0
37912
- : _o.toFixed(2)
37913
- ),
37904
+ { className: 'flyin__button-wrapper' },
37905
+ React__default['default'].createElement('button', { className: 'cta cta--select', onClick: handleConfirm }, translations.PRODUCT.BOOK_NOW)
37906
+ )
37907
+ )
37908
+ );
37909
+ };
37910
+
37911
+ var AccommodationFlyIn = function (_a) {
37912
+ var _b;
37913
+ _a.isLoading;
37914
+ _a.isOpen;
37915
+ _a.setIsOpen;
37916
+ var context = React.useContext(SearchResultsConfigurationContext);
37917
+ var language = (_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB';
37918
+ getTranslations(language);
37919
+ reactRedux.useSelector(function (state) {
37920
+ return state.searchResults;
37921
+ }).selectedSearchResultId;
37922
+ return React__default['default'].createElement(
37923
+ React__default['default'].Fragment,
37924
+ null,
37925
+ React__default['default'].createElement('div', { className: 'flyin__content' }, 'TODO')
37926
+ );
37927
+ };
37928
+
37929
+ var FlyIn = function (_a) {
37930
+ var title = _a.title,
37931
+ srpType = _a.srpType,
37932
+ isOpen = _a.isOpen,
37933
+ setIsOpen = _a.setIsOpen,
37934
+ _b = _a.className,
37935
+ className = _b === void 0 ? '' : _b,
37936
+ onPanelRef = _a.onPanelRef;
37937
+ var dispatch = reactRedux.useDispatch();
37938
+ var onCancelSearch = useFlightSearch().onCancelSearch;
37939
+ var panelRef = React.useRef(null);
37940
+ // expose DOM node if needed
37941
+ React.useEffect(
37942
+ function () {
37943
+ onPanelRef === null || onPanelRef === void 0 ? void 0 : onPanelRef(panelRef.current);
37944
+ return function () {
37945
+ return onPanelRef === null || onPanelRef === void 0 ? void 0 : onPanelRef(null);
37946
+ };
37947
+ },
37948
+ [onPanelRef]
37949
+ );
37950
+ React.useEffect(
37951
+ function () {
37952
+ // click outside detection
37953
+ var handleClickOutside = function (event) {
37954
+ if (isOpen && panelRef.current && !panelRef.current.contains(event.target)) {
37955
+ handleClose();
37956
+ }
37957
+ };
37958
+ document.addEventListener('mousedown', handleClickOutside);
37959
+ return function () {
37960
+ return document.removeEventListener('mousedown', handleClickOutside);
37961
+ };
37962
+ },
37963
+ [isOpen, setIsOpen]
37964
+ );
37965
+ // body scroll lock
37966
+ React.useEffect(
37967
+ function () {
37968
+ document.body.style.overflow = isOpen ? 'hidden' : '';
37969
+ return function () {
37970
+ document.body.style.overflow = '';
37971
+ };
37972
+ },
37973
+ [isOpen]
37974
+ );
37975
+ var handleClose = function () {
37976
+ if (isOpen && panelRef.current) {
37977
+ if (srpType === 'flight') {
37978
+ dispatch(setSelectedFlight(null));
37979
+ dispatch(setSelectedFlightDetails(null));
37980
+ onCancelSearch();
37981
+ }
37982
+ setIsOpen(false);
37983
+ }
37984
+ };
37985
+ return React__default['default'].createElement(
37986
+ 'div',
37987
+ { className: 'flyin '.concat(isOpen ? 'flyin--active' : '', ' ').concat(className) },
37988
+ React__default['default'].createElement(
37989
+ 'div',
37990
+ { className: 'flyin__panel '.concat(isOpen ? 'flyin__panel--active' : ''), ref: panelRef },
37991
+ React__default['default'].createElement(
37992
+ 'div',
37993
+ { className: 'flyin__content' },
37994
+ React__default['default'].createElement(
37995
+ 'div',
37996
+ { className: 'flyin__content-title-row' },
37997
+ React__default['default'].createElement('h3', { className: 'flyin__content-title' }, title),
37914
37998
  React__default['default'].createElement(
37915
- 'div',
37916
- { className: 'flyin__button-wrapper' },
37917
- React__default['default'].createElement('button', { className: 'cta cta--select', onClick: handleConfirm }, translations.PRODUCT.BOOK_NOW)
37999
+ 'span',
38000
+ {
38001
+ className: 'flyin__close',
38002
+ onClick: function () {
38003
+ return handleClose();
38004
+ }
38005
+ },
38006
+ React__default['default'].createElement(Icon, { name: 'ui-close', width: 30, height: 30, 'aria-hidden': 'true' })
37918
38007
  )
37919
38008
  )
38009
+ ),
38010
+ srpType === 'flight' && React__default['default'].createElement(FlightsFlyIn, { isOpen: isOpen, setIsOpen: setIsOpen }),
38011
+ (srpType === 'hotel' || srpType === 'groupTour') &&
38012
+ React__default['default'].createElement(AccommodationFlyIn, { isLoading: true, isOpen: isOpen, setIsOpen: setIsOpen })
37920
38013
  )
37921
38014
  );
37922
38015
  };
@@ -37925,11 +38018,11 @@ var HotelCard = function (_a) {
37925
38018
  var result = _a.result,
37926
38019
  translations = _a.translations;
37927
38020
  var dispatch = reactRedux.useDispatch();
37928
- var selectedHotelId = reactRedux.useSelector(function (state) {
38021
+ var selectedSearchResultId = reactRedux.useSelector(function (state) {
37929
38022
  return state.searchResults;
37930
- }).selectedHotelId;
37931
- var handleChange = function (hotelProductId) {
37932
- dispatch(setSelectedHotel(hotelProductId));
38023
+ }).selectedSearchResultId;
38024
+ var handleChange = function (productId) {
38025
+ dispatch(setSelectedSearchResult(productId));
37933
38026
  };
37934
38027
  return React__default['default'].createElement(
37935
38028
  'div',
@@ -38014,23 +38107,18 @@ var HotelCard = function (_a) {
38014
38107
  'button',
38015
38108
  {
38016
38109
  type: 'button',
38017
- className: 'cta '.concat(selectedHotelId === result.id ? 'cta--selected' : 'cta--select'),
38110
+ className: 'cta '.concat(selectedSearchResultId === result.id ? 'cta--selected' : 'cta--select'),
38018
38111
  onClick: function () {
38019
38112
  return handleChange(result.id);
38020
38113
  }
38021
38114
  },
38022
- selectedHotelId === result.id ? 'Selected' : 'Select'
38023
- ),
38024
- React__default['default'].createElement(
38025
- 'button',
38026
- {
38027
- type: 'button',
38028
- className: 'cta cta--select',
38029
- onClick: function () {
38030
- return console.log('Clicked on customCard with id:', result.id);
38031
- }
38032
- },
38033
- translations === null || translations === void 0 ? void 0 : translations.SRP.VIEW_DETAILS
38115
+ selectedSearchResultId === result.id
38116
+ ? translations === null || translations === void 0
38117
+ ? void 0
38118
+ : translations.SHARED.SELECTED
38119
+ : translations === null || translations === void 0
38120
+ ? void 0
38121
+ : translations.SHARED.SELECT
38034
38122
  )
38035
38123
  )
38036
38124
  )
@@ -41206,7 +41294,11 @@ var GroupTourCard = function (_a) {
41206
41294
  var _b;
41207
41295
  var result = _a.result,
41208
41296
  languageCode = _a.languageCode;
41297
+ var dispatch = reactRedux.useDispatch();
41209
41298
  var translations = getTranslations(languageCode !== null && languageCode !== void 0 ? languageCode : 'en-GB');
41299
+ var selectedSearchResultId = reactRedux.useSelector(function (state) {
41300
+ return state.searchResults;
41301
+ }).selectedSearchResultId;
41210
41302
  var genders = ((_b = result.allotment) === null || _b === void 0 ? void 0 : _b.travellerGenders) || [];
41211
41303
  var maleCount = genders.filter(function (g) {
41212
41304
  return g === 0;
@@ -41217,6 +41309,9 @@ var GroupTourCard = function (_a) {
41217
41309
  var otherCount = genders.filter(function (g) {
41218
41310
  return g === 2;
41219
41311
  }).length;
41312
+ var handleChange = function (productId) {
41313
+ dispatch(setSelectedSearchResult(productId));
41314
+ };
41220
41315
  return React__default['default'].createElement(
41221
41316
  'div',
41222
41317
  { className: 'search__result-card' },
@@ -41321,7 +41416,23 @@ var GroupTourCard = function (_a) {
41321
41416
  translations.PRODUCT.PER_PERSON
41322
41417
  )
41323
41418
  ),
41324
- React__default['default'].createElement('button', { className: 'cta cta--select' }, 'Bekijk reis')
41419
+ React__default['default'].createElement(
41420
+ 'button',
41421
+ {
41422
+ type: 'button',
41423
+ className: 'cta '.concat(selectedSearchResultId === result.productId ? 'cta--selected' : 'cta--select'),
41424
+ onClick: function () {
41425
+ return handleChange(result.productId);
41426
+ }
41427
+ },
41428
+ selectedSearchResultId === result.productId
41429
+ ? translations === null || translations === void 0
41430
+ ? void 0
41431
+ : translations.SHARED.SELECTED
41432
+ : translations === null || translations === void 0
41433
+ ? void 0
41434
+ : translations.SHARED.SELECT
41435
+ )
41325
41436
  )
41326
41437
  )
41327
41438
  );
@@ -41440,7 +41551,7 @@ var SearchResultsContainer = function () {
41440
41551
  isLoading = _b.isLoading,
41441
41552
  filters = _b.filters,
41442
41553
  sortKey = _b.sortKey,
41443
- selectedHotelId = _b.selectedHotelId,
41554
+ selectedSearchResultId = _b.selectedSearchResultId,
41444
41555
  flyInIsOpen = _b.flyInIsOpen;
41445
41556
  var isMobile = useMediaQuery('(max-width: 1200px)');
41446
41557
  var _c = React.useState(false),
@@ -41617,6 +41728,7 @@ var SearchResultsContainer = function () {
41617
41728
  productTagIds: tagId ? [tagId] : []
41618
41729
  }
41619
41730
  };
41731
+ console.log('Built search request from query params', searchRequest);
41620
41732
  return searchRequest;
41621
41733
  };
41622
41734
  var getRequestRoomsFromEntry = function (rooms) {
@@ -41663,7 +41775,7 @@ var SearchResultsContainer = function () {
41663
41775
  var room = { index: i, pax: [] };
41664
41776
  lodash.range(0, x.adults).forEach(function () {
41665
41777
  room.pax.push({
41666
- age: 30
41778
+ age: Math.floor(Math.random() * 100)
41667
41779
  });
41668
41780
  });
41669
41781
  x.childAges.forEach(function (x) {
@@ -41743,10 +41855,12 @@ var SearchResultsContainer = function () {
41743
41855
  return r.productId === (entry === null || entry === void 0 ? void 0 : entry.id);
41744
41856
  });
41745
41857
  if (matching) {
41746
- dispatch(setSelectedHotel(matching.productId));
41858
+ dispatch(setSelectedSearchResult(matching.productId));
41747
41859
  }
41748
41860
  } else {
41749
- dispatch(setSelectedHotel((_b = packageSearchResults[0]) === null || _b === void 0 ? void 0 : _b.productId));
41861
+ if (context.type === 'hotel-flight') {
41862
+ dispatch(setSelectedSearchResult((_b = packageSearchResults[0]) === null || _b === void 0 ? void 0 : _b.productId));
41863
+ }
41750
41864
  }
41751
41865
  }
41752
41866
  dispatch(setIsLoading(false));
@@ -41784,7 +41898,13 @@ var SearchResultsContainer = function () {
41784
41898
  return __generator(this, function (_c) {
41785
41899
  switch (_c.label) {
41786
41900
  case 0:
41787
- if (!selectedHotelId || !context) return [2 /*return*/];
41901
+ if (!selectedSearchResultId || !context) return [2 /*return*/];
41902
+ if (
41903
+ (context === null || context === void 0 ? void 0 : context.type) === 'hotel' ||
41904
+ (context === null || context === void 0 ? void 0 : context.type) === 'groupTour'
41905
+ ) {
41906
+ handleFlyInToggle(true);
41907
+ }
41788
41908
  _c.label = 1;
41789
41909
  case 1:
41790
41910
  _c.trys.push([1, 6, , 7]);
@@ -41793,7 +41913,7 @@ var SearchResultsContainer = function () {
41793
41913
  apiKey: context.tideConnection.apiKey
41794
41914
  };
41795
41915
  selectedItem = results.find(function (r) {
41796
- return r.productId === selectedHotelId;
41916
+ return r.productId === selectedSearchResultId;
41797
41917
  });
41798
41918
  if (!selectedItem) {
41799
41919
  // TODO: handle this case better, show an error message to the user
@@ -41871,7 +41991,7 @@ var SearchResultsContainer = function () {
41871
41991
  };
41872
41992
  fetchPackageDetails();
41873
41993
  },
41874
- [selectedHotelId]
41994
+ [selectedSearchResultId]
41875
41995
  );
41876
41996
  React.useEffect(
41877
41997
  function () {
@@ -41896,6 +42016,7 @@ var SearchResultsContainer = function () {
41896
42016
  { tideConnection: context.tideConnection },
41897
42017
  React__default['default'].createElement(FlightResultsContainer, { isMobile: isMobile }),
41898
42018
  React__default['default'].createElement(FlyIn, {
42019
+ title: 'Select your fare',
41899
42020
  srpType: context.type,
41900
42021
  isOpen: flyInIsOpen,
41901
42022
  setIsOpen: handleFlyInToggle,
@@ -42028,7 +42149,16 @@ var SearchResultsContainer = function () {
42028
42149
  isDeparture: false
42029
42150
  })
42030
42151
  )
42031
- )
42152
+ ),
42153
+ React__default['default'].createElement(FlyIn, {
42154
+ title: ''.concat(translations.SRP.SELECT, ' ').concat(translations.SRP.ACCOMMODATION),
42155
+ srpType: context.type,
42156
+ isOpen: flyInIsOpen,
42157
+ setIsOpen: handleFlyInToggle,
42158
+ onPanelRef: function (el) {
42159
+ return (panelRef.current = el);
42160
+ }
42161
+ })
42032
42162
  )
42033
42163
  )
42034
42164
  )