@ticketboothapp/booking 1.2.24 → 1.2.25-rc.0

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/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/partner/PartnerBookingPage.module.css

@@ -0,0 +1,130 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 1.5rem 1rem 3rem;
+  background-color: var(--light-orange-background);
+}
+
+.card {
+  width: 100%;
+  max-width: 1120px;
+  background: var(--accent-white);
+  border-radius: 1rem;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.headerLeft {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.headerSpacer {
+  display: block;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.backButton {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  font-family: 'Figtree', sans-serif;
+  color: var(--accent-turquoise);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.backButton:hover {
+  text-decoration: underline;
+}
+
+.title {
+  font-size: 1.375rem;
+  font-weight: 700;
+  margin: 0;
+  justify-self: center;
+  text-align: center;
+}
+
+/* Book flow header (partner portal + provider dashboard embedded): matches marketing booking chrome */
+.titleBookFlow {
+  font-size: 1.375rem;
+  font-weight: 700;
+  margin: 0;
+  justify-self: center;
+  text-align: center;
+  font-family: 'Poppins', sans-serif;
+  color: var(--accent-orange, #ff4d00);
+}
+
+.titleBookPrefix,
+.titleBookProduct {
+  text-transform: lowercase;
+}
+
+.titleBookSeparator {
+  font-weight: 700;
+}
+
+.titleProductGrid {
+  font-size: 1.5rem;
+}
+
+.headerRight {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.logoRow {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1.25rem;
+  padding: 0.75rem 1.5rem 1rem;
+}
+
+.logoDivider {
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #9ca3af;
+}
+
+.partnerLogo,
+.viaViaLogo {
+  max-height: 100px;
+  width: auto;
+}
+
+.content {
+  padding: 1.25rem;
+}
+
+.contentEmbedded {
+  padding: 0;
+}
+
+@media (min-width: 1024px) {
+  .root {
+    padding-top: 2rem;
+  }
+}
+