@ticketboothapp/booking 0.1.19 → 0.1.22

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>
-    );
-} 

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

@@ -1,122 +0,0 @@
-.productTile {
-    height: 100%;
-    width: 100%;
-    text-decoration: none;
-    position: relative;
-    margin-top: var(--spacing-large);
-}
-
-.card {
-    width: 100%;
-    height: 380px;
-    perspective: 1000px;
-    cursor: pointer;
-}
-
-.cardInner {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    transition: transform 0.6s;
-    transform-style: preserve-3d;
-}
-
-.card.isFlipped .cardInner {
-    transform: rotateY(180deg);
-}
-
-.cardFaceFront,
-.cardFaceBack {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-}
-
-.productTileImageContainer {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    border-radius: var(--border-radius-small);
-    overflow: hidden;
-    border: 10px solid var(--accent-orange);
-    box-sizing: border-box;
-}
-
-.cardFaceFront {
-    transform: rotateY(0deg);
-}
-
-.cardFaceBack {
-    transform: rotateY(180deg);
-    height: 380px;
-    background: var(--grey-text-dark-70);
-    border-radius: var(--border-radius-small);
-}
-
-.productTilePillValuesView {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-}
-
-.productTileImage {
-    width: 100%;
-    height: 100%;
-    position: relative;
-}
-
-.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: 8px;
-    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);
-}
-
-.productStartTime {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    color: #FFFFFF;
-    font-family: 'Northlake', sans-serif;
-    font-weight: 400;
-    font-size: 2.5rem;
-    text-align: right;
-    z-index: 2;
-    line-height: 0.8;
-} 
-
-.backCardProductTileButton {
-    margin-top: var(--spacing-small);
-}

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

@@ -1,89 +0,0 @@
-'use client';
-import { Product } from "@/constants/products"
-import ViaViaImage from "../image"
-import styles from "./image-only-product-tile-mobile.module.css"
-import { PillVariant } from "../value-pill"
-import ValuePill from "../value-pill"
-import Button from "../button";
-import defaultStrings from "@/strings";
-import ProductTag from "../product-tag";
-import { OPEN_BOOKING_FOR_PRODUCT } from "@/providers/booking-dialog-provider";
-
-export default function ProductTileMobile({ 
-    product, 
-    isFlipped, 
-    onFlip,
-    strings = defaultStrings
-}: { 
-    product: Product;
-    isFlipped: boolean;
-    onFlip: () => void;
-    strings?: any;
-}) {
-    const handleClick = (e: React.MouseEvent) => {
-        e.preventDefault();
-        onFlip();
-    };
-
-    const handleMoreInfo = (e: React.MouseEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        window.dispatchEvent(
-            new CustomEvent(OPEN_BOOKING_FOR_PRODUCT, { detail: { productId: product.id } })
-        );
-    };
-
-    return (
-        <div className={styles.productTile} onClick={handleClick}>
-            <div className={`${styles.card} ${isFlipped ? styles.isFlipped : ''}`}>
-                <div className={styles.cardInner}>
-                    <div className={styles.cardFaceFront}>
-                        <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>
-                    </div>
-                    <div className={styles.cardFaceBack}>
-                        <div className={styles.productTilePillValuesView}>
-                            {product.pillValues.map((pillValue, index) => (
-                                <ValuePill 
-                                    key={`${pillValue.label}-${index}`}
-                                    variant={PillVariant.solid} 
-                                    pillValue={pillValue} 
-                                />
-                            ))}
-                            <Button 
-                                variant="outline" 
-                                className={styles.backCardProductTileButton}
-                                action=""
-                                onClick={handleMoreInfo}
-                            >
-                                {strings.common.moreInfo}
-                            </Button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-} 

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

@@ -1,44 +0,0 @@
-'use client';
-import { Product } from "@/constants/products"
-import { useState, useEffect } from "react";
-import ProductTileDesktop from "./image-only-product-tile-desktop";
-import ProductTileMobile from "./image-only-product-tile-mobile";
-
-export default function ProductTile({ 
-    product,
-    flippedProductId,
-    onFlip,
-    strings
-}: { 
-    product: Product;
-    flippedProductId?: string;
-    onFlip?: (productId: string) => void;
-    strings?: any;
-}) {
-    const [isMobile, setIsMobile] = useState(false); // Default to desktop view
-    const [hasMounted, setHasMounted] = useState(false);
-
-    useEffect(() => {
-        setHasMounted(true);
-        const checkMobile = () => setIsMobile(window.innerWidth < 1025);
-        checkMobile();
-        window.addEventListener('resize', checkMobile);
-        return () => window.removeEventListener('resize', checkMobile);
-    }, []);
-
-    // Always render desktop version for SEO/initial render
-    if (!hasMounted) {
-        return <ProductTileDesktop product={product} strings={strings} />;
-    }
-
-    return isMobile ? (
-        <ProductTileMobile 
-            product={product} 
-            isFlipped={flippedProductId === product.id}
-            onFlip={() => onFlip?.(product.id)}
-            strings={strings}
-        />
-    ) : (
-        <ProductTileDesktop product={product} strings={strings} />
-    );
-}