@qite/tide-booking-component 1.4.92 → 1.4.93

package/src/content/components/slider.tsx

@@ -1,237 +1,237 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import Icon from './icon';
-
-export interface SliderProps {
-  path?: string;
-  images: string[];
-  mode?: 'auto' | 'manual';
-  intervalMs?: number;
-  className?: string;
-}
-
-const DRAG_FRICTION = 0.9;
-
-const buildSrc = (path: string | undefined, img: string) => {
-  if (/^(https?:)?\/\//i.test(img) || img.startsWith('data:') || img.startsWith('blob:')) {
-    return img;
-  }
-
-  if (!path) return img;
-
-  const p = path.endsWith('/') ? path.slice(0, -1) : path;
-  const i = img.startsWith('/') ? img.slice(1) : img;
-
-  return `${p}/${i}`;
-};
-
-const Slider: React.FC<SliderProps> = ({ path, images, mode = 'manual', intervalMs = 3500, className = '' }) => {
-  const count = images.length;
-  if (count === 0) return null;
-
-  const renderedSlides = useMemo(() => {
-    if (count <= 1) return images;
-    return [images[count - 1], ...images, images[0]];
-  }, [images, count]);
-
-  const [trackIndex, setTrackIndex] = useState(count > 1 ? 1 : 0);
-  const [isAnimating, setIsAnimating] = useState(true);
-
-  const [dragX, setDragX] = useState(0);
-  const [isDragging, setIsDragging] = useState(false);
-
-  const timerRef = useRef<number | null>(null);
-  const pointerStartX = useRef(0);
-  const pointerIdRef = useRef<number | null>(null);
-
-  const viewportRef = useRef<HTMLDivElement | null>(null);
-  const [viewportWidth, setViewportWidth] = useState(0);
-
-  const transitionLockRef = useRef(false);
-
-  useEffect(() => {
-    const el = viewportRef.current;
-    if (!el) return;
-
-    const update = () => setViewportWidth(el.clientWidth);
-
-    update();
-
-    const ro = new ResizeObserver(() => update());
-    ro.observe(el);
-
-    return () => ro.disconnect();
-  }, []);
-
-  const sliderClass = useMemo(() => ['slider', mode === 'auto' ? 'slider--auto' : 'slider--manual', className].filter(Boolean).join(' '), [mode, className]);
-
-  const goNext = useCallback(() => {
-    if (count <= 1) return;
-    if (transitionLockRef.current) return;
-    transitionLockRef.current = true;
-    setIsAnimating(true);
-    setTrackIndex((i) => i + 1);
-  }, [count]);
-
-  const goPrev = useCallback(() => {
-    if (count <= 1) return;
-    if (transitionLockRef.current) return;
-    transitionLockRef.current = true;
-    setIsAnimating(true);
-    setTrackIndex((i) => i - 1);
-  }, [count]);
-
-  useEffect(() => {
-    if (mode !== 'auto' || count <= 1) return;
-
-    if (!isDragging) {
-      timerRef.current = window.setInterval(goNext, intervalMs);
-    }
-
-    return () => {
-      if (timerRef.current) {
-        window.clearInterval(timerRef.current);
-        timerRef.current = null;
-      }
-    };
-  }, [mode, intervalMs, count, isDragging, goNext]);
-
-  const onTransitionEnd = useCallback(() => {
-    if (count <= 1) return;
-    transitionLockRef.current = false;
-
-    if (trackIndex === renderedSlides.length - 1) {
-      setIsAnimating(false);
-      setTrackIndex(1);
-    } else if (trackIndex === 0) {
-      setIsAnimating(false);
-      setTrackIndex(renderedSlides.length - 2);
-    }
-  }, [count, trackIndex, renderedSlides.length]);
-
-  useEffect(() => {
-    if (isAnimating) return;
-    const id = window.setTimeout(() => setIsAnimating(true), 0);
-    return () => window.clearTimeout(id);
-  }, [isAnimating]);
-
-  const activeDot = useMemo(() => {
-    if (count <= 1) return 0;
-
-    let real = trackIndex - 1;
-    if (trackIndex === 0) real = count - 1;
-    if (trackIndex === renderedSlides.length - 1) real = 0;
-
-    return real;
-  }, [trackIndex, count, renderedSlides.length]);
-
-  const goToRealIndex = useCallback(
-    (realIndex: number) => {
-      if (count <= 1) return;
-      if (transitionLockRef.current) return;
-      transitionLockRef.current = true;
-      setIsAnimating(true);
-      setTrackIndex(realIndex + 1);
-    },
-    [count]
-  );
-
-  const onPointerDown = (e: React.PointerEvent) => {
-    if (count <= 1) return;
-    pointerIdRef.current = e.pointerId;
-    pointerStartX.current = e.clientX;
-    setIsDragging(true);
-    setDragX(0);
-    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
-  };
-
-  const onPointerMove = (e: React.PointerEvent) => {
-    if (!isDragging) return;
-    if (pointerIdRef.current !== e.pointerId) return;
-
-    const delta = (e.clientX - pointerStartX.current) * DRAG_FRICTION;
-    setDragX(delta);
-  };
-
-  const endDrag = (e: React.PointerEvent) => {
-    if (!isDragging) return;
-    if (pointerIdRef.current !== e.pointerId) return;
-
-    try {
-      (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
-    } catch {}
-
-    const delta = dragX;
-
-    setIsDragging(false);
-    setDragX(0);
-    pointerIdRef.current = null;
-
-    const threshold = viewportWidth > 0 ? viewportWidth * 0.12 : 60;
-
-    if (Math.abs(delta) >= threshold) {
-      if (delta < 0) goNext();
-      else goPrev();
-    }
-  };
-
-  const x = -(trackIndex * viewportWidth) + (isDragging ? dragX : 0);
-
-  const trackStyle: React.CSSProperties = {
-    transform: `translate3d(${x}px, 0, 0)`,
-    transition: isDragging || !isAnimating ? 'none' : undefined
-  };
-
-  return (
-    <section className={sliderClass} aria-roledescription="carousel" aria-label="Image slider">
-      <div className="slider__container">
-        <div
-          className="slider__viewport"
-          ref={viewportRef}
-          onPointerDown={onPointerDown}
-          onPointerMove={onPointerMove}
-          onPointerUp={endDrag}
-          onPointerCancel={endDrag}
-          role="group"
-          aria-label="Slides">
-          <div className="slider__track" style={trackStyle as any} onTransitionEnd={onTransitionEnd}>
-            {renderedSlides.map((img, i) => {
-              const realIndex = count <= 1 ? 0 : i === 0 ? count - 1 : i === renderedSlides.length - 1 ? 0 : i - 1;
-
-              return (
-                <div className="slider__slide" key={`${img}-${i}`}>
-                  <img className="slider__img" src={buildSrc(path, img)} alt={`Slide ${realIndex + 1} of ${count}`} draggable={false} />
-                </div>
-              );
-            })}
-          </div>
-        </div>
-
-        {mode === 'manual' && count > 1 && (
-          <div className="slider__controls">
-            <button type="button" className="slider__btn slider__btn--prev" onClick={goPrev} aria-label="Previous slide">
-              <Icon name="ui-chevron" width={24} height={24} />
-            </button>
-
-            <div className="slider__dots">
-              {images.map((_, i) => (
-                <button
-                  key={i}
-                  className={`slider__dot ${i === activeDot ? 'is-active' : ''}`}
-                  onClick={() => goToRealIndex(i)}
-                  aria-label={`Go to slide ${i + 1}`}
-                  aria-current={i === activeDot ? 'true' : undefined}
-                />
-              ))}
-            </div>
-
-            <button type="button" className="slider__btn slider__btn--next" onClick={goNext} aria-label="Next slide">
-              <Icon name="ui-chevron" width={24} height={24} />
-            </button>
-          </div>
-        )}
-      </div>
-    </section>
-  );
-};
-
-export default Slider;
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Icon from './icon';
+
+export interface SliderProps {
+  path?: string;
+  images: string[];
+  mode?: 'auto' | 'manual';
+  intervalMs?: number;
+  className?: string;
+}
+
+const DRAG_FRICTION = 0.9;
+
+const buildSrc = (path: string | undefined, img: string) => {
+  if (/^(https?:)?\/\//i.test(img) || img.startsWith('data:') || img.startsWith('blob:')) {
+    return img;
+  }
+
+  if (!path) return img;
+
+  const p = path.endsWith('/') ? path.slice(0, -1) : path;
+  const i = img.startsWith('/') ? img.slice(1) : img;
+
+  return `${p}/${i}`;
+};
+
+const Slider: React.FC<SliderProps> = ({ path, images, mode = 'manual', intervalMs = 3500, className = '' }) => {
+  const count = images.length;
+  if (count === 0) return null;
+
+  const renderedSlides = useMemo(() => {
+    if (count <= 1) return images;
+    return [images[count - 1], ...images, images[0]];
+  }, [images, count]);
+
+  const [trackIndex, setTrackIndex] = useState(count > 1 ? 1 : 0);
+  const [isAnimating, setIsAnimating] = useState(true);
+
+  const [dragX, setDragX] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const timerRef = useRef<number | null>(null);
+  const pointerStartX = useRef(0);
+  const pointerIdRef = useRef<number | null>(null);
+
+  const viewportRef = useRef<HTMLDivElement | null>(null);
+  const [viewportWidth, setViewportWidth] = useState(0);
+
+  const transitionLockRef = useRef(false);
+
+  useEffect(() => {
+    const el = viewportRef.current;
+    if (!el) return;
+
+    const update = () => setViewportWidth(el.clientWidth);
+
+    update();
+
+    const ro = new ResizeObserver(() => update());
+    ro.observe(el);
+
+    return () => ro.disconnect();
+  }, []);
+
+  const sliderClass = useMemo(() => ['slider', mode === 'auto' ? 'slider--auto' : 'slider--manual', className].filter(Boolean).join(' '), [mode, className]);
+
+  const goNext = useCallback(() => {
+    if (count <= 1) return;
+    if (transitionLockRef.current) return;
+    transitionLockRef.current = true;
+    setIsAnimating(true);
+    setTrackIndex((i) => i + 1);
+  }, [count]);
+
+  const goPrev = useCallback(() => {
+    if (count <= 1) return;
+    if (transitionLockRef.current) return;
+    transitionLockRef.current = true;
+    setIsAnimating(true);
+    setTrackIndex((i) => i - 1);
+  }, [count]);
+
+  useEffect(() => {
+    if (mode !== 'auto' || count <= 1) return;
+
+    if (!isDragging) {
+      timerRef.current = window.setInterval(goNext, intervalMs);
+    }
+
+    return () => {
+      if (timerRef.current) {
+        window.clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [mode, intervalMs, count, isDragging, goNext]);
+
+  const onTransitionEnd = useCallback(() => {
+    if (count <= 1) return;
+    transitionLockRef.current = false;
+
+    if (trackIndex === renderedSlides.length - 1) {
+      setIsAnimating(false);
+      setTrackIndex(1);
+    } else if (trackIndex === 0) {
+      setIsAnimating(false);
+      setTrackIndex(renderedSlides.length - 2);
+    }
+  }, [count, trackIndex, renderedSlides.length]);
+
+  useEffect(() => {
+    if (isAnimating) return;
+    const id = window.setTimeout(() => setIsAnimating(true), 0);
+    return () => window.clearTimeout(id);
+  }, [isAnimating]);
+
+  const activeDot = useMemo(() => {
+    if (count <= 1) return 0;
+
+    let real = trackIndex - 1;
+    if (trackIndex === 0) real = count - 1;
+    if (trackIndex === renderedSlides.length - 1) real = 0;
+
+    return real;
+  }, [trackIndex, count, renderedSlides.length]);
+
+  const goToRealIndex = useCallback(
+    (realIndex: number) => {
+      if (count <= 1) return;
+      if (transitionLockRef.current) return;
+      transitionLockRef.current = true;
+      setIsAnimating(true);
+      setTrackIndex(realIndex + 1);
+    },
+    [count]
+  );
+
+  const onPointerDown = (e: React.PointerEvent) => {
+    if (count <= 1) return;
+    pointerIdRef.current = e.pointerId;
+    pointerStartX.current = e.clientX;
+    setIsDragging(true);
+    setDragX(0);
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+  };
+
+  const onPointerMove = (e: React.PointerEvent) => {
+    if (!isDragging) return;
+    if (pointerIdRef.current !== e.pointerId) return;
+
+    const delta = (e.clientX - pointerStartX.current) * DRAG_FRICTION;
+    setDragX(delta);
+  };
+
+  const endDrag = (e: React.PointerEvent) => {
+    if (!isDragging) return;
+    if (pointerIdRef.current !== e.pointerId) return;
+
+    try {
+      (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+    } catch {}
+
+    const delta = dragX;
+
+    setIsDragging(false);
+    setDragX(0);
+    pointerIdRef.current = null;
+
+    const threshold = viewportWidth > 0 ? viewportWidth * 0.12 : 60;
+
+    if (Math.abs(delta) >= threshold) {
+      if (delta < 0) goNext();
+      else goPrev();
+    }
+  };
+
+  const x = -(trackIndex * viewportWidth) + (isDragging ? dragX : 0);
+
+  const trackStyle: React.CSSProperties = {
+    transform: `translate3d(${x}px, 0, 0)`,
+    transition: isDragging || !isAnimating ? 'none' : undefined
+  };
+
+  return (
+    <section className={sliderClass} aria-roledescription="carousel" aria-label="Image slider">
+      <div className="slider__container">
+        <div
+          className="slider__viewport"
+          ref={viewportRef}
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onPointerUp={endDrag}
+          onPointerCancel={endDrag}
+          role="group"
+          aria-label="Slides">
+          <div className="slider__track" style={trackStyle as any} onTransitionEnd={onTransitionEnd}>
+            {renderedSlides.map((img, i) => {
+              const realIndex = count <= 1 ? 0 : i === 0 ? count - 1 : i === renderedSlides.length - 1 ? 0 : i - 1;
+
+              return (
+                <div className="slider__slide" key={`${img}-${i}`}>
+                  <img className="slider__img" src={buildSrc(path, img)} alt={`Slide ${realIndex + 1} of ${count}`} draggable={false} />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {mode === 'manual' && count > 1 && (
+          <div className="slider__controls">
+            <button type="button" className="slider__btn slider__btn--prev" onClick={goPrev} aria-label="Previous slide">
+              <Icon name="ui-chevron" width={24} height={24} />
+            </button>
+
+            <div className="slider__dots">
+              {images.map((_, i) => (
+                <button
+                  key={i}
+                  className={`slider__dot ${i === activeDot ? 'is-active' : ''}`}
+                  onClick={() => goToRealIndex(i)}
+                  aria-label={`Go to slide ${i + 1}`}
+                  aria-current={i === activeDot ? 'true' : undefined}
+                />
+              ))}
+            </div>
+
+            <button type="button" className="slider__btn slider__btn--next" onClick={goNext} aria-label="Next slide">
+              <Icon name="ui-chevron" width={24} height={24} />
+            </button>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default Slider;

package/src/content/featured-trips/featured-trip-card.tsx

@@ -1,48 +1,48 @@
-import React from 'react';
-import { FeaturedTrip } from './types';
-import Icon from '../components/icon';
-import { getTranslations } from '../../shared/utils/localization-util';
-
-const FeaturedTripCard: React.FC<FeaturedTrip> = ({ imageSrc, imageAlt, title, location, language, onButtonClick }) => {
-  const translations = getTranslations(language ?? 'en-GB');
-
-  return (
-    <div className="image-card">
-      <img src={imageSrc} alt={imageAlt} className="image-card__image" />
-      <div className="image-card__content">
-        <div className="image-card__top">
-          <h3 className="image-card__title">{title}</h3>
-          <div className="image-card__options">
-            <div className="image-card__option">
-              <Icon name="ui-location" width={16} height={16} />
-              <span>{location}</span>
-            </div>
-            {/* <div className="image-card__option">
-              <Icon name="ui-moon" width={16} height={16} />
-              <span>2 nights</span>
-            </div>
-            <div className="image-card__option">
-              <Icon name="ui-plane" width={16} height={16} />
-              <span>3 transports</span>
-            </div> */}
-          </div>
-          {/* <p className="image__card__description">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nulla aliquam, quis accusantium quae inventore, accusamus cumque culpa, quasi officia magnam suscipit laboriosam. Velit eveniet, id modi aperiam natus veritatis.
-          </p> */}
-        </div>
-        <div className="image-card__bottom">
-          {/* <div className="image-card__price">
-            From
-            <p className="image-card__price--amount">$899</p>
-            Per Person
-          </div> */}
-          <button className="cta cta--select" onClick={onButtonClick}>
-            {translations.PRODUCT.BOOK_NOW}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default FeaturedTripCard;
+import React from 'react';
+import { FeaturedTrip } from './types';
+import Icon from '../components/icon';
+import { getTranslations } from '../../shared/utils/localization-util';
+
+const FeaturedTripCard: React.FC<FeaturedTrip> = ({ imageSrc, imageAlt, title, location, language, onButtonClick }) => {
+  const translations = getTranslations(language ?? 'en-GB');
+
+  return (
+    <div className="image-card">
+      <img src={imageSrc} alt={imageAlt} className="image-card__image" />
+      <div className="image-card__content">
+        <div className="image-card__top">
+          <h3 className="image-card__title">{title}</h3>
+          <div className="image-card__options">
+            <div className="image-card__option">
+              <Icon name="ui-location" width={16} height={16} />
+              <span>{location}</span>
+            </div>
+            {/* <div className="image-card__option">
+              <Icon name="ui-moon" width={16} height={16} />
+              <span>2 nights</span>
+            </div>
+            <div className="image-card__option">
+              <Icon name="ui-plane" width={16} height={16} />
+              <span>3 transports</span>
+            </div> */}
+          </div>
+          {/* <p className="image__card__description">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nulla aliquam, quis accusantium quae inventore, accusamus cumque culpa, quasi officia magnam suscipit laboriosam. Velit eveniet, id modi aperiam natus veritatis.
+          </p> */}
+        </div>
+        <div className="image-card__bottom">
+          {/* <div className="image-card__price">
+            From
+            <p className="image-card__price--amount">$899</p>
+            Per Person
+          </div> */}
+          <button className="cta cta--select" onClick={onButtonClick}>
+            {translations.PRODUCT.BOOK_NOW}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FeaturedTripCard;

package/src/content/featured-trips/index.tsx

@@ -1,19 +1,19 @@
-import React from 'react';
-import { FeaturedTripsProps } from './types';
-import { isEmpty } from 'lodash';
-import FeaturedTripCard from './featured-trip-card';
-
-const FeaturedTrips: React.FC<FeaturedTripsProps> = ({ title, cards }) => {
-  return (
-    <div className="content">
-      <div className="content__container">
-        <div className="content__title__row">
-          <h2 className="content__title">{title}</h2>
-        </div>
-        <div className="content__colums content__colums--4">{!isEmpty(cards) && cards.map((card, idx) => <FeaturedTripCard key={idx} {...card} />)}</div>
-      </div>
-    </div>
-  );
-};
-
-export default FeaturedTrips;
+import React from 'react';
+import { FeaturedTripsProps } from './types';
+import { isEmpty } from 'lodash';
+import FeaturedTripCard from './featured-trip-card';
+
+const FeaturedTrips: React.FC<FeaturedTripsProps> = ({ title, cards }) => {
+  return (
+    <div className="content">
+      <div className="content__container">
+        <div className="content__title__row">
+          <h2 className="content__title">{title}</h2>
+        </div>
+        <div className="content__colums content__colums--4">{!isEmpty(cards) && cards.map((card, idx) => <FeaturedTripCard key={idx} {...card} />)}</div>
+      </div>
+    </div>
+  );
+};
+
+export default FeaturedTrips;

package/src/content/featured-trips/types.ts

@@ -1,13 +1,13 @@
-export interface FeaturedTripsProps {
-  title: string;
-  cards: FeaturedTrip[];
-}
-
-export interface FeaturedTrip {
-  imageSrc: string;
-  imageAlt: string;
-  title: string;
-  location: string;
-  language?: string;
-  onButtonClick?: () => void;
-}
+export interface FeaturedTripsProps {
+  title: string;
+  cards: FeaturedTrip[];
+}
+
+export interface FeaturedTrip {
+  imageSrc: string;
+  imageAlt: string;
+  title: string;
+  location: string;
+  language?: string;
+  onButtonClick?: () => void;
+}