@ticketboothapp/booking 0.1.11 → 0.1.13

package/src/components/product-theme-pages/image-modal.tsx

@@ -0,0 +1,248 @@
+import { ImageData } from "@/constants/images";
+import ViaViaImage from "@/components/image";
+import styles from "./photo-gallery.module.css";
+import { useEffect, useCallback, useRef, useState } from "react";
+
+const SWIPE_THRESHOLD = 0.2; // 20% of width to trigger navigation
+const DESKTOP_BREAKPOINT = 1024;
+
+function useIsDesktop() {
+    const [isDesktop, setIsDesktop] = useState(true); // default to desktop (no swipe) to avoid flash
+    useEffect(() => {
+        const mq = window.matchMedia(`(min-width: ${DESKTOP_BREAKPOINT}px)`);
+        setIsDesktop(mq.matches);
+        const handler = () => setIsDesktop(mq.matches);
+        mq.addEventListener("change", handler);
+        return () => mq.removeEventListener("change", handler);
+    }, []);
+    return isDesktop;
+}
+
+interface ImageModalProps {
+    selectedImage: ImageData;
+    currentIndex: number;
+    totalImages: number;
+    /** Full images array - required for swipe-to-slide effect */
+    images: ImageData[];
+    onClose: () => void;
+    onNext: () => void;
+    onPrevious: () => void;
+    /** Override z-index for overlay (e.g. when inside a dialog with high z-index) */
+    overlayZIndex?: number;
+}
+
+export default function ImageModal({
+    selectedImage,
+    currentIndex,
+    totalImages,
+    images,
+    onClose,
+    onNext,
+    onPrevious,
+    overlayZIndex = 1000,
+}: ImageModalProps) {
+    const isDesktop = useIsDesktop();
+    const trackRef = useRef<HTMLDivElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [dragOffset, setDragOffset] = useState(0);
+    const [containerWidth, setContainerWidth] = useState(400);
+    const [isDragging, setIsDragging] = useState(false);
+    const touchStartX = useRef(0);
+    const touchStartOffset = useRef(0);
+    const dragOffsetRef = useRef(0);
+    dragOffsetRef.current = dragOffset;
+
+    const handleKeyDown = useCallback((e: KeyboardEvent) => {
+        switch (e.key) {
+            case 'Escape':
+                e.stopImmediatePropagation();
+                onClose();
+                break;
+            case 'ArrowLeft':
+                onPrevious();
+                break;
+            case 'ArrowRight':
+                onNext();
+                break;
+        }
+    }, [onClose, onPrevious, onNext]);
+
+    const handleTouchStart = useCallback((e: React.TouchEvent) => {
+        touchStartX.current = e.touches[0].clientX;
+        touchStartOffset.current = dragOffset;
+        setIsDragging(true);
+    }, [dragOffset]);
+
+    const handleTouchMove = useCallback((e: React.TouchEvent) => {
+        if (!isDragging || !containerRef.current) return;
+        const delta = e.touches[0].clientX - touchStartX.current;
+        const containerWidth = containerRef.current.offsetWidth;
+        let newOffset = touchStartOffset.current + delta;
+        const maxDrag = containerWidth * 0.5;
+        if (currentIndex === 0 && newOffset > 0) newOffset = newOffset * 0.3;
+        else if (currentIndex === totalImages - 1 && newOffset < 0) newOffset = newOffset * 0.3;
+        else newOffset = Math.max(-maxDrag, Math.min(maxDrag, newOffset));
+        setDragOffset(newOffset);
+    }, [isDragging, currentIndex, totalImages]);
+
+    const handleTouchEnd = useCallback(() => {
+        if (!containerRef.current) return;
+        setIsDragging(false);
+        const width = containerRef.current.offsetWidth;
+        const offset = dragOffsetRef.current;
+        const threshold = width * SWIPE_THRESHOLD;
+        if (offset > threshold && currentIndex > 0) {
+            setDragOffset(0);
+            onPrevious();
+        } else if (offset < -threshold && currentIndex < totalImages - 1) {
+            setDragOffset(0);
+            onNext();
+        } else {
+            setDragOffset(0);
+        }
+    }, [currentIndex, totalImages, onNext, onPrevious]);
+
+    const handleMouseDown = useCallback((e: React.MouseEvent) => {
+        touchStartX.current = e.clientX;
+        touchStartOffset.current = dragOffset;
+        setIsDragging(true);
+    }, [dragOffset]);
+
+    useEffect(() => {
+        if (isDesktop) return;
+        const handleMouseMove = (e: MouseEvent) => {
+            if (!isDragging || !containerRef.current) return;
+            const delta = e.clientX - touchStartX.current;
+            const width = containerRef.current.offsetWidth;
+            let newOffset = touchStartOffset.current + delta;
+            const maxDrag = width * 0.5;
+            if (currentIndex === 0 && newOffset > 0) newOffset = newOffset * 0.3;
+            else if (currentIndex === totalImages - 1 && newOffset < 0) newOffset = newOffset * 0.3;
+            else newOffset = Math.max(-maxDrag, Math.min(maxDrag, newOffset));
+            setDragOffset(newOffset);
+        };
+        const handleMouseUp = () => {
+            if (!containerRef.current) return;
+            setIsDragging(false);
+            const width = containerRef.current.offsetWidth;
+            const offset = dragOffsetRef.current;
+            const threshold = width * SWIPE_THRESHOLD;
+            if (offset > threshold && currentIndex > 0) {
+                setDragOffset(0);
+                onPrevious();
+            } else if (offset < -threshold && currentIndex < totalImages - 1) {
+                setDragOffset(0);
+                onNext();
+            } else {
+                setDragOffset(0);
+            }
+        };
+        if (isDragging) {
+            window.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseup', handleMouseUp);
+        }
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isDesktop, isDragging, currentIndex, totalImages, onNext, onPrevious]);
+
+    useEffect(() => {
+        window.addEventListener('keydown', handleKeyDown, { capture: true });
+        return () => window.removeEventListener('keydown', handleKeyDown, { capture: true });
+    }, [handleKeyDown]);
+
+    useEffect(() => {
+        setDragOffset(0);
+    }, [currentIndex]);
+
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el) return;
+        const updateWidth = () => setContainerWidth(el.offsetWidth);
+        updateWidth();
+        const ro = new ResizeObserver(updateWidth);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+
+    const translateX = -currentIndex * containerWidth + dragOffset;
+
+    return (
+        <div
+            className={styles.modalOverlay}
+            onClick={onClose}
+            style={{ zIndex: overlayZIndex }}
+        >
+            <button className={styles.closeButton} onClick={onClose} aria-label="Close">
+                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M18 6L6 18M6 6l12 12" />
+                </svg>
+            </button>
+            <button 
+                className={`${styles.navButton} ${styles.prevButton}`}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    onPrevious();
+                }}
+                disabled={currentIndex === 0}
+                aria-label="Previous image"
+                style={{ background: 'rgba(255,255,255,0.25)' }}
+            >
+                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M15 18l-6-6 6-6" />
+                </svg>
+            </button>
+            <div
+                ref={containerRef}
+                className={`${styles.modalImageContainer} ${isDesktop ? styles.modalImageContainerDesktop : ''}`}
+                onTouchStart={handleTouchStart}
+                onTouchMove={handleTouchMove}
+                onTouchEnd={handleTouchEnd}
+                onTouchCancel={handleTouchEnd}
+                onMouseDown={isDesktop ? undefined : handleMouseDown}
+                onClick={(e) => e.stopPropagation()}
+            >
+                <div
+                    ref={trackRef}
+                    className={styles.modalImageTrack}
+                    style={{
+                        width: `${totalImages * 100}%`,
+                        transform: `translateX(${translateX}px)`,
+                        transition: isDragging ? 'none' : 'transform 0.3s ease-out',
+                    }}
+                >
+                    {images.map((img, i) => (
+                        <div
+                            key={img.id + i}
+                            className={styles.modalImageSlide}
+                            style={{ flex: `0 0 ${100 / totalImages}%` }}
+                        >
+                            <ViaViaImage
+                                imageId={img.id}
+                                alt={img.alt}
+                                context="MODAL"
+                                className={styles.modalImage}
+                                maintainAspectRatio={true}
+                            />
+                        </div>
+                    ))}
+                </div>
+            </div>
+            <button 
+                className={`${styles.navButton} ${styles.nextButton}`}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    onNext();
+                }}
+                disabled={currentIndex === totalImages - 1}
+                aria-label="Next image"
+                style={{ background: 'rgba(255,255,255,0.25)' }}
+            >
+                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M9 18l6-6-6-6" />
+                </svg>
+            </button>
+        </div>
+    );
+} 

