@ticketboothapp/booking 0.1.11 → 0.1.12

package/src/components/booking/BookingDialog.tsx

@@ -0,0 +1,356 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { useBookingSourceMetadataFromLocation } from '@/hooks/useBookingSourceMetadataFromLocation';
+import { useBookingDialog } from '@/providers/booking-dialog-provider';
+import { getProductByIdOrSlug, buildMinimalProductFromConfig } from '@/lib/products-config';
+import { getProduct, type Product } from '@/lib/booking-api';
+import { ENV } from '@/lib/env';
+import defaultStrings from '@/strings';
+import './booking-flow.css';
+import BookingProductGrid from './BookingProductGrid';
+import { BookingFlow } from './BookingFlow';
+import { PrivateShuttleBookingFlow } from './PrivateShuttleBookingFlow';
+import { BookingFlowPreview } from './BookingFlowPreview';
+import { useIsBookingLaunchLive } from '@/hooks/useIsBookingLaunchLive';
+import styles from './BookingDialog.module.css';
+
+function BookFlowScreen({
+  productId,
+  onBack,
+  onComplete,
+  onProductLoaded,
+  contentRef,
+  isPartialLaunch,
+}: {
+  productId: string;
+  onBack: () => void;
+  onComplete: () => void;
+  onProductLoaded?: (productName: string) => void;
+  contentRef?: React.RefObject<HTMLDivElement | null>;
+  isPartialLaunch: boolean;
+}) {
+  const bookingSourceAttribution = useBookingSourceMetadataFromLocation();
+  const [product, setProduct] = useState<Product | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const config = getProductByIdOrSlug(productId);
+  const apiProductId = config?.productId ?? productId;
+
+  // Build minimal product from config for immediate availability fetch (no /products wait)
+  const minimalProduct = config
+    ? buildMinimalProductFromConfig(config, ENV.COMPANY_ID)
+    : null;
+
+  useEffect(() => {
+    if (isPartialLaunch) return; // No API needed for partial launch
+    let cancelled = false;
+    setError(null);
+    getProduct(apiProductId, ENV.COMPANY_ID)
+      .then((p) => {
+        if (!cancelled && p) setProduct(p);
+        else if (!cancelled && !p && !config) setError('Product not found');
+      })
+      .catch((err) => {
+        if (!cancelled) setError(err instanceof Error ? err.message : 'Failed to load product');
+      });
+    return () => { cancelled = true; };
+  }, [apiProductId, config, isPartialLaunch]);
+
+  useEffect(() => {
+    if (product) {
+      onProductLoaded?.(product.name);
+    }
+  }, [product?.name, onProductLoaded]);
+
+  // Partial launch: show collage + description immediately (no API)
+  if (isPartialLaunch) {
+    return (
+      <div className={`${styles.screen} booking-flow-preflight`}>
+        <BookingFlowPreview productId={productId} defaultExpanded />
+      </div>
+    );
+  }
+
+  // No config: must wait for API (product not in products-config)
+  if (!config) {
+    if (error) {
+      return (
+        <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>
+            <button type="button" onClick={onBack} className="text-emerald-600 hover:underline">
+              Go back
+            </button>
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div className={`${styles.screen} booking-flow-preflight`}>
+        <div className="flex items-center justify-center py-16">
+          <div className="text-stone-600">{defaultStrings.common.chooseYourExperience} — Loading...</div>
+        </div>
+      </div>
+    );
+  }
+
+  // Use full product when loaded, otherwise minimal from config (availabilities fetch starts immediately)
+  const displayProduct = product ?? minimalProduct!;
+
+  if (error && !product) {
+    return (
+      <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>
+          <button type="button" onClick={onBack} className="text-emerald-600 hover:underline">
+            Go back
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`${styles.screen} booking-flow-preflight`}>
+      {displayProduct.productType === 'PRIVATE_SHUTTLE' ? (
+        <PrivateShuttleBookingFlow
+          product={displayProduct}
+          productId={productId}
+          onBack={onBack}
+          currency="CAD"
+          contentRef={contentRef}
+          bookingSourceAttribution={bookingSourceAttribution}
+          onSuccess={() => {
+            onComplete();
+          }}
+        />
+      ) : (
+        <BookingFlow
+          product={displayProduct}
+          productId={productId}
+          onBack={onBack}
+          currency="CAD"
+          contentRef={contentRef}
+          bookingSourceAttribution={bookingSourceAttribution}
+          onSuccess={() => {
+            onComplete();
+          }}
+          isPartialLaunch={isPartialLaunch}
+        />
+      )}
+    </div>
+  );
+}
+
+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 BookingDialog() {
+  const {
+    isOpen,
+    close,
+    stack,
+    pop,
+    canGoBack,
+    productGridRestoreState,
+    clearProductGridRestoreState,
+  } = useBookingDialog();
+  const isLaunchLive = useIsBookingLaunchLive();
+  const isPartialLaunch = !isLaunchLive;
+  const currentScreen = stack[stack.length - 1];
+  const [productName, setProductName] = useState<string | null>(null);
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  // Use products-config for instant header title (no API wait)
+  const displayNameFromConfig =
+    currentScreen?.type === 'book-flow'
+      ? getProductByIdOrSlug(currentScreen.productId)?.display?.shortName ?? null
+      : null;
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (currentScreen.type === 'product-grid') {
+      setProductName(null);
+    }
+  }, [currentScreen.type]);
+
+  // Reset scroll when switching to book-flow so we don't appear partially scrolled
+  // (product-grid restores its own scroll when returning from a product)
+  useEffect(() => {
+    if (currentScreen.type === 'book-flow' && contentRef.current) {
+      contentRef.current.scrollTop = 0;
+    }
+  }, [currentScreen.type, currentScreen.type === 'book-flow' ? currentScreen.productId : null]);
+
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+      document.body.setAttribute('data-booking-dialog-open', '');
+      // Pause all background videos (exclude videos inside the dialog)
+      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') {
+        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]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div ref={overlayRef} className={`${styles.overlay} booking-dialog-overlay`} onClick={() => close()}>
+      <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}>
+            {canGoBack ? (
+              <button
+                type="button"
+                className={styles.backButton}
+                onClick={pop}
+                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={styles.headerSpacer} aria-hidden />
+            )}
+          </div>
+          <h2
+            id="booking-dialog-title"
+            className={
+              currentScreen.type === 'product-grid'
+                ? styles.titleProductGrid
+                : styles.title
+            }
+          >
+            {currentScreen.type === 'product-grid' && defaultStrings.common.chooseYourExperience}
+            {currentScreen.type === 'book-flow' && (displayNameFromConfig ?? productName ?? defaultStrings.common.book)}
+          </h2>
+          <div className={styles.headerRight}>
+            <button
+              type="button"
+              className={styles.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 ref={contentRef} className={styles.content}>
+          {currentScreen.type === 'product-grid' && (
+            <div className={styles.screen}>
+              <BookingProductGrid
+                contentRef={contentRef}
+                restoreState={productGridRestoreState}
+                onRestoreApplied={clearProductGridRestoreState}
+                initialFilterId={currentScreen.filterId}
+                isPartialLaunch={isPartialLaunch}
+              />
+            </div>
+          )}
+          {currentScreen.type === 'book-flow' && (
+            <BookFlowScreen
+              productId={currentScreen.productId}
+              onBack={pop}
+              onComplete={() => close({ reason: 'completed' })}
+              onProductLoaded={setProductName}
+              contentRef={contentRef}
+              isPartialLaunch={isPartialLaunch}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}