@qite/tide-booking-component 1.4.124 → 1.4.126

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

@@ -1,38 +0,0 @@
-import React, { useContext } from 'react';
-import Icon from '../../../../shared/components/icon';
-import { ExtendedFlightSearchResponseItem } from '../../../types';
-import SearchResultsConfigurationContext from '../../../search-results-configuration-context';
-import { getTranslations } from '../../../../shared/utils/localization-util';
-import PairedFlightOption from './paired-flight-option';
-
-interface PairedFlightSelectionProps {
-  searchResults: ExtendedFlightSearchResponseItem[];
-}
-
-const PairedFlightSelection: React.FC<PairedFlightSelectionProps> = ({ searchResults }) => {
-  const context = useContext(SearchResultsConfigurationContext);
-  const translations = getTranslations(context?.languageCode ?? 'en-GB');
-
-  return (
-    <>
-      <div className="search__results__label search__results__label--secondary">
-        <div className="search__results__label__date">
-          <Icon name="ui-flight" height={16} fill="white" />
-        </div>
-        <div className="search__results__label__text">
-          <h3>
-            {translations.SRP.SELECT} <strong> {translations.SIDEBAR.FLIGHT}</strong>
-          </h3>
-        </div>
-      </div>
-
-      <div className="search__results__cards search__results__cards--extended">
-        {searchResults.map((result) => (
-          <PairedFlightOption key={`flight-${result.guid}`} item={result} />
-        ))}
-      </div>
-    </>
-  );
-};
-
-export default PairedFlightSelection;

package/src/search-results/components/group-tour/group-tour-card.tsx

