@qite/tide-booking-component 1.4.102 → 1.4.104

package/build/build-cjs/index.js

@@ -579,6 +579,8 @@ var QSM$g = {
   GROUP_TOUR: 'جولة جماعية'
 };
 var SRP$f = {
+  SHOW_MORE: 'عرض المزيد',
+  SHOW_LESS: 'عرض أقل',
   NO_RESULTS: 'لم يتم العثور على نتائج.',
   TOTAL_RESULTS_LABEL: 'تم العثور على باقات',
   RESET: 'إعادة تعيين',
@@ -983,6 +985,8 @@ var QSM$f = {
   GROUP_TOUR: 'Grupperejse'
 };
 var SRP$e = {
+  SHOW_MORE: 'Vis flere',
+  SHOW_LESS: 'Vis færre',
   NO_RESULTS: 'Ingen resultater fundet.',
   TOTAL_RESULTS_LABEL: 'Fundne pakker',
   RESET: 'Nulstil',
@@ -1388,6 +1392,8 @@ var QSM$e = {
   GROUP_TOUR: 'Gruppentour'
 };
 var SRP$d = {
+  SHOW_MORE: 'Mehr anzeigen',
+  SHOW_LESS: 'Weniger anzeigen',
   NO_RESULTS: 'Keine Ergebnisse gefunden.',
   TOTAL_RESULTS_LABEL: 'Gefundene Pakete',
   RESET: 'Zurücksetzen',
@@ -1796,6 +1802,8 @@ var QSM$d = {
   GROUP_TOUR: 'Group tour'
 };
 var SRP$c = {
+  SHOW_MORE: 'Show more',
+  SHOW_LESS: 'Show less',
   NO_RESULTS: 'No results found.',
   TOTAL_RESULTS_LABEL: 'Packages found',
   RESET: 'Reset',
@@ -2201,6 +2209,8 @@ var QSM$c = {
   GROUP_TOUR: 'Tour grupal'
 };
 var SRP$b = {
+  SHOW_MORE: 'Mostrar más',
+  SHOW_LESS: 'Mostrar menos',
   NO_RESULTS: 'No se han encontrado resultados.',
   TOTAL_RESULTS_LABEL: 'Paquetes encontrados',
   RESET: 'Restablecer',
@@ -2610,6 +2620,8 @@ var QSM$b = {
   GROUP_TOUR: 'Tour en groupe'
 };
 var SRP$a = {
+  SHOW_MORE: 'Afficher plus',
+  SHOW_LESS: 'Afficher moins',
   NO_RESULTS: 'Aucun résultat trouvé.',
   TOTAL_RESULTS_LABEL: 'Forfaits trouvés',
   RESET: 'Réinitialiser',
@@ -3014,6 +3026,8 @@ var QSM$a = {
   GROUP_TOUR: 'Tour en groupe'
 };
 var SRP$9 = {
+  SHOW_MORE: 'Afficher plus',
+  SHOW_LESS: 'Afficher moins',
   NO_RESULTS: 'Aucun résultat trouvé.',
   TOTAL_RESULTS_LABEL: 'Forfaits trouvés',
   RESET: 'Réinitialiser',
@@ -3418,6 +3432,8 @@ var QSM$9 = {
   GROUP_TOUR: 'Ferð í hóp'
 };
 var SRP$8 = {
+  SHOW_MORE: 'Sýna meira',
+  SHOW_LESS: 'Sýna minna',
   NO_RESULTS: 'Engar niðurstöður fundust.',
   TOTAL_RESULTS_LABEL: 'Fundnar pakkar',
   RESET: 'Endurstilla',
@@ -3823,6 +3839,8 @@ var QSM$8 = {
   GROUP_TOUR: 'Tour di gruppo'
 };
 var SRP$7 = {
+  SHOW_MORE: 'Mostra di più',
+  SHOW_LESS: 'Mostra di meno',
   NO_RESULTS: 'Nessun risultato trovato.',
   TOTAL_RESULTS_LABEL: 'Pacchetti trovati',
   RESET: 'Reimposta',
@@ -4232,6 +4250,8 @@ var QSM$7 = {
   GROUP_TOUR: 'Groepsreis'
 };
 var SRP$6 = {
+  SHOW_MORE: 'Toon meer',
+  SHOW_LESS: 'Toon minder',
   NO_RESULTS: 'Geen resultaten gevonden.',
   TOTAL_RESULTS_LABEL: 'Gevonden pakketten',
   RESET: 'Resetten',
@@ -4637,6 +4657,8 @@ var QSM$6 = {
   GROUP_TOUR: 'Groepsreis'
 };
 var SRP$5 = {
+  SHOW_MORE: 'Toon meer',
+  SHOW_LESS: 'Toon minder',
   NO_RESULTS: 'Geen resultaten gevonden.',
   TOTAL_RESULTS_LABEL: 'Gevonden pakketten',
   RESET: 'Resetten',
@@ -5042,6 +5064,8 @@ var QSM$5 = {
   GROUP_TOUR: 'Gruppetur'
 };
 var SRP$4 = {
+  SHOW_MORE: 'Vis mer',
+  SHOW_LESS: 'Vis mindre',
   NO_RESULTS: 'Ingen resultater funnet.',
   TOTAL_RESULTS_LABEL: 'Fant pakker',
   RESET: 'Tilbakestill',
@@ -5447,6 +5471,8 @@ var QSM$4 = {
   GROUP_TOUR: 'Tour w grupie'
 };
 var SRP$3 = {
+  SHOW_MORE: 'Pokaż więcej',
+  SHOW_LESS: 'Pokaż mniej',
   NO_RESULTS: 'Nie znaleziono wyników.',
   TOTAL_RESULTS_LABEL: 'Znalezione pakiety',
   RESET: 'Resetuj',
@@ -5852,6 +5878,8 @@ var QSM$3 = {
   GROUP_TOUR: 'Tour em grupo'
 };
 var SRP$2 = {
+  SHOW_MORE: 'Mostrar mais',
+  SHOW_LESS: 'Mostrar menos',
   NO_RESULTS: 'Nenhum resultado encontrado.',
   TOTAL_RESULTS_LABEL: 'Pacotes encontrados',
   RESET: 'Redefinir',
@@ -6257,6 +6285,8 @@ var QSM$2 = {
   GROUP_TOUR: 'Gruppresa'
 };
 var SRP$1 = {
+  SHOW_MORE: 'Visa mer',
+  SHOW_LESS: 'Visa mindre',
   NO_RESULTS: 'Inga resultat hittades.',
   TOTAL_RESULTS_LABEL: 'Hittade paket',
   RESET: 'Återställ',
@@ -6660,6 +6690,8 @@ var QSM$1 = {
   GROUP_TOUR: 'グループツアー'
 };
 var SRP = {
+  SHOW_MORE: 'もっと見る',
+  SHOW_LESS: '閉じる',
   NO_RESULTS: '結果が見つかりませんでした。',
   TOTAL_RESULTS_LABEL: '見つかったパッケージ',
   RESET: 'リセット',
@@ -6866,8 +6898,8 @@ var timeFromDateTime = function (dateTime) {
     return '';
   }
   var date = new Date(dateTime);
-  var hours = date.getHours();
-  var minutes = date.getMinutes();
+  var hours = date.getUTCHours();
+  var minutes = date.getUTCMinutes();
   return ''
     .concat(hours, ':')
     .concat(minutes < 10 ? '0' : '')
@@ -21724,7 +21756,11 @@ var FlightOptionsForm = function () {
     setFlightGroups = _f[1];
   var handleSubmit = function (e) {
     if (settings.skipRouter) {
-      dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
+      if (settings.roomOptions.isHidden) {
+        dispatch(setCurrentStep(OPTIONS_FORM_STEP));
+      } else {
+        dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
+      }
     } else {
       if (settings.roomOptions.isHidden) {
         navigate(
@@ -33825,21 +33861,28 @@ var initialState$1 = {
   packagingAccoSearchDetails: [],
   selectedPackagingAccoResultCode: null,
   packagingFlightResults: [],
+  filteredPackagingFlightResults: [],
   selectedPackagingFlight: null,
+  selectedOutwardKey: null,
+  selectedReturnKey: null,
   selectedFlight: null,
   selectedFlightDetails: null,
   bookingPackageDetails: null,
+  priceDetails: null,
   isLoading: false,
   flightsLoading: false,
-  filters: [],
   selectedSortType: null,
+  selectedFlightSortType: null,
+  initialFilters: [],
+  filters: [],
+  initialFlightFilters: [],
+  flightFilters: [],
   activeTab: 'compact',
   currentPage: 1,
+  transactionId: null,
   flyInIsOpen: false,
+  flyInType: null,
   editablePackagingEntry: null,
-  transactionId: null,
-  accommodationFlyInStep: 'details',
-  priceDetails: null,
   itinerary: null
 };
 var searchResultsSlice = toolkit.createSlice({
@@ -33870,6 +33913,9 @@ var searchResultsSlice = toolkit.createSlice({
     setPackagingFlightResults: function (state, action) {
       state.packagingFlightResults = action.payload;
     },
+    setFilteredPackagingFlightResults: function (state, action) {
+      state.filteredPackagingFlightResults = action.payload;
+    },
     setSelectedPackagingFlight: function (state, action) {
       state.selectedPackagingFlight = action.payload;
     },
@@ -33898,6 +33944,9 @@ var searchResultsSlice = toolkit.createSlice({
     setFlightsLoading: function (state, action) {
       state.flightsLoading = action.payload;
     },
+    setInitialFilters: function (state, action) {
+      state.initialFilters = action.payload;
+    },
     setFilters: function (state, action) {
       var updatedFilters = action.payload;
       updatedFilters.forEach(function (updatedFilter) {
@@ -33914,9 +33963,31 @@ var searchResultsSlice = toolkit.createSlice({
     resetFilters: function (state, action) {
       state.filters = action.payload;
     },
+    setInitialFlightFilters: function (state, action) {
+      state.initialFlightFilters = action.payload;
+    },
+    setFlightFilters: function (state, action) {
+      var updatedFilters = action.payload;
+      updatedFilters.forEach(function (updatedFilter) {
+        var existingIndex = state.flightFilters.findIndex(function (f) {
+          return f.property === updatedFilter.property;
+        });
+        if (existingIndex !== -1) {
+          state.flightFilters[existingIndex] = updatedFilter;
+        } else {
+          state.flightFilters.push(updatedFilter); // Optional: Add new filters if not present
+        }
+      });
+    },
+    resetFlightFilters: function (state, action) {
+      state.flightFilters = action.payload;
+    },
     setSortType: function (state, action) {
       state.selectedSortType = action.payload;
     },
+    setFlightSortType: function (state, action) {
+      state.selectedFlightSortType = action.payload;
+    },
     setActiveTab: function (state, action) {
       state.activeTab = action.payload;
     },
@@ -33940,14 +34011,24 @@ var searchResultsSlice = toolkit.createSlice({
     setTransactionId: function (state, action) {
       state.transactionId = action.payload;
     },
-    setAccommodationFlyInStep: function (state, action) {
-      state.accommodationFlyInStep = action.payload;
+    setFlyInType: function (state, action) {
+      state.flyInType = action.payload;
     },
     setPriceDetails: function (state, action) {
       state.priceDetails = action.payload;
     },
     setItinerary: function (state, action) {
       state.itinerary = action.payload;
+    },
+    setSelectedOutwardKey: function (state, action) {
+      state.selectedOutwardKey = action.payload;
+    },
+    setSelectedReturnKey: function (state, action) {
+      state.selectedReturnKey = action.payload;
+    },
+    resetFlightSelection: function (state) {
+      state.selectedOutwardKey = null;
+      state.selectedReturnKey = null;
     }
   }
 });
@@ -33956,6 +34037,7 @@ var setResults = ((_a = searchResultsSlice.actions), _a.setResults),
   setSelectedSearchResult = _a.setSelectedSearchResult,
   setPackagingAccoResults = _a.setPackagingAccoResults,
   setFilteredPackagingAccoResults = _a.setFilteredPackagingAccoResults,
+  setFilteredPackagingFlightResults = _a.setFilteredPackagingFlightResults,
   setPackagingAccoSearchDetails = _a.setPackagingAccoSearchDetails,
   setSelectedPackagingAccoResult = _a.setSelectedPackagingAccoResult,
   setPackagingFlightResults = _a.setPackagingFlightResults,
@@ -33966,18 +34048,26 @@ var setResults = ((_a = searchResultsSlice.actions), _a.setResults),
 _a.selectFlight;
 var setIsLoading = _a.setIsLoading,
   setFlightsLoading = _a.setFlightsLoading,
+  setInitialFilters = _a.setInitialFilters,
   setFilters = _a.setFilters,
   resetFilters = _a.resetFilters,
+  setInitialFlightFilters = _a.setInitialFlightFilters,
+  setFlightFilters = _a.setFlightFilters,
+  resetFlightFilters = _a.resetFlightFilters,
   setSortType = _a.setSortType,
+  setFlightSortType = _a.setFlightSortType,
   setActiveTab = _a.setActiveTab;
 _a.setCurrentPage;
 _a.resetSearchState;
 var setFlyInIsOpen = _a.setFlyInIsOpen,
   setEditablePackagingEntry = _a.setEditablePackagingEntry,
   setTransactionId = _a.setTransactionId,
-  setAccommodationFlyInStep = _a.setAccommodationFlyInStep,
+  setFlyInType = _a.setFlyInType,
   setPriceDetails = _a.setPriceDetails,
-  setItinerary = _a.setItinerary;
+  setItinerary = _a.setItinerary,
+  setSelectedOutwardKey = _a.setSelectedOutwardKey,
+  setSelectedReturnKey = _a.setSelectedReturnKey;
+_a.resetFlightSelection;
 var searchResultsReducer = searchResultsSlice.reducer;
 
 var ItemPicker = function (_a) {
@@ -34242,7 +34332,7 @@ var Icon$1 = function (_a) {
         title && React__default['default'].createElement('title', null, title),
         React__default['default'].createElement('path', {
           d: 'M32 32c17.7 0 32 14.3 32 32l0 256 224 0 0-160c0-17.7 14.3-32 32-32l224 0c53 0 96 43 96 96l0 224c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-32-224 0-32 0L64 416l0 32c0 17.7-14.3 32-32 32s-32-14.3-32-32L0 64C0 46.3 14.3 32 32 32zm144 96a80 80 0 1 1 0 160 80 80 0 1 1 0-160z',
-          fill: 'currentColor'
+          fill: fill !== null && fill !== void 0 ? fill : 'currentColor'
         })
       );
     case 'ui-utensils':
@@ -43605,7 +43695,7 @@ var mapPackagingAccoResult = function (searchResult, cmsItem, languageCode, tran
     contents: searchResult.contents
   });
 };
-var renderHotelResults = function (results, context, activeTab, translations) {
+var renderHotelResults = function (results, context, activeTab, translations, selectedPackagingAccoResult, isFlyIn) {
   var renderedResults = results.map(function (result, index) {
     var _a;
     var key = ''.concat((_a = result.id) !== null && _a !== void 0 ? _a : result.code, '-').concat(index);
@@ -43620,13 +43710,22 @@ var renderHotelResults = function (results, context, activeTab, translations) {
   return React__default['default'].createElement(
     'div',
     { className: 'search__results__cards '.concat(activeTab ? 'search__results__cards--'.concat(activeTab) : '') },
+    selectedPackagingAccoResult &&
+      !isFlyIn &&
+      React__default['default'].createElement(HotelCard, {
+        key: selectedPackagingAccoResult.code,
+        result: selectedPackagingAccoResult,
+        translations: translations
+      }),
     renderedResults
   );
 };
 var HotelAccommodationResults = function (_a) {
   var _b, _c;
-  var isLoading = _a.isLoading;
+  var isLoading = _a.isLoading,
+    isFlyIn = _a.isFlyIn;
   var context = React.useContext(SearchResultsConfigurationContext);
+  var dispatch = reactRedux.useDispatch();
   if (!context) {
     return null;
   }
@@ -43636,7 +43735,10 @@ var HotelAccommodationResults = function (_a) {
     }),
     filteredResults = _d.filteredResults,
     filteredPackagingAccoResults = _d.filteredPackagingAccoResults,
+    packagingAccoResults = _d.packagingAccoResults,
     activeTab = _d.activeTab;
+  _d.flyInIsOpen;
+  var selectedPackagingAccoResultCode = _d.selectedPackagingAccoResultCode;
   var cmsMap = React__default['default'].useMemo(
     function () {
       var _a;
@@ -43699,57 +43801,971 @@ var HotelAccommodationResults = function (_a) {
       : firstPackagingResult.fromDate;
   var firstResultDay = firstResultDate ? dateFns.format(dateFns.parseISO(firstResultDate), 'd') : null;
   var firstResultMonth = firstResultDate ? dateFns.format(dateFns.parseISO(firstResultDate), 'MMM') : null;
-  if (isLoading) {
-    return React__default['default'].createElement(
-      React__default['default'].Fragment,
-      null,
-      (_c = context.customSpinner) !== null && _c !== void 0 ? _c : React__default['default'].createElement(Spinner, null)
-    );
-  }
-  if (mappedResults.length === 0) {
-    return React__default['default'].createElement('div', { className: 'no-results' }, translations.SRP.NO_RESULTS);
-  }
+  var selectedPackagingAccoResult = React__default['default'].useMemo(
+    function () {
+      var selectedResult = packagingAccoResults.find(function (result) {
+        return result.code === selectedPackagingAccoResultCode;
+      });
+      if (selectedResult) {
+        return mapPackagingAccoResult(selectedResult, cmsMap.get(selectedResult.code), context.languageCode, translations);
+      }
+    },
+    [packagingAccoResults, selectedPackagingAccoResultCode, cmsMap, context.languageCode, translations]
+  );
+  var visibleResults = React__default['default'].useMemo(
+    function () {
+      var shouldShowAll =
+        (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) !== build.PortalQsmType.AccommodationAndFlight || isFlyIn;
+      if (shouldShowAll) {
+        return mappedResults;
+      }
+      if (selectedPackagingAccoResult) {
+        return mappedResults
+          .filter(function (result) {
+            return result.code !== selectedPackagingAccoResult.code;
+          })
+          .slice(0, 2);
+      }
+      return mappedResults.slice(0, 3);
+    },
+    [context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType, mappedResults, isFlyIn, selectedPackagingAccoResult]
+  );
+  var handleShowMoreHotels = function (flyInType) {
+    dispatch(setFlyInType(flyInType));
+    dispatch(setFlyInIsOpen(true));
+  };
   return React__default['default'].createElement(
     React__default['default'].Fragment,
     null,
+    !isFlyIn &&
+      React__default['default'].createElement(
+        'div',
+        { className: 'search__results__label search__results__label--secondary' },
+        React__default['default'].createElement(
+          'div',
+          { className: 'search__results__label__date' },
+          firstResultDay && firstResultMonth
+            ? React__default['default'].createElement(
+                React__default['default'].Fragment,
+                null,
+                React__default['default'].createElement('p', { className: 'search__results__label__date-date' }, firstResultDay),
+                React__default['default'].createElement('p', null, firstResultMonth)
+              )
+            : React__default['default'].createElement(Icon$1, { name: 'ui-bed', height: 16, fill: 'white' })
+        ),
+        React__default['default'].createElement(
+          'div',
+          { className: 'search__results__label__text' },
+          React__default['default'].createElement(
+            'h3',
+            null,
+            translations.SRP.SELECT,
+            ' ',
+            React__default['default'].createElement('strong', null, translations.SRP.ACCOMMODATION)
+          )
+        )
+      ),
+    isLoading
+      ? React__default['default'].createElement(
+          React__default['default'].Fragment,
+          null,
+          (_c = context.customSpinner) !== null && _c !== void 0 ? _c : React__default['default'].createElement(Spinner, null)
+        )
+      : renderHotelResults(visibleResults, context, activeTab, translations, selectedPackagingAccoResult, isFlyIn),
+    packagingAccoResults.length > 3 &&
+      !isFlyIn &&
+      React__default['default'].createElement(
+        'div',
+        { className: 'search__results__cards__actions' },
+        React__default['default'].createElement(
+          'button',
+          {
+            className: 'cta cta--secondary',
+            onClick: function () {
+              return handleShowMoreHotels('acco-results');
+            }
+          },
+          translations.SRP.SHOW_MORE
+        )
+      ),
+    mappedResults.length === 0 && !isLoading && React__default['default'].createElement('div', { className: 'no-results' }, translations.SRP.NO_RESULTS)
+  );
+};
+
+var selectSearchResultsState = function (state) {
+  return state.searchResults;
+};
+var selectPackagingFlightResults = toolkit.createSelector([selectSearchResultsState], function (state) {
+  return state.packagingFlightResults;
+});
+var selectFilteredPackagingFlightResults = toolkit.createSelector([selectSearchResultsState], function (state) {
+  return state.filteredPackagingFlightResults;
+});
+var selectSelectedOutwardKey = toolkit.createSelector([selectSearchResultsState], function (state) {
+  return state.selectedOutwardKey;
+});
+var selectSelectedReturnKey = toolkit.createSelector([selectSearchResultsState], function (state) {
+  return state.selectedReturnKey;
+});
+var selectUniqueOutwardFlights = toolkit.createSelector([selectFilteredPackagingFlightResults], function (packagingFlightResults) {
+  var map = new Map();
+  packagingFlightResults.forEach(function (flight) {
+    var key = getFlightKey(flight.outward.segments);
+    if (!map.has(key)) {
+      map.set(key, flight);
+    }
+  });
+  return Array.from(map.values());
+});
+var selectUniqueReturnFlights = toolkit.createSelector(
+  [selectFilteredPackagingFlightResults, selectSelectedOutwardKey],
+  function (packagingFlightResults, selectedOutwardKey) {
+    if (!selectedOutwardKey) return [];
+    var matchingCombinations = packagingFlightResults.filter(function (flight) {
+      return getFlightKey(flight.outward.segments) === selectedOutwardKey;
+    });
+    var map = new Map();
+    matchingCombinations.forEach(function (flight) {
+      var key = getFlightKey(flight.return.segments);
+      if (!map.has(key)) {
+        map.set(key, flight);
+      }
+    });
+    return Array.from(map.values());
+  }
+);
+var selectSelectedOutward = toolkit.createSelector(
+  [selectPackagingFlightResults, selectSelectedOutwardKey],
+  function (packagingFlightResults, selectedOutwardKey) {
+    var _a;
+    if (!selectedOutwardKey) return null;
+    return (_a = packagingFlightResults.find(function (flight) {
+      return getFlightKey(flight.outward.segments) === selectedOutwardKey;
+    })) !== null && _a !== void 0
+      ? _a
+      : null;
+  }
+);
+var selectSelectedReturn = toolkit.createSelector(
+  [selectPackagingFlightResults, selectSelectedReturnKey],
+  function (packagingFlightResults, selectedReturnKey) {
+    var _a;
+    if (!selectedReturnKey) return null;
+    return (_a = packagingFlightResults.find(function (flight) {
+      return getFlightKey(flight.return.segments) === selectedReturnKey;
+    })) !== null && _a !== void 0
+      ? _a
+      : null;
+  }
+);
+var selectSelectedCombinationFlight = toolkit.createSelector(
+  [selectPackagingFlightResults, selectSelectedOutwardKey, selectSelectedReturnKey],
+  function (packagingFlightResults, selectedOutwardKey, selectedReturnKey) {
+    var _a;
+    if (!selectedOutwardKey || !selectedReturnKey) return null;
+    return (_a = packagingFlightResults.find(function (flight) {
+      return getFlightKey(flight.outward.segments) === selectedOutwardKey && getFlightKey(flight.return.segments) === selectedReturnKey;
+    })) !== null && _a !== void 0
+      ? _a
+      : null;
+  }
+);
+
+var IndependentFlightOption = function (_a) {
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+  var item = _a.item,
+    onSelect = _a.onSelect,
+    guid = _a.guid,
+    selectedGuid = _a.selectedGuid,
+    isOutward = _a.isOutward,
+    showSelectedState = _a.showSelectedState,
+    currentSelectedPrice = _a.currentSelectedPrice,
+    price = _a.price;
+  var context = React.useContext(SearchResultsConfigurationContext);
+  var language = (_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB';
+  var translations = getTranslations(language);
+  var _p = React.useState(false),
+    detailsOpen = _p[0],
+    setDetailsOpen = _p[1];
+  var priceDifference = price && currentSelectedPrice ? price - currentSelectedPrice : null;
+  return React__default['default'].createElement(
+    'div',
+    { className: 'search__result-card', key: 'flight-'.concat(item.code) },
     React__default['default'].createElement(
       'div',
-      { className: 'search__results__label search__results__label--secondary' },
+      { className: 'flight '.concat(showSelectedState && selectedGuid === guid ? 'flight--selected' : '') },
       React__default['default'].createElement(
         'div',
-        { className: 'search__results__label__date' },
-        React__default['default'].createElement('p', { className: 'search__results__label__date-date' }, firstResultDay),
-        React__default['default'].createElement('p', null, firstResultMonth)
+        { className: 'flight__option' },
+        React__default['default'].createElement(
+          'div',
+          { className: 'flight__content' },
+          React__default['default'].createElement(
+            'div',
+            { className: 'flight__flights' },
+            React__default['default'].createElement(
+              'div',
+              { className: 'flight__flight' },
+              React__default['default'].createElement(
+                'div',
+                { className: 'flight__flight__header' },
+                React__default['default'].createElement('div', { className: 'flight__status__container' }),
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'flight__price' },
+                  price != null &&
+                    price > 0 &&
+                    (isOutward
+                      ? React__default['default'].createElement(
+                          'span',
+                          { className: 'price' },
+                          translations.QSM.ROUNDTRIP + ' ' + translations.SRP.PRICE,
+                          '\u00A0',
+                          formatPrice$2(
+                            price,
+                            'EUR',
+                            (_c = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _c !== void 0 ? _c : 'en-GB'
+                          )
+                        )
+                      : priceDifference != null &&
+                        Math.abs(priceDifference) > 0 &&
+                        React__default['default'].createElement(
+                          'span',
+                          { className: 'price' },
+                          priceDifference > 0 ? '+' : '-',
+                          '\u00A0',
+                          formatPrice$2(
+                            Math.abs(priceDifference),
+                            'EUR',
+                            (_d = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _d !== void 0 ? _d : 'en-GB'
+                          )
+                        )),
+                  React__default['default'].createElement(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'cta '.concat(selectedGuid === guid ? 'cta--selected' : 'cta--select'),
+                      onClick: function () {
+                        return onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+                      }
+                    },
+                    selectedGuid === guid ? 'Selected' : 'Select'
+                  )
+                )
+              )
+            ),
+            React__default['default'].createElement(
+              'div',
+              { className: 'flight__flight' },
+              React__default['default'].createElement(
+                'div',
+                { className: 'flight__flight__container' },
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'flight__flight__wrapper' },
+                  React__default['default'].createElement(
+                    'div',
+                    { className: 'flight__logo__wrapper' },
+                    React__default['default'].createElement('img', {
+                      src: 'https://media.tidesoftware.be/media/shared/Airlines/'.concat(
+                        (_e = getDepartureSegment(item)) === null || _e === void 0 ? void 0 : _e.marketingAirlineCode,
+                        '.png?height=256'
+                      ),
+                      alt: '',
+                      className: 'flight__logo'
+                    }),
+                    React__default['default'].createElement(
+                      'span',
+                      null,
+                      (_f = getDepartureSegment(item)) === null || _f === void 0 ? void 0 : _f.marketingAirlineName
+                    )
+                  ),
+                  React__default['default'].createElement(
+                    'div',
+                    { className: 'flight__info' },
+                    React__default['default'].createElement(
+                      'div',
+                      { className: 'flight__info__times' },
+                      React__default['default'].createElement(
+                        'strong',
+                        null,
+                        timeFromDateTime((_g = getDepartureSegment(item)) === null || _g === void 0 ? void 0 : _g.departureDateTime),
+                        ' ',
+                        (_h = getDepartureSegment(item)) === null || _h === void 0 ? void 0 : _h.departureAirportCode
+                      ),
+                      React__default['default'].createElement(
+                        'p',
+                        null,
+                        longFormatDate((_j = getDepartureSegment(item)) === null || _j === void 0 ? void 0 : _j.departureDateTime, language)
+                      )
+                    ),
+                    React__default['default'].createElement(
+                      'div',
+                      { className: 'flight__info__duration' },
+                      React__default['default'].createElement('p', null, durationTicksInHoursString(item.durationInTicks)),
+                      React__default['default'].createElement(
+                        'div',
+                        { className: 'flight__info__duration__stops' },
+                        React__default['default'].createElement('div', { className: 'flight__info__duration__stop' })
+                      ),
+                      React__default['default'].createElement(
+                        'span',
+                        null,
+                        getNumberOfStopsLabel(item, translations.SRP.DIRECT, translations.SRP.STOPS, translations.SRP.STOP)
+                      )
+                    ),
+                    React__default['default'].createElement(
+                      'div',
+                      { className: 'flight__info__times flight__info__times--arrival' },
+                      React__default['default'].createElement(
+                        'strong',
+                        null,
+                        timeFromDateTime((_k = getArrivalSegment(item)) === null || _k === void 0 ? void 0 : _k.arrivalDateTime),
+                        ' ',
+                        (_l = getArrivalSegment(item)) === null || _l === void 0 ? void 0 : _l.arrivalAirportCode
+                      ),
+                      React__default['default'].createElement(
+                        'p',
+                        null,
+                        longFormatDate((_m = getArrivalSegment(item)) === null || _m === void 0 ? void 0 : _m.arrivalDateTime, language)
+                      )
+                    )
+                  )
+                ),
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'flight__detail__btn__wrapper' },
+                  React__default['default'].createElement(
+                    'div',
+                    {
+                      className: 'flight__detail__btn '.concat(detailsOpen ? 'flight__detail__btn--active' : ''),
+                      onClick: function () {
+                        return setDetailsOpen(function (prev) {
+                          return !prev;
+                        });
+                      }
+                    },
+                    React__default['default'].createElement(Icon$1, { name: 'ui-chevron', className: 'flight__detail__btn__arrow', width: 16, height: 16 })
+                  )
+                )
+              ),
+              React__default['default'].createElement(
+                'div',
+                { className: 'flight__detail '.concat(detailsOpen ? 'flight__detail--active' : '') },
+                (_o = getFlightSegments(item)) === null || _o === void 0
+                  ? void 0
+                  : _o.map(function (segment, index) {
+                      return React__default['default'].createElement(
+                        React__default['default'].Fragment,
+                        { key: 'outward-segment-'.concat(index, '-').concat(segment.flightNumber) },
+                        React__default['default'].createElement(
+                          'div',
+                          { className: 'flight__info' },
+                          React__default['default'].createElement(
+                            'div',
+                            { className: 'flight__info__times__wrapper' },
+                            React__default['default'].createElement(
+                              'div',
+                              { className: 'flight__info__times' },
+                              React__default['default'].createElement('p', null, timeFromDateTime(segment.departureDateTime)),
+                              React__default['default'].createElement('strong', null, segment.departureAirportCode),
+                              React__default['default'].createElement('p', null, longFormatDate(segment.departureDateTime, language))
+                            ),
+                            React__default['default'].createElement(
+                              'div',
+                              null,
+                              React__default['default'].createElement(Icon$1, { name: 'ui-plane-depart', width: 30, height: 20 })
+                            )
+                          ),
+                          React__default['default'].createElement(
+                            'div',
+                            { className: 'flight__info__duration' },
+                            React__default['default'].createElement('p', null, durationTicksInHoursString(segment.durationInTicks)),
+                            React__default['default'].createElement('div', { className: 'flight__info__duration__stops' }),
+                            React__default['default'].createElement('span', null, segment.marketingAirlineName),
+                            React__default['default'].createElement('strong', null, segment.operatingFlightNumber)
+                          ),
+                          React__default['default'].createElement(
+                            'div',
+                            { className: 'flight__info__times__wrapper flight__info__times__wrapper--arrival' },
+                            React__default['default'].createElement(
+                              'div',
+                              null,
+                              React__default['default'].createElement(Icon$1, { name: 'ui-plane-arrive', width: 30, height: 20 })
+                            ),
+                            React__default['default'].createElement(
+                              'div',
+                              { className: 'flight__info__times flight__info__times--arrival' },
+                              React__default['default'].createElement('p', null, timeFromDateTime(segment.arrivalDateTime)),
+                              React__default['default'].createElement('strong', null, segment.arrivalAirportCode),
+                              React__default['default'].createElement('p', null, longFormatDate(segment.arrivalDateTime, language))
+                            )
+                          )
+                        ),
+                        segment.transferTimeInTicks &&
+                          React__default['default'].createElement(
+                            'div',
+                            { className: 'flight__info' },
+                            React__default['default'].createElement('div', { className: 'flight__info__times' }),
+                            React__default['default'].createElement(
+                              'div',
+                              { className: 'flight__info__duration flight__info__duration--waittime' },
+                              React__default['default'].createElement(
+                                'div',
+                                { className: 'flight__info__duration__stops flight__info__duration__stops--stoptime' },
+                                React__default['default'].createElement(Icon$1, { name: 'ui-clock', width: 24, height: 24 })
+                              ),
+                              React__default['default'].createElement(
+                                'div',
+                                { className: 'flight__info__duration__stoptime' },
+                                React__default['default'].createElement('span', null, 'Stop time'),
+                                React__default['default'].createElement('strong', null, durationTicksInHoursString(segment.transferTimeInTicks))
+                              )
+                            ),
+                            React__default['default'].createElement('div', { className: 'flight__info__times flight__info__times--arrival' })
+                          )
+                      );
+                    })
+              )
+            )
+          )
+        )
+      )
+    )
+  );
+};
+
+var MultiRangeFilter = function (_a) {
+  var min = _a.min,
+    max = _a.max,
+    selectedMin = _a.selectedMin,
+    selectedMax = _a.selectedMax,
+    valueFormatter = _a.valueFormatter,
+    onChange = _a.onChange;
+  var _b = React.useState(false),
+    isDragging = _b[0],
+    setIsDragging = _b[1];
+  var _c = React.useState(0),
+    leftPercentage = _c[0],
+    setLeftPercentage = _c[1];
+  var _d = React.useState(0),
+    rightPercentage = _d[0],
+    setRightPercentage = _d[1];
+  var _e = React.useState(selectedMin !== null && selectedMin !== void 0 ? selectedMin : min),
+    minVal = _e[0],
+    setMinVal = _e[1];
+  var _f = React.useState(selectedMax !== null && selectedMax !== void 0 ? selectedMax : max),
+    maxVal = _f[0],
+    setMaxVal = _f[1];
+  var minGap = 5;
+  // Sync internal state with external selectedMin/selectedMax changes
+  React.useEffect(
+    function () {
+      setMinVal(selectedMin !== null && selectedMin !== void 0 ? selectedMin : min);
+      setMaxVal(selectedMax !== null && selectedMax !== void 0 ? selectedMax : max);
+    },
+    [min, max, selectedMin, selectedMax]
+  );
+  // Recalculate slider track whenever values change
+  React.useEffect(
+    function () {
+      var range = max - min || 1;
+      var minPercent = ((minVal - min) / range) * 100;
+      var maxPercent = ((maxVal - min) / range) * 100;
+      setLeftPercentage(minPercent);
+      setRightPercentage(100 - maxPercent);
+    },
+    [minVal, maxVal, min, max]
+  );
+  var slideMin = function (e) {
+    var value = parseInt(e.target.value, 10);
+    // Ensure the thumbs don’t cross and enforce minGap
+    if (value <= maxVal - minGap) {
+      setMinVal(value);
+    }
+  };
+  var slideMax = function (e) {
+    var value = parseInt(e.target.value, 10);
+    // Ensure the thumbs don’t cross and enforce minGap
+    if (value >= minVal + minGap) {
+      setMaxVal(value);
+    }
+  };
+  var startDrag = function () {
+    setIsDragging(true);
+  };
+  var stopDrag = function () {
+    setIsDragging(false);
+    // Notify parent with the final values
+    onChange(minVal, maxVal);
+  };
+  return React__default['default'].createElement(
+    'div',
+    { className: 'double-slider-box' },
+    React__default['default'].createElement(
+      'div',
+      { className: 'input-box' },
+      React__default['default'].createElement('div', { className: 'min-box' }, valueFormatter(minVal)),
+      React__default['default'].createElement('div', { className: 'max-box' }, valueFormatter(maxVal))
+    ),
+    React__default['default'].createElement(
+      'div',
+      { className: 'range-slider' },
+      React__default['default'].createElement('div', {
+        className: 'slider-track',
+        style: { left: ''.concat(leftPercentage, '%'), right: ''.concat(rightPercentage, '%') }
+      }),
+      React__default['default'].createElement('input', {
+        type: 'range',
+        min: min,
+        max: max,
+        value: minVal,
+        onChange: slideMin,
+        onMouseDown: startDrag,
+        onMouseUp: stopDrag,
+        onTouchStart: startDrag,
+        onTouchEnd: stopDrag,
+        className: 'min-val'
+      }),
+      React__default['default'].createElement('input', {
+        type: 'range',
+        min: min,
+        max: max,
+        value: maxVal,
+        onChange: slideMax,
+        onMouseDown: startDrag,
+        onMouseUp: stopDrag,
+        onTouchStart: startDrag,
+        onTouchEnd: stopDrag,
+        className: 'max-val'
+      }),
+      isDragging && React__default['default'].createElement('div', { className: 'min-tooltip' }, valueFormatter(minVal)),
+      isDragging && React__default['default'].createElement('div', { className: 'max-tooltip' }, valueFormatter(maxVal))
+    )
+  );
+};
+
+var Filters = function (_a) {
+  var _b;
+  var initialFilters = _a.initialFilters,
+    filters = _a.filters,
+    isOpen = _a.isOpen,
+    handleSetIsOpen = _a.handleSetIsOpen,
+    isLoading = _a.isLoading,
+    setFilters = _a.setFilters,
+    resetFilters = _a.resetFilters;
+  var context = React.useContext(SearchResultsConfigurationContext);
+  if (!context || !context.showFilters) {
+    return null;
+  }
+  var translations = getTranslations((_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB');
+  var _c = React.useState({}),
+    visibleFilters = _c[0],
+    setVisibleFilters = _c[1];
+  var toggleFilterVisibility = function (filterId) {
+    setVisibleFilters(function (prev) {
+      var _a;
+      return __assign(__assign({}, prev), ((_a = {}), (_a[filterId] = !prev[filterId]), _a));
+    });
+  };
+  var handleCheckBoxFilter = function (filter, option) {
+    var updated = filters.map(function (f) {
+      var _a;
+      if (f.property !== filter.property) return f;
+      return __assign(__assign({}, f), {
+        options:
+          (_a = f.options) === null || _a === void 0
+            ? void 0
+            : _a.map(function (opt) {
+                return opt.value === option.value ? __assign(__assign({}, opt), { isChecked: !opt.isChecked }) : opt;
+              })
+      });
+    });
+    setFilters(updated);
+  };
+  var handleSliderChange = function (filter, newMin, newMax) {
+    var updated = filters.map(function (f) {
+      if (f.property !== filter.property) return f;
+      return __assign(__assign({}, f), { selectedMin: newMin, selectedMax: newMax });
+    });
+    setFilters(updated);
+  };
+  var handleFullReset = function () {
+    if (!isLoading) {
+      resetFilters(initialFilters);
+    }
+  };
+  return React__default['default'].createElement(
+    'div',
+    { className: 'search__filters--modal '.concat(isOpen ? 'is-open' : '') },
+    React__default['default'].createElement('div', {
+      className: 'search__filters--background',
+      onClick: function () {
+        return handleSetIsOpen();
+      }
+    }),
+    React__default['default'].createElement(
+      'button',
+      {
+        className: 'search__filters--close',
+        onClick: function () {
+          return handleSetIsOpen();
+        }
+      },
+      React__default['default'].createElement(Icon$1, { name: 'ui-close', height: 24 })
+    ),
+    React__default['default'].createElement(
+      'div',
+      { className: 'search__filters' },
+      React__default['default'].createElement(
+        'div',
+        { className: 'search__filter-row search__filter__header' },
+        React__default['default'].createElement(
+          'div',
+          { className: 'search__filter-row-flex-title' },
+          React__default['default'].createElement('p', { className: 'search__filter-small-title' }, translations.SRP.FILTERS)
+        ),
+        !isLoading &&
+          React__default['default'].createElement(
+            'a',
+            {
+              className: 'search__filter-reset',
+              onClick: function () {
+                return handleFullReset();
+              }
+            },
+            translations.SRP.RESET
+          )
       ),
+      isLoading
+        ? React__default['default'].createElement(Spinner, null)
+        : React__default['default'].createElement(
+            React__default['default'].Fragment,
+            null,
+            React__default['default'].createElement(
+              'div',
+              { className: 'search__filters__group-container' },
+              filters.map(function (filter, index) {
+                var _a, _b;
+                var isVisible = (_a = visibleFilters[filter.property]) !== null && _a !== void 0 ? _a : true;
+                return React__default['default'].createElement(
+                  'div',
+                  { key: ''.concat(filter.property, '-').concat(index), className: 'search__filter-group' },
+                  React__default['default'].createElement(
+                    'div',
+                    {
+                      className: 'search__filter-row search__filter-row--underline',
+                      onClick: function () {
+                        return toggleFilterVisibility(filter.property);
+                      },
+                      role: 'button',
+                      tabIndex: 0
+                    },
+                    React__default['default'].createElement('h6', { className: 'search__filter-large-title' }, filter.label),
+                    React__default['default'].createElement(
+                      'svg',
+                      {
+                        id: 'search-chevron-up-icon',
+                        className: 'search__filter-chevron-icon '.concat(isVisible ? 'search__filter-chevron-icon--flipped' : '', ' '),
+                        viewBox: '0 0 10 6.063',
+                        width: 10,
+                        height: 6.063
+                      },
+                      React__default['default'].createElement('path', {
+                        id: 'Path_62',
+                        'data-name': 'Path 62',
+                        d: 'M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z',
+                        transform: 'translate(-240 624)',
+                        fill: '#707070'
+                      })
+                    )
+                  ),
+                  isVisible &&
+                    filter.type === 'checkbox' &&
+                    React__default['default'].createElement(
+                      'div',
+                      { className: 'search__filter-rows' },
+                      filter.options &&
+                        filter.options.map(function (option, optionIndex) {
+                          return React__default['default'].createElement(
+                            'div',
+                            { className: 'search__filter-row search__filter-row--checkbox', key: ''.concat(option.label, '-').concat(optionIndex) },
+                            React__default['default'].createElement(
+                              'div',
+                              { className: 'checkbox' },
+                              React__default['default'].createElement(
+                                'label',
+                                { className: 'checkbox__label' },
+                                React__default['default'].createElement('input', {
+                                  type: 'checkbox',
+                                  className: 'checkbox__input checkbox__input--parent',
+                                  checked: option.isChecked,
+                                  onChange: function (e) {
+                                    return handleCheckBoxFilter(filter, option);
+                                  }
+                                }),
+                                React__default['default'].createElement('span', { className: 'radiobutton__label-text' }, option.label)
+                              )
+                            )
+                          );
+                        })
+                    ),
+                  isVisible &&
+                    filter.type === 'toggle' &&
+                    React__default['default'].createElement(
+                      'div',
+                      { className: 'search__filter-rows' },
+                      (_b = filter.options) === null || _b === void 0
+                        ? void 0
+                        : _b.map(function (option, optionIndex) {
+                            return React__default['default'].createElement(
+                              'div',
+                              { className: 'search__filter-row', key: ''.concat(option.label, '-').concat(optionIndex) },
+                              React__default['default'].createElement('span', { className: 'search__filter-toggle-label' }, option.label),
+                              React__default['default'].createElement('div', { className: 'checkbox' }),
+                              React__default['default'].createElement(
+                                'label',
+                                { className: 'checkbox__label' },
+                                React__default['default'].createElement('input', {
+                                  type: 'checkbox',
+                                  className: 'checkbox__input',
+                                  checked: option.isChecked,
+                                  onChange: function () {
+                                    return handleCheckBoxFilter(filter, option);
+                                  }
+                                })
+                              )
+                            );
+                          })
+                    ),
+                  isVisible &&
+                    filter &&
+                    filter.type === 'slider' &&
+                    (function () {
+                      var _a, _b, _c, _d;
+                      var min = (_a = filter.min) !== null && _a !== void 0 ? _a : 0;
+                      var max = (_b = filter.max) !== null && _b !== void 0 ? _b : 100;
+                      var selectedMin = (_c = filter.selectedMin) !== null && _c !== void 0 ? _c : min;
+                      var selectedMax = (_d = filter.selectedMax) !== null && _d !== void 0 ? _d : max;
+                      return React__default['default'].createElement(MultiRangeFilter, {
+                        min: min,
+                        max: max,
+                        selectedMin: selectedMin,
+                        selectedMax: selectedMax,
+                        valueFormatter: function (value) {
+                          return ''.concat(value);
+                        },
+                        onChange: function (newMin, newMax) {
+                          handleSliderChange(filter, newMin, newMax);
+                        }
+                      });
+                    })()
+                );
+              })
+            )
+          )
+    )
+  );
+};
+
+var PackageingFlightsFlyIn = function (_a) {
+  var _b;
+  _a.isOpen;
+  _a.setIsOpen;
+  var context = React.useContext(SearchResultsConfigurationContext);
+  var language = (_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB';
+  var translations = getTranslations(language);
+  var dispatch = reactRedux.useDispatch();
+  var _c = reactRedux.useSelector(function (state) {
+      return state.searchResults;
+    }),
+    flightsLoading = _c.flightsLoading,
+    initialFlightFilters = _c.initialFlightFilters,
+    flightFilters = _c.flightFilters,
+    flyInType = _c.flyInType,
+    selectedFlightSortType = _c.selectedFlightSortType;
+  var uniqueOutwardFlights = reactRedux.useSelector(selectUniqueOutwardFlights);
+  var uniqueReturnFlights = reactRedux.useSelector(selectUniqueReturnFlights);
+  var selectedOutward = reactRedux.useSelector(selectSelectedOutward);
+  var selectedReturn = reactRedux.useSelector(selectSelectedReturn);
+  var _d = React.useState(false),
+    outwardStepComplete = _d[0],
+    setOutwardStepComplete = _d[1];
+  var handleConfirm = function () {
+    if (!outwardStepComplete) {
+      setOutwardStepComplete(true);
+      dispatch(setFlyInType('flight-return-results'));
+      return;
+    } else {
+      dispatch(setFlyInType(null));
+      setOutwardStepComplete(false);
+      dispatch(setFlyInIsOpen(false));
+    }
+  };
+  var sortByTypes = [
+    { direction: 'asc', label: 'default' },
+    { direction: 'asc', label: 'price' },
+    { direction: 'desc', label: 'price' },
+    { direction: 'asc', label: 'departureTime' },
+    { direction: 'desc', label: 'departureTime' },
+    { direction: 'asc', label: 'durationInTicks' },
+    { direction: 'desc', label: 'durationInTicks' }
+  ];
+  var handleSortChange = function (newSortKey, direction) {
+    if (sortByTypes === undefined) return;
+    var newSortByType = findSortByType(sortByTypes, newSortKey, direction !== null && direction !== void 0 ? direction : 'asc');
+    if (newSortByType) {
+      dispatch(setFlightSortType(newSortByType));
+    }
+  };
+  return React__default['default'].createElement(
+    React__default['default'].Fragment,
+    null,
+    React__default['default'].createElement(
+      'div',
+      { className: 'flyin__content flyin__content--columns' },
+      flightsLoading
+        ? React__default['default'].createElement(Spinner, null)
+        : React__default['default'].createElement(
+            React__default['default'].Fragment,
+            null,
+            React__default['default'].createElement(Filters, {
+              initialFilters: initialFlightFilters,
+              filters: flightFilters,
+              isOpen: false,
+              handleSetIsOpen: function () {},
+              // handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
+              isLoading: flightsLoading,
+              setFilters: function (filters) {
+                return dispatch(setFlightFilters(filters));
+              },
+              resetFilters: function (filters) {
+                return dispatch(resetFlightFilters(filters));
+              }
+            }),
+            React__default['default'].createElement(
+              'div',
+              { className: 'search__results__wrapper' },
+              React__default['default'].createElement(
+                'div',
+                { className: 'search__result-row' },
+                React__default['default'].createElement(
+                  'span',
+                  { className: 'search__result-row-text' },
+                  (uniqueOutwardFlights === null || uniqueOutwardFlights === void 0 ? void 0 : uniqueOutwardFlights.length) && uniqueOutwardFlights.length,
+                  '\u00A0',
+                  translations.FLIGHTS_FORM.FLIGHTS_FOUND_2,
+                  '\u00A0',
+                  translations.FLIGHTS_FORM.FLIGHTS_FOUND_3
+                ),
+                sortByTypes &&
+                  sortByTypes.length > 0 &&
+                  React__default['default'].createElement(
+                    'div',
+                    { className: 'search__result-row-filter' },
+                    React__default['default'].createElement(ItemPicker, {
+                      items: sortByTypes,
+                      selection: (selectedFlightSortType === null || selectedFlightSortType === void 0 ? void 0 : selectedFlightSortType.label) || undefined,
+                      selectedSortByType: selectedFlightSortType || undefined,
+                      label: translations.SRP.SORTBY,
+                      placeholder: translations.SRP.SORTBY,
+                      classModifier: '',
+                      valueFormatter: function (value, direction) {
+                        return getSortingName(translations, findSortByType(sortByTypes, value, direction !== null && direction !== void 0 ? direction : 'asc'));
+                      },
+                      // onPick={handleSortChange}
+                      onPick: function (newSortKey, direction) {
+                        return handleSortChange(newSortKey, direction);
+                      }
+                    })
+                  )
+              ),
+              React__default['default'].createElement(
+                'div',
+                { className: 'search__results__cards search__results__cards--extended' },
+                flyInType == 'flight-outward-results' &&
+                  uniqueOutwardFlights.map(function (result) {
+                    return React__default['default'].createElement(IndependentFlightOption, {
+                      key: 'flight-'.concat(result.outwardGuid),
+                      item: result.outward,
+                      onSelect: function () {
+                        return dispatch(setSelectedOutwardKey(getFlightKey(result.outward.segments)));
+                      },
+                      guid: result.outwardGuid,
+                      isOutward: true,
+                      price: result.price,
+                      currentSelectedPrice: selectedOutward === null || selectedOutward === void 0 ? void 0 : selectedOutward.price,
+                      selectedGuid: selectedOutward === null || selectedOutward === void 0 ? void 0 : selectedOutward.outwardGuid,
+                      showSelectedState: true
+                    });
+                  }),
+                flyInType == 'flight-return-results' &&
+                  uniqueReturnFlights.map(function (result) {
+                    return React__default['default'].createElement(IndependentFlightOption, {
+                      key: 'flight-'.concat(result.outwardGuid),
+                      item: result.return,
+                      onSelect: function () {
+                        return dispatch(setSelectedReturnKey(getFlightKey(result.return.segments)));
+                      },
+                      guid: result.outwardGuid,
+                      isOutward: false,
+                      price: result.price,
+                      currentSelectedPrice: selectedReturn === null || selectedReturn === void 0 ? void 0 : selectedReturn.price,
+                      selectedGuid: selectedReturn === null || selectedReturn === void 0 ? void 0 : selectedReturn.outwardGuid,
+                      showSelectedState: true
+                    });
+                  })
+              )
+            )
+          )
+    ),
+    React__default['default'].createElement(
+      'div',
+      { className: 'flyin__footer' },
+      React__default['default'].createElement('div', { className: 'flyin__footer__price' }),
       React__default['default'].createElement(
         'div',
-        { className: 'search__results__label__text' },
+        { className: 'flyin__button-wrapper' },
         React__default['default'].createElement(
-          'h3',
-          null,
-          translations.SRP.SELECT,
-          ' ',
-          React__default['default'].createElement('strong', null, translations.SRP.ACCOMMODATION)
+          'button',
+          {
+            className: 'cta cta--select',
+            onClick: function () {
+              return handleConfirm();
+            }
+          },
+          translations.QSM.CONFIRM
         )
       )
-    ),
-    renderHotelResults(mappedResults, context, activeTab, translations)
+    )
   );
 };
 
 var FlyIn = function (_a) {
-  var title = _a.title,
-    srpType = _a.srpType,
+  var _b;
+  var srpType = _a.srpType,
     isOpen = _a.isOpen,
     setIsOpen = _a.setIsOpen,
-    _b = _a.className,
-    className = _b === void 0 ? '' : _b,
+    _c = _a.className,
+    className = _c === void 0 ? '' : _c,
     onPanelRef = _a.onPanelRef,
     detailsLoading = _a.detailsLoading,
-    accommodationStep = _a.accommodationStep,
+    flyInType = _a.flyInType,
     isPackageEditFlow = _a.isPackageEditFlow,
-    handleConfirm = _a.handleConfirm;
+    handleConfirm = _a.handleConfirm,
+    sortByTypes = _a.sortByTypes;
   var dispatch = reactRedux.useDispatch();
+  var context = React.useContext(SearchResultsConfigurationContext);
+  var language = (_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB';
+  var translations = getTranslations(language);
+  var _d = reactRedux.useSelector(function (state) {
+      return state.searchResults;
+    }),
+    isLoading = _d.isLoading,
+    initialFilters = _d.initialFilters,
+    filters = _d.filters,
+    filteredPackagingAccoResults = _d.filteredPackagingAccoResults,
+    selectedSortType = _d.selectedSortType;
   var onCancelSearch = useFlightSearch().onCancelSearch;
   var panelRef = React.useRef(null);
   // expose DOM node if needed
@@ -43797,12 +44813,19 @@ var FlyIn = function (_a) {
         dispatch(setSelectedSearchResult(null));
         dispatch(setSelectedPackagingAccoResult(null));
       }
-      dispatch(setAccommodationFlyInStep('details'));
+      dispatch(setFlyInType('acco-details'));
       setIsOpen(false);
     }
   };
   var handleGoBack = function () {
-    dispatch(setAccommodationFlyInStep('results'));
+    dispatch(setFlyInType('acco-results'));
+  };
+  var handleSortChange = function (newSortKey, direction) {
+    if (sortByTypes === undefined) return;
+    var newSortByType = findSortByType(sortByTypes, newSortKey, direction !== null && direction !== void 0 ? direction : 'asc');
+    if (newSortByType) {
+      dispatch(setSortType(newSortByType));
+    }
   };
   return React__default['default'].createElement(
     'div',
@@ -43810,7 +44833,11 @@ var FlyIn = function (_a) {
       className: 'flyin '
         .concat(isOpen ? 'flyin--active' : '', ' ')
         .concat(className, ' ')
-        .concat(isPackageEditFlow ? 'flyin--large' : '')
+        .concat(
+          isPackageEditFlow || flyInType === 'flight-outward-results' || flyInType === 'flight-return-results' || flyInType === 'acco-results'
+            ? 'flyin--large'
+            : ''
+        )
     },
     React__default['default'].createElement(
       'div',
@@ -43821,7 +44848,22 @@ var FlyIn = function (_a) {
         React__default['default'].createElement(
           'div',
           { className: 'flyin__content-title-row' },
-          React__default['default'].createElement('h3', { className: 'flyin__content-title' }, title),
+          React__default['default'].createElement(
+            'h3',
+            { className: 'flyin__content-title' },
+            srpType === build.PortalQsmType.Flight && 'Select your fare',
+            srpType === build.PortalQsmType.Accommodation ||
+              (srpType === build.PortalQsmType.AccommodationAndFlight &&
+                (flyInType === 'acco-results' || flyInType === 'acco-details') &&
+                ''.concat(translations.SRP.SELECT, ' ').concat(translations.SRP.ACCOMMODATION)),
+            srpType === build.PortalQsmType.AccommodationAndFlight &&
+              flyInType === 'flight-outward-results' &&
+              ''.concat(translations.SRP.SELECT, ' ').concat(translations.FLIGHTS_FORM.OUTWARD_FLIGHT),
+            srpType === build.PortalQsmType.AccommodationAndFlight &&
+              flyInType === 'flight-return-results' &&
+              ''.concat(translations.SRP.SELECT, ' ').concat(translations.FLIGHTS_FORM.RETURN_FLIGHT),
+            srpType === build.PortalQsmType.AccommodationAndFlight && flyInType === 'flight-details' && 'Select your fare'
+          ),
           React__default['default'].createElement(
             'span',
             {
@@ -43834,7 +44876,7 @@ var FlyIn = function (_a) {
           )
         ),
         isPackageEditFlow &&
-          accommodationStep === 'details' &&
+          flyInType === 'acco-details' &&
           React__default['default'].createElement(
             'div',
             { className: 'flyin__content-title-row' },
@@ -43848,15 +44890,73 @@ var FlyIn = function (_a) {
       ),
       srpType === build.PortalQsmType.Flight && React__default['default'].createElement(FlightsFlyIn, { isOpen: isOpen, setIsOpen: setIsOpen }),
       (srpType === build.PortalQsmType.Accommodation || srpType === build.PortalQsmType.AccommodationAndFlight) &&
-        accommodationStep === 'results' &&
+        flyInType === 'acco-results' &&
         React__default['default'].createElement(
           'div',
-          { className: 'flyin__content' },
-          React__default['default'].createElement(HotelAccommodationResults, { isLoading: detailsLoading })
+          { className: 'flyin__content flyin__content--columns' },
+          React__default['default'].createElement(Filters, {
+            initialFilters: initialFilters,
+            filters: filters,
+            isOpen: false,
+            handleSetIsOpen: function () {},
+            // handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
+            isLoading: isLoading,
+            setFilters: function (filters) {
+              return dispatch(setFilters(filters));
+            },
+            resetFilters: function (filters) {
+              return dispatch(resetFilters(filters));
+            }
+          }),
+          React__default['default'].createElement(
+            'div',
+            { className: 'search__results__wrapper' },
+            React__default['default'].createElement(
+              'div',
+              { className: 'search__result-row' },
+              React__default['default'].createElement(
+                'span',
+                { className: 'search__result-row-text' },
+                !isLoading &&
+                  React__default['default'].createElement(
+                    React__default['default'].Fragment,
+                    null,
+                    (filteredPackagingAccoResults === null || filteredPackagingAccoResults === void 0 ? void 0 : filteredPackagingAccoResults.length) &&
+                      filteredPackagingAccoResults.length,
+                    '\u00A0',
+                    translations.SRP.TOTAL_RESULTS_LABEL
+                  )
+              ),
+              sortByTypes &&
+                sortByTypes.length > 0 &&
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'search__result-row-filter' },
+                  React__default['default'].createElement(ItemPicker, {
+                    items: sortByTypes,
+                    selection: (selectedSortType === null || selectedSortType === void 0 ? void 0 : selectedSortType.label) || undefined,
+                    selectedSortByType: selectedSortType,
+                    label: translations.SRP.SORTBY,
+                    placeholder: translations.SRP.SORTBY,
+                    classModifier: 'travel-class-picker__items',
+                    valueFormatter: function (value, direction) {
+                      return getSortingName(translations, findSortByType(sortByTypes, value, direction !== null && direction !== void 0 ? direction : 'asc'));
+                    },
+                    onPick: function (newSortKey, direction) {
+                      return handleSortChange(newSortKey, direction);
+                    }
+                  })
+                )
+            ),
+            React__default['default'].createElement(HotelAccommodationResults, { isLoading: detailsLoading, isFlyIn: true })
+          )
         ),
       (srpType === build.PortalQsmType.Accommodation || srpType === build.PortalQsmType.AccommodationAndFlight) &&
-        accommodationStep === 'details' &&
+        flyInType === 'acco-details' &&
         React__default['default'].createElement(AccommodationFlyIn, { isLoading: detailsLoading, handleConfirm: handleConfirm }),
+      srpType === build.PortalQsmType.AccommodationAndFlight &&
+        (flyInType === 'flight-outward-results' || flyInType === 'flight-return-results') &&
+        React__default['default'].createElement(PackageingFlightsFlyIn, { isOpen: isOpen, setIsOpen: setIsOpen }),
       srpType === build.PortalQsmType.GroupTour &&
         React__default['default'].createElement(GroupTourFlyIn, { isLoading: detailsLoading, isOpen: isOpen, setIsOpen: setIsOpen })
     )
@@ -44628,239 +45728,6 @@ var PairedFlightSelection = function (_a) {
   );
 };
 
-var IndependentFlightOption = function (_a) {
-  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-  var item = _a.item,
-    onSelect = _a.onSelect,
-    guid = _a.guid,
-    selectedGuid = _a.selectedGuid;
-  _a.isOutward;
-  var context = React.useContext(SearchResultsConfigurationContext);
-  var language = (_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB';
-  var translations = getTranslations(language);
-  var _m = React.useState(false),
-    detailsOpen = _m[0],
-    setDetailsOpen = _m[1];
-  return React__default['default'].createElement(
-    'div',
-    { className: 'search__result-card', key: 'flight-'.concat(item.code) },
-    React__default['default'].createElement(
-      'div',
-      { className: 'flight' },
-      React__default['default'].createElement(
-        'div',
-        { className: 'flight__option' },
-        React__default['default'].createElement(
-          'div',
-          { className: 'flight__content' },
-          React__default['default'].createElement(
-            'div',
-            { className: 'flight__flights' },
-            React__default['default'].createElement(
-              'div',
-              { className: 'flight__flight' },
-              React__default['default'].createElement(
-                'div',
-                { className: 'flight__flight__header' },
-                React__default['default'].createElement('div', { className: 'flight__status__container' }),
-                React__default['default'].createElement(
-                  'div',
-                  { className: 'flight__price' },
-                  React__default['default'].createElement(
-                    'button',
-                    {
-                      type: 'button',
-                      className: 'cta '.concat(selectedGuid === guid ? 'cta--selected' : 'cta--select'),
-                      onClick: function () {
-                        return onSelect === null || onSelect === void 0 ? void 0 : onSelect();
-                      }
-                    },
-                    selectedGuid === guid ? 'Selected' : 'Select'
-                  )
-                )
-              )
-            ),
-            React__default['default'].createElement(
-              'div',
-              { className: 'flight__flight' },
-              React__default['default'].createElement(
-                'div',
-                { className: 'flight__flight__container' },
-                React__default['default'].createElement(
-                  'div',
-                  { className: 'flight__flight__wrapper' },
-                  React__default['default'].createElement(
-                    'div',
-                    { className: 'flight__logo__wrapper' },
-                    React__default['default'].createElement('img', {
-                      src: 'https://media.tidesoftware.be/media/shared/Airlines/'.concat(
-                        (_c = getDepartureSegment(item)) === null || _c === void 0 ? void 0 : _c.marketingAirlineCode,
-                        '.png?height=256'
-                      ),
-                      alt: '',
-                      className: 'flight__logo'
-                    }),
-                    React__default['default'].createElement(
-                      'span',
-                      null,
-                      (_d = getDepartureSegment(item)) === null || _d === void 0 ? void 0 : _d.marketingAirlineName
-                    )
-                  ),
-                  React__default['default'].createElement(
-                    'div',
-                    { className: 'flight__info' },
-                    React__default['default'].createElement(
-                      'div',
-                      { className: 'flight__info__times' },
-                      React__default['default'].createElement(
-                        'strong',
-                        null,
-                        timeFromDateTime((_e = getDepartureSegment(item)) === null || _e === void 0 ? void 0 : _e.departureDateTime),
-                        ' ',
-                        (_f = getDepartureSegment(item)) === null || _f === void 0 ? void 0 : _f.departureAirportCode
-                      ),
-                      React__default['default'].createElement(
-                        'p',
-                        null,
-                        longFormatDate((_g = getDepartureSegment(item)) === null || _g === void 0 ? void 0 : _g.departureDateTime, language)
-                      )
-                    ),
-                    React__default['default'].createElement(
-                      'div',
-                      { className: 'flight__info__duration' },
-                      React__default['default'].createElement('p', null, durationTicksInHoursString(item.durationInTicks)),
-                      React__default['default'].createElement(
-                        'div',
-                        { className: 'flight__info__duration__stops' },
-                        React__default['default'].createElement('div', { className: 'flight__info__duration__stop' })
-                      ),
-                      React__default['default'].createElement(
-                        'span',
-                        null,
-                        getNumberOfStopsLabel(item, translations.SRP.DIRECT, translations.SRP.STOPS, translations.SRP.STOP)
-                      )
-                    ),
-                    React__default['default'].createElement(
-                      'div',
-                      { className: 'flight__info__times flight__info__times--arrival' },
-                      React__default['default'].createElement(
-                        'strong',
-                        null,
-                        timeFromDateTime((_h = getArrivalSegment(item)) === null || _h === void 0 ? void 0 : _h.arrivalDateTime),
-                        ' ',
-                        (_j = getArrivalSegment(item)) === null || _j === void 0 ? void 0 : _j.arrivalAirportCode
-                      ),
-                      React__default['default'].createElement(
-                        'p',
-                        null,
-                        longFormatDate((_k = getArrivalSegment(item)) === null || _k === void 0 ? void 0 : _k.arrivalDateTime, language)
-                      )
-                    )
-                  )
-                ),
-                React__default['default'].createElement(
-                  'div',
-                  { className: 'flight__detail__btn__wrapper' },
-                  React__default['default'].createElement(
-                    'div',
-                    {
-                      className: 'flight__detail__btn '.concat(detailsOpen ? 'flight__detail__btn--active' : ''),
-                      onClick: function () {
-                        return setDetailsOpen(function (prev) {
-                          return !prev;
-                        });
-                      }
-                    },
-                    React__default['default'].createElement(Icon$1, { name: 'ui-chevron', className: 'flight__detail__btn__arrow', width: 16, height: 16 })
-                  )
-                )
-              ),
-              React__default['default'].createElement(
-                'div',
-                { className: 'flight__detail '.concat(detailsOpen ? 'flight__detail--active' : '') },
-                (_l = getFlightSegments(item)) === null || _l === void 0
-                  ? void 0
-                  : _l.map(function (segment, index) {
-                      return React__default['default'].createElement(
-                        React__default['default'].Fragment,
-                        { key: 'outward-segment-'.concat(index, '-').concat(segment.flightNumber) },
-                        React__default['default'].createElement(
-                          'div',
-                          { className: 'flight__info' },
-                          React__default['default'].createElement(
-                            'div',
-                            { className: 'flight__info__times__wrapper' },
-                            React__default['default'].createElement(
-                              'div',
-                              { className: 'flight__info__times' },
-                              React__default['default'].createElement('p', null, timeFromDateTime(segment.departureDateTime)),
-                              React__default['default'].createElement('strong', null, segment.departureAirportCode),
-                              React__default['default'].createElement('p', null, longFormatDate(segment.departureDateTime, language))
-                            ),
-                            React__default['default'].createElement(
-                              'div',
-                              null,
-                              React__default['default'].createElement(Icon$1, { name: 'ui-plane-depart', width: 30, height: 20 })
-                            )
-                          ),
-                          React__default['default'].createElement(
-                            'div',
-                            { className: 'flight__info__duration' },
-                            React__default['default'].createElement('p', null, durationTicksInHoursString(segment.durationInTicks)),
-                            React__default['default'].createElement('div', { className: 'flight__info__duration__stops' }),
-                            React__default['default'].createElement('span', null, segment.marketingAirlineName),
-                            React__default['default'].createElement('strong', null, segment.operatingFlightNumber)
-                          ),
-                          React__default['default'].createElement(
-                            'div',
-                            { className: 'flight__info__times__wrapper flight__info__times__wrapper--arrival' },
-                            React__default['default'].createElement(
-                              'div',
-                              null,
-                              React__default['default'].createElement(Icon$1, { name: 'ui-plane-arrive', width: 30, height: 20 })
-                            ),
-                            React__default['default'].createElement(
-                              'div',
-                              { className: 'flight__info__times flight__info__times--arrival' },
-                              React__default['default'].createElement('p', null, timeFromDateTime(segment.arrivalDateTime)),
-                              React__default['default'].createElement('strong', null, segment.arrivalAirportCode),
-                              React__default['default'].createElement('p', null, longFormatDate(segment.arrivalDateTime, language))
-                            )
-                          )
-                        ),
-                        segment.transferTimeInTicks &&
-                          React__default['default'].createElement(
-                            'div',
-                            { className: 'flight__info' },
-                            React__default['default'].createElement('div', { className: 'flight__info__times' }),
-                            React__default['default'].createElement(
-                              'div',
-                              { className: 'flight__info__duration flight__info__duration--waittime' },
-                              React__default['default'].createElement(
-                                'div',
-                                { className: 'flight__info__duration__stops flight__info__duration__stops--stoptime' },
-                                React__default['default'].createElement(Icon$1, { name: 'ui-clock', width: 24, height: 24 })
-                              ),
-                              React__default['default'].createElement(
-                                'div',
-                                { className: 'flight__info__duration__stoptime' },
-                                React__default['default'].createElement('span', null, 'Stop time'),
-                                React__default['default'].createElement('strong', null, durationTicksInHoursString(segment.transferTimeInTicks))
-                              )
-                            ),
-                            React__default['default'].createElement('div', { className: 'flight__info__times flight__info__times--arrival' })
-                          )
-                      );
-                    })
-              )
-            )
-          )
-        )
-      )
-    )
-  );
-};
-
 var IndependentFlightSelection = function (_a) {
   var _b;
   var searchResults = _a.searchResults;
@@ -45056,116 +45923,6 @@ var FlightSelection = function (_a) {
     : React__default['default'].createElement(IndependentFlightSelection, { searchResults: searchResults });
 };
 
-var MultiRangeFilter = function (_a) {
-  var min = _a.min,
-    max = _a.max,
-    selectedMin = _a.selectedMin,
-    selectedMax = _a.selectedMax,
-    valueFormatter = _a.valueFormatter,
-    onChange = _a.onChange;
-  var _b = React.useState(false),
-    isDragging = _b[0],
-    setIsDragging = _b[1];
-  var _c = React.useState(0),
-    leftPercentage = _c[0],
-    setLeftPercentage = _c[1];
-  var _d = React.useState(0),
-    rightPercentage = _d[0],
-    setRightPercentage = _d[1];
-  var _e = React.useState(selectedMin !== null && selectedMin !== void 0 ? selectedMin : min),
-    minVal = _e[0],
-    setMinVal = _e[1];
-  var _f = React.useState(selectedMax !== null && selectedMax !== void 0 ? selectedMax : max),
-    maxVal = _f[0],
-    setMaxVal = _f[1];
-  var minGap = 5;
-  // Sync internal state with external selectedMin/selectedMax changes
-  React.useEffect(
-    function () {
-      setMinVal(selectedMin !== null && selectedMin !== void 0 ? selectedMin : min);
-      setMaxVal(selectedMax !== null && selectedMax !== void 0 ? selectedMax : max);
-    },
-    [min, max, selectedMin, selectedMax]
-  );
-  // Recalculate slider track whenever values change
-  React.useEffect(
-    function () {
-      var range = max - min || 1;
-      var minPercent = ((minVal - min) / range) * 100;
-      var maxPercent = ((maxVal - min) / range) * 100;
-      setLeftPercentage(minPercent);
-      setRightPercentage(100 - maxPercent);
-    },
-    [minVal, maxVal, min, max]
-  );
-  var slideMin = function (e) {
-    var value = parseInt(e.target.value, 10);
-    // Ensure the thumbs don’t cross and enforce minGap
-    if (value <= maxVal - minGap) {
-      setMinVal(value);
-    }
-  };
-  var slideMax = function (e) {
-    var value = parseInt(e.target.value, 10);
-    // Ensure the thumbs don’t cross and enforce minGap
-    if (value >= minVal + minGap) {
-      setMaxVal(value);
-    }
-  };
-  var startDrag = function () {
-    setIsDragging(true);
-  };
-  var stopDrag = function () {
-    setIsDragging(false);
-    // Notify parent with the final values
-    onChange(minVal, maxVal);
-  };
-  return React__default['default'].createElement(
-    'div',
-    { className: 'double-slider-box' },
-    React__default['default'].createElement(
-      'div',
-      { className: 'input-box' },
-      React__default['default'].createElement('div', { className: 'min-box' }, valueFormatter(minVal)),
-      React__default['default'].createElement('div', { className: 'max-box' }, valueFormatter(maxVal))
-    ),
-    React__default['default'].createElement(
-      'div',
-      { className: 'range-slider' },
-      React__default['default'].createElement('div', {
-        className: 'slider-track',
-        style: { left: ''.concat(leftPercentage, '%'), right: ''.concat(rightPercentage, '%') }
-      }),
-      React__default['default'].createElement('input', {
-        type: 'range',
-        min: min,
-        max: max,
-        value: minVal,
-        onChange: slideMin,
-        onMouseDown: startDrag,
-        onMouseUp: stopDrag,
-        onTouchStart: startDrag,
-        onTouchEnd: stopDrag,
-        className: 'min-val'
-      }),
-      React__default['default'].createElement('input', {
-        type: 'range',
-        min: min,
-        max: max,
-        value: maxVal,
-        onChange: slideMax,
-        onMouseDown: startDrag,
-        onMouseUp: stopDrag,
-        onTouchStart: startDrag,
-        onTouchEnd: stopDrag,
-        className: 'max-val'
-      }),
-      isDragging && React__default['default'].createElement('div', { className: 'min-tooltip' }, valueFormatter(minVal)),
-      isDragging && React__default['default'].createElement('div', { className: 'max-tooltip' }, valueFormatter(maxVal))
-    )
-  );
-};
-
 var FlightFilters = function (_a) {
   var _b;
   var isOpen = _a.isOpen,
@@ -46254,228 +47011,6 @@ var FlightResultsContainer = function (_a) {
   );
 };
 
-var Filters = function (_a) {
-  var _b;
-  var initialFilters = _a.initialFilters,
-    filters = _a.filters,
-    isOpen = _a.isOpen,
-    handleSetIsOpen = _a.handleSetIsOpen,
-    isLoading = _a.isLoading;
-  var context = React.useContext(SearchResultsConfigurationContext);
-  if (!context || !context.showFilters) {
-    return null;
-  }
-  var translations = getTranslations((_b = context === null || context === void 0 ? void 0 : context.languageCode) !== null && _b !== void 0 ? _b : 'en-GB');
-  var _c = React.useState({}),
-    visibleFilters = _c[0],
-    setVisibleFilters = _c[1];
-  var dispatch = reactRedux.useDispatch();
-  var toggleFilterVisibility = function (filterId) {
-    setVisibleFilters(function (prev) {
-      var _a;
-      return __assign(__assign({}, prev), ((_a = {}), (_a[filterId] = !prev[filterId]), _a));
-    });
-  };
-  var handleCheckBoxFilter = function (filter, option) {
-    var updated = filters.map(function (f) {
-      var _a;
-      if (f.property !== filter.property) return f;
-      return __assign(__assign({}, f), {
-        options:
-          (_a = f.options) === null || _a === void 0
-            ? void 0
-            : _a.map(function (opt) {
-                return opt.value === option.value ? __assign(__assign({}, opt), { isChecked: !opt.isChecked }) : opt;
-              })
-      });
-    });
-    dispatch(setFilters(updated));
-  };
-  var handleSliderChange = function (filter, newMin, newMax) {
-    var updated = filters.map(function (f) {
-      if (f.property !== filter.property) return f;
-      return __assign(__assign({}, f), { selectedMin: newMin, selectedMax: newMax });
-    });
-    dispatch(setFilters(updated));
-  };
-  var handleFullReset = function () {
-    if (!isLoading) {
-      dispatch(resetFilters(initialFilters));
-    }
-  };
-  return React__default['default'].createElement(
-    'div',
-    { className: 'search__filters--modal '.concat(isOpen ? 'is-open' : '') },
-    React__default['default'].createElement('div', {
-      className: 'search__filters--background',
-      onClick: function () {
-        return handleSetIsOpen();
-      }
-    }),
-    React__default['default'].createElement(
-      'button',
-      {
-        className: 'search__filters--close',
-        onClick: function () {
-          return handleSetIsOpen();
-        }
-      },
-      React__default['default'].createElement(Icon$1, { name: 'ui-close', height: 24 })
-    ),
-    React__default['default'].createElement(
-      'div',
-      { className: 'search__filters' },
-      React__default['default'].createElement(
-        'div',
-        { className: 'search__filter-row search__filter__header' },
-        React__default['default'].createElement(
-          'div',
-          { className: 'search__filter-row-flex-title' },
-          React__default['default'].createElement('p', { className: 'search__filter-small-title' }, translations.SRP.FILTERS)
-        ),
-        !isLoading &&
-          React__default['default'].createElement(
-            'a',
-            {
-              className: 'search__filter-reset',
-              onClick: function () {
-                return handleFullReset();
-              }
-            },
-            translations.SRP.RESET
-          )
-      ),
-      isLoading
-        ? React__default['default'].createElement(Spinner, null)
-        : React__default['default'].createElement(
-            React__default['default'].Fragment,
-            null,
-            React__default['default'].createElement(
-              'div',
-              { className: 'search__filters__group-container' },
-              filters.map(function (filter, index) {
-                var _a, _b;
-                var isVisible = (_a = visibleFilters[filter.property]) !== null && _a !== void 0 ? _a : true;
-                return React__default['default'].createElement(
-                  'div',
-                  { key: ''.concat(filter.property, '-').concat(index), className: 'search__filter-group' },
-                  React__default['default'].createElement(
-                    'div',
-                    {
-                      className: 'search__filter-row search__filter-row--underline',
-                      onClick: function () {
-                        return toggleFilterVisibility(filter.property);
-                      },
-                      role: 'button',
-                      tabIndex: 0
-                    },
-                    React__default['default'].createElement('h6', { className: 'search__filter-large-title' }, filter.label),
-                    React__default['default'].createElement(
-                      'svg',
-                      {
-                        id: 'search-chevron-up-icon',
-                        className: 'search__filter-chevron-icon '.concat(isVisible ? 'search__filter-chevron-icon--flipped' : '', ' '),
-                        viewBox: '0 0 10 6.063',
-                        width: 10,
-                        height: 6.063
-                      },
-                      React__default['default'].createElement('path', {
-                        id: 'Path_62',
-                        'data-name': 'Path 62',
-                        d: 'M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z',
-                        transform: 'translate(-240 624)',
-                        fill: '#707070'
-                      })
-                    )
-                  ),
-                  isVisible &&
-                    filter.type === 'checkbox' &&
-                    React__default['default'].createElement(
-                      'div',
-                      { className: 'search__filter-rows' },
-                      filter.options &&
-                        filter.options.map(function (option, optionIndex) {
-                          return React__default['default'].createElement(
-                            'div',
-                            { className: 'search__filter-row search__filter-row--checkbox', key: ''.concat(option.label, '-').concat(optionIndex) },
-                            React__default['default'].createElement(
-                              'div',
-                              { className: 'checkbox' },
-                              React__default['default'].createElement(
-                                'label',
-                                { className: 'checkbox__label' },
-                                React__default['default'].createElement('input', {
-                                  type: 'checkbox',
-                                  className: 'checkbox__input checkbox__input--parent',
-                                  checked: option.isChecked,
-                                  onChange: function (e) {
-                                    return handleCheckBoxFilter(filter, option);
-                                  }
-                                }),
-                                React__default['default'].createElement('span', { className: 'radiobutton__label-text' }, option.label)
-                              )
-                            )
-                          );
-                        })
-                    ),
-                  isVisible &&
-                    filter.type === 'toggle' &&
-                    React__default['default'].createElement(
-                      'div',
-                      { className: 'search__filter-rows' },
-                      (_b = filter.options) === null || _b === void 0
-                        ? void 0
-                        : _b.map(function (option, optionIndex) {
-                            return React__default['default'].createElement(
-                              'div',
-                              { className: 'search__filter-row', key: ''.concat(option.label, '-').concat(optionIndex) },
-                              React__default['default'].createElement('span', { className: 'search__filter-toggle-label' }, option.label),
-                              React__default['default'].createElement('div', { className: 'checkbox' }),
-                              React__default['default'].createElement(
-                                'label',
-                                { className: 'checkbox__label' },
-                                React__default['default'].createElement('input', {
-                                  type: 'checkbox',
-                                  className: 'checkbox__input',
-                                  checked: option.isChecked,
-                                  onChange: function () {
-                                    return handleCheckBoxFilter(filter, option);
-                                  }
-                                })
-                              )
-                            );
-                          })
-                    ),
-                  isVisible &&
-                    filter &&
-                    filter.type === 'slider' &&
-                    (function () {
-                      var _a, _b, _c, _d;
-                      var min = (_a = filter.min) !== null && _a !== void 0 ? _a : 0;
-                      var max = (_b = filter.max) !== null && _b !== void 0 ? _b : 100;
-                      var selectedMin = (_c = filter.selectedMin) !== null && _c !== void 0 ? _c : min;
-                      var selectedMax = (_d = filter.selectedMax) !== null && _d !== void 0 ? _d : max;
-                      return React__default['default'].createElement(MultiRangeFilter, {
-                        min: min,
-                        max: max,
-                        selectedMin: selectedMin,
-                        selectedMax: selectedMax,
-                        valueFormatter: function (value) {
-                          return ''.concat(value);
-                        },
-                        onChange: function (newMin, newMax) {
-                          handleSliderChange(filter, newMin, newMax);
-                        }
-                      });
-                    })()
-                );
-              })
-            )
-          )
-    )
-  );
-};
-
 var GroupTourCard = function (_a) {
   var _b, _c, _d, _e, _f, _g;
   var result = _a.result,
@@ -46793,80 +47328,245 @@ var enrichFiltersWithResults = function (results, filters, tags) {
     return updatedFilter;
   });
 };
-var enrichFiltersWithPackageAccoResults = function (results, filters, tags) {
-  if (!results || results.length === 0 || !filters) {
-    return filters !== null && filters !== void 0 ? filters : [];
-  }
-  return filters.map(function (filter) {
-    var updatedFilter = __assign({}, filter);
-    if (filter.property === 'price' && (filter.min == null || filter.max == null)) {
-      var prices = results
-        .map(function (r) {
-          var _a;
-          return (_a = r.price) !== null && _a !== void 0 ? _a : 0;
-        })
-        .filter(function (p) {
-          return p > 0;
-        });
-      if (prices.length > 0) {
-        updatedFilter.min = Math.floor(Math.min.apply(Math, prices));
-        updatedFilter.max = Math.ceil(Math.max.apply(Math, prices));
-      }
-    }
-    if (filter.property === 'accommodation') {
-      var map_4 = new Map();
-      results.forEach(function (r) {
-        var rooms = lodash.flatMap(r.rooms);
-        if (rooms) {
-          rooms.map(function (room) {
-            room.options.map(function (option) {
-              if (option.accommodationCode) {
-                map_4.set(option.accommodationCode, {
-                  name: option.accommodationName,
-                  code: option.accommodationCode
-                });
-              }
+var enrichFiltersWithPackageAccoResults = function (results, tags) {
+  var filters = [];
+  if (!results || results.length === 0) {
+    return filters;
+  }
+  var regimeFilter = {
+    property: 'regime',
+    label: 'Regime',
+    type: 'checkbox',
+    options: [],
+    isFrontendFilter: true
+  };
+  var map = new Map();
+  results.forEach(function (r) {
+    var rooms = lodash.flatMap(r.rooms);
+    if (rooms) {
+      rooms.map(function (room) {
+        room.options.map(function (option) {
+          if (option.regimeCode) {
+            map.set(option.regimeCode, {
+              name: option.regimeName,
+              code: option.regimeCode
             });
-          });
-        }
+          }
+        });
       });
-      updatedFilter.options = Array.from(map_4.values()).map(function (accommodation) {
-        var _a;
-        return {
-          label: (_a = accommodation.name) !== null && _a !== void 0 ? _a : accommodation.code,
-          value: accommodation.code,
-          isChecked: false
-        };
+    }
+  });
+  regimeFilter.options = Array.from(map.values()).map(function (regime) {
+    var _a;
+    return {
+      label: (_a = regime.name) !== null && _a !== void 0 ? _a : regime.code,
+      value: regime.code,
+      isChecked: false
+    };
+  });
+  filters.push(regimeFilter);
+  var priceFilter = {
+    property: 'price',
+    label: 'Prijs',
+    type: 'slider',
+    isFrontendFilter: true
+  };
+  var prices = results
+    .map(function (r) {
+      var _a;
+      return (_a = r.price) !== null && _a !== void 0 ? _a : 0;
+    })
+    .filter(function (p) {
+      return p > 0;
+    });
+  priceFilter.min = Math.floor(Math.min.apply(Math, prices));
+  priceFilter.max = Math.ceil(Math.max.apply(Math, prices));
+  filters.push(priceFilter);
+  return filters;
+};
+var enrichFiltersWithPackageFlightResults = function (results, tags, translations) {
+  var filters = [];
+  if (!results || results.length === 0) {
+    return filters;
+  }
+  // Airlines
+  var airlinesFilter = {
+    label: 'Airlines',
+    property: 'airline',
+    type: 'checkbox',
+    isFrontendFilter: true,
+    options: []
+  };
+  var airlinesFilterMap = new Map();
+  results.map(function (r) {
+    var airlineCode = r.airlineCode;
+    var airlineName = r.airlineName;
+    if (airlineCode && airlineName) {
+      airlinesFilterMap.set(airlineCode, {
+        name: airlineName,
+        code: airlineCode
       });
     }
-    if (filter.property === 'regime') {
-      var map_5 = new Map();
-      results.forEach(function (r) {
-        var rooms = lodash.flatMap(r.rooms);
-        if (rooms) {
-          rooms.map(function (room) {
-            room.options.map(function (option) {
-              if (option.regimeCode) {
-                map_5.set(option.regimeCode, {
-                  name: option.regimeName,
-                  code: option.regimeCode
-                });
-              }
-            });
-          });
-        }
+  });
+  airlinesFilter.options = Array.from(airlinesFilterMap.values()).map(function (airline) {
+    var _a;
+    return {
+      label: (_a = airline.name) !== null && _a !== void 0 ? _a : airline.code,
+      value: airline.code,
+      isChecked: false
+    };
+  });
+  filters.push(airlinesFilter);
+  // Number of stops
+  var stopsFilter = {
+    label: 'Number of Stops',
+    property: 'numberOfStops',
+    type: 'checkbox',
+    isFrontendFilter: true,
+    options: []
+  };
+  var stopsMap = new Map();
+  results.map(function (result) {
+    var numberOfStops = getNumberOfStops(result.outward);
+    if (!stopsMap.has(numberOfStops)) {
+      stopsMap.set(numberOfStops, { numberOfStops: numberOfStops });
+    }
+  });
+  stopsFilter.options = Array.from(stopsMap.values()).map(function (stop) {
+    return {
+      label: ''.concat(stop.numberOfStops == 0 ? 'direct' : stop.numberOfStops + ' Stop'.concat(stop.numberOfStops !== 1 ? 's' : '')),
+      value: stop.numberOfStops,
+      isChecked: false
+    };
+  });
+  filters.push(stopsFilter);
+  // Departure range
+  var departureRangeFilter = {
+    label: 'Departure Range',
+    property: 'departureRange',
+    type: 'checkbox',
+    isFrontendFilter: true,
+    options: []
+  };
+  var departureRangeMap = new Map();
+  results.map(function (result) {
+    var _a;
+    var departureRange = rangeFromDateTimeInMinutes((_a = getDepartureSegment(result.outward)) === null || _a === void 0 ? void 0 : _a.departureDateTime);
+    if (!departureRangeMap.has(departureRange)) {
+      departureRangeMap.set(departureRange, departureRange);
+    }
+  });
+  departureRangeFilter.options = lodash.orderBy(Array.from(departureRangeMap.values()), ['id'], ['asc']).map(function (range) {
+    return {
+      label: getDepartureRangeName(translations, range),
+      value: range,
+      isChecked: false
+    };
+  });
+  filters.push(departureRangeFilter);
+  // Departure Airport
+  var departureAirportFilter = {
+    label: 'Departure Airport',
+    property: 'departureAirport',
+    type: 'checkbox',
+    isFrontendFilter: true,
+    options: []
+  };
+  var departureAirportsMap = new Map();
+  results.map(function (result) {
+    var departureSegment = getDepartureSegment(result.outward);
+    var departureAirport = departureSegment === null || departureSegment === void 0 ? void 0 : departureSegment.departureAirportCode;
+    if (departureAirport && !departureAirportsMap.has(departureAirport)) {
+      departureAirportsMap.set(departureAirport, {
+        name: (departureSegment === null || departureSegment === void 0 ? void 0 : departureSegment.departureAirportName) + ' (' + departureAirport + ')',
+        code: departureAirport
       });
-      updatedFilter.options = Array.from(map_5.values()).map(function (regime) {
-        var _a;
-        return {
-          label: (_a = regime.name) !== null && _a !== void 0 ? _a : regime.code,
-          value: regime.code,
-          isChecked: false
-        };
+    }
+  });
+  departureAirportFilter.options = Array.from(departureAirportsMap.values()).map(function (airport) {
+    var _a;
+    return {
+      label: (_a = airport.name) !== null && _a !== void 0 ? _a : airport.code,
+      value: airport.code,
+      isChecked: false
+    };
+  });
+  filters.push(departureAirportFilter);
+  // Arrival Airport
+  var arrivalAirportFilter = {
+    label: 'Arrival Airport',
+    property: 'arrivalAirport',
+    type: 'checkbox',
+    isFrontendFilter: true,
+    options: []
+  };
+  var arrivalAirportsMap = new Map();
+  results.map(function (result) {
+    var arrivalSegment = getArrivalSegment(result.outward);
+    var arrivalAirport = arrivalSegment === null || arrivalSegment === void 0 ? void 0 : arrivalSegment.arrivalAirportCode;
+    if (arrivalAirport && !arrivalAirportsMap.has(arrivalAirport)) {
+      arrivalAirportsMap.set(arrivalAirport, {
+        name: (arrivalSegment === null || arrivalSegment === void 0 ? void 0 : arrivalSegment.arrivalAirportName) + ' (' + arrivalAirport + ')',
+        code: arrivalAirport
       });
     }
-    return updatedFilter;
   });
+  arrivalAirportFilter.options = Array.from(arrivalAirportsMap.values()).map(function (airport) {
+    var _a;
+    return {
+      label: (_a = airport.name) !== null && _a !== void 0 ? _a : airport.code,
+      value: airport.code,
+      isChecked: false
+    };
+  });
+  filters.push(arrivalAirportFilter);
+  // Price
+  var priceFilter = {
+    label: 'Price',
+    property: 'price',
+    type: 'slider',
+    isFrontendFilter: true
+  };
+  var prices = results
+    .map(function (r) {
+      var _a;
+      return (_a = r.price) !== null && _a !== void 0 ? _a : 0;
+    })
+    .filter(function (p) {
+      return p > 0;
+    });
+  if (prices.length > 0) {
+    priceFilter.min = Math.floor(Math.min.apply(Math, prices));
+    priceFilter.max = Math.ceil(Math.max.apply(Math, prices));
+  }
+  filters.push(priceFilter);
+  // Travel duration
+  var travelDurationFilter = {
+    label: 'Travel Duration',
+    property: 'travelDuration',
+    type: 'slider',
+    isFrontendFilter: true
+  };
+  var minTravelTimeDuration = Math.min.apply(
+    Math,
+    results.map(function (result) {
+      return result.outward.durationInTicks;
+    })
+  );
+  var maxTravelTimeDuration = Math.max.apply(
+    Math,
+    results.map(function (result) {
+      return result.outward.durationInTicks;
+    })
+  );
+  var minTravelTimeValue = durationInTicksInMinutes(minTravelTimeDuration);
+  var maxTravelTimeValue = durationInTicksInMinutes(maxTravelTimeDuration);
+  if (minTravelTimeValue != null && maxTravelTimeValue != null) {
+    travelDurationFilter.min = minTravelTimeValue;
+    travelDurationFilter.max = maxTravelTimeValue;
+  }
+  filters.push(travelDurationFilter);
+  return filters;
 };
 var applyFilters = function (results, filters, sortBy) {
   var filtered = results.filter(function (r) {
@@ -47008,6 +47708,147 @@ var applyFiltersToPackageAccoResults = function (results, filters, sortBy) {
     return 0;
   });
 };
+var applyFiltersToPackageFlightResults = function (results, filters, sortBy) {
+  var filtered = results.filter(function (result) {
+    return filters.every(function (filter) {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+      if (!filter.isFrontendFilter) return true;
+      // Airline
+      if (filter.property === 'airline') {
+        var selected =
+          (_a = filter.options) === null || _a === void 0
+            ? void 0
+            : _a
+                .filter(function (o) {
+                  return o.isChecked;
+                })
+                .map(function (o) {
+                  return o.value;
+                });
+        if (!selected || selected.length === 0) return true;
+        return selected.includes(result.airlineCode);
+      }
+      // Stops
+      if (filter.property === 'numberOfStops') {
+        var selected =
+          (_b = filter.options) === null || _b === void 0
+            ? void 0
+            : _b
+                .filter(function (o) {
+                  return o.isChecked;
+                })
+                .map(function (o) {
+                  return o.value;
+                });
+        if (!selected || selected.length === 0) return true;
+        return selected.includes(getNumberOfStops(result.outward)) && selected.includes(getNumberOfStops(result.return));
+      }
+      // Departure range
+      if (filter.property === 'departureRange') {
+        var selected =
+          (_c = filter.options) === null || _c === void 0
+            ? void 0
+            : _c
+                .filter(function (o) {
+                  return o.isChecked;
+                })
+                .map(function (o) {
+                  return o.value;
+                });
+        if (!selected || selected.length === 0) return true;
+        return selected.includes(
+          rangeFromDateTimeInMinutes((_d = getDepartureSegment(result.outward)) === null || _d === void 0 ? void 0 : _d.departureDateTime)
+        );
+      }
+      // Departure airport
+      if (filter.property === 'departureAirport') {
+        var selected =
+          (_e = filter.options) === null || _e === void 0
+            ? void 0
+            : _e
+                .filter(function (o) {
+                  return o.isChecked;
+                })
+                .map(function (o) {
+                  return o.value;
+                });
+        if (!selected || selected.length === 0) return true;
+        var departureAirportCode = (_f = getDepartureSegment(result.outward)) === null || _f === void 0 ? void 0 : _f.departureAirportCode;
+        if (!departureAirportCode) return false;
+        return selected.includes(departureAirportCode);
+      }
+      // Arrival airport
+      if (filter.property === 'arrivalAirport') {
+        var selected =
+          (_g = filter.options) === null || _g === void 0
+            ? void 0
+            : _g
+                .filter(function (o) {
+                  return o.isChecked;
+                })
+                .map(function (o) {
+                  return o.value;
+                });
+        if (!selected || selected.length === 0) return true;
+        var arrivalAirportCode = (_h = getArrivalSegment(result.outward)) === null || _h === void 0 ? void 0 : _h.arrivalAirportCode;
+        if (!arrivalAirportCode) return false;
+        return selected.includes(arrivalAirportCode);
+      }
+      // PRICE
+      if (filter.property === 'price') {
+        if (filter.selectedMin != null && result.price < filter.selectedMin) return false;
+        if (filter.selectedMax != null && result.price > filter.selectedMax) return false;
+        return true;
+      }
+      // Travel times
+      if (filter.property === 'travelDuration') {
+        if (
+          filter.selectedMin != null &&
+          durationInTicksInMinutes((_j = result.outward) === null || _j === void 0 ? void 0 : _j.durationInTicks) < filter.selectedMin
+        )
+          return false;
+        if (
+          filter.selectedMax != null &&
+          durationInTicksInMinutes((_k = result.outward) === null || _k === void 0 ? void 0 : _k.durationInTicks) > filter.selectedMax
+        )
+          return false;
+        return true;
+      }
+      return true;
+    });
+  });
+  // SORTING
+  if (!sortBy || sortBy.label === 'default') {
+    return filtered;
+  }
+  if (sortBy.label === 'departureTime') {
+    return lodash.orderBy(
+      results,
+      [
+        function (result) {
+          var _a;
+          return (_a = getDepartureSegment(result.outward)) === null || _a === void 0 ? void 0 : _a.departureDateTime;
+        }
+      ],
+      [sortBy.direction] // or "desc"
+    );
+  } else if (sortBy.label === 'durationInTicks') {
+    return lodash.orderBy(
+      results,
+      [
+        function (result) {
+          var _a, _b;
+          return durationInTicksInMinutes(
+            (_b = (_a = result.outward) === null || _a === void 0 ? void 0 : _a.durationInTicks) !== null && _b !== void 0 ? _b : 0
+          );
+        }
+      ],
+      [sortBy.direction] // or "desc"
+    );
+  } else {
+    return lodash.orderBy(results, [sortBy.label], [sortBy.direction]);
+  }
+};
 
 var getSelectedOptionsPerRoom = function (details) {
   var _a;
@@ -47216,27 +48057,30 @@ var SearchResultsContainer = function () {
     results = _c.results,
     filteredResults = _c.filteredResults,
     packagingAccoResults = _c.packagingAccoResults,
-    filteredPackagingAccoResults = _c.filteredPackagingAccoResults;
-  _c.bookingPackageDetails;
-  var isLoading = _c.isLoading,
+    filteredPackagingAccoResults = _c.filteredPackagingAccoResults,
+    isLoading = _c.isLoading,
+    flightsLoading = _c.flightsLoading,
+    initialFilters = _c.initialFilters,
     filters = _c.filters,
+    flightFilters = _c.flightFilters,
     selectedSortType = _c.selectedSortType,
+    selectedFlightSortType = _c.selectedFlightSortType,
     selectedSearchResult = _c.selectedSearchResult,
     selectedPackagingAccoResultCode = _c.selectedPackagingAccoResultCode,
     flyInIsOpen = _c.flyInIsOpen,
     packagingAccoSearchDetails = _c.packagingAccoSearchDetails,
     editablePackagingEntry = _c.editablePackagingEntry,
     transactionId = _c.transactionId,
-    accommodationFlyInStep = _c.accommodationFlyInStep,
+    flyInType = _c.flyInType,
     itinerary = _c.itinerary,
     packagingFlightResults = _c.packagingFlightResults;
   var isMobile = useMediaQuery('(max-width: 1200px)');
   var _d = React.useState(false),
     initialFiltersSet = _d[0],
     setInitialFiltersSet = _d[1];
-  var _e = React.useState([]),
-    initialFilters = _e[0],
-    setInitialFilters = _e[1];
+  var _e = React.useState(false),
+    initialFlightFiltersSet = _e[0],
+    setInitialFlightFiltersSet = _e[1];
   var _f = React.useState(false),
     filtersOpen = _f[0],
     setFiltersOpen = _f[1];
@@ -47573,7 +48417,7 @@ var SearchResultsContainer = function () {
             if (!seed) return [2 /*return*/];
             setDetailsIsLoading(true);
             setSelectedAccommodationSeed(seed);
-            dispatch(setAccommodationFlyInStep('results'));
+            dispatch(setFlyInType('acco-results'));
             handleFlyInToggle(true);
             return [4 /*yield*/, getOrCreateTransactionId()];
           case 1:
@@ -47731,7 +48575,7 @@ var SearchResultsContainer = function () {
             enrichedFilters = enrichFiltersWithResults(packageSearchResults, context.filters, (_a = context.tags) !== null && _a !== void 0 ? _a : []);
             if (!initialFiltersSet) {
               dispatch(resetFilters(enrichedFilters));
-              setInitialFilters(enrichedFilters);
+              dispatch(setInitialFilters(enrichedFilters));
               setInitialFiltersSet(true);
             }
             dispatch(setResults(packageSearchResults));
@@ -47764,6 +48608,7 @@ var SearchResultsContainer = function () {
           case 0:
             _a.trys.push([0, 2, , 3]);
             if (!context) return [2 /*return*/, null];
+            dispatch(setIsLoading(true));
             config = {
               host: context.tideConnection.host,
               apiKey: context.tideConnection.apiKey
@@ -47771,12 +48616,13 @@ var SearchResultsContainer = function () {
             return [4 /*yield*/, build.startTransaction(config)];
           case 1:
             transaction = _a.sent();
-            console.log('Transaction started', transaction);
             dispatch(setTransactionId(transaction.transactionId));
+            dispatch(setIsLoading(false));
             return [2 /*return*/, transaction.transactionId];
           case 2:
             err_2 = _a.sent();
             console.error('Transaction failed', err_2);
+            dispatch(setIsLoading(false));
             return [2 /*return*/, null];
           case 3:
             return [2 /*return*/];
@@ -47804,11 +48650,7 @@ var SearchResultsContainer = function () {
             return [4 /*yield*/, build.searchPackagingAccommodations(config, searchRequest)];
           case 1:
             packageAccoSearchResults = _d.sent();
-            enrichedFilters = enrichFiltersWithPackageAccoResults(
-              packageAccoSearchResults,
-              context.filters,
-              (_a = context.tags) !== null && _a !== void 0 ? _a : []
-            );
+            enrichedFilters = enrichFiltersWithPackageAccoResults(packageAccoSearchResults, (_a = context.tags) !== null && _a !== void 0 ? _a : []);
             if (!initialFiltersSet) {
               dispatch(resetFilters(enrichedFilters));
               setInitialFilters(enrichedFilters);
@@ -47854,11 +48696,12 @@ var SearchResultsContainer = function () {
   };
   var runFlightSearch = function (currentTransactionId, seed) {
     return __awaiter(void 0, void 0, void 0, function () {
-      var config, searchRequest, packageFlightSearchResults, err_4;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
+      var config, searchRequest, packageFlightSearchResults, enrichedFilters, initialFilteredResults, firstResult, err_4;
+      var _a;
+      return __generator(this, function (_b) {
+        switch (_b.label) {
           case 0:
-            _a.trys.push([0, 2, , 3]);
+            _b.trys.push([0, 2, , 3]);
             if (!context) return [2 /*return*/];
             dispatch(setFlightsLoading(true));
             config = {
@@ -47869,12 +48712,31 @@ var SearchResultsContainer = function () {
             searchRequest.agentId = context.agentId;
             return [4 /*yield*/, build.searchPackagingFlights(config, searchRequest)];
           case 1:
-            packageFlightSearchResults = _a.sent();
+            packageFlightSearchResults = _b.sent();
+            enrichedFilters = enrichFiltersWithPackageFlightResults(
+              packageFlightSearchResults,
+              (_a = context.tags) !== null && _a !== void 0 ? _a : [],
+              translations
+            );
+            if (!initialFlightFiltersSet) {
+              dispatch(resetFlightFilters(enrichedFilters));
+              dispatch(setInitialFlightFilters(enrichedFilters));
+              setInitialFlightFiltersSet(true);
+            }
             dispatch(setPackagingFlightResults(packageFlightSearchResults));
+            initialFilteredResults = applyFiltersToPackageFlightResults(packageFlightSearchResults, filters, null);
+            dispatch(setFilteredPackagingFlightResults(initialFilteredResults));
+            if (initialFilteredResults.length > 0) {
+              firstResult = lodash.first(packageFlightSearchResults);
+              if (firstResult) {
+                dispatch(setSelectedOutwardKey(getFlightKey(firstResult.outward.segments)));
+                dispatch(setSelectedReturnKey(getFlightKey(firstResult.return.segments)));
+              }
+            }
             dispatch(setFlightsLoading(false));
             return [3 /*break*/, 3];
           case 2:
-            err_4 = _a.sent();
+            err_4 = _b.sent();
             console.error('FlightSearch failed', err_4);
             dispatch(setFlightsLoading(false));
             return [3 /*break*/, 3];
@@ -47978,9 +48840,7 @@ var SearchResultsContainer = function () {
   );
   React.useEffect(
     function () {
-      console.log('packaging entry from context', context === null || context === void 0 ? void 0 : context.packagingEntry);
       if (context === null || context === void 0 ? void 0 : context.packagingEntry) {
-        console.log('original packaging entry from context', context.packagingEntry);
         dispatch(setEditablePackagingEntry(structuredClone(context.packagingEntry)));
         dispatch(setTransactionId(context.packagingEntry.transactionId));
       }
@@ -48098,6 +48958,7 @@ var SearchResultsContainer = function () {
                   (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.GroupTour
                 ) {
                   handleFlyInToggle(true);
+                  dispatch(setFlyInType('acco-details'));
                 }
                 _f.label = 1;
               case 1:
@@ -48189,13 +49050,15 @@ var SearchResultsContainer = function () {
       if (selectedPackagingAccoResultCode) {
         fetchPackagingAccoSearchDetails();
       }
-      dispatch(setAccommodationFlyInStep('details'));
     },
     [selectedSearchResult, selectedPackagingAccoResultCode]
   );
   React.useEffect(
     function () {
-      if ((context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.Accommodation) {
+      if (
+        (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.Accommodation ||
+        (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.AccommodationAndFlight
+      ) {
         var filteredPackageAccoResults = applyFiltersToPackageAccoResults(packagingAccoResults, filters, selectedSortType);
         dispatch(setFilteredPackagingAccoResults(filteredPackageAccoResults));
       } else {
@@ -48205,6 +49068,15 @@ var SearchResultsContainer = function () {
     },
     [filters, results, packagingAccoResults, selectedSortType]
   );
+  React.useEffect(
+    function () {
+      if ((context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.AccommodationAndFlight) {
+        var filteredPackageFlightResults = applyFiltersToPackageFlightResults(packagingFlightResults, flightFilters, selectedFlightSortType);
+        dispatch(setFilteredPackagingFlightResults(filteredPackageFlightResults));
+      }
+    },
+    [flightFilters, packagingFlightResults, selectedFlightSortType]
+  );
   React.useEffect(
     function () {
       setInitialFiltersSet(false);
@@ -48215,27 +49087,35 @@ var SearchResultsContainer = function () {
     function () {
       var fetchPriceDetails = function () {
         return __awaiter(void 0, void 0, void 0, function () {
-          var config, priceDetails, err_7;
-          return __generator(this, function (_a) {
-            switch (_a.label) {
+          var config, request, priceDetails, err_7;
+          var _a, _b;
+          return __generator(this, function (_c) {
+            switch (_c.label) {
               case 0:
                 if (!context || !editablePackagingEntry || lodash.isEmpty(editablePackagingEntry.lines)) return [2 /*return*/];
                 setPricesAreLoading(true);
-                _a.label = 1;
+                _c.label = 1;
               case 1:
-                _a.trys.push([1, 3, , 4]);
+                _c.trys.push([1, 3, , 4]);
                 config = {
                   host: context.tideConnection.host,
                   apiKey: context.tideConnection.apiKey
                 };
-                return [4 /*yield*/, build.getPriceDetails(config, editablePackagingEntry)];
+                request = {
+                  language: (_a = context.languageCode) !== null && _a !== void 0 ? _a : 'en-GB',
+                  officeId: context.tideConnection.officeId,
+                  catalogueId: (_b = context.searchConfiguration.defaultCatalogueId) !== null && _b !== void 0 ? _b : 0,
+                  agentId: context.agentId,
+                  payload: editablePackagingEntry
+                };
+                return [4 /*yield*/, build.getPriceDetails(config, request)];
               case 2:
-                priceDetails = _a.sent();
+                priceDetails = _c.sent();
                 dispatch(setPriceDetails(priceDetails));
                 setPricesAreLoading(false);
                 return [3 /*break*/, 4];
               case 3:
-                err_7 = _a.sent();
+                err_7 = _c.sent();
                 console.error('Error fetching price details', err_7);
                 setPricesAreLoading(false);
                 return [3 /*break*/, 4];
@@ -48247,29 +49127,35 @@ var SearchResultsContainer = function () {
       };
       var fetchItinerary = function () {
         return __awaiter(void 0, void 0, void 0, function () {
-          var config, itinerary_1, err_8;
-          return __generator(this, function (_a) {
-            switch (_a.label) {
+          var config, request, itinerary_1, err_8;
+          var _a, _b;
+          return __generator(this, function (_c) {
+            switch (_c.label) {
               case 0:
-                console.log('Fetching itinerary for entry', editablePackagingEntry);
-                if (!context || !editablePackagingEntry || lodash.isEmpty(editablePackagingEntry.lines)) return [2 /*return*/];
+                if (!context || !context.packagingEntry || !editablePackagingEntry || lodash.isEmpty(editablePackagingEntry.lines)) return [2 /*return*/];
                 setItineraryIsLoading(true);
-                _a.label = 1;
+                _c.label = 1;
               case 1:
-                _a.trys.push([1, 3, , 4]);
+                _c.trys.push([1, 3, , 4]);
                 config = {
                   host: context.tideConnection.host,
                   apiKey: context.tideConnection.apiKey
                 };
-                return [4 /*yield*/, build.getItinerary(config, editablePackagingEntry)];
+                request = {
+                  language: (_a = context.languageCode) !== null && _a !== void 0 ? _a : 'en-GB',
+                  officeId: context.tideConnection.officeId,
+                  catalogueId: (_b = context.searchConfiguration.defaultCatalogueId) !== null && _b !== void 0 ? _b : 0,
+                  agentId: context.agentId,
+                  payload: editablePackagingEntry
+                };
+                return [4 /*yield*/, build.getItinerary(config, request)];
               case 2:
-                itinerary_1 = _a.sent();
-                console.log('Fetched itinerary', itinerary_1);
+                itinerary_1 = _c.sent();
                 dispatch(setItinerary(itinerary_1));
                 setItineraryIsLoading(false);
                 return [3 /*break*/, 4];
               case 3:
-                err_8 = _a.sent();
+                err_8 = _c.sent();
                 console.error('Error fetching itinerary', err_8);
                 setItineraryIsLoading(false);
                 return [3 /*break*/, 4];
@@ -48285,36 +49171,22 @@ var SearchResultsContainer = function () {
     [editablePackagingEntry]
   );
   // Flight selection
-  var _m = React.useState(null),
-    selectedOutwardKey = _m[0],
-    setSelectedOutwardKey = _m[1];
-  var _o = React.useState(null),
-    selectedReturnKey = _o[0],
-    setSelectedReturnKey = _o[1];
-  var uniqueOutwardFlights = React__default['default'].useMemo(
-    function () {
-      var map = new Map();
-      packagingFlightResults.forEach(function (flight) {
-        var key = getFlightKey(flight.outward.segments);
-        if (!map.has(key)) {
-          map.set(key, flight);
-        }
-      });
-      return Array.from(map.values());
-    },
-    [packagingFlightResults]
-  );
-  var _p = React.useState([]),
-    uniqueReturnFlights = _p[0],
-    setUniqueReturnFlights = _p[1];
+  // const [selectedOutwardKey, setSelectedOutwardKey] = useState<string | null>(null);
+  // const [selectedReturnKey, setSelectedReturnKey] = useState<string | null>(null);
+  var selectedOutwardKey = reactRedux.useSelector(selectSelectedOutwardKey);
+  var selectedReturnKey = reactRedux.useSelector(selectSelectedReturnKey);
+  var uniqueOutwardFlights = reactRedux.useSelector(selectUniqueOutwardFlights);
+  var uniqueReturnFlights = reactRedux.useSelector(selectUniqueReturnFlights);
+  var selectedOutward = reactRedux.useSelector(selectSelectedOutward);
+  var selectedReturn = reactRedux.useSelector(selectSelectedReturn);
+  var selectedCombinationFlight = reactRedux.useSelector(selectSelectedCombinationFlight);
   React.useEffect(
     function () {
+      var _a;
       if (!selectedOutwardKey) {
-        setUniqueReturnFlights([]);
-        setSelectedReturnKey(null);
+        dispatch(setSelectedReturnKey(null));
         return;
       }
-      // Filter combinations that match selected outward fare
       var matchingCombinations = packagingFlightResults.filter(function (flight) {
         return getFlightKey(flight.outward.segments) === selectedOutwardKey;
       });
@@ -48326,40 +49198,26 @@ var SearchResultsContainer = function () {
         }
       });
       var returns = Array.from(returnMap.values());
-      setUniqueReturnFlights(returns);
-    },
-    [selectedOutwardKey, packagingFlightResults]
-  );
-  var selectedOutward = React__default['default'].useMemo(
-    function () {
-      if (!selectedOutwardKey) return null;
-      return (
-        packagingFlightResults.find(function (flight) {
-          return getFlightKey(flight.outward.segments) === selectedOutwardKey;
-        }) || null
-      );
-    },
-    [packagingFlightResults, selectedOutwardKey]
-  );
-  var selectedReturn = React__default['default'].useMemo(
-    function () {
-      if (!selectedReturnKey) return null;
-      return (
-        packagingFlightResults.find(function (flight) {
-          return getFlightKey(flight.return.segments) === selectedReturnKey;
-        }) || null
-      );
+      var segments = (_a = lodash.first(returns)) === null || _a === void 0 ? void 0 : _a.return.segments;
+      var firstReturnKey = returns.length > 0 && segments ? getFlightKey(segments) : null;
+      if (
+        !returns.some(function (x) {
+          return getFlightKey(x.return.segments) === selectedReturnKey;
+        })
+      ) {
+        dispatch(setSelectedReturnKey(firstReturnKey));
+      }
     },
-    [packagingFlightResults, selectedReturnKey]
+    [selectedOutwardKey, packagingFlightResults, selectedReturnKey, dispatch]
   );
-  var selectedCombinationFlight = React__default['default'].useMemo(
+  var visibleOutwardFlights = React__default['default'].useMemo(
     function () {
-      if (!selectedOutwardKey || !selectedReturnKey) return undefined;
-      return packagingFlightResults.find(function (flight) {
-        return getFlightKey(flight.outward.segments) === selectedOutwardKey && getFlightKey(flight.return.segments) === selectedReturnKey;
+      var withoutSelected = uniqueOutwardFlights.filter(function (x) {
+        return getFlightKey(x.outward.segments) !== selectedOutwardKey;
       });
+      return withoutSelected.slice(0, 3);
     },
-    [packagingFlightResults, selectedOutwardKey, selectedReturnKey]
+    [uniqueOutwardFlights, selectedOutwardKey]
   );
   // TODO: get details for selected combination flight and show in fly-in
   // useEffect(() => {
@@ -48368,6 +49226,7 @@ var SearchResultsContainer = function () {
   //   // onFlightSearch(selectedCombinationFlight); // Trigger search to update accommodation options based on selected flight
   //   dispatch(setFlyInIsOpen(true));
   // }, [selectedCombinationFlight, dispatch]);
+  // Build packagingEntry
   React.useEffect(
     function () {
       var _a, _b, _c, _d;
@@ -48395,7 +49254,6 @@ var SearchResultsContainer = function () {
             : '',
         language: (_d = context.languageCode) !== null && _d !== void 0 ? _d : 'en-GB'
       });
-      console.log('Built next packaging entry', nextEntry);
       if (!nextEntry) return;
       dispatch(setEditablePackagingEntry(nextEntry));
       if (selectedCombinationFlight) {
@@ -48611,7 +49469,6 @@ var SearchResultsContainer = function () {
           return r.code === selectedHotelCode;
         })
       : null;
-    console.log('Selected hotel for packaging entry', selectedHotel);
     // Update accommodation only when enough data exists
     if (selectedHotel) {
       var accommodationLines = buildAccommodationLinesFromSelection(selectedHotel, seed);
@@ -48623,8 +49480,6 @@ var SearchResultsContainer = function () {
     // Update flights only when full selected combination exists
     if (selectedFlight) {
       var flightLines = buildFlightLinesFromSelection(selectedFlight);
-      console.log('selectedFlight', selectedFlight);
-      console.log('Built flight lines from selection', flightLines);
       if (flightLines.length) {
         nextLines = removeFlightLines(nextLines);
         nextLines = __spreadArray(__spreadArray([], nextLines, true), flightLines, true);
@@ -48670,6 +49525,10 @@ var SearchResultsContainer = function () {
       lines: []
     };
   };
+  var handleShowMoreFlights = function (flyInType) {
+    dispatch(setFlyInType(flyInType));
+    dispatch(setFlyInIsOpen(true));
+  };
   return React__default['default'].createElement(
     'div',
     { id: 'tide-booking', className: 'search__bg' },
@@ -48686,7 +49545,6 @@ var SearchResultsContainer = function () {
               { tideConnection: context.tideConnection },
               React__default['default'].createElement(FlightResultsContainer, { isMobile: isMobile }),
               React__default['default'].createElement(FlyIn, {
-                title: 'Select your fare',
                 srpType: context.searchConfiguration.qsmType,
                 isOpen: flyInIsOpen,
                 setIsOpen: handleFlyInToggle,
@@ -48713,7 +49571,13 @@ var SearchResultsContainer = function () {
                     return setFiltersOpen(!filtersOpen);
                   },
                   // handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
-                  isLoading: isLoading
+                  isLoading: isLoading,
+                  setFilters: function (filters) {
+                    return dispatch(setFilters(filters));
+                  },
+                  resetFilters: function (filters) {
+                    return dispatch(resetFilters(filters));
+                  }
                 }),
               context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight &&
                 React__default['default'].createElement(Itinerary, {
@@ -48780,53 +49644,53 @@ var SearchResultsContainer = function () {
                         }
                       })
                   ),
-                React__default['default'].createElement(
-                  'div',
-                  { className: 'search__result-row' },
+                context.searchConfiguration.qsmType !== build.PortalQsmType.AccommodationAndFlight &&
                   React__default['default'].createElement(
-                    'span',
-                    { className: 'search__result-row-text' },
-                    !isLoading &&
-                      context.searchConfiguration.qsmType !== build.PortalQsmType.AccommodationAndFlight &&
+                    'div',
+                    { className: 'search__result-row' },
+                    React__default['default'].createElement(
+                      'span',
+                      { className: 'search__result-row-text' },
+                      !isLoading &&
+                        React__default['default'].createElement(
+                          React__default['default'].Fragment,
+                          null,
+                          context.searchConfiguration.qsmType === build.PortalQsmType.Accommodation &&
+                            (filteredPackagingAccoResults === null || filteredPackagingAccoResults === void 0 ? void 0 : filteredPackagingAccoResults.length) &&
+                            (filteredPackagingAccoResults === null || filteredPackagingAccoResults === void 0 ? void 0 : filteredPackagingAccoResults.length),
+                          context.searchConfiguration.qsmType !== build.PortalQsmType.Accommodation &&
+                            (filteredResults === null || filteredResults === void 0 ? void 0 : filteredResults.length) &&
+                            filteredResults.length,
+                          '\u00A0',
+                          translations.SRP.TOTAL_RESULTS_LABEL
+                        )
+                    ),
+                    !context.packagingEntry &&
+                      !isMobile &&
+                      sortByTypes &&
+                      sortByTypes.length > 0 &&
                       React__default['default'].createElement(
-                        React__default['default'].Fragment,
-                        null,
-                        context.searchConfiguration.qsmType === build.PortalQsmType.Accommodation &&
-                          (filteredPackagingAccoResults === null || filteredPackagingAccoResults === void 0 ? void 0 : filteredPackagingAccoResults.length) &&
-                          (filteredPackagingAccoResults === null || filteredPackagingAccoResults === void 0 ? void 0 : filteredPackagingAccoResults.length),
-                        context.searchConfiguration.qsmType !== build.PortalQsmType.Accommodation &&
-                          (filteredResults === null || filteredResults === void 0 ? void 0 : filteredResults.length) &&
-                          filteredResults.length,
-                        '\u00A0',
-                        translations.SRP.TOTAL_RESULTS_LABEL
+                        'div',
+                        { className: 'search__result-row-filter' },
+                        React__default['default'].createElement(ItemPicker, {
+                          items: sortByTypes,
+                          selection: (selectedSortType === null || selectedSortType === void 0 ? void 0 : selectedSortType.label) || undefined,
+                          selectedSortByType: selectedSortType,
+                          label: translations.SRP.SORTBY,
+                          placeholder: translations.SRP.SORTBY,
+                          classModifier: 'travel-class-picker__items',
+                          valueFormatter: function (value, direction) {
+                            return getSortingName(
+                              translations,
+                              findSortByType(sortByTypes, value, direction !== null && direction !== void 0 ? direction : 'asc')
+                            );
+                          },
+                          onPick: function (newSortKey, direction) {
+                            return handleSortChange(newSortKey, direction);
+                          }
+                        })
                       )
                   ),
-                  !context.packagingEntry &&
-                    !isMobile &&
-                    sortByTypes &&
-                    sortByTypes.length > 0 &&
-                    React__default['default'].createElement(
-                      'div',
-                      { className: 'search__result-row-filter' },
-                      React__default['default'].createElement(ItemPicker, {
-                        items: sortByTypes,
-                        selection: (selectedSortType === null || selectedSortType === void 0 ? void 0 : selectedSortType.label) || undefined,
-                        selectedSortByType: selectedSortType,
-                        label: translations.SRP.SORTBY,
-                        placeholder: translations.SRP.SORTBY,
-                        classModifier: 'travel-class-picker__items',
-                        valueFormatter: function (value, direction) {
-                          return getSortingName(
-                            translations,
-                            findSortByType(sortByTypes, value, direction !== null && direction !== void 0 ? direction : 'asc')
-                          );
-                        },
-                        onPick: function (newSortKey, direction) {
-                          return handleSortChange(newSortKey, direction);
-                        }
-                      })
-                    )
-                ),
                 React__default['default'].createElement(
                   'div',
                   { className: 'search__results__wrapper' },
@@ -48865,32 +49729,59 @@ var SearchResultsContainer = function () {
                           )
                         )
                       ),
-                      React__default['default'].createElement(
-                        'div',
-                        { className: 'search__results__cards search__results__cards--extended' },
-                        selectedOutwardKey && selectedOutward
-                          ? React__default['default'].createElement(IndependentFlightOption, {
-                              key: 'flight-'.concat(selectedOutwardKey),
-                              item: selectedOutward.outward,
-                              guid: selectedOutward.outwardGuid,
-                              onSelect: function () {
-                                return setSelectedOutwardKey(null);
-                              },
-                              selectedGuid: selectedOutward.outwardGuid,
-                              isOutward: true
-                            })
-                          : uniqueOutwardFlights.map(function (result) {
-                              return React__default['default'].createElement(IndependentFlightOption, {
-                                key: 'flight-'.concat(result.outwardGuid),
-                                item: result.outward,
-                                onSelect: function () {
-                                  return setSelectedOutwardKey(getFlightKey(result.outward.segments));
-                                },
-                                guid: result.outwardGuid,
-                                isOutward: true
-                              });
-                            })
-                      )
+                      flightsLoading
+                        ? React__default['default'].createElement(Spinner, null)
+                        : React__default['default'].createElement(
+                            React__default['default'].Fragment,
+                            null,
+                            React__default['default'].createElement(
+                              'div',
+                              { className: 'search__results__cards search__results__cards--extended' },
+                              selectedOutwardKey &&
+                                selectedOutward &&
+                                React__default['default'].createElement(IndependentFlightOption, {
+                                  key: 'flight-'.concat(selectedOutwardKey),
+                                  item: selectedOutward.outward,
+                                  guid: selectedOutward.outwardGuid,
+                                  onSelect: function () {
+                                    return dispatch(setSelectedOutwardKey(null));
+                                  },
+                                  selectedGuid: selectedOutward.outwardGuid,
+                                  isOutward: true,
+                                  showSelectedState: true,
+                                  price: selectedOutward.price
+                                }),
+                              visibleOutwardFlights.map(function (result) {
+                                return React__default['default'].createElement(IndependentFlightOption, {
+                                  key: 'flight-'.concat(result.outwardGuid),
+                                  item: result.outward,
+                                  onSelect: function () {
+                                    return dispatch(setSelectedOutwardKey(getFlightKey(result.outward.segments)));
+                                  },
+                                  guid: result.outwardGuid,
+                                  isOutward: true,
+                                  price: result.price,
+                                  currentSelectedPrice: selectedOutward === null || selectedOutward === void 0 ? void 0 : selectedOutward.price
+                                });
+                              })
+                            ),
+                            uniqueOutwardFlights &&
+                              uniqueOutwardFlights.length > 3 &&
+                              React__default['default'].createElement(
+                                'div',
+                                { className: 'search__results__cards__actions' },
+                                React__default['default'].createElement(
+                                  'button',
+                                  {
+                                    className: 'cta cta--secondary',
+                                    onClick: function () {
+                                      return handleShowMoreFlights('flight-outward-results');
+                                    }
+                                  },
+                                  translations.SRP.SHOW_MORE
+                                )
+                              )
+                          )
                     ),
                   context.showHotelAccommodationResults &&
                     !context.packagingEntry &&
@@ -48926,25 +49817,30 @@ var SearchResultsContainer = function () {
                       React__default['default'].createElement(
                         'div',
                         { className: 'search__results__cards search__results__cards--extended' },
-                        selectedReturnKey && selectedReturn
-                          ? React__default['default'].createElement(IndependentFlightOption, {
-                              key: 'flight-'.concat(selectedReturnKey),
-                              item: selectedReturn.return,
-                              guid: selectedReturn.outwardGuid,
-                              selectedGuid: selectedReturn.outwardGuid,
-                              isOutward: false
-                            })
-                          : uniqueReturnFlights.map(function (result) {
-                              return React__default['default'].createElement(IndependentFlightOption, {
-                                key: 'flight-'.concat(result.outwardGuid),
-                                item: result.return,
-                                onSelect: function () {
-                                  return setSelectedReturnKey(getFlightKey(result.return.segments));
-                                },
-                                guid: result.outwardGuid,
-                                isOutward: false
-                              });
-                            })
+                        selectedReturnKey &&
+                          selectedReturn &&
+                          React__default['default'].createElement(IndependentFlightOption, {
+                            key: 'flight-'.concat(selectedReturnKey),
+                            item: selectedReturn.return,
+                            guid: selectedReturn.outwardGuid,
+                            selectedGuid: selectedReturn.outwardGuid,
+                            isOutward: false,
+                            showSelectedState: true,
+                            price: selectedReturn.price
+                          }),
+                        uniqueReturnFlights.map(function (result) {
+                          return React__default['default'].createElement(IndependentFlightOption, {
+                            key: 'flight-'.concat(result.outwardGuid),
+                            item: result.return,
+                            onSelect: function () {
+                              return dispatch(setSelectedReturnKey(getFlightKey(result.return.segments)));
+                            },
+                            guid: result.outwardGuid,
+                            isOutward: false,
+                            currentSelectedPrice: selectedReturn === null || selectedReturn === void 0 ? void 0 : selectedReturn.price,
+                            price: result.price
+                          });
+                        })
                       )
                     ),
                   context.searchConfiguration.qsmType === build.PortalQsmType.AccommodationAndFlight &&
@@ -48954,7 +49850,6 @@ var SearchResultsContainer = function () {
                 )
               ),
               React__default['default'].createElement(FlyIn, {
-                title: ''.concat(translations.SRP.SELECT, ' ').concat(translations.SRP.ACCOMMODATION),
                 srpType: context.searchConfiguration.qsmType,
                 isOpen: flyInIsOpen,
                 setIsOpen: handleFlyInToggle,
@@ -48965,8 +49860,9 @@ var SearchResultsContainer = function () {
                   return (panelRef.current = el);
                 },
                 detailsLoading: detailsIsLoading,
-                accommodationStep: accommodationFlyInStep,
-                isPackageEditFlow: !!context.packagingEntry
+                flyInType: flyInType,
+                isPackageEditFlow: !!context.packagingEntry,
+                sortByTypes: sortByTypes
               })
             )
         )