@qite/tide-booking-component 1.4.122 → 1.4.124

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

@@ -1,110 +1,110 @@
-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;
+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 +1,81 @@
-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;
+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;