@ticketboothapp/booking 0.1.11 → 0.1.12

package/src/components/booking/DependentAddOnBookingDialog.tsx

@@ -0,0 +1,1350 @@
+'use client';
+
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { format, parseISO } from 'date-fns';
+import {
+  useDependentAddOnDialog,
+} from '@/providers/dependent-add-on-dialog-provider';
+import { ENV } from '@/lib/env';
+import {
+  getDependentAddOnAvailability,
+  createDependentAddOnPaymentIntent,
+  type CreateDependentAddOnPaymentIntentResult,
+  type DependentAddOnCheckoutQuestion,
+  type DependentAddOnSlot,
+  type DapItineraryStep,
+} from '@/lib/dependent-add-on-api';
+import { dapItineraryStepsToDisplay } from '@/lib/dap-itinerary-preview';
+import { DEFAULT_PHOTO_DAP_CANCELLATION_DAYS_BEFORE_SESSION } from '@/lib/photo-dap-config';
+import { CheckoutModal, type CheckoutModalLineItem } from '@/components/booking/CheckoutModal';
+import { DapFlowCollage } from '@/components/booking/DapFlowCollage';
+import { DapTourDescription } from '@/components/booking/DapTourDescription';
+import {
+  ItineraryReadOnlySummary,
+  type ItineraryReadOnlyPhotoPreview,
+} from '@/components/booking/ItineraryBox';
+import { formatBookingRefForDisplay } from '@/lib/booking-ref';
+import type { Currency } from '@/lib/currency';
+import { useLocale, useTranslations } from '@/lib/booking/i18n';
+import Button, { ButtonHoverColor } from '@/components/button';
+import checkoutFormStyles from './CheckoutForm.module.css';
+import returnTimeStyles from './ReturnTimeSelector.module.css';
+import bookingStyles from './BookingDialog.module.css';
+import './booking-flow.css';
+
+const DAP_SLOT_QUANTITY = 1;
+/** Avoid preview API calls while the reference is still being typed. */
+const DAP_REF_PREVIEW_MIN_LENGTH = 5;
+const DAP_REF_PREVIEW_DEBOUNCE_MS = 450;
+
+function slotsEqual(a: DependentAddOnSlot | null, b: DependentAddOnSlot): boolean {
+  return (
+    !!a &&
+    a.offeringId === b.offeringId &&
+    a.slotStart === b.slotStart &&
+    a.slotEnd === b.slotEnd
+  );
+}
+
+function newIdempotencyKey(): string {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+  return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+
+function formatSlotInstant(iso: string): string {
+  try {
+    return new Date(iso).toLocaleString(undefined, {
+      weekday: 'short',
+      month: 'short',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+    });
+  } catch {
+    return iso;
+  }
+}
+
+/** Same pattern as [BookingFlow] itinerary title: `format(parseISO(date), 'MMM d')`. */
+function formatDapBookingDaySubtitle(iso: string | null | undefined): string | undefined {
+  if (!iso?.trim()) return undefined;
+  try {
+    return format(parseISO(iso.trim()), 'MMM d');
+  } catch {
+    try {
+      return format(new Date(iso.trim()), 'MMM d');
+    } catch {
+      return undefined;
+    }
+  }
+}
+
+/** Single date line for a session (local calendar day of slot start). */
+function formatSlotSessionDate(isoStart: string): string {
+  try {
+    return new Date(isoStart).toLocaleDateString(undefined, {
+      weekday: 'short',
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  } catch {
+    return '';
+  }
+}
+
+/** Time–time only (same-day sessions; cross-day falls back to explicit start/end). */
+function persistDapManageLastNameForRedirect(ref: string, lastName: string) {
+  const key = formatBookingRefForDisplay(ref.trim()) || ref.trim();
+  if (!key || !lastName.trim()) return;
+  try {
+    sessionStorage.setItem(`dap_manage_ln:${key}`, lastName.trim());
+  } catch {
+    /* ignore quota / private mode */
+  }
+}
+
+function validateDapCheckoutAnswersClient(
+  questions: DependentAddOnCheckoutQuestion[],
+  answers: Record<string, string>
+): string | null {
+  for (const q of questions) {
+    const raw = answers[q.id] ?? '';
+    if (q.type === 'TEXT') {
+      const v = raw.trim();
+      if (q.required && !v) {
+        return `Please answer: ${q.label}`;
+      }
+      const max = q.maxLength;
+      if (max != null && max > 0 && v.length > max) {
+        return `${q.label} must be at most ${max} characters.`;
+      }
+    } else {
+      const checked = raw === 'true';
+      if (q.required && !checked) {
+        return `Please confirm: ${q.label}`;
+      }
+    }
+  }
+  return null;
+}
+
+function buildCheckoutAnswersForApi(
+  questions: DependentAddOnCheckoutQuestion[],
+  answers: Record<string, string>
+): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const q of questions) {
+    if (q.type === 'TEXT') {
+      out[q.id] = (answers[q.id] ?? '').trim();
+    } else {
+      out[q.id] = answers[q.id] === 'true' ? 'true' : 'false';
+    }
+  }
+  return out;
+}
+
+function formatSlotTimeRange(isoStart: string, isoEnd: string): string {
+  try {
+    const start = new Date(isoStart);
+    const end = new Date(isoEnd);
+    const startDay = start.toDateString();
+    const endDay = end.toDateString();
+    const timeOpts: Intl.DateTimeFormatOptions = {
+      hour: 'numeric',
+      minute: '2-digit',
+    };
+    if (startDay !== endDay) {
+      return `${formatSlotInstant(isoStart)} – ${formatSlotInstant(isoEnd)}`;
+    }
+    const t1 = start.toLocaleTimeString(undefined, timeOpts);
+    const t2 = end.toLocaleTimeString(undefined, timeOpts);
+    return `${t1} – ${t2}`;
+  } catch {
+    return `${isoStart} – ${isoEnd}`;
+  }
+}
+
+function toCurrency(code: string): Currency {
+  const c = (code ?? 'CAD').toUpperCase();
+  if (c === 'USD' || c === 'EUR' || c === 'GBP' || c === 'AUD' || c === 'CAD') {
+    return c;
+  }
+  return 'CAD';
+}
+
+function getFocusableElements(container: HTMLElement): HTMLElement[] {
+  const selector =
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+  return Array.from(container.querySelectorAll<HTMLElement>(selector)).filter(
+    (el) =>
+      !el.hasAttribute('disabled') &&
+      el.offsetParent !== null &&
+      getComputedStyle(el).visibility !== 'hidden'
+  );
+}
+
+type Step = 'reference' | 'payment';
+
+function dapSlotsPanelKey(ref: string, productOptionId: string): string {
+  return `${ref.trim()}|${productOptionId.trim()}`;
+}
+
+export default function DependentAddOnBookingDialog() {
+  const { t } = useTranslations();
+  const { locale } = useLocale();
+  const { isOpen, payload, close } = useDependentAddOnDialog();
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const [step, setStep] = useState<Step>('reference');
+  const [primaryBookingReference, setPrimaryBookingReference] = useState('');
+  const [primaryBookingLastName, setPrimaryBookingLastName] = useState('');
+  const [selectedProductOptionId, setSelectedProductOptionId] = useState('');
+  const [slots, setSlots] = useState<DependentAddOnSlot[]>([]);
+  const [primaryItineraryDisplay, setPrimaryItineraryDisplay] = useState<
+    DapItineraryStep[]
+  >([]);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [loadingSlots, setLoadingSlots] = useState(false);
+  const [selectedSlot, setSelectedSlot] = useState<DependentAddOnSlot | null>(null);
+  const [confirmError, setConfirmError] = useState<string | null>(null);
+  const [redirectLastName, setRedirectLastName] = useState('');
+  /** From GET availability — primary booking last name (no user typing). */
+  const [availabilityCustomerLastName, setAvailabilityCustomerLastName] = useState('');
+  const lastPiApiLastNameRef = useRef('');
+  const [paymentClientSecret, setPaymentClientSecret] = useState<string | null>(null);
+  const [paymentTotalAmount, setPaymentTotalAmount] = useState<number | null>(null);
+  const [paymentSubtotalAmount, setPaymentSubtotalAmount] = useState<number | null>(null);
+  const [paymentTaxAmount, setPaymentTaxAmount] = useState<number | null>(null);
+  const [paymentCurrency, setPaymentCurrency] = useState('CAD');
+  const [preparingPayment, setPreparingPayment] = useState(false);
+  /** When set, times below the form match this ref + option (inline flow — no separate “slots” step). */
+  const [slotsLoadedKey, setSlotsLoadedKey] = useState<string | null>(null);
+  const [refPreviewItinerary, setRefPreviewItinerary] = useState<DapItineraryStep[]>(
+    []
+  );
+  const [refPreviewStatus, setRefPreviewStatus] = useState<
+    'idle' | 'loading' | 'success' | 'error'
+  >('idle');
+  const [refPreviewTargetRef, setRefPreviewTargetRef] = useState('');
+  /** First availability slot start — calendar day for title (matches main booking itinerary). */
+  const [dapBookingDaySlotStartIso, setDapBookingDaySlotStartIso] = useState<string | null>(
+    null
+  );
+  /**
+   * From GET availability when TicketBooth includes `cancellationDaysBeforeSession` on the DAP payload.
+   * Otherwise null — checkout copy uses `payload.cancellationDaysBeforeSession` from the catalog.
+   */
+  const [dapCancellationDaysFromAvailability, setDapCancellationDaysFromAvailability] = useState<
+    number | null
+  >(null);
+  const [dapCheckoutQuestions, setDapCheckoutQuestions] = useState<
+    DependentAddOnCheckoutQuestion[]
+  >([]);
+  const [dapCheckoutAnswers, setDapCheckoutAnswers] = useState<Record<string, string>>({});
+  const refPreviewSeqRef = useRef(0);
+  /** One automatic slots fetch per dialog open when payload pre-fills ref + last name + option (e.g. manage-booking upsell). */
+  const dapPrefillAutoSlotsConsumedRef = useRef(false);
+  const idempotencyKey = useMemo(
+    () => (selectedSlot ? newIdempotencyKey() : ''),
+    [selectedSlot]
+  );
+
+  const resetFlow = useCallback(() => {
+    setStep('reference');
+    setPrimaryBookingReference('');
+    setPrimaryBookingLastName('');
+    setSelectedProductOptionId('');
+    setSlots([]);
+    setPrimaryItineraryDisplay([]);
+    setLoadError(null);
+    setLoadingSlots(false);
+    setSelectedSlot(null);
+    setConfirmError(null);
+    setRedirectLastName('');
+    lastPiApiLastNameRef.current = '';
+    setAvailabilityCustomerLastName('');
+    setPaymentClientSecret(null);
+    setPaymentTotalAmount(null);
+    setPaymentSubtotalAmount(null);
+    setPaymentTaxAmount(null);
+    setPaymentCurrency('CAD');
+    setPreparingPayment(false);
+    setSlotsLoadedKey(null);
+    setRefPreviewItinerary([]);
+    setRefPreviewStatus('idle');
+    setRefPreviewTargetRef('');
+    setDapBookingDaySlotStartIso(null);
+    setDapCancellationDaysFromAvailability(null);
+    setDapCheckoutQuestions([]);
+    setDapCheckoutAnswers({});
+    refPreviewSeqRef.current += 1;
+    dapPrefillAutoSlotsConsumedRef.current = false;
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) {
+      resetFlow();
+    }
+  }, [isOpen, resetFlow]);
+
+  useLayoutEffect(() => {
+    if (!isOpen || !payload) return;
+    const fixed = payload.dependentAddOnProductOptionId?.trim();
+    const choices = payload.productOptions ?? [];
+    if (fixed) {
+      setSelectedProductOptionId(fixed);
+    } else if (choices.length > 1) {
+      const initial = payload.initialSelectedProductOptionId?.trim();
+      const match =
+        initial &&
+        choices.some((c) => c.dependentAddOnProductOptionId === initial);
+      setSelectedProductOptionId(match ? initial : '');
+    } else if (choices[0]) {
+      setSelectedProductOptionId(choices[0].dependentAddOnProductOptionId);
+    } else {
+      setSelectedProductOptionId('');
+    }
+    const initRef = payload.initialPrimaryBookingReference?.trim();
+    if (initRef) {
+      setPrimaryBookingReference(
+        formatBookingRefForDisplay(initRef) || initRef
+      );
+    }
+    const initLastName = payload.initialPrimaryBookingLastName?.trim();
+    if (initLastName) setPrimaryBookingLastName(initLastName);
+  }, [isOpen, payload]);
+
+  const resolvedProductOptionId = useMemo(() => {
+    if (!payload) return '';
+    const fixed = payload.dependentAddOnProductOptionId?.trim();
+    if (fixed) return fixed;
+    const choices = payload.productOptions ?? [];
+    const multiChoice = choices.length > 1;
+    if (multiChoice) {
+      return selectedProductOptionId.trim();
+    }
+    if (selectedProductOptionId.trim()) return selectedProductOptionId.trim();
+    return choices[0]?.dependentAddOnProductOptionId ?? '';
+  }, [payload, selectedProductOptionId]);
+
+  const showOptionPicker = Boolean(
+    payload &&
+      !payload.dependentAddOnProductOptionId &&
+      (payload.productOptions?.length ?? 0) > 1
+  );
+
+  /** Any valid option id for GET availability (itinerary is the same for all lengths on the same booking). */
+  const itineraryPreviewOptionId = useMemo(() => {
+    if (!payload) return '';
+    const fixed = payload.dependentAddOnProductOptionId?.trim();
+    if (fixed) return fixed;
+    const choices = payload.productOptions ?? [];
+    if (choices.length === 0) return '';
+    if (selectedProductOptionId.trim()) return selectedProductOptionId.trim();
+    return choices[0]?.dependentAddOnProductOptionId ?? '';
+  }, [payload, selectedProductOptionId]);
+
+  /** Pre-filled from opener (e.g. post-booking upsell): one GET availability covers preview + slots — skip debounced preview. */
+  const prefillCompleteForSingleAvailabilityFetch = useMemo(
+    () =>
+      Boolean(
+        payload?.initialPrimaryBookingReference?.trim() &&
+          payload?.initialPrimaryBookingLastName?.trim() &&
+          resolvedProductOptionId.trim()
+      ),
+    [
+      payload?.initialPrimaryBookingReference,
+      payload?.initialPrimaryBookingLastName,
+      resolvedProductOptionId,
+    ]
+  );
+
+  useEffect(() => {
+    if (!isOpen || !payload || step !== 'reference') return;
+    if (prefillCompleteForSingleAvailabilityFetch) return;
+    const refTrim = primaryBookingReference.trim();
+    const lastNameTrim = primaryBookingLastName.trim();
+    if (
+      refTrim.length < DAP_REF_PREVIEW_MIN_LENGTH ||
+      !lastNameTrim ||
+      !itineraryPreviewOptionId.trim()
+    ) {
+      return;
+    }
+    const seq = ++refPreviewSeqRef.current;
+    const timer = window.setTimeout(() => {
+      if (refPreviewSeqRef.current !== seq) return;
+      setRefPreviewTargetRef(refTrim);
+      setRefPreviewStatus('loading');
+      setRefPreviewItinerary([]);
+      setDapBookingDaySlotStartIso(null);
+      setDapCancellationDaysFromAvailability(null);
+      void (async () => {
+        try {
+          const preview = await getDependentAddOnAvailability({
+            companyId: ENV.COMPANY_ID,
+            primaryBookingReference: refTrim,
+            lastName: lastNameTrim,
+            dependentAddOnProductId: payload.dependentAddOnProductId,
+            dependentAddOnProductOptionId: itineraryPreviewOptionId.trim(),
+          });
+          if (refPreviewSeqRef.current !== seq) return;
+          setRefPreviewItinerary(preview.primaryItineraryDisplay);
+          setDapBookingDaySlotStartIso(preview.slots[0]?.slotStart ?? null);
+          setDapCancellationDaysFromAvailability(
+            preview.cancellationDaysBeforeSession ?? null
+          );
+          setRefPreviewStatus('success');
+        } catch {
+          if (refPreviewSeqRef.current !== seq) return;
+          setRefPreviewItinerary([]);
+          setDapBookingDaySlotStartIso(null);
+          setDapCancellationDaysFromAvailability(null);
+          setRefPreviewStatus('error');
+        }
+      })();
+    }, DAP_REF_PREVIEW_DEBOUNCE_MS);
+    return () => window.clearTimeout(timer);
+  }, [
+    isOpen,
+    payload,
+    step,
+    primaryBookingReference,
+    primaryBookingLastName,
+    itineraryPreviewOptionId,
+    prefillCompleteForSingleAvailabilityFetch,
+  ]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        close();
+        return;
+      }
+      if (e.key !== 'Tab' || !dialogRef.current) return;
+      const focusable = getFocusableElements(dialogRef.current);
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const currentIndex = focusable.indexOf(document.activeElement as HTMLElement);
+      if (e.shiftKey) {
+        if (currentIndex <= 0 || currentIndex === -1) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (currentIndex === focusable.length - 1 || currentIndex === -1) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, close]);
+
+  useEffect(() => {
+    if (isOpen && dialogRef.current) {
+      dialogRef.current.focus();
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+      return () => {
+        document.body.style.overflow = 'unset';
+      };
+    }
+    document.body.style.overflow = 'unset';
+  }, [isOpen]);
+
+  const clearPaymentPrepForSlotChange = useCallback(() => {
+    setPaymentClientSecret(null);
+    setPaymentTotalAmount(null);
+    setPaymentSubtotalAmount(null);
+    setPaymentTaxAmount(null);
+    lastPiApiLastNameRef.current = '';
+    setRedirectLastName('');
+  }, []);
+
+  const fetchAndShowSlots = useCallback(
+    async (ref: string, lastName: string, productOptionId: string | undefined) => {
+      if (!payload) return;
+      setLoadError(null);
+      clearPaymentPrepForSlotChange();
+      setLoadingSlots(true);
+      setSelectedSlot(null);
+      setSlotsLoadedKey(null);
+      setSlots([]);
+      setPrimaryItineraryDisplay([]);
+      setDapCancellationDaysFromAvailability(null);
+      setDapCheckoutQuestions([]);
+      setDapCheckoutAnswers({});
+      const optKey = (productOptionId ?? '').trim();
+      try {
+        const avail = await getDependentAddOnAvailability({
+          companyId: ENV.COMPANY_ID,
+          primaryBookingReference: ref,
+          lastName,
+          dependentAddOnProductId: payload.dependentAddOnProductId,
+          dependentAddOnProductOptionId: productOptionId || undefined,
+        });
+        const list = avail.slots;
+        const itinerary = avail.primaryItineraryDisplay;
+        const fetchedLn = avail.primaryCustomerLastName;
+        setSlots(list);
+        setPrimaryItineraryDisplay(itinerary);
+        setDapBookingDaySlotStartIso(list[0]?.slotStart ?? null);
+        setAvailabilityCustomerLastName((fetchedLn ?? '').trim());
+        setDapCancellationDaysFromAvailability(
+          avail.cancellationDaysBeforeSession ?? null
+        );
+        setDapCheckoutQuestions(avail.checkoutQuestions ?? []);
+        setDapCheckoutAnswers({});
+        setSlotsLoadedKey(dapSlotsPanelKey(ref, optKey));
+      } catch (err) {
+        setLoadError(err instanceof Error ? err.message : 'Could not load times.');
+      } finally {
+        setLoadingSlots(false);
+      }
+    },
+    [payload, clearPaymentPrepForSlotChange]
+  );
+
+  useEffect(() => {
+    if (!isOpen || !payload || step !== 'reference') return;
+    if (!prefillCompleteForSingleAvailabilityFetch) return;
+    if (dapPrefillAutoSlotsConsumedRef.current) return;
+    const initRef = payload.initialPrimaryBookingReference?.trim();
+    const initLn = payload.initialPrimaryBookingLastName?.trim();
+    if (!initRef || !initLn) return;
+    const refTrim = primaryBookingReference.trim();
+    const lastNameTrim = primaryBookingLastName.trim();
+    const opt = resolvedProductOptionId.trim();
+    if (
+      refTrim.length < DAP_REF_PREVIEW_MIN_LENGTH ||
+      !lastNameTrim ||
+      !opt
+    ) {
+      return;
+    }
+    if (
+      formatBookingRefForDisplay(initRef) !== refTrim ||
+      initLn !== lastNameTrim
+    ) {
+      return;
+    }
+    dapPrefillAutoSlotsConsumedRef.current = true;
+    void fetchAndShowSlots(refTrim, lastNameTrim, opt);
+  }, [
+    isOpen,
+    payload,
+    step,
+    prefillCompleteForSingleAvailabilityFetch,
+    primaryBookingReference,
+    primaryBookingLastName,
+    resolvedProductOptionId,
+    fetchAndShowSlots,
+  ]);
+
+  const handleLoadSlots = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      if (!payload) return;
+      const ref = primaryBookingReference.trim();
+      const lastName = primaryBookingLastName.trim();
+      if (!ref) {
+        setLoadError('Enter your shuttle booking reference.');
+        return;
+      }
+      if (!lastName) {
+        setLoadError('Enter the booking last name.');
+        return;
+      }
+      const needsCatalogOption =
+        Boolean(payload.dependentAddOnProductOptionId) ||
+        (payload.productOptions?.length ?? 0) > 0;
+      if (needsCatalogOption && !resolvedProductOptionId) {
+        setLoadError('Choose a session length.');
+        return;
+      }
+      await fetchAndShowSlots(ref, lastName, resolvedProductOptionId || undefined);
+    },
+    [payload, primaryBookingReference, primaryBookingLastName, resolvedProductOptionId, fetchAndShowSlots]
+  );
+
+  const handleSessionOptionSelect = useCallback(
+    async (optionId: string) => {
+      if (!payload) return;
+      const ref = primaryBookingReference.trim();
+      const lastName = primaryBookingLastName.trim();
+      if (!ref) {
+        setLoadError('Enter your shuttle booking reference.');
+        return;
+      }
+      if (!lastName) {
+        setLoadError('Enter the booking last name.');
+        return;
+      }
+      setSelectedProductOptionId(optionId);
+      await fetchAndShowSlots(ref, lastName, optionId);
+    },
+    [payload, primaryBookingReference, primaryBookingLastName, fetchAndShowSlots]
+  );
+
+  const goToPaymentStep = async () => {
+    if (!selectedSlot) return;
+    setConfirmError(null);
+    if (dapCheckoutQuestions.length > 0) {
+      const qErr = validateDapCheckoutAnswersClient(
+        dapCheckoutQuestions,
+        dapCheckoutAnswers
+      );
+      if (qErr) {
+        setConfirmError(qErr);
+        return;
+      }
+    }
+    if (!paymentClientSecret) {
+      const pi = await preparePaymentIntent();
+      if (!pi) return;
+    }
+    const apiLn = lastPiApiLastNameRef.current.trim();
+    const ln = apiLn || availabilityCustomerLastName.trim();
+    if (!ln) {
+      setConfirmError(t('booking.dapNoLastNameOnFile'));
+      return;
+    }
+    setRedirectLastName(ln);
+    persistDapManageLastNameForRedirect(primaryBookingReference, ln);
+    setStep('payment');
+  };
+
+  const preparePaymentIntent = async (): Promise<CreateDependentAddOnPaymentIntentResult | null> => {
+    if (!payload || !selectedSlot) return null;
+    const ref = primaryBookingReference.trim();
+    setConfirmError(null);
+    setPaymentSubtotalAmount(null);
+    setPaymentTaxAmount(null);
+    setPreparingPayment(true);
+    try {
+      const pi = await createDependentAddOnPaymentIntent({
+        companyId: ENV.COMPANY_ID,
+        primaryBookingReference: ref,
+        lastName: primaryBookingLastName.trim(),
+        dependentAddOnProductId: payload.dependentAddOnProductId,
+        dependentAddOnProductOptionId: resolvedProductOptionId || undefined,
+        offeringId: selectedSlot.offeringId,
+        slotStart: selectedSlot.slotStart,
+        slotEnd: selectedSlot.slotEnd,
+        quantity: DAP_SLOT_QUANTITY,
+        idempotencyKey,
+        ...(dapCheckoutQuestions.length > 0
+          ? {
+              checkoutAnswers: buildCheckoutAnswersForApi(
+                dapCheckoutQuestions,
+                dapCheckoutAnswers
+              ),
+            }
+          : {}),
+      });
+      const secret = pi.clientSecret;
+      if (!secret) {
+        setConfirmError('Payment could not be started. Please try again.');
+        return null;
+      }
+      const apiLn = (pi.customerLastName ?? '').trim();
+      lastPiApiLastNameRef.current = apiLn;
+      setPaymentClientSecret(secret);
+      setPaymentTotalAmount(pi.totalAmount ?? null);
+      setPaymentSubtotalAmount(
+        pi.subtotalAmount ?? (pi.taxAmount != null && pi.totalAmount != null
+          ? pi.totalAmount - pi.taxAmount
+          : pi.totalAmount ?? null)
+      );
+      setPaymentTaxAmount(
+        typeof pi.taxAmount === 'number' && pi.taxAmount > 0 ? pi.taxAmount : null
+      );
+      setPaymentCurrency(pi.currency ?? 'CAD');
+      setRedirectLastName(apiLn);
+      return pi;
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : 'Could not start payment.';
+      setConfirmError(msg);
+      return null;
+    } finally {
+      setPreparingPayment(false);
+    }
+  };
+
+  const goBackToSlots = () => {
+    setStep('reference');
+    setPaymentClientSecret(null);
+    setPaymentTotalAmount(null);
+    setPaymentSubtotalAmount(null);
+    setPaymentTaxAmount(null);
+    lastPiApiLastNameRef.current = '';
+    setRedirectLastName('');
+  };
+
+  const manageBookingAfterPayUrl = useMemo(() => {
+    if (typeof window === 'undefined') return '/manage-booking';
+    const ref =
+      formatBookingRefForDisplay(primaryBookingReference.trim()) ||
+      primaryBookingReference.trim();
+    const ln = redirectLastName.trim();
+    if (!ref) return `${window.location.origin}/manage-booking`;
+    const q = new URLSearchParams({
+      ref,
+      dap_success: '1',
+    });
+    if (ln) q.set('lastName', ln);
+    return `${window.location.origin}/manage-booking?${q.toString()}#booking-add-ons`;
+  }, [primaryBookingReference, redirectLastName]);
+
+  const sessionLengthLabel = useMemo(() => {
+    if (!payload) return null;
+    return (
+      payload.productOptions?.find(
+        (o) => o.dependentAddOnProductOptionId === resolvedProductOptionId
+      )?.label ?? null
+    );
+  }, [payload, resolvedProductOptionId]);
+
+  const slotsPanelVisible = useMemo(() => {
+    if (step !== 'reference') return false;
+    if (!slotsLoadedKey) return false;
+    return (
+      slotsLoadedKey ===
+      dapSlotsPanelKey(primaryBookingReference, resolvedProductOptionId)
+    );
+  }, [
+    step,
+    slotsLoadedKey,
+    primaryBookingReference,
+    resolvedProductOptionId,
+  ]);
+
+  const refTrimSummary = primaryBookingReference.trim();
+  const slotsKeyMatchSummary =
+    slotsLoadedKey ===
+    dapSlotsPanelKey(refTrimSummary, resolvedProductOptionId);
+
+  const refSummarySteps = useMemo(() => {
+    if (refTrimSummary.length < DAP_REF_PREVIEW_MIN_LENGTH) return [];
+    if (slotsKeyMatchSummary) return primaryItineraryDisplay;
+    if (
+      refPreviewTargetRef === refTrimSummary &&
+      refPreviewStatus === 'success'
+    ) {
+      return refPreviewItinerary;
+    }
+    return [];
+  }, [
+    refTrimSummary,
+    slotsKeyMatchSummary,
+    primaryItineraryDisplay,
+    refPreviewTargetRef,
+    refPreviewStatus,
+    refPreviewItinerary,
+  ]);
+
+  const refSummaryPhase = useMemo(():
+    | 'idle'
+    | 'loading'
+    | 'ready'
+    | 'error' => {
+    if (refTrimSummary.length < DAP_REF_PREVIEW_MIN_LENGTH) return 'idle';
+    if (slotsKeyMatchSummary) return 'ready';
+    if (refPreviewTargetRef !== refTrimSummary) return 'idle';
+    if (refPreviewStatus === 'loading') return 'loading';
+    if (refPreviewStatus === 'error') return 'error';
+    if (refPreviewStatus === 'success') return 'ready';
+    return 'idle';
+  }, [
+    refTrimSummary,
+    slotsKeyMatchSummary,
+    refPreviewTargetRef,
+    refPreviewStatus,
+  ]);
+
+  const refSummaryItineraryDisplay = useMemo(
+    () => dapItineraryStepsToDisplay(refSummarySteps),
+    [refSummarySteps]
+  );
+
+  const dapPhotoSessionPreview = useMemo((): ItineraryReadOnlyPhotoPreview | null => {
+    if (!selectedSlot || !slotsPanelVisible || refSummaryPhase !== 'ready') return null;
+    return {
+      sessionTimeRangeLabel: formatSlotTimeRange(
+        selectedSlot.slotStart,
+        selectedSlot.slotEnd
+      ),
+      photographerLabel: selectedSlot.resourceName ?? selectedSlot.resourceId,
+      sessionLengthLabel,
+      primaryItinerarySteps: primaryItineraryDisplay,
+      slotStartIso: selectedSlot.slotStart,
+      slotEndIso: selectedSlot.slotEnd,
+    };
+  }, [
+    selectedSlot,
+    slotsPanelVisible,
+    refSummaryPhase,
+    sessionLengthLabel,
+    primaryItineraryDisplay,
+  ]);
+
+  const dapItineraryDateSubtitle = useMemo(() => {
+    if (refSummaryPhase !== 'ready') return undefined;
+    return formatDapBookingDaySubtitle(dapBookingDaySlotStartIso);
+  }, [refSummaryPhase, dapBookingDaySlotStartIso]);
+
+  const dapCancellationDays = useMemo(() => {
+    if (dapCancellationDaysFromAvailability != null) {
+      return dapCancellationDaysFromAvailability;
+    }
+    const fromPayload = payload?.cancellationDaysBeforeSession;
+    if (fromPayload != null && Number.isFinite(fromPayload) && fromPayload >= 1) {
+      return Math.min(Math.floor(fromPayload), 365);
+    }
+    return DEFAULT_PHOTO_DAP_CANCELLATION_DAYS_BEFORE_SESSION;
+  }, [dapCancellationDaysFromAvailability, payload?.cancellationDaysBeforeSession]);
+
+  const dapCancellationDaysUnit = t(
+    dapCancellationDays === 1
+      ? 'booking.dapCancellationPolicyDayUnit'
+      : 'booking.dapCancellationPolicyDaysUnit'
+  );
+
+  const dapCheckoutSummary = useMemo(() => {
+    if (!payload || !selectedSlot) return null;
+    const lineTitle = sessionLengthLabel
+      ? `${payload.productDisplayTitle} (${sessionLengthLabel})`
+      : payload.productDisplayTitle;
+    const subtotal =
+      paymentSubtotalAmount ??
+      (selectedSlot.price != null ? selectedSlot.price * DAP_SLOT_QUANTITY : 0);
+    const tax = paymentTaxAmount ?? 0;
+    const total =
+      paymentTotalAmount != null ? paymentTotalAmount : subtotal + tax;
+    const ticketLines: CheckoutModalLineItem[] = [
+      {
+        line: {
+          category: lineTitle,
+          qty: 1,
+          pricePerUnit: subtotal,
+          itemTotal: subtotal,
+        },
+        breakdown: null,
+      },
+    ];
+    return { ticketLines, subtotal, tax, total };
+  }, [
+    payload,
+    selectedSlot,
+    sessionLengthLabel,
+    paymentSubtotalAmount,
+    paymentTaxAmount,
+    paymentTotalAmount,
+  ]);
+
+  if (!isOpen || !payload) return null;
+
+  const title =
+    step === 'payment' ? 'Payment' : payload.productDisplayTitle;
+
+  return (
+    <>
+    <div className={bookingStyles.overlay} onClick={close}>
+      <div
+        ref={dialogRef}
+        className={`booking-flow-root ${bookingStyles.dialog}`}
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="dap-dialog-title"
+        tabIndex={-1}
+      >
+        <header className={bookingStyles.header}>
+          <div className={bookingStyles.headerLeft}>
+            {step === 'payment' ? (
+              <button
+                type="button"
+                className={bookingStyles.backButton}
+                onClick={goBackToSlots}
+                aria-label="Go back"
+              >
+                <svg
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M19 12H5M12 19l-7-7 7-7" />
+                </svg>
+              </button>
+            ) : (
+              <span className={bookingStyles.headerSpacer} aria-hidden />
+            )}
+          </div>
+          <h2 id="dap-dialog-title" className={bookingStyles.title}>
+            {title}
+          </h2>
+          <div className={bookingStyles.headerRight}>
+            <button
+              type="button"
+              className={bookingStyles.closeButton}
+              onClick={close}
+              aria-label="Close"
+            >
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M18 6L6 18M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </header>
+
+        <div className={`${bookingStyles.content} booking-flow-preflight`}>
+          <div className={`${bookingStyles.screen} dap-add-on-dialog`}>
+            {(payload.collageImageIds?.length || payload.dapDescriptionSlug) ? (
+              <div className={bookingStyles.dapTopMedia}>
+                {payload.collageImageIds && payload.collageImageIds.length > 0 ? (
+                  <div className="booking-collage-wrapper">
+                    <DapFlowCollage
+                      imageIds={payload.collageImageIds}
+                      altPrefix={payload.productDisplayTitle}
+                    />
+                  </div>
+                ) : null}
+                {payload.dapDescriptionSlug ? (
+                  <DapTourDescription slug={payload.dapDescriptionSlug} />
+                ) : null}
+              </div>
+            ) : null}
+            {step === 'reference' && (
+              <>
+              <form onSubmit={handleLoadSlots} className={bookingStyles.dapForm}>
+                <label className={bookingStyles.dapField}>
+                  <span className={bookingStyles.dapLabel}>Booking reference</span>
+                  <input
+                    type="text"
+                    value={primaryBookingReference}
+                    onChange={(e) => {
+                      refPreviewSeqRef.current += 1;
+                      setPrimaryBookingReference(e.target.value);
+                      setRefPreviewItinerary([]);
+                      setRefPreviewStatus('idle');
+                      setRefPreviewTargetRef('');
+                      setSlotsLoadedKey(null);
+                      setSlots([]);
+                      setPrimaryItineraryDisplay([]);
+                      setDapBookingDaySlotStartIso(null);
+                      setDapCancellationDaysFromAvailability(null);
+                      setSelectedSlot(null);
+                      setLoadError(null);
+                    }}
+                    placeholder="e.g. QGR5WBWZ"
+                    autoComplete="off"
+                    disabled={loadingSlots}
+                  />
+                </label>
+                <label className={bookingStyles.dapField}>
+                  <span className={bookingStyles.dapLabel}>Last name</span>
+                  <input
+                    type="text"
+                    value={primaryBookingLastName}
+                    onChange={(e) => {
+                      refPreviewSeqRef.current += 1;
+                      setPrimaryBookingLastName(e.target.value);
+                      setRefPreviewItinerary([]);
+                      setRefPreviewStatus('idle');
+                      setRefPreviewTargetRef('');
+                      setLoadError(null);
+                    }}
+                    placeholder="As entered at booking"
+                    autoComplete="family-name"
+                    disabled={loadingSlots}
+                  />
+                </label>
+                {refSummaryPhase !== 'idle' ? (
+                  <ItineraryReadOnlySummary
+                    title={t('booking.dapYourCurrentItinerary')}
+                    dateSubtitle={dapItineraryDateSubtitle}
+                    itineraryItems={
+                      refSummaryPhase === 'ready'
+                        ? refSummaryItineraryDisplay
+                        : null
+                    }
+                    status={
+                      refSummaryPhase === 'loading'
+                        ? 'loading'
+                        : refSummaryPhase === 'error'
+                          ? 'error'
+                          : 'ready'
+                    }
+                    loadingMessage={t('booking.dapRefItineraryLoading')}
+                    errorMessage={t('booking.dapRefItineraryLookupFailed')}
+                    emptyMessage={t('booking.dapRefItineraryEmpty')}
+                    t={t}
+                    sticky
+                    photoSessionPreview={dapPhotoSessionPreview}
+                    className={bookingStyles.dapRefItinerarySummary}
+                    titleClassName={bookingStyles.dapRefItinerarySummaryTitle}
+                  />
+                ) : null}
+                {showOptionPicker && payload.productOptions && (
+                  <div className={bookingStyles.dapField}>
+                    <span className={bookingStyles.dapLegend} id="dap-session-length-label">
+                      Session length
+                    </span>
+                    <div
+                      className={bookingStyles.dapSessionOptionGrid}
+                      role="group"
+                      aria-labelledby="dap-session-length-label"
+                    >
+                      {payload.productOptions.map((opt) => {
+                        const selected =
+                          selectedProductOptionId === opt.dependentAddOnProductOptionId;
+                        return (
+                          <button
+                            key={opt.dependentAddOnProductOptionId}
+                            type="button"
+                            disabled={loadingSlots}
+                            className={
+                              selected
+                                ? `${bookingStyles.dapSessionOptionBtn} ${bookingStyles.dapSessionOptionBtnSelected}`
+                                : bookingStyles.dapSessionOptionBtn
+                            }
+                            onClick={() =>
+                              void handleSessionOptionSelect(
+                                opt.dependentAddOnProductOptionId
+                              )
+                            }
+                          >
+                            <span className={bookingStyles.dapSessionOptionTitle}>
+                              {opt.label}
+                            </span>
+                            {opt.photosLabel ? (
+                              <span className={bookingStyles.dapSessionOptionMeta}>
+                                {opt.photosLabel}
+                              </span>
+                            ) : null}
+                            {opt.startingAtLabel ? (
+                              <span className={bookingStyles.dapSessionOptionPrice}>
+                                {opt.startingAtLabel}
+                              </span>
+                            ) : null}
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </div>
+                )}
+                {showOptionPicker && loadingSlots && (
+                  <p className={bookingStyles.dapIntro} aria-live="polite">
+                    Loading available times…
+                  </p>
+                )}
+                {loadError && (
+                  <p className={bookingStyles.dapError} role="alert">
+                    {loadError}
+                  </p>
+                )}
+                {!showOptionPicker && (
+                  <button
+                    type="submit"
+                    disabled={loadingSlots}
+                    className="dap-add-on-primary"
+                  >
+                    {loadingSlots ? 'Loading…' : 'See available times'}
+                  </button>
+                )}
+            {slotsPanelVisible ? (
+              <div
+                className={`${bookingStyles.dapForm} ${bookingStyles.dapFormSlotsTight} ${bookingStyles.dapSlotsPanelBelow}`}
+              >
+                <p className={bookingStyles.dapMetaLine}>
+                  Booking{' '}
+                  <span className={bookingStyles.dapRefMono}>
+                    {formatBookingRefForDisplay(primaryBookingReference) ||
+                      primaryBookingReference.trim()}
+                  </span>
+                  {sessionLengthLabel ? (
+                    <>
+                      {' '}
+                      · Session: {sessionLengthLabel}
+                    </>
+                  ) : null}
+                </p>
+                {slots.length === 0 ? (
+                  <p className={bookingStyles.dapIntro}>
+                    No times are available for this add-on with your booking. Contact us
+                    if you need help finding a time that fits your trip.
+                  </p>
+                ) : (
+                  <>
+                    <label
+                      className={`${returnTimeStyles.label} ${bookingStyles.dapSessionPickerLabel}`}
+                    >
+                      {t('booking.selectPhotoSessionTime')}
+                    </label>
+                    <div className={returnTimeStyles.list}>
+                      {slots.map((slot) => {
+                        const id = `${slot.offeringId}-${slot.slotStart}-${slot.slotEnd}`;
+                        const selected = slotsEqual(selectedSlot, slot);
+                        const photographer = slot.resourceName ?? slot.resourceId;
+                        const spotsLeft = slot.capacityRemaining;
+                        const soldOut = spotsLeft === 0;
+                        const sessionDateLabel = formatSlotSessionDate(slot.slotStart);
+                        const sessionTimeRange = formatSlotTimeRange(
+                          slot.slotStart,
+                          slot.slotEnd
+                        );
+                        const priceLine =
+                          slot.price != null && slot.currency
+                            ? `${slot.currency} ${slot.price.toFixed(2)}`
+                            : '—';
+                        return (
+                          <div key={id} className={bookingStyles.dapSlotRow}>
+                            <button
+                              type="button"
+                              aria-pressed={selected}
+                              disabled={soldOut}
+                              className={`${returnTimeStyles.btn} ${
+                                soldOut
+                                  ? returnTimeStyles.btnDisabled
+                                  : selected
+                                    ? `${returnTimeStyles.btnSelected} ${bookingStyles.dapSlotBtnSelected}`
+                                    : returnTimeStyles.btnAvailable
+                              }`}
+                              onClick={() => {
+                                if (soldOut) return;
+                                clearPaymentPrepForSlotChange();
+                                setSelectedSlot((prev) =>
+                                  slotsEqual(prev, slot) ? null : slot
+                                );
+                                setConfirmError(null);
+                              }}
+                            >
+                              <div className={returnTimeStyles.content}>
+                                <div className={returnTimeStyles.details}>
+                                  <div className={returnTimeStyles.time}>
+                                    <div className={bookingStyles.dapSlotDateLine}>
+                                      {sessionDateLabel}
+                                    </div>
+                                    <div className={bookingStyles.dapSlotTimeRangeLine}>
+                                      {sessionTimeRange}
+                                    </div>
+                                  </div>
+                                  <div className={returnTimeStyles.location}>
+                                    Photographer: {photographer}
+                                  </div>
+                                  {soldOut ? (
+                                    <div className={returnTimeStyles.soldOut}>
+                                      {t('booking.soldOut')}
+                                    </div>
+                                  ) : null}
+                                </div>
+                                <div
+                                  className={`${returnTimeStyles.price} ${returnTimeStyles.priceIncluded}`}
+                                >
+                                  {priceLine}
+                                </div>
+                              </div>
+                            </button>
+                          </div>
+                        );
+                      })}
+                    </div>
+                    {selectedSlot && dapCheckoutQuestions.length > 0 ? (
+                      <div className={bookingStyles.dapCheckoutQuestions}>
+                        {dapCheckoutQuestions.map((q) => (
+                          <div key={q.id} className={bookingStyles.dapCheckoutQuestionField}>
+                            {q.type === 'TEXT' ? (
+                              <>
+                                <label
+                                  className={bookingStyles.dapCheckoutQuestionLabel}
+                                  htmlFor={`dap-checkout-q-${q.id}`}
+                                >
+                                  {q.label}
+                                  {q.required ? (
+                                    <span
+                                      className={checkoutFormStyles.required}
+                                      aria-hidden
+                                    >
+                                      {' '}
+                                      *
+                                    </span>
+                                  ) : null}
+                                </label>
+                                <textarea
+                                  id={`dap-checkout-q-${q.id}`}
+                                  className={checkoutFormStyles.input}
+                                  rows={3}
+                                  value={dapCheckoutAnswers[q.id] ?? ''}
+                                  placeholder={q.placeholder ?? undefined}
+                                  maxLength={q.maxLength ?? undefined}
+                                  onChange={(e) => {
+                                    setDapCheckoutAnswers((prev) => ({
+                                      ...prev,
+                                      [q.id]: e.target.value,
+                                    }));
+                                    setConfirmError(null);
+                                  }}
+                                />
+                                {q.helpText ? (
+                                  <p className={bookingStyles.dapCheckoutQuestionHelp}>
+                                    {q.helpText}
+                                  </p>
+                                ) : null}
+                              </>
+                            ) : (
+                              <div className={bookingStyles.dapCheckoutCheckboxQuestion}>
+                                <label className={checkoutFormStyles.adminCheckbox}>
+                                  <input
+                                    type="checkbox"
+                                    checked={dapCheckoutAnswers[q.id] === 'true'}
+                                    onChange={(e) => {
+                                      setDapCheckoutAnswers((prev) => ({
+                                        ...prev,
+                                        [q.id]: e.target.checked ? 'true' : 'false',
+                                      }));
+                                      setConfirmError(null);
+                                    }}
+                                  />
+                                  <span>
+                                    {q.label}
+                                    {q.required ? (
+                                      <span
+                                        className={checkoutFormStyles.required}
+                                        aria-hidden
+                                      >
+                                        {' '}
+                                        *
+                                      </span>
+                                    ) : null}
+                                  </span>
+                                </label>
+                                {q.helpText ? (
+                                  <p className={bookingStyles.dapCheckoutQuestionHelp}>
+                                    {q.helpText}
+                                  </p>
+                                ) : null}
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    ) : null}
+                    {confirmError && (
+                      <p className={bookingStyles.dapError} role="alert">
+                        {confirmError}
+                      </p>
+                    )}
+                    <div
+                      className={`${checkoutFormStyles.section} ${bookingStyles.dapCheckoutSectionPlain}`}
+                    >
+                      <p className={bookingStyles.dapCancellationFinePrint}>
+                        <strong>{t('booking.dapCancellationPolicyHeading')}:</strong>{' '}
+                        {t('booking.dapCancellationPolicyBody', {
+                          days: dapCancellationDays,
+                          daysUnit: dapCancellationDaysUnit,
+                        })}
+                      </p>
+                      <div
+                        className={`${checkoutFormStyles.submitBtnWrapper} ${bookingStyles.dapSubmitBtnWrapper}`}
+                      >
+                        <Button
+                          type="button"
+                          disabled={!selectedSlot || preparingPayment}
+                          onClick={() => void goToPaymentStep()}
+                          isLarge
+                          hoverColor={ButtonHoverColor.Turquoise}
+                          className={checkoutFormStyles.submitBtn}
+                        >
+                          {t('booking.continueToPayment')}
+                        </Button>
+                      </div>
+                      <p className={checkoutFormStyles.secureNote}>
+                        {t('booking.securePayment')}
+                      </p>
+                    </div>
+                  </>
+                )}
+              </div>
+            ) : null}
+              </form>
+              </>
+            )}
+
+            {step === 'payment' && selectedSlot ? (
+              <p className="sr-only">
+                {t('booking.reviewAndPay') || 'Review and pay'}
+              </p>
+            ) : null}
+
+          </div>
+        </div>
+      </div>
+    </div>
+
+    {step === 'payment' && selectedSlot && dapCheckoutSummary ? (
+      <CheckoutModal
+        open
+        onClose={() => {
+          goBackToSlots();
+        }}
+        clientSecret={paymentClientSecret ?? ''}
+        reservationReference={
+          formatBookingRefForDisplay(primaryBookingReference.trim()) ||
+          primaryBookingReference.trim()
+        }
+        successUrlOverride={manageBookingAfterPayUrl}
+        ticketLines={dapCheckoutSummary.ticketLines}
+        feeLineItems={[]}
+        returnPriceAdjustment={0}
+        cancellationPolicyFee={0}
+        subtotal={dapCheckoutSummary.subtotal}
+        tax={dapCheckoutSummary.tax}
+        total={dapCheckoutSummary.total}
+        promoDiscountAmount={0}
+        discountLabel={null}
+        totalQuantity={1}
+        isTaxIncludedInPrice={false}
+        taxRate={
+          dapCheckoutSummary.tax > 0 && dapCheckoutSummary.subtotal > 0
+            ? dapCheckoutSummary.tax / dapCheckoutSummary.subtotal
+            : 0
+        }
+        currency={toCurrency(paymentCurrency)}
+        locale={locale}
+        t={t}
+      />
+    ) : null}
+    </>
+  );
+}