@qite/tide-booking-component 1.4.78 → 1.4.80

package/build/build-esm/src/qsm/types.d.ts

@@ -1,7 +1,9 @@
 import { ReactNode } from 'react';
 import { PortalQsmType, TravelClass, TravelType } from '../shared/types';
+import { WebsiteConfigurationSearchConfiguration } from '@qite/tide-client';
 export interface QSMConfiguration {
   type?: PortalQsmType;
+  searchConfigurations: WebsiteConfigurationSearchConfiguration[];
   askRooms?: boolean;
   askTravelType?: boolean;
   allowOneWay?: boolean;

package/build/build-esm/src/search-results/store/search-results-slice.d.ts

@@ -1,9 +1,12 @@
 import { ExtendedFlightSearchResponseItem, Filter } from '../types';
-import { BookingPackage, BookingPackageItem, EntryLight } from '@qite/tide-client/build/types';
+import { BookingPackage, BookingPackageItem, EntryLight, PackagingAccommodationResponse } from '@qite/tide-client/build/types';
 export interface SearchResultsState {
   results: BookingPackageItem[];
   filteredResults: BookingPackageItem[];
   selectedSearchResultId: number | null;
+  packagingAccoResults: PackagingAccommodationResponse[];
+  filteredPackagingAccoResults: PackagingAccommodationResponse[];
+  selectedPackagingAccoResultCode: string | null;
   selectedFlight: ExtendedFlightSearchResponseItem | null;
   selectedFlightDetails: ExtendedFlightSearchResponseItem | null;
   bookingPackageDetails: BookingPackage | null;
@@ -18,6 +21,12 @@ export interface SearchResultsState {
 export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem[], 'searchResults/setResults'>,
   setFilteredResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem[], 'searchResults/setFilteredResults'>,
   setSelectedSearchResult: import('@reduxjs/toolkit').ActionCreatorWithPayload<number | null, 'searchResults/setSelectedSearchResult'>,
+  setPackagingAccoResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<PackagingAccommodationResponse[], 'searchResults/setPackagingAccoResults'>,
+  setFilteredPackagingAccoResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<
+    PackagingAccommodationResponse[],
+    'searchResults/setFilteredPackagingAccoResults'
+  >,
+  setSelectedPackagingAccoResult: import('@reduxjs/toolkit').ActionCreatorWithPayload<string | null, 'searchResults/setSelectedPackagingAccoResult'>,
   setSelectedFlight: import('@reduxjs/toolkit').ActionCreatorWithPayload<ExtendedFlightSearchResponseItem | null, 'searchResults/setSelectedFlight'>,
   setSelectedFlightDetails: import('@reduxjs/toolkit').ActionCreatorWithPayload<
     ExtendedFlightSearchResponseItem | null,

package/build/build-esm/src/search-results/types.d.ts

@@ -1,9 +1,8 @@
-import { FlightSearchResponseItem } from '@qite/tide-client';
+import { FlightSearchResponseItem, WebsiteConfigurationSearchConfiguration } from '@qite/tide-client';
 import { ReactNode } from 'react';
-import { PortalQsmType } from '../shared/types';
 export type FlightSelectionMode = 'paired' | 'independent';
 export interface SearchResultsConfiguration {
-  type: PortalQsmType;
+  searchConfiguration: WebsiteConfigurationSearchConfiguration;
   tideConnection: {
     host: string;
     apiKey: string;
@@ -61,7 +60,8 @@ export interface PaginationConfig {
 }
 export type SearchResult = HotelResult | FlightResult | RoundTripResult;
 export interface BaseSearchResult {
-  id: number;
+  id?: number;
+  code: string;
   title: string;
   image: string;
   description?: string;
@@ -76,6 +76,7 @@ export interface BaseSearchResult {
 export interface HotelResult extends BaseSearchResult {
   type: 'hotel';
   days: string;
+  contents?: string;
 }
 export interface RoundTripResult extends BaseSearchResult {
   type: 'roundTrip';

package/build/build-esm/src/search-results/utils/search-results-utils.d.ts

@@ -1,3 +1,10 @@
-import { BookingPackageItem } from '@qite/tide-client';
-import { Filter } from '../types';
+import { BookingPackageItem, PackagingAccommodationResponse } from '@qite/tide-client';
+import { Filter, TideTag } from '../types';
+export declare const enrichFiltersWithResults: (results: BookingPackageItem[], filters: Filter[] | undefined, tags: TideTag[]) => Filter[];
+export declare const enrichFiltersWithPackageAccoResults: (
+  results: PackagingAccommodationResponse[],
+  filters: Filter[] | undefined,
+  tags: TideTag[]
+) => Filter[];
 export declare const applyFilters: (results: BookingPackageItem[], filters: Filter[]) => BookingPackageItem[];
+export declare const applyFiltersToPackageAccoResults: (results: PackagingAccommodationResponse[], filters: Filter[]) => PackagingAccommodationResponse[];

package/package.json

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

package/src/booking-wizard/features/price-details/selectors.ts

@@ -51,7 +51,7 @@ const aggregatePricePerPaxType = (priceDetails: BookingPriceDetail[], requestRoo
     room.pax.forEach((pax) => {
       let paxType = 'ADULT';
       if (typeof pax.age === 'number') {
-        if (pax.age <= 11) {
+        if (pax.age <= 11 && pax.age > 2) {
           paxType = 'CHILD';
         } else if (pax.age <= 2) {
           paxType = 'INFANT';

package/src/content/features/content-page/content-page-self-contained.tsx

@@ -60,7 +60,7 @@ const searchConfigurations: WebsiteConfigurationSearchConfiguration[] = [
     icon: '',
     defaultSearchType: 1,
     serviceTypes: [0],
-    defaultCatalogueId: undefined,
+    defaultCatalogueId: 1,
     defaultDuration: undefined,
     fromDateAmount: 0,
     fromDateAmountType: 0,
@@ -80,7 +80,7 @@ const searchConfigurations: WebsiteConfigurationSearchConfiguration[] = [
     icon: '',
     defaultSearchType: 0,
     serviceTypes: [3],
-    defaultCatalogueId: undefined,
+    defaultCatalogueId: 1,
     defaultDuration: undefined,
     fromDateAmount: 1,
     fromDateAmountType: 1,
@@ -100,7 +100,7 @@ const searchConfigurations: WebsiteConfigurationSearchConfiguration[] = [
     icon: '',
     defaultSearchType: 3,
     serviceTypes: [7],
-    defaultCatalogueId: undefined,
+    defaultCatalogueId: 1,
     defaultDuration: undefined,
     fromDateAmount: 1,
     fromDateAmountType: 1,
@@ -120,7 +120,7 @@ const searchConfigurations: WebsiteConfigurationSearchConfiguration[] = [
     icon: '',
     defaultSearchType: 0,
     serviceTypes: [0],
-    defaultCatalogueId: undefined,
+    defaultCatalogueId: 1,
     defaultDuration: undefined,
     fromDateAmount: 1,
     fromDateAmountType: 1,

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

@@ -19,6 +19,7 @@ import { BaseFieldConfig, DoubleFieldConfig } from '../../types';
 import { getTranslations } from '../../../shared/utils/localization-util';
 import { PortalQsmType } from '../../../shared/types';
 import { DateAmountType } from '@qite/tide-client';
+import { first } from 'lodash';
 
 const QSMContainer: React.FC = () => {
   const dispatch = useDispatch();
@@ -46,6 +47,14 @@ const QSMContainer: React.FC = () => {
   } = useContext(QSMConfigurationContext);
   const translations = getTranslations(languageCode ?? 'en-GB');
 
+  useEffect(() => {
+    const defaultQsmType = first(searchConfigurations)?.qsmType;
+    console.log('Available search configurations:', searchConfigurations);
+    if (!defaultQsmType) return;
+    console.log('set default qsmType:', defaultQsmType);
+    handleQsmTypeChange(defaultQsmType);
+  }, [searchConfigurations]);
+
   useEffect(() => {
     if (fromDate || toDate) return;
 

package/src/search-results/components/hotel/hotel-accommodation-results.tsx

@@ -4,24 +4,25 @@ import Spinner from '../spinner/spinner';
 import HotelCard from './hotel-card';
 import { useSelector } from 'react-redux';
 import { SearchResultsRootState } from '../../store/search-results-store';
-import { BookingPackageItem } from '@qite/tide-client/build/types';
+import { BookingPackageItem, PackagingAccommodationResponse } from '@qite/tide-client/build/types';
 import { format, parseISO } from 'date-fns';
 import { calculateNights, formatPrice, getTranslations } from '../../../shared/utils/localization-util';
 import SearchResultsConfigurationContext from '../../search-results-configuration-context';
+import { first } from 'lodash';
 
 interface HotelAccommodationResultsProps {
   isLoading: boolean;
 }
 
 const renderResults = (
-  results: BookingPackageItem[],
+  results: PackagingAccommodationResponse[],
   context: SearchResultsConfiguration,
   cmsMap: Map<any, any>,
   activeTab: string | null,
   translations: any
 ) => {
   const renderedResults = results.map((result, index) => {
-    const cmsItem = cmsMap.get(result.productId);
+    const cmsItem = cmsMap.get(result.code);
     const mappedResult: HotelResult = mapSearchResult(result, cmsItem, context.languageCode, translations);
     if (context?.showCustomCards && context?.customCardRenderer) {
       return (
@@ -36,10 +37,10 @@ const renderResults = (
   return <div className={`search__results__cards ${activeTab ? `search__results__cards--${activeTab}` : ''}`}>{renderedResults}</div>;
 };
 
-const mapSearchResult = (searchResult: BookingPackageItem, cmsItem: any, languageCode?: string, translations?: any): HotelResult => {
+const mapSearchResult = (searchResult: PackagingAccommodationResponse, cmsItem: any, languageCode?: string, translations?: any): HotelResult => {
   return {
     type: 'hotel',
-    id: searchResult.productId,
+    code: searchResult.code,
     title: cmsItem?.content?.general?.title || searchResult.name,
     image: cmsItem?.content?.images?.thumbnailPicture?.url,
     description: cmsItem?.content?.descriptions?.introductionTitle || '',
@@ -49,10 +50,11 @@ const mapSearchResult = (searchResult: BookingPackageItem, cmsItem: any, languag
         : cmsItem?.parentItem?.name || '',
     price: formatPrice(searchResult.price, searchResult.currencyCode, languageCode),
     ctaText: translations?.SRP.VIEW_DETAILS,
-    days: `${calculateNights(searchResult.stayFromDate, searchResult.stayToDate)} ${translations?.SRP.NIGHTS}`,
-    accommodation: searchResult.accommodationName,
-    regime: searchResult.regimeName,
-    stars: cmsItem?.content?.general?.stars || searchResult.hotelStars
+    days: `${calculateNights(new Date(searchResult.fromDate), new Date(searchResult.toDate))} ${translations?.SRP.NIGHTS}`,
+    accommodation: first(searchResult.rooms)?.options?.find((x) => x.isSelected)?.accommodationName || '',
+    regime: first(searchResult.rooms)?.options?.find((x) => x.isSelected)?.regimeName || '',
+    stars: cmsItem?.content?.general?.stars,
+    contents: searchResult.contents
   };
 };
 
@@ -62,32 +64,28 @@ const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ i
     return;
   }
 
-  if (context.showMockup) {
-    return showMocukups(context);
-  }
-
   const translations = getTranslations(context?.languageCode ?? 'en-GB');
 
   if (isLoading) {
     return <>{context?.customSpinner ?? <Spinner />}</>;
   }
 
-  const { filteredResults, activeTab } = useSelector((state: SearchResultsRootState) => state.searchResults);
+  const { filteredPackagingAccoResults, activeTab } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
-  if (!filteredResults.length) {
+  if (!filteredPackagingAccoResults.length) {
     return <div className="no-results">{translations.SRP.NO_RESULTS}</div>;
   }
 
   const cmsMap = React.useMemo(() => {
     const map = new Map();
     context.cmsHotelData?.forEach((item) => {
-      const id = item?.content?.general?.product?.tideId;
-      if (id) map.set(id, item);
+      const code = item?.content?.general?.product?.code;
+      if (code) map.set(code, item);
     });
     return map;
   }, [context.cmsHotelData]);
 
-  const firstResult = filteredResults?.[0];
+  const firstResult = filteredPackagingAccoResults?.[0];
 
   const firstResultDay = firstResult?.fromDate ? format(parseISO(firstResult.fromDate), 'd') : null;
 
@@ -106,90 +104,90 @@ const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ i
           </h3>
         </div>
       </div>
-      {renderResults(filteredResults, context, cmsMap, activeTab, translations)}
+      {renderResults(filteredPackagingAccoResults, context, cmsMap, activeTab, translations)}
     </>
   );
 };
 
 export default HotelAccommodationResults;
 
-const showMocukups = (context: any) => {
-  const mockedHotelResults = [
-    {
-      type: 'hotel',
-      id: 2,
-      title: 'HTFSWILLCARL',
-      image: 'https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=1925&auto=format&fit=crop',
-      description: '2 persoons kamer',
-      location: 'Tenerif, Spanje',
-      price: '$2244',
-      ctaText: 'Bekijk details',
-      days: '7 nights',
-      flightInfo: null,
-      accommodation: 'Hotel XYZ',
-      regime: 'All-inclusive',
-      stars: 5
-    } as HotelResult,
-    {
-      type: 'hotel',
-      id: 3,
-      title: 'HTFSSOFTROCK',
-      image: 'https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=1925&auto=format&fit=crop',
-      description: '3 persoons kamer',
-      location: 'Tenerif, Spanje',
-      price: '$2244',
-      ctaText: 'Bekijk details',
-      days: '7 nights',
-      flightInfo: null,
-      accommodation: 'Hotel ABC',
-      regime: 'Half-board',
-      stars: 4
-    } as HotelResult,
-    {
-      type: 'hotel',
-      id: 4,
-      title: 'HTFSROYGAR',
-      image: 'https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=1925&auto=format&fit=crop',
-      description: '4 persoons kamer',
-      location: 'Tenerif, Spanje',
-      price: '$2496',
-      ctaText: 'Bekijk details',
-      days: '7 nights',
-      flightInfo: null,
-      accommodation: 'Hotel DEF',
-      regime: 'Full-board',
-      stars: 5
-    } as HotelResult,
-    {
-      type: 'hotel',
-      id: 5,
-      title: 'HTFSCONBEL',
-      image: 'https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=1925&auto=format&fit=crop',
-      description: '5 persoons kamer',
-      location: 'Tenerif, Spanje',
-      price: '$6784.8',
-      ctaText: 'Bekijk details',
-      days: '7 nights',
-      flightInfo: null,
-      accommodation: 'Hotel GHI',
-      regime: 'All-inclusive',
-      stars: 5
-    } as HotelResult
-  ] as HotelResult[];
-  return <>{renderMockupResults(mockedHotelResults, context)}</>;
-};
-
-const renderMockupResults = (results: any[], context: any) => {
-  const renderedResults = results.map((result, index) => {
-    if (context?.showCustomCards && context?.customCardRenderer) {
-      return (
-        <div key={`${result.id}-${index}`} className="search__result-card">
-          {context.customCardRenderer(result)}
-        </div>
-      );
-    }
-    return <HotelCard key={`${result.id}-${index}`} result={result} />;
-  });
-
-  return <div className="search__results__cards">{renderedResults}</div>;
-};
+// const showMocukups = (context: any) => {
+//   const mockedHotelResults = [
+//     {
+//       type: 'hotel',
+//       id: 2,
+//       title: 'HTFSWILLCARL',
+//       image: 'https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=1925&auto=format&fit=crop',
+//       description: '2 persoons kamer',
+//       location: 'Tenerif, Spanje',
+//       price: '$2244',
+//       ctaText: 'Bekijk details',
+//       days: '7 nights',
+//       flightInfo: null,
+//       accommodation: 'Hotel XYZ',
+//       regime: 'All-inclusive',
+//       stars: 5
+//     } as HotelResult,
+//     {
+//       type: 'hotel',
+//       id: 3,
+//       title: 'HTFSSOFTROCK',
+//       image: 'https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=1925&auto=format&fit=crop',
+//       description: '3 persoons kamer',
+//       location: 'Tenerif, Spanje',
+//       price: '$2244',
+//       ctaText: 'Bekijk details',
+//       days: '7 nights',
+//       flightInfo: null,
+//       accommodation: 'Hotel ABC',
+//       regime: 'Half-board',
+//       stars: 4
+//     } as HotelResult,
+//     {
+//       type: 'hotel',
+//       id: 4,
+//       title: 'HTFSROYGAR',
+//       image: 'https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=1925&auto=format&fit=crop',
+//       description: '4 persoons kamer',
+//       location: 'Tenerif, Spanje',
+//       price: '$2496',
+//       ctaText: 'Bekijk details',
+//       days: '7 nights',
+//       flightInfo: null,
+//       accommodation: 'Hotel DEF',
+//       regime: 'Full-board',
+//       stars: 5
+//     } as HotelResult,
+//     {
+//       type: 'hotel',
+//       id: 5,
+//       title: 'HTFSCONBEL',
+//       image: 'https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=1925&auto=format&fit=crop',
+//       description: '5 persoons kamer',
+//       location: 'Tenerif, Spanje',
+//       price: '$6784.8',
+//       ctaText: 'Bekijk details',
+//       days: '7 nights',
+//       flightInfo: null,
+//       accommodation: 'Hotel GHI',
+//       regime: 'All-inclusive',
+//       stars: 5
+//     } as HotelResult
+//   ] as HotelResult[];
+//   return <>{renderMockupResults(mockedHotelResults, context)}</>;
+// };
+
+// const renderMockupResults = (results: any[], context: any) => {
+//   const renderedResults = results.map((result, index) => {
+//     if (context?.showCustomCards && context?.customCardRenderer) {
+//       return (
+//         <div key={`${result.id}-${index}`} className="search__result-card">
+//           {context.customCardRenderer(result)}
+//         </div>
+//       );
+//     }
+//     return <HotelCard key={`${result.id}-${index}`} result={result} />;
+//   });
+
+//   return <div className="search__results__cards">{renderedResults}</div>;
+// };

package/src/search-results/components/hotel/hotel-card.tsx

@@ -3,7 +3,7 @@ import { HotelResult } from '../../types';
 import Icon from '../icon';
 import { useDispatch, useSelector } from 'react-redux';
 import { SearchResultsRootState } from '../../store/search-results-store';
-import { setSelectedSearchResult } from '../../store/search-results-slice';
+import { setSelectedPackagingAccoResult } from '../../store/search-results-slice';
 
 interface HotelCardProps {
   result: HotelResult;
@@ -12,12 +12,34 @@ interface HotelCardProps {
 
 const HotelCard: React.FC<HotelCardProps> = ({ result, translations }) => {
   const dispatch = useDispatch();
-  const { selectedSearchResultId } = useSelector((state: SearchResultsRootState) => state.searchResults);
+  const { selectedPackagingAccoResultCode } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
-  const handleChange = (productId: number) => {
-    dispatch(setSelectedSearchResult(productId));
+  const handleChange = (productCode: string) => {
+    dispatch(setSelectedPackagingAccoResult(productCode));
   };
 
+  if (result.contents?.length) {
+    return (
+      <div className="search__result-card__wrapper">
+        <div
+          dangerouslySetInnerHTML={{
+            __html: result.contents
+          }}></div>
+        <div className="search__result-card__footer">
+          <button
+            type="button"
+            className={`cta ${selectedPackagingAccoResultCode === result.code ? 'cta--selected' : 'cta--select'}`}
+            onClick={() => handleChange(result.code)}>
+            {selectedPackagingAccoResultCode === result.code ? translations?.SHARED.SELECTED : translations?.SHARED.SELECT}
+          </button>
+          {/* <button type="button" className="cta cta--select" onClick={() => console.log('Clicked on customCard with id:', result.id)}>
+            {translations?.SRP.VIEW_DETAILS}
+          </button> */}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div
       key={result.id}
@@ -73,9 +95,9 @@ const HotelCard: React.FC<HotelCardProps> = ({ result, translations }) => {
         <div className="search__result-card__footer">
           <button
             type="button"
-            className={`cta ${selectedSearchResultId === result.id ? 'cta--selected' : 'cta--select'}`}
-            onClick={() => handleChange(result.id)}>
-            {selectedSearchResultId === result.id ? translations?.SHARED.SELECTED : translations?.SHARED.SELECT}
+            className={`cta ${selectedPackagingAccoResultCode === result.code ? 'cta--selected' : 'cta--select'}`}
+            onClick={() => handleChange(result.code)}>
+            {selectedPackagingAccoResultCode === result.code ? translations?.SHARED.SELECTED : translations?.SHARED.SELECT}
           </button>
           {/* <button type="button" className="cta cta--select" onClick={() => console.log('Clicked on customCard with id:', result.id)}>
             {translations?.SRP.VIEW_DETAILS}

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

@@ -43,7 +43,7 @@ const FlightResultsContainer: React.FC<FlightResultsContainerProps> = ({ isMobil
 
   useEffect(() => {
     if (!context?.showMockup) {
-      if (context?.type === PortalQsmType.Flight && isHubReady) {
+      if (context?.searchConfiguration.qsmType === PortalQsmType.Flight && isHubReady) {
         onFlightSearch();
       }
     }
@@ -129,7 +129,7 @@ const FlightResultsContainer: React.FC<FlightResultsContainerProps> = ({ isMobil
 
           <div className="search__results__wrapper">
             {flightsLoading && <Spinner />}
-            {context?.type == PortalQsmType.Flight && context?.showFlightAccommodationResults && results && results.length > 0 && (
+            {context?.searchConfiguration.qsmType == PortalQsmType.Flight && context?.showFlightAccommodationResults && results && results.length > 0 && (
               <FlightSelection searchResults={results} flightSelectionType={flightSelectionType} />
             )}
           </div>