@qite/tide-booking-component 1.4.39 → 1.4.41

package/src/search-results/components/search-results-container/search-results-container.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { SearchResultsRootState } from '../../store/search-results-store';
 import SearchResultsConfigurationContext from '../../search-results-configuration-context';
@@ -6,7 +6,6 @@ import SearchResultsConfigurationContext from '../../search-results-configuratio
 import { resetFilters, setSortKey, setResults, setIsLoading, setSelectedHotel, setBookingPackageDetails, setEntry } from '../../store/search-results-slice';
 import { Filter, SortingOption } from '../../types';
 import useMediaQuery from '../../../shared/utils/use-media-query-util';
-import Filters from '../filters/filters';
 import ItemPicker from '../item-picker';
 
 import { TideClientConfig, details, detailsWL, getEntryLight, search } from '@qite/tide-client';
@@ -26,13 +25,14 @@ import { Room } from '../../../booking-wizard/types';
 import Icon from '../icon';
 import Itinerary from '../itinerary';
 import TabViews from '../tab-views';
+import FlyIn from '../../../shared/components/flyin';
 import HotelAccommodationResults from '../hotel/hotel-accommodation-results';
 import RoundTripResults from '../round-trip/round-trip-results';
 import { enrichFiltersWithResults } from '../filters/utility';
 import FlightResults from '../flight/flight-results';
 import { getTranslations } from '../../../shared/utils/localization-util';
