@ticketboothapp/booking 0.1.20 → 0.1.22

package/src/components/button.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import './button.css';
+import Link from 'next/link';
+import { OPEN_BOOKING_FOR_PRODUCT } from '@/providers/booking-dialog-provider';
+
+enum ButtonHoverColor {
+  White = 'white',
+  Turquoise = 'turquoise',
+  Orange = 'orange'
+}
+
+enum PresetButtonActions {
+  BOOK_ALL = 'BOOK_ALL',
+  BOOK_MORAINE_LAKE_SUNRISE = 'BOOK_MORAINE_LAKE_SUNRISE',
+  BOOK_MORAINE_LAKE_SUNRISE_LAKE_LOUISE_GOLDEN_HOUR = 'BOOK_MORAINE_LAKE_SUNRISE_LAKE_LOUISE_GOLDEN_HOUR',
+  BOOK_TWO_LAKES_COMBO = 'BOOK_TWO_LAKES_COMBO',
+  BOOK_MORAINE_LAKE_ADVENTURE = 'BOOK_MORAINE_LAKE_ADVENTURE',
+  BOOK_LAKE_LOUISE_ADVENTURE = 'BOOK_LAKE_LOUISE_ADVENTURE',
+  BOOK_EMERALD_LAKE_ESCAPE = 'BOOK_EMERALD_LAKE_ESCAPE',
+  BOOK_PRIVATE_TOUR = 'BOOK_PRIVATE_TOUR',
+  BOOK_THEME_SUNRISE = 'BOOK_THEME_SUNRISE',
+  BOOK_THEME_MORAINE_LAKE = 'BOOK_THEME_MORAINE_LAKE',
+  BOOK_THEME_LAKE_LOUISE = 'BOOK_THEME_LAKE_LOUISE',
+}
+
+/** Maps preset booking actions to product slugs. null = open product grid. */
+const PRESET_ACTION_TO_PRODUCT_SLUG: Partial<Record<PresetButtonActions, string | null>> = {
+  [PresetButtonActions.BOOK_ALL]: null,
+  [PresetButtonActions.BOOK_MORAINE_LAKE_SUNRISE]: 'moraine-lake-sunrise',
+  [PresetButtonActions.BOOK_MORAINE_LAKE_SUNRISE_LAKE_LOUISE_GOLDEN_HOUR]: 'moraine-lake-sunrise-lake-louise-golden-hour',
+  [PresetButtonActions.BOOK_TWO_LAKES_COMBO]: 'two-lakes-combo',
+  [PresetButtonActions.BOOK_MORAINE_LAKE_ADVENTURE]: 'moraine-lake-adventure',
+  [PresetButtonActions.BOOK_LAKE_LOUISE_ADVENTURE]: 'lake-louise-adventure',
+  [PresetButtonActions.BOOK_EMERALD_LAKE_ESCAPE]: 'emerald-lake-escape',
+  [PresetButtonActions.BOOK_PRIVATE_TOUR]: 'private-tour',
+  [PresetButtonActions.BOOK_THEME_SUNRISE]: 'moraine-lake-sunrise-lake-louise-golden-hour',
+  [PresetButtonActions.BOOK_THEME_MORAINE_LAKE]: 'moraine-lake-sunrise-lake-louise-golden-hour',
+  [PresetButtonActions.BOOK_THEME_LAKE_LOUISE]: 'lake-louise-adventure',
+};
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+    variant?: 'primary' | 'secondary' | 'outline' | 'disabled';
+    hoverColor?: ButtonHoverColor;
+    isLarge?: boolean;
+    action?: ButtonAction;
+    shouldOpenInNewTab?: boolean;
+}
+
+type ButtonAction = PresetButtonActions | string;
+
+export default function Button({ 
+    children, 
+    variant = 'primary', 
+    className,
+    hoverColor = ButtonHoverColor.White,
+    isLarge = false,
+    action = '',
+    shouldOpenInNewTab = false,
+    ...props
+}: ButtonProps) {
+    const finalAction = getFinalAction(action);
+    const productSlug = getProductSlugForAction(action);
+    const isBookingAction = isModalActionType(action);
+    
+    const handleClick = () => {
+        if (isBookingAction) {
+            if (productSlug) {
+                window.dispatchEvent(new CustomEvent(OPEN_BOOKING_FOR_PRODUCT, { detail: { productId: productSlug } }));
+            } else {
+                window.dispatchEvent(new CustomEvent('openSimpleModal'));
+            }
+        }
+    };
+    
+    return (
+        <>
+            {isBookingAction ? (
+                <button
+                    onClick={handleClick}
+                    className={`button button-${variant} hover-${hoverColor} ${isLarge ? 'button-large' : ''} ${className}`}
+                    {...props}
+                >
+                    {children}
+                </button>
+            ) : finalAction ? (
+                <Link href={finalAction} target={shouldOpenInNewTab ? '_blank' : '_self'}>
+                    <button
+                        className={`button button-${variant} hover-${hoverColor} ${isLarge ? 'button-large' : ''} ${className}`}
+                        {...props}
+                    >
+                        {children}
+                    </button>
+                </Link>
+            ) : (
+                <button
+                    className={`button button-${variant} hover-${hoverColor} ${isLarge ? 'button-large' : ''} ${className}`}
+                    {...props}
+                >
+                    {children}
+                </button>
+            )}
+        </>
+    )
+}
+
+function isModalActionType(action: ButtonAction): boolean {
+    return Object.values(PresetButtonActions).includes(action as PresetButtonActions);
+}
+
+function getProductSlugForAction(action: ButtonAction): string | null | undefined {
+    if (Object.values(PresetButtonActions).includes(action as PresetButtonActions)) {
+        return PRESET_ACTION_TO_PRODUCT_SLUG[action as PresetButtonActions] ?? null;
+    }
+    return undefined;
+}
+
+function getFinalAction(action: ButtonAction) {
+    // Preset booking actions open the dialog (handled by handleClick)
+    if (Object.values(PresetButtonActions).includes(action as PresetButtonActions)) {
+        return null;
+    }
+    
+    // Handle regular URLs (http or relative paths)
+    if (typeof action === 'string' && (action.startsWith('http') || action.startsWith('/'))) {
+        return action;
+    }
+    
+    return null;
+}
+
+export { ButtonHoverColor, PresetButtonActions };
+
+interface MenuButtonProps {
+  onClick?: () => void;
+  isOpen?: boolean;
+  strings?: any;
+}
+
+export function MenuButton({ onClick, isOpen = false, strings }: MenuButtonProps) {
+  return (
+    <button className={`button button-menu ${isOpen ? 'open' : ''}`} onClick={onClick}>
+      <span className="menu-text">{strings.common.menu}</span>
+      <div className="menu-icon">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    </button>
+  );
+}

