@qite/tide-booking-component 1.4.31 → 1.4.32

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

@@ -2,6 +2,7 @@ import { Filter } from '../types';
 import { BookingPackageItem } from '@qite/tide-client/build/types';
 export interface SearchResultsState {
   results: BookingPackageItem[];
+  selectedHotelId: number | null;
   isLoading: boolean;
   filters: Filter[];
   sortKey: string | null;
@@ -14,6 +15,7 @@ export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPay
     },
     'searchResults/setResults'
   >,
+  setSelectedHotel: import('@reduxjs/toolkit').ActionCreatorWithPayload<number | null, 'searchResults/setSelectedHotel'>,
   setIsLoading: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, 'searchResults/setIsLoading'>,
   setFilters: import('@reduxjs/toolkit').ActionCreatorWithPayload<Filter[], 'searchResults/setFilters'>,
   resetFilters: import('@reduxjs/toolkit').ActionCreatorWithPayload<Filter[], 'searchResults/resetFilters'>,

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

@@ -18,7 +18,6 @@ export interface SearchResultsConfiguration {
   showRoundTripResults?: boolean;
   showCustomCards?: boolean;
   customCardRenderer?: (result: SearchResult) => ReactNode;
-  onResultClick?: (id: string) => void;
   showMapView?: boolean;
   noResultsLabel?: string;
   isLoading?: boolean;
@@ -37,6 +36,7 @@ export interface SearchResultsConfiguration {
     searchResultCTA?: string;
   };
   cmsHotelData?: any[];
+  languageCode?: string;
 }
 export type FilterType = 'checkbox' | 'toggle' | 'slider' | 'star-rating';
 export type FilterProperty = 'regime' | 'max-duration' | 'price' | 'rating' | 'theme';