@@ -1,105 +0,0 @@
-import React, { useContext } from 'react';
-import Icon from '../../../shared/components/icon';
-import { BookingPackageItem } from '@qite/tide-client';
-import { format } from 'date-fns';
-import { calculateDays, calculateNights, formatPrice, getTranslations } from '../../../shared/utils/localization-util';
-import { SearchResultsRootState } from '../../store/search-results-store';
-import { useDispatch, useSelector } from 'react-redux';
-import { setSelectedSearchResult } from '../../store/search-results-slice';
-import he from 'he';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-
-interface GroupTourCardProps {
-  result: BookingPackageItem;
-  languageCode?: string;
-  cmsItem?: any;
-}
-
-const GroupTourCard: React.FC<GroupTourCardProps> = ({ result, languageCode, cmsItem }) => {
-  const context = useContext(SearchResultsConfigurationContext);
-  const { selectedSearchResult } = useSelector((state: SearchResultsRootState) => state.searchResults);
-  if (!context) {
-    return null;
-  }
-  const dispatch = useDispatch();
-  const translations = getTranslations(languageCode ?? 'en-GB');
-
-  const genders = result.allotment?.travellerGenders || [];
-  const maleCount = genders.filter((g) => g === 0).length;
-  const femaleCount = genders.filter((g) => g === 1).length;
-  const otherCount = genders.filter((g) => g === 2).length;
-
-  const handleChange = (result: BookingPackageItem) => {
-    dispatch(setSelectedSearchResult(result));
-  };
-
-  return (
-    <div className="search__result-card">
-      <div className="search__result-card__allotment">
-        <div className="search__result-card__allotment__img-wrapper">
-          <img src={cmsItem?.content?.images?.header?.url} alt={result.name} className="search__result-card__allotment__img" />
-        </div>
-        <div className="search__result-card__allotment__title__wrapper">
-          <h3 className="search__result-card__allotment__title">{result.name}</h3>
-          {cmsItem?.content?.introductie?.intro && (
-            <div
-              className="search__result-card__allotment__description"
-              dangerouslySetInnerHTML={{ __html: he.decode(cmsItem.content.introductie.intro) }}></div>
-          )}
-          <div className="search__result-card__allotment__container">
-            <div className="search__result-card__allotment__header">
-              <div className="search__result-card__allotment__wrapper">
-                <div className="search__result-card__allotment__date">
-                  <Icon name="ui-plane" height={16} />
-                  <div className="search__result-card__allotment__date--from">{format(new Date(result.fromDate), 'dd/MM/yyyy')}</div>
-                </div>
-                <div className="search__result-card__allotment__info">
-                  <span>
-                    <Icon name="ui-calendar" height={16} />
-                  </span>{' '}
-                  {calculateDays(result.stayFromDate, result.stayToDate)} {translations.PRODUCT.DAYS} -{' '}
-                  <span>
-                    <Icon name="ui-moon" height={16} />
-                  </span>
-                  {calculateNights(result.stayFromDate, result.stayToDate)} {translations.SRP.NIGHTS}
-                </div>
-              </div>
-            </div>
-            {result.allotment && (
-              <div className="search__result-card__allotment__info">
-                <span className="search__result-card__allotment__info__group">{translations?.SRP.TRAVEL_GROUP}</span>
-                <div className="search__result-card__allotment__persons">
-                  <div className="search__result-card__allotment__person">
-                    <Icon name="ui-men" width={16} height={16} />
-                    <span>{maleCount} p.</span>
-                  </div>
-                  <div className="search__result-card__allotment__person">
-                    <Icon name="ui-women" width={16} height={16} />
-                    <span>{femaleCount} p.</span>
-                  </div>
-                  <div className="search__result-card__allotment__person">
-                    <Icon name="ui-other" width={16} height={16} />
-                    <span>{otherCount} p.</span>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-        <div className="search__result-card__allotment__footer">
-          <div className="search__result-card__allotment__price__wrapper">
-            <div className="search__result-card__allotment__price">
-              {formatPrice(result.price, result.currencyCode, languageCode)} {translations.PRODUCT.PER_PERSON}
-            </div>
-            {/* <div className="search__result-card__allotment__price__info">Gelieve € 450,00 zakgeld mee te nemen</div> */}
-          </div>
-          <button type="button" className={`cta ${selectedSearchResult === result ? 'cta--selected' : 'cta--select'}`} onClick={() => handleChange(result)}>
-            {selectedSearchResult === result ? translations?.SHARED.SELECTED : translations?.SHARED.SELECT}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default GroupTourCard;

package/src/search-results/components/group-tour/group-tour-results.tsx

@@ -1,62 +0,0 @@
-import React, { useContext, useEffect } from 'react';
-import Spinner from '../spinner/spinner';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import { getTranslations } from '../../../shared/utils/localization-util';
-import { SearchResultsRootState } from '../../store/search-results-store';
-import { useDispatch, useSelector } from 'react-redux';
-import { isEmpty } from 'lodash';
-import GroupTourCard from './group-tour-card';
-import { setActiveTab } from '../../store/search-results-slice';
-
-interface GroupTourResultsProps {
-  isLoading: boolean;
-}
-
-const GroupTourResults: React.FC<GroupTourResultsProps> = ({ isLoading }) => {
-  const context = useContext(SearchResultsConfigurationContext);
-  if (!context) {
-    return null;
-  }
-
-  if (isLoading) {
-    return <>{context.customSpinner ?? <Spinner />}</>;
-  }
-
-  const translations = getTranslations(context.languageCode ?? 'en-GB');
-  const { filteredResults, activeTab } = useSelector((state: SearchResultsRootState) => state.searchResults);
-  const dispatch = useDispatch();
-
-  if (isEmpty(filteredResults)) {
-    return <div className="no-results">{translations.SRP.NO_RESULTS}</div>;
-  }
-
-  useEffect(() => {
-    if (activeTab === 'compact') {
-      dispatch(setActiveTab('list'));
-    }
-  }, [activeTab]);
-
-  const cmsMap = React.useMemo(() => {
-    const map = new Map();
-
-    context.cmsGroupTourData?.forEach((item) => {
-      const code = item?.content?.introductie?.data?.code;
-      if (code) {
-        map.set(code, item);
-      }
-    });
-
-    return map;
-  }, [context.cmsGroupTourData]);
-
-  return (
-    <div className={`search__results__cards search__results__cards--${activeTab}`}>
-      {filteredResults.map((result, index) => {
-        const cmsItem = cmsMap.get(result.code);
-        return <GroupTourCard key={index} result={result} cmsItem={cmsItem} />;
-      })}
-    </div>
-  );
-};
-
-export default GroupTourResults;

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

@@ -1,244 +0,0 @@
-import React, { useContext, useState } from 'react';
-import { FlyInType, HotelResult, SearchResultsConfiguration } from '../../types';
-import Spinner from '../spinner/spinner';
-import HotelCard from './hotel-card';
-import { useDispatch, useSelector } from 'react-redux';
-import { SearchResultsRootState } from '../../store/search-results-store';
-import { BookingPackageItem, PackagingAccommodationResponse, PortalQsmType } from '@qite/tide-client';
-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';
-import Icon from '../../../shared/components/icon';
-import { setFlyInIsOpen, setFlyInType } from '../../store/search-results-slice';
-
-interface HotelAccommodationResultsProps {
-  isLoading: boolean;
-  isFlyIn?: boolean;
-}
-
-const getLocation = (locationName?: string, regionName?: string, countryName?: string, fallback?: string): string => {
-  if (locationName || regionName) {
-    return `${locationName || regionName}${countryName ? `, ${countryName}` : ''}`;
-  }
-
-  return fallback || '';
-};
-
-const getBaseHotelResult = (
-  searchResult: {
-    code: string;
-    name: string;
-    locationName?: string;
-    regionName?: string;
-    countryName?: string;
-    price: number;
-    currencyCode: string;
-  },
-  cmsItem: any,
-  languageCode?: string,
-  translations?: any
-) => ({
-  type: 'hotel' as const,
-  code: searchResult.code,
-  title: cmsItem?.content?.general?.title || searchResult.name,
-  image: cmsItem?.content?.images?.thumbnailPicture?.url,
-  description: cmsItem?.content?.descriptions?.introductionTitle || '',
-  location: getLocation(searchResult.locationName, searchResult.regionName, searchResult.countryName, cmsItem?.parentItem?.name),
-  price: formatPrice(searchResult.price, searchResult.currencyCode, languageCode),
-  ctaText: translations?.SRP.VIEW_DETAILS
-});
-
-const mapBookingPackageResult = (searchResult: BookingPackageItem, cmsItem: any, languageCode?: string, translations?: any): HotelResult => {
-  return {
-    ...getBaseHotelResult(searchResult, cmsItem, languageCode, translations),
-    id: searchResult.productId,
-    days: `${calculateNights(searchResult.stayFromDate, searchResult.stayToDate)} ${translations?.SRP.NIGHTS}`,
-    accommodation: searchResult.accommodationName,
-    regime: searchResult.regimeName,
-    stars: cmsItem?.content?.general?.stars || searchResult.hotelStars
-  };
-};
-
-const mapPackagingAccoResult = (searchResult: PackagingAccommodationResponse, cmsItem: any, languageCode?: string, translations?: any): HotelResult => {
-  const selectedOption = first(searchResult.rooms)?.options?.find((x) => x.isSelected);
-
-  return {
-    ...getBaseHotelResult(searchResult, cmsItem, languageCode, translations),
-    days: `${calculateNights(new Date(searchResult.fromDate), new Date(searchResult.toDate))} ${translations?.SRP.NIGHTS}`,
-    accommodation: selectedOption?.accommodationName || '',
-    regime: selectedOption?.regimeName || '',
-    stars: cmsItem?.content?.general?.stars,
-    contents: searchResult.contents
-  };
-};
-
-const renderHotelResults = (
-  results: HotelResult[],
-  context: SearchResultsConfiguration,
-  activeTab: string | null,
-  translations: any,
-  selectedPackagingAccoResult?: HotelResult,
-  isFlyIn?: boolean
-) => {
-  const renderedResults = results.map((result, index) => {
-    const key = `${result.id ?? result.code}-${index}`;
-
-    if (context?.showCustomCards && context?.customCardRenderer) {
-      return (
-        <div key={key} className="search__result-card">
-          {context.customCardRenderer(result)}
-        </div>
-      );
-    }
-
-    return <HotelCard key={key} result={result} translations={translations} />;
-  });
-
-  return (
-    <div className={`search__results__cards ${activeTab ? `search__results__cards--${activeTab}` : ''}`}>
-      {selectedPackagingAccoResult && !isFlyIn && (
-        <HotelCard key={selectedPackagingAccoResult.code} result={selectedPackagingAccoResult} translations={translations} />
-      )}
-      {renderedResults}
-    </div>
-  );
-};
-
-const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ isLoading, isFlyIn }) => {
-  const context = useContext(SearchResultsConfigurationContext);
-  const dispatch = useDispatch();
-  if (!context) {
-    return null;
-  }
-
-  const translations = getTranslations(context.languageCode ?? 'en-GB');
-
-  const { filteredResults, filteredPackagingAccoResults, packagingAccoResults, activeTab, flyInIsOpen, selectedPackagingAccoResultCode } = useSelector(
-    (state: SearchResultsRootState) => state.searchResults
-  );
-
-  const cmsMap = React.useMemo(() => {
-    const map = new Map();
-
-    context.cmsHotelData?.forEach((item) => {
-      const code = item?.content?.general?.product?.code;
-      if (code) {
-        map.set(code, item);
-      }
-    });
-
-    return map;
-  }, [context.cmsHotelData]);
-
-  const mappedResults = React.useMemo(() => {
-    if (context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.searchConfiguration.enableManualPackaging) {
-      return filteredResults.map((result) => mapBookingPackageResult(result, cmsMap.get(result.code), context.languageCode, translations));
-    }
-
-    if (
-      context.searchConfiguration.qsmType === PortalQsmType.Accommodation ||
-      (context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && context.searchConfiguration.enableManualPackaging)
-    ) {
-      return filteredPackagingAccoResults.map((result) => mapPackagingAccoResult(result, cmsMap.get(result.code), context.languageCode, translations));
-    }
-
-    return [];
-  }, [
-    context.searchConfiguration.qsmType,
-    context.searchConfiguration.enableManualPackaging,
-    context.languageCode,
-    filteredResults,
-    filteredPackagingAccoResults,
-    cmsMap,
-    translations
-  ]);
-
-  const firstBookingResult = filteredResults?.[0];
-  const firstPackagingResult = filteredPackagingAccoResults?.[0];
-
-  const firstResultDate =
-    context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.searchConfiguration.enableManualPackaging
-      ? firstBookingResult?.fromDate
-      : firstPackagingResult?.fromDate;
-
-  const firstResultDay = firstResultDate ? format(parseISO(firstResultDate), 'd') : null;
-  const firstResultMonth = firstResultDate ? format(parseISO(firstResultDate), 'MMM') : null;
-
-  const selectedPackagingAccoResult = React.useMemo(() => {
-    const selectedResult = packagingAccoResults.find((result) => result.code === selectedPackagingAccoResultCode);
-    if (selectedResult) {
-      return mapPackagingAccoResult(selectedResult, cmsMap.get(selectedResult.code), context.languageCode, translations);
-    }
-  }, [packagingAccoResults, selectedPackagingAccoResultCode, cmsMap, context.languageCode, translations]);
-
-  const visibleResults = React.useMemo(() => {
-    const shouldShowAll = context?.searchConfiguration.qsmType !== PortalQsmType.AccommodationAndFlight || isFlyIn;
-
-    let filteredMapperResults = mappedResults;
-
-    if (selectedPackagingAccoResult) {
-      filteredMapperResults = mappedResults.filter((result) => result.code !== selectedPackagingAccoResult.code);
-    }
-
-    if (shouldShowAll) {
-      if (isFlyIn) {
-        return mappedResults;
-      }
-      return filteredMapperResults;
-    }
-
-    if (selectedPackagingAccoResult) {
-      return filteredMapperResults.filter((result) => result.code !== selectedPackagingAccoResult.code).slice(0, 2);
-    }
-
-    return mappedResults.slice(0, 3);
-  }, [context?.searchConfiguration.qsmType, mappedResults, isFlyIn, selectedPackagingAccoResult]);
-
-  const handleShowMoreHotels = (flyInType: FlyInType) => {
-    dispatch(setFlyInType(flyInType));
-    dispatch(setFlyInIsOpen(true));
-  };
-
-  return (
-    <>
-      {!isFlyIn && (
-        <div className="search__results__label search__results__label--secondary">
-          <div className="search__results__label__date">
-            {/* /* {firstResultDay && firstResultMonth ? (
-              <>
-                <p className="search__results__label__date-date">{firstResultDay}</p>
-                <p>{firstResultMonth}</p>
-              </>
-            ) : (
-              <Icon name="ui-bed" height={16} fill="white" />
-            )} */}
-            <p className="search__results__label__date-date">{firstResultDay}</p>
-            <p>{firstResultMonth}</p>
-          </div>
-          <div className="search__results__label__text">
-            <Icon name="ui-bed" height={16} />
-            <h3>
-              {translations.SRP.SELECT} <strong>{translations.SRP.ACCOMMODATION}</strong>
-            </h3>
-          </div>
-        </div>
-      )}
-      {isLoading ? (
-        <>{context.customSpinner ?? <Spinner label={translations.SRP.LOADING_ACCOMMODATIONS} />}</>
-      ) : (
-        renderHotelResults(visibleResults, context, activeTab, translations, selectedPackagingAccoResult, isFlyIn)
-      )}
-      {packagingAccoResults.length > 3 && !isFlyIn && (
-        <div className="search__results__cards__actions">
-          <button className="cta cta--secondary" onClick={() => handleShowMoreHotels('acco-results')}>
-            {translations.SRP.SHOW_MORE}
-          </button>
-        </div>
-      )}
-      {mappedResults.length === 0 && !isLoading && <div className="no-results">{translations.SRP.NO_RESULTS}</div>}
-    </>
-  );
-};
-
-export default HotelAccommodationResults;

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

@@ -1,110 +0,0 @@
-import React from 'react';
-import { HotelResult } from '../../types';
-import Icon from '../../../shared/components/icon';
-import { useDispatch, useSelector } from 'react-redux';
-import { SearchResultsRootState } from '../../store/search-results-store';
-import { setSelectedPackagingAccoResult } from '../../store/search-results-slice';
-import he from 'he';
-
-interface HotelCardProps {
-  result: HotelResult;
-  translations?: any;
-}
-
-const HotelCard: React.FC<HotelCardProps> = ({ result, translations }) => {
-  const dispatch = useDispatch();
-  const { selectedPackagingAccoResultCode } = useSelector((state: SearchResultsRootState) => state.searchResults);
-
-  const handleChange = (productCode: string) => {
-    dispatch(setSelectedPackagingAccoResult(productCode));
-  };
-
-  if (result.contents?.length) {
-    return (
-      <div
-        key={result.id}
-        className="search__result-card__wrapper search__result-card__wrapper--custom"
-        onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.02)')}
-        onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}>
-        <div className="search__result-card__top" dangerouslySetInnerHTML={{ __html: he.decode(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>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <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">{translations?.SHARED.TOTAL_PRICE}</span>
-          <span className="search__result-card__price">{result.price}</span>
-        </div>
-      </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>
-          </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 ${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>
-    </div>
-  );
-};
-
-export default HotelCard;

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

@@ -1,81 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { SortByType, SortingOption } from '../../types';
-import { PickerItem } from '../../../shared/types';
-
-interface ItemPickerProps {
-  items: PickerItem[] | SortByType[] | SortingOption[];
-  selection: string | undefined;
-  selectedSortByType?: SortByType | null;
-  label: string;
-  placeholder: string;
-  classModifier: string;
-  valueFormatter?: (value: string, direction?: string) => string;
-  onPick: (picked: string, direction?: string) => void;
-}
-
-const ItemPicker: React.FC<ItemPickerProps> = ({ items, selection, selectedSortByType, label, placeholder, classModifier, onPick, valueFormatter }) => {
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [openDirection, setOpenDirection] = useState<'down' | 'up'>('down');
-  const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const dropdownMenuRef = useRef<HTMLUListElement | null>(null);
-  const toggleButtonRef = useRef<HTMLButtonElement | null>(null);
-
-  const handlePick = (picked: string, direction?: string) => {
-    setIsDropdownOpen(false);
-    onPick(picked, direction);
-  };
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsDropdownOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (isDropdownOpen && toggleButtonRef.current) {
-      const buttonRect = toggleButtonRef.current.getBoundingClientRect();
-      const spaceBelow = window.innerHeight - buttonRect.bottom;
-      const spaceAbove = buttonRect.top;
-      const dropdownHeight = dropdownMenuRef.current?.offsetHeight ?? 16;
-      setOpenDirection(spaceBelow < dropdownHeight && spaceAbove > spaceBelow ? 'up' : 'down');
-    }
-  }, [isDropdownOpen]);
-
-  return (
-    <div className={'dropdown__input ' + classModifier}>
-      <span className="dropdown__label">{label}</span>
-      <div className="dropdown" ref={dropdownRef}>
-        <button
-          type="button"
-          className={`dropdown-toggle ${isDropdownOpen ? 'dropdown-toggle--open' : ''}`}
-          onClick={() => setIsDropdownOpen((prev) => !prev)}
-          ref={toggleButtonRef}>
-          <span>{selectedSortByType ? valueFormatter?.(selectedSortByType.label, selectedSortByType?.direction) : selection || placeholder}</span>
-          <span className="arrow">&#9662;</span>
-        </button>
-        {isDropdownOpen && (
-          <ul className={`dropdown-menu dropdown-menu--${openDirection}`} ref={dropdownMenuRef}>
-            {items.map((item, index) => (
-              <li
-                key={`${item.label}-${index}`}
-                onClick={() => handlePick(item.label, 'direction' in item ? item.direction : undefined)}
-                className={`dropdown-menu__item${selection === item.label ? ' dropdown-menu__item--selected' : ''}`}>
-                {item.icon && <span className="travel-class-icon">{item.icon}</span>}
-                {valueFormatter ? valueFormatter(item.label, 'direction' in item ? item.direction : undefined) : item.label}
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default ItemPicker;