@ticketboothapp/booking 1.2.24 → 1.2.25-rc.0

package/src/providers/booking-dialog-provider.tsx

@@ -0,0 +1,282 @@
+'use client';
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  type ReactNode,
+} from 'react';
+import { getOrCreateBookingCorrelationId } from '@/lib/booking/correlation-id';
+import { withBookingOutboundHeaders } from '@/lib/booking/trace-context';
+import {
+  isSuspiciousBookingProductId,
+  normalizeBookingProductId,
+} from '@/lib/booking/normalize-booking-product-id';
+import { ENV } from '@/lib/env';
+
+/** Filter IDs for the product grid. Must match BookingProductGrid FILTER_IDS. */
+export type ProductGridFilterId =
+  | 'all'
+  | 'sunrise'
+  | 'moraine-lake'
+  | 'lake-louise'
+  | 'emerald-lake'
+  | 'private';
+
+export type BookingScreen =
+  | { type: 'product-grid'; filterId?: ProductGridFilterId }
+  | { type: 'book-flow'; productId: string };
+
+export type ProductGridRestoreState = {
+  expandedId: string | null;
+  scrollTop: number;
+};
+
+export const OPEN_BOOKING_FOR_PRODUCT = 'openBookingForProduct';
+export const OPEN_BOOKING_WITH_FILTER = 'openBookingWithFilter';
+export const BOOKING_FLOW_ABANDON_EVENT = 'ticketbooth:booking-flow-abandon';
+
+function reportSuspiciousBookingProductId(original: string, sanitized: string): void {
+  if (typeof window === 'undefined') return;
+  const telemetryEndpoint = `${ENV.API_URL}/1/client-telemetry`;
+  const correlationId = getOrCreateBookingCorrelationId();
+  const event = {
+    event: 'BOOKING_DIALOG_SUSPICIOUS_PRODUCT_ID',
+    endpoint: '/booking-open',
+    correlationId,
+    originalProductId: original,
+    sanitizedProductId: sanitized,
+    pageUrl: window.location.href,
+    referrer: document.referrer || null,
+    userAgent: window.navigator.userAgent,
+    occurredAt: new Date().toISOString(),
+    stack: new Error('Suspicious booking productId input').stack ?? null,
+  };
+  fetch(telemetryEndpoint, {
+    method: 'POST',
+    headers: withBookingOutboundHeaders({ 'Content-Type': 'application/json' }),
+    body: JSON.stringify(event),
+    keepalive: true,
+  }).catch(() => {
+    // Never throw from telemetry reporting.
+  });
+}
+
+interface BookingDialogContextValue {
+  isOpen: boolean;
+  open: (options?: { filterId?: ProductGridFilterId }) => void;
+  openForProduct: (productId: string) => void;
+  close: (options?: { reason?: 'user' | 'completed' }) => void;
+  stack: BookingScreen[];
+  push: (
+    screen: BookingScreen,
+    options?: { productGridState?: ProductGridRestoreState }
+  ) => void;
+  pop: () => void;
+  canGoBack: boolean;
+  productGridRestoreState: ProductGridRestoreState | null;
+  clearProductGridRestoreState: () => void;
+}
+
+const BookingDialogContext = createContext<BookingDialogContextValue | null>(
+  null
+);
+
+export function useBookingDialog() {
+  const ctx = useContext(BookingDialogContext);
+  if (!ctx) {
+    throw new Error('useBookingDialog must be used within BookingDialogProvider');
+  }
+  return ctx;
+}
+
+interface BookingDialogProviderProps {
+  children: ReactNode;
+}
+
+export function BookingDialogProvider({ children }: BookingDialogProviderProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [stack, setStack] = useState<BookingScreen[]>([{ type: 'product-grid' }]);
+  const [productGridRestoreState, setProductGridRestoreState] = useState<
+    ProductGridRestoreState | null
+  >(null);
+  const previouslyFocusedRef = useRef<HTMLElement | null>(null);
+
+  const open = useCallback((options?: { filterId?: ProductGridFilterId }) => {
+    previouslyFocusedRef.current =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+    setStack([{ type: 'product-grid', filterId: options?.filterId }]);
+    setProductGridRestoreState(null);
+    setIsOpen(true);
+  }, []);
+
+  const openForProduct = useCallback((productId: string) => {
+    const sanitizedProductId = normalizeBookingProductId(productId);
+    if (!sanitizedProductId) return;
+    if (isSuspiciousBookingProductId(productId)) {
+      console.warn('[booking-dialog] Suspicious productId input detected', {
+        original: productId,
+        sanitized: sanitizedProductId,
+      });
+      reportSuspiciousBookingProductId(productId, sanitizedProductId);
+    }
+    previouslyFocusedRef.current =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+    setStack([{ type: 'book-flow', productId: sanitizedProductId }]);
+    setProductGridRestoreState(null);
+    setIsOpen(true);
+  }, []);
+
+  const close = useCallback((options?: { reason?: 'user' | 'completed' }) => {
+    if (options?.reason !== 'completed' && typeof window !== 'undefined') {
+      window.dispatchEvent(new Event(BOOKING_FLOW_ABANDON_EVENT));
+    }
+    const prev = previouslyFocusedRef.current;
+    setIsOpen(false);
+    requestAnimationFrame(() => {
+      if (prev && typeof prev.focus === 'function') {
+        prev.focus();
+      }
+    });
+  }, []);
+
+  const push = useCallback(
+    (
+      screen: BookingScreen,
+      options?: { productGridState?: ProductGridRestoreState }
+    ) => {
+      if (options?.productGridState) {
+        setProductGridRestoreState(options.productGridState);
+      }
+      setStack((prev) => [...prev, screen]);
+    },
+    []
+  );
+
+  const pop = useCallback(() => {
+    setStack((prev) => (prev.length > 1 ? prev.slice(0, -1) : prev));
+  }, []);
+
+  const clearProductGridRestoreState = useCallback(() => {
+    setProductGridRestoreState(null);
+  }, []);
+
+  useEffect(() => {
+    const handleOpen = () => open();
+    window.addEventListener('openSimpleModal', handleOpen);
+    return () => window.removeEventListener('openSimpleModal', handleOpen);
+  }, [open]);
+
+  useEffect(() => {
+    const handleOpenWithFilter = (e: Event) => {
+      const customEvent = e as CustomEvent<{ filterId: ProductGridFilterId }>;
+      const filterId = customEvent.detail?.filterId;
+      if (filterId) {
+        open({ filterId });
+      } else {
+        open();
+      }
+    };
+    window.addEventListener(OPEN_BOOKING_WITH_FILTER, handleOpenWithFilter);
+    return () =>
+      window.removeEventListener(OPEN_BOOKING_WITH_FILTER, handleOpenWithFilter);
+  }, [open]);
+
+  useEffect(() => {
+    const handleOpenForProduct = (e: Event) => {
+      const customEvent = e as CustomEvent<{ productId: string }>;
+      const productId = customEvent.detail?.productId;
+      if (productId) {
+        openForProduct(productId);
+      }
+    };
+    window.addEventListener(OPEN_BOOKING_FOR_PRODUCT, handleOpenForProduct);
+    return () =>
+      window.removeEventListener(OPEN_BOOKING_FOR_PRODUCT, handleOpenForProduct);
+  }, [openForProduct]);
+
+  // When user clicks back after Stripe redirect to /manage-booking, the page may be
+  // restored from bfcache with the modal still open. Close it on restore.
+  useEffect(() => {
+    const handlePageShow = (e: PageTransitionEvent) => {
+      if (e.persisted && isOpen) {
+        close();
+      }
+    };
+    window.addEventListener('pageshow', handlePageShow);
+    return () => window.removeEventListener('pageshow', handlePageShow);
+  }, [isOpen, close]);
+
+  useEffect(() => {
+    const handleBookNowClick = (e: Event) => {
+      const target = e.target as HTMLElement;
+      const link = target.closest('a[href^="#book-now"]') as HTMLAnchorElement | null;
+      if (link) {
+        e.preventDefault();
+        const href = link.getAttribute('href') ?? '';
+        // #book-now/filter/moraine-lake -> open with filter
+        const filterMatch = href.match(/^#book-now\/filter\/([a-z0-9-]+)$/i);
+        if (filterMatch) {
+          const filterId = filterMatch[1] as ProductGridFilterId;
+          if (['sunrise', 'moraine-lake', 'lake-louise', 'emerald-lake', 'private'].includes(filterId)) {
+            open({ filterId });
+            return;
+          }
+        }
+        // #book-now/product-slug -> open that product
+        const productMatch = href.match(/^#book-now\/([a-z0-9-]+)$/i);
+        const productSlug = productMatch?.[1];
+        if (productSlug) {
+          openForProduct(productSlug);
+        } else {
+          open();
+        }
+      }
+    };
+    document.addEventListener('click', handleBookNowClick);
+    return () => document.removeEventListener('click', handleBookNowClick);
+  }, [open, openForProduct]);
+
+  const canGoBack = stack.length > 1;
+
+  const value = useMemo(
+    () => ({
+      isOpen,
+      open,
+      openForProduct,
+      close,
+      stack,
+      push,
+      pop,
+      canGoBack,
+      productGridRestoreState,
+      clearProductGridRestoreState,
+    }),
+    [
+      isOpen,
+      open,
+      openForProduct,
+      close,
+      stack,
+      push,
+      pop,
+      canGoBack,
+      productGridRestoreState,
+      clearProductGridRestoreState,
+    ]
+  );
+
+  return (
+    <BookingDialogContext.Provider value={value}>
+      {children}
+    </BookingDialogContext.Provider>
+  );
+}

package/src/providers/dependent-add-on-dialog-provider.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import type { PhotoDapSlug } from '@/lib/photo-dap-config';
+
+export type DependentAddOnProductOptionChoice = {
+  dependentAddOnProductOptionId: string;
+  label: string;
+  photosLabel?: string;
+  startingAtLabel?: string;
+};
+
+export type DependentAddOnDialogOpenPayload = {
+  /** Card title shown in dialog header */
+  productDisplayTitle: string;
+  dependentAddOnProductId: string;
+  /** Fixed catalog option (no picker) */
+  dependentAddOnProductOptionId?: string;
+  /** When provided without a fixed option id, user picks one (e.g. 30 / 60 / 90 min) */
+  productOptions?: DependentAddOnProductOptionChoice[];
+  /**
+   * Default session-length id when multiple `productOptions` exist (e.g. manage-booking upsell probed 30 min).
+   * Unlike `dependentAddOnProductOptionId`, this does not hide the picker — the user can switch length.
+   */
+  initialSelectedProductOptionId?: string;
+  /** Hero + grid images (DapFlowCollage); Bunny CDN IDs */
+  collageImageIds?: string[];
+  /** Loads expandable copy from dap-descriptions */
+  dapDescriptionSlug?: PhotoDapSlug;
+  /**
+   * From DAP catalog / TicketBooth product — days before the photo session for full-refund cancellation.
+   * Availability API may override when it returns the same field.
+   */
+  cancellationDaysBeforeSession: number;
+  /**
+   * Pre-fill primary booking reference (e.g. manage-booking upsell after shuttle checkout).
+   * Accepts short or bookRef_ form; dialog normalizes for display.
+   */
+  initialPrimaryBookingReference?: string;
+  /** Optional pre-fill for booking-owner verification on DAP availability checks. */
+  initialPrimaryBookingLastName?: string;
+};
+
+interface DependentAddOnDialogContextValue {
+  isOpen: boolean;
+  payload: DependentAddOnDialogOpenPayload | null;
+  open: (p: DependentAddOnDialogOpenPayload) => void;
+  close: () => void;
+}
+
+const DependentAddOnDialogContext =
+  createContext<DependentAddOnDialogContextValue | null>(null);
+
+export function useDependentAddOnDialog() {
+  const ctx = useContext(DependentAddOnDialogContext);
+  if (!ctx) {
+    throw new Error(
+      'useDependentAddOnDialog must be used within DependentAddOnDialogProvider'
+    );
+  }
+  return ctx;
+}
+
+export function DependentAddOnDialogProvider({ children }: { children: ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [payload, setPayload] = useState<DependentAddOnDialogOpenPayload | null>(null);
+  const previouslyFocusedRef = useRef<HTMLElement | null>(null);
+
+  const open = useCallback((p: DependentAddOnDialogOpenPayload) => {
+    previouslyFocusedRef.current =
+      document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    setPayload(p);
+    setIsOpen(true);
+  }, []);
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+    setPayload(null);
+    const prev = previouslyFocusedRef.current;
+    requestAnimationFrame(() => {
+      if (prev && typeof prev.focus === 'function') {
+        prev.focus();
+      }
+    });
+  }, []);
+
+  const value = useMemo(
+    () => ({ isOpen, payload, open, close }),
+    [isOpen, payload, open, close]
+  );
+
+  return (
+    <DependentAddOnDialogContext.Provider value={value}>
+      {children}
+    </DependentAddOnDialogContext.Provider>
+  );
+}

package/src/radius.css

@@ -0,0 +1,5 @@
+:root {
+    --border-radius-small: 10px;
+    --border-radius-medium: 24px;
+    --border-radius-pill: 50px;
+}

package/src/spacing.css

@@ -0,0 +1,7 @@
+:root {
+    --spacing-small: 8px;
+    --spacing-medium: 16px;
+    --spacing-large: 32px;
+    --spacing-xlarge: 64px;
+    --spacing-xxlarge: 92px;
+}