@@ -65,7 +65,7 @@ export interface PaginationConfig {
 }
 export type SearchResult = HotelResult | FlightResult | RoundTripResult;
 export interface BaseSearchResult {
-  id: string;
+  id: number;
   title: string;
   image: string;
   description?: string;

package/build/build-esm/shared/utils/localization-util.d.ts

@@ -77,6 +77,8 @@ export declare const getTranslations: (language: string) => {
     WHO_YOU_TRAVELING_WITH: string;
     TRAVEL_PERIOD: string;
     CLOSE: string;
+    NIGHTS: string;
+    DAYS: string;
   };
   MAIN: {
     PREPARING_BOOKING: string;
@@ -249,9 +251,22 @@ export declare const getTranslations: (language: string) => {
   };
 };
 export declare const locales: {
-  'nl-BE': Locale;
-  'fr-BE': Locale;
+  'ar-SA': Locale;
+  'da-DK': Locale;
+  'de-DE': Locale;
   'en-GB': Locale;
+  'es-ES': Locale;
+  'fr-BE': Locale;
+  'fr-FR': Locale;
+  'is-IS': Locale;
+  'it-IT': Locale;
+  'nl-BE': Locale;
+  'nl-NL': Locale;
+  'no-NO': Locale;
+  'pl-PL': Locale;
+  'pt-PT': Locale;
+  'sv-SE': Locale;
+  'ja-JP': Locale;
 };
 export declare function getLocale(code: string): Locale;
 export declare const getPriceDifferenceText: (price: number, currencyCode: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.31",
+  "version": "1.4.32",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "module": "build/build-esm/index.js",

package/src/booking-product/components/date-range-picker/index.tsx

@@ -1,8 +1,9 @@
 import { endOfDay, endOfMonth, getMonth, getYear, isAfter, isEqual, isWithinInterval, startOfDay } from 'date-fns';
 
 import { isNil } from 'lodash';
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import Calendar from './calendar';
+import SettingsContext from '../../settings-context';
 
 interface DateRangePickerProps {
   fromDate?: Date;
@@ -17,6 +18,7 @@ interface DateRangePickerProps {
   onFromDateChange?: (date?: Date) => void;
   onToDateChange?: (date?: Date) => void;
   onFocusMonthChange?: (focusMonth: { month: number; year: number }) => void;
+  toDateByFromDate?: (fromDate?: Date) => Date | undefined;
 }
 
 const DateRangePicker: React.FC<DateRangePickerProps> = (props) => {
@@ -29,39 +31,50 @@ const DateRangePicker: React.FC<DateRangePickerProps> = (props) => {
     }
   );
   const [isWaitingForToDate, setWaitingForToDate] = useState<boolean>(false);
+  const { searchType = 0 } = useContext(SettingsContext);
 
   const handleDayClick = (day: Date) => {
     const { onSelectionChange } = props;
 
     if (isWaitingForToDate && !isNil(fromDate) && isAfter(day, fromDate)) {
-      setToDate(day);
-      setWaitingForToDate(false);
-
-      if (props.onToDateChange) {
-        props.onToDateChange(undefined);
-      }
+      if (searchType === 1) {
+        // Only allow selecting the exact toDate
+        const expectedToDate = props.toDateByFromDate?.(fromDate);
+        if (expectedToDate && isEqual(day, expectedToDate)) {
+          setToDate(day);
+          setWaitingForToDate(false);
+
+          props.onToDateChange?.(undefined);
+          onSelectionChange?.(fromDate, day);
+        }
+      } else {
+        // searchType === 0 (original behavior)
+        setToDate(day);
+        setWaitingForToDate(false);
 
-      if (onSelectionChange) {
-        onSelectionChange(fromDate, day);
+        props.onToDateChange?.(undefined);
+        onSelectionChange?.(fromDate, day);
       }
     } else {
       setFromDate(day);
 
-      if (props.duration) {
-        const to = new Date(Date.UTC(day.getFullYear(), day.getMonth(), day.getDate() + props.duration));
+      if (searchType === 1 && props.toDateByFromDate) {
+        const to = props.toDateByFromDate(day);
         setToDate(to);
 
-        if (onSelectionChange) {
-          onSelectionChange(day, to);
+        if (to) {
+          onSelectionChange?.(day, to);
         }
+      } else if (props.duration) {
+        const to = new Date(Date.UTC(day.getFullYear(), day.getMonth(), day.getDate() + props.duration));
+        setToDate(to);
+        onSelectionChange?.(day, to);
       } else {
         setToDate(undefined);
         setWaitingForToDate(true);
       }
 
-      if (props.onFromDateChange) {
-        props.onFromDateChange(day);
-      }
+      props.onFromDateChange?.(day);
     }
   };
 

package/src/booking-product/components/dates.tsx

@@ -1,4 +1,4 @@
-import { format, isBefore, startOfDay } from 'date-fns';
+import { format, isBefore, startOfDay, isSameDay } from 'date-fns';
 import React, { useContext, useEffect, useState } from 'react';
 import { usePopper } from 'react-popper';
 import { buildClassName } from '../../shared/utils/class-util';
@@ -12,9 +12,11 @@ interface DatesProps {
   value?: DateRange;
   duration?: number;
   onChange?: (value: DateRange) => void;
+  availableDatePairs?: { fromDate: Date; toDate: Date }[];
+  isLoading?: boolean;
 }
 
-const Dates: React.FC<DatesProps> = ({ value, duration, onChange }) => {
+const Dates: React.FC<DatesProps> = ({ value, duration, onChange, availableDatePairs, isLoading }) => {
   const { language } = useContext(SettingsContext);
   const translations = getTranslations(language);
   const mql = typeof window !== 'undefined' ? window.matchMedia('(min-width: 992px)') : undefined;
@@ -23,6 +25,7 @@ const Dates: React.FC<DatesProps> = ({ value, duration, onChange }) => {
   const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   const [panelActive, setPanelActive] = useState<boolean>(false);
+  const { searchType = 0 } = useContext(SettingsContext);
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: mql?.matches ? 'top' : 'bottom',
@@ -50,6 +53,21 @@ const Dates: React.FC<DatesProps> = ({ value, duration, onChange }) => {
     if (!panelActive) setPanelActive(true);
   };
 
+  // Only allow selecting fromDates that are in availableDatePairs
+  const disabledDaysFunction = (date: Date) => {
+    if (!availableDatePairs || availableDatePairs.length === 0) {
+      return isBefore(date, startOfDay(new Date()));
+    }
+    return !availableDatePairs.some((pair) => isSameDay(pair.fromDate, date));
+  };
+
+  // Given a fromDate, find the corresponding toDate
+  const findToDateByFromDate = (fromDate?: Date) => {
+    if (!fromDate || !availableDatePairs) return undefined;
+    const found = availableDatePairs.find((pair) => isSameDay(pair.fromDate, fromDate));
+    return found ? found.toDate : undefined;
+  };
+
   const handleSelectionChange = (fromDate?: Date, toDate?: Date) => {
     if (onChange) {
       onChange({ fromDate, toDate });
@@ -77,7 +95,11 @@ const Dates: React.FC<DatesProps> = ({ value, duration, onChange }) => {
         {translations.PRODUCT.TRAVEL_PERIOD}
       </div>
       <div className="form__group form__group--datepicker form__group--icon">
-        <div className="form__group-input">
+        <div
+          className={
+            'form__group-input' +
+            ((searchType === 1 && availableDatePairs && availableDatePairs.length === 0) || isLoading ? ' form__group-input--disabled' : '')
+          }>
           <label className="form__label">{translations.PRODUCT.DEPARTURE}</label>
           <input
             type="text"
@@ -89,7 +111,7 @@ const Dates: React.FC<DatesProps> = ({ value, duration, onChange }) => {
           />
         </div>
 
-        <div className="form__group-input">
+        <div className={'form__group-input' + (searchType === 1 || isLoading ? ' form__group-input--disabled' : '')}>
           <label className="form__label">{translations.PRODUCT.RETURN}</label>
           <input
             type="text"
@@ -113,7 +135,8 @@ const Dates: React.FC<DatesProps> = ({ value, duration, onChange }) => {
             fromDate={value?.fromDate}
             toDate={value?.toDate}
             duration={duration}
-            disabledDaysFunction={(date) => isBefore(date, startOfDay(new Date()))}
+            disabledDaysFunction={disabledDaysFunction}
+            toDateByFromDate={findToDateByFromDate}
             onSelectionChange={handleSelectionChange}
           />
           {!mql?.matches && (

package/src/booking-product/components/list-view.tsx

@@ -0,0 +1,54 @@
+import { BookingPackageItem } from '@qite/tide-client';
+import React, { useContext } from 'react';
+import { getTranslations } from '../../shared/utils/localization-util';
+import SettingsContext from '../settings-context';
+import { differenceInCalendarDays } from 'date-fns';
+import { isEmpty } from 'lodash';
+
+interface ListViewProps {
+  searchResults: BookingPackageItem[];
+  onSelect?: (selectedItem: BookingPackageItem) => void;
+}
+
+const ListView: React.FC<ListViewProps> = ({ searchResults, onSelect }) => {
+  const { language } = useContext(SettingsContext);
+  const translations = getTranslations(language);
+
+  const formatDate = (dateString: string) => {
+    return new Intl.DateTimeFormat(language).format(new Date(dateString));
+  };
+
+  const handleOptionChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedDate = event.target.value;
+    const selectedItem = searchResults.find((item) => item.fromDate === selectedDate);
+    if (selectedItem && onSelect) {
+      onSelect(selectedItem);
+    }
+  };
+
+  const getNightsAndDays = (result: BookingPackageItem) => {
+    const nights = differenceInCalendarDays(new Date(result.toDate), new Date(result.fromDate));
+    return `${nights} ${translations.PRODUCT.NIGHTS}, ${nights + 1} ${translations.PRODUCT.DAYS}`;
+  };
+
+  const getDayLongFormat = (dateString: string) => {
+    const day = new Date(dateString).toLocaleDateString(language, { weekday: 'long' });
+    return day.charAt(0).toUpperCase() + day.slice(1);
+  };
+
+  return (
+    <div className="dropdown">
+      <select name="selectDate" id="selectDate" onChange={handleOptionChange}>
+        {!isEmpty(searchResults) &&
+          searchResults.map((result, index) => (
+            <option key={index} value={result.fromDate}>
+              {getDayLongFormat(result.fromDate)} {formatDate(result.fromDate)} - {getDayLongFormat(result.toDate)} {formatDate(result.toDate)} ({' '}
+              {getNightsAndDays(result)} ) - {result.price.toFixed(2)} {result.currencyCode}
+            </option>
+          ))}
+      </select>
+    </div>
+  );
+};
+
+export default ListView;

package/src/booking-product/components/product.tsx

@@ -1,8 +1,15 @@
 import JsonURL from '@jsonurl/jsonurl';
-import { BookingPackageDetailsRequest, BookingPackagePax, BookingPackageRequest, BookingPackageRequestRoom } from '@qite/tide-client/build/types';
-import { addDays, addMonths, format, formatISO } from 'date-fns';
-import { omit } from 'lodash';
-import React, { useContext, useEffect, useState } from 'react';
+import {
+  BookingPackageDetailsRequest,
+  BookingPackageItem,
+  BookingPackagePax,
+  BookingPackageRequest,
+  BookingPackageRequestRoom,
+  BookingPackageSearchRequest
+} from '@qite/tide-client/build/types';
+import { addDays, addMonths, addYears, format, formatISO } from 'date-fns';
+import { isEmpty, now, omit } from 'lodash';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { ApiSettingsState } from '../../shared/types';
 import { getTranslations } from '../../shared/utils/localization-util';
 import { getDateAsDateFromParams, getRoomsFromParams } from '../../shared/utils/query-string-util';
@@ -13,7 +20,9 @@ import { formatPriceByMode } from '../utils/price';
 import Dates from './dates';
 import Footer from './footer';
 import Header from './header';
+import ListView from './list-view';
 import Rooms from './rooms';
+import { DATE_FORMAT } from '../constants';
 
 interface ProductProps {
   productCode: string;
@@ -23,8 +32,21 @@ interface ProductProps {
 }
 
 const Product: React.FC<ProductProps> = ({ productCode, productName, duration, rating }) => {
-  const { apiKey, apiUrl, officeId, agentId, catalogueId, includeFlights, language, basePath, priceMode, addProductToQuery, isOffer } =
-    useContext(SettingsContext);
+  const {
+    apiKey,
+    apiUrl,
+    officeId,
+    agentId,
+    catalogueId,
+    includeFlights,
+    language,
+    basePath,
+    priceMode,
+    addProductToQuery,
+    isOffer,
+    displayMode = 'calendar',
+    searchType = 0
+  } = useContext(SettingsContext);
   const translations = getTranslations(language);
 
   const [loaded, setLoaded] = useState<boolean>(false);
@@ -34,11 +56,19 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
   const [hasFlight, setHasFlight] = useState<boolean>(false);
   const [hasTransfer, setHasTransfer] = useState<boolean>(false);
   const [rooms, setRooms] = useState<ProductRoom[]>([{ adults: 2, children: 0, childAges: [] }]);
+  const [searchResponse, setSearchResponse] = useState<BookingPackageItem[]>([]);
   const [dateRange, setDateRange] = useState<DateRange>();
   const [packageProductName, setPackageProductName] = useState<string>(productName);
   const [currencyCode, setCurrencyCode] = useState<string>('');
+  const [searchResults, setSearchResults] = useState<BookingPackageItem[]>([]);
+  const skipNextFetchRef = useRef(false);
 
   const fetchPackage = async (signal: AbortSignal) => {
+    if (displayMode === 'list' && searchType !== 1) {
+      console.error('The combination of searchType and displayMode is not supported.' + " Please set searchType to 1 when using displayMode 'list'.");
+      return;
+    }
+
     if (loaded && productCode && dateRange?.fromDate && dateRange?.toDate && rooms) {
       const apiSettingsState =
         apiKey && apiUrl
@@ -72,7 +102,7 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
         return requestRoom;
       });
 
-      const request = {
+      const detailsRequest: BookingPackageRequest<BookingPackageDetailsRequest> = {
         officeId: officeId,
         agentId: agentId,
         payload: {
@@ -83,13 +113,40 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
           toDate: endDate,
           includeFlights: includeFlights,
           rooms: requestRooms
-        } as BookingPackageDetailsRequest
-      } as BookingPackageRequest<BookingPackageDetailsRequest>;
+        }
+      };
+
+      const searchRequest: BookingPackageRequest<BookingPackageSearchRequest> = {
+        officeId: officeId,
+        agentId: agentId,
+        payload: {
+          searchType: 1,
+          useExactDates: false,
+          earliestFromOffset: 0,
+          latestToOffset: 0,
+          catalogueIds: [catalogueId],
+          productCodes: [productCode],
+          fromDate: new Date(now()).toISOString(),
+          toDate: addYears(new Date(now()), 1).toISOString(),
+          includeFlights: includeFlights,
+          rooms: requestRooms
+        }
+      };
 
       setIsLoading(true);
-      const response = await packageApi.fetchDetails(request, signal, language, apiSettingsState);
-      if (!response.errorCode && response.payload) {
-        const selectedOption = response.payload.options.find((x) => x.isSelected);
+
+      let detailResponse;
+      if (displayMode === 'calendar' && searchType === 0) {
+        detailResponse = await packageApi.fetchDetails(detailsRequest, signal, language, apiSettingsState);
+      }
+
+      if (searchType === 1) {
+        setSearchResponse(await packageApi.fetchSearch(searchRequest, signal, apiSettingsState));
+      }
+
+      if (detailResponse && !detailResponse.errorCode && detailResponse.payload) {
+        const selectedOption = detailResponse.payload.options.find((x) => x.isSelected);
+
         if (selectedOption) {
           const hasFlight = selectedOption.includedServiceTypes.some((x) => x === 7);
           const hasTranfer = selectedOption.includedServiceTypes.some((x) => x === 13);
@@ -97,11 +154,8 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
           setPrice(selectedOption.price);
           setHasFlight(hasFlight);
           setHasTransfer(hasTranfer);
-          setCurrencyCode(response.payload.currencyCode);
-
-          if (!productName) {
-            setPackageProductName(selectedOption.name);
-          }
+          setCurrencyCode(detailResponse.payload.currencyCode);
+          setPackageProductName(selectedOption.name);
         }
       } else {
         setPrice(undefined);
@@ -129,11 +183,11 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
     }
 
     if (dateRange?.fromDate) {
-      params['startDate'] = format(dateRange.fromDate, 'yyyy-MM-dd');
+      params['startDate'] = format(dateRange.fromDate, DATE_FORMAT);
     }
 
     if (dateRange?.toDate) {
-      params['endDate'] = format(dateRange.toDate, 'yyyy-MM-dd');
+      params['endDate'] = format(dateRange.toDate, DATE_FORMAT);
     }
 
     params['catalogueId'] = catalogueId.toString();
@@ -158,10 +212,67 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
   };
 
   const handleDateChange = (value: DateRange) => {
+    if (searchType === 1) {
+      skipNextFetchRef.current = true;
+    }
     setDateRange(value);
+
+    if (value.fromDate && value.toDate && searchType === 1 && searchResults.length > 0) {
+      const from = format(value.fromDate, DATE_FORMAT);
+      const to = format(value.toDate, DATE_FORMAT);
+
+      const selectedItem = searchResults.find((item) => {
+        const itemFrom = format(new Date(item.fromDate), DATE_FORMAT);
+        const itemTo = format(new Date(item.toDate), DATE_FORMAT);
+
+        return itemFrom === from && itemTo === to;
+      });
+
+      if (selectedItem) {
+        setPrice(selectedItem.price);
+        setPackageProductName(selectedItem.name);
+      }
+    }
+  };
+
+  const handleDateSelect = (selectedItem: BookingPackageItem) => {
+    if (searchType === 1) {
+      skipNextFetchRef.current = true;
+    }
+    const fromDate = new Date(selectedItem.fromDate);
+    const toDate = new Date(selectedItem.toDate);
+
+    setDateRange({ fromDate, toDate });
+    setPrice(selectedItem.price);
+    setPackageProductName(selectedItem.name);
   };
 
   useEffect(() => {
+    if (searchResponse && !isEmpty(searchResponse)) {
+      setSearchResults(searchResponse);
+      const selectedItem = searchResponse.find(
+        (item) => new Date(item.fromDate).getTime() === dateRange?.fromDate?.getTime() && new Date(item.toDate).getTime() === dateRange?.toDate?.getTime()
+      );
+      if (selectedItem) {
+        setPrice(selectedItem.price);
+        setPackageProductName(selectedItem.name);
+      } else {
+        setPrice(searchResponse[0].price);
+        setPackageProductName(searchResponse[0].name);
+      }
+    } else {
+      setSearchResults([]);
+      setIsLoading(false);
+      setPackageProductName(translations.PRODUCT.NOT_AVAILABLE);
+    }
+  }, [searchResponse]);
+
+  useEffect(() => {
+    if (searchType === 1 && skipNextFetchRef.current) {
+      skipNextFetchRef.current = false;
+      return;
+    }
+
     const controller = new AbortController();
     const { signal } = controller;
 
@@ -207,6 +318,15 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
     setLoaded(true);
   }, [location]);
 
+  useEffect(() => {
+    if (searchType === 1 && searchResults.length > 0 && !dateRange) {
+      const first = searchResults[0];
+      setDateRange({ fromDate: new Date(first.fromDate), toDate: new Date(first.toDate) });
+      setPackageProductName(first.name);
+      setPrice(first.price);
+    }
+  }, [searchResults]);
+
   const personCount = rooms.reduce((s, r) => s + r.adults + r.children, 0);
   const durationCount = 0;
   const priceText = formatPriceByMode(
@@ -225,7 +345,19 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
       <Header name={packageProductName} rating={rating} priceText={priceText} isLoading={isLoading} hasFlight={hasFlight} hasTransfer={hasTransfer} />
       <div className="booking-product__body">
         <Rooms rooms={rooms} isDisabled={roomsIsDisabled} setIsDisabled={setRoomsIsDisabled} onChange={handleRoomChange} />
-        <Dates value={dateRange} duration={duration} onChange={handleDateChange} />
+        {displayMode === 'calendar' && (
+          <Dates
+            value={dateRange}
+            duration={duration}
+            isLoading={isLoading}
+            onChange={handleDateChange}
+            availableDatePairs={searchResults.map((item) => ({
+              fromDate: new Date(item.fromDate),
+              toDate: new Date(item.toDate)
+            }))}
+          />
+        )}
+        {displayMode === 'list' && <ListView searchResults={searchResults} onSelect={handleDateSelect} />}
       </div>
       <Footer priceText={priceText} isLoading={isLoading} isOffer={isOffer} roomsIsDisabled={roomsIsDisabled} handleBookClick={handleBookClick} />
     </div>

package/src/booking-product/constants.ts

@@ -0,0 +1 @@
+export const DATE_FORMAT = 'yyyy-MM-dd';

package/src/booking-product/settings-context.ts

@@ -8,7 +8,9 @@ const SettingsContext = React.createContext<ProductSettingsContextProps>({
   catalogueId: 1,
   language: 'nl-BE',
   basePath: 'boeken',
-  priceMode: 0
+  priceMode: 0,
+  displayMode: 'calendar',
+  searchType: 0
 });
 
 export default SettingsContext;

package/src/booking-product/types.ts

@@ -11,6 +11,8 @@ export interface Settings {
   apiKey?: string;
   addProductToQuery?: boolean;
   isOffer?: boolean;
+  displayMode?: 'list' | 'calendar';
+  searchType?: number;
 
   alternativeActionText?: string;
   alternativeAction?: () => void;

package/src/booking-product/utils/api.ts

@@ -1,5 +1,5 @@
-import { details } from '@qite/tide-client';
-import { BookingPackage, BookingPackageDetailsRequest, BookingPackageRequest, TideResponse } from '@qite/tide-client/build/types';
+import { details, search } from '@qite/tide-client';
+import { BookingPackage, BookingPackageDetailsRequest, BookingPackageRequest, BookingPackageSearchRequest, TideResponse } from '@qite/tide-client/build/types';
 import { ApiSettingsState } from '../../shared/types';
 import { buildTideClientConfig } from '../../shared/utils/tide-api-utils';
 
@@ -13,8 +13,14 @@ const fetchDetails = async (
   return await details(tideClientConfig, request, signal, languageCode);
 };
 
+const fetchSearch = async (request: BookingPackageRequest<BookingPackageSearchRequest>, signal: AbortSignal, apiSettings?: ApiSettingsState) => {
+  const tideClientConfig = buildTideClientConfig(apiSettings);
+  return await search(tideClientConfig, request, signal);
+};
+
 const packageApi = {
-  fetchDetails
+  fetchDetails,
+  fetchSearch
 };
 
 export default packageApi;

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

@@ -26,7 +26,7 @@ const FlightCard: React.FC<FlightCardProps> = ({ result }) => {
           <p className="search__price-card-price">{result.price}</p>
         </div>
         <div>
-          <button className="search__price-card-button" onClick={() => context?.onResultClick?.(result.id)}>
+          <button className="search__price-card-button" onClick={() => console.log('clicked result with ID:', result.id)}>
             {result.ctaText}
           </button>
         </div>

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

@@ -15,7 +15,7 @@ interface HotelAccommodationResultsProps {
 const renderResults = (results: BookingPackageItem[], context: SearchResultsConfiguration, cmsMap: Map<any, any>, activeTab: string | null) => {
   const renderedResults = results.map((result, index) => {
     const cmsItem = cmsMap.get(result.productId);
-    const mappedResult: HotelResult = mapSearchResult(result, cmsItem);
+    const mappedResult: HotelResult = mapSearchResult(result, cmsItem, context.languageCode);
     if (context?.showCustomCards && context?.customCardRenderer) {
       return (
         <div key={`${mappedResult.id}-${index}`} className="search__result-card">
@@ -29,16 +29,16 @@ const renderResults = (results: BookingPackageItem[], context: SearchResultsConf
   return <div className={`search__results__cards ${activeTab ? `search__results__cards--${activeTab}` : ''}`}>{renderedResults}</div>;
 };
 
-const mapSearchResult = (searchResult: BookingPackageItem, cmsItem: any): HotelResult => {
+const mapSearchResult = (searchResult: BookingPackageItem, cmsItem: any, languageCode?: string): HotelResult => {
   return {
     type: 'hotel',
-    id: searchResult.code,
+    id: searchResult.productId,
     title: cmsItem?.content?.general?.title || searchResult.name,
     image: cmsItem?.content?.images?.thumbnailPicture?.url,
     description: cmsItem?.content?.descriptions?.introductionTitle || '',
     location:
       searchResult.locationName && searchResult.countryName ? `${searchResult.locationName}, ${searchResult.countryName}` : cmsItem?.parentItem?.name || '',
-    price: formatPrice(searchResult.price),
+    price: formatPrice(searchResult.currencyCode, searchResult.price, languageCode),
     ctaText: 'View details',
     days: calculateNights(searchResult.stayFromDate, searchResult.stayToDate),
     accommodation: searchResult.accommodationName,
@@ -47,11 +47,16 @@ const mapSearchResult = (searchResult: BookingPackageItem, cmsItem: any): HotelR
   };
 };
 
-const formatPrice = (price: number) => {
+const formatPrice = (currencyCode: string, price: number, languageCode?: string) => {
   if (!price) {
     return 'Price unavailable';
   }
-  return `$${Math.round(price).toLocaleString()}`;
+
+  return new Intl.NumberFormat(languageCode ?? 'en-GB', {
+    style: 'currency',
+    currency: currencyCode,
+    currencyDisplay: 'symbol'
+  }).format(price);
 };
 
 const calculateNights = (fromDate: Date, toDate: Date): string => {