@qite/tide-booking-component 1.4.29 → 1.4.31

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

@@ -2,111 +2,106 @@ import React from 'react';
 import { HotelResult, SearchResultsConfiguration } from '../../types';
 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 { format, parseISO } from 'date-fns';
 
 interface HotelAccommodationResultsProps {
   isLoading: boolean;
   context: SearchResultsConfiguration;
 }
 
-const mockedHotelResults = [
-  {
-    type: 'hotel',
-    id: 'HTFSWILLCARL',
-    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: null,
-    regime: null,
-    stars: 5
-  } as HotelResult,
-  {
-    type: 'hotel',
-    id: 'HTFSSOFTROCK',
-    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: null,
-    regime: null,
-    stars: 5
-  } as HotelResult,
-  {
-    type: 'hotel',
-    id: 'HTFSROYGAR',
-    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: null,
-    regime: null,
-    stars: 5
-  } as HotelResult,
-  {
+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);
+    if (context?.showCustomCards && context?.customCardRenderer) {
+      return (
+        <div key={`${mappedResult.id}-${index}`} className="search__result-card">
+          {context.customCardRenderer(mappedResult)}
+        </div>
+      );
+    }
+    return <HotelCard key={`${mappedResult.id}-${index}`} result={mappedResult} />;
+  });
+
+  return <div className={`search__results__cards ${activeTab ? `search__results__cards--${activeTab}` : ''}`}>{renderedResults}</div>;
+};
+
+const mapSearchResult = (searchResult: BookingPackageItem, cmsItem: any): HotelResult => {
+  return {
     type: 'hotel',
-    id: 'HTFSCONBEL',
-    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: null,
-    regime: null,
-    stars: 5
-  } as HotelResult
-] as HotelResult[];
+    id: searchResult.code,
+    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),
+    ctaText: 'View details',
+    days: calculateNights(searchResult.stayFromDate, searchResult.stayToDate),
+    accommodation: searchResult.accommodationName,
+    regime: searchResult.regimeName,
+    stars: cmsItem?.content?.general?.stars || searchResult.hotelStars
+  };
+};
+
+const formatPrice = (price: number) => {
+  if (!price) {
+    return 'Price unavailable';
+  }
+  return `$${Math.round(price).toLocaleString()}`;
+};
+
+const calculateNights = (fromDate: Date, toDate: Date): string => {
+  const from = new Date(fromDate).getTime(); // returns a number
+  const to = new Date(toDate).getTime(); // returns a number
+  const diffTime = Math.abs(to - from);
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+  return `${diffDays} nights`;
+};
 
 const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ isLoading, context }) => {
-  const renderResults = (results: 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} />;
+  if (isLoading) {
+    return <>{context?.customSpinner ?? <Spinner />}</>;
+  }
+
+  const { results, activeTab } = useSelector((state: SearchResultsRootState) => state.searchResults);
+
+  if (!results.length) {
+    return <div className="no-results">{context.noResultsLabel || 'No results found.'}</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);
     });
+    return map;
+  }, [context.cmsHotelData]);
 
-    return <div className="search__results__cards">{renderedResults}</div>;
-  };
+  const firstResult = results?.[0];
+
+  const firstResultDay = firstResult?.fromDate ? format(parseISO(firstResult.fromDate), 'd') : null;
+
+  const firstResultMonth = firstResult?.fromDate ? format(parseISO(firstResult.fromDate), 'MMM') : null;
 
   return (
     <>
       <div className="search__results__label search__results__label--secondary">
         <div className="search__results__label__date">
-          <p className="search__results__label__date-date">19</p>
-          <p>Jan</p>
+          <p className="search__results__label__date-date">{firstResultDay}</p>
+          <p>{firstResultMonth}</p>
         </div>
         <div className="search__results__label__text">
           <h3>
-            Select <strong>Accomodation</strong>
+            Select <strong>Accommodation</strong>
           </h3>
         </div>
       </div>
-      {isLoading ? (
-        context.customSpinner ?? <Spinner />
-      ) : mockedHotelResults.length === 0 ? (
-        <div className="no-results">{context.noResultsLabel || 'No results found.'}</div>
-      ) : (
-        renderResults(mockedHotelResults)
-      )}
+      {renderResults(results, context, cmsMap, activeTab)}
     </>
   );
 };

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

@@ -1,38 +1,68 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { HotelResult } from '../../types';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
+import Icon from '../icon';
 
 interface HotelCardProps {
   result: HotelResult;
 }
 
 const HotelCard: React.FC<HotelCardProps> = ({ result }) => {
-  const context = useContext(SearchResultsConfigurationContext);
   return (
-    <div className="search__result-card">
-      <div className="search__result-card__wrapper">
-        <div className="search__result-card__image-wrapper">
-          <img src={result.image} alt={result.title} className="search__result-card__image" />
+    <div
+      key={result.id}
+      className="search__result-card__wrapper"
+      onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.02)')}
+      onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}>
+      <div className="search__result-card__img-wrapper">
+        <img src={result.image} alt={result.title} className="search__result-card__img" />
+        <div className="search__result-card__price__wrapper">
+          <span className="search__result-card__price__label">Total price</span>
+          <span className="search__result-card__price">{result.price}</span>
         </div>
