@qite/tide-booking-component 1.4.103 → 1.4.104

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]);
+  }
+};

package/src/shared/components/flyin/flyin.tsx

@@ -1,23 +1,31 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import Icon from '../icon';
 import { useFlightSearch } from '../../../search-results/components/flight/flight-search-context';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import {
-  setAccommodationFlyInStep,
+  resetFilters,
+  setFilters,
+  setFlyInType,
   setSelectedFlight,
   setSelectedFlightDetails,
   setSelectedPackagingAccoResult,
-  setSelectedSearchResult
+  setSelectedSearchResult,
+  setSortType
 } from '../../../search-results/store/search-results-slice';
 import FlightsFlyIn from './flights-flyin';
 import AccommodationFlyIn from './accommodation-flyin';
 import { PortalQsmType } from '@qite/tide-client';
 import GroupTourFlyIn from './group-tour-flyin';
-import { AccommodationFlyInStep } from '../../../search-results/types';
+import { FlyInType, SortByType } from '../../../search-results/types';
 import HotelAccommodationResults from '../../../search-results/components/hotel/hotel-accommodation-results';
+import PackageingFlightsFlyIn from './packaging-flights-flyin';
+import SearchResultsConfigurationContext from '../../../search-results/search-results-configuration-context';
+import { findSortByType, getSortingName, getTranslations } from '../../utils/localization-util';
+import Filters from '../../../search-results/components/filters/filters';
+import { SearchResultsRootState } from '../../../search-results/store/search-results-store';
+import ItemPicker from '../../../search-results/components/item-picker';
 
 type FlyInProps = {
-  title: string;
   srpType: PortalQsmType;
   isOpen: boolean;
   setIsOpen: (open: boolean) => void;
@@ -25,23 +33,32 @@ type FlyInProps = {
   onPanelRef?: (el: HTMLDivElement | null) => void;
   detailsLoading: boolean;
   handleConfirm?: () => void;
-  accommodationStep?: AccommodationFlyInStep;
+  flyInType?: FlyInType | null;
   isPackageEditFlow?: boolean;
+  sortByTypes?: SortByType[];
 };
 
 const FlyIn: React.FC<FlyInProps> = ({
-  title,
   srpType,
   isOpen,
   setIsOpen,
   className = '',
   onPanelRef,
   detailsLoading,
-  accommodationStep,
+  flyInType,
   isPackageEditFlow,
-  handleConfirm
+  handleConfirm,
+  sortByTypes
 }) => {
   const dispatch = useDispatch();
+  const context = useContext(SearchResultsConfigurationContext);
+  const language = context?.languageCode ?? 'en-GB';
+  const translations = getTranslations(language);
+
+  const { isLoading, initialFilters, filters, filteredPackagingAccoResults, selectedSortType } = useSelector(
+    (state: SearchResultsRootState) => state.searchResults
+  );
+
   const { onCancelSearch } = useFlightSearch();
   const panelRef = useRef<HTMLDivElement>(null);
 
@@ -81,26 +98,52 @@ const FlyIn: React.FC<FlyInProps> = ({
         dispatch(setSelectedSearchResult(null));
         dispatch(setSelectedPackagingAccoResult(null));
       }
-      dispatch(setAccommodationFlyInStep('details'));
+      dispatch(setFlyInType('acco-details'));
       setIsOpen(false);
     }
   };
 
   const handleGoBack = () => {
-    dispatch(setAccommodationFlyInStep('results'));
+    dispatch(setFlyInType('acco-results'));
+  };
+
+  const handleSortChange = (newSortKey: string, direction?: string) => {
+    if (sortByTypes === undefined) return;
+    const newSortByType = findSortByType(sortByTypes, newSortKey, direction ?? 'asc');
+    if (newSortByType) {
+      dispatch(setSortType(newSortByType));
+    }
   };
 
   return (
-    <div className={`flyin ${isOpen ? 'flyin--active' : ''} ${className} ${isPackageEditFlow ? 'flyin--large' : ''}`}>
+    <div
+      className={`flyin ${isOpen ? 'flyin--active' : ''} ${className} ${
+        isPackageEditFlow || flyInType === 'flight-outward-results' || flyInType === 'flight-return-results' || flyInType === 'acco-results'
+          ? 'flyin--large'
+          : ''
+      }`}>
       <div className={`flyin__panel ${isOpen ? 'flyin__panel--active' : ''}`} ref={panelRef}>
         <div className="flyin__content">
           <div className="flyin__content-title-row">
-            <h3 className="flyin__content-title">{title}</h3>
+            <h3 className="flyin__content-title">
+              {srpType === PortalQsmType.Flight && 'Select your fare'}
+              {srpType === PortalQsmType.Accommodation ||
+                (srpType === PortalQsmType.AccommodationAndFlight &&
+                  (flyInType === 'acco-results' || flyInType === 'acco-details') &&
+                  `${translations.SRP.SELECT} ${translations.SRP.ACCOMMODATION}`)}
+              {srpType === PortalQsmType.AccommodationAndFlight &&
+                flyInType === 'flight-outward-results' &&
+                `${translations.SRP.SELECT} ${translations.FLIGHTS_FORM.OUTWARD_FLIGHT}`}
+              {srpType === PortalQsmType.AccommodationAndFlight &&
+                flyInType === 'flight-return-results' &&
+                `${translations.SRP.SELECT} ${translations.FLIGHTS_FORM.RETURN_FLIGHT}`}
+              {srpType === PortalQsmType.AccommodationAndFlight && flyInType === 'flight-details' && 'Select your fare'}
+            </h3>
             <span className="flyin__close" onClick={() => handleClose()}>
               <Icon name="ui-close" width={30} height={30} aria-hidden="true" />
             </span>
           </div>
-          {isPackageEditFlow && accommodationStep === 'details' && (
+          {isPackageEditFlow && flyInType === 'acco-details' && (
             <div className="flyin__content-title-row">
               <div onClick={handleGoBack} className="flyin__content-title__back">
                 <Icon name="ui-chevron" width={14} height={14} aria-hidden="true" />
@@ -111,16 +154,56 @@ const FlyIn: React.FC<FlyInProps> = ({
         </div>
         {srpType === PortalQsmType.Flight && <FlightsFlyIn isOpen={isOpen} setIsOpen={setIsOpen} />}
 
-        {(srpType === PortalQsmType.Accommodation || srpType === PortalQsmType.AccommodationAndFlight) && accommodationStep === 'results' && (
-          <div className="flyin__content">
-            <HotelAccommodationResults isLoading={detailsLoading} />
+        {(srpType === PortalQsmType.Accommodation || srpType === PortalQsmType.AccommodationAndFlight) && flyInType === 'acco-results' && (
+          <div className="flyin__content flyin__content--columns">
+            <Filters
+              initialFilters={initialFilters}
+              filters={filters}
+              isOpen={false}
+              handleSetIsOpen={() => {}}
+              // handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
+              isLoading={isLoading}
+              setFilters={(filters) => dispatch(setFilters(filters))}
+              resetFilters={(filters) => dispatch(resetFilters(filters))}
+            />
+            <div className="search__results__wrapper">
+              <div className="search__result-row">
+                <span className="search__result-row-text">
+                  {!isLoading && (
+                    <>
+                      {filteredPackagingAccoResults?.length && filteredPackagingAccoResults.length}
+                      &nbsp;{translations.SRP.TOTAL_RESULTS_LABEL}
+                    </>
+                  )}
+                </span>
+                {sortByTypes && sortByTypes.length > 0 && (
+                  <div className="search__result-row-filter">
+                    <ItemPicker
+                      items={sortByTypes}
+                      selection={selectedSortType?.label || undefined}
+                      selectedSortByType={selectedSortType}
+                      label={translations.SRP.SORTBY}
+                      placeholder={translations.SRP.SORTBY}
+                      classModifier="travel-class-picker__items"
+                      valueFormatter={(value, direction) => getSortingName(translations, findSortByType(sortByTypes, value, direction ?? 'asc'))}
+                      onPick={(newSortKey, direction) => handleSortChange(newSortKey, direction)}
+                    />
+                  </div>
+                )}
+              </div>
+              <HotelAccommodationResults isLoading={detailsLoading} isFlyIn={true} />
+            </div>
           </div>
         )}
 
-        {(srpType === PortalQsmType.Accommodation || srpType === PortalQsmType.AccommodationAndFlight) && accommodationStep === 'details' && (
+        {(srpType === PortalQsmType.Accommodation || srpType === PortalQsmType.AccommodationAndFlight) && flyInType === 'acco-details' && (
           <AccommodationFlyIn isLoading={detailsLoading} handleConfirm={handleConfirm!} />
         )}
 
+        {srpType === PortalQsmType.AccommodationAndFlight && (flyInType === 'flight-outward-results' || flyInType === 'flight-return-results') && (
+          <PackageingFlightsFlyIn isOpen={isOpen} setIsOpen={setIsOpen} />
+        )}
+
         {srpType === PortalQsmType.GroupTour && <GroupTourFlyIn isLoading={detailsLoading} isOpen={isOpen} setIsOpen={setIsOpen} />}
       </div>
     </div>