@ticketboothapp/booking 0.1.10 → 0.1.12

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

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

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

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

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

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

@@ -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/client-bottom-sheet.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import BottomSheet from './bottom-sheet';
+import { useBottomSheet } from '@/hooks/use-bottom-sheet';
+
+export default function ClientBottomSheet() {
+  const { isOpen, content, closeSheet } = useBottomSheet();
+
+  return (
+    <BottomSheet isOpen={isOpen} onClose={closeSheet}>
+      {content}
+    </BottomSheet>
+  );
+} 

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/conditional-footer.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { useEmbeddedInIframe } from '@/hooks/useEmbeddedInIframe';
+import Footer from './footer';
+
+export default function ConditionalFooter() {
+    const pathname = usePathname();
+    const embeddedInIframe = useEmbeddedInIframe();
+
+    if (embeddedInIframe) {
+        return null;
+    }
+
+    // Hide footer on subscribe/unsubscribe and partner pages
+    if (
+      pathname === '/subscribe' ||
+      pathname === '/unsubscribe' ||
+      pathname === '/live-pickups' ||
+      pathname?.startsWith('/partner/') ||
+      pathname?.startsWith('/partners/')
+    ) {
+        return null;
+    }
+    
+    return <Footer />;
+}