@qite/tide-booking-component 1.4.31 → 1.4.33

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

@@ -1,297 +1,337 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { SearchResultsRootState } from '../../store/search-results-store';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-
-import { resetFilters, setSortKey, setResults, setIsLoading } 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, search } from '@qite/tide-client';
-import { BookingPackageDestination, BookingPackagePax, BookingPackageRequestRoom, BookingPackageSearchRequest } from '@qite/tide-client/build/types';
-import { getDateFromParams, getNumberFromParams, getRoomsFromParams } from '../../../shared/utils/query-string-util';
-import { range } from 'lodash';
-import { Room } from '../../../booking-wizard/types';
-import Icon from '../icon';
-import Itinerary from '../itinerary';
-import TabViews from '../tab-views';
-import HotelAccommodationResults from '../hotel/hotel-accommodation-results';
-import RoundTripResults from '../round-trip/round-trip-results';
-import { enrichFiltersWithResults } from '../filters/utility';
-
-const SearchResultsContainer: React.FC = () => {
-  const isMobile = useMediaQuery('(max-width: 1200px)');
-  const dispatch = useDispatch();
-  const context = useContext(SearchResultsConfigurationContext);
-  const { results, isLoading, filters, sortKey } = useSelector((state: SearchResultsRootState) => state.searchResults);
-
-  const [searchTrigger, setSearchTrigger] = useState(0);
-  const [initialFiltersSet, setInitialFiltersSet] = useState(false);
-  const [initialFilters, setInitialFilters] = useState<Filter[]>([]);
-
-  useEffect(() => {
-    const runSearch = async () => {
-      dispatch(setIsLoading(true));
-      try {
-        if (!context) {
-          return;
-        }
-
-        const params = new URLSearchParams(location.search);
-        let from = getDateFromParams(params, 'from');
-        let to = getDateFromParams(params, 'to');
-        const rooms = getRoomsFromParams(params, 'rooms');
-        let country = getNumberFromParams(params, 'country');
-        let region = getNumberFromParams(params, 'region');
-        let oord = getNumberFromParams(params, 'oord');
-        let city = getNumberFromParams(params, 'location');
-
-        // temp hardcoded params
-        if (!from || !to) {
-          from = '2026-04-07';
-          to = '2026-04-13';
-        }
-        if (!country && !region && !oord && !city) {
-          region = 1;
-        }
-
-        if (typeof window !== 'undefined') {
-          window.scrollTo(0, 0);
-        }
-
-        let destinationId: number | null = null;
-        let destinationIsCountry = false;
-        let destinationIsRegion = false;
-        let destinationIsOord = false;
-        let destinationIsLocation = false;
-
-        if (country) {
-          destinationId = country;
-          destinationIsCountry = true;
-        } else if (region) {
-          destinationId = region;
-          destinationIsRegion = true;
-        } else if (oord) {
-          destinationId = oord;
-          destinationIsOord = true;
-        } else if (city) {
-          destinationId = city;
-          destinationIsLocation = true;
-        }
-
-        const searchRequest = {
-          officeId: 1,
-          payload: {
-            catalogueIds: context.tideConnection.catalogueIds,
-            serviceType:
-              context?.type === 'hotel' || context?.type === 'hotel-flight' ? 3 : context?.type === 'flight' ? 7 : context?.type === 'roundTrip' ? 1 : 0,
-            searchType: 0,
-            destination: {
-              id: Number(destinationId),
-              isCountry: destinationIsCountry,
-              isRegion: destinationIsRegion,
-              isOord: destinationIsOord,
-              isLocation: destinationIsLocation
-            } as BookingPackageDestination,
-            rooms: getRequestRooms(rooms),
-            fromDate: from,
-            toDate: to,
-            earliestFromOffset: 0,
-            latestToOffset: 0,
-            includeFlights: true,
-            regimeCodes:
-              filters
-                .find((f) => f.property === 'regime')
-                ?.options?.filter((o) => o.isChecked)
-                .flatMap((o) => o.value) || [],
-            minPrice: filters.find((f) => f.property === 'price')?.selectedMin,
-            maxPrice: filters.find((f) => f.property === 'price')?.selectedMax,
-            useExactDates: true,
-            onlyCachedResults: false,
-            includeAllAllotments: true
-          } as BookingPackageSearchRequest
-        };
-
-        const config: TideClientConfig = {
-          host: context.tideConnection.host,
-          apiKey: context.tideConnection.apiKey
-        };
-
-        const packageSearchResults = await search(config, searchRequest);
-
-        console.log('Search results', packageSearchResults);
-
-        const enrichedFilters = enrichFiltersWithResults(packageSearchResults, context.filters);
-        if (!initialFiltersSet) {
-          dispatch(resetFilters(enrichedFilters));
-          setInitialFilters(enrichedFilters);
-          setInitialFiltersSet(true);
-        }
-
-        dispatch(setResults({ results: packageSearchResults }));
-        dispatch(setIsLoading(false));
-      } catch (err) {
-        console.error('Search failed', err);
-        dispatch(setIsLoading(false));
-      }
-    };
-
-    runSearch();
-  }, [location.search, searchTrigger]);
-
-  const getRequestRooms = (rooms: Room[] | null) => {
-    if (!rooms) {
-      // Fall back to 2 adults
-      var room = { index: 0, pax: [] } as BookingPackageRequestRoom;
-      range(0, 2).forEach(() => {
-        room.pax.push({
-          age: 30
-        } as BookingPackagePax);
-      });
-      return [room];
-    }
-
-    const requestRooms = rooms?.map((x, i) => {
-      var room = { index: i, pax: [] } as BookingPackageRequestRoom;
-      range(0, x.adults).forEach(() => {
-        room.pax.push({
-          age: 30
-        } as BookingPackagePax);
-      });
-      x.childAges.forEach((x) => {
-        room.pax.push({
-          age: x
-        } as BookingPackagePax);
-      });
-      return room;
-    });
-
-    return requestRooms;
-  };
-
-  const [isMobileFiltersOpen, setIsMobileFiltersOpen] = useState(false);
-
-  const handleSortChange = (newSortKey: string) => {
-    console.log('Sort changed to:', newSortKey);
-    dispatch(setSortKey(newSortKey));
-  };
-
-  const handleSetIsMobileFiltersOpen = () => {
-    setIsMobileFiltersOpen(!isMobileFiltersOpen);
-  };
-
-  useEffect(() => {
-    if (typeof document !== 'undefined') {
-      document.body.classList.toggle('has-overlay', isMobileFiltersOpen);
-    }
-  }, [isMobileFiltersOpen]);
-
-  // const getFilteredResults = () => {
-  //   const filteredResults = results.filter((result) => {
-  //     // Apply frontend filters here
-
-  //     const ratingFilter = filters.find((f) => f.property === 'rating' && f.selectedRating != null);
-  //     if (ratingFilter) {
-  //       const minRating = ratingFilter.selectedRating!;
-  //       const hotelStars = result.stars ?? 0;
-  //       if (hotelStars < minRating) {
-  //         return false;
-  //       }
-  //     }
-
-  //     // Add more frontend filters if needed
-  //     return true;
-  //   });
-
-  //   return filteredResults;
-  // };
-
-  const sortingOptions: SortingOption[] = [
-    { key: 'price-asc', label: 'Price: Low to High' },
-    { key: 'price-desc', label: 'Price: High to Low' },
-    { key: 'departure-date', label: 'Departure Date' }
-  ];
-
-  return (
-    <div id="tide-booking" className="search__bg">
-      {context && (
-        <div className="search">
-          <div className="search__container">
-            {context.showFilters && (
-              <Filters
-                filters={filters}
-                isMobileFiltersOpen={isMobileFiltersOpen}
-                handleSetIsMobileFiltersOpen={handleSetIsMobileFiltersOpen}
-                handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
-                isLoading={isLoading}
-              />
-            )}
-            {context.type === 'hotel-flight' && (
-              <Itinerary isMobileFiltersOpen={isMobileFiltersOpen} handleSetIsMobileFiltersOpen={handleSetIsMobileFiltersOpen} isLoading={isLoading} />
-            )}
-            {/* ---------------- Results ---------------- */}
-            <div className="search__results">
-              {isMobile && (
-                <div className="search__result-row">
-                  <div className="cta cta--filter" onClick={() => setIsMobileFiltersOpen(true)}>
-                    <Icon name="ui-filter" className="mobile-filters-button__icon" height={16} />
-                    {context.translations?.filters}
-                  </div>
-                  {sortingOptions && sortingOptions.length > 0 && (
-                    <ItemPicker
-                      items={sortingOptions}
-                      selection={sortKey || undefined}
-                      label="Sort by"
-                      placeholder="Sort by"
-                      classModifier="travel-class-picker__items"
-                      onPick={handleSortChange}
-                    />
-                  )}
-                </div>
-              )}
-
-              <div className="search__result-row">
-                <span className="search__result-row-text">
-                  {!isLoading && (
-                    <>
-                      {results?.length ?? 4} {context.translations?.totalResultsLabel}
-                    </>
-                  )}
-                </span>
-                {!isMobile && sortingOptions && sortingOptions.length > 0 && (
-                  <div className="search__result-row-filter">
-                    <ItemPicker
-                      items={sortingOptions}
-                      selection={sortKey || undefined}
-                      label="Sort by"
-                      placeholder="Sort by"
-                      classModifier="travel-class-picker__items"
-                      onPick={handleSortChange}
-                    />
-                  </div>
-                )}
-              </div>
-
-              <div className="search__results__wrapper">
-                {context.showTabViews && <TabViews />}
-
-                {context.showRoundTripResults && <RoundTripResults />}
-
-                {/* {context.showFlightResults && <FlightResults isDeparture={true} />} */}
-
-                {context.showHotelAccommodationResults && <HotelAccommodationResults isLoading={isLoading} context={context} />}
-                {/* {context.showFlightAccommodationResults && <FlightAccommodationResults />} */}
-
-                {/* {context.showFlightResults && <FlightResults isDeparture={false} />} */}
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default SearchResultsContainer;
+import React, { useContext, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { SearchResultsRootState } from '../../store/search-results-store';
+import SearchResultsConfigurationContext from '../../search-results-configuration-context';
+
+import { resetFilters, setSortKey, setResults, setIsLoading, setSelectedHotel } 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, search } from '@qite/tide-client';
+import {
+  BookingPackageDestination,
+  BookingPackageDetailsRequest,
+  BookingPackagePax,
+  BookingPackageRequest,
+  BookingPackageRequestRoom,
+  BookingPackageSearchRequest
+} from '@qite/tide-client/build/types';
+import { getDateFromParams, getNumberFromParams, getRoomsFromParams } from '../../../shared/utils/query-string-util';
+import { range } from 'lodash';
+import { Room } from '../../../booking-wizard/types';
+import Icon from '../icon';
+import Itinerary from '../itinerary';
+import TabViews from '../tab-views';
+import HotelAccommodationResults from '../hotel/hotel-accommodation-results';
+import RoundTripResults from '../round-trip/round-trip-results';
+import { enrichFiltersWithResults } from '../filters/utility';
+
+const SearchResultsContainer: React.FC = () => {
+  const isMobile = useMediaQuery('(max-width: 1200px)');
+  const dispatch = useDispatch();
+  const context = useContext(SearchResultsConfigurationContext);
+  const { results, isLoading, filters, sortKey, selectedHotelId } = useSelector((state: SearchResultsRootState) => state.searchResults);
+
+  const [searchTrigger, setSearchTrigger] = useState(0);
+  const [initialFiltersSet, setInitialFiltersSet] = useState(false);
+  const [initialFilters, setInitialFilters] = useState<Filter[]>([]);
+
+  useEffect(() => {
+    const runSearch = async () => {
+      dispatch(setIsLoading(true));
+      try {
+        if (!context) {
+          return;
+        }
+
+        const params = new URLSearchParams(location.search);
+        let from = getDateFromParams(params, 'fromDate');
+        let to = getDateFromParams(params, 'toDate');
+        const rooms = getRoomsFromParams(params, 'rooms');
+        let country = getNumberFromParams(params, 'country');
+        let region = getNumberFromParams(params, 'region');
+        let oord = getNumberFromParams(params, 'oord');
+        let city = getNumberFromParams(params, 'location');
+
+        // temp hardcoded params
+        if (!from || !to) {
+          from = '2026-04-07';
+          to = '2026-04-13';
+        }
+        if (!country && !region && !oord && !city) {
+          region = 1;
+        }
+
+        if (typeof window !== 'undefined') {
+          window.scrollTo(0, 0);
+        }
+
+        let destinationId: number | null = null;
+        let destinationIsCountry = false;
+        let destinationIsRegion = false;
+        let destinationIsOord = false;
+        let destinationIsLocation = false;
+
+        if (country) {
+          destinationId = country;
+          destinationIsCountry = true;
+        } else if (region) {
+          destinationId = region;
+          destinationIsRegion = true;
+        } else if (oord) {
+          destinationId = oord;
+          destinationIsOord = true;
+        } else if (city) {
+          destinationId = city;
+          destinationIsLocation = true;
+        }
+
+        const searchRequest: BookingPackageRequest<BookingPackageSearchRequest> = {
+          officeId: 1,
+          payload: {
+            catalogueIds: context.tideConnection.catalogueIds ?? [],
+            serviceType:
+              context?.type === 'hotel' || context?.type === 'hotel-flight' ? 3 : context?.type === 'flight' ? 7 : context?.type === 'roundTrip' ? 1 : 0,
+            searchType: 0,
+            destination: {
+              id: Number(destinationId),
+              isCountry: destinationIsCountry,
+              isRegion: destinationIsRegion,
+              isOord: destinationIsOord,
+              isLocation: destinationIsLocation
+            } as BookingPackageDestination,
+            rooms: getRequestRooms(rooms),
+            fromDate: from,
+            toDate: to,
+            earliestFromOffset: 0,
+            latestToOffset: 0,
+            includeFlights: true,
+            regimeCodes:
+              filters
+                .find((f) => f.property === 'regime')
+                ?.options?.filter((o) => o.isChecked)
+                .flatMap((o) => o.value.toString()) || [],
+            minPrice: filters.find((f) => f.property === 'price')?.selectedMin,
+            maxPrice: filters.find((f) => f.property === 'price')?.selectedMax,
+            useExactDates: true,
+            onlyCachedResults: false,
+            includeAllAllotments: true
+          }
+        };
+
+        const config: TideClientConfig = {
+          host: context.tideConnection.host,
+          apiKey: context.tideConnection.apiKey
+        };
+
+        const packageSearchResults = await search(config, searchRequest);
+
+        console.log('Search results', packageSearchResults);
+
+        const enrichedFilters = enrichFiltersWithResults(packageSearchResults, context.filters);
+        if (!initialFiltersSet) {
+          dispatch(resetFilters(enrichedFilters));
+          setInitialFilters(enrichedFilters);
+          setInitialFiltersSet(true);
+        }
+
+        dispatch(setResults({ results: packageSearchResults }));
+        if (packageSearchResults?.length > 0) {
+          dispatch(setSelectedHotel(packageSearchResults[0].productId));
+        }
+        dispatch(setIsLoading(false));
+      } catch (err) {
+        console.error('Search failed', err);
+        dispatch(setIsLoading(false));
+      }
+    };
+
+    runSearch();
+  }, [location.search, searchTrigger]);
+
+  useEffect(() => {
+    const fetchPackageDetails = async () => {
+      if (!selectedHotelId || !context) return;
+
+      try {
+        const config: TideClientConfig = {
+          host: context.tideConnection.host,
+          apiKey: context.tideConnection.apiKey
+        };
+
+        const selectedItem = results.find((r) => r.productId === selectedHotelId);
+        if (!selectedItem) return;
+
+        const params = new URLSearchParams(location.search);
+        const rooms = getRoomsFromParams(params, 'rooms');
+        const requestRooms = getRequestRooms(rooms);
+
+        const detailsRequest: BookingPackageRequest<BookingPackageDetailsRequest> = {
+          officeId: 1,
+          payload: {
+            catalogueId: selectedItem.catalogueId,
+            rooms: requestRooms,
+            searchType: 0, // same as search
+            productCode: selectedItem.code,
+            fromDate: selectedItem.fromDate,
+            toDate: selectedItem.toDate,
+            includeFlights: true,
+            includeHotels: true,
+            includePaxTypes: true,
+            checkExternalAvailability: true,
+            expectedPrice: selectedItem.price,
+            duration: null,
+            preNights: null,
+            postNights: null
+          }
+        };
+
+        const detailsResponse = await details(config, detailsRequest);
+
+        console.log('Package details:', detailsResponse);
+
+        // TODO: store flights / details in redux
+        // dispatch(setSelectedHotelDetails(details));
+      } catch (err) {
+        console.error('Failed to fetch package details', err);
+      }
+    };
+
+    fetchPackageDetails();
+  }, [selectedHotelId]);
+
+  const getRequestRooms = (rooms: Room[] | null) => {
+    if (!rooms) {
+      // Fall back to 2 adults
+      var room = { index: 0, pax: [] } as BookingPackageRequestRoom;
+      range(0, 2).forEach(() => {
+        room.pax.push({
+          age: 30
+        } as BookingPackagePax);
+      });
+      return [room];
+    }
+
+    const requestRooms = rooms?.map((x, i) => {
+      var room = { index: i, pax: [] } as BookingPackageRequestRoom;
+      range(0, x.adults).forEach(() => {
+        room.pax.push({
+          age: 30
+        } as BookingPackagePax);
+      });
+      x.childAges.forEach((x) => {
+        room.pax.push({
+          age: x
+        } as BookingPackagePax);
+      });
+      return room;
+    });
+
+    return requestRooms;
+  };
+
+  const [isMobileFiltersOpen, setIsMobileFiltersOpen] = useState(false);
+
+  const handleSortChange = (newSortKey: string) => {
+    dispatch(setSortKey(newSortKey));
+  };
+
+  const handleSetIsMobileFiltersOpen = () => {
+    setIsMobileFiltersOpen(!isMobileFiltersOpen);
+  };
+
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      document.body.classList.toggle('has-overlay', isMobileFiltersOpen);
+    }
+  }, [isMobileFiltersOpen]);
+
+  const sortingOptions: SortingOption[] = [
+    { key: 'price-asc', label: 'Price: Low to High' },
+    { key: 'price-desc', label: 'Price: High to Low' },
+    { key: 'departure-date', label: 'Departure Date' }
+  ];
+
+  return (
+    <div id="tide-booking" className="search__bg">
+      {context && (
+        <div className="search">
+          <div className="search__container">
+            {context.showFilters && (
+              <Filters
+                filters={filters}
+                isMobileFiltersOpen={isMobileFiltersOpen}
+                handleSetIsMobileFiltersOpen={handleSetIsMobileFiltersOpen}
+                handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
+                isLoading={isLoading}
+              />
+            )}
+            {context.type === 'hotel-flight' && (
+              <Itinerary isMobileFiltersOpen={isMobileFiltersOpen} handleSetIsMobileFiltersOpen={handleSetIsMobileFiltersOpen} isLoading={isLoading} />
+            )}
+            {/* ---------------- Results ---------------- */}
+            <div className="search__results">
+              {isMobile && (
+                <div className="search__result-row">
+                  <div className="cta cta--filter" onClick={() => setIsMobileFiltersOpen(true)}>
+                    <Icon name="ui-filter" className="mobile-filters-button__icon" height={16} />
+                    {context.translations?.filters}
+                  </div>
+                  {sortingOptions && sortingOptions.length > 0 && (
+                    <ItemPicker
+                      items={sortingOptions}
+                      selection={sortKey || undefined}
+                      label="Sort by"
+                      placeholder="Sort by"
+                      classModifier="travel-class-picker__items"
+                      onPick={handleSortChange}
+                    />
+                  )}
+                </div>
+              )}
+
+              <div className="search__result-row">
+                <span className="search__result-row-text">
+                  {!isLoading && (
+                    <>
+                      {results?.length ?? 4} {context.translations?.totalResultsLabel}
+                    </>
+                  )}
+                </span>
+                {!isMobile && sortingOptions && sortingOptions.length > 0 && (
+                  <div className="search__result-row-filter">
+                    <ItemPicker
+                      items={sortingOptions}
+                      selection={sortKey || undefined}
+                      label="Sort by"
+                      placeholder="Sort by"
+                      classModifier="travel-class-picker__items"
+                      onPick={handleSortChange}
+                    />
+                  </div>
+                )}
+              </div>
+
+              <div className="search__results__wrapper">
+                {context.showTabViews && <TabViews />}
+
+                {context.showRoundTripResults && <RoundTripResults />}
+
+                {/* {context.showFlightResults && <FlightResults isDeparture={true} />} */}
+
+                {context.showHotelAccommodationResults && <HotelAccommodationResults isLoading={isLoading} context={context} />}
+                {/* {context.showFlightAccommodationResults && <FlightAccommodationResults />} */}
+
+                {/* {context.showFlightResults && <FlightResults isDeparture={false} />} */}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SearchResultsContainer;