@ticketboothapp/booking 0.1.11 → 0.1.12

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

@@ -10,14 +10,15 @@ import {
   useRef,
   type ReactNode,
 } from 'react';
-import { getOrCreateBookingCorrelationId } from '../correlation-id';
-import { withBookingOutboundHeaders } from '../trace-context';
+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';
+} 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'
@@ -60,7 +61,9 @@ function reportSuspiciousBookingProductId(original: string, sanitized: string):
     headers: withBookingOutboundHeaders({ 'Content-Type': 'application/json' }),
     body: JSON.stringify(event),
     keepalive: true,
-  }).catch(() => {});
+  }).catch(() => {
+    // Never throw from telemetry reporting.
+  });
 }
 
 interface BookingDialogContextValue {
@@ -69,29 +72,45 @@ interface BookingDialogContextValue {
   openForProduct: (productId: string) => void;
   close: (options?: { reason?: 'user' | 'completed' }) => void;
   stack: BookingScreen[];
-  push: (screen: BookingScreen, options?: { productGridState?: ProductGridRestoreState }) => void;
+  push: (
+    screen: BookingScreen,
+    options?: { productGridState?: ProductGridRestoreState }
+  ) => void;
   pop: () => void;
   canGoBack: boolean;
   productGridRestoreState: ProductGridRestoreState | null;
   clearProductGridRestoreState: () => void;
 }
 
-const BookingDialogContext = createContext<BookingDialogContextValue | null>(null);
+const BookingDialogContext = createContext<BookingDialogContextValue | null>(
+  null
+);
 
 export function useBookingDialog() {
   const ctx = useContext(BookingDialogContext);
-  if (!ctx) throw new Error('useBookingDialog must be used within BookingDialogProvider');
+  if (!ctx) {
+    throw new Error('useBookingDialog must be used within BookingDialogProvider');
+  }
   return ctx;
 }
 
-export function BookingDialogProvider({ children }: { children: ReactNode }) {
+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 [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;
+    previouslyFocusedRef.current =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
     setStack([{ type: 'product-grid', filterId: options?.filterId }]);
     setProductGridRestoreState(null);
     setIsOpen(true);
@@ -101,9 +120,16 @@ export function BookingDialogProvider({ children }: { children: ReactNode }) {
     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;
+    previouslyFocusedRef.current =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
     setStack([{ type: 'book-flow', productId: sanitizedProductId }]);
     setProductGridRestoreState(null);
     setIsOpen(true);
@@ -116,14 +142,24 @@ export function BookingDialogProvider({ children }: { children: ReactNode }) {
     const prev = previouslyFocusedRef.current;
     setIsOpen(false);
     requestAnimationFrame(() => {
-      if (prev && typeof prev.focus === 'function') prev.focus();
+      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 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));
@@ -143,26 +179,37 @@ export function BookingDialogProvider({ children }: { children: ReactNode }) {
     const handleOpenWithFilter = (e: Event) => {
       const customEvent = e as CustomEvent<{ filterId: ProductGridFilterId }>;
       const filterId = customEvent.detail?.filterId;
-      if (filterId) open({ filterId });
-      else open();
+      if (filterId) {
+        open({ filterId });
+      } else {
+        open();
+      }
     };
     window.addEventListener(OPEN_BOOKING_WITH_FILTER, handleOpenWithFilter);
-    return () => window.removeEventListener(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);
+      if (productId) {
+        openForProduct(productId);
+      }
     };
     window.addEventListener(OPEN_BOOKING_FOR_PRODUCT, handleOpenForProduct);
-    return () => window.removeEventListener(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();
+      if (e.persisted && isOpen) {
+        close();
+      }
     };
     window.addEventListener('pageshow', handlePageShow);
     return () => window.removeEventListener('pageshow', handlePageShow);
@@ -172,27 +219,34 @@ export function BookingDialogProvider({ children }: { children: ReactNode }) {
     const handleBookNowClick = (e: Event) => {
       const target = e.target as HTMLElement;
       const link = target.closest('a[href^="#book-now"]') as HTMLAnchorElement | null;
-      if (!link) return;
-      e.preventDefault();
-      const href = link.getAttribute('href') ?? '';
-      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;
+      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();
         }
       }
-      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,
@@ -206,8 +260,23 @@ export function BookingDialogProvider({ children }: { children: ReactNode }) {
       productGridRestoreState,
       clearProductGridRestoreState,
     }),
-    [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>;
+  return (
+    <BookingDialogContext.Provider value={value}>
+      {children}
+    </BookingDialogContext.Provider>
+  );
 }

package/src/providers/bottom-sheet-provider.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { createContext, useContext, useState } from 'react';
+import BottomSheet from '@/components/bottom-sheet';
+
+type BottomSheetContextType = {
+  openSheet: (content: React.ReactNode) => void;
+  closeSheet: () => void;
+};
+
+const BottomSheetContext = createContext<BottomSheetContextType | null>(null);
+
+export function BottomSheetProvider({ children }: { children: React.ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [content, setContent] = useState<React.ReactNode>(null);
+
+  const openSheet = (content: React.ReactNode) => {
+    setContent(content);
+    setIsOpen(true);
+  };
+
+  const closeSheet = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <BottomSheetContext.Provider value={{ openSheet, closeSheet }}>
+      {children}
+      <BottomSheet isOpen={isOpen} onClose={closeSheet}>
+        {content}
+      </BottomSheet>
+    </BottomSheetContext.Provider>
+  );
+}
+
+export function useBottomSheet() {
+  const context = useContext(BottomSheetContext);
+  if (!context) throw new Error('useBottomSheet must be used within BottomSheetProvider');
+  return context;
+} 

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