@qite/tide-booking-component 1.4.38 → 1.4.40

package/src/search-results/components/flight/flight-search-context/index.tsx

@@ -0,0 +1,508 @@
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { concat, first, groupBy, isEmpty, minBy, orderBy } from 'lodash';
+import { ExtendedFlightSearchResponseItem, Filters, Sequence, SortByType } from '../../../types';
+import { getArrivalSegment, getDepartureSegment, getNumberOfStops } from '../../../utils/flight-utils';
+import { dateToDateStruct, durationInTicksInMinutes, rangeFromDateTimeInMinutes } from '../../../../shared/utils/localization-util';
+import { FlightSearchFinishResponse, FlightSearchRequest, FlightSearchResponse } from '@qite/tide-client';
+import { v4 as uuidv4 } from 'uuid';
+import { getDateAsDateFromParams, getNumberFromParams, getStringFromParams } from '../../../../shared/utils/query-string-util';
+
+interface FlightFilterContextProps {
+  children: React.ReactNode;
+  tideConnection: any;
+}
+
+interface FlightSearchContext {
+  // Search States
+  isHubReady: boolean;
+  currentRequestId: number;
+  valuesManuallyChanged: boolean;
+  flightsLoading: boolean;
+
+  // Search Results
+  flightSearchResults: ExtendedFlightSearchResponseItem[];
+  filteredResults: ExtendedFlightSearchResponseItem[];
+
+  // Filter
+  filters: Filters;
+  sortByTypes: SortByType[];
+  selectedSortByType: SortByType;
+
+  airlineResults: ExtendedFlightSearchResponseItem[];
+  numberOfStopsResults: ExtendedFlightSearchResponseItem[];
+  departureRangeResults: ExtendedFlightSearchResponseItem[];
+  departureAirportsResults: ExtendedFlightSearchResponseItem[];
+  arrivalAirportsResults: ExtendedFlightSearchResponseItem[];
+  travelTimeResults: ExtendedFlightSearchResponseItem[];
+  priceResults: ExtendedFlightSearchResponseItem[];
+
+  onFlightSearch: () => void;
+  setFlightSearchResults: (results: ExtendedFlightSearchResponseItem[]) => void;
+  // Filter Setters
+  setFilters: (filters: Filters) => void;
+  setFilteredResults: (results: ExtendedFlightSearchResponseItem[]) => void;
+  setSelectedSortByType: (val: SortByType) => void;
+  resetFilters: () => void;
+  setValuesManuallyChanged: (val: boolean) => void;
+  onFilter: () => void;
+}
+
+const initialState: FlightSearchContext = {
+  isHubReady: false,
+  currentRequestId: 0,
+  valuesManuallyChanged: false,
+  flightsLoading: false,
+  flightSearchResults: [],
+  filters: { airlines: [], numberOfStops: [], departureRanges: [], departureAirports: [], arrivalAirports: [], travelTimes: [], prices: [] } as Filters,
+  filteredResults: [],
+
+  sortByTypes: [
+    { direction: 'asc', label: 'price' } as SortByType,
+    { direction: 'desc', label: 'price' } as SortByType,
+    { direction: 'asc', label: 'departureTime' } as SortByType,
+    { direction: 'desc', label: 'departureTime' } as SortByType,
+    { direction: 'asc', label: 'durationInTicks' } as SortByType,
+    { direction: 'desc', label: 'durationInTicks' } as SortByType
+  ],
+  selectedSortByType: { direction: 'asc', label: 'price' } as SortByType,
+
+  airlineResults: [],
+  numberOfStopsResults: [],
+  departureRangeResults: [],
+  departureAirportsResults: [],
+  arrivalAirportsResults: [],
+  travelTimeResults: [],
+  priceResults: [],
+
+  onFlightSearch: () => {},
+  setFlightSearchResults: () => {},
+  setFilters: () => {},
+  setFilteredResults: () => {},
+  onFilter: () => {},
+  setSelectedSortByType: () => {},
+  setValuesManuallyChanged: () => {},
+  resetFilters: () => {}
+};
+
+const FlightSearchContext = React.createContext<FlightSearchContext>(initialState);
+
+export const FlightSearchProvider: React.FC<FlightFilterContextProps> = ({ children, tideConnection }) => {
+  const [flightSearchResults, setFlightSearchResults] = useState<ExtendedFlightSearchResponseItem[]>(initialState.flightSearchResults);
+  const hubProxyRef = useRef<any>(null);
+  const [flightsLoading, setFlightsLoading] = useState<boolean>(false);
+  const [isHubReady, setIsHubReady] = useState<boolean>(false);
+  const [currentRequestId, setCurrentRequestId] = useState<number>(0);
+  const [sequenceIds, setSequenceIds] = useState<Sequence[]>([]);
+  const [lastSequenceId, setLastSequenceId] = useState<number | null>(null);
+
+  // FILTER States
+  const [filters, setFilters] = useState<Filters>(initialState.filters);
+  const [groupedResults, setGroupedResults] = useState<ExtendedFlightSearchResponseItem[]>([]);
+  const [filteredResults, setFilteredResults] = useState<ExtendedFlightSearchResponseItem[]>(initialState.filteredResults);
+
+  const [valuesManuallyChanged, setValuesManuallyChanged] = useState<boolean>(initialState.valuesManuallyChanged);
+
+  const [airlineResults, setAirlineResults] = useState<ExtendedFlightSearchResponseItem[]>([]);
+  const [numberOfStopsResults, setNumberOfStopsResults] = useState<ExtendedFlightSearchResponseItem[]>([]);
+  const [departureRangeResults, setDepartureRangeResults] = useState<ExtendedFlightSearchResponseItem[]>([]);
+  const [departureAirportsResults, setDepartureAirportsResults] = useState<ExtendedFlightSearchResponseItem[]>([]);
+  const [arrivalAirportsResults, setArrivalAirportsResults] = useState<ExtendedFlightSearchResponseItem[]>([]);
+  const [travelTimeResults, setTravelTimeResults] = useState<ExtendedFlightSearchResponseItem[]>([]);
+  const [priceResults, setPriceResults] = useState<ExtendedFlightSearchResponseItem[]>([]);
+
+  const [sortByTypes] = useState<SortByType[]>(initialState.sortByTypes);
+  const [selectedSortByType, setSelectedSortByType] = useState<SortByType>(initialState.selectedSortByType);
+
+  // Connect to SignalR of Tide and set up listeners for results
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    console.log('Setting up SignalR connection for flight search results');
+    // @ts-ignore: SignalR augments jQuery
+    import('signalr-no-jquery').then(({ hubConnection }) => {
+      const connection = hubConnection(tideConnection.host, { useDefaultPath: true });
+      const hubProxy = connection.createHubProxy('Search');
+      let currentId = 0;
+
+      hubProxy.on('FlightResponse', (response: FlightSearchResponse) => {
+        console.log('FlightResponse received:', response);
+        if (currentId === response.requestId) {
+          const itemsWithGuid = response.items.map((item) => ({ ...item, guid: uuidv4(), requestId: response.requestId } as ExtendedFlightSearchResponseItem));
+          setFlightSearchResults((prevResults) => {
+            const oldResults = prevResults.filter((s) => s.requestId === response.requestId);
+            return concat(oldResults, itemsWithGuid);
+          });
+          setSequenceIds((prevIds) => {
+            const oldIds = prevIds.filter((seq) => seq.requestId === response.requestId);
+            return concat(oldIds, { requestId: response.requestId, sequenceId: response.sequenceId } as Sequence);
+          });
+        }
+      });
+
+      hubProxy.on('FinishResponse', (response: FlightSearchFinishResponse) => {
+        console.log('FinishResponse received');
+        if (currentId == response.requestId) {
+          setLastSequenceId(response.sequenceId);
+          // Build filters based on the received results
+        }
+      });
+
+      hubProxy.on('SetRequestId', (requestId: number) => {
+        setCurrentRequestId(requestId);
+        currentId = requestId;
+      });
+
+      connection.start().then(() => {
+        hubProxyRef.current = hubProxy;
+        setTimeout(() => {
+          setIsHubReady(true);
+        }, 1000); // Delay to ensure hub is ready
+      });
+
+      return () => {
+        connection.stop();
+      };
+    });
+  }, []);
+
+  // check if all sequences are received
+  useEffect(() => {
+    if (lastSequenceId != null) {
+      let hasAll = true;
+      for (var i = 0; i < lastSequenceId + 1; i++) {
+        if (!sequenceIds.map((seq) => seq.sequenceId).includes(i)) {
+          hasAll = false;
+          break;
+        }
+      }
+
+      if (hasAll) {
+        if (flightsLoading) {
+          setFlightsLoading(false);
+        }
+      }
+    }
+  }, [lastSequenceId, sequenceIds]);
+
+  const onFlightSearch = () => {
+    const hubProxy = hubProxyRef.current;
+    if (!hubProxy) {
+      console.error('Hub proxy not ready yet');
+      return;
+    }
+
+    const params = new URLSearchParams(location.search);
+    let fromDate = getDateAsDateFromParams(params, 'fromDate');
+    let toDate = getDateAsDateFromParams(params, 'toDate');
+
+    let departureAirport = getStringFromParams(params, 'departureAirport');
+    let destinationAirport = getStringFromParams(params, 'destinationAirport');
+    let returnAirport = getStringFromParams(params, 'returnAirport');
+    let onlyDirect = getStringFromParams(params, 'onlyDirect') === 'true' ? true : null;
+    let luggageIncluded = getStringFromParams(params, 'luggageIncluded') === 'true' ? true : null;
+    let travelClass = getStringFromParams(params, 'travelClass');
+    let adults = getNumberFromParams(params, 'adults');
+    let kids = getNumberFromParams(params, 'kids');
+    let babies = getNumberFromParams(params, 'babies');
+
+    let request = {
+      officeId: tideConnection?.officeId ?? 0,
+      catalogueId: first(tideConnection?.catalogueIds) ?? 0,
+      departureAirportCode: departureAirport,
+      arrivalAirportCode: destinationAirport,
+      // luggageIncluded: true,
+      maxStops: onlyDirect ? 0 : null,
+      travelClass: travelClass,
+      pax: concat(
+        Array.from({ length: adults ?? 0 }, (_, index) => ({
+          id: index,
+          age: 31
+        })),
+        Array.from({ length: kids ?? 0 }, (_, index) => ({
+          id: index + (adults ?? 0),
+          age: 8
+        })),
+        Array.from({ length: babies ?? 0 }, (_, index) => ({
+          id: index + (adults ?? 0) + (kids ?? 0),
+          age: 1
+        }))
+      )
+    } as FlightSearchRequest;
+
+    if (fromDate) {
+      request.outward = {
+        date: dateToDateStruct(fromDate)
+      };
+    }
+
+    if (toDate) {
+      request.return = {
+        date: dateToDateStruct(toDate)
+      };
+    }
+
+    try {
+      onCancelSearch();
+      setFlightSearchResults([]);
+      // setValuesManuallyChanged(false);
+      setSequenceIds([]);
+      setFlightsLoading(true);
+      hubProxy.invoke('SearchFlights', request);
+    } catch (err) {
+      console.error('Error invoking search:', err);
+    }
+  };
+
+  const onCancelSearch = () => {
+    const hubProxy = hubProxyRef.current;
+    if (!hubProxy) {
+      console.error('Hub proxy not ready yet');
+      return;
+    }
+
+    try {
+      if (currentRequestId) {
+        hubProxy.invoke('CancelSearch', currentRequestId);
+      }
+      console.log('CancelSearch invoked');
+    } catch (err) {
+      console.error('Error invoking search:', err);
+    }
+  };
+
+  useEffect(() => {
+    if (!isEmpty(flightSearchResults)) {
+      onFilter();
+    } else {
+      setFilteredResults([]);
+    }
+  }, [flightSearchResults]);
+
+  // Sort the grouped results
+  useEffect(() => {
+    if (groupedResults) {
+      setFilteredResults(sortResults(groupedResults));
+    }
+  }, [selectedSortByType, groupedResults]);
+
+  const sortResults = (results: ExtendedFlightSearchResponseItem[]) => {
+    switch (selectedSortByType.label) {
+      case 'departureTime':
+        return orderBy(
+          results,
+          [(result) => getDepartureSegment(result.outward)?.departureDateTime],
+          [selectedSortByType.direction] // or "desc"
+        );
+      case 'durationInTicks':
+        return orderBy(
+          results,
+          [(result) => durationInTicksInMinutes(result.outward?.durationInTicks ?? 0)],
+          [selectedSortByType.direction] // or "desc"
+        );
+      default:
+        return orderBy(results, [selectedSortByType.label], [selectedSortByType.direction]);
+    }
+  };
+
+  useEffect(() => {
+    if (filters && !isEmpty(filters)) {
+      onFilter();
+    }
+  }, [filters]);
+
+  const onFilter = () => {
+    if (!isEmpty(flightSearchResults)) {
+      const filterByAirline = (result: ExtendedFlightSearchResponseItem) => {
+        if (isEmpty(filters.airlines)) {
+          return true;
+        }
+        return filters.airlines.some((airline) => airline.id === result.airlineCode);
+      };
+
+      const filterByNumberOfStops = (result: ExtendedFlightSearchResponseItem) => {
+        if (isEmpty(filters.numberOfStops)) {
+          return true;
+        }
+        const outwardStops = getNumberOfStops(result.outward);
+        const returnStops = getNumberOfStops(result.return);
+        return filters.numberOfStops.some((stop) => stop.id === outwardStops && stop.id === returnStops);
+      };
+
+      const filterByDepartureRange = (result: ExtendedFlightSearchResponseItem) => {
+        if (isEmpty(filters.departureRanges)) {
+          return true;
+        }
+        const departureRange = rangeFromDateTimeInMinutes(getDepartureSegment(result.outward)?.departureDateTime);
+        return filters.departureRanges.some((range) => range.id === departureRange);
+      };
+
+      const filterByDepartureAirport = (result: ExtendedFlightSearchResponseItem) => {
+        if (isEmpty(filters.departureAirports)) {
+          return true;
+        }
+        return filters.departureAirports.some((airport) => airport.id === getDepartureSegment(result.outward)?.departureAirportCode);
+      };
+
+      const filterByArrivalAirport = (result: ExtendedFlightSearchResponseItem) => {
+        if (isEmpty(filters.arrivalAirports)) {
+          return true;
+        }
+        return filters.arrivalAirports.some((airport) => airport.id === getArrivalSegment(result.outward)?.arrivalAirportCode);
+      };
+
+      const filterByTravelTime = (result: ExtendedFlightSearchResponseItem) => {
+        if (isEmpty(filters.travelTimes) || filters.travelTimes.length !== 2 || result.outward?.durationInTicks === undefined) {
+          return true;
+        }
+
+        return (
+          durationInTicksInMinutes(result.outward?.durationInTicks) >= filters.travelTimes[0].lowestPrice &&
+          durationInTicksInMinutes(result.outward?.durationInTicks) <= filters.travelTimes[1].lowestPrice
+        );
+      };
+
+      const filterByPrice = (result: ExtendedFlightSearchResponseItem) => {
+        if (isEmpty(filters.prices) || filters.prices.length !== 2 || result.price === undefined) {
+          return true;
+        }
+
+        return result.price >= filters.prices[0].lowestPrice && result.price <= filters.prices[1].lowestPrice;
+      };
+
+      const filtered = flightSearchResults.filter(
+        (result) =>
+          filterByAirline(result) &&
+          filterByNumberOfStops(result) &&
+          filterByDepartureRange(result) &&
+          filterByDepartureAirport(result) &&
+          filterByArrivalAirport(result) &&
+          filterByTravelTime(result) &&
+          filterByPrice(result)
+      );
+      const grouped = groupBy(filtered, (x) => x.flightRouteId);
+      const lowestPerRoute = Object.values(grouped).map((group) => minBy(group, (item) => item.price));
+      setGroupedResults(lowestPerRoute.filter(Boolean) as ExtendedFlightSearchResponseItem[]);
+
+      // Set filter option
+      setAirlineResults(
+        flightSearchResults.filter(
+          (result) =>
+            filterByNumberOfStops(result) &&
+            filterByDepartureRange(result) &&
+            filterByDepartureAirport(result) &&
+            filterByArrivalAirport(result) &&
+            filterByTravelTime(result) &&
+            filterByPrice(result)
+        )
+      );
+      setNumberOfStopsResults(
+        flightSearchResults.filter(
+          (result) =>
+            filterByAirline(result) &&
+            filterByDepartureRange(result) &&
+            filterByDepartureAirport(result) &&
+            filterByArrivalAirport(result) &&
+            filterByTravelTime(result) &&
+            filterByPrice(result)
+        )
+      );
+      setDepartureRangeResults(
+        flightSearchResults.filter(
+          (result) =>
+            filterByAirline(result) &&
+            filterByNumberOfStops(result) &&
+            filterByDepartureAirport(result) &&
+            filterByArrivalAirport(result) &&
+            filterByTravelTime(result) &&
+            filterByPrice(result)
+        )
+      );
+      setDepartureAirportsResults(
+        flightSearchResults.filter(
+          (result) =>
+            filterByAirline(result) &&
+            filterByNumberOfStops(result) &&
+            filterByDepartureRange(result) &&
+            filterByArrivalAirport(result) &&
+            filterByTravelTime(result) &&
+            filterByPrice(result)
+        )
+      );
+      setArrivalAirportsResults(
+        flightSearchResults.filter(
+          (result) =>
+            filterByAirline(result) &&
+            filterByNumberOfStops(result) &&
+            filterByDepartureRange(result) &&
+            filterByDepartureAirport(result) &&
+            filterByTravelTime(result) &&
+            filterByPrice(result)
+        )
+      );
+      setTravelTimeResults(
+        flightSearchResults.filter(
+          (result) =>
+            filterByAirline(result) &&
+            filterByNumberOfStops(result) &&
+            filterByDepartureRange(result) &&
+            filterByDepartureAirport(result) &&
+            filterByArrivalAirport(result)
+        )
+      );
+      setPriceResults(
+        flightSearchResults.filter(
+          (result) =>
+            filterByAirline(result) &&
+            filterByNumberOfStops(result) &&
+            filterByDepartureRange(result) &&
+            filterByDepartureAirport(result) &&
+            filterByArrivalAirport(result) &&
+            filterByTravelTime(result)
+        )
+      );
+    }
+  };
+
+  const resetFilters = () => {
+    setFilters({ airlines: [], numberOfStops: [], departureRanges: [], departureAirports: [], arrivalAirports: [], travelTimes: [], prices: [] });
+  };
+
+  return (
+    <FlightSearchContext.Provider
+      value={{
+        flightsLoading,
+        isHubReady,
+        valuesManuallyChanged,
+        setValuesManuallyChanged,
+        currentRequestId,
+        onFlightSearch,
+        flightSearchResults,
+        setFlightSearchResults,
+        filters,
+        filteredResults,
+        sortByTypes,
+        selectedSortByType,
+        setFilters,
+        setFilteredResults,
+        onFilter,
+        setSelectedSortByType,
+        resetFilters,
+        airlineResults,
+        numberOfStopsResults,
+        departureRangeResults,
+        departureAirportsResults,
+        arrivalAirportsResults,
+        travelTimeResults,
+        priceResults
+      }}>
+      {children}
+    </FlightSearchContext.Provider>
+  );
+};
+
+export const useFlightSearch = (): FlightSearchContext => {
+  const context = useContext(FlightSearchContext);
+  if (!context) {
+    throw new Error('useFlightSearch must be used within a FlightSearchProvider');
+  }
+  return context;
+};

package/src/search-results/components/hotel/hotel-card.tsx

@@ -15,7 +15,6 @@ const HotelCard: React.FC<HotelCardProps> = ({ result, translations }) => {
   const { selectedHotelId } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
   const handleChange = (hotelProductId: number) => {
-    console.log('selected hotel changed to:', hotelProductId);
     dispatch(setSelectedHotel(hotelProductId));
   };