@qite/tide-booking-component 1.4.70 → 1.4.71

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 (40) hide show
  1. package/build/build-cjs/index.js +717 -616
  2. package/build/build-cjs/src/search-results/store/search-results-slice.d.ts +2 -2
  3. package/build/build-cjs/src/shared/components/flyin/accommodation-flyin.d.ts +8 -0
  4. package/build/build-cjs/src/shared/components/flyin/flights-flyin.d.ts +7 -0
  5. package/build/build-cjs/src/shared/components/{flyin.d.ts → flyin/flyin.d.ts} +3 -2
  6. package/build/build-cjs/src/shared/utils/localization-util.d.ts +1 -0
  7. package/build/build-esm/index.js +703 -612
  8. package/build/build-esm/src/search-results/store/search-results-slice.d.ts +2 -2
  9. package/build/build-esm/src/shared/components/flyin/accommodation-flyin.d.ts +8 -0
  10. package/build/build-esm/src/shared/components/flyin/flights-flyin.d.ts +7 -0
  11. package/build/build-esm/src/shared/components/{flyin.d.ts → flyin/flyin.d.ts} +3 -2
  12. package/build/build-esm/src/shared/utils/localization-util.d.ts +1 -0
  13. package/package.json +2 -2
  14. package/src/qsm/components/QSMContainer/qsm-container.tsx +13 -1
  15. package/src/search-results/components/group-tour/group-tour-card.tsx +15 -1
  16. package/src/search-results/components/hotel/hotel-card.tsx +11 -8
  17. package/src/search-results/components/search-results-container/search-results-container.tsx +32 -12
  18. package/src/search-results/store/search-results-slice.ts +5 -5
  19. package/src/shared/components/flyin/accommodation-flyin.tsx +40 -0
  20. package/src/shared/components/flyin/flights-flyin.tsx +499 -0
  21. package/src/shared/components/flyin/flyin.tsx +79 -0
  22. package/src/shared/translations/ar-SA.json +2 -1
  23. package/src/shared/translations/da-DK.json +2 -1
  24. package/src/shared/translations/de-DE.json +2 -1
  25. package/src/shared/translations/en-GB.json +2 -1
  26. package/src/shared/translations/es-ES.json +2 -1
  27. package/src/shared/translations/fr-BE.json +2 -1
  28. package/src/shared/translations/fr-FR.json +2 -1
  29. package/src/shared/translations/is-IS.json +2 -1
  30. package/src/shared/translations/it-IT.json +2 -1
  31. package/src/shared/translations/ja-JP.json +2 -1
  32. package/src/shared/translations/nl-BE.json +2 -1
  33. package/src/shared/translations/nl-NL.json +2 -1
  34. package/src/shared/translations/no-NO.json +2 -1
  35. package/src/shared/translations/pl-PL.json +2 -1
  36. package/src/shared/translations/pt-PT.json +2 -1
  37. package/src/shared/translations/sv-SE.json +2 -1
  38. package/src/shared/utils/localization-util.ts +1 -1
  39. package/styles/components/_flyin.scss +10 -0
  40. 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;
@@ -32991,6 +33007,17 @@ var QSMContainer = function () {
32991
33007
  };
32992
33008
  var handleQsmTypeChange = function (value) {
32993
33009
  dispatch(setSelectedQsmType(value));
33010
+ if (value === 'groupTour') {
33011
+ handleDateChange({
33012
+ fromDate: new Date(fromDate !== null && fromDate !== void 0 ? fromDate : Date.now()),
33013
+ toDate: dateFns.addYears(new Date(fromDate !== null && fromDate !== void 0 ? fromDate : Date.now()), 1)
33014
+ });
33015
+ } else {
33016
+ handleDateChange({
33017
+ fromDate: new Date(fromDate !== null && fromDate !== void 0 ? fromDate : Date.now()),
33018
+ toDate: dateFns.addDays(new Date(fromDate !== null && fromDate !== void 0 ? fromDate : Date.now()), 7)
33019
+ });
33020
+ }
32994
33021
  };
