@ticketboothapp/booking 0.1.19 → 0.1.20

package/src/components/product-tag.tsx

@@ -1,34 +0,0 @@
-import styles from './product-tag.module.css';
-
-export enum ProductTagStyle {
-    MOST_POPULAR = 'MOST_POPULAR',
-    CUSTOM = 'CUSTOM',
-}
-
-interface ProductTagProps {
-    text: string;
-    style: ProductTagStyle;
-    backgroundColor?: string;
-    textColor?: string;
-}
-
-export default function ProductTag({ 
-    text, 
-    style, 
-    backgroundColor, 
-    textColor
-}: ProductTagProps) {
-    const customStyles = style === ProductTagStyle.CUSTOM ? {
-        backgroundColor: backgroundColor || '#000000',
-        color: textColor || '#ffffff',
-    } : {};
-
-    return (
-        <div 
-            className={`${styles.tag} ${styles[style.toLowerCase()]}`}
-            style={customStyles}
-        >
-            {text}
-        </div>
-    );
-} 

package/src/components/product-theme-pages/best-option.module.css

@@ -1,70 +0,0 @@
-.bestOptionContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding-top: var(--spacing-large);
-    padding-bottom: var(--spacing-large);
-    padding-left: var(--spacing-small);
-    padding-right: var(--spacing-small);
-}
-
-.otherOptionsRow {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-    justify-content: center;
-}
-
-.bestOptionProductsRowWrapper {
-    width: 100%;
-    max-width: 1200px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.bestOptionProductsRow {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1rem;
-    width: 100%;
-}
-
-/* Tablet breakpoint - 2 tiles per row */
-@media (min-width: 768px) {
-    .bestOptionProductsRow {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}
-
-/* Desktop breakpoint - 3 tiles per row */
-@media (min-width: 1024px) {
-    .bestOptionProductsRow {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-        gap: 1rem;
-        max-width: 1200px;
-        margin: 0 auto;
-    }
-    
-    .bestOptionProductsRow > * {
-        flex: 0 0 calc(33.333% - 0.67rem);
-        max-width: calc(33.333% - 0.67rem);
-    }
-}
-
-.bestOptionProductsRow > a {
-    text-decoration: none;
-    color: inherit;
-}
-
-.bestOptionBottomContainer {
-    padding-top: var(--spacing-large);
-}
-
-.bestOptionBottomTitle {
-    color: var(--primary-text);
-    font-size: 1.2rem;
-}

package/src/components/product-theme-pages/best-option.tsx

@@ -1,35 +0,0 @@
-"use client";
-
-import defaultStrings from "@/strings";
-import styles from "./best-option.module.css";
-import { Product } from "@/constants/products";
-import Link from "next/link";
-import ProductTileCard from "../product-tile/product-tile-card";
-
-export default function BestOption({ bestOptionProducts, otherProductThemePages, strings = defaultStrings }: { bestOptionProducts: Product[], otherProductThemePages: { title: string, path: string }[], strings?: any }) {
-    return (
-        <div className={styles.bestOptionContainer}>
-            {bestOptionProducts.length > 0 ? (
-                <>
-                    <h2>{strings.productThemePages.bestOption.title}</h2>
-                    <div className={styles.bestOptionProductsRowWrapper}>
-                        <div className={styles.bestOptionProductsRow}>
-                            {bestOptionProducts.map((product) => (
-                                <ProductTileCard key={product.id} product={product} strings={strings} />
-                            ))}
-                        </div>
-                    </div>
-                </>
-            ) : null}
-            
-            <div className={styles.bestOptionBottomContainer}>
-                <h3 className={styles.bestOptionBottomTitle}>{strings.productThemePages.bestOption.bottomTitle}</h3>
-                <div className={styles.otherOptionsRow}>
-                    {otherProductThemePages.map((page) => (
-                        <Link href={page.path} key={page.title}>{page.title}</Link>
-                    ))}
-                </div>
-            </div>
-        </div>
-    );
-}

package/src/components/product-theme-pages/extended-tour-options.module.css

@@ -1,22 +0,0 @@
-.container {
-    border: 4px dashed var(--accent-turquoise-60);
-    padding: 1rem;
-}
-
-.description {
-    text-align: center;
-}
-
-@media (max-width: 1023px) {
-    .container {
-        margin: 0 auto;
-        width: 70%;
-    }
-}
-
-@media (min-width: 1024px) {
-    .container {
-        margin: 2rem auto;
-        width: 50%;
-    }
-}

package/src/components/product-theme-pages/extended-tour-options.tsx

@@ -1,11 +0,0 @@
-import styles from "./extended-tour-options.module.css";
-import strings from "@/strings";
-
-export default function ExtendedTourOptions() {
-    return (
-        <div className={styles.container}>
-            <h4>{strings.productThemePages.extendedTourOptions.title}</h4>
-            <p dangerouslySetInnerHTML={{ __html: strings.productThemePages.extendedTourOptions.description }} className={styles.description} />
-        </div>
-    )
-}

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

@@ -1,248 +0,0 @@
-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

@@ -1,200 +0,0 @@
-.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;
-}