package/src/components/product-theme-pages/photo-gallery.module.css

@@ -0,0 +1,200 @@
+.photoGallery {
+    width: 100%;
+    max-width: 1200px;
+    margin: 2rem auto 0 auto;  /* top right bottom left */
+    padding: 0 1rem;
+    box-sizing: border-box;
+}
+
+.grid {
+    display: grid;
+    gap: 1rem;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.photoItem {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1;  /* Square aspect ratio */
+    cursor: zoom-in;
+    overflow: hidden;
+}
+
+.galleryImage {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: all 0.3s ease;
+}
+
+@media (min-width: 1024px) {
+    .grid {
+        grid-template-columns: repeat(5, 1fr);  /* 5 columns on large screens */
+    }
+
+    .photoItem::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.2);  /* Dark overlay */
+        transition: opacity 0.3s ease;
+        pointer-events: none;
+    }
+
+    .photoItem:hover::after {
+        opacity: 0;  /* Fade out the overlay on hover */
+    }
+
+    .navButton:hover {
+        opacity: 1;
+    }
+}
+
+@media (max-width: 1023px) {
+    .grid {
+        grid-template-columns: repeat(3, 1fr);  /* 3 columns on mobile */
+        gap: 0.5rem;
+    }
+
+    .photoGallery {
+        padding: 0 0.5rem;
+    }
+}
+
+.modalOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.9);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    cursor: zoom-out;
+    padding: 2rem;
+}
+
+.modalImageContainer {
+    position: relative;
+    width: 100%;
+    max-width: min(92vw, 1400px);
+    overflow: hidden;
+    overflow-x: clip;
+    touch-action: pan-y;
+    cursor: grab;
+}
+
+.modalImageContainer:active {
+    cursor: grabbing;
+}
+
+.modalImageContainerDesktop {
+    cursor: default;
+}
+
+.modalImageContainerDesktop:active {
+    cursor: default;
+}
+
+.modalImageTrack {
+    display: flex;
+    will-change: transform;
+    flex-shrink: 0;
+}
+
+.modalImageSlide {
+    flex-shrink: 0;
+    min-width: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    width: 100%;
+}
+
+.modalImage {
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    width: 100% !important;
+    margin: 0 auto !important;
+}
+
+.modalImage img {
+    max-width: min(92vw, 1400px) !important;
+    max-height: 85vh !important;
+    width: auto !important;
+    height: auto !important;
+    object-fit: contain !important;
+}
+
+.closeButton {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    color: white;
+    cursor: pointer;
+    z-index: 1001;
+    padding: 12px;
+    outline: none !important;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.navButton {
+    position: fixed;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    background: rgba(255, 255, 255, 0.2);
+    border: none;
+    border-radius: 50%;
+    color: white;
+    cursor: pointer;
+    padding: 0;
+    opacity: 1;
+    transition: opacity 0.2s, background 0.2s;
+    z-index: 1002;
+    -webkit-tap-highlight-color: transparent;
+    user-select: none;
+    -webkit-touch-callout: none;
+    outline: none !important;
+}
+
+/* Only apply hover effect on desktop */
+@media (min-width: 1024px) {
+    .navButton:hover {
+        opacity: 1;
+    }
+}
+
+.navButton:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}
+
+.prevButton {
+    left: 16px;
+}
+
+.nextButton {
+    right: 16px;
+}
+
+.closeButton:hover {
+    opacity: 0.8;
+}

