@qite/tide-booking-component 1.4.102 → 1.4.104

package/src/search-results/store/search-results-slice.ts

@@ -1,5 +1,5 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { AccommodationFlyInStep, ExtendedFlightSearchResponseItem, Filter, SortByType } from '../types';
+import { ExtendedFlightSearchResponseItem, Filter, FlyInType, SortByType } from '../types';
 import {
   BookingPackage,
   BookingPackageItem,
@@ -14,53 +14,87 @@ export interface SearchResultsState {
   results: BookingPackageItem[];
   filteredResults: BookingPackageItem[];
   selectedSearchResult: BookingPackageItem | null;
+
   packagingAccoResults: PackagingAccommodationResponse[];
   filteredPackagingAccoResults: PackagingAccommodationResponse[];
   packagingAccoSearchDetails: PackagingAccommodationResponse[];
   selectedPackagingAccoResultCode: string | null;
+
   packagingFlightResults: PackagingFlightResponse[];
+  filteredPackagingFlightResults: PackagingFlightResponse[];
   selectedPackagingFlight: PackagingFlightResponse | null;
+  selectedOutwardKey: string | null;
+  selectedReturnKey: string | null;
+
   selectedFlight: ExtendedFlightSearchResponseItem | null;
   selectedFlightDetails: ExtendedFlightSearchResponseItem | null;
+
   bookingPackageDetails: BookingPackage | null;
+  priceDetails: BookingPriceDetails | null;
+
   isLoading: boolean;
   flightsLoading: boolean;
-  filters: Filter[];
+
   selectedSortType: SortByType | null;
+  selectedFlightSortType: SortByType | null;
+  filters: Filter[];
+  initialFilters: Filter[];
+  flightFilters: Filter[];
+  initialFlightFilters: Filter[];
+
   activeTab: string | null;
   currentPage: number;
-  flyInIsOpen: boolean;
-  editablePackagingEntry: PackagingEntry | null;
+
   transactionId: string | null;
-  accommodationFlyInStep: AccommodationFlyInStep;
-  priceDetails: BookingPriceDetails | null;
+
+  flyInIsOpen: boolean;
+  flyInType: FlyInType | null;
+
   itinerary: ClientPortalItinerary | null;
+  editablePackagingEntry: PackagingEntry | null;
 }
 
 const initialState: SearchResultsState = {
   results: [],
   filteredResults: [],
   selectedSearchResult: null,
+
   packagingAccoResults: [],
   filteredPackagingAccoResults: [],
   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
 };
 
@@ -92,6 +126,9 @@ const searchResultsSlice = createSlice({
     setPackagingFlightResults(state, action: PayloadAction<PackagingFlightResponse[]>) {
       state.packagingFlightResults = action.payload;
     },
+    setFilteredPackagingFlightResults(state, action: PayloadAction<PackagingFlightResponse[]>) {
+      state.filteredPackagingFlightResults = action.payload;
+    },
     setSelectedPackagingFlight(state, action: PayloadAction<PackagingFlightResponse | null>) {
       state.selectedPackagingFlight = action.payload;
     },
@@ -122,6 +159,9 @@ const searchResultsSlice = createSlice({
     setFlightsLoading(state, action: PayloadAction<boolean>) {
       state.flightsLoading = action.payload;
     },
+    setInitialFilters(state, action: PayloadAction<Filter[]>) {
+      state.initialFilters = action.payload;
+    },
     setFilters(state, action: PayloadAction<Filter[]>) {
       const updatedFilters = action.payload;
 
@@ -137,9 +177,30 @@ const searchResultsSlice = createSlice({
     resetFilters(state, action: PayloadAction<Filter[]>) {
       state.filters = action.payload;
     },
+    setInitialFlightFilters(state, action: PayloadAction<Filter[]>) {
+      state.initialFlightFilters = action.payload;
+    },
+    setFlightFilters(state, action: PayloadAction<Filter[]>) {
+      const updatedFilters = action.payload;
+
+      updatedFilters.forEach((updatedFilter) => {
+        const existingIndex = state.flightFilters.findIndex((f) => f.property === updatedFilter.property);
+        if (existingIndex !== -1) {
+          state.flightFilters[existingIndex] = updatedFilter;
+        } else {
+          state.flightFilters.push(updatedFilter); // Optional: Add new filters if not present
+        }
+      });
+    },
+    resetFlightFilters(state, action: PayloadAction<Filter[]>) {
+      state.flightFilters = action.payload;
+    },
     setSortType(state, action: PayloadAction<SortByType | null>) {
       state.selectedSortType = action.payload;
     },
+    setFlightSortType(state, action: PayloadAction<SortByType | null>) {
+      state.selectedFlightSortType = action.payload;
+    },
     setActiveTab(state, action: PayloadAction<string | null>) {
       state.activeTab = action.payload;
     },
@@ -163,14 +224,24 @@ const searchResultsSlice = createSlice({
     setTransactionId(state, action: PayloadAction<string | null>) {
       state.transactionId = action.payload;
     },
-    setAccommodationFlyInStep(state, action: PayloadAction<AccommodationFlyInStep>) {
-      state.accommodationFlyInStep = action.payload;
+    setFlyInType(state, action: PayloadAction<FlyInType | null>) {
+      state.flyInType = action.payload;
     },
     setPriceDetails(state, action: PayloadAction<BookingPriceDetails | null>) {
       state.priceDetails = action.payload;
     },
     setItinerary(state, action: PayloadAction<ClientPortalItinerary | null>) {
       state.itinerary = action.payload;
+    },
+    setSelectedOutwardKey: (state, action: PayloadAction<string | null>) => {
+      state.selectedOutwardKey = action.payload;
+    },
+    setSelectedReturnKey: (state, action: PayloadAction<string | null>) => {
+      state.selectedReturnKey = action.payload;
+    },
+    resetFlightSelection: (state) => {
+      state.selectedOutwardKey = null;
+      state.selectedReturnKey = null;
     }
   }
 });
@@ -181,6 +252,7 @@ export const {
   setSelectedSearchResult,
   setPackagingAccoResults,
   setFilteredPackagingAccoResults,
+  setFilteredPackagingFlightResults,
   setPackagingAccoSearchDetails,
   setSelectedPackagingAccoResult,
   setPackagingFlightResults,
@@ -191,18 +263,26 @@ export const {
   selectFlight,
   setIsLoading,
   setFlightsLoading,
+  setInitialFilters,
   setFilters,
   resetFilters,
+  setInitialFlightFilters,
+  setFlightFilters,
+  resetFlightFilters,
   setSortType,
+  setFlightSortType,
   setActiveTab,
   setCurrentPage,
   resetSearchState,
   setFlyInIsOpen,
   setEditablePackagingEntry,
   setTransactionId,
-  setAccommodationFlyInStep,
+  setFlyInType,
   setPriceDetails,
-  setItinerary
+  setItinerary,
+  setSelectedOutwardKey,
+  setSelectedReturnKey,
+  resetFlightSelection
 } = searchResultsSlice.actions;
 
 export default searchResultsSlice.reducer;

package/src/search-results/types.ts

@@ -64,7 +64,19 @@ export interface SearchResultsConfiguration {
 
 export type FilterType = 'checkbox' | 'toggle' | 'slider' | 'star-rating';
 
-export type FilterProperty = 'regime' | 'accommodation' | 'max-duration' | 'price' | 'rating' | 'theme';
+export type FilterProperty =
+  | 'regime'
+  | 'accommodation'
+  | 'max-duration'
+  | 'price'
+  | 'rating'
+  | 'theme'
+  | 'airline'
+  | 'numberOfStops'
+  | 'departureRange'
+  | 'departureAirport'
+  | 'arrivalAirport'
+  | 'travelDuration';
 
 export interface FilterOption {
   label: string;
@@ -205,4 +217,4 @@ export type SearchSeed = {
   rooms: BookingPackageRequestRoom[];
 };
 
-export type AccommodationFlyInStep = 'results' | 'details';
+export type FlyInType = 'flight-outward-results' | 'flight-return-results' | 'flight-details' | 'acco-results' | 'acco-details';

package/src/search-results/utils/search-results-utils.ts

@@ -1,6 +1,9 @@
-import { BookingPackageItem, PackagingAccommodationResponse } from '@qite/tide-client';
+import { BookingPackageItem, PackagingAccommodationResponse, PackagingFlightResponse } from '@qite/tide-client';
 import { Filter, SortByType, TideTag } from '../types';
-import { first, flatMap } from 'lodash';
+import { filter, flatMap, orderBy } from 'lodash';
+import { getArrivalSegment, getDepartureRangeName, getDepartureSegment, getNumberOfStops } from './flight-utils';
+import { DepartureRange } from '../../shared/types';
+import { durationInTicksInMinutes, rangeFromDateTimeInMinutes } from '../../shared/utils/localization-util';
 
 export const enrichFiltersWithResults = (results: BookingPackageItem[], filters: Filter[] | undefined, tags: TideTag[]): Filter[] => {
   if (!results || results.length === 0 || !filters) {
@@ -79,76 +82,237 @@ export const enrichFiltersWithResults = (results: BookingPackageItem[], filters:
   });
 };
 
-export const enrichFiltersWithPackageAccoResults = (results: PackagingAccommodationResponse[], filters: Filter[] | undefined, tags: TideTag[]): Filter[] => {
-  if (!results || results.length === 0 || !filters) {
-    return filters ?? [];
+export const enrichFiltersWithPackageAccoResults = (results: PackagingAccommodationResponse[], tags: TideTag[]): Filter[] => {
+  const filters: Filter[] = [];
+  if (!results || results.length === 0) {
+    return filters;
   }
 
-  return filters.map((filter) => {
-    let updatedFilter = { ...filter };
-
-    if (filter.property === 'price' && (filter.min == null || filter.max == null)) {
-      const prices = results.map((r) => r.price ?? 0).filter((p) => p > 0);
-      if (prices.length > 0) {
-        updatedFilter.min = Math.floor(Math.min(...prices));
-        updatedFilter.max = Math.ceil(Math.max(...prices));
-      }
+  const regimeFilter: Filter = {
+    property: 'regime',
+    label: 'Regime',
+    type: 'checkbox',
+    options: [],
+    isFrontendFilter: true
+  };
+  const map = new Map<string, { name?: string; code: string }>();
+
+  results.forEach((r) => {
+    const rooms = flatMap(r.rooms);
+    if (rooms) {
+      rooms.map((room) => {
+        room.options.map((option) => {
+          if (option.regimeCode) {
+            map.set(option.regimeCode, {
+              name: option.regimeName,
+              code: option.regimeCode
+            });
+          }
+        });
+      });
     }
+  });
 
-    if (filter.property === 'accommodation') {
-      const map = new Map<string, { name?: string; code: string }>();
+  regimeFilter.options = Array.from(map.values()).map((regime) => ({
+    label: regime.name ?? regime.code,
+    value: regime.code,
+    isChecked: false
+  }));
+  filters.push(regimeFilter);
+
+  const priceFilter: Filter = {
+    property: 'price',
+    label: 'Prijs',
+    type: 'slider',
+    isFrontendFilter: true
+  };
+  const prices = results.map((r) => r.price ?? 0).filter((p) => p > 0);
+  priceFilter.min = Math.floor(Math.min(...prices));
+  priceFilter.max = Math.ceil(Math.max(...prices));
+
+  filters.push(priceFilter);
+
+  return filters;
+};
 
-      results.forEach((r) => {
-        const rooms = flatMap(r.rooms);
-        if (rooms) {
-          rooms.map((room) => {
-            room.options.map((option) => {
-              if (option.accommodationCode) {
-                map.set(option.accommodationCode, {
-                  name: option.accommodationName,
-                  code: option.accommodationCode
-                });
-              }
-            });
-          });
-        }
+export const enrichFiltersWithPackageFlightResults = (results: PackagingFlightResponse[], tags: TideTag[], translations: any): Filter[] => {
+  const filters: Filter[] = [];
+  if (!results || results.length === 0) {
+    return filters;
+  }
+
+  // Airlines
+  const airlinesFilter: Filter = {
+    label: 'Airlines',
+    property: 'airline',
+    type: 'checkbox',
+    isFrontendFilter: true,
+    options: []
+  };
+  const airlinesFilterMap = new Map<string, { name?: string; code: string }>();
+
+  results.map((r) => {
+    const airlineCode = r.airlineCode;
+    const airlineName = r.airlineName;
+    if (airlineCode && airlineName) {
+      airlinesFilterMap.set(airlineCode, {
+        name: airlineName,
+        code: airlineCode
       });
+    }
+  });
 
-      updatedFilter.options = Array.from(map.values()).map((accommodation) => ({
-        label: accommodation.name ?? accommodation.code,
-        value: accommodation.code,
-        isChecked: false
-      }));
+  airlinesFilter.options = Array.from(airlinesFilterMap.values()).map((airline) => ({
+    label: airline.name ?? airline.code,
+    value: airline.code,
+    isChecked: false
+  }));
+
+  filters.push(airlinesFilter);
+
+  // Number of stops
+  const stopsFilter: Filter = {
+    label: 'Number of Stops',
+    property: 'numberOfStops',
+    type: 'checkbox',
+    isFrontendFilter: true,
+    options: []
+  };
+  const stopsMap = new Map<number, { numberOfStops: number }>();
+
+  results.map((result) => {
+    let numberOfStops = getNumberOfStops(result.outward);
+    if (!stopsMap.has(numberOfStops)) {
+      stopsMap.set(numberOfStops, { numberOfStops });
     }
+  });
 
-    if (filter.property === 'regime') {
-      const map = new Map<string, { name?: string; code: string }>();
+  stopsFilter.options = Array.from(stopsMap.values()).map((stop) => ({
+    label: `${stop.numberOfStops == 0 ? 'direct' : stop.numberOfStops + ` Stop${stop.numberOfStops !== 1 ? 's' : ''}`}`,
+    value: stop.numberOfStops,
+    isChecked: false
+  }));
+
+  filters.push(stopsFilter);
+
+  // Departure range
+  const departureRangeFilter: Filter = {
+    label: 'Departure Range',
+    property: 'departureRange',
+    type: 'checkbox',
+    isFrontendFilter: true,
+    options: []
+  };
+  const departureRangeMap = new Map<DepartureRange, DepartureRange>();
+  results.map((result) => {
+    const departureRange = rangeFromDateTimeInMinutes(getDepartureSegment(result.outward)?.departureDateTime);
+    if (!departureRangeMap.has(departureRange)) {
+      departureRangeMap.set(departureRange, departureRange);
+    }
+  });
 
-      results.forEach((r) => {
-        const rooms = flatMap(r.rooms);
-        if (rooms) {
-          rooms.map((room) => {
-            room.options.map((option) => {
-              if (option.regimeCode) {
-                map.set(option.regimeCode, {
-                  name: option.regimeName,
-                  code: option.regimeCode
-                });
-              }
-            });
-          });
-        }
+  departureRangeFilter.options = orderBy(Array.from(departureRangeMap.values()), ['id'], ['asc']).map((range) => ({
+    label: getDepartureRangeName(translations, range),
+    value: range,
+    isChecked: false
+  }));
+
+  filters.push(departureRangeFilter);
+
+  // Departure Airport
+  const departureAirportFilter: Filter = {
+    label: 'Departure Airport',
+    property: 'departureAirport',
+    type: 'checkbox',
+    isFrontendFilter: true,
+    options: []
+  };
+  const departureAirportsMap = new Map<string, { name?: string; code: string }>();
+
+  results.map((result) => {
+    const departureSegment = getDepartureSegment(result.outward);
+    const departureAirport = departureSegment?.departureAirportCode;
+    if (departureAirport && !departureAirportsMap.has(departureAirport)) {
+      departureAirportsMap.set(departureAirport, {
+        name: departureSegment?.departureAirportName + ' (' + departureAirport + ')',
+        code: departureAirport
       });
-
-      updatedFilter.options = Array.from(map.values()).map((regime) => ({
-        label: regime.name ?? regime.code,
-        value: regime.code,
-        isChecked: false
-      }));
     }
+  });
 
-    return updatedFilter;
+  departureAirportFilter.options = Array.from(departureAirportsMap.values()).map((airport) => ({
+    label: airport.name ?? airport.code,
+    value: airport.code,
+    isChecked: false
+  }));
+
+  filters.push(departureAirportFilter);
+
+  // Arrival Airport
+  const arrivalAirportFilter: Filter = {
+    label: 'Arrival Airport',
+    property: 'arrivalAirport',
+    type: 'checkbox',
+    isFrontendFilter: true,
+    options: []
+  };
+  const arrivalAirportsMap = new Map<string, { name?: string; code: string }>();
+
+  results.map((result) => {
+    const arrivalSegment = getArrivalSegment(result.outward);
+    const arrivalAirport = arrivalSegment?.arrivalAirportCode;
+    if (arrivalAirport && !arrivalAirportsMap.has(arrivalAirport)) {
+      arrivalAirportsMap.set(arrivalAirport, {
+        name: arrivalSegment?.arrivalAirportName + ' (' + arrivalAirport + ')',
+        code: arrivalAirport
+      });
+    }
   });
+
+  arrivalAirportFilter.options = Array.from(arrivalAirportsMap.values()).map((airport) => ({
+    label: airport.name ?? airport.code,
+    value: airport.code,
+    isChecked: false
+  }));
+
+  filters.push(arrivalAirportFilter);
+
+  // Price
+  const priceFilter: Filter = {
+    label: 'Price',
+    property: 'price',
+    type: 'slider',
+    isFrontendFilter: true
+  };
+
+  const prices = results.map((r) => r.price ?? 0).filter((p) => p > 0);
+  if (prices.length > 0) {
+    priceFilter.min = Math.floor(Math.min(...prices));
+    priceFilter.max = Math.ceil(Math.max(...prices));
+  }
+
+  filters.push(priceFilter);
+
+  // Travel duration
+  const travelDurationFilter: Filter = {
+    label: 'Travel Duration',
+    property: 'travelDuration',
+    type: 'slider',
+    isFrontendFilter: true
+  };
+
+  const minTravelTimeDuration = Math.min(...results.map((result) => result.outward.durationInTicks));
+  const maxTravelTimeDuration = Math.max(...results.map((result) => result.outward.durationInTicks));
+  const minTravelTimeValue = durationInTicksInMinutes(minTravelTimeDuration);
+  const maxTravelTimeValue = durationInTicksInMinutes(maxTravelTimeDuration);
+  if (minTravelTimeValue != null && maxTravelTimeValue != null) {
+    travelDurationFilter.min = minTravelTimeValue;
+    travelDurationFilter.max = maxTravelTimeValue;
+  }
+
+  filters.push(travelDurationFilter);
+
+  return filters;
 };
 
 export const applyFilters = (results: BookingPackageItem[], filters: Filter[], sortBy: SortByType | null) => {
@@ -249,3 +413,91 @@ export const applyFiltersToPackageAccoResults = (results: PackagingAccommodation
     return 0;
   });
 };
+
+export const applyFiltersToPackageFlightResults = (results: PackagingFlightResponse[], filters: Filter[], sortBy: SortByType | null) => {
+  const filtered = results.filter((result) => {
+    return filters.every((filter) => {
+      if (!filter.isFrontendFilter) return true;
+
+      // Airline
+      if (filter.property === 'airline') {
+        const selected = filter.options?.filter((o) => o.isChecked).map((o) => o.value);
+        if (!selected || selected.length === 0) return true;
+        return selected.includes(result.airlineCode);
+      }
+
+      // Stops
+      if (filter.property === 'numberOfStops') {
+        const selected = filter.options?.filter((o) => o.isChecked).map((o) => 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') {
+        const selected = filter.options?.filter((o) => o.isChecked).map((o) => o.value);
+        if (!selected || selected.length === 0) return true;
+        return selected.includes(rangeFromDateTimeInMinutes(getDepartureSegment(result.outward)?.departureDateTime));
+      }
+
+      // Departure airport
+      if (filter.property === 'departureAirport') {
+        const selected = filter.options?.filter((o) => o.isChecked).map((o) => o.value);
+        if (!selected || selected.length === 0) return true;
+
+        const departureAirportCode = getDepartureSegment(result.outward)?.departureAirportCode;
+        if (!departureAirportCode) return false;
+
+        return selected.includes(departureAirportCode);
+      }
+
+      // Arrival airport
+      if (filter.property === 'arrivalAirport') {
+        const selected = filter.options?.filter((o) => o.isChecked).map((o) => o.value);
+        if (!selected || selected.length === 0) return true;
+
+        const arrivalAirportCode = getArrivalSegment(result.outward)?.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(result.outward?.durationInTicks) < filter.selectedMin) return false;
+        if (filter.selectedMax != null && durationInTicksInMinutes(result.outward?.durationInTicks) > filter.selectedMax) return false;
+        return true;
+      }
+
+      return true;
+    });
+  });
+
+  // SORTING
+  if (!sortBy || sortBy.label === 'default') {
+    return filtered;
+  }
+
+  if (sortBy.label === 'departureTime') {
+    return orderBy(
+      results,
+      [(result) => getDepartureSegment(result.outward)?.departureDateTime],
+      [sortBy.direction] // or "desc"
+    );
+  } else if (sortBy.label === 'durationInTicks') {
+    return orderBy(
+      results,
+      [(result) => durationInTicksInMinutes(result.outward?.durationInTicks ?? 0)],
+      [sortBy.direction] // or "desc"
+    );
+  } else {
+    return orderBy(results, [sortBy.label], [sortBy.direction]);
+  }
+};