@qite/tide-booking-component 1.4.35 → 1.4.37

package/src/search-results/components/itinerary/index.tsx

@@ -114,15 +114,17 @@ const Itinerary: React.FC<ItineraryProps> = ({ isOpen, handleSetIsOpen, isLoadin
           ) : (
             <>
               <div className="search__filter-group">
-                <div className="search__filter__image__wrapper">
-                  <img src="" alt="" className="search__filter__image" />
-                  {entry?.number && (
-                    <span className="search__filter__image__text">
-                      {translations.SRP.DOSSIER_NUMBER}: {entry?.number}
-                    </span>
-                  )}
-                  <h4 className="search__filter__image__title">{(location || '') + (location && country ? ' - ' : '') + (country || '')}</h4>
-                </div>
+                {context?.destinationImage && (
+                  <div className="search__filter__image__wrapper">
+                    <img src={context.destinationImage.url} alt={context.destinationImage.alt} className="search__filter__image" />
+                    {entry?.number && (
+                      <span className="search__filter__image__text">
+                        {translations.SRP.DOSSIER_NUMBER}: {entry?.number}
+                      </span>
+                    )}
+                    <h4 className="search__filter__image__title">{(location || '') + (location && country ? ' - ' : '') + (country || '')}</h4>
+                  </div>
+                )}
               </div>
 
               <div className="search__filter__prices">

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

@@ -9,16 +9,18 @@ import useMediaQuery from '../../../shared/utils/use-media-query-util';
 import Filters from '../filters/filters';
 import ItemPicker from '../item-picker';
 
-import { TideClientConfig, detailsWL, search } from '@qite/tide-client';
+import { TideClientConfig, details, detailsWL, getEntryLight, search } from '@qite/tide-client';
 import {
   BookingPackageDestination,
   BookingPackageDetailsRequest,
   BookingPackagePax,
   BookingPackageRequest,
   BookingPackageRequestRoom,
-  BookingPackageSearchRequest
+  BookingPackageSearchRequest,
+  EntryLight,
+  EntryRoom
 } from '@qite/tide-client/build/types';
-import { getDateFromParams, getNumberFromParams, getRoomsFromParams } from '../../../shared/utils/query-string-util';
+import { getDateFromParams, getNumberFromParams, getRoomsFromParams, getStringFromParams } from '../../../shared/utils/query-string-util';
 import { range } from 'lodash';
 import { Room } from '../../../booking-wizard/types';
 import Icon from '../icon';
@@ -29,17 +31,247 @@ 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';
 
 const SearchResultsContainer: React.FC = () => {
-  const isMobile = useMediaQuery('(max-width: 1200px)');
   const dispatch = useDispatch();
+
   const context = useContext(SearchResultsConfigurationContext);
   const translations = getTranslations(context?.languageCode ?? 'en-GB');
-  const { results, bookingPackageDetails, isLoading, filters, sortKey, selectedHotelId } = useSelector((state: SearchResultsRootState) => state.searchResults);
+
+  const { results, bookingPackageDetails, entry, isLoading, filters, sortKey, selectedHotelId } = useSelector(
+    (state: SearchResultsRootState) => state.searchResults
+  );
+
+  const isMobile = useMediaQuery('(max-width: 1200px)');
 
   const [searchTrigger, setSearchTrigger] = useState(0);
   const [initialFiltersSet, setInitialFiltersSet] = useState(false);
   const [initialFilters, setInitialFilters] = useState<Filter[]>([]);
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [itineraryOpen, setItineraryOpen] = useState(false);
+
+  const sortingOptions: SortingOption[] = [
+    { key: 'price-asc', label: translations.SRP.PRICE_ASC },
+    { key: 'price-desc', label: translations.SRP.PRICE_DESC },
+    { key: 'departure-date', label: translations.SRP.DEPARTURE_ASC }
+  ];
+
+  const handleSortChange = (newSortKey: string) => {
+    dispatch(setSortKey(newSortKey));
+  };
+
+  const buildSearchFromEntry = (entry: EntryLight): BookingPackageRequest<BookingPackageSearchRequest> => {
+    const from = new Date(Math.min(...entry.items.map((i) => i.startDate.getTime()))).toISOString();
+    const to = new Date(Math.max(...entry.items.map((i) => i.endDate.getTime()))).toISOString();
+    const rooms = entry.rooms;
+
+    const hotelItem = entry.items.find((i) => i.productType === 3);
+
+    let country = hotelItem ? hotelItem.countryId : null;
+    let region = hotelItem ? hotelItem.regionId : null;
+    let oord = hotelItem ? hotelItem.oordId : null;
+    let city = hotelItem ? hotelItem.locationId : null;
+    let hotel = hotelItem ? hotelItem.productCode : null;
+
+    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;
+    }
+
+    var 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: getRequestRoomsFromEntry(rooms),
+        fromDate: from,
+        toDate: to,
+        earliestFromOffset: 0,
+        latestToOffset: 0,
+        includeFlights: true,
+        regimeCodes: entry.items.map((i) => i.regimeCode) || [],
+        useExactDates: true,
+        onlyCachedResults: false,
+        includeAllAllotments: true,
+        productCodes: hotel ? [hotel] : []
+      }
+    };
+
+    return searchRequest;
+  };
+
+  const buildSearchFromQueryParams = (params: URLSearchParams): BookingPackageRequest<BookingPackageSearchRequest> => {
+    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');
+    let hotel = getNumberFromParams(params, 'hotel');
+    let tagId = getNumberFromParams(params, 'tagId');
+
+    // 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;
+    }
+
+    var 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.toString()) || [],
+        minPrice: filters.find((f) => f.property === 'price')?.selectedMin,
+        maxPrice: filters.find((f) => f.property === 'price')?.selectedMax,
+        useExactDates: true,
+        onlyCachedResults: false,
+        includeAllAllotments: true,
+        productIds: hotel ? [hotel] : [],
+        productTagIds: tagId ? [tagId] : []
+      }
+    };
+
+    return searchRequest;
+  };
+
+  const getRequestRoomsFromEntry = (rooms: EntryRoom[] | 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;
+      x.travellers.forEach((p) => {
+        room.pax.push({
+          age: p.age,
+          dateOfBirth: p.dateOfBirth
+        } as BookingPackagePax);
+      });
+
+      return room;
+    });
+
+    return requestRooms;
+  };
+
+  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;
+  };
+
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      document.body.classList.toggle('has-overlay', filtersOpen);
+    }
+  }, [filtersOpen]);
 
   // seperate Search
   useEffect(() => {
@@ -50,90 +282,27 @@ const SearchResultsContainer: React.FC = () => {
           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');
-        let hotel = getNumberFromParams(params, 'hotel');
-        let tagId = getNumberFromParams(params, 'tagId');
-
-        // 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,
-            productIds: hotel ? [hotel] : [],
-            productTagIds: tagId ? [tagId] : []
-          }
-        };
-
         const config: TideClientConfig = {
           host: context.tideConnection.host,
           apiKey: context.tideConnection.apiKey
         };
 
+        const params = new URLSearchParams(location.search);
+        let entryId = getStringFromParams(params, 'entryId');
+        let entryLight: EntryLight | null = null;
+        // If entryId is present, we want to fetch the details of that entry and use the details to populate the search results, instead of running a search with the other query params
+
+        let searchRequest: BookingPackageRequest<BookingPackageSearchRequest>;
+
+        if (entryId) {
+          entryLight = await getEntryLight(config, entryId);
+          // populate itinerary store
+          dispatch(setEntry({ entry: entryLight }));
+          searchRequest = buildSearchFromEntry(entryLight);
+        } else {
+          searchRequest = buildSearchFromQueryParams(params);
+        }
+
         const packageSearchResults = await search(config, searchRequest);
 
         console.log('Search results', packageSearchResults);
@@ -147,8 +316,17 @@ const SearchResultsContainer: React.FC = () => {
 
         dispatch(setResults({ results: packageSearchResults }));
         if (packageSearchResults?.length > 0) {
-          dispatch(setSelectedHotel(packageSearchResults[0].productId));
+          if (entryId) {
+            const matching = packageSearchResults.find((r) => r.productId === entry?.id);
+
+            if (matching) {
+              dispatch(setSelectedHotel(matching.productId));
+            }
+          } else {
+            dispatch(setSelectedHotel(packageSearchResults[0]?.productId));
+          }
         }
+
         dispatch(setIsLoading(false));
       } catch (err) {
         console.error('Search failed', err);
@@ -156,7 +334,9 @@ const SearchResultsContainer: React.FC = () => {
       }
     };
 
-    runSearch();
+    if (!context?.showMockup) {
+      runSearch();
+    }
   }, [location.search, searchTrigger]);
 
   // Seperate detailsCall
