@ticketboothapp/booking 0.1.23 → 1.2.24

package/src/components/booking/BookingDialog.tsx

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