@qite/tide-booking-component 1.4.53 → 1.4.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.53",
+  "version": "1.4.54",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",

package/src/qsm/components/QSMContainer/qsm-container.tsx

@@ -99,7 +99,6 @@ const QSMContainer: React.FC = () => {
 
     // Filter out undefined fields before passing to addSearchFieldsToPayload
     const searchFields = [departureAirport, destinationAirport, returnAirport, destination].filter((field): field is BaseFieldConfig => field !== undefined);
-
     addSearchFieldsToPayload(payload, searchFields, qsmState);
     onSubmit(payload);
     console.log('Submitted QSM data:', payload);
@@ -219,40 +218,39 @@ const QSMContainer: React.FC = () => {
           </button>
         </div>
         <div className="qsm__filter">
-          {qsmType === 'hotel' ||
-            (qsmType == 'hotel-flight' && (
-              <div className="radiobutton-group qsm__filter__inputgroup">
-                <div className="radiobutton">
-                  <label className="radiobutton__label">
-                    <input
-                      type="radio"
-                      name="numberOfAccommodations"
-                      // onChange={handleMainBookerChange}
-                      // onBlur={formik.handleBlur}
-                      value=""
-                      checked={true}
-                      readOnly
-                      className="radiobutton__input"
-                    />
-                    <span>{translations.QSM.ONE_ACCOMMODATION}</span>
-                  </label>
-                </div>
-                <div className="radiobutton">
-                  <label className="radiobutton__label">
-                    <input
-                      type="radio"
-                      name="numberOfAccommodations"
-                      // onChange={handleMainBookerChange}
-                      // onBlur={formik.handleBlur}
-                      value=""
-                      className="radiobutton__input"
-                      disabled={true}
-                    />
-                    <span>{translations.QSM.MULTIPLE_ACCOMMODATIONS}</span>
-                  </label>
-                </div>
+          {(qsmType === 'hotel' || qsmType === 'hotel-flight') && (
+            <div className="radiobutton-group qsm__filter__inputgroup">
+              <div className="radiobutton">
+                <label className="radiobutton__label">
+                  <input
+                    type="radio"
+                    name="numberOfAccommodations"
+                    // onChange={handleMainBookerChange}
+                    // onBlur={formik.handleBlur}
+                    value=""
+                    checked={true}
+                    readOnly
+                    className="radiobutton__input"
+                  />
+                  <span>{translations.QSM.ONE_ACCOMMODATION}</span>
+                </label>
+              </div>
+              <div className="radiobutton">
+                <label className="radiobutton__label">
+                  <input
+                    type="radio"
+                    name="numberOfAccommodations"
+                    // onChange={handleMainBookerChange}
+                    // onBlur={formik.handleBlur}
+                    value=""
+                    className="radiobutton__input"
+                    disabled={true}
+                  />
+                  <span>{translations.QSM.MULTIPLE_ACCOMMODATIONS}</span>
+                </label>
               </div>
-            ))}
+            </div>
+          )}
           {qsmType === 'flight' && (
             <div className="radiobutton-group qsm__filter__inputgroup">
               {allowOneWay && (

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

@@ -13,7 +13,7 @@ import {
   setEntry,
   setFlyInIsOpen
 } from '../../store/search-results-slice';
-import { Filter, SortingOption } from '../../types';
+import { Filter, SortByType, SortingOption } from '../../types';
 import useMediaQuery from '../../../shared/utils/use-media-query-util';
 import ItemPicker from '../item-picker';
 
@@ -42,6 +42,7 @@ import FlightResults from '../flight/flight-results';
 import { getTranslations } from '../../../shared/utils/localization-util';
 import { FlightSearchProvider } from '../flight/flight-search-context';
 import FlightResultsContainer from './flight-search-results';
+import Filters from '../filters/filters';
 
 const SearchResultsContainer: React.FC = () => {
   const dispatch = useDispatch();
@@ -63,10 +64,11 @@ const SearchResultsContainer: React.FC = () => {
 
   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 },
-    { key: 'departure-date', label: translations.SRP.DEPARTURE_ASC }
+  const sortByTypes: SortByType[] = [
+    { direction: 'asc', label: 'price' } as SortByType,
+    { direction: 'desc', label: 'price' } as SortByType,
+    { direction: 'asc', label: 'departure' } as SortByType,
+    { direction: 'desc', label: 'departure' } as SortByType
   ];
 
   const handleFlyInToggle = (isOpen: boolean) => {
@@ -144,7 +146,7 @@ const SearchResultsContainer: React.FC = () => {
     return searchRequest;
   };
 
-  const buildSearchFromQueryParams = (params: URLSearchParams): BookingPackageRequest<BookingPackageSearchRequest> => {
+  const buildSearchFromQueryParams = (params: URLSearchParams): BookingPackageRequest<BookingPackageSearchRequest> | null => {
     let from = getDateFromParams(params, 'fromDate');
     let to = getDateFromParams(params, 'toDate');
     const rooms = getRoomsFromParams(params, 'rooms');
@@ -157,11 +159,9 @@ const SearchResultsContainer: React.FC = () => {
 
     // temp hardcoded params
     if (!from || !to) {
-      from = '2026-04-07';
-      to = '2026-04-13';
-    }
-    if (!country && !region && !oord && !city) {
-      region = 1;
+      console.error('Missing fromDate or toDate in query params, using default values');
+
+      return null;
     }
 
     if (typeof window !== 'undefined') {
@@ -206,14 +206,14 @@ const SearchResultsContainer: React.FC = () => {
         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,
+        includeFlights: context!.type === 'hotel-flight' ? true : false,
+        // 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,
@@ -290,7 +290,7 @@ const SearchResultsContainer: React.FC = () => {
 
   // seperate Search
   useEffect(() => {
-    const runHotelFlightSearch = async () => {
+    const runHotelSearch = async () => {
       dispatch(setIsLoading(true));
       try {
         if (!context) {
@@ -315,7 +315,13 @@ const SearchResultsContainer: React.FC = () => {
           dispatch(setEntry({ entry: entryLight }));
           searchRequest = buildSearchFromEntry(entryLight);
         } else {
-          searchRequest = buildSearchFromQueryParams(params);
+          const rq = buildSearchFromQueryParams(params);
+
+          if (!rq) {
+            throw new Error('Invalid search parameters');
+          }
+
+          searchRequest = rq;
         }
 
         const packageSearchResults = await search(config, searchRequest);
@@ -350,8 +356,8 @@ const SearchResultsContainer: React.FC = () => {
     };
 
     if (!context?.showMockup) {
-      if (context?.type === 'hotel-flight') {
-        runHotelFlightSearch();
+      if (context?.type === 'hotel-flight' || context?.type === 'hotel') {
+        runHotelSearch();
       }
     }
   }, [location.search, searchTrigger]);
@@ -393,7 +399,7 @@ const SearchResultsContainer: React.FC = () => {
             productCode: selectedItem.code,
             fromDate: selectedItem.fromDate,
             toDate: selectedItem.toDate,
-            includeFlights: true,
+            includeFlights: context!.type === 'hotel-flight' ? true : false,
             includeHotels: true,
             includePaxTypes: true,
             checkExternalAvailability: true,
@@ -434,24 +440,26 @@ const SearchResultsContainer: React.FC = () => {
                 <FlyIn srpType={context.type} isOpen={flyInIsOpen} setIsOpen={handleFlyInToggle} onPanelRef={(el) => (panelRef.current = el)} />
               </FlightSearchProvider>
             )}
-            {context.type === 'hotel-flight' && (
+            {(context.type === 'hotel-flight' || context.type === 'hotel' || context.type === 'roundTrip') && (
               <>
-                {/* {context.showFilters && (
-              <Filters
-                filters={filters}
-                isOpen={filtersOpen}
-                handleSetIsOpen={() => setFiltersOpen(!filtersOpen)}
-                handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
-                isLoading={isLoading}
-              />
-            )} */}
-                <Itinerary isOpen={itineraryOpen} handleSetIsOpen={() => setItineraryOpen(!itineraryOpen)} isLoading={isLoading} />
+                {context.type != 'hotel-flight' && context.showFilters && (
+                  <Filters
+                    filters={filters}
+                    isOpen={filtersOpen}
+                    handleSetIsOpen={() => setFiltersOpen(!filtersOpen)}
+                    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 && (
+                        {context.type != 'hotel-flight' && context.showFilters && (
                           <div className="cta cta--filter" onClick={() => setFiltersOpen(true)}>
                             <Icon name="ui-filter" className="mobile-filters-button__icon" height={16} />
                             {translations.SRP.FILTERS}
@@ -464,9 +472,9 @@ const SearchResultsContainer: React.FC = () => {
                           </div>
                         )}
                       </div>
-                      {sortingOptions && sortingOptions.length > 0 && (
+                      {sortByTypes && sortByTypes.length > 0 && (
                         <ItemPicker
-                          items={sortingOptions}
+                          items={sortByTypes}
                           selection={sortKey || undefined}
                           label={translations.SRP.SORTBY}
                           placeholder={translations.SRP.SORTBY}
@@ -476,7 +484,6 @@ const SearchResultsContainer: React.FC = () => {
                       )}
                     </div>
                   )}
-
                   <div className="search__result-row">
                     <span className="search__result-row-text">
                       {!isLoading && (
@@ -485,10 +492,10 @@ const SearchResultsContainer: React.FC = () => {
                         </>
                       )}
                     </span>
-                    {!isMobile && sortingOptions && sortingOptions.length > 0 && (
+                    {!isMobile && sortByTypes && sortByTypes.length > 0 && (
                       <div className="search__result-row-filter">
                         <ItemPicker
-                          items={sortingOptions}
+                          items={sortByTypes}
                           selection={sortKey || undefined}
                           label={translations.SRP.SORTBY}
                           placeholder={translations.SRP.SORTBY}

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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Filter, SearchResult, SearchResultsConfiguration, SortingOption } from '../../types';
+import { Filter, SearchResult, SearchResultsConfiguration } from '../../types';
 import SearchResults from '../..';
 import { Footer, Navbar } from '../../../../src';
 import { TideLogo, language, languages, topLinks, navItems } from '../../../../src/content/navbar/placeholderData';