@@ -171,11 +351,21 @@ const SearchResultsContainer: React.FC = () => {
         };
 
         const selectedItem = results.find((r) => r.productId === selectedHotelId);
-        if (!selectedItem) return;
+        if (!selectedItem) {
+          // TODO: handle this case better, show an error message to the user
+          return;
+        }
 
         const params = new URLSearchParams(location.search);
-        const rooms = getRoomsFromParams(params, 'rooms');
-        const requestRooms = getRequestRooms(rooms);
+        let entryId = getStringFromParams(params, 'entryId');
+
+        let requestRooms;
+        if (entry && entryId) {
+          requestRooms = getRequestRoomsFromEntry(entry.rooms);
+        } else {
+          const rooms = getRoomsFromParams(params, 'rooms');
+          requestRooms = getRequestRooms(rooms);
+        }
 
         const detailsRequest: BookingPackageRequest<BookingPackageDetailsRequest> = {
           officeId: 1,
@@ -197,10 +387,17 @@ const SearchResultsContainer: React.FC = () => {
           }
         };
 
-        const detailsWLResponse = await detailsWL(config, detailsRequest);
-        console.log('Details with entryLight:', detailsWLResponse);
-        dispatch(setBookingPackageDetails({ details: detailsWLResponse?.payload?.bookingPackage }));
-        dispatch(setEntry({ entry: detailsWLResponse?.payload?.entry }));
+        if (entry && entryId) {
+          requestRooms = getRequestRoomsFromEntry(entry.rooms);
+          const detailsResponse = await details(config, detailsRequest);
+          console.log('Details:', detailsResponse);
+          dispatch(setBookingPackageDetails({ details: detailsResponse?.payload }));
+        } else {
+          const detailsWLResponse = await detailsWL(config, detailsRequest);
+          console.log('Details with entryLight:', detailsWLResponse);
+          dispatch(setBookingPackageDetails({ details: detailsWLResponse?.payload?.bookingPackage }));
+          dispatch(setEntry({ entry: detailsWLResponse?.payload?.entry }));
+        }
       } catch (err) {
         console.error('Failed to fetch package details', err);
       }
