@ticketboothapp/booking 0.1.23 → 1.2.24

package/src/components/booking/DependentAddOnBookingDialog.tsx

@@ -1,1350 +0,0 @@
-'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}
-    </>
-  );
-}