@qite/tide-booking-component 1.4.53 → 1.4.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.53",
+  "version": "1.4.55",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",
@@ -28,7 +28,7 @@
   "devDependencies": {
     "@jsonurl/jsonurl": "^1.1.4",
     "@popperjs/core": "^2.10.2",
-    "@qite/tide-client": "^1.1.138",
+    "@qite/tide-client": "^1.1.141",
     "@reduxjs/toolkit": "^2.8.2",
     "@rollup/plugin-commonjs": "^19.0.1",
     "@rollup/plugin-json": "^4.1.0",

package/src/content/navbar/index.tsx

@@ -2,12 +2,13 @@ import React, { useEffect, useState } from 'react';
 import LanguageSwitcher from '../components/LanguageSwitcher';
 import Icon from '../components/icon';
 import { NavbarProps, NavItem } from '../navbar/types';
+import { getTranslations } from '../../shared/utils/localization-util';
 
 const Navbar: React.FC<NavbarProps> = ({ currentPath, logo, topLinks, items, language, languages, onLanguageChange, onSearch }) => {
   const [menuOpen, setMenuOpen] = useState(false);
   const [query, setQuery] = useState('');
   const [activeMobileGroup, setActiveMobileGroup] = useState<string>();
-
+  const translations = getTranslations(language.code ?? 'en-GB');
   const normalizePath = (path: string) => path.replace(/\/+$/, '');
 
   useEffect(() => {
@@ -221,7 +222,7 @@ const Navbar: React.FC<NavbarProps> = ({ currentPath, logo, topLinks, items, lan
                     type="search"
                     value={query}
                     onChange={(e) => setQuery(e.target.value)}
-                    placeholder="Search…"
+                    placeholder={translations.NAVBAR.SEARCH}
                     autoComplete="off"
                   />
                   <button type="button" className="nav__search__clear" aria-label="Clear search" onClick={() => setQuery('')}>

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/hotel/hotel-accommodation-results.tsx

@@ -44,7 +44,9 @@ const mapSearchResult = (searchResult: BookingPackageItem, cmsItem: any, languag
     image: cmsItem?.content?.images?.thumbnailPicture?.url,
     description: cmsItem?.content?.descriptions?.introductionTitle || '',
     location:
-      searchResult.locationName && searchResult.countryName ? `${searchResult.locationName}, ${searchResult.countryName}` : cmsItem?.parentItem?.name || '',
+      searchResult.locationName || searchResult.regionName
+        ? `${searchResult.locationName || searchResult.regionName}${searchResult.countryName && `, ${searchResult.countryName}`}`
+        : cmsItem?.parentItem?.name || '',
     price: formatPrice(searchResult.price, searchResult.currencyCode, languageCode),
     ctaText: translations?.SRP.VIEW_DETAILS,
     days: calculateNights(searchResult.stayFromDate, searchResult.stayToDate, translations),

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

@@ -2,7 +2,6 @@ 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';
-
 import {
   resetFilters,
   setSortKey,
@@ -13,10 +12,9 @@ import {
   setEntry,
   setFlyInIsOpen
 } from '../../store/search-results-slice';
-import { Filter, SortingOption } from '../../types';
+import { Filter, SortByType } from '../../types';
 import useMediaQuery from '../../../shared/utils/use-media-query-util';
 import ItemPicker from '../item-picker';
-
 import { TideClientConfig, details, detailsWL, getEntryLight, search } from '@qite/tide-client';
 import {
   BookingPackageDestination,
@@ -42,6 +40,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 +62,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 +144,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 +157,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 +204,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 +288,7 @@ const SearchResultsContainer: React.FC = () => {
 
   // seperate Search
   useEffect(() => {
-    const runHotelFlightSearch = async () => {
+    const runHotelSearch = async () => {
       dispatch(setIsLoading(true));
       try {
         if (!context) {
@@ -315,7 +313,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 +354,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 +397,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 +438,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 +470,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 +482,6 @@ const SearchResultsContainer: React.FC = () => {
                       )}
                     </div>
                   )}
-
                   <div className="search__result-row">
                     <span className="search__result-row-text">
                       {!isLoading && (
@@ -485,10 +490,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}
@@ -504,13 +509,13 @@ const SearchResultsContainer: React.FC = () => {
 
                     {context.showRoundTripResults && context.showMockup && <RoundTripResults />}
 
-                    {context.showFlightResults && bookingPackageDetails?.outwardFlights && (
+                    {context.type === 'hotel-flight' && context.showFlightResults && bookingPackageDetails?.outwardFlights && (
                       <FlightResults flights={bookingPackageDetails?.outwardFlights} isDeparture={true} />
                     )}
 
                     {context.showHotelAccommodationResults && <HotelAccommodationResults isLoading={isLoading} context={context} />}
 
-                    {context.showFlightResults && bookingPackageDetails?.returnFlights && (
+                    {context.type === 'hotel-flight' && context.showFlightResults && bookingPackageDetails?.returnFlights && (
                       <FlightResults flights={bookingPackageDetails?.returnFlights} isDeparture={false} />
                     )}
                   </div>

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';

package/src/shared/translations/ar-SA.json

@@ -249,6 +249,9 @@
     "LABEL_CREATING": "جارٍ إنشاء العرض…",
     "LABEL_PRINTING": "جارٍ إنشاء ملف PDF…"
   },
+  "NAVBAR": {
+    "SEARCH": "بحث"
+  },
   "QSM": {
     "MULTIDESTINATION": "وجهات متعددة",
     "PACKAGES": "باقات",

package/src/shared/translations/da-DK.json

@@ -249,6 +249,9 @@
     "LABEL_CREATING": "Genererer tilbud…",
     "LABEL_PRINTING": "Genererer PDF…"
   },
+  "NAVBAR": {
+    "SEARCH": "Søg"
+  },
   "QSM": {
     "MULTIDESTINATION": "Flere destinationer",
     "PACKAGES": "Pakkerejser",

package/src/shared/translations/de-DE.json

@@ -249,6 +249,9 @@
     "LABEL_CREATING": "Angebot wird erstellt…",
     "LABEL_PRINTING": "PDF wird erstellt…"
   },
+  "NAVBAR": {
+    "SEARCH": "Suche"
+  },
   "QSM": {
     "MULTIDESTINATION": "Mehrere Reiseziele",
     "PACKAGES": "Reisepakete",

package/src/shared/translations/en-GB.json

@@ -253,6 +253,9 @@
     "LABEL_CREATING": "Generating offer…",
     "LABEL_PRINTING": "Generating PDF…"
   },
+  "NAVBAR": {
+    "SEARCH": "SEARCH"
+  },
   "QSM": {
     "MULTIDESTINATION": "Multidestination",
     "PACKAGES": "Packages",

package/src/shared/translations/es-ES.json

@@ -249,6 +249,9 @@
     "LABEL_CREATING": "Generando presupuesto…",
     "LABEL_PRINTING": "Generando PDF…"
   },
+  "NAVBAR": {
+    "SEARCH": "Buscar"
+  },
   "QSM": {
     "MULTIDESTINATION": "Multidestino",
     "PACKAGES": "Paquetes",

package/src/shared/translations/fr-BE.json

@@ -253,6 +253,9 @@
     "LABEL_CREATING": "Génération du devis…",
     "LABEL_PRINTING": "Génération du PDF…"
   },
+  "NAVBAR": {
+    "SEARCH": "Rechercher"
+  },
   "QSM": {
     "MULTIDESTINATION": "Multi-destinations",
     "PACKAGES": "Forfaits",

package/src/shared/translations/fr-FR.json

@@ -249,6 +249,9 @@
     "LABEL_CREATING": "Génération du devis…",
     "LABEL_PRINTING": "Génération du PDF…"
   },
+  "NAVBAR": {
+    "SEARCH": "Rechercher"
+  },
   "QSM": {
     "MULTIDESTINATION": "Multi-destinations",
     "PACKAGES": "Forfaits",

package/src/shared/translations/is-IS.json

@@ -249,6 +249,9 @@
     "LABEL_CREATING": "Búið til tilboð…",
     "LABEL_PRINTING": "Búið til PDF…"
   },
+  "NAVBAR": {
+    "SEARCH": "Leita"
+  },
   "QSM": {
     "MULTIDESTINATION": "Margir áfangastaðir",
     "PACKAGES": "Pakkar",

package/src/shared/translations/it-IT.json

@@ -249,6 +249,9 @@
     "LABEL_CREATING": "Generazione del preventivo…",
     "LABEL_PRINTING": "Generazione del PDF…"
   },
+  "NAVBAR": {
+    "SEARCH": "Cerca"
+  },
   "QSM": {
     "MULTIDESTINATION": "Multidestinazione",
     "PACKAGES": "Pacchetti",

package/src/shared/translations/ja-JP.json

@@ -249,6 +249,9 @@
     "LABEL_CREATING": "見積もりを生成中…",
     "LABEL_PRINTING": "PDFを生成中…"
   },
+  "NAVBAR": {
+    "SEARCH": "検索"
+  },
   "QSM": {
     "MULTIDESTINATION": "複数都市",
     "PACKAGES": "パッケージ",

package/src/shared/translations/nl-BE.json

@@ -253,6 +253,9 @@
     "LABEL_CREATING": "Offerte genereren...",
     "LABEL_PRINTING": "PDF genereren..."
   },
+  "NAVBAR": {
+    "SEARCH": "Zoeken"
+  },
   "QSM": {
     "MULTIDESTINATION": "Meerdere bestemmingen",
     "PACKAGES": "Pakketten",

package/src/shared/translations/nl-NL.json

@@ -249,6 +249,9 @@
     "LABEL_CREATING": "Offerte genereren…",
     "LABEL_PRINTING": "PDF genereren…"
   },
+  "NAVBAR": {
+    "SEARCH": "Zoeken"
+  },
   "QSM": {
     "MULTIDESTINATION": "Meerdere bestemmingen",
     "PACKAGES": "Pakketten",

package/src/shared/translations/no-NO.json

@@ -249,6 +249,9 @@
     "LABEL_CREATING": "Genererer tilbud…",
     "LABEL_PRINTING": "Genererer PDF…"
   },
+  "NAVBAR": {
+    "SEARCH": "Søk"
+  },
   "QSM": {
     "MULTIDESTINATION": "Flere destinasjoner",
     "PACKAGES": "Pakker",

package/src/shared/translations/pl-PL.json

@@ -249,6 +249,9 @@
     "LABEL_CREATING": "Generowanie oferty…",
     "LABEL_PRINTING": "Generowanie PDF…"
   },
+  "NAVBAR": {
+    "SEARCH": "Szukaj"
+  },
   "QSM": {
     "MULTIDESTINATION": "Wiele kierunków",
     "PACKAGES": "Pakiety",

package/src/shared/translations/pt-PT.json

@@ -249,6 +249,9 @@
     "LABEL_CREATING": "A gerar orçamento…",
     "LABEL_PRINTING": "A gerar PDF…"
   },
+  "NAVBAR": {
+    "SEARCH": "Pesquisar"
+  },
   "QSM": {
     "MULTIDESTINATION": "Multidestino",
     "PACKAGES": "Pacotes",

package/src/shared/translations/sv-SE.json

@@ -249,6 +249,9 @@
     "LABEL_CREATING": "Skapar offert…",
     "LABEL_PRINTING": "Skapar PDF…"
   },
+  "NAVBAR": {
+    "SEARCH": "Sök"
+  },
   "QSM": {
     "MULTIDESTINATION": "Flera destinationer",
     "PACKAGES": "Paket",