@qite/tide-booking-component 1.4.36 → 1.4.38

package/src/qsm/components/mobile-filter-modal/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   closeMobileFilter,
@@ -6,7 +6,8 @@ import {
   setFieldValue,
   setFromDate,
   setToDate,
-  setSearchResults as setSearchResultsAction
+  setSearchResults as setSearchResultsAction,
+  setSearchResults
 } from '../../store/qsm-slice';
 import { QSMRootState } from '../../store/qsm-store';
 import SearchInput from '../search-input';
@@ -14,18 +15,16 @@ import DateRangePicker from '../date-range-picker';
 import TravelInput from '../travel-input';
 import { format } from 'date-fns';
 import QSMConfigurationContext from '../../qsm-configuration-context';
-import { TypeaheadOption } from '../../types';
+import { BaseFieldConfig, FieldConfig, TypeaheadOption } from '../../types';
 import { getTranslations } from '../../../shared/utils/localization-util';
 
 const MobileFilterModal: React.FC = () => {
-  const { datesIcon, languageCode } = useContext(QSMConfigurationContext);
+  const { datesIcon, languageCode, searchFields } = useContext(QSMConfigurationContext);
   const translations = getTranslations(languageCode ?? 'en-GB');
   const dispatch = useDispatch();
-  const { mobileFilterType, mobileDatePickerMode, activeSearchFieldProps, fromDate, toDate } = useSelector((state: QSMRootState) => state.qsm);
+  const { mobileFilterType, mobileDatePickerMode, activeSearchFieldProps, fromDate, toDate, searchResults } = useSelector((state: QSMRootState) => state.qsm);
 
   const [inputValue, setInputValue] = useState('');
-  const [searchResultsLocal, setSearchResultsLocal] = useState<TypeaheadOption[]>([]);
-  const hasTypedRef = useRef(false);
 
   /* ---------------------------------------------------------------- */
   /* Sync local state when a new field is opened                       */
@@ -33,8 +32,8 @@ const MobileFilterModal: React.FC = () => {
   useEffect(() => {
     if (activeSearchFieldProps) {
       setInputValue(activeSearchFieldProps.value || '');
-      setSearchResultsLocal([]);
-      hasTypedRef.current = false;
+      // setSearchResultsLocal([]);
+      // hasTypedRef.current = false;
     }
   }, [activeSearchFieldProps]);
 
@@ -42,45 +41,69 @@ const MobileFilterModal: React.FC = () => {
   /* Helpers                                                          */
   /* ---------------------------------------------------------------- */
   const closeModal = () => {
-    hasTypedRef.current = false;
+    // hasTypedRef.current = false;
     dispatch(closeMobileFilter());
   };
 
-  // const handleLocationChange = (val: string) => {
-  //   setInputValue(val);
-  //   hasTypedRef.current = true;
+  const findConfig = (all: FieldConfig[], key: string): BaseFieldConfig | undefined => {
+    for (const config of all) {
+      if (config.type === 'single' && config.fieldKey === key) {
+        return config;
+      }
+      if (config.type === 'double') {
+        const field = config.fields.find((x) => x.fieldKey === key);
+        if (field) return field;
+      }
+    }
+    return undefined;
+  };
 
-  //   if (val.trim() !== '' && activeSearchFieldProps) {
-  //     const filtered = activeSearchFieldProps.options.filter((loc) => loc.value.toLowerCase().includes(val.toLowerCase())).map((loc) => loc.value);
-  //     setSearchResultsLocal(filtered);
-  //   } else {
-  //     setSearchResultsLocal([]);
-  //   }
-  // };
+  const config = useMemo<BaseFieldConfig | undefined>(() => {
+    if (!activeSearchFieldProps) return undefined;
 
-  const handleLocationChange = (val: string) => {
-    setInputValue(val);
-    hasTypedRef.current = true;
+    return findConfig(searchFields, activeSearchFieldProps.fieldKey);
+  }, [searchFields, activeSearchFieldProps]);
 
-    if (val.trim() !== '' && activeSearchFieldProps) {
-      const filtered = activeSearchFieldProps.options.filter((option) => option.value.toLowerCase().includes(val.toLowerCase()));
+  const match = useCallback(
+    (input: string) => {
+      if (!input) {
+        return [];
+      }
 
-      setSearchResultsLocal(filtered);
-    } else {
-      setSearchResultsLocal([]);
-    }
-  };
+      const lowered = input.toLowerCase();
+      return activeSearchFieldProps?.options.filter(
+        (option) => option.value.toLowerCase().includes(lowered) || option.iataCode?.toLowerCase().includes(lowered)
+      );
+    },
+    [activeSearchFieldProps?.options]
+  );
+
+  const handleInputChange = useCallback(
+    (input: string) => {
+      setInputValue(input);
+      if (!activeSearchFieldProps) return;
 
-  // const handleLocationSelect = (val: string) => {
-  //   if (activeSearchFieldProps) {
-  //     const { fieldKey } = activeSearchFieldProps;
-  //     dispatch(setFieldValue({ fieldKey, value: val }));
-  //     dispatch(setSearchResultsAction([]));
-  //     dispatch(setActiveSearchField(null));
-  //   }
+      dispatch(setFieldValue({ fieldKey: activeSearchFieldProps.fieldKey, value: input }));
+      dispatch(setSearchResults([]));
+      dispatch(setActiveSearchField(activeSearchFieldProps.fieldKey));
+
+      if (config?.onChange) {
+        config.onChange(input);
+        return;
+      }
+
+      const filtered = match(input) ?? [];
+      dispatch(setSearchResults(filtered));
+    },
+    [dispatch, activeSearchFieldProps, match]
+  );
+
+  useEffect(() => {
+    if (!activeSearchFieldProps) return;
+    if (!inputValue) return;
 
-  //   dispatch(closeMobileFilter());
-  // };
+    dispatch(setSearchResults(match(inputValue) ?? []));
+  }, [activeSearchFieldProps?.options]);
 
   const handleLocationSelect = (option: TypeaheadOption) => {
     if (activeSearchFieldProps) {
@@ -202,13 +225,15 @@ const MobileFilterModal: React.FC = () => {
               type="text"
               id="search"
               value={inputValue}
-              onChange={(e) => handleLocationChange(e.target.value)}
+              onClick={(e) => e.stopPropagation()}
+              onChange={(e) => handleInputChange(e.target.value)}
+              // onChange={(e) => handleLocationChange(e.target.value)}
               className="qsm__input qsm__input--modal qsm__from-to u-ps-2"
               placeholder={activeSearchFieldProps.placeholder}
             />
             <SearchInput
-              onChange={handleLocationChange}
-              searchResults={searchResultsLocal}
+              onChange={handleInputChange}
+              searchResults={searchResults}
               onOptionSelect={handleLocationSelect}
               highlightTarget={inputValue}
               label={activeSearchFieldProps.label}

package/src/qsm/components/search-input/index.tsx

@@ -55,7 +55,8 @@ const SearchInput: React.FC<SearchInputProps> = ({ searchResults, onOptionSelect
           role="option"
           aria-selected={false}>
           <div className="qsm__double-input-option-content">
-            <Icon name={option.type == 'hotel' ? 'ui-hotel' : 'ui-location'} height={16} />
+            <Icon name={option.type === 'hotel' ? 'ui-hotel' : option.type === 'airport' ? 'ui-flight' : 'ui-location'} height={16} />
+
             <div className="qsm__double-input-option-content-text">
               {highlightMatch(option, highlightTarget)}
               {option.country && <span className="qsm__double-input-option-content-country">{option.country}</span>}

package/src/qsm/components/search-input-group/index.tsx

@@ -6,7 +6,7 @@ import QSMConfigurationContext from '../../qsm-configuration-context';
 import useMediaQuery from '../../../shared/utils/use-media-query-util';
 import SearchInput from '../search-input';
 import Icon from '../icon';
-import { FieldConfig, BaseFieldConfig, DoubleFieldConfig, TypeaheadOption } from '../../types';
+import { FieldConfig, BaseFieldConfig, DoubleFieldConfig, TypeaheadOption, OptionType } from '../../types';
 
 const findConfig = (all: FieldConfig[], key: string): BaseFieldConfig | undefined => {
   for (const config of all) {
@@ -55,6 +55,9 @@ const SearchInputGroup: React.FC<Props> = ({
   const value = useSelector(selector);
   const { searchResults, activeSearchField } = useSelector((state: QSMRootState) => state.qsm);
 
+  const selectedOption = options.find((option) => option.value === value);
+  const typeOfSelectedOption: OptionType = selectedOption?.type ?? 'other';
+
   const match = useCallback(
     (input: string) => {
       if (!input) {
@@ -62,7 +65,7 @@ const SearchInputGroup: React.FC<Props> = ({
       }
 
       const lowered = input.toLowerCase();
-      return options.filter((option) => option.value.toLowerCase().includes(lowered));
+      return options.filter((option) => option.value.toLowerCase().includes(lowered) || option.iataCode?.toLowerCase().includes(lowered));
     },
     [options]
   );
@@ -75,11 +78,25 @@ const SearchInputGroup: React.FC<Props> = ({
       if (small) return;
 
       dispatch(setActiveSearchField(fieldKey));
+
+      // if field has custom onChange (API search)
+      if (config.onChange) {
+        config.onChange(input);
+        return;
+      }
+
+      // fallback to local filtering
       dispatch(setSearchResults(match(input)));
     },
-    [dispatch, fieldKey, small, match, options]
+    [dispatch, fieldKey, small, match, config]
   );
 
+  useEffect(() => {
+    if (!value || activeSearchField !== fieldKey) return;
+
+    dispatch(setSearchResults(match(value)));
+  }, [options, value, activeSearchField, config, fieldKey]);
+
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
       if (!['Tab', 'Enter'].includes(e.key)) return;
@@ -151,7 +168,7 @@ const SearchInputGroup: React.FC<Props> = ({
 
   return (
     <label className="qsm__single-input-wrapper" ref={ref}>
-      <Icon name="ui-location" height={16} />
+      <Icon name={typeOfSelectedOption === 'hotel' ? 'ui-hotel' : typeOfSelectedOption === 'airport' ? 'ui-flight' : 'ui-location'} height={16} />
 
       <span className={`qsm__label${isSecondInput ? ' qsm__label--second-input-label qsm__label--splittable' : ''}`}>{label}</span>
 

package/src/qsm/types.ts

@@ -64,6 +64,7 @@ export interface BaseFieldConfig {
   placeholder: string;
   options: TypeaheadOption[];
   autoComplete?: boolean;
+  onChange?: (data: any) => void;
 }
 
 export interface TypeaheadOption {

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

@@ -8,7 +8,7 @@ import { getTranslations } from '../../../shared/utils/localization-util';
 import SearchResultsConfigurationContext from '../../search-results-configuration-context';
 
 interface FlightResultsProps {
-  flights: BookingPackageFlight[];
+  flights?: BookingPackageFlight[];
   isDeparture?: boolean;
 }
 
@@ -55,145 +55,147 @@ const FlightResults: React.FC<FlightResultsProps> = ({ flights, isDeparture }) =
         </div>
       </div>
 
-      <div className="search__results__cards search__results__cards--extended">
-        {flights.map((flight, index) => {
-          const lines = flight.flightMetaData.flightLines;
-          const firstLine = lines[0];
-          const lastLine = lines[lines.length - 1];
-          const stops = lines.length - 1;
-
-          return (
-            <div className="flight" key={`flight-${flight.flightId}-${index}`}>
-              <div className="flight__option">
-                <div className="flight__content">
-                  <div className="flight__flights">
-                    {/* HEADER */}
-                    <div className="flight__flight">
-                      <div className="flight__flight__header">
-                        <div className="flight__status__container" />
-                        <div className="flight__price">
-                          <span className="price">€ {flight.price.toFixed(2)}</span>
-
-                          <button
-                            type="button"
-                            className={`cta ${flight.isSelected ? 'cta--selected' : 'cta--select'}`}
-                            onClick={() => dispatch(selectFlight({ flightOptionId: flight.flightOptionId, isDeparture: !!isDeparture }))}>
-                            {flight.isSelected ? 'Selected' : 'Select'}
-                          </button>
+      {flights && flights.length > 0 && (
+        <div className="search__results__cards search__results__cards--extended">
+          {flights.map((flight, index) => {
+            const lines = flight.flightMetaData.flightLines;
+            const firstLine = lines[0];
+            const lastLine = lines[lines.length - 1];
+            const stops = lines.length - 1;
+
+            return (
+              <div className="flight" key={`flight-${flight.flightId}-${index}`}>
+                <div className="flight__option">
+                  <div className="flight__content">
+                    <div className="flight__flights">
+                      {/* HEADER */}
+                      <div className="flight__flight">
+                        <div className="flight__flight__header">
+                          <div className="flight__status__container" />
+                          <div className="flight__price">
+                            <span className="price">€ {flight.price.toFixed(2)}</span>
+
+                            <button
+                              type="button"
+                              className={`cta ${flight.isSelected ? 'cta--selected' : 'cta--select'}`}
+                              onClick={() => dispatch(selectFlight({ flightOptionId: flight.flightOptionId, isDeparture: !!isDeparture }))}>
+                              {flight.isSelected ? 'Selected' : 'Select'}
+                            </button>
+                          </div>
                         </div>
                       </div>
-                    </div>
-
-                    {/* SUMMARY */}
-                    <div className="flight__flight">
-                      <div className="flight__flight__container">
-                        <div className="flight__flight__wrapper">
-                          <div className="flight__logo__wrapper">
-                            <img
-                              src={`https://media.tidesoftware.be/media/shared/Airlines/${firstLine.airlineCode}.png?height=256`}
-                              alt={flight.airlineDescription}
-                              className="flight__logo"
-                            />
-                            <span>{flight.airlineDescription}</span>
-                          </div>
 
-                          <div className="flight__info">
-                            <div className="flight__info__times">
-                              <strong>
-                                {firstLine.departureTime} {firstLine.departureAirport}
-                              </strong>
-                              <p>{format(parseISO(firstLine.departureDate), 'EEE dd MMM yyyy')}</p>
+                      {/* SUMMARY */}
+                      <div className="flight__flight">
+                        <div className="flight__flight__container">
+                          <div className="flight__flight__wrapper">
+                            <div className="flight__logo__wrapper">
+                              <img
+                                src={`https://media.tidesoftware.be/media/shared/Airlines/${firstLine.airlineCode}.png?height=256`}
+                                alt={flight.airlineDescription}
+                                className="flight__logo"
+                              />
+                              <span>{flight.airlineDescription}</span>
                             </div>
 
-                            <div className="flight__info__duration">
-                              <p>{formatDuration(flight.flightMetaData.durationInTicks)}</p>
+                            <div className="flight__info">
+                              <div className="flight__info__times">
+                                <strong>
+                                  {firstLine.departureTime} {firstLine.departureAirport}
+                                </strong>
+                                <p>{format(parseISO(firstLine.departureDate), 'EEE dd MMM yyyy')}</p>
+                              </div>
 
-                              <div className="flight__info__duration__stops">{stops > 0 && <div className="flight__info__duration__stop" />}</div>
+                              <div className="flight__info__duration">
+                                <p>{formatDuration(flight.flightMetaData.durationInTicks)}</p>
 
-                              <span>{stops === 0 ? translations.SRP.DIRECT : `${stops} ${translations.SRP.STOP}${stops > 1 ? 's' : ''}`}</span>
-                            </div>
+                                <div className="flight__info__duration__stops">{stops > 0 && <div className="flight__info__duration__stop" />}</div>
+
+                                <span>{stops === 0 ? translations.SRP.DIRECT : `${stops} ${translations.SRP.STOP}${stops > 1 ? 's' : ''}`}</span>
+                              </div>
 
-                            <div className="flight__info__times flight__info__times--arrival">
-                              <strong>
-                                {lastLine.arrivalTime} {lastLine.arrivalAirport}
-                              </strong>
-                              <p>{format(parseISO(lastLine.arrivalDate), 'EEE dd MMM yyyy')}</p>
+                              <div className="flight__info__times flight__info__times--arrival">
+                                <strong>
+                                  {lastLine.arrivalTime} {lastLine.arrivalAirport}
+                                </strong>
+                                <p>{format(parseISO(lastLine.arrivalDate), 'EEE dd MMM yyyy')}</p>
+                              </div>
                             </div>
                           </div>
-                        </div>
 
-                        <div className="flight__detail__btn__wrapper">
-                          <div
-                            className={`flight__detail__btn ${activeDetailId === flight.flightOptionId ? 'flight__detail__btn--active' : ''}`}
-                            onClick={() => handleDetailClick(flight.flightOptionId)}>
-                            <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
+                          <div className="flight__detail__btn__wrapper">
+                            <div
+                              className={`flight__detail__btn ${activeDetailId === flight.flightOptionId ? 'flight__detail__btn--active' : ''}`}
+                              onClick={() => handleDetailClick(flight.flightOptionId)}>
+                              <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
+                            </div>
                           </div>
                         </div>
-                      </div>
 
-                      {/* DETAILS */}
-                      <div className={`flight__detail ${activeDetailId === flight.flightOptionId ? 'flight__detail--active' : ''}`}>
-                        {lines.map((line, index) => {
-                          const nextLine = lines[index + 1];
-
-                          return (
-                            <React.Fragment key={index}>
-                              {/* Flight line */}
-                              <div className="flight__info">
-                                <div className="flight__info__times__wrapper">
-                                  <div className="flight__info__times">
-                                    <p>{line.departureTime}</p>
-                                    <strong>{line.departureAirport}</strong>
-                                    <p>{format(parseISO(line.departureDate), 'EEE dd MMM yyyy')}</p>
-                                  </div>
+                        {/* DETAILS */}
+                        <div className={`flight__detail ${activeDetailId === flight.flightOptionId ? 'flight__detail--active' : ''}`}>
+                          {lines.map((line, index) => {
+                            const nextLine = lines[index + 1];
 
-                                  <Icon name="ui-plane-depart" width={30} height={20} />
-                                </div>
+                            return (
+                              <React.Fragment key={index}>
+                                {/* Flight line */}
+                                <div className="flight__info">
+                                  <div className="flight__info__times__wrapper">
+                                    <div className="flight__info__times">
+                                      <p>{line.departureTime}</p>
+                                      <strong>{line.departureAirport}</strong>
+                                      <p>{format(parseISO(line.departureDate), 'EEE dd MMM yyyy')}</p>
+                                    </div>
 
-                                <div className="flight__info__duration">
-                                  <p>{formatDuration(line.durationInTicks)}</p>
-                                  <span>
-                                    {line.airline} {line.number}
-                                  </span>
-                                </div>
+                                    <Icon name="ui-plane-depart" width={30} height={20} />
+                                  </div>
 
-                                <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
-                                  <Icon name="ui-plane-arrive" width={30} height={20} />
-                                  <div className="flight__info__times flight__info__times--arrival">
-                                    <p>{line.arrivalTime}</p>
-                                    <strong>{line.arrivalAirport}</strong>
-                                    <p>{format(parseISO(line.arrivalDate), 'EEE dd MMM yyyy')}</p>
+                                  <div className="flight__info__duration">
+                                    <p>{formatDuration(line.durationInTicks)}</p>
+                                    <span>
+                                      {line.airline} {line.number}
+                                    </span>
                                   </div>
-                                </div>
-                              </div>
 
-                              {nextLine && (
-                                <div className="flight__info">
-                                  <div className="flight__info__duration flight__info__duration--waittime">
-                                    <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
-                                      <Icon name="ui-clock" width={24} height={24} />
-                                    </div>
-                                    <div className="flight__info__duration__stoptime">
-                                      <span>{translations.SRP.STOP_TIME}</span>
-                                      <strong>{formatDuration(parseISO(nextLine.departureDate).getTime() - parseISO(line.arrivalDate).getTime())}</strong>
+                                  <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
+                                    <Icon name="ui-plane-arrive" width={30} height={20} />
+                                    <div className="flight__info__times flight__info__times--arrival">
+                                      <p>{line.arrivalTime}</p>
+                                      <strong>{line.arrivalAirport}</strong>
+                                      <p>{format(parseISO(line.arrivalDate), 'EEE dd MMM yyyy')}</p>
                                     </div>
                                   </div>
                                 </div>
-                              )}
-                            </React.Fragment>
-                          );
-                        })}
+
+                                {nextLine && (
+                                  <div className="flight__info">
+                                    <div className="flight__info__duration flight__info__duration--waittime">
+                                      <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
+                                        <Icon name="ui-clock" width={24} height={24} />
+                                      </div>
+                                      <div className="flight__info__duration__stoptime">
+                                        <span>{translations.SRP.STOP_TIME}</span>
+                                        <strong>{formatDuration(parseISO(nextLine.departureDate).getTime() - parseISO(line.arrivalDate).getTime())}</strong>
+                                      </div>
+                                    </div>
+                                  </div>
+                                )}
+                              </React.Fragment>
+                            );
+                          })}
+                        </div>
                       </div>
                     </div>
-                  </div>
 
-                  <div className="flight__rate" />
+                    <div className="flight__rate" />
+                  </div>
                 </div>
               </div>
-            </div>
-          );
-        })}
-      </div>
+            );
+          })}
+        </div>
+      )}
 
       {/* <div className="search__results__options">
         <p>There are more transports at your disposal</p>

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

@@ -63,6 +63,10 @@ const calculateNights = (fromDate: Date, toDate: Date, translations?: any): stri
 };
 
 const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ isLoading, context }) => {
+  if (context.showMockup) {
+    return showMocukups(context);
+  }
+
   const translations = getTranslations(context?.languageCode ?? 'en-GB');
 
   if (isLoading) {
@@ -109,3 +113,84 @@ const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ i
 };
 
 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>;
+};