@qite/tide-booking-component 1.4.31 → 1.4.33

package/src/qsm/types.ts

@@ -1,144 +1,145 @@
-import { ReactNode } from 'react';
-
-export interface QSMConfiguration {
-  // Type specification and dedicated parameters
-  type: 'hotel' | 'roundTrip' | 'flight';
-  askRooms?: boolean; // hotel || roundTrip
-  askTravelType?: boolean; // hotel || roundTrip
-  allowOpenJaw?: boolean; // flight
-  allowMultiCity?: boolean; // flight
-  askTravelClass?: boolean; // flight
-  allowOneWay?: boolean; // flight
-  additionalFilters?: AdditionalFilters; // flight
-  askTravelers: boolean;
-
-  // Fields (form)
-  searchFields: FieldConfig[];
-
-  // Origins and destinations
-  origins: Origin[];
-  originTypeAhead: boolean;
-  onOriginChange: (origin: string) => void;
-  destinations: Destination[];
-  destinationTypeAhead: boolean;
-  destinationIcon: ReactNode;
-  onDestinationChange: (destination: string) => void;
-
-  // Airports
-  airports: Airport[];
-  airportTypeAhead: boolean;
-  airportIcon: ReactNode;
-  onAirportChange: (airport: string) => void;
-
-  // Travel types
-  travelTypes: TravelType[];
-  travelTypeIcon: ReactNode;
-
-  // Travel classes
-  travelClasses: TravelClass[];
-  travelClassIcon: ReactNode;
-
-  // Date flexibility
-  dateFlexibility?: DateFlexibility[];
-  minDate?: Date;
-  maxDate?: Date;
-  showReturnDate: boolean;
-  datesIcon: ReactNode;
-
-  // Travelers
-  defaultTravelers?: number;
-  maxTravelers?: number;
-  maxChildAge?: number;
-  maxInfantAge?: number;
-
-  onSubmit: (data: any) => void;
-  submitLabel: string;
-  submitIcon: ReactNode;
-
-  nationalities: Nationality[];
-}
-
-export interface BaseFieldConfig {
-  fieldKey: string;
-  label: string;
-  placeholder: string;
-  options: TypeaheadOption[];
-  autoComplete?: boolean;
-}
-
-export interface TypeaheadOption {
-  key: string;
-  value: string;
-  iataCode?: string;
-  country?: string;
-  type: OptionType;
-}
-
-export type OptionType = 'country' | 'region' | 'oord' | 'location' | 'airport' | 'hotel' | 'other';
-
-export interface SingleFieldConfig extends BaseFieldConfig {
-  type: 'single';
-}
-
-export interface DoubleFieldConfig {
-  type: 'double';
-  fieldKey: string;
-  showReverse?: boolean;
-  fields: BaseFieldConfig[];
-}
-
-export type FieldConfig = SingleFieldConfig | DoubleFieldConfig;
-
-export interface AdditionalFilters {
-  showDirectFlights: boolean;
-  includeLuggage: boolean;
-}
-
-export interface Origin {
-  key: string;
-  value: string;
-}
-
-export interface Destination {
-  key: string;
-  value: string;
-}
-
-export interface Airport {
-  key: string;
-  value: string;
-}
-
-export interface DateFlexibility {
-  name: string;
-  before: number;
-  after: number;
-}
-
-export type MobileFilterType = 'search' | 'date' | 'traveler' | null;
-
-export type TravelerType = 'adults' | 'kids' | 'babies';
-
-export interface Room {
-  adults: number;
-  kids: number;
-  babies: number;
-}
-
-export interface TravelType {
-  id: number;
-  label: string;
-  icon?: ReactNode;
-}
-
-export interface TravelClass {
-  id: number;
-  label: string;
-  icon?: ReactNode;
-}
-
-export interface Nationality {
-  id: number;
-  label: string;
-  icon?: ReactNode;
-}
+import { ReactNode } from 'react';
+
+export interface QSMConfiguration {
+  // Type specification and dedicated parameters
+  type: 'hotel' | 'roundTrip' | 'flight';
+  askRooms?: boolean; // hotel || roundTrip
+  askTravelType?: boolean; // hotel || roundTrip
+  allowOpenJaw?: boolean; // flight
+  allowMultiCity?: boolean; // flight
+  askTravelClass?: boolean; // flight
+  allowOneWay?: boolean; // flight
+  additionalFilters?: AdditionalFilters; // flight
+  askTravelers: boolean;
+
+  // Fields (form)
+  searchFields: FieldConfig[];
+
+  // Origins and destinations
+  origins: Origin[];
+  originTypeAhead: boolean;
+  onOriginChange: (origin: string) => void;
+  destinations: Destination[];
+  destinationTypeAhead: boolean;
+  destinationIcon: ReactNode;
+  onDestinationChange: (destination: string) => void;
+
+  // Airports
+  airports: Airport[];
+  airportTypeAhead: boolean;
+  airportIcon: ReactNode;
+  onAirportChange: (airport: string) => void;
+
+  // Travel types
+  travelTypes: TravelType[];
+  travelTypeIcon: ReactNode;
+
+  // Travel classes
+  travelClasses: TravelClass[];
+  travelClassIcon: ReactNode;
+
+  // Date flexibility
+  dateFlexibility?: DateFlexibility[];
+  minDate?: Date;
+  maxDate?: Date;
+  showReturnDate: boolean;
+  datesIcon: ReactNode;
+
+  // Travelers
+  defaultTravelers?: number;
+  maxTravelers?: number;
+  maxChildAge?: number;
+  maxInfantAge?: number;
+
+  onSubmit: (data: any) => void;
+  submitLabel: string;
+  submitIcon: ReactNode;
+
+  nationalities: Nationality[];
+  languageCode?: string;
+}
+
+export interface BaseFieldConfig {
+  fieldKey: string;
+  label: string;
+  placeholder: string;
+  options: TypeaheadOption[];
+  autoComplete?: boolean;
+}
+
+export interface TypeaheadOption {
+  key: string;
+  value: string;
+  iataCode?: string;
+  country?: string;
+  type: OptionType;
+}
+
+export type OptionType = 'country' | 'region' | 'oord' | 'location' | 'airport' | 'hotel' | 'other';
+
+export interface SingleFieldConfig extends BaseFieldConfig {
+  type: 'single';
+}
+
+export interface DoubleFieldConfig {
+  type: 'double';
+  fieldKey: string;
+  showReverse?: boolean;
+  fields: BaseFieldConfig[];
+}
+
+export type FieldConfig = SingleFieldConfig | DoubleFieldConfig;
+
+export interface AdditionalFilters {
+  showDirectFlights: boolean;
+  includeLuggage: boolean;
+}
+
+export interface Origin {
+  key: string;
+  value: string;
+}
+
+export interface Destination {
+  key: string;
+  value: string;
+}
+
+export interface Airport {
+  key: string;
+  value: string;
+}
+
+export interface DateFlexibility {
+  name: string;
+  before: number;
+  after: number;
+}
+
+export type MobileFilterType = 'search' | 'date' | 'traveler' | null;
+
+export type TravelerType = 'adults' | 'kids' | 'babies';
+
+export interface Room {
+  adults: number;
+  kids: number;
+  babies: number;
+}
+
+export interface TravelType {
+  id: number;
+  label: string;
+  icon?: ReactNode;
+}
+
+export interface TravelClass {
+  id: number;
+  label: string;
+  icon?: ReactNode;
+}
+
+export interface Nationality {
+  id: number;
+  label: string;
+  icon?: ReactNode;
+}

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 => {

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

@@ -1,12 +1,23 @@
 import React from 'react';
 import { HotelResult } from '../../types';
 import Icon from '../icon';
+import { useDispatch, useSelector } from 'react-redux';
+import { SearchResultsRootState } from '../../store/search-results-store';
+import { setSelectedHotel } from '../../store/search-results-slice';
 
 interface HotelCardProps {
   result: HotelResult;
 }
 
 const HotelCard: React.FC<HotelCardProps> = ({ result }) => {
+  const dispatch = useDispatch();
+  const { selectedHotelId } = useSelector((state: SearchResultsRootState) => state.searchResults);
+
+  const handleChange = (hotelProductId: number) => {
+    console.log('selected hotel changed to:', hotelProductId);
+    dispatch(setSelectedHotel(hotelProductId));
+  };
+
   return (
     <div
       key={result.id}
@@ -60,8 +71,11 @@ const HotelCard: React.FC<HotelCardProps> = ({ result }) => {
           <p className="search__result-card__description">{result.description}</p>
         </div>
         <div className="search__result-card__footer">
+          <button type="button" className={`cta ${selectedHotelId === result.id ? 'cta--selected' : 'cta--select'}`} onClick={() => handleChange(result.id)}>
+            {selectedHotelId === result.id ? 'Selected' : 'Select'}
+          </button>
           <button type="button" className="cta cta--select" onClick={() => console.log('Clicked on customCard with id:', result.id)}>
-            {result.ctaText}
+            View details
           </button>
         </div>
       </div>