@ticketboothapp/booking 0.1.22 → 1.2.24

package/src/components/booking/ChangeBookingDialog.tsx

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