-        <div className="search__result-card__content">
-          {result.location && (
-            <div className="search__result-card__location">
-              <svg id="ui-marker" viewBox="0 0 13.33 20">
-                <path
-                  d="M6.67,0A6.67,6.67,0,0,0,0,6.67,6.78,6.78,0,0,0,.8,9.84l5.5,10a.42.42,0,0,0,.57.16A.49.49,0,0,0,7,19.79l5.5-10A6.67,6.67,0,0,0,6.67,0Zm0,10A3.34,3.34,0,1,1,10,6.67,3.34,3.34,0,0,1,6.67,10Z"
-                  transform="translate(0 0)"></path>
-              </svg>
-              {result.location}
+      </div>
+      <div className="search__result-card__content">
+        <div className="search__result-card__content__wrapper">
+          <div className="search__result-card__header">
+            <div className="search__result-card__header__wrapper">
+              {result.stars && (
+                <div className="rating">
+                  {[...Array(result.stars)].map((_, index) => (
+                    <Icon name="ui-star" key={`rating-star-${index + 1}`} width={14} height={14} />
+                  ))}
+                </div>
+              )}
+              <h3 className="search__result-card__title">{result.title}</h3>
             </div>
-          )}
-          <h3 className="search__result-card__title">{result.title}</h3>
-          {result.description && <p className="search__result-card__description">{result.description}</p>}
-          <div className="search__result-card__footer">
-            <span className="search__result-card__price">{result.price}</span>
-            <button className="search__result-card__button" onClick={() => context?.onResultClick?.(result.id)}>
-              {result.ctaText}
-            </button>
           </div>
+          <a className="search__result-card__location">
+            <Icon name="ui-location" height={16} />
+            {result.location}
+            {/*  - Show on map &gt; 1.1 km from Center */}
+          </a>
+          <div className="search__result-card__options">
+            {/* <div className="search__result-card__option">
+              <Icon name="ui-wifi" height={16} />
+              Free Wi-Fi
+            </div> */}
+            {result.accommodation && (
+              <div className="search__result-card__option">
+                <Icon name="ui-bed" height={16} />
+                {result.accommodation}
+              </div>
+            )}
+            {result.regime && (
+              <div className="search__result-card__option">
+                <Icon name="ui-utensils" height={16} />
+                {result.regime}
+              </div>
+            )}
+          </div>
+          <p className="search__result-card__description">{result.description}</p>
+        </div>
+        <div className="search__result-card__footer">
+          <button type="button" className="cta cta--select" onClick={() => console.log('Clicked on customCard with id:', result.id)}>
+            {result.ctaText}
+          </button>
         </div>
       </div>
     </div>

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

@@ -127,6 +127,19 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
         </svg>
       );
 
+    case 'ui-utensils':
+      return (
+        <svg
+          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
+          width={width}
+          height={height}
+          viewBox="0 0 416 512">
+          <HTMLComment text="!Font Awesome Free v5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc." />
+          {title && <title>{title}</title>}
+          <path d="M207.9 15.2c.8 4.7 16.1 94.5 16.1 128.8 0 52.3-27.8 89.6-68.9 104.6L168 486.7c.7 13.7-10.2 25.3-24 25.3H80c-13.7 0-24.7-11.5-24-25.3l12.9-238.1C27.7 233.6 0 196.2 0 144 0 109.6 15.3 19.9 16.1 15.2 19.3-5.1 61.4-5.4 64 16.3v141.2c1.3 3.4 15.1 3.2 16 0 1.4-25.3 7.9-139.2 8-141.8 3.3-20.8 44.7-20.8 47.9 0 .2 2.7 6.6 116.5 8 141.8.9 3.2 14.8 3.4 16 0V16.3c2.6-21.6 44.8-21.4 48-1.1zm119.2 285.7l-15 185.1c-1.2 14 9.9 26 23.9 26h56c13.3 0 24-10.7 24-24V24c0-13.2-10.7-24-24-24-82.5 0-221.4 178.5-64.9 300.9z" />
+        </svg>
+      );
+
     case 'ui-flight':
       return (
         <svg

package/src/search-results/components/item-picker/index.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useDispatch } from 'react-redux';
 import { TravelClass, TravelType } from '../../types';
 
 interface ItemPickerProps {
@@ -12,8 +11,6 @@ interface ItemPickerProps {
 }
 
 const ItemPicker: React.FC<ItemPickerProps> = ({ items, selection, label, placeholder, classModifier, onPick }) => {
-  const dispatch = useDispatch();
-
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [openDirection, setOpenDirection] = useState<'down' | 'up'>('down');
   const dropdownRef = useRef<HTMLDivElement | null>(null);
@@ -21,8 +18,8 @@ const ItemPicker: React.FC<ItemPickerProps> = ({ items, selection, label, placeh
   const toggleButtonRef = useRef<HTMLButtonElement | null>(null);
 
   const handlePick = (picked: string) => {
-    dispatch(onPick(picked));
     setIsDropdownOpen(false);
+    onPick(picked);
   };
 
   useEffect(() => {
@@ -49,10 +46,11 @@ const ItemPicker: React.FC<ItemPickerProps> = ({ items, selection, label, placeh
   }, [isDropdownOpen]);
 
   return (
-    <label className={'dropdown__input ' + classModifier}>
+    <div className={'dropdown__input ' + classModifier}>
       <span className="dropdown__label">{label}</span>
-      <div className="dropdown">
+      <div className="dropdown" ref={dropdownRef}>
         <button
+          type="button"
           className={`dropdown-toggle ${isDropdownOpen ? 'dropdown-toggle--open' : ''}`}
           onClick={() => setIsDropdownOpen((prev) => !prev)}
           ref={toggleButtonRef}>
@@ -70,7 +68,7 @@ const ItemPicker: React.FC<ItemPickerProps> = ({ items, selection, label, placeh
           </ul>
         )}
       </div>
-    </label>
+    </div>
   );
 };