@ticketboothapp/booking 0.1.11 → 0.1.13

package/src/components/booking/ChangeBookingDialog.tsx

@@ -0,0 +1,562 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { getProductByIdOrSlug, buildMinimalProductFromConfig } from '@/lib/products-config';
+import { getProduct, type Product } from '@/lib/booking-api';
+import { ENV } from '@/lib/env';
+import { formatCurrencyAmount, type Currency } from '@/lib/currency';
+import { BookingFlow, type ChangeFlowSelectionPreview } from './BookingFlow';
+import { useBookingSourceMetadataFromLocation } from '@/hooks/useBookingSourceMetadataFromLocation';
+import styles from './BookingDialog.module.css';
+import './booking-flow.css';
+import type { BookingData } from '@/components/BookingDetails';
+import { getItineraryStepLabel } from '@/lib/booking/itinerary-display';
+import { effectiveProductOptionIdForChangeFlow } from '@/lib/booking/product-option-id';
+
+interface ChangeBookingDialogProps {
+  isOpen: boolean;
+  booking: BookingData;
+  onClose: () => void;
+  onChangeCompleted?: (preview: ChangeFlowSelectionPreview | null) => void;
+}
+
+function formatBookingDate(dateTime: string | null | undefined): string {
+  if (!dateTime) return '—';
+  try {
+    const date = new Date(dateTime);
+    return date.toLocaleDateString('en-US', {
+      weekday: 'short',
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      timeZone: 'America/Denver',
+    });
+  } catch {
+    return dateTime;
+  }
+}
+
+function formatBookingItems(
+  items: Array<{ category: string; count: number }> | null | undefined
+): string {
+  if (!items?.length) return '—';
+  const labels: Record<string, string> = {
+    ADULT: 'adult',
+    CHILD: 'child',
+    INFANT: 'infant',
+    SENIOR: 'senior',
+    STUDENT: 'student',
+  };
+  const parts = items
+    .filter((item) => item.count > 0)
+    .map((item) => {
+      const label = labels[item.category] || item.category.toLowerCase();
+      return `${item.count} ${label}${item.count !== 1 ? 's' : ''}`;
+    });
+  return parts.length > 0 ? parts.join(', ') : '—';
+}
+
+function getOriginalPromoFromReceipt(receipt: BookingData['receipt']): {
+  amount: number;
+  label: string | null;
+  code: string | null;
+} | null {
+  const line = receipt.lineItems.find((item) => {
+    const type = (item.type || '').toUpperCase();
+    const label = (item.label || '').toLowerCase();
+    return (
+      type.includes('PROMO') ||
+      type.includes('VOUCHER') ||
+      type.includes('GIFT') ||
+      label.includes('promo') ||
+      label.includes('voucher') ||
+      label.includes('gift') ||
+      label.includes('discount')
+    );
+  });
+  if (!line) return null;
+  const amount = Math.abs(line.amount || 0);
+  if (amount <= 0) return null;
+  const explicitCode = receipt.promoCode?.trim() || null;
+  const referenceCode = (line.reference || '').trim() || null;
+  const lineLabel = (line.label || '').trim();
+  const labelAfterPrefix = lineLabel.replace(/^(promo|voucher|gift\s*card|discount)\s*:\s*/i, '').trim();
+  const tokenCandidate = (labelAfterPrefix.split(/\s+/)[0] || '').replace(/^[^A-Za-z0-9]+|[^A-Za-z0-9-]+$/g, '');
+  const parsedLabelCode = /^[A-Za-z0-9-]{4,}$/.test(tokenCandidate) ? tokenCandidate : null;
+  const code = explicitCode || referenceCode || parsedLabelCode;
+  return { amount, label: line.label || receipt.promoCode || receipt.promoName || null, code };
+}
+
+type ItineraryStepLine = { time: string | null; label: string };
+
+type ChangeHighlightVariant = 'current' | 'new';
+
+function BookingChangeSummaryColumn({
+  kicker,
+  tourName,
+  dateStr,
+  ticketsStr,
+  itinerarySteps,
+  highlightVariant,
+  totalFormatted,
+  dateChanged = false,
+  ticketsChanged = false,
+  itineraryStepChanged,
+}: {
+  kicker: string;
+  tourName: string;
+  dateStr: string;
+  ticketsStr: string;
+  itinerarySteps: ItineraryStepLine[] | null;
+  highlightVariant: ChangeHighlightVariant;
+  /** e.g. "C$123.45" */
+  totalFormatted: string;
+  dateChanged?: boolean;
+  ticketsChanged?: boolean;
+  itineraryStepChanged?: boolean[];
+}) {
+  const dateClass =
+    highlightVariant === 'current' && dateChanged
+      ? 'line-through text-stone-500'
+      : highlightVariant === 'new' && dateChanged
+        ? 'font-semibold text-stone-900'
+        : '';
+  const ticketsClass =
+    highlightVariant === 'current' && ticketsChanged
+      ? 'line-through text-stone-500'
+      : highlightVariant === 'new' && ticketsChanged
+        ? 'font-semibold text-stone-900'
+        : '';
+
+  return (
+    <div
+      className="overflow-hidden rounded-lg border border-stone-200 px-4 py-3 text-sm text-stone-600"
+      style={{ background: 'var(--light-orange-background)' }}
+    >
+      <p className="text-xs font-semibold uppercase tracking-wide text-stone-500">{kicker}</p>
+      <p className="mt-1 text-base font-semibold text-stone-900">Tour: {tourName}</p>
+      <dl className="mt-3 space-y-2">
+        <div className="flex flex-wrap gap-x-2 gap-y-0">
+          <dt className="shrink-0 font-medium text-stone-500">Date:</dt>
+          <dd className="min-w-0 text-stone-800">
+            {dateClass ? <span className={dateClass}>{dateStr}</span> : dateStr}
+          </dd>
+        </div>
+        <div className="flex flex-wrap gap-x-2 gap-y-0">
+          <dt className="shrink-0 font-medium text-stone-500">Tickets:</dt>
+          <dd className="min-w-0 text-stone-800">
+            {ticketsClass ? <span className={ticketsClass}>{ticketsStr}</span> : ticketsStr}
+          </dd>
+        </div>
+        <div>
+          <dt className="font-medium text-stone-500">Itinerary:</dt>
+          <dd className="mt-1">
+            {itinerarySteps && itinerarySteps.length > 0 ? (
+              <ul className="list-none pl-0 text-sm leading-snug text-stone-700">
+                {itinerarySteps.map((step, i) => (
+                  <li
+                    key={i}
+                    className={
+                      itineraryStepChanged?.[i]
+                        ? highlightVariant === 'current'
+                          ? 'min-w-0 line-through text-stone-500'
+                          : 'min-w-0 font-semibold text-stone-900'
+                        : 'min-w-0'
+                    }
+                  >
+                    {step.time ? (
+                      <>
+                        <span
+                          className={
+                            itineraryStepChanged?.[i]
+                              ? highlightVariant === 'current'
+                                ? 'font-medium text-stone-500'
+                                : 'font-semibold text-stone-900'
+                              : 'font-medium text-stone-800'
+                          }
+                        >
+                          {step.time}
+                        </span>
+                        <span className={itineraryStepChanged?.[i] && highlightVariant === 'new' ? 'text-stone-400' : 'text-stone-500'}>
+                          {' '}
+                          ·{' '}
+                        </span>
+                        <span className={itineraryStepChanged?.[i] && highlightVariant === 'new' ? 'font-semibold text-stone-900' : undefined}>
+                          {step.label}
+                        </span>
+                      </>
+                    ) : (
+                      <span
+                        className={
+                          itineraryStepChanged?.[i] && highlightVariant === 'new' ? 'font-semibold text-stone-900' : undefined
+                        }
+                      >
+                        {step.label}
+                      </span>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <span className="text-sm text-stone-500">—</span>
+            )}
+          </dd>
+        </div>
+      </dl>
+      <div className="mt-3 flex flex-wrap items-baseline justify-between gap-x-2 border-t border-stone-200/80 pt-3">
+        <span className="font-medium text-stone-500">Total:</span>
+        <span className="font-semibold tabular-nums text-stone-900">{totalFormatted}</span>
+      </div>
+    </div>
+  );
+}
+
+function computeItineraryStepChanged(
+  stepsA: ItineraryStepLine[] | null,
+  stepsB: ItineraryStepLine[] | null,
+): boolean[] | undefined {
+  if (!stepsA) return undefined;
+  return stepsA.map((a, i) => {
+    const b = stepsB?.[i];
+    return !b || a.time !== b.time || a.label !== b.label;
+  });
+}
+
+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'
+  );
+}
+
+export default function ChangeBookingDialog({
+  isOpen,
+  booking,
+  onClose,
+  onChangeCompleted,
+}: ChangeBookingDialogProps) {
+  const bookingSourceAttribution = useBookingSourceMetadataFromLocation();
+  const [product, setProduct] = useState<Product | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [newBookingPreview, setNewBookingPreview] = useState<ChangeFlowSelectionPreview | null>(null);
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  const bookingProductId = booking.productId;
+  // Memoize so the load effect does not re-run every render (buildMinimalProductFromConfig returns a new object each call).
+  const config = useMemo(() => getProductByIdOrSlug(bookingProductId), [bookingProductId]);
+  const productSlug = config?.display?.slug ?? bookingProductId;
+  const apiProductId = config?.productId ?? bookingProductId;
+  const minimalProduct = useMemo(
+    () => (config ? buildMinimalProductFromConfig(config, ENV.COMPANY_ID) : null),
+    [config]
+  );
+
+  useEffect(() => {
+    if (!isOpen) return;
+    let cancelled = false;
+    setError(null);
+    if (minimalProduct) setProduct(minimalProduct);
+    getProduct(apiProductId, ENV.COMPANY_ID)
+      .then((p) => {
+        if (!cancelled && p) setProduct(p);
+      })
+      .catch((err) => {
+        if (!cancelled) setError(err instanceof Error ? err.message : 'Failed to load product');
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [isOpen, apiProductId, minimalProduct]);
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+      document.body.setAttribute('data-booking-dialog-open', '');
+      const overlay = overlayRef.current;
+      const videos = document.querySelectorAll('video');
+      const pausedVideos: HTMLVideoElement[] = [];
+      videos.forEach((video) => {
+        if (!overlay?.contains(video) && !video.paused) {
+          video.pause();
+          pausedVideos.push(video);
+        }
+      });
+      return () => {
+        document.body.style.overflow = 'unset';
+        document.body.removeAttribute('data-booking-dialog-open');
+        pausedVideos.forEach((v) => v.play().catch(() => {}));
+      };
+    }
+    document.body.style.overflow = 'unset';
+    document.body.removeAttribute('data-booking-dialog-open');
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+        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, onClose]);
+
+  useEffect(() => {
+    if (isOpen && dialogRef.current) dialogRef.current.focus();
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) setNewBookingPreview(null);
+  }, [isOpen]);
+
+  const handleChangeFlowSelectionPreview = useCallback((preview: ChangeFlowSelectionPreview | null) => {
+    setNewBookingPreview(preview);
+  }, []);
+
+  if (!isOpen) return null;
+
+  const originalPromo = getOriginalPromoFromReceipt(booking.receipt);
+  const lockedPromoCode = booking.receipt.promoCode?.trim() || originalPromo?.code || null;
+  const initialValues = {
+    bookingReference: booking.bookingReference ?? null,
+    dateTime: booking.dateTime ?? null,
+    availabilityId: booking.availabilityId ?? null,
+    productOptionId: effectiveProductOptionIdForChangeFlow(booking),
+    pickupLocationId: booking.pickupLocationId ?? null,
+    returnAvailabilityId: booking.returnAvailabilityId ?? null,
+    returnDateTime: booking.returnDateTime ?? null,
+    travelerHotel: booking.travelerHotel ?? null,
+    bookingItems: booking.bookingItems ?? null,
+    addOnSelections: booking.addOnSelections ?? null,
+    passengerCount: booking.privateShuttleDetails?.requestedPassengerCount ?? booking.privateShuttleDetails?.passengerCount ?? null,
+    customer: {
+      firstName: booking.customer?.firstName ?? null,
+      lastName: booking.customer?.lastName ?? null,
+      email: booking.customer?.email ?? null,
+    },
+    promoCode: lockedPromoCode,
+    cancellationPolicyId: booking.cancellationPolicyId ?? null,
+  };
+  const receiptCurrency = (booking.receipt.currency as Currency) || 'CAD';
+  // Use booking + static config only — not `product.name` (minimal → API product swaps labels).
+  const tourName =
+    booking.productName?.trim() ||
+    config?.display?.shortName?.trim() ||
+    bookingProductId;
+  const ticketsLine =
+    booking.productType === 'PRIVATE_SHUTTLE'
+      ? `${booking.privateShuttleDetails?.requestedPassengerCount ?? booking.privateShuttleDetails?.passengerCount ?? 0} passengers`
+      : formatBookingItems(booking.bookingItems);
+
+  const currentItinerarySteps: ItineraryStepLine[] | null =
+    booking.itineraryDisplay && booking.itineraryDisplay.length > 0
+      ? booking.itineraryDisplay.map((step) => ({
+          time: step.time?.trim() || null,
+          label: getItineraryStepLabel(step),
+        }))
+      : null;
+
+  const newDateStr = newBookingPreview?.dateTime
+    ? formatBookingDate(newBookingPreview.dateTime)
+    : '—';
+  const newTicketsStr = newBookingPreview?.ticketsLine ?? '—';
+  const newItinerarySteps: ItineraryStepLine[] | null =
+    newBookingPreview?.itinerarySteps && newBookingPreview.itinerarySteps.length > 0
+      ? newBookingPreview.itinerarySteps
+      : null;
+
+  const showNewBookingColumn = Boolean(newBookingPreview?.hasChangesFromInitial);
+  const dateChanged = Boolean(newBookingPreview?.dateChanged);
+  const ticketsChanged = Boolean(newBookingPreview?.ticketsChanged);
+  const currentTotalFormatted = formatCurrencyAmount(
+    booking.receipt.totalAmount,
+    receiptCurrency,
+    'en',
+  );
+  const newTotalFormatted =
+    newBookingPreview != null
+      ? formatCurrencyAmount(
+          newBookingPreview.selectionTotal,
+          newBookingPreview.selectionCurrency,
+          'en',
+        )
+      : '—';
+  const itineraryStepChangedCurrent = showNewBookingColumn
+    ? computeItineraryStepChanged(currentItinerarySteps, newItinerarySteps)
+    : undefined;
+  const itineraryStepChangedNew = showNewBookingColumn
+    ? computeItineraryStepChanged(newItinerarySteps, currentItinerarySteps)
+    : undefined;
+
+  return (
+    <div ref={overlayRef} className={`${styles.overlay} booking-dialog-overlay`} onClick={onClose}>
+      <div
+        ref={dialogRef}
+        className={`booking-flow-root ${styles.dialog}`}
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="booking-dialog-title"
+        tabIndex={-1}
+      >
+        <header className={styles.header}>
+          <div className={styles.headerLeft}>
+            <span className={styles.headerSpacer} aria-hidden />
+          </div>
+          <h2 id="booking-dialog-title" className={styles.title}>
+            Change Booking
+          </h2>
+          <div className={styles.headerRight}>
+            <button
+              type="button"
+              className={styles.closeButton}
+              onClick={onClose}
+              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 ref={contentRef} className={styles.content}>
+          {!product && !error && (
+            <div className={`${styles.screen} booking-flow-preflight`}>
+              <div className="flex items-center justify-center py-16">
+                <div className="text-stone-600">Loading booking flow...</div>
+              </div>
+            </div>
+          )}
+          {error && (
+            <div className={`${styles.screen} booking-flow-preflight`}>
+              <div className="flex flex-col items-center justify-center py-16 gap-4">
+                <p className="text-red-600">{error}</p>
+              </div>
+            </div>
+          )}
+          {product && (
+            <div className={`${styles.screen} booking-flow-preflight`}>
+              <div
+                className="sticky top-0 z-10 mb-4 flex w-full flex-col gap-4 rounded-2xl py-4 md:flex-row md:items-stretch"
+                style={{ background: 'var(--light-orange-background)' }}
+              >
+                <motion.div
+                  layout
+                  transition={{ type: 'spring', stiffness: 380, damping: 34 }}
+                  className={
+                    showNewBookingColumn
+                      ? 'min-w-0 md:flex-1 md:basis-0'
+                      : 'min-w-0 w-full'
+                  }
+                >
+                  <BookingChangeSummaryColumn
+                    highlightVariant="current"
+                    kicker="Current booking"
+                    tourName={tourName}
+                    dateStr={formatBookingDate(booking.dateTime)}
+                    ticketsStr={ticketsLine}
+                    itinerarySteps={currentItinerarySteps}
+                    totalFormatted={currentTotalFormatted}
+                    dateChanged={dateChanged}
+                    ticketsChanged={ticketsChanged}
+                    itineraryStepChanged={itineraryStepChangedCurrent}
+                  />
+                </motion.div>
+                <AnimatePresence initial={false} mode="popLayout">
+                  {showNewBookingColumn && (
+                    <motion.div
+                      key="new-booking-summary"
+                      layout
+                      initial={{ opacity: 0, x: 16, scale: 0.99 }}
+                      animate={{ opacity: 1, x: 0, scale: 1 }}
+                      exit={{ opacity: 0, x: 16, scale: 0.99 }}
+                      transition={{ type: 'spring', stiffness: 380, damping: 34 }}
+                      className="min-w-0 md:flex-1 md:basis-0"
+                    >
+                      <BookingChangeSummaryColumn
+                        highlightVariant="new"
+                        kicker="New booking"
+                        tourName={tourName}
+                        dateStr={newDateStr}
+                        ticketsStr={newTicketsStr}
+                        itinerarySteps={newItinerarySteps}
+                        totalFormatted={newTotalFormatted}
+                        dateChanged={dateChanged}
+                        ticketsChanged={ticketsChanged}
+                        itineraryStepChanged={itineraryStepChangedNew}
+                      />
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+              <BookingFlow
+                product={product}
+                productId={productSlug}
+                onBack={onClose}
+                currency="CAD"
+                contentRef={contentRef}
+                bookingSourceAttribution={bookingSourceAttribution}
+                onSuccess={() => {
+                  onChangeCompleted?.(newBookingPreview);
+                  onClose();
+                }}
+                mode="change"
+                hideItineraryBox
+                originalReceipt={{
+                  subtotal: booking.receipt.subtotalBeforeTax,
+                  tax: booking.receipt.taxAmount,
+                  total: booking.receipt.totalAmount,
+                  currency: receiptCurrency,
+                  promoAmount: originalPromo?.amount,
+                  promoLabel: originalPromo?.label,
+                  lineItems: booking.receipt.lineItems?.map((line) => ({
+                    type: line.type,
+                    label: line.label,
+                    amount: line.amount,
+                    quantity: line.quantity ?? undefined,
+                  })),
+                }}
+                initialValues={initialValues}
+                onChangeFlowSelectionPreview={handleChangeFlowSelectionPreview}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}