@ticketboothapp/booking 0.1.19 → 0.1.20

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

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

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

@@ -1,67 +0,0 @@
-"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>
-    )
-}

package/src/components/product-theme-pages/top-of-fold.module.css

@@ -1,179 +0,0 @@
-.topOfFold {
-    position: relative;
-    width: 100vw;
-    overflow: hidden;
-  }
-
-  .heroImageWrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 2;
-  }
-
-  .heroCenterText {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 3;
-    pointer-events: none;
-    font-size: 3rem;
-    line-height: 0.7;
-    font-weight: 900;
-    color: #fff;
-    text-shadow: 0 0 8px rgba(0,0,0,0.4);
-    font-family: 'Snell Roundhand', sans-serif;
-    text-transform: lowercase;
-    text-align: center;
-  }
-
-  .heroOverlayContent {
-    position: absolute;
-    top: 7rem;
-    bottom: 4rem;
-    left: 0.5rem;
-    right: 0.5rem;
-    left: 0;
-    width: 100%;
-    z-index: 2;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-  }
-  
-  .heroTopContent {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    display: flex;
-    justify-content: center;
-  }
-  
-  .heroBottomContent {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  
-  .heroTitle {
-    color: var(--accent-white);
-    font-size: 5rem;
-    line-height: 1.2;
-    text-align: center;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-    text-transform: none;
-  }
-
-  .heroSubtitle {
-    color: var(--accent-white);
-    font-size: 2rem;
-    text-align: center;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-  }
-
-  .closureOverlayBackdrop {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(3px);
-    z-index: 3;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .seasonClosureCallout {
-    width: 90%;
-    max-width: 500px;
-    z-index: 4;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    gap: 0.5rem;
-    pointer-events: none;
-  }
-
-  .seasonClosureCallout * {
-    pointer-events: auto;
-  }
-
-  .closureOverlayTop {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    gap: 0.1rem;
-  }
-
-  .closureOverlayBottom {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-  }
-
-  .closureTitle {
-    font-size: 4rem;
-    line-height: 0.7;
-    font-weight: 900;
-    color: #fff;
-    text-shadow: 0 0 8px rgba(0,0,0,0.4);
-    font-family: 'Snell Roundhand', sans-serif;
-    text-transform: lowercase;
-    text-align: center;
-    margin-bottom: -0.2rem;
-  }
-
-  .closureSubtitle {
-    font-size: 1.8rem;
-    line-height: 1;
-    font-weight: 400;
-    color: #fff;
-    text-shadow: 0 0 8px rgba(0,0,0,0.4);
-    letter-spacing: 0.5px;
-    font-family: 'Northlake', sans-serif;
-    text-transform: lowercase;
-    text-align: center;
-  }
-
-  .closureSubSubtitle {
-    font-size: 1.2rem;
-    line-height: 1.1;
-    font-weight: 400;
-    color: #fff;
-    text-shadow: 0 0 8px rgba(0,0,0,0.4);
-    letter-spacing: 0.5px;
-    font-family: 'Northlake', sans-serif;
-    text-transform: lowercase;
-    text-align: center;
-  }
-
-  @media (min-width: 1024px) {
-    .topOfFold {
-      height: calc(100vh - 98px);
-    }
-  }
-
-  @media (max-width: 1023px) {
-    .heroTitle {
-      font-size: 3rem;
-    }
-
-    .heroSubtitle {
-      font-size: 1.2rem;
-    }
-    
-    .topOfFold {
-      height: 100vh;
-    }
-  }

package/src/components/product-theme-pages/top-of-fold.tsx

@@ -1,80 +0,0 @@
-"use client";
-
-import styles from './top-of-fold.module.css';
-import { ImageData } from '@/constants/images';
-import HeroImage from '@/components/hero-image';
-import strings from '@/strings';
-import Button, { PresetButtonActions } from '@/components/button';
-import GoogleReviewSummary from '@/components/google-review-summary';
-import SeasonClosureOverlay from '@/components/season-closure-overlay';
-import {
-    OPEN_BOOKING_FOR_PRODUCT,
-    OPEN_BOOKING_WITH_FILTER,
-    type ProductGridFilterId,
-} from '@/providers/booking-dialog-provider';
-import { useIsBookingLaunchLive } from '@/hooks/useIsBookingLaunchLive';
-
-export interface TopOfFoldProps {
-    image: ImageData;
-    title: string;
-    subtitle: string;
-    /** Open product grid with this filter pre-applied (e.g. 'moraine-lake', 'sunrise'). */
-    bookFilterId?: ProductGridFilterId;
-    /** Product slug to open directly. Use when page has a single primary product. */
-    bookProductSlug?: string;
-    /** Fallback when neither bookFilterId nor bookProductSlug (e.g. home page). */
-    bookButtonAction?: PresetButtonActions;
-}
-
-export default function TopOfFold(props: TopOfFoldProps) {
-    const { image, title, subtitle, bookFilterId, bookProductSlug, bookButtonAction = PresetButtonActions.BOOK_ALL } = props;
-    const isLaunchLive = useIsBookingLaunchLive();
-
-    const handleBookClick = () => {
-        if (bookFilterId) {
-            window.dispatchEvent(new CustomEvent(OPEN_BOOKING_WITH_FILTER, { detail: { filterId: bookFilterId } }));
-        } else if (bookProductSlug) {
-            window.dispatchEvent(new CustomEvent(OPEN_BOOKING_FOR_PRODUCT, { detail: { productId: bookProductSlug } }));
-        } else {
-            window.dispatchEvent(new CustomEvent('openSimpleModal'));
-        }
-    };
-
-    const hasCustomBookAction = bookFilterId || bookProductSlug;
-
-    return (
-        <div className={`${styles.topOfFold} global-top-fold`}>
-            {isLaunchLive && <div className={styles.heroCenterText}>{strings.home.hero.centerCallout}</div>}
-            <div className={styles.heroImageWrapper}>
-                <HeroImage 
-                    imageId={image.id}
-                    alt={image.alt}
-                />
-            </div>
-
-            <div className={styles.heroOverlayContent}>
-                <div className={styles.heroTopContent}>
-                    <h1 className={styles.heroTitle}>{title}</h1>
-                    <h2 className={styles.heroSubtitle}>{subtitle}</h2>
-                </div>
-                
-                <div className={styles.heroBottomContent}>
-                    <GoogleReviewSummary strings={strings} />
-                    {hasCustomBookAction ? (
-                        <button
-                            type="button"
-                            onClick={handleBookClick}
-                            className="button button-primary hover-white button-large"
-                        >
-                            {strings.common.bookNow}
-                        </button>
-                    ) : (
-                        <Button isLarge={true} action={bookButtonAction}>{strings.common.bookNow}</Button>
-                    )}
-                </div>
-            </div>
-            
-            {!isLaunchLive && <SeasonClosureOverlay strings={strings} />}
-        </div>
-    );
-}

package/src/components/product-tile/image-only-product-tile-desktop.module.css

@@ -1,106 +0,0 @@
-.productTile {
-    height: 100%;
-    width: 100%;
-    text-decoration: none;
-    position: relative;
-    cursor: pointer;
-}
-
-.productTileImageContainer {
-    width: 100%;
-    height: 420px;
-    position: relative;
-    border-radius: 10px;
-    overflow: hidden;
-}
-
-.productTileImage {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    transition: transform 0.3s ease-in-out;
-    will-change: transform;
-}
-
-.productTile:hover .productTileImage {
-    transform: scale(1.1);
-}
-
-.productTileImage::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 30%;
-    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
-    z-index: 1;
-}
-
-.productTileContentOverlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    padding: var(--spacing-medium);
-    z-index: 2;
-    display: flex;
-    flex-direction: column;
-}
-
-.productTileTags {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-small);
-}
-
-.productTileTitle {
-    margin: 0;
-    color: white;
-    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-    line-height: 1.0;
-}
-
-.productStartTime {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    color: #FFFFFF;
-    font-family: 'Northlake', sans-serif;
-    font-weight: 400;
-    font-size: 3rem;
-    text-align: right;
-    z-index: 2;
-    line-height: 0.8;
-    transform: translateZ(0);
-    backface-visibility: hidden;
-    -webkit-font-smoothing: antialiased;
-    will-change: transform;
-}
-
-.productTilePillValuesView {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    opacity: 0;
-    transition: opacity 0.3s;
-    background: rgba(0, 0, 0, 0.7);
-    z-index: 3;
-}
-
-.productTileImageContainer:hover .productTilePillValuesView {
-    opacity: 1;
-}
-
-.productTile:hover .productStartTime,
-.productTile:hover .productTileTitle {
-    opacity: 0;
-    transition: opacity 0.3s ease-in-out;
-} 