package/src/components/product-theme-pages/photo-gallery.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { ImageData } from "@/constants/images";
+import ViaViaImage from "@/components/image";
+import styles from "./photo-gallery.module.css";
+import { useState, lazy, Suspense, useEffect } from "react";
+
+// Lazy load the modal component
+const ImageModal = lazy(() => import('@/components/product-theme-pages/image-modal'));
+
+interface PhotoGalleryProps {
+    photos: ImageData[];
+}
+
+export default function PhotoGallery({ photos }: PhotoGalleryProps) {
+    const [selectedImage, setSelectedImage] = useState<ImageData | null>(null);
+    const [currentIndex, setCurrentIndex] = useState<number>(0);
+    const [isMobile, setIsMobile] = useState(false);
+    const [isClient, setIsClient] = useState(false);
+
+    useEffect(() => {
+        setIsClient(true);
+        setIsMobile(window.innerWidth <= 1023);
+
+        const handleResize = () => {
+            setIsMobile(window.innerWidth <= 1023);
+        };
+
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    // Only show first 9 photos on mobile
+    const displayPhotos = isClient && isMobile ? photos.slice(0, 9) : photos;
+
+    const handleImageClick = (photo: ImageData) => {
+        const index = photos.findIndex(p => p.id === photo.id);
+        setCurrentIndex(index);
+        setSelectedImage(photo);
+    };
+
+    return (
+        <>
+            <div className={styles.photoGallery}>
+                <div className={styles.grid}>
+                    {displayPhotos.map((photo) => (
+                        <div 
+                            key={photo.id} 
+                            className={styles.photoItem}
+                            onClick={() => handleImageClick(photo)}
+                        >
+                            <ViaViaImage
+                                imageId={photo.id}
+                                alt={photo.alt}
+                                context="GALLERY"
+                                className={styles.galleryImage}
+                            />
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            {selectedImage && (
+                <Suspense fallback={<div className={styles.modalOverlay}>Loading...</div>}>
+                    <ImageModal
+                        selectedImage={selectedImage}
+                        currentIndex={currentIndex}
+                        totalImages={photos.length}
+                        images={photos}
+                        onClose={() => setSelectedImage(null)}
+                        onNext={() => {
+                            if (currentIndex < photos.length - 1) {
+                                const newIndex = currentIndex + 1;
+                                setCurrentIndex(newIndex);
+                                setSelectedImage(photos[newIndex]);
+                            }
+                        }}
+                        onPrevious={() => {
+                            if (currentIndex > 0) {
+                                const newIndex = currentIndex - 1;
+                                setCurrentIndex(newIndex);
+                                setSelectedImage(photos[newIndex]);
+                            }
+                        }}
+                    />
+                </Suspense>
+            )}
+        </>
+    );
+}

package/src/components/product-theme-pages/product-theme-page-layout.module.css

@@ -0,0 +1,13 @@
+.productThemePageLayout {
+    background-color: var(--light-orange-background);
+}
+
+.titleSubtitle {
+    max-width: 1200px;
+    padding: var(--spacing-medium);
+    margin: 0 auto;
+}
+
+.reviewHighlightsSection {
+    margin-top: var(--spacing-large);
+}

package/src/components/product-theme-pages/product-theme-page-layout.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import TopOfFold from "@/components/product-theme-pages/top-of-fold";
+import { TopOfFoldProps } from "@/components/product-theme-pages/top-of-fold";
+import TitleSubtitle from "../title-subtitle";
+import defaultStrings from "@/strings";
+import styles from "./product-theme-page-layout.module.css";
+import { VALUE_PROPS_KEYS } from "@/constants/value-props";
+import ValueProps from "@/components/value-props";
+import ReviewHighlightsSection from "@/components/review-highlights-section";
+import MapSection from "../map-section";
+import FAQWrapper from "@/components/faq-wrapper";
+import { faqSection } from "@/constants/faq";
+import Navbar from "@/components/navbar";
+import BestOption from "./best-option";
+import { Product } from "@/constants/products";
+import { pageJsonLd } from "@/constants/json-ld/page-json-ld";
+import { organizationJsonLd } from "@/constants/json-ld/organization-json-ld";
+import { aggregateRatingJsonLd } from "@/constants/json-ld/review-json-ld";
+import PhotoGallery from "./photo-gallery";
+import { ImageData } from "@/constants/images";
+import ExtendedTourOptions from "./extended-tour-options";
+
+interface ProductThemePageLayoutProps {
+    topOfFoldProps: TopOfFoldProps;
+    description: string;
+    photoGalleryPhotos: ImageData[];
+    includeExtendedTourOptions: boolean;
+    valuePropsKeys: VALUE_PROPS_KEYS[];
+    valuePropsTitle?: string;
+    faqSection: faqSection;
+    bestOptionProducts: Product[];
+    otherProductThemePages: { title: string, path: string }[];
+    productJsonLd: any[];
+}
+
+export default function ProductThemePageLayout(props: ProductThemePageLayoutProps & { strings?: any }) {
+    const { topOfFoldProps, description, photoGalleryPhotos, includeExtendedTourOptions, valuePropsKeys, valuePropsTitle, faqSection, bestOptionProducts, otherProductThemePages, strings = defaultStrings } = props;
+    return (
+        <div>
+            <Navbar stickyMode="showAndStickyOrMobileOverlap"/>
+            <TopOfFold {...topOfFoldProps} />
+            <div className={styles.productThemePageLayout}>
+                <TitleSubtitle
+                    className={styles.titleSubtitle}
+                    title={strings.productThemePages.title}
+                    subtitle={strings.productThemePages.subtitle}
+                    description={description}
+                />
+                {includeExtendedTourOptions && <ExtendedTourOptions />}
+                <ValueProps filterKeys={valuePropsKeys} title={valuePropsTitle} strings={strings} />
+                {photoGalleryPhotos && photoGalleryPhotos.length > 0 && (
+                    <PhotoGallery photos={photoGalleryPhotos} />
+                )}
+                <BestOption bestOptionProducts={bestOptionProducts} otherProductThemePages={otherProductThemePages} strings={strings} />
+                <FAQWrapper faqSection={faqSection} strings={strings} />
+                <ReviewHighlightsSection className={styles.reviewHighlightsSection} strings={strings} />
+                <MapSection title={strings.productThemePages.mapSection.title} />
+            </div>
+
+            <script
+              type="application/ld+json"
+              dangerouslySetInnerHTML={{ __html: JSON.stringify(pageJsonLd([organizationJsonLd, aggregateRatingJsonLd, ...props.productJsonLd])) }}
+            />
+        </div>
+    )
+}