@qite/tide-booking-component 1.4.92 → 1.4.93

package/src/search-results/components/multi-range-filter.tsx

@@ -1,104 +1,104 @@
-import React, { ChangeEvent, useEffect, useState } from 'react';
-
-interface MultiRangeFilterProps {
-  min: number;
-  max: number;
-  selectedMin: number;
-  selectedMax: number;
-  valueFormatter: (value: number) => string;
-  onChange: (min: number, max: number) => void;
-}
-
-const MultiRangeFilter: React.FC<MultiRangeFilterProps> = ({ min, max, selectedMin, selectedMax, valueFormatter, onChange }) => {
-  const [isDragging, setIsDragging] = useState(false);
-  const [leftPercentage, setLeftPercentage] = useState<number>(0);
-  const [rightPercentage, setRightPercentage] = useState<number>(0);
-  const [minVal, setMinVal] = useState(selectedMin ?? min);
-  const [maxVal, setMaxVal] = useState(selectedMax ?? max);
-  const minGap = 5;
-
-  // Sync internal state with external selectedMin/selectedMax changes
-  useEffect(() => {
-    setMinVal(selectedMin ?? min);
-    setMaxVal(selectedMax ?? max);
-  }, [min, max, selectedMin, selectedMax]);
-
-  // Recalculate slider track whenever values change
-  useEffect(() => {
-    const range = max - min || 1;
-    const minPercent = ((minVal - min) / range) * 100;
-    const maxPercent = ((maxVal - min) / range) * 100;
-
-    setLeftPercentage(minPercent);
-    setRightPercentage(100 - maxPercent);
-  }, [minVal, maxVal, min, max]);
-
-  const slideMin = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value, 10);
-
-    // Ensure the thumbs don’t cross and enforce minGap
-    if (value <= maxVal - minGap) {
-      setMinVal(value);
-    }
-  };
-
-  const slideMax = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value, 10);
-
-    // Ensure the thumbs don’t cross and enforce minGap
-    if (value >= minVal + minGap) {
-      setMaxVal(value);
-    }
-  };
-
-  const startDrag = () => {
-    setIsDragging(true);
-  };
-
-  const stopDrag = () => {
-    setIsDragging(false);
-    // Notify parent with the final values
-    onChange(minVal, maxVal);
-  };
-
-  return (
-    <div className="double-slider-box">
-      <div className="input-box">
-        {/* Show currently selected range */}
-        <div className="min-box">{valueFormatter(minVal)}</div>
-        <div className="max-box">{valueFormatter(maxVal)}</div>
-      </div>
-      <div className="range-slider">
-        <div className="slider-track" style={{ left: `${leftPercentage}%`, right: `${rightPercentage}%` }} />
-        <input
-          type="range"
-          min={min}
-          max={max}
-          value={minVal}
-          onChange={slideMin}
-          onMouseDown={startDrag}
-          onMouseUp={stopDrag}
-          onTouchStart={startDrag}
-          onTouchEnd={stopDrag}
-          className="min-val"
-        />
-        <input
-          type="range"
-          min={min}
-          max={max}
-          value={maxVal}
-          onChange={slideMax}
-          onMouseDown={startDrag}
-          onMouseUp={stopDrag}
-          onTouchStart={startDrag}
-          onTouchEnd={stopDrag}
-          className="max-val"
-        />
-        {isDragging && <div className="min-tooltip">{valueFormatter(minVal)}</div>}
-        {isDragging && <div className="max-tooltip">{valueFormatter(maxVal)}</div>}
-      </div>
-    </div>
-  );
-};
-
-export default MultiRangeFilter;
+import React, { ChangeEvent, useEffect, useState } from 'react';
+
+interface MultiRangeFilterProps {
+  min: number;
+  max: number;
+  selectedMin: number;
+  selectedMax: number;
+  valueFormatter: (value: number) => string;
+  onChange: (min: number, max: number) => void;
+}
+
+const MultiRangeFilter: React.FC<MultiRangeFilterProps> = ({ min, max, selectedMin, selectedMax, valueFormatter, onChange }) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const [leftPercentage, setLeftPercentage] = useState<number>(0);
+  const [rightPercentage, setRightPercentage] = useState<number>(0);
+  const [minVal, setMinVal] = useState(selectedMin ?? min);
+  const [maxVal, setMaxVal] = useState(selectedMax ?? max);
+  const minGap = 5;
+
+  // Sync internal state with external selectedMin/selectedMax changes
+  useEffect(() => {
+    setMinVal(selectedMin ?? min);
+    setMaxVal(selectedMax ?? max);
+  }, [min, max, selectedMin, selectedMax]);
+
+  // Recalculate slider track whenever values change
+  useEffect(() => {
+    const range = max - min || 1;
+    const minPercent = ((minVal - min) / range) * 100;
+    const maxPercent = ((maxVal - min) / range) * 100;
+
+    setLeftPercentage(minPercent);
+    setRightPercentage(100 - maxPercent);
+  }, [minVal, maxVal, min, max]);
+
+  const slideMin = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(e.target.value, 10);
+
+    // Ensure the thumbs don’t cross and enforce minGap
+    if (value <= maxVal - minGap) {
+      setMinVal(value);
+    }
+  };
+
+  const slideMax = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(e.target.value, 10);
+
+    // Ensure the thumbs don’t cross and enforce minGap
+    if (value >= minVal + minGap) {
+      setMaxVal(value);
+    }
+  };
+
+  const startDrag = () => {
+    setIsDragging(true);
+  };
+
+  const stopDrag = () => {
+    setIsDragging(false);
+    // Notify parent with the final values
+    onChange(minVal, maxVal);
+  };
+
+  return (
+    <div className="double-slider-box">
+      <div className="input-box">
+        {/* Show currently selected range */}
+        <div className="min-box">{valueFormatter(minVal)}</div>
+        <div className="max-box">{valueFormatter(maxVal)}</div>
+      </div>
+      <div className="range-slider">
+        <div className="slider-track" style={{ left: `${leftPercentage}%`, right: `${rightPercentage}%` }} />
+        <input
+          type="range"
+          min={min}
+          max={max}
+          value={minVal}
+          onChange={slideMin}
+          onMouseDown={startDrag}
+          onMouseUp={stopDrag}
+          onTouchStart={startDrag}
+          onTouchEnd={stopDrag}
+          className="min-val"
+        />
+        <input
+          type="range"
+          min={min}
+          max={max}
+          value={maxVal}
+          onChange={slideMax}
+          onMouseDown={startDrag}
+          onMouseUp={stopDrag}
+          onTouchStart={startDrag}
+          onTouchEnd={stopDrag}
+          className="max-val"
+        />
+        {isDragging && <div className="min-tooltip">{valueFormatter(minVal)}</div>}
+        {isDragging && <div className="max-tooltip">{valueFormatter(maxVal)}</div>}
+      </div>
+    </div>
+  );
+};
+
+export default MultiRangeFilter;