package/src/components/product-tile/image-only-product-tile-desktop.tsx

@@ -1,56 +0,0 @@
-"use client";
-
-import { Product } from "@/constants/products"
-import ViaViaImage from "../image"
-import styles from "./image-only-product-tile-desktop.module.css"
-import { PillVariant } from "../value-pill"
-import ValuePill from "../value-pill"
-import ProductTag from "../product-tag"
-import { OPEN_BOOKING_FOR_PRODUCT } from "@/providers/booking-dialog-provider"
-
-export default function ProductTileDesktop({ product, strings }: { product: Product; strings?: any }) {
-    const handleClick = (e: React.MouseEvent) => {
-        e.preventDefault();
-        window.dispatchEvent(
-            new CustomEvent(OPEN_BOOKING_FOR_PRODUCT, { detail: { productId: product.id } })
-        );
-    };
-
-    return (
-        <div onClick={handleClick} className={styles.productTile} style={{ cursor: 'pointer' }}>
-            <div className={styles.productTileImageContainer}>
-                <ViaViaImage
-                    className={styles.productTileImage}
-                    imageId={product.images[0].id}
-                    alt={product.images[0].alt}
-                    context="GALLERY"
-                />
-                <div className={styles.productTileContentOverlay}>
-                    {/* Render tags if they exist */}
-                    {product.tags && (
-                        <div className={styles.productTileTags}>
-                            {product.tags.map((tag, index) => (
-                                <ProductTag
-                                    key={`${tag.text}-${index}`}
-                                    text={tag.text}
-                                    style={tag.style}
-                                />
-                            ))}
-                        </div>
-                    )}
-                    <h3 className={styles.productTileTitle}>{product.shortName}</h3>
-                </div>
-                <span className={styles.productStartTime} dangerouslySetInnerHTML={{ __html: product.currentStartTime }} />
-                <div className={styles.productTilePillValuesView}>
-                    {product.pillValues.map((pillValue, index) => (
-                        <ValuePill 
-                            key={`${pillValue.label}-${index}`}
-                            variant={PillVariant.overlay} 
-                            pillValue={pillValue} 
-                        />
-                    ))}
-                </div>
-            </div>
-        </div>
-    );
-}