@@ -209,55 +406,6 @@ const SearchResultsContainer: React.FC = () => {
     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 [filtersOpen, setFiltersOpen] = useState(false);
-  const [itineraryOpen, setItineraryOpen] = useState(false);
-
-  const handleSortChange = (newSortKey: string) => {
-    dispatch(setSortKey(newSortKey));
-  };
-
-  useEffect(() => {
-    if (typeof document !== 'undefined') {
-      document.body.classList.toggle('has-overlay', filtersOpen);
-    }
-  }, [filtersOpen]);
-
-  const sortingOptions: SortingOption[] = [
-    { key: 'price-asc', label: translations.SRP.PRICE_ASC },
-    { key: 'price-desc', label: translations.SRP.PRICE_DESC },
-    { key: 'departure-date', label: translations.SRP.DEPARTURE_ASC }
-  ];
-
   return (
     <div id="tide-booking" className="search__bg">
       {context && (
@@ -329,17 +477,17 @@ const SearchResultsContainer: React.FC = () => {
               <div className="search__results__wrapper">
                 {context.showTabViews && <TabViews />}
 
-                {/* {context.showRoundTripResults && <RoundTripResults />} */}
+                {context.showRoundTripResults && context.showMockup && <RoundTripResults />}
 
                 {context.showFlightResults && bookingPackageDetails?.outwardFlights && (
-                  <FlightResults flights={bookingPackageDetails.outwardFlights} isDeparture={true} />
+                  <FlightResults flights={bookingPackageDetails?.outwardFlights} isDeparture={true} />
                 )}
 
                 {context.showHotelAccommodationResults && <HotelAccommodationResults isLoading={isLoading} context={context} />}
-                {/* {context.showFlightAccommodationResults && <FlightAccommodationResults />} */}
+                {context.showFlightAccommodationResults && context.showMockup && <FlightAccommodationResults />}
 
                 {context.showFlightResults && bookingPackageDetails?.returnFlights && (
-                  <FlightResults flights={bookingPackageDetails.returnFlights} isDeparture={false} />
+                  <FlightResults flights={bookingPackageDetails?.returnFlights} isDeparture={false} />
                 )}
               </div>
             </div>

package/src/search-results/features/flights/flight-search-results-self-contained.tsx

@@ -248,7 +248,11 @@ const FlightSearchResultsSelfContained: React.FC<FlightSearchResultsSelfContaine
     isLoading: false,
     customSpinner: null,
 
-    languageCode: 'en-GB'
+    languageCode: 'en-GB',
+    destinationImage: {
+      url: 'https://images.unsplash.com/photo-1534292425621-6fbc5c09219a?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8dGVuZXJpZmV8ZW58MHx8MHx8fDA%3D',
+      alt: 'Tenerife'
+    }
   };
 
   return (

package/src/search-results/features/hotels/hotel-flight-search-results-self-contained.tsx

@@ -97,7 +97,11 @@ const HotelFlightSearchResultsSelfContained: React.FC<HotelFlightSearchResultsSe
     showFlightResults: true,
     showHotelAccommodationResults: true,
     showCustomCards: true,
-    customCardRenderer
+    customCardRenderer,
+    destinationImage: {
+      url: 'https://images.unsplash.com/photo-1534292425621-6fbc5c09219a?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8dGVuZXJpZmV8ZW58MHx8MHx8fDA%3D',
+      alt: 'Tenerife'
+    }
   };
 
   return (

package/src/search-results/features/hotels/hotel-search-results-self-contained.tsx

@@ -174,7 +174,11 @@ const HotelSearchResultsSelfContained: React.FC<HotelSearchResultsSelfContainedP
     isLoading: false,
     customSpinner: null,
 
-    languageCode: 'en-GB'
+    languageCode: 'en-GB',
+    destinationImage: {
+      url: 'https://images.unsplash.com/photo-1534292425621-6fbc5c09219a?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8dGVuZXJpZmV8ZW58MHx8MHx8fDA%3D',
+      alt: 'Tenerife'
+    }
   };
 
   return (

package/src/search-results/features/roundtrips/roundtrip-search-results-self-contained.tsx

@@ -19,7 +19,11 @@ const RoundtripSearchResultsSelfContained: React.FC<RoundtripSearchResultsSelfCo
     showFlightResults: false,
     showHotelAccommodationResults: false,
     showRoundTripResults: true,
-    showCustomCards: false
+    showCustomCards: false,
+    destinationImage: {
+      url: 'https://images.unsplash.com/photo-1534292425621-6fbc5c09219a?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8dGVuZXJpZmV8ZW58MHx8MHx8fDA%3D',
+      alt: 'Tenerife'
+    }
   };
 
   return (

package/src/search-results/types.ts

@@ -27,7 +27,7 @@ export interface SearchResultsConfiguration {
   showRoundTripResults?: boolean;
   showCustomCards?: boolean;
   customCardRenderer?: (result: SearchResult) => ReactNode;
-
+  showMockup?: boolean;
   // Map view
   // not supported for now
   showMapView?: boolean;
@@ -42,6 +42,8 @@ export interface SearchResultsConfiguration {
 
   cmsHotelData?: any[];
   languageCode?: string;
+
+  destinationImage?: { url: string; alt: string };
 }
 
 export type FilterType = 'checkbox' | 'toggle' | 'slider' | 'star-rating';