@ticketboothapp/booking 1.2.25-rc.0 → 1.2.27

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

package/src/components/colorable-svg.tsx

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

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

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

@@ -1,130 +0,0 @@
-.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;
-  }
-}
-