@qite/tide-booking-component 1.4.123 → 1.4.125

package/src/content/components/slider.tsx

@@ -1,237 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import Icon from '../../shared/components/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/error/error.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import Icon from '../../shared/components/icon';
-
-type ErrorProps = {
-  message?: string;
-};
-const Error: React.FC<ErrorProps> = ({ message }) => {
-  return (
-    <section className="error">
-      <div className="error__container">
-        <div className="error__card">
-          <div className="error__icon">
-            <Icon name="ui-triangle-error" width={20} height={20} />
-          </div>
-          <h1 className="error__title">Something went wrong</h1>
-          <p className="error__message">{message || 'Sorry, something went wrong. Please try again later.'}</p>
-
-          <a href="/" className="cta cta--primary error__link">
-            Back to home
-          </a>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default Error;

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

@@ -1,48 +0,0 @@
-import React from 'react';
-import { FeaturedTrip } from './types';
-import Icon from '../../shared/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 +0,0 @@
-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 +0,0 @@
-export interface FeaturedTripsProps {
-  title: string;
-  cards: FeaturedTrip[];
-}
-
-export interface FeaturedTrip {
-  imageSrc: string;
-  imageAlt: string;
-  title: string;
-  location: string;
-  language?: string;
-  onButtonClick?: () => void;
-}