@ticketboothapp/booking 0.1.19 → 0.1.20

package/src/components/analytics/CookieConsentBanner.tsx

@@ -1,102 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { usePathname } from 'next/navigation';
-import { useEmbeddedInIframe } from '@/hooks/useEmbeddedInIframe';
-import { updateAnalyticsConsent } from './AnalyticsScripts';
-import { ENV, isLocalhost, isProduction, isStaging } from '@/lib/env';
-import Link from 'next/link';
-import './CookieConsentBanner.css';
-
-const CONSENT_KEY = 'cookie-consent';
-
-/** Show banner when we load GA4/Meta (production), or on localhost/staging for testing. */
-function shouldShowBanner(): boolean {
-  const hasAnalyticsIds = !!ENV.GA4_MEASUREMENT_ID || !!ENV.META_PIXEL_ID;
-  if (isProduction() && !isLocalhost() && hasAnalyticsIds) return true;
-  if (isLocalhost() || isStaging()) return true; // show for testing
-  return false;
-}
-
-export function CookieConsentBanner() {
-  const pathname = usePathname();
-  const embeddedInIframe = useEmbeddedInIframe();
-  const [mounted, setMounted] = useState(false);
-  const [showBanner, setShowBanner] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  useEffect(() => {
-    if (!mounted || typeof window === 'undefined') return;
-    if (!shouldShowBanner()) return;
-    try {
-      // On localhost/staging: always show for testing. On production: only when user hasn't accepted.
-      const alwaysShowForTesting = isLocalhost() || isStaging();
-      const stored = localStorage.getItem(CONSENT_KEY);
-      setShowBanner(alwaysShowForTesting || stored !== 'granted');
-    } catch {
-      setShowBanner(true);
-    }
-  }, [mounted]);
-
-  // Signal to other UI (e.g. floating book button) that banner is visible, so they can position above it
-  useEffect(() => {
-    if (typeof document === 'undefined') return;
-    if (showBanner && !embeddedInIframe && pathname !== '/live-pickups') {
-      document.body.dataset.cookieBannerVisible = 'true';
-    } else {
-      delete document.body.dataset.cookieBannerVisible;
-    }
-    return () => {
-      delete document.body.dataset.cookieBannerVisible;
-    };
-  }, [showBanner, embeddedInIframe, pathname]);
-
-  const handleAccept = () => {
-    updateAnalyticsConsent(true);
-    setShowBanner(false);
-  };
-
-  const handleDecline = () => {
-    try {
-      localStorage.setItem(CONSENT_KEY, 'denied');
-    } catch {
-      /* ignore */
-    }
-    setShowBanner(false);
-  };
-
-  if (embeddedInIframe || pathname === '/live-pickups' || !showBanner || !mounted) return null;
-
-  return (
-    <div
-      className="cookieConsentBanner"
-      role="dialog"
-      aria-label="Cookie consent"
-    >
-      <div className="cookieConsentBannerInner">
-        <p className="cookieConsentBannerText">
-          Accept to approve the use of cookies for analytics and advertising. See our <Link href="/privacy-policy" className="cookieConsentBannerLink">privacy policy</Link> for details.
-        </p>
-        <div className="cookieConsentBannerButtons">
-          <button
-            type="button"
-            onClick={handleDecline}
-            className="cookieConsentBannerDecline"
-          >
-            Decline
-          </button>
-          <button
-            type="button"
-            onClick={handleAccept}
-            className="cookieConsentBannerAccept"
-          >
-            Accept
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/bottom-sheet.module.css

@@ -1,78 +0,0 @@
-.container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  pointer-events: none;
-}
-
-.overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--accent-orange-70);
-  pointer-events: auto;
-  backdrop-filter: blur(4px);
-}
-
-.overlayVisible {
-  opacity: 1;
-}
-
-.sheet {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 24px 24px 0 0;
-  pointer-events: auto;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  margin: 0;
-  padding: 0;
-}
-
-.sheetOpen {
-  transform: translateY(0);
-}
-
-.header {
-  position: sticky;
-  top: 0;
-  background: transparent;
-  backdrop-filter: blur(8px);
-  display: flex;
-  justify-content: center;
-  z-index: 1;
-  padding: 1rem 0;
-}
-
-.closeButton {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  border: none;
-  background: var(--accent-orange);
-  color: white;
-  font-size: 24px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.content {
-  flex: 1;
-  padding: 1rem 1rem 0 1rem;
-  background: var(--light-orange-background);
-  border-radius: 24px 24px 0 0;
-  overflow-y: auto;
-} 

package/src/components/bottom-sheet.tsx

@@ -1,60 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import styles from './bottom-sheet.module.css';
-import { motion, animate } from "motion/react";
-
-interface BottomSheetProps {
-  isOpen: boolean;
-  onClose: () => void;
-  children: React.ReactNode;
-}
-
-export default function BottomSheet({ isOpen, onClose, children }: BottomSheetProps) {
-  const [isAnimating, setIsAnimating] = useState(isOpen);
-
-  useEffect(() => {
-    if (!isOpen) return;
-
-    setIsAnimating(true);
-    document.body.style.overflow = 'hidden';
-    animate(".bottom-sheet", { y: ["100%", "0%"] }, { duration: 0.5 });
-    animate(".overlay", { opacity: [0, 1] }, { duration: 0.3 });
-
-    return () => {
-      document.body.style.overflow = 'unset';
-    };
-  }, [isOpen]);
-
-  useEffect(() => {
-    if (!isOpen && isAnimating) {
-      animate(".bottom-sheet", { y: ["0%", "100%"] }, { duration: 0.5 });
-      animate(".overlay", { opacity: [1, 0] }, { duration: 0.3 });
-      const timer = setTimeout(() => setIsAnimating(false), 500);
-      return () => clearTimeout(timer);
-    }
-  }, [isOpen, isAnimating]);
-
-  if (!isOpen && !isAnimating) return null;
-
-  return (
-    <div className={styles.container}>
-      <motion.div 
-        className={`${styles.overlay} overlay`}
-        onClick={onClose}
-      />
-      <motion.div 
-        className={`${styles.sheet} bottom-sheet`}
-      >
-        <div className={styles.header}>
-          <button className={styles.closeButton} onClick={onClose}>
-            <span>×</span>
-          </button>
-        </div>
-        <div className={styles.content}>
-          {children}
-        </div>
-      </motion.div>
-    </div>
-  );
-} 

package/src/components/breadcrumb.module.css

@@ -1,40 +0,0 @@
-.breadcrumb {
-    padding: 1rem 0;
-    margin: 0 auto;
-    max-width: var(--max-content-width);
-}
-
-.breadcrumb ol {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.25rem;
-}
-
-.breadcrumb li {
-    display: flex;
-    align-items: center;
-    color: var(--primary-text);
-}
-
-.breadcrumb li:not(:last-child)::after {
-    content: '/';
-    margin: 0 0.25rem;
-    color: var(--secondary-text);
-}
-
-.breadcrumb a {
-    color: var(--primary-text);
-    text-decoration: none;
-    transition: color 0.2s ease;
-}
-
-.breadcrumb a:hover {
-    color: var(--accent-turquoise);
-}
-
-.breadcrumb span {
-    color: var(--grey-text);
-} 

package/src/components/breadcrumb.tsx

@@ -1,36 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import styles from './breadcrumb.module.css';
-
-export default function Breadcrumb() {
-    const pathname = usePathname();
-    const paths = pathname.split('/').filter(Boolean);
-    
-    return (
-        <nav className={styles.breadcrumb} aria-label="Breadcrumb">
-            <ol>
-                <li>
-                    <Link href="/">Home</Link>
-                </li>
-                {paths.map((path, index) => {
-                    const href = `/${paths.slice(0, index + 1).join('/')}`;
-                    const isLast = index === paths.length - 1;
-                    
-                    return (
-                        <li key={href}>
-                            {isLast ? (
-                                <span>{path.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}</span>
-                            ) : (
-                                <Link href={href}>
-                                    {path.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
-                                </Link>
-                            )}
-                        </li>
-                    );
-                })}
-            </ol>
-        </nav>
-    );
-} 

package/src/components/button.css

@@ -1,245 +0,0 @@
-.button {
-  padding: 8px 16px;
-  border-radius: 24px;
-  border: none;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-  font-weight: 500;
-  position: relative;
-  overflow: hidden;
-  z-index: 1;
-  font-family: 'Poppins', sans-serif;
-  font-weight: 700;
-  text-transform: lowercase;
-  display: inline-block;
-}
-
-.button-primary {
-  background-color: var(--accent-orange);
-  color: var(--accent-white);
-}
-
-.button-secondary {
-  background-color: var(--accent-white);
-  color: var(--accent-orange);
-}
-
-.button-disabled {
-  background-color: var(--grey-text);
-  color: var(--accent-white);
-  cursor: not-allowed;
-}
-
-.button-disabled:hover {
-  background-color: var(--grey-text);
-  color: var(--accent-white) !important;
-}
-
-.button-outline {
-  background-color: transparent;
-  color: var(--accent-white);
-  border: 2px solid var(--accent-white);
-  box-sizing: border-box;
-  padding: 6px 14px;
-}
-
-.button-large {
-  font-size: 1.2rem;
-  padding: 1rem 2rem;
-  border-radius: 40px;
-}
-
-/* Desktop hover */
-@media (min-width: 1024px) {
-  .button::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    border-radius: 24px;
-    transition: all 0.3s ease-in-out;
-    z-index: -1;
-  }
-
-  .button-primary:hover::before {
-    left: 0;
-  }
-
-  .button-primary.hover-white::before {
-    background-color: var(--accent-white);
-  }
-
-  .button-primary.hover-turquoise::before {
-    background-color: var(--accent-turquoise);
-  }
-
-  .button-primary.hover-orange::before {
-    background-color: var(--accent-orange);
-  }
-
-  .button-primary.hover-orange:hover {
-    color: var(--accent-white);
-  }
-
-  .button-primary.hover-turquoise:hover {
-    color: var(--accent-white);
-  }
-
-  .button-secondary:hover::before {
-    left: 0;
-  }
-
-  .button-secondary::before {
-    background-color: var(--accent-turquoise);
-  }
-
-  .button-secondary.hover-orange::before {
-    background-color: var(--accent-orange);
-  }
-
-  .button-secondary.hover-orange:hover {
-    color: var(--accent-white) !important;
-  }
-
-  .button-secondary:hover {
-    color: var(--accent-white) !important;
-  }
-
-  .button-outline::before {
-    background-color: var(--accent-white);
-  }
-
-  .button-outline:hover::before {
-    left: 0;
-  }
-
-  .button:hover {
-    color: var(--accent-orange);
-  }
-}
-
-/* Focus state for accessibility */
-.button:focus {
-  outline: 2px solid var(--accent-orange);
-  outline-offset: 2px;
-}
-
-.button-menu {
-  background-color: var(--accent-orange);
-  border-radius: 50px;
-  padding: 8px 20px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.button-menu .menu-text {
-  color: white;
-  font-weight: 400;
-  text-transform: lowercase;
-  font-size: 0.8rem;
-  padding: 0.2rem;
-}
-
-.button-menu .menu-icon {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  position: relative;
-  width: 12px;
-  height: 12px;
-  transition: transform 0.3s ease;
-}
-
-.button-menu .menu-icon span {
-  display: block;
-  width: 12px;
-  height: 1.5px;
-  background-color: white;
-  border-radius: 2px;
-  position: absolute;
-  transition: transform 0.3s ease, opacity 0.3s ease;
-}
-
-/* Position the lines */
-.button-menu .menu-icon span:nth-child(1) {
-  top: 0;
-}
-
-.button-menu .menu-icon span:nth-child(2) {
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.button-menu .menu-icon span:nth-child(3) {
-  bottom: 0;
-}
-
-/* X animation when open with full rotation */
-.button-menu.open .menu-icon {
-  transform: rotate(360deg);
-}
-
-.button-menu.open .menu-icon span:nth-child(1) {
-  top: 50%;
-  transform: translateY(-50%) rotate(45deg);
-}
-
-.button-menu.open .menu-icon span:nth-child(2) {
-  opacity: 0;
-}
-
-.button-menu.open .menu-icon span:nth-child(3) {
-  top: 50%;
-  transform: translateY(-50%) rotate(-45deg);
-}
-
-/* Override booking-flow-preflight so Button component styles apply inside the booking flow */
-.booking-flow-preflight button.button {
-  padding: 8px 16px;
-  border-radius: 24px;
-  border: none;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-  font-weight: 700;
-  position: relative;
-  overflow: hidden;
-  z-index: 1;
-  font-family: 'Poppins', sans-serif;
-  text-transform: lowercase;
-  display: inline-block;
-}
-
-.booking-flow-preflight button.button-primary {
-  background-color: var(--accent-orange);
-  color: var(--accent-white);
-}
-
-.booking-flow-preflight button.button-secondary {
-  background-color: var(--accent-white);
-  color: var(--accent-orange);
-}
-
-.booking-flow-preflight button.button-disabled {
-  background-color: var(--grey-text);
-  color: var(--accent-white);
-  cursor: not-allowed;
-}
-
-.booking-flow-preflight button.button-outline {
-  background-color: transparent;
-  color: var(--accent-white);
-  border: 2px solid var(--accent-white);
-  box-sizing: border-box;
-  padding: 6px 14px;
-}
-
-.booking-flow-preflight button.button-large {
-  font-size: 1.2rem;
-  padding: 1rem 2rem;
-  border-radius: 40px;
-} 

package/src/components/button.tsx

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