package/src/components/colorable-svg.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface ColorableSvgProps {
+    src: string;
+    className?: string;
+    width?: number;
+    height?: number;
+}
+
+export default function ColorableSvg({ src, className, width = 24, height = 24 }: ColorableSvgProps) {
+    const [svgContent, setSvgContent] = React.useState<string>('');
+
+    React.useEffect(() => {
+        fetch(src)
+            .then(res => res.text())
+            .then(text => {
+                // Replace both the style attribute and width/height attributes
+                const colorableSvg = text
+                    .replace(/style="[^"]*"/, 'style="fill: currentColor"')
+                    .replace(/width="[^"]*"/, `width="${width}"`)
+                    .replace(/height="[^"]*"/, `height="${height}"`);
+                setSvgContent(colorableSvg);
+            });
+    }, [src, width, height]);
+
+    return (
+        <div className={className} dangerouslySetInnerHTML={{ __html: svgContent }} />
+    );
+} 

package/src/components/image.css

@@ -0,0 +1,29 @@
+.image-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.image-natural {
+  position: relative;
+  width: 100%;
+  height: auto;
+}
+
+/* Make sure images are responsive within their containers */
+.image-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  /* This centers the image content vertically when cropped */
+  object-position: 50% 50%;
+}
+
+.image-natural img {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+} 

