@ticketboothapp/booking 0.1.20 → 0.1.23

package/src/lib/photo-packages.ts

@@ -0,0 +1,75 @@
+import { ImageData, IMAGES } from "@/constants/images";
+import type { PhotoDapSlug } from "@/lib/photo-dap-config";
+
+export interface VideoSources {
+    src: string;
+    webm: string;
+}
+
+export interface PhotoPackage {
+    name: string;
+    bookingLink: string;
+    /** When set and env IDs are configured, opens dependent add-on booking for this catalog entry */
+    dapSlug?: PhotoDapSlug;
+    images: ImageData[];
+    startingPrice: string;
+    duration: string;
+    quantity: string;
+    videoUrl?: VideoSources;
+}
+
+export interface PhotoPackageSection {
+    name: string;
+    subTitle: string;
+    description: string;
+    photoPackages: PhotoPackage[];
+}
+
+export const PHOTO_PACKAGE_SECTIONS: PhotoPackageSection[] = [
+    {
+        name: 'Photo Sessions',
+        subTitle: 'Make it last forever',
+        description: "Capture the magic of Moraine Lake with a mini photo shoot; perfect for couples, families, or friends looking to take home more than just memories. Choose from 30, 60, or 90-minute sessions, with professionally edited photos included. Longer sessions can also be arranged with our private shuttle experiences for those wanting more time and flexibility.<br><br>Planning to propose or elope in one of the most breathtaking places on earth? Let us help you make it truly unforgettable. Our experienced local photographers know how to blend into the moment while capturing it beautifully - from the quiet emotion of a surprise proposal to the joy of an intimate celebration. Reach out to our team after booking your shoot & shuttle package reach to help you plan the perfect setting, timing, and details to make your moment picture-perfect and entirely your own.",
+        photoPackages: [
+            {
+                name: 'Couples, Families, & Friends',
+                bookingLink: '#book-now',
+                dapSlug: 'session-couples-families-friends',
+                images: [IMAGES.FAMILY_MORIANE_LAKE_ROCKPILE],
+                startingPrice: 'Starting at $499',
+                duration: '30 / 60 / 90 minutes',
+                quantity: '25 / 50 / 75 photos',
+                videoUrl: {
+                    src: '/videos/sunrise-rockpile-tourist-vibe-group-shoot.mp4',
+                    webm: '/videos/sunrise-rockpile-tourist-vibe-group-shoot.webm'
+                }
+            },
+            {
+                name: 'Elopements',
+                bookingLink: '#book-now',
+                dapSlug: 'session-elopements',
+                images: [IMAGES.MORAINE_LAKE_SUNRISE_ELOPEMENT],
+                startingPrice: 'Starting at $799',
+                duration: '30 / 60 / 90 minutes',
+                quantity: '25 / 50 / 75 photos',
+                videoUrl: {
+                    src: '/videos/dancing-couple-elopement-shoot.mp4',
+                    webm: '/videos/dancing-couple-elopement-shoot.webm'
+                }
+            },
+            {
+                name: 'Proposals',
+                bookingLink: '#book-now',
+                dapSlug: 'session-proposals',
+                images: [IMAGES.LAKE_LOUISE_KISS],
+                startingPrice: 'Starting at $799',
+                duration: '30 / 60 / 90 minutes',
+                quantity: '25 / 50 / 75 photos',
+                videoUrl: {
+                    src: '/videos/proposal-moraine-lake-shoot.mp4',
+                    webm: '/videos/proposal-moraine-lake-shoot.webm'
+                }
+            }
+        ]
+    }
+]

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