-import filters from '../filters/filters';
-import FlightAccommodationResults from '../flight/flight-accommodation-results';
+import { FlightSearchProvider } from '../flight/flight-search-context';
+import FlightResultsContainer from './flight-search-results';
 
 const SearchResultsContainer: React.FC = () => {
   const dispatch = useDispatch();
@@ -52,6 +52,9 @@ const SearchResultsContainer: React.FC = () => {
   const [filtersOpen, setFiltersOpen] = useState(false);
   const [itineraryOpen, setItineraryOpen] = useState(false);
 
+  const [isOpen, setIsOpen] = useState(false);
+  const panelRef = useRef<HTMLDivElement | null>(null);
+
   const sortingOptions: SortingOption[] = [
     { key: 'price-asc', label: translations.SRP.PRICE_ASC },
     { key: 'price-desc', label: translations.SRP.PRICE_DESC },
@@ -275,7 +278,7 @@ const SearchResultsContainer: React.FC = () => {
 
   // seperate Search
   useEffect(() => {
-    const runSearch = async () => {
+    const runHotelFlightSearch = async () => {
       dispatch(setIsLoading(true));
       try {
         if (!context) {
@@ -335,7 +338,9 @@ const SearchResultsContainer: React.FC = () => {
     };
 
     if (!context?.showMockup) {
-      runSearch();
+      if (context?.type === 'hotel-flight') {
+        runHotelFlightSearch();
+      }
     }
   }, [location.search, searchTrigger]);
 
@@ -411,7 +416,14 @@ const SearchResultsContainer: React.FC = () => {
       {context && (
         <div className="search">
           <div className="search__container">
-            {context.showFilters && (
+            {context.type === 'flight' && (
+              <FlightSearchProvider tideConnection={context.tideConnection}>
+                <FlightResultsContainer isMobile={isMobile} />
+              </FlightSearchProvider>
+            )}
+            {context.type === 'hotel-flight' && (
+              <>
+                {/* {context.showFilters && (
               <Filters
                 filters={filters}
                 isOpen={filtersOpen}
@@ -419,78 +431,81 @@ const SearchResultsContainer: React.FC = () => {
                 handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
                 isLoading={isLoading}
               />
-            )}
-            {context.type === 'hotel-flight' && (
-              <Itinerary isOpen={itineraryOpen} handleSetIsOpen={() => setItineraryOpen(!itineraryOpen)} isLoading={isLoading} />
-            )}
-            {/* ---------------- Results ---------------- */}
-            <div className="search__results">
-              {isMobile && (
-                <div className="search__result-row">
-                  <div className="search__results__actions">
-                    {context.showFilters && (
-                      <div className="cta cta--filter" onClick={() => setFiltersOpen(true)}>
-                        <Icon name="ui-filter" className="mobile-filters-button__icon" height={16} />
-                        {translations.SRP.FILTERS}
+            )} */}
+                <Itinerary isOpen={itineraryOpen} handleSetIsOpen={() => setItineraryOpen(!itineraryOpen)} isLoading={isLoading} />
+                {/* ---------------- Results ---------------- */}
+                <div className="search__results">
+                  {isMobile && (
+                    <div className="search__result-row">
+                      <div className="search__results__actions">
+                        {context.showFilters && (
+                          <div className="cta cta--filter" onClick={() => setFiltersOpen(true)}>
+                            <Icon name="ui-filter" className="mobile-filters-button__icon" height={16} />
+                            {translations.SRP.FILTERS}
+                          </div>
+                        )}
+                        {context.type === 'hotel-flight' && (
+                          <div className="cta cta--filter" onClick={() => setItineraryOpen(true)}>
+                            <Icon name="ui-calendar" className="mobile-filters-button__icon" height={16} />
+                            {translations.SRP.SHOW_ITINERARY}
+                          </div>
+                        )}
                       </div>
-                    )}
-                    <div className="cta cta--filter" onClick={() => setItineraryOpen(true)}>
-                      <Icon name="ui-calendar" className="mobile-filters-button__icon" height={16} />
-                      {translations.SRP.SHOW_ITINERARY}
+                      {sortingOptions && sortingOptions.length > 0 && (
+                        <ItemPicker
+                          items={sortingOptions}
+                          selection={sortKey || undefined}
+                          label={translations.SRP.SORTBY}
+                          placeholder={translations.SRP.SORTBY}
+                          classModifier="travel-class-picker__items"
+                          onPick={handleSortChange}
+                        />
+                      )}
                     </div>
-                  </div>
-                  {sortingOptions && sortingOptions.length > 0 && (
-                    <ItemPicker
-                      items={sortingOptions}
-                      selection={sortKey || undefined}
-                      label={translations.SRP.SORTBY}
-                      placeholder={translations.SRP.SORTBY}
-                      classModifier="travel-class-picker__items"
-                      onPick={handleSortChange}
-                    />
                   )}
-                </div>
-              )}
-
-              <div className="search__result-row">
-                <span className="search__result-row-text">
-                  {!isLoading && (
-                    <>
-                      {results?.length ?? 4} {translations.SRP.TOTAL_RESULTS_LABEL}
-                    </>
-                  )}
-                </span>
-                {!isMobile && sortingOptions && sortingOptions.length > 0 && (
-                  <div className="search__result-row-filter">
-                    <ItemPicker
-                      items={sortingOptions}
-                      selection={sortKey || undefined}
-                      label={translations.SRP.SORTBY}
-                      placeholder={translations.SRP.SORTBY}
-                      classModifier="travel-class-picker__items"
-                      onPick={handleSortChange}
-                    />
+
+                  <div className="search__result-row">
+                    <span className="search__result-row-text">
+                      {!isLoading && (
+                        <>
+                          {results?.length && results.length} {translations.SRP.TOTAL_RESULTS_LABEL}
+                        </>
+                      )}
+                    </span>
+                    {!isMobile && sortingOptions && sortingOptions.length > 0 && (
+                      <div className="search__result-row-filter">
+                        <ItemPicker
+                          items={sortingOptions}
+                          selection={sortKey || undefined}
+                          label={translations.SRP.SORTBY}
+                          placeholder={translations.SRP.SORTBY}
+                          classModifier="travel-class-picker__items"
+                          onPick={handleSortChange}
+                        />
+                      </div>
+                    )}
                   </div>
-                )}
-              </div>
 
-              <div className="search__results__wrapper">
-                {context.showTabViews && <TabViews />}
+                  <div className="search__results__wrapper">
+                    {context.showTabViews && <TabViews />}
 
-                {context.showRoundTripResults && context.showMockup && <RoundTripResults />}
+                    {context.showRoundTripResults && context.showMockup && <RoundTripResults />}
 
-                {context.showFlightResults && bookingPackageDetails?.outwardFlights && (
-                  <FlightResults flights={bookingPackageDetails?.outwardFlights} isDeparture={true} />
-                )}
+                    {context.showFlightResults && bookingPackageDetails?.outwardFlights && (
+                      <FlightResults flights={bookingPackageDetails?.outwardFlights} isDeparture={true} />
+                    )}
 
-                {context.showHotelAccommodationResults && <HotelAccommodationResults isLoading={isLoading} context={context} />}
-                {context.showFlightAccommodationResults && context.showMockup && <FlightAccommodationResults />}
+                    {context.showHotelAccommodationResults && <HotelAccommodationResults isLoading={isLoading} context={context} />}
 
-                {context.showFlightResults && bookingPackageDetails?.returnFlights && (
-                  <FlightResults flights={bookingPackageDetails?.returnFlights} isDeparture={false} />
-                )}
-              </div>
-            </div>
+                    {context.showFlightResults && bookingPackageDetails?.returnFlights && (
+                      <FlightResults flights={bookingPackageDetails?.returnFlights} isDeparture={false} />
+                    )}
+                  </div>
+                </div>
+              </>
+            )}
+            <button onClick={() => setIsOpen(!isOpen)}>Toggle FlyIn</button>
+            <FlyIn isOpen={isOpen} setIsOpen={setIsOpen} onPanelRef={(el) => (panelRef.current = el)} />
           </div>
         </div>
       )}

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

@@ -5,6 +5,7 @@ import { BookingPackage, BookingPackageItem, EntryLight } from '@qite/tide-clien
 export interface SearchResultsState {
   results: BookingPackageItem[];
   selectedHotelId: number | null;
+  selectedFlightId: string | null;
   bookingPackageDetails: BookingPackage | null;
   entry: EntryLight | null;
   isLoading: boolean;
@@ -17,6 +18,7 @@ export interface SearchResultsState {
 const initialState: SearchResultsState = {
   results: [],
   selectedHotelId: null,
+  selectedFlightId: null,
   bookingPackageDetails: null,
   entry: null,
   isLoading: false,
@@ -36,6 +38,9 @@ const searchResultsSlice = createSlice({
     setSelectedHotel(state, action: PayloadAction<number | null>) {
       state.selectedHotelId = action.payload;
     },
+    setSelectedFlight(state, action: PayloadAction<string | null>) {
+      state.selectedFlightId = action.payload;
+    },
     setBookingPackageDetails(state, action: PayloadAction<{ details: BookingPackage }>) {
       state.bookingPackageDetails = action.payload.details;
     },
@@ -95,6 +100,7 @@ const searchResultsSlice = createSlice({
 export const {
   setResults,
   setSelectedHotel,
+  setSelectedFlight,
   setBookingPackageDetails,
   setEntry,
   selectFlight,

package/src/search-results/types.ts

@@ -1,13 +1,17 @@
+import { FlightSearchResponseItem } from '@qite/tide-client';
 import { ReactNode } from 'react';
 
+export type SRPType = 'hotel' | 'flight' | 'hotel-flight' | 'roundTrip';
+
 export interface SearchResultsConfiguration {
-  type: 'hotel' | 'roundTrip' | 'flight' | 'hotel-flight';
+  type: SRPType;
 
   // Tide connection
   tideConnection: {
     host: string;
     apiKey: string;
     catalogueIds?: number[]; // Optional, used for multiple catalogues
+    officeId?: number;
   };
 
   // Filter settings
@@ -141,3 +145,35 @@ export interface SortingOption {
   label: string;
   icon?: ReactNode;
 }
+
+export interface ExtendedFlightSearchResponseItem extends FlightSearchResponseItem {
+  requestId: number; // Unique identifier for the search request
+  guid: string; // Unique identifier for the item
+}
+
+export interface Sequence {
+  requestId: number;
+  sequenceId: number;
+}
+
+export interface FilterValue {
+  name: string;
+  id: number | string;
+  lowestPrice: number;
+}
+
+export interface Filters {
+  airlines: FilterValue[];
+  numberOfStops: FilterValue[];
+  departureRanges: FilterValue[];
+  departureAirports: FilterValue[];
+  arrivalAirports: FilterValue[];
+  travelTimes: FilterValue[];
+  prices: FilterValue[];
+}
+
+export interface SortByType {
+  direction: 'asc' | 'desc';
+  label: string;
+  icon?: ReactNode;
+}

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

@@ -0,0 +1,106 @@
+import { first, isEmpty, last } from 'lodash';
+import { FlightSearchResponseFlight, FlightSearchResponseFlightSegment, VendorType } from '@qite/tide-client';
+import { ExtendedFlightSearchResponseItem, SortByType } from '../types';
+import { DepartureRange } from '../../shared/types';
+
+export const getOutwardFlight = (flightResult: ExtendedFlightSearchResponseItem): FlightSearchResponseFlight | undefined => {
+  return flightResult?.outward;
+};
+
+// export const getAirportName = (airport: TideAirport | undefined, language: string): string => {
+//   if (!airport || !airport.name) {
+//     return "";
+//   }
+//   const airportName = airport.localizedNames?.find((name) => name?.languageCode === language);
+//   return airportName && airportName?.value ? airportName.value : airport.name;
+// };
+
+// export const getAirportLocationName = (airport: TideAirport | undefined, language: string): string => {
+//   if (!airport || !airport.locationName) {
+//     return "";
+//   }
+//   const locationName = airport.localizedLocations?.find((name) => name?.languageCode === language);
+//   return locationName && locationName?.value ? locationName.value : airport.locationName;
+// };
+
+// export const getCountryName = (country: TideCountry | undefined | null, language: string): Maybe<string> | undefined => {
+//   if (!country) {
+//     return "";
+//   }
+
+//   const countryName = country.localizedNames?.find((name) => name?.languageCode === language);
+//   return countryName && countryName.value !== "" ? countryName.value : country.name;
+// };
+
+export const getFlightSegments = (flight: FlightSearchResponseFlight | undefined): FlightSearchResponseFlightSegment[] => {
+  if (!flight) {
+    return [];
+  }
+  return flight?.segments;
+};
+
+export const getDepartureSegment = (flight: FlightSearchResponseFlight | undefined): FlightSearchResponseFlightSegment | undefined => {
+  const segments = getFlightSegments(flight);
+  if (isEmpty(segments)) {
+    return undefined;
+  }
+
+  return first(segments);
+};
+
+export const getArrivalSegment = (flight: FlightSearchResponseFlight | undefined): FlightSearchResponseFlightSegment | undefined => {
+  const segments = getFlightSegments(flight);
+  if (isEmpty(segments)) {
+    return undefined;
+  }
+
+  return last(segments);
+};
+
+export const getNumberOfStops = (flight: FlightSearchResponseFlight | undefined): number => {
+  const segments = getFlightSegments(flight);
+  if (isEmpty(segments)) {
+    return 0;
+  }
+  return segments.length - 1;
+};
+
+export const getNumberOfStopsLabel = (flight: FlightSearchResponseFlight | undefined, directLabel: string, stopsLabel: string, stopLabel: string): string => {
+  const numberOfStops = getNumberOfStops(flight);
+
+  if (numberOfStops === 0) {
+    return directLabel;
+  } else if (numberOfStops === 1) {
+    return `${numberOfStops} ${stopLabel}`;
+  } else {
+    return `${numberOfStops} ${stopsLabel}`;
+  }
+};
+
+export const getDepartureRangeName = (translations: any, range: DepartureRange | undefined): string => {
+  switch (range) {
+    case DepartureRange.Morning:
+      return translations.FLIGHTS_FORM.MORNING_DEPARTURE;
+    case DepartureRange.Afternoon:
+      return translations.FLIGHTS_FORM.AFTERNOON_DEPARTURE;
+    case DepartureRange.Evening:
+      return translations.FLIGHTS_FORM.EVENING_DEPARTURE;
+    case DepartureRange.Night:
+      return translations.FLIGHTS_FORM.NIGHT_DEPARTURE;
+    default:
+      return '';
+  }
+};
+
+export const getSortingName = (translations: any, sortByType: SortByType): string => {
+  switch (sortByType.label) {
+    case 'price':
+      return sortByType.direction === 'asc' ? translations.SRP.PRICE_ASC : translations.SRP.PRICE_DESC;
+    case 'departureTime':
+      return sortByType.direction === 'asc' ? translations.SRP.DEPARTURE_TIME_ASC : translations.SRP.DEPARTURE_TIME_DESC;
+    case 'durationInTicks':
+      return sortByType.direction === 'asc' ? translations.SRP.DURATION_ASC : translations.SRP.DURATION_DESC;
+    default:
+      return '';
+  }
+};