package/src/components/image.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import Image from 'next/image';
+import './image.css';
+
+interface ImageWidths {
+  mobile: number;
+  tablet: number; 
+  desktop: number;
+}
+
+interface ImageWidthsMap {
+  HERO: ImageWidths;
+  GALLERY: ImageWidths;
+  THUMBNAIL: ImageWidths;
+  MODAL: ImageWidths;
+}
+
+const IMAGE_WIDTHS: ImageWidthsMap = {
+  HERO: {
+    mobile: 768,
+    tablet: 1024,
+    desktop: 1920
+  },
+  GALLERY: {
+    mobile: 400,
+    tablet: 600,
+    desktop: 800
+  },
+  THUMBNAIL: {
+    mobile: 200,
+    tablet: 300,
+    desktop: 400
+  },
+  MODAL: {
+    mobile: 1024,
+    tablet: 1280,
+    desktop: 1920
+  }
+};
+
+type ImageContext = 'HERO' | 'GALLERY' | 'THUMBNAIL' | 'MODAL';
+
+interface ImageProps {
+  imageId: string;
+  context?: ImageContext;
+  alt: string;
+  className?: string;
+  maintainAspectRatio?: boolean;
+  style?: React.CSSProperties;
+}
+
+// Pre-compute sizes strings for each context to ensure consistency
+const SIZES = {
+  HERO: '(min-width: 1024px) 1920px, (min-width: 768px) 1024px, 768px',
+  GALLERY: '(min-width: 1024px) 800px, (min-width: 768px) 600px, 400px',
+  THUMBNAIL: '(min-width: 1024px) 400px, (min-width: 768px) 300px, 200px',
+  MODAL: '(min-width: 1024px) 1920px, (min-width: 768px) 1280px, 1024px'
+};
+
+// Pre-compute quality values
+const QUALITY = {
+  HERO: 85,
+  GALLERY: 75,
+  THUMBNAIL: 75,
+  MODAL: 85
+};
+
+const ViaViaImage = ({ 
+  className = '', 
+  imageId, 
+  context = 'THUMBNAIL', 
+  alt,
+  maintainAspectRatio = false,
+  style
+}: ImageProps) => {
+  const normalizedContext = context.toUpperCase() as ImageContext;
+  const widths = IMAGE_WIDTHS[normalizedContext];
+
+  if (maintainAspectRatio) {
+    return (
+      <div className={`image-container image-natural ${className}`}>
+        <Image
+          src={imageId}
+          alt={alt}
+          fill={false}
+          width={widths.desktop}
+          height={widths.desktop * 9 / 16}
+          sizes={SIZES[normalizedContext]}
+          priority={normalizedContext === 'HERO'}
+          quality={QUALITY[normalizedContext]}
+          style={{ width: '100%', height: 'auto', ...style }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={`image-container image-${normalizedContext.toLowerCase()} ${className}`}>
+      <Image
+        src={imageId}
+        alt={alt}
+        fill={true}
+        sizes={SIZES[normalizedContext]}
+        priority={normalizedContext === 'HERO'}
+        quality={QUALITY[normalizedContext]}
+        style={style}
+      />
+    </div>
+  );
+};
+
+export default ViaViaImage;

package/src/components/product-tag.module.css

@@ -0,0 +1,30 @@
+.tag {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.4rem 0.8rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    z-index: 4;
+    text-align: center;
+    line-height: 1.2;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    margin-bottom: 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Style variants */
+.most_popular {
+    background-color: var(--accent-orange);
+    color: white;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.custom {
+    /* Custom styles will be applied via inline styles */
+} 

package/src/components/product-tag.tsx

@@ -0,0 +1,34 @@
+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/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>
+    );
+}