32995
33022
  var handleSubmit = function () {
32996
33023
  if (!onSubmit) return;
@@ -33454,7 +33481,7 @@ var _a;
33454
33481
  var initialState$1 = {
33455
33482
  results: [],
33456
33483
  filteredResults: [],
33457
- selectedHotelId: null,
33484
+ selectedSearchResultId: null,
33458
33485
  selectedFlight: null,
33459
33486
  selectedFlightDetails: null,
33460
33487
  bookingPackageDetails: null,
@@ -33476,8 +33503,8 @@ var searchResultsSlice = toolkit.createSlice({
33476
33503
  setFilteredResults: function (state, action) {
33477
33504
  state.filteredResults = action.payload;
33478
33505
  },
33479
- setSelectedHotel: function (state, action) {
33480
- state.selectedHotelId = action.payload;
33506
+ setSelectedSearchResult: function (state, action) {
33507
+ state.selectedSearchResultId = action.payload;
33481
33508
  },
33482
33509
  setSelectedFlight: function (state, action) {
33483
33510
  state.selectedFlight = action.payload;
@@ -33544,7 +33571,7 @@ var searchResultsSlice = toolkit.createSlice({
33544
33571
  });
33545
33572
  var setResults = ((_a = searchResultsSlice.actions), _a.setResults),
33546
33573
  setFilteredResults = _a.setFilteredResults,
33547
- setSelectedHotel = _a.setSelectedHotel,
33574
+ setSelectedSearchResult = _a.setSelectedSearchResult,
33548
33575
  setSelectedFlight = _a.setSelectedFlight,
33549
33576
  setSelectedFlightDetails = _a.setSelectedFlightDetails,
33550
33577
  setBookingPackageDetails = _a.setBookingPackageDetails,
@@ -37011,88 +37038,40 @@ var useFlightSearch = function () {
37011
37038
  return context;
37012
37039
  };
37013
37040
 
37014
- var FlyIn = function (_a) {
37041
+ var FlightsFlyIn = function (_a) {
37015
37042
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
37016
- _a.srpType;
37017
37043
  var isOpen = _a.isOpen,
37018
- setIsOpen = _a.setIsOpen,
37019
- _p = _a.className,
37020
- className = _p === void 0 ? '' : _p,
37021
- onPanelRef = _a.onPanelRef;
37044
+ setIsOpen = _a.setIsOpen;
37022
37045
  var context = React.useContext(SearchResultsConfigurationContext);
37023
37046
  var language = (_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB';
37024
37047
  var translations = getTranslations(language);
37025
37048
  var dispatch = reactRedux.useDispatch();
37026
- var _q = useFlightSearch(),
37027
- flightSearchDetailsLoading = _q.flightSearchDetailsLoading,
37028
- flightDetailsSearchResults = _q.flightDetailsSearchResults,
37029
- onCancelSearch = _q.onCancelSearch,
37030
- numberOfTravellers = _q.numberOfTravellers;
37049
+ var _p = useFlightSearch(),
37050
+ flightSearchDetailsLoading = _p.flightSearchDetailsLoading,
37051
+ flightDetailsSearchResults = _p.flightDetailsSearchResults,
37052
+ onCancelSearch = _p.onCancelSearch,
37053
+ numberOfTravellers = _p.numberOfTravellers;
37031
37054
  var selectedFlight = reactRedux.useSelector(function (state) {
37032
37055
  return state.searchResults;
37033
37056
  }).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
- };
37057
+ var _q = React.useState([]),
37058
+ flights = _q[0],
37059
+ setFlights = _q[1];
37060
+ var _r = React.useState(undefined),
37061
+ flight = _r[0],
37062
+ setFlight = _r[1];
37063
+ var _s = React.useState([]),
37064
+ uniqueOutwardFlights = _s[0],
37065
+ setUniqueOutwardFlights = _s[1];
37066
+ var _t = React.useState(null),
37067
+ selectedOutwardFareCode = _t[0],
37068
+ setSelectedOutwardFareCode = _t[1];
37069
+ var _u = React.useState([]),
37070
+ uniqueReturnFlights = _u[0],
37071
+ setUniqueReturnFlights = _u[1];
37072
+ var _v = React.useState(null),
37073
+ selectedReturnFareCode = _v[0],
37074
+ setSelectedReturnFareCode = _v[1];
37096
37075
  React.useEffect(
37097
37076
  function () {
37098
37077
  var _a, _b, _c, _d;
@@ -37280,334 +37259,20 @@ var FlyIn = function (_a) {
37280
37259
  };
37281
37260
  // TODO: go to booking page?
37282
37261
  var handleConfirm = function () {
37283
- if (isOpen && panelRef.current) {
37262
+ if (isOpen) {
37284
37263
  onCancelSearch();
37285
37264
  setIsOpen(false);
37286
37265
  }
37287
37266
  };
37288
37267
  return React__default['default'].createElement(
37289
- 'div',
37290
- { className: 'flyin '.concat(isOpen ? 'flyin--active' : '', ' ').concat(className) },
37268
+ React__default['default'].Fragment,
37269
+ null,
37291
37270
  React__default['default'].createElement(
37292
37271
  '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' },
37272
+ { className: 'flyin__content' },
37273
+ flightSearchDetailsLoading || lodash.isEmpty(flights)
37274
+ ? React__default['default'].createElement(Spinner, null)
37275
+ : flight &&
37611
37276
  React__default['default'].createElement(
37612
37277
  'div',
37613
37278
  { className: 'flyin__content-text-row' },
@@ -37616,7 +37281,7 @@ var FlyIn = function (_a) {
37616
37281
  { className: 'flyin__content-text-icon-row' },
37617
37282
  React__default['default'].createElement('img', {
37618
37283
  src: 'https://media.tidesoftware.be/media/shared/Airlines/'.concat(
37619
- (_h = getDepartureSegment(flight.return)) === null || _h === void 0 ? void 0 : _h.marketingAirlineCode,
37284
+ (_c = getDepartureSegment(flight.outward)) === null || _c === void 0 ? void 0 : _c.marketingAirlineCode,
37620
37285
  '.png?height=256'
37621
37286
  ),
37622
37287
  alt: 'airline-logo',
@@ -37629,37 +37294,37 @@ var FlyIn = function (_a) {
37629
37294
  React__default['default'].createElement(
37630
37295
  'span',
37631
37296
  { className: 'flyin__content-text-title-row' },
37632
- React__default['default'].createElement('strong', null, translations.SRP.RETURN),
37297
+ React__default['default'].createElement('strong', null, translations.SRP.DEPARTURE),
37633
37298
  ' ',
37634
- (_j = getDepartureSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _j === void 0
37299
+ (_d = getDepartureSegment(flight === null || flight === void 0 ? void 0 : flight.outward)) === null || _d === void 0
37635
37300
  ? void 0
37636
- : _j.departureAirportCode,
37301
+ : _d.departureAirportCode,
37637
37302
  ' -',
37638
37303
  ' ',
37639
- (_k = getArrivalSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _k === void 0
37304
+ (_e = getArrivalSegment(flight === null || flight === void 0 ? void 0 : flight.outward)) === null || _e === void 0
37640
37305
  ? void 0
37641
- : _k.arrivalAirportCode
37306
+ : _e.arrivalAirportCode
37642
37307
  ),
37643
37308
  React__default['default'].createElement(
37644
37309
  'span',
37645
37310
  { className: 'flyin__content-text' },
37646
37311
  timeFromDateTime(
37647
- (_l = getDepartureSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _l === void 0
37312
+ (_f = getDepartureSegment(flight === null || flight === void 0 ? void 0 : flight.outward)) === null || _f === void 0
37648
37313
  ? void 0
37649
- : _l.departureDateTime
37314
+ : _f.departureDateTime
37650
37315
  ),
37651
37316
  ' -',
37652
37317
  ' ',
37653
37318
  timeFromDateTime(
37654
- (_m = getArrivalSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _m === void 0
37319
+ (_g = getArrivalSegment(flight === null || flight === void 0 ? void 0 : flight.outward)) === null || _g === void 0
37655
37320
  ? void 0
37656
- : _m.arrivalDateTime
37321
+ : _g.arrivalDateTime
37657
37322
  ),
37658
37323
  ' (',
37659
- durationTicksInHoursString(flight.return.durationInTicks),
37324
+ durationTicksInHoursString(flight.outward.durationInTicks),
37660
37325
  ',',
37661
37326
  ' ',
37662
- getNumberOfStopsLabel(flight.return, translations.SRP.DIRECT, translations.SRP.STOPS, translations.SRP.STOP),
37327
+ getNumberOfStopsLabel(flight.outward, translations.SRP.DIRECT, translations.SRP.STOPS, translations.SRP.STOP),
37663
37328
  '), ',
37664
37329
  numberOfTravellers,
37665
37330
  ' ',
@@ -37694,229 +37359,628 @@ var FlyIn = function (_a) {
37694
37359
  )
37695
37360
  )
37696
37361
  )
37697
- ),
37362
+ ),
37363
+ !flightSearchDetailsLoading &&
37364
+ flight &&
37365
+ React__default['default'].createElement(
37366
+ React__default['default'].Fragment,
37367
+ null,
37368
+ React__default['default'].createElement(
37369
+ 'div',
37370
+ { className: 'flyin__content-cards-wrapper' },
37698
37371
  React__default['default'].createElement(
37699
37372
  '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(
37373
+ { className: 'flyin__content-cards' },
37374
+ uniqueOutwardFlights.map(function (flightOption, index) {
37375
+ var firstSegment = lodash.first(flightOption.outward.segments);
37376
+ if (!firstSegment) return null;
37377
+ var diff = getOutwardPriceDiff(firstSegment.metaData.fareCode);
37378
+ return React__default['default'].createElement(
37379
+ 'div',
37380
+ {
37381
+ key: 'outward-flight-option-'.concat(index),
37382
+ className: 'flyin__content-card '.concat(selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : '')
37383
+ },
37384
+ React__default['default'].createElement(
37709
37385
  'div',
37710
- {
37711
- key: 'return-flight-option-'.concat(index),
37712
- className: 'flyin__content-card '.concat(selectedReturnFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : '')
37713
- },
37386
+ { className: 'flyin__content-card-top' },
37387
+ React__default['default'].createElement('span', { className: 'flyin__content-card-top-tag' }, firstSegment.metaData.fareMarketingName),
37388
+ diff !== null &&
37389
+ diff != 0 &&
37390
+ React__default['default'].createElement(
37391
+ 'span',
37392
+ {
37393
+ className: 'flyin__content-card-top-price '.concat(
37394
+ diff > 0 ? 'flyin__content-card-top-price--increase' : diff < 0 ? 'flyin__content-card-top-price--decrease' : ''
37395
+ )
37396
+ },
37397
+ diff > 0 ? '+\u20AC'.concat(diff) : '-\u20AC'.concat(Math.abs(diff))
37398
+ )
37399
+ ),
37400
+ React__default['default'].createElement(
37401
+ 'div',
37402
+ { className: 'flyin__content-card-middle' },
37714
37403
  React__default['default'].createElement(
37715
37404
  '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 &&
37405
+ { className: 'flyin__content-card-middle-rows' },
37406
+ React__default['default'].createElement(
37407
+ 'div',
37408
+ { className: 'flyin__content-card-middle-row' },
37409
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Number of travellers'),
37410
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-right' }, numberOfTravellers)
37411
+ ),
37412
+ React__default['default'].createElement(
37413
+ 'div',
37414
+ { className: 'flyin__content-card-middle-row' },
37415
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Travel class'),
37720
37416
  React__default['default'].createElement(
37721
37417
  '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))
37418
+ { className: 'flyin__content-card-middle-row-right' },
37419
+ firstSegment.metaData.fareMarketingName
37728
37420
  )
37729
- ),
37730
- React__default['default'].createElement(
37731
- 'div',
37732
- { className: 'flyin__content-card-middle' },
37421
+ ),
37733
37422
  React__default['default'].createElement(
37734
37423
  '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'),
37424
+ { className: 'flyin__content-card-middle-row' },
37425
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Booking class'),
37426
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.bookingClassCode)
37427
+ ),
37428
+ React__default['default'].createElement(
37429
+ 'div',
37430
+ { className: 'flyin__content-card-middle-row' },
37431
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Fare basis'),
37432
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.metaData.fareCode)
37433
+ ),
37434
+ React__default['default'].createElement(
37435
+ 'div',
37436
+ { className: 'flyin__content-data' },
37437
+ firstSegment.metaData.luggageCarryOn &&
37746
37438
  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 &&
37439
+ 'div',
37440
+ { className: 'flyin__content-data__item' },
37768
37441
  React__default['default'].createElement(
37769
37442
  'div',
37770
- { className: 'flyin__content-data__item' },
37443
+ { className: 'flyin__content-data__item-icon' },
37444
+ React__default['default'].createElement(Icon, { name: 'ui-bag', width: 20, 'aria-hidden': 'true' })
37445
+ ),
37446
+ React__default['default'].createElement(
37447
+ 'div',
37448
+ { className: 'flyin__content-data__item-content' },
37449
+ React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Carry-on luggage'),
37771
37450
  React__default['default'].createElement(
37772
37451
  'div',
37773
- { className: 'flyin__content-data__item-icon' },
37774
- React__default['default'].createElement(Icon, { name: 'ui-bag', width: 20, 'aria-hidden': 'true' })
37775
- ),
37452
+ { className: 'flyin__content-data__item-content-description' },
37453
+ firstSegment.metaData.luggageCarryOn.text
37454
+ )
37455
+ )
37456
+ ),
37457
+ firstSegment.metaData.luggageChecked &&
37458
+ React__default['default'].createElement(
37459
+ 'div',
37460
+ { className: 'flyin__content-data__item' },
37461
+ React__default['default'].createElement(
37462
+ 'div',
37463
+ { className: 'flyin__content-data__item-icon' },
37464
+ React__default['default'].createElement(Icon, { name: 'ui-suitcase', width: 20 })
37465
+ ),
37466
+ React__default['default'].createElement(
37467
+ 'div',
37468
+ { className: 'flyin__content-data__item-content' },
37469
+ React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Checked luggage'),
37776
37470
  React__default['default'].createElement(
37777
37471
  '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
- )
37472
+ { className: 'flyin__content-data__item-content-description' },
37473
+ firstSegment.metaData.luggageChecked.text
37785
37474
  )
37475
+ )
37476
+ ),
37477
+ firstSegment.metaData.seatSelection &&
37478
+ React__default['default'].createElement(
37479
+ 'div',
37480
+ { className: 'flyin__content-data__item' },
37481
+ React__default['default'].createElement(
37482
+ 'div',
37483
+ { className: 'flyin__content-data__item-icon' },
37484
+ React__default['default'].createElement(Icon, { name: 'ui-seat', width: 20 })
37786
37485
  ),
37787
- firstSegment.metaData.luggageChecked &&
37788
37486
  React__default['default'].createElement(
37789
37487
  'div',
37790
- { className: 'flyin__content-data__item' },
37488
+ { className: 'flyin__content-data__item-content' },
37489
+ React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Seat selection'),
37791
37490
  React__default['default'].createElement(
37792
37491
  'div',
37793
- { className: 'flyin__content-data__item-icon' },
37794
- React__default['default'].createElement(Icon, { name: 'ui-suitcase', width: 20 })
37795
- ),
37492
+ { className: 'flyin__content-data__item-content-description' },
37493
+ firstSegment.metaData.seatSelection.text
37494
+ )
37495
+ )
37496
+ ),
37497
+ firstSegment.metaData.cancel &&
37498
+ React__default['default'].createElement(
37499
+ 'div',
37500
+ { className: 'flyin__content-data__item' },
37501
+ React__default['default'].createElement(
37502
+ 'div',
37503
+ { className: 'flyin__content-data__item-icon' },
37504
+ React__default['default'].createElement(Icon, { name: 'ui-refund', width: 20 })
37505
+ ),
37506
+ React__default['default'].createElement(
37507
+ 'div',
37508
+ { className: 'flyin__content-data__item-content' },
37509
+ React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Refund'),
37796
37510
  React__default['default'].createElement(
37797
37511
  '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
- )
37512
+ { className: 'flyin__content-data__item-content-description' },
37513
+ firstSegment.metaData.cancel.text
37805
37514
  )
37515
+ )
37516
+ ),
37517
+ firstSegment.metaData.other &&
37518
+ React__default['default'].createElement(
37519
+ 'div',
37520
+ { className: 'flyin__content-data__item' },
37521
+ React__default['default'].createElement(
37522
+ 'div',
37523
+ { className: 'flyin__content-data__item-icon flyin__content-data__item-icon--other' },
37524
+ React__default['default'].createElement(Icon, { name: 'ui-else', width: 20 })
37806
37525
  ),
37807
- firstSegment.metaData.seatSelection &&
37808
37526
  React__default['default'].createElement(
37809
37527
  'div',
37810
- { className: 'flyin__content-data__item' },
37528
+ { className: 'flyin__content-data__item-content' },
37529
+ React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Other'),
37811
37530
  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
- ),
37531
+ 'ul',
37532
+ { className: 'flyin__content-data__item-content-description flyin__content-data__item-content-description--list' },
37533
+ firstSegment.metaData.other.map(function (other, index) {
37534
+ return React__default['default'].createElement('li', { key: 'other-'.concat(index) }, other.text);
37535
+ })
37536
+ )
37537
+ )
37538
+ )
37539
+ )
37540
+ )
37541
+ ),
37542
+ React__default['default'].createElement(
37543
+ 'div',
37544
+ {
37545
+ className: 'flyin__content-card-button',
37546
+ onClick: function () {
37547
+ var _a, _b, _c;
37548
+ var fareCode =
37549
+ (_c =
37550
+ (_b = (_a = flightOption.outward.segments) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0
37551
+ ? void 0
37552
+ : _b.metaData) === null || _c === void 0
37553
+ ? void 0
37554
+ : _c.fareCode;
37555
+ setSelectedOutwardFareCode(fareCode !== null && fareCode !== void 0 ? fareCode : null);
37556
+ }
37557
+ },
37558
+ React__default['default'].createElement(
37559
+ 'div',
37560
+ { className: 'cta '.concat(selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'cta--selected' : '') },
37561
+ ' ',
37562
+ selectedOutwardFareCode === firstSegment.metaData.fareCode ? 'Selected' : 'Select'
37563
+ )
37564
+ )
37565
+ );
37566
+ })
37567
+ )
37568
+ ),
37569
+ React__default['default'].createElement(
37570
+ 'div',
37571
+ { className: 'flyin__content' },
37572
+ React__default['default'].createElement(
37573
+ 'div',
37574
+ { className: 'flyin__content-text-row' },
37575
+ React__default['default'].createElement(
37576
+ 'div',
37577
+ { className: 'flyin__content-text-icon-row' },
37578
+ React__default['default'].createElement('img', {
37579
+ src: 'https://media.tidesoftware.be/media/shared/Airlines/'.concat(
37580
+ (_h = getDepartureSegment(flight.return)) === null || _h === void 0 ? void 0 : _h.marketingAirlineCode,
37581
+ '.png?height=256'
37582
+ ),
37583
+ alt: 'airline-logo',
37584
+ className: 'logo',
37585
+ 'aria-hidden': 'true'
37586
+ }),
37587
+ React__default['default'].createElement(
37588
+ 'div',
37589
+ { className: 'flyin__content-text-col' },
37590
+ React__default['default'].createElement(
37591
+ 'span',
37592
+ { className: 'flyin__content-text-title-row' },
37593
+ React__default['default'].createElement('strong', null, translations.SRP.RETURN),
37594
+ ' ',
37595
+ (_j = getDepartureSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _j === void 0
37596
+ ? void 0
37597
+ : _j.departureAirportCode,
37598
+ ' -',
37599
+ ' ',
37600
+ (_k = getArrivalSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _k === void 0
37601
+ ? void 0
37602
+ : _k.arrivalAirportCode
37603
+ ),
37604
+ React__default['default'].createElement(
37605
+ 'span',
37606
+ { className: 'flyin__content-text' },
37607
+ timeFromDateTime(
37608
+ (_l = getDepartureSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _l === void 0
37609
+ ? void 0
37610
+ : _l.departureDateTime
37611
+ ),
37612
+ ' -',
37613
+ ' ',
37614
+ timeFromDateTime(
37615
+ (_m = getArrivalSegment(flight === null || flight === void 0 ? void 0 : flight.return)) === null || _m === void 0
37616
+ ? void 0
37617
+ : _m.arrivalDateTime
37618
+ ),
37619
+ ' (',
37620
+ durationTicksInHoursString(flight.return.durationInTicks),
37621
+ ',',
37622
+ ' ',
37623
+ getNumberOfStopsLabel(flight.return, translations.SRP.DIRECT, translations.SRP.STOPS, translations.SRP.STOP),
37624
+ '), ',
37625
+ numberOfTravellers,
37626
+ ' ',
37627
+ 'travellers'
37628
+ )
37629
+ )
37630
+ ),
37631
+ React__default['default'].createElement(
37632
+ 'div',
37633
+ { className: 'flyin__content-arrow-row' },
37634
+ React__default['default'].createElement(
37635
+ 'div',
37636
+ { className: 'flyin__content-arrow is-disabled', 'aria-disabled': 'true' },
37637
+ React__default['default'].createElement(Icon, {
37638
+ name: 'ui-arrow',
37639
+ className: 'flyin__content-arrow-icon',
37640
+ width: 16,
37641
+ height: 16,
37642
+ 'aria-hidden': 'true'
37643
+ })
37644
+ ),
37645
+ React__default['default'].createElement(
37646
+ 'div',
37647
+ { className: 'flyin__content-arrow' },
37648
+ React__default['default'].createElement(Icon, {
37649
+ name: 'ui-arrow',
37650
+ className: 'flyin__content-arrow-icon flyin__content-arrow-icon--forward',
37651
+ width: 16,
37652
+ height: 16,
37653
+ 'aria-hidden': 'true'
37654
+ })
37655
+ )
37656
+ )
37657
+ )
37658
+ ),
37659
+ React__default['default'].createElement(
37660
+ 'div',
37661
+ { className: 'flyin__content-cards-wrapper' },
37662
+ React__default['default'].createElement(
37663
+ 'div',
37664
+ { className: 'flyin__content-cards' },
37665
+ uniqueReturnFlights.map(function (flightOption, index) {
37666
+ var firstSegment = lodash.first(flightOption.return.segments);
37667
+ if (!firstSegment) return null;
37668
+ var diff = getReturnPriceDiff(firstSegment.metaData.fareCode);
37669
+ return React__default['default'].createElement(
37670
+ 'div',
37671
+ {
37672
+ key: 'return-flight-option-'.concat(index),
37673
+ className: 'flyin__content-card '.concat(selectedReturnFareCode === firstSegment.metaData.fareCode ? 'flyin__content-card--selected' : '')
37674
+ },
37675
+ React__default['default'].createElement(
37676
+ 'div',
37677
+ { className: 'flyin__content-card-top' },
37678
+ React__default['default'].createElement('span', { className: 'flyin__content-card-top-tag' }, firstSegment.metaData.fareMarketingName),
37679
+ diff !== null &&
37680
+ diff != 0 &&
37681
+ React__default['default'].createElement(
37682
+ 'span',
37683
+ {
37684
+ className: 'flyin__content-card-top-price '.concat(
37685
+ diff > 0 ? 'flyin__content-card-top-price--increase' : diff < 0 ? 'flyin__content-card-top-price--decrease' : ''
37686
+ )
37687
+ },
37688
+ diff > 0 ? '+\u20AC'.concat(diff) : '-\u20AC'.concat(Math.abs(diff))
37689
+ )
37690
+ ),
37691
+ React__default['default'].createElement(
37692
+ 'div',
37693
+ { className: 'flyin__content-card-middle' },
37694
+ React__default['default'].createElement(
37695
+ 'div',
37696
+ { className: 'flyin__content-card-middle-rows' },
37697
+ React__default['default'].createElement(
37698
+ 'div',
37699
+ { className: 'flyin__content-card-middle-row' },
37700
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Number of travellers'),
37701
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-right' }, numberOfTravellers)
37702
+ ),
37703
+ React__default['default'].createElement(
37704
+ 'div',
37705
+ { className: 'flyin__content-card-middle-row' },
37706
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Travel class'),
37707
+ React__default['default'].createElement(
37708
+ 'span',
37709
+ { className: 'flyin__content-card-middle-row-right' },
37710
+ firstSegment.metaData.fareMarketingName
37711
+ )
37712
+ ),
37713
+ React__default['default'].createElement(
37714
+ 'div',
37715
+ { className: 'flyin__content-card-middle-row' },
37716
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Booking class'),
37717
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.bookingClassCode)
37718
+ ),
37719
+ React__default['default'].createElement(
37720
+ 'div',
37721
+ { className: 'flyin__content-card-middle-row' },
37722
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-left' }, 'Fare basis'),
37723
+ React__default['default'].createElement('span', { className: 'flyin__content-card-middle-row-right' }, firstSegment.metaData.fareCode)
37724
+ ),
37725
+ React__default['default'].createElement(
37726
+ 'div',
37727
+ { className: 'flyin__content-data' },
37728
+ firstSegment.metaData.luggageCarryOn &&
37729
+ React__default['default'].createElement(
37730
+ 'div',
37731
+ { className: 'flyin__content-data__item' },
37732
+ React__default['default'].createElement(
37733
+ 'div',
37734
+ { className: 'flyin__content-data__item-icon' },
37735
+ React__default['default'].createElement(Icon, { name: 'ui-bag', width: 20, 'aria-hidden': 'true' })
37736
+ ),
37737
+ React__default['default'].createElement(
37738
+ 'div',
37739
+ { className: 'flyin__content-data__item-content' },
37740
+ React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Carry-on luggage'),
37816
37741
  React__default['default'].createElement(
37817
37742
  '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
- )
37743
+ { className: 'flyin__content-data__item-content-description' },
37744
+ firstSegment.metaData.luggageCarryOn.text
37825
37745
  )
37746
+ )
37747
+ ),
37748
+ firstSegment.metaData.luggageChecked &&
37749
+ React__default['default'].createElement(
37750
+ 'div',
37751
+ { className: 'flyin__content-data__item' },
37752
+ React__default['default'].createElement(
37753
+ 'div',
37754
+ { className: 'flyin__content-data__item-icon' },
37755
+ React__default['default'].createElement(Icon, { name: 'ui-suitcase', width: 20 })
37826
37756
  ),
37827
- firstSegment.metaData.cancel &&
37828
37757
  React__default['default'].createElement(
37829
37758
  'div',
37830
- { className: 'flyin__content-data__item' },
37759
+ { className: 'flyin__content-data__item-content' },
37760
+ React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Checked luggage'),
37831
37761
  React__default['default'].createElement(
37832
37762
  'div',
37833
- { className: 'flyin__content-data__item-icon' },
37834
- React__default['default'].createElement(Icon, { name: 'ui-refund', width: 20 })
37835
- ),
37763
+ { className: 'flyin__content-data__item-content-description' },
37764
+ firstSegment.metaData.luggageChecked.text
37765
+ )
37766
+ )
37767
+ ),
37768
+ firstSegment.metaData.seatSelection &&
37769
+ React__default['default'].createElement(
37770
+ 'div',
37771
+ { className: 'flyin__content-data__item' },
37772
+ React__default['default'].createElement(
37773
+ 'div',
37774
+ { className: 'flyin__content-data__item-icon' },
37775
+ React__default['default'].createElement(Icon, { name: 'ui-seat', width: 20 })
37776
+ ),
37777
+ React__default['default'].createElement(
37778
+ 'div',
37779
+ { className: 'flyin__content-data__item-content' },
37780
+ React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Seat selection'),
37836
37781
  React__default['default'].createElement(
37837
37782
  '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
- )
37783
+ { className: 'flyin__content-data__item-content-description' },
37784
+ firstSegment.metaData.seatSelection.text
37845
37785
  )
37786
+ )
37787
+ ),
37788
+ firstSegment.metaData.cancel &&
37789
+ React__default['default'].createElement(
37790
+ 'div',
37791
+ { className: 'flyin__content-data__item' },
37792
+ React__default['default'].createElement(
37793
+ 'div',
37794
+ { className: 'flyin__content-data__item-icon' },
37795
+ React__default['default'].createElement(Icon, { name: 'ui-refund', width: 20 })
37846
37796
  ),
37847
- firstSegment.metaData.other &&
37848
37797
  React__default['default'].createElement(
37849
37798
  'div',
37850
- { className: 'flyin__content-data__item' },
37799
+ { className: 'flyin__content-data__item-content' },
37800
+ React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Refund'),
37851
37801
  React__default['default'].createElement(
37852
37802
  '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
- ),
37803
+ { className: 'flyin__content-data__item-content-description' },
37804
+ firstSegment.metaData.cancel.text
37805
+ )
37806
+ )
37807
+ ),
37808
+ firstSegment.metaData.other &&
37809
+ React__default['default'].createElement(
37810
+ 'div',
37811
+ { className: 'flyin__content-data__item' },
37812
+ React__default['default'].createElement(
37813
+ 'div',
37814
+ { className: 'flyin__content-data__item-icon flyin__content-data__item-icon--other' },
37815
+ React__default['default'].createElement(Icon, { name: 'ui-else', width: 20 })
37816
+ ),
37817
+ React__default['default'].createElement(
37818
+ 'div',
37819
+ { className: 'flyin__content-data__item-content' },
37820
+ React__default['default'].createElement('div', { className: 'flyin__content-data__item-content-title' }, 'Other'),
37856
37821
  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
- )
37822
+ 'ul',
37823
+ { className: 'flyin__content-data__item-content-description flyin__content-data__item-content-description--list' },
37824
+ firstSegment.metaData.other.map(function (other, index) {
37825
+ return React__default['default'].createElement('li', { key: 'other-'.concat(index) }, other.text);
37826
+ })
37867
37827
  )
37868
37828
  )
37869
- )
37829
+ )
37870
37830
  )
37871
- ),
37831
+ )
37832
+ ),
37833
+ React__default['default'].createElement(
37834
+ 'div',
37835
+ {
37836
+ className: 'flyin__content-card-button',
37837
+ onClick: function () {
37838
+ var _a, _b, _c;
37839
+ var fareCode =
37840
+ (_c =
37841
+ (_b = (_a = flightOption.return.segments) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0
37842
+ ? void 0
37843
+ : _b.metaData) === null || _c === void 0
37844
+ ? void 0
37845
+ : _c.fareCode;
37846
+ setSelectedReturnFareCode(fareCode !== null && fareCode !== void 0 ? fareCode : null);
37847
+ }
37848
+ },
37872
37849
  React__default['default'].createElement(
37873
37850
  '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
- )
37851
+ { className: 'cta '.concat(selectedReturnFareCode === firstSegment.metaData.fareCode ? 'cta--selected' : '') },
37852
+ ' ',
37853
+ selectedReturnFareCode === firstSegment.metaData.fareCode ? 'Selected' : 'Select'
37894
37854
  )
37895
- );
37896
- })
37897
- )
37855
+ )
37856
+ );
37857
+ })
37898
37858
  )
37859
+ )
37860
+ ),
37861
+ !flightSearchDetailsLoading &&
37862
+ React__default['default'].createElement(
37863
+ 'div',
37864
+ { className: 'flyin__footer' },
37865
+ React__default['default'].createElement(
37866
+ 'div',
37867
+ { className: 'flyin__footer__price' },
37868
+ 'Total price: \u20AC',
37869
+ (_o = selectedCombinationFlight === null || selectedCombinationFlight === void 0 ? void 0 : selectedCombinationFlight.price) === null || _o === void 0
37870
+ ? void 0
37871
+ : _o.toFixed(2)
37899
37872
  ),
37900
- selectedCombinationFlight &&
37901
- !flightSearchDetailsLoading &&
37902
37873
  React__default['default'].createElement(
37903
37874
  '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
- ),
37875
+ { className: 'flyin__button-wrapper' },
37876
+ React__default['default'].createElement('button', { className: 'cta cta--select', onClick: handleConfirm }, translations.PRODUCT.BOOK_NOW)
37877
+ )
37878
+ )
37879
+ );
37880
+ };
37881
+
37882
+ var AccommodationFlyIn = function (_a) {
37883
+ var _b;
37884
+ _a.isLoading;
37885
+ _a.isOpen;
37886
+ _a.setIsOpen;
37887
+ var context = React.useContext(SearchResultsConfigurationContext);
37888
+ var language = (_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB';
37889
+ getTranslations(language);
37890
+ reactRedux.useSelector(function (state) {
37891
+ return state.searchResults;
37892
+ }).selectedSearchResultId;
37893
+ return React__default['default'].createElement(
37894
+ React__default['default'].Fragment,
37895
+ null,
37896
+ React__default['default'].createElement('div', { className: 'flyin__content' }, 'TODO')
37897
+ );
37898
+ };
37899
+
37900
+ var FlyIn = function (_a) {
37901
+ var title = _a.title,
37902
+ srpType = _a.srpType,
37903
+ isOpen = _a.isOpen,
37904
+ setIsOpen = _a.setIsOpen,
37905
+ _b = _a.className,
37906
+ className = _b === void 0 ? '' : _b,
37907
+ onPanelRef = _a.onPanelRef;
37908
+ var dispatch = reactRedux.useDispatch();
37909
+ var onCancelSearch = useFlightSearch().onCancelSearch;
37910
+ var panelRef = React.useRef(null);
37911
+ // expose DOM node if needed
37912
+ React.useEffect(
37913
+ function () {
37914
+ onPanelRef === null || onPanelRef === void 0 ? void 0 : onPanelRef(panelRef.current);
37915
+ return function () {
37916
+ return onPanelRef === null || onPanelRef === void 0 ? void 0 : onPanelRef(null);
37917
+ };
37918
+ },
37919
+ [onPanelRef]
37920
+ );
37921
+ React.useEffect(
37922
+ function () {
37923
+ // click outside detection
37924
+ var handleClickOutside = function (event) {
37925
+ if (isOpen && panelRef.current && !panelRef.current.contains(event.target)) {
37926
+ handleClose();
37927
+ }
37928
+ };
37929
+ document.addEventListener('mousedown', handleClickOutside);
37930
+ return function () {
37931
+ return document.removeEventListener('mousedown', handleClickOutside);
37932
+ };
37933
+ },
37934
+ [isOpen, setIsOpen]
37935
+ );
37936
+ // body scroll lock
37937
+ React.useEffect(
37938
+ function () {
37939
+ document.body.style.overflow = isOpen ? 'hidden' : '';
37940
+ return function () {
37941
+ document.body.style.overflow = '';
37942
+ };
37943
+ },
37944
+ [isOpen]
37945
+ );
37946
+ var handleClose = function () {
37947
+ if (isOpen && panelRef.current) {
37948
+ if (srpType === 'flight') {
37949
+ dispatch(setSelectedFlight(null));
37950
+ dispatch(setSelectedFlightDetails(null));
37951
+ onCancelSearch();
37952
+ }
37953
+ setIsOpen(false);
37954
+ }
37955
+ };
37956
+ return React__default['default'].createElement(
37957
+ 'div',
37958
+ { className: 'flyin '.concat(isOpen ? 'flyin--active' : '', ' ').concat(className) },
37959
+ React__default['default'].createElement(
37960
+ 'div',
37961
+ { className: 'flyin__panel '.concat(isOpen ? 'flyin__panel--active' : ''), ref: panelRef },
37962
+ React__default['default'].createElement(
37963
+ 'div',
37964
+ { className: 'flyin__content' },
37965
+ React__default['default'].createElement(
37966
+ 'div',
37967
+ { className: 'flyin__content-title-row' },
37968
+ React__default['default'].createElement('h3', { className: 'flyin__content-title' }, title),
37914
37969
  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)
37970
+ 'span',
37971
+ {
37972
+ className: 'flyin__close',
37973
+ onClick: function () {
37974
+ return handleClose();
37975
+ }
37976
+ },
37977
+ React__default['default'].createElement(Icon, { name: 'ui-close', width: 30, height: 30, 'aria-hidden': 'true' })
37918
37978
  )
37919
37979
  )
37980
+ ),
37981
+ srpType === 'flight' && React__default['default'].createElement(FlightsFlyIn, { isOpen: isOpen, setIsOpen: setIsOpen }),
37982
+ (srpType === 'hotel' || srpType === 'groupTour') &&
37983
+ React__default['default'].createElement(AccommodationFlyIn, { isLoading: true, isOpen: isOpen, setIsOpen: setIsOpen })
37920
37984
  )
37921
37985
  );
37922
37986
  };
@@ -37925,11 +37989,11 @@ var HotelCard = function (_a) {
37925
37989
  var result = _a.result,
37926
37990
  translations = _a.translations;
37927
37991
  var dispatch = reactRedux.useDispatch();
37928
- var selectedHotelId = reactRedux.useSelector(function (state) {
37992
+ var selectedSearchResultId = reactRedux.useSelector(function (state) {
37929
37993
  return state.searchResults;
37930
- }).selectedHotelId;
37931
- var handleChange = function (hotelProductId) {
37932
- dispatch(setSelectedHotel(hotelProductId));
37994
+ }).selectedSearchResultId;
37995
+ var handleChange = function (productId) {
37996
+ dispatch(setSelectedSearchResult(productId));
37933
37997
  };
37934
37998
  return React__default['default'].createElement(
37935
37999
  'div',
@@ -38014,23 +38078,18 @@ var HotelCard = function (_a) {
38014
38078
  'button',
38015
38079
  {
38016
38080
  type: 'button',
38017
- className: 'cta '.concat(selectedHotelId === result.id ? 'cta--selected' : 'cta--select'),
38081
+ className: 'cta '.concat(selectedSearchResultId === result.id ? 'cta--selected' : 'cta--select'),
38018
38082
  onClick: function () {
38019
38083
  return handleChange(result.id);
38020
38084
  }
38021
38085
  },
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
38086
+ selectedSearchResultId === result.id
38087
+ ? translations === null || translations === void 0
38088
+ ? void 0
38089
+ : translations.SHARED.SELECTED
38090
+ : translations === null || translations === void 0
38091
+ ? void 0
38092
+ : translations.SHARED.SELECT
38034
38093
  )
38035
38094
  )
38036
38095
  )
@@ -41206,7 +41265,11 @@ var GroupTourCard = function (_a) {
41206
41265
  var _b;
41207
41266
  var result = _a.result,
41208
41267
  languageCode = _a.languageCode;
41268
+ var dispatch = reactRedux.useDispatch();
41209
41269
  var translations = getTranslations(languageCode !== null && languageCode !== void 0 ? languageCode : 'en-GB');
41270
+ var selectedSearchResultId = reactRedux.useSelector(function (state) {
41271
+ return state.searchResults;
41272
+ }).selectedSearchResultId;
41210
41273
  var genders = ((_b = result.allotment) === null || _b === void 0 ? void 0 : _b.travellerGenders) || [];
41211
41274
  var maleCount = genders.filter(function (g) {
41212
41275
  return g === 0;
@@ -41217,6 +41280,9 @@ var GroupTourCard = function (_a) {
41217
41280
  var otherCount = genders.filter(function (g) {
41218
41281
  return g === 2;
41219
41282
  }).length;
41283
+ var handleChange = function (productId) {
41284
+ dispatch(setSelectedSearchResult(productId));
41285
+ };
41220
41286
  return React__default['default'].createElement(
41221
41287
  'div',
41222
41288
  { className: 'search__result-card' },
@@ -41321,7 +41387,23 @@ var GroupTourCard = function (_a) {
41321
41387
  translations.PRODUCT.PER_PERSON
41322
41388
  )
41323
41389
  ),
41324
- React__default['default'].createElement('button', { className: 'cta cta--select' }, 'Bekijk reis')
41390
+ React__default['default'].createElement(
41391
+ 'button',
41392
+ {
41393
+ type: 'button',
41394
+ className: 'cta '.concat(selectedSearchResultId === result.productId ? 'cta--selected' : 'cta--select'),
41395
+ onClick: function () {
41396
+ return handleChange(result.productId);
41397
+ }
41398
+ },
41399
+ selectedSearchResultId === result.productId
41400
+ ? translations === null || translations === void 0
41401
+ ? void 0
41402
+ : translations.SHARED.SELECTED
41403
+ : translations === null || translations === void 0
41404
+ ? void 0
41405
+ : translations.SHARED.SELECT
41406
+ )
41325
41407
  )
41326
41408
  )
41327
41409
  );
@@ -41440,7 +41522,7 @@ var SearchResultsContainer = function () {
41440
41522
  isLoading = _b.isLoading,
41441
41523
  filters = _b.filters,
41442
41524
  sortKey = _b.sortKey,
41443
- selectedHotelId = _b.selectedHotelId,
41525
+ selectedSearchResultId = _b.selectedSearchResultId,
41444
41526
  flyInIsOpen = _b.flyInIsOpen;
41445
41527
  var isMobile = useMediaQuery('(max-width: 1200px)');
41446
41528
  var _c = React.useState(false),
@@ -41617,6 +41699,7 @@ var SearchResultsContainer = function () {
41617
41699
  productTagIds: tagId ? [tagId] : []
41618
41700
  }
41619
41701
  };
41702
+ console.log('Built search request from query params', searchRequest);
41620
41703
  return searchRequest;
41621
41704
  };
41622
41705
  var getRequestRoomsFromEntry = function (rooms) {
@@ -41663,7 +41746,7 @@ var SearchResultsContainer = function () {
41663
41746
  var room = { index: i, pax: [] };
41664
41747
  lodash.range(0, x.adults).forEach(function () {
41665
41748
  room.pax.push({
41666
- age: 30
41749
+ age: Math.floor(Math.random() * 100)
41667
41750
  });
41668
41751
  });
41669
41752
  x.childAges.forEach(function (x) {
@@ -41743,10 +41826,12 @@ var SearchResultsContainer = function () {
41743
41826
  return r.productId === (entry === null || entry === void 0 ? void 0 : entry.id);
41744
41827
  });
41745
41828
  if (matching) {
41746
- dispatch(setSelectedHotel(matching.productId));
41829
+ dispatch(setSelectedSearchResult(matching.productId));
41747
41830
  }
41748
41831
  } else {
41749
- dispatch(setSelectedHotel((_b = packageSearchResults[0]) === null || _b === void 0 ? void 0 : _b.productId));
41832
+ if (context.type === 'hotel-flight') {
41833
+ dispatch(setSelectedSearchResult((_b = packageSearchResults[0]) === null || _b === void 0 ? void 0 : _b.productId));
41834
+ }
41750
41835
  }
41751
41836
  }
41752
41837
  dispatch(setIsLoading(false));
@@ -41784,7 +41869,13 @@ var SearchResultsContainer = function () {
41784
41869
  return __generator(this, function (_c) {
41785
41870
  switch (_c.label) {
41786
41871
  case 0:
41787
- if (!selectedHotelId || !context) return [2 /*return*/];
41872
+ if (!selectedSearchResultId || !context) return [2 /*return*/];
41873
+ if (
41874
+ (context === null || context === void 0 ? void 0 : context.type) === 'hotel' ||
41875
+ (context === null || context === void 0 ? void 0 : context.type) === 'groupTour'
41876
+ ) {
41877
+ handleFlyInToggle(true);
41878
+ }
41788
41879
  _c.label = 1;
41789
41880
  case 1:
41790
41881
  _c.trys.push([1, 6, , 7]);
@@ -41793,7 +41884,7 @@ var SearchResultsContainer = function () {
41793
41884
  apiKey: context.tideConnection.apiKey
41794
41885
  };
41795
41886
  selectedItem = results.find(function (r) {
41796
- return r.productId === selectedHotelId;
41887
+ return r.productId === selectedSearchResultId;
41797
41888
  });
41798
41889
  if (!selectedItem) {
41799
41890
  // TODO: handle this case better, show an error message to the user
@@ -41871,7 +41962,7 @@ var SearchResultsContainer = function () {
41871
41962
  };
41872
41963
  fetchPackageDetails();
41873
41964
  },
41874
- [selectedHotelId]
41965
+ [selectedSearchResultId]
41875
41966
  );
41876
41967
  React.useEffect(
41877
41968
  function () {
@@ -41896,6 +41987,7 @@ var SearchResultsContainer = function () {
41896
41987
  { tideConnection: context.tideConnection },
41897
41988
  React__default['default'].createElement(FlightResultsContainer, { isMobile: isMobile }),
41898
41989
  React__default['default'].createElement(FlyIn, {
41990
+ title: 'Select your fare',
41899
41991
  srpType: context.type,
41900
41992
  isOpen: flyInIsOpen,
41901
41993
  setIsOpen: handleFlyInToggle,
@@ -42028,7 +42120,16 @@ var SearchResultsContainer = function () {
42028
42120
  isDeparture: false
42029
42121
  })
42030
42122
  )
42031
- )
42123
+ ),
42124
+ React__default['default'].createElement(FlyIn, {
42125
+ title: ''.concat(translations.SRP.SELECT, ' ').concat(translations.SRP.ACCOMMODATION),
42126
+ srpType: context.type,
42127
+ isOpen: flyInIsOpen,
42128
+ setIsOpen: handleFlyInToggle,
42129
+ onPanelRef: function (el) {
42130
+ return (panelRef.current = el);
42131
+ }
42132
+ })
42032
42133
  )
42033
42134
  )
42034
42135
  )