package/src/search-results/components/round-trip/round-trip-results.tsx

@@ -1,199 +1,199 @@
-import React, { useEffect } from 'react';
-import Icon from '../icon';
-import { useDispatch, useSelector } from 'react-redux';
-import { SearchResultsRootState } from '../../store/search-results-store';
-import { setActiveTab } from '../../store/search-results-slice';
-
-interface RoundTripResultsProps {}
-
-const RoundTripResults: React.FC<RoundTripResultsProps> = () => {
-  const { activeTab } = useSelector((state: SearchResultsRootState) => state.searchResults);
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    if (activeTab === 'compact') {
-      dispatch(setActiveTab('list'));
-    }
-  }, [activeTab]);
-
-  return (
-    <div className={`search__results__cards search__results__cards--${activeTab}`}>
-      <div className="search__result-card">
-        <div className="search__result-card__allotment">
-          <div className="search__result-card__allotment__img-wrapper">
-            <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="search__result-card__allotment__img" />
-          </div>
-          <div className="search__result-card__allotment__title__wrapper">
-            <h3 className="search__result-card__allotment__title">
-              Rondreis Noord-India: Rajasthan
-              <span className="search__result-card__allotment__badge">
-                <Icon name="ui-circle-check" width={14} height={14} />
-                GAR
-              </span>
-            </h3>
-
-            <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">05-04-2026</div>
-                  </div>
-                  <div className="search__result-card__allotment__info">
-                    <span>
-                      <Icon name="ui-calendar" height={16} />
-                    </span>{' '}
-                    8 dagen -{' '}
-                    <span>
-                      <Icon name="ui-moon" height={16} />
-                    </span>
-                    7 nachten
-                  </div>
-                </div>
-              </div>
-              <div className="search__result-card__allotment__info">
-                <a href="#" type="button" className="search__result-card__allotment__info__group">
-                  Group
-                </a>
-                <div className="search__result-card__allotment__persons">
-                  <div className="search__result-card__allotment__person">
-                    <Icon name="ui-men" width={16} height={16} />
-                    <span>2 p.</span>
-                  </div>
-                  <div className="search__result-card__allotment__person">
-                    <Icon name="ui-women" width={16} height={16} />
-                    <span>3 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">€ 1.250,00 p.p.</div>
-              <div className="search__result-card__allotment__price__info">Gelieve € 450,00 zakgeld mee te nemen</div>
-            </div>
-            <button className="cta cta--select">Bekijk reis</button>
-          </div>
-        </div>
-      </div>
-      <div className="search__result-card">
-        <div className="search__result-card__allotment">
-          <div className="search__result-card__allotment__img-wrapper">
-            <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="search__result-card__allotment__img" />
-          </div>
-          <div className="search__result-card__allotment__title__wrapper">
-            <h3 className="search__result-card__allotment__title">
-              Rondreis Thailand
-              <span className="search__result-card__allotment__badge search__result-card__allotment__badge--secondary">
-                <Icon name="ui-circle-half" width={14} height={14} />
-                BIJNA GAR
-              </span>
-            </h3>
-            <p className="search__result-card__allotment__description">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quis explicabo, animi illum expedita molestias quae atque laboriosam consequatur
-              nulla error non delectus nesciunt id voluptatem quia nobis? Debitis, rerum!
-            </p>
-            <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">05-04-2026</div>
-                  </div>
-                  <div className="search__result-card__allotment__info">
-                    <span>
-                      <Icon name="ui-calendar" height={16} />
-                    </span>{' '}
-                    8 dagen -{' '}
-                    <span>
-                      <Icon name="ui-moon" height={16} />
-                    </span>
-                    7 nachten
-                  </div>
-                </div>
-              </div>
-              <div className="search__result-card__allotment__info">
-                <a href="#" type="button" className="search__result-card__allotment__info__group">
-                  Group
-                </a>
-                <div className="search__result-card__allotment__persons">
-                  <div className="search__result-card__allotment__person">
-                    <Icon name="ui-men" width={16} height={16} />
-                    <span>2 p.</span>
-                  </div>
-                  <div className="search__result-card__allotment__person">
-                    <Icon name="ui-women" width={16} height={16} />
-                    <span>3 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">€ 1.250,00 p.p.</div>
-              <div className="search__result-card__allotment__price__info">Gelieve € 450,00 zakgeld mee te nemen</div>
-            </div>
-            <button className="cta cta--select">Bekijk reis</button>
-          </div>
-        </div>
-      </div>
-      <div className="search__result-card">
-        <div className="search__result-card__allotment">
-          <div className="search__result-card__allotment__img-wrapper">
-            <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="search__result-card__allotment__img" />
-          </div>
-          <div className="search__result-card__allotment__title__wrapper">
-            <h3 className="search__result-card__allotment__title">Rondreis Timboektoe</h3>
-
-            <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">05-04-2026</div>
-                  </div>
-                  <div className="search__result-card__allotment__info">
-                    <span>
-                      <Icon name="ui-calendar" height={16} />
-                    </span>{' '}
-                    8 dagen -{' '}
-                    <span>
-                      <Icon name="ui-moon" height={16} />
-                    </span>
-                    7 nachten
-                  </div>
-                </div>
-              </div>
-              <div className="search__result-card__allotment__info">
-                <a href="#" type="button" className="search__result-card__allotment__info__group">
-                  Group
-                </a>
-                <div className="search__result-card__allotment__persons">
-                  <div className="search__result-card__allotment__person">
-                    <Icon name="ui-men" width={16} height={16} />
-                    <span>2 p.</span>
-                  </div>
-                  <div className="search__result-card__allotment__person">
-                    <Icon name="ui-women" width={16} height={16} />
-                    <span>3 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">€ 1.250,00 p.p.</div>
-              <div className="search__result-card__allotment__price__info">Gelieve € 450,00 zakgeld mee te nemen</div>
-            </div>
-            <button className="cta cta--select">Bekijk reis</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default RoundTripResults;
+import React, { useEffect } from 'react';
+import Icon from '../icon';
+import { useDispatch, useSelector } from 'react-redux';
+import { SearchResultsRootState } from '../../store/search-results-store';
+import { setActiveTab } from '../../store/search-results-slice';
+
+interface RoundTripResultsProps {}
+
+const RoundTripResults: React.FC<RoundTripResultsProps> = () => {
+  const { activeTab } = useSelector((state: SearchResultsRootState) => state.searchResults);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (activeTab === 'compact') {
+      dispatch(setActiveTab('list'));
+    }
+  }, [activeTab]);
+
+  return (
+    <div className={`search__results__cards search__results__cards--${activeTab}`}>
+      <div className="search__result-card">
+        <div className="search__result-card__allotment">
+          <div className="search__result-card__allotment__img-wrapper">
+            <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="search__result-card__allotment__img" />
+          </div>
+          <div className="search__result-card__allotment__title__wrapper">
+            <h3 className="search__result-card__allotment__title">
+              Rondreis Noord-India: Rajasthan
+              <span className="search__result-card__allotment__badge">
+                <Icon name="ui-circle-check" width={14} height={14} />
+                GAR
+              </span>
+            </h3>
+
+            <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">05-04-2026</div>
+                  </div>
+                  <div className="search__result-card__allotment__info">
+                    <span>
+                      <Icon name="ui-calendar" height={16} />
+                    </span>{' '}
+                    8 dagen -{' '}
+                    <span>
+                      <Icon name="ui-moon" height={16} />
+                    </span>
+                    7 nachten
+                  </div>
+                </div>
+              </div>
+              <div className="search__result-card__allotment__info">
+                <a href="#" type="button" className="search__result-card__allotment__info__group">
+                  Group
+                </a>
+                <div className="search__result-card__allotment__persons">
+                  <div className="search__result-card__allotment__person">
+                    <Icon name="ui-men" width={16} height={16} />
+                    <span>2 p.</span>
+                  </div>
+                  <div className="search__result-card__allotment__person">
+                    <Icon name="ui-women" width={16} height={16} />
+                    <span>3 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">€ 1.250,00 p.p.</div>
+              <div className="search__result-card__allotment__price__info">Gelieve € 450,00 zakgeld mee te nemen</div>
+            </div>
+            <button className="cta cta--select">Bekijk reis</button>
+          </div>
+        </div>
+      </div>
+      <div className="search__result-card">
+        <div className="search__result-card__allotment">
+          <div className="search__result-card__allotment__img-wrapper">
+            <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="search__result-card__allotment__img" />
+          </div>
+          <div className="search__result-card__allotment__title__wrapper">
+            <h3 className="search__result-card__allotment__title">
+              Rondreis Thailand
+              <span className="search__result-card__allotment__badge search__result-card__allotment__badge--secondary">
+                <Icon name="ui-circle-half" width={14} height={14} />
+                BIJNA GAR
+              </span>
+            </h3>
+            <p className="search__result-card__allotment__description">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quis explicabo, animi illum expedita molestias quae atque laboriosam consequatur
+              nulla error non delectus nesciunt id voluptatem quia nobis? Debitis, rerum!
+            </p>
+            <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">05-04-2026</div>
+                  </div>
+                  <div className="search__result-card__allotment__info">
+                    <span>
+                      <Icon name="ui-calendar" height={16} />
+                    </span>{' '}
+                    8 dagen -{' '}
+                    <span>
+                      <Icon name="ui-moon" height={16} />
+                    </span>
+                    7 nachten
+                  </div>
+                </div>
+              </div>
+              <div className="search__result-card__allotment__info">
+                <a href="#" type="button" className="search__result-card__allotment__info__group">
+                  Group
+                </a>
+                <div className="search__result-card__allotment__persons">
+                  <div className="search__result-card__allotment__person">
+                    <Icon name="ui-men" width={16} height={16} />
+                    <span>2 p.</span>
+                  </div>
+                  <div className="search__result-card__allotment__person">
+                    <Icon name="ui-women" width={16} height={16} />
+                    <span>3 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">€ 1.250,00 p.p.</div>
+              <div className="search__result-card__allotment__price__info">Gelieve € 450,00 zakgeld mee te nemen</div>
+            </div>
+            <button className="cta cta--select">Bekijk reis</button>
+          </div>
+        </div>
+      </div>
+      <div className="search__result-card">
+        <div className="search__result-card__allotment">
+          <div className="search__result-card__allotment__img-wrapper">
+            <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="search__result-card__allotment__img" />
+          </div>
+          <div className="search__result-card__allotment__title__wrapper">
+            <h3 className="search__result-card__allotment__title">Rondreis Timboektoe</h3>
+
+            <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">05-04-2026</div>
+                  </div>
+                  <div className="search__result-card__allotment__info">
+                    <span>
+                      <Icon name="ui-calendar" height={16} />
+                    </span>{' '}
+                    8 dagen -{' '}
+                    <span>
+                      <Icon name="ui-moon" height={16} />
+                    </span>
+                    7 nachten
+                  </div>
+                </div>
+              </div>
+              <div className="search__result-card__allotment__info">
+                <a href="#" type="button" className="search__result-card__allotment__info__group">
+                  Group
+                </a>
+                <div className="search__result-card__allotment__persons">
+                  <div className="search__result-card__allotment__person">
+                    <Icon name="ui-men" width={16} height={16} />
+                    <span>2 p.</span>
+                  </div>
+                  <div className="search__result-card__allotment__person">
+                    <Icon name="ui-women" width={16} height={16} />
+                    <span>3 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">€ 1.250,00 p.p.</div>
+              <div className="search__result-card__allotment__price__info">Gelieve € 450,00 zakgeld mee te nemen</div>
+            </div>
+            <button className="cta cta--select">Bekijk reis</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RoundTripResults;