@ticketboothapp/booking 0.1.3 → 0.1.7

package/src/components/BookingWidget.tsx

@@ -0,0 +1,349 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { getProducts, type Product, setAuthToken } from '@/lib/api';
+import { ProductList } from '@/components/ProductList';
+import { BookingFlow } from '@/components/BookingFlow';
+import { PrivateShuttleBookingFlow } from '@/components/PrivateShuttleBookingFlow';
+import { LanguageSwitcher } from '@/components/LanguageSwitcher';
+import { CurrencySwitcher, useCurrency, type Currency } from '@/components/CurrencySwitcher';
+import { ErrorBoundary } from '@/components/ErrorBoundary';
+import { CompanyProvider } from '@/contexts/CompanyContext';
+import { BookingAppProvider, type BookingAppMode, type BookingAppPermissions, type ManageParams } from '@/contexts/BookingAppContext';
+import { mergeTheme, themeToCssVars, type BookingTheme } from '@/lib/theme';
+
+// ============ Navigation Stack ============
+
+type Step = 'products' | 'booking';
+
+interface NavState {
+  step: Step;
+  selectedProduct: Product | null;
+}
+
+// ============ Booking Widget Props ============
+
+export interface BookingWidgetProps {
+  /**
+   * Optional product ID to start with a specific product selected
+   */
+  initialProductId?: string;
+  
+  /**
+   * Optional initial currency
+   */
+  initialCurrency?: Currency;
+  
+  /**
+   * Whether to show the header (default: true)
+   */
+  showHeader?: boolean;
+  
+  /**
+   * Optional JWT token for authentication (when embedded in provider dashboard)
+   * If provided, will use Bearer token auth instead of Basic Auth
+   */
+  authToken?: string | null;
+  
+  /**
+   * Callback when a product is selected
+   */
+  onProductSelect?: (product: Product) => void;
+  
+  /**
+   * Callback when booking is completed successfully
+   */
+  onBookingSuccess?: (data: { reservationReference: string; sessionId?: string }) => void;
+  
+  /**
+   * Callback when user navigates back
+   */
+  onBack?: () => void;
+  
+  /**
+   * Custom className for the container
+   */
+  className?: string;
+
+  /**
+   * Host context: which app is embedding the booking UI (e.g. 'standalone', 'provider-dashboard').
+   * Used together with permissions to gate features like the price breakdown tooltip.
+   */
+  mode?: BookingAppMode;
+
+  /**
+   * Permissions for this embedding context (e.g. show price breakdown only for staff).
+   * When not provided, defaults to standalone permissions (e.g. no price breakdown).
+   */
+  permissions?: Partial<BookingAppPermissions>;
+
+  /**
+   * Google Maps API key from the host. Pass the same value as NEXT_PUBLIC_GOOGLE_MAPS_API_KEY
+   * so the map works when the widget is embedded (avoids build-time env not reaching embedded code).
+   */
+  googleMapsApiKey?: string;
+
+  /**
+   * When set (e.g. in provider-dashboard), called instead of redirecting to /manage after booking;
+   * host can show the manage-booking UI in a dialog.
+   */
+  onShowManage?: (params: ManageParams) => void;
+
+  /**
+   * When set, used as Stripe return_url so payment success lands on the host (e.g. dashboard)
+   * instead of the booking app's /manage page.
+   */
+  getSuccessUrl?: (params: { reservationRef: string; lastName: string }) => string;
+
+  /**
+   * When false, the language selector is hidden. Host-controlled; default true.
+   */
+  showLanguageSelector?: boolean;
+
+  /**
+   * Optional theme overrides (colors, fonts, etc.). When not provided, default booking theme is used.
+   */
+  theme?: Partial<BookingTheme>;
+
+  /**
+   * Change booking mode: when provided with initialProduct and onChangeBooking, skip product selection
+   * and show the booking flow pre-filled for changing an existing booking.
+   */
+  initialProduct?: Product;
+  /** In change mode: pass all products so user can switch to a different product. When provided, skips fetch. */
+  products?: Product[];
+  /** Company ID for change mode (used by CompanyProvider). Required when in change mode. */
+  companyId?: string;
+  /** Booking to change (provider dashboard). Required when initialProduct + onChangeBooking are set. */
+  initialBooking?: {
+    bookingReference: string;
+    productId: string;
+    availabilityId?: string;
+    dateTime: string;
+    originalTotalAmount?: number;
+    originalCurrency?: string;
+    bookingItems: Array<{ category: string; count: number }>;
+    returnAvailabilityId?: string | null;
+    pickupLocationId?: string | null;
+    travelerHotel?: string | null;
+    startTime?: string | null;
+    privateShuttleDetails?: { passengerCount?: number };
+    cancellationPolicyId?: string | null;
+    promoCode?: string | null;
+    additionalHoursCount?: number | null;
+    addOnSelections?: Array<{ addOnId: string; variantId?: string; quantity?: number }> | null;
+  };
+  /** Called when user submits change. Receives the new booking data. Required for change mode. */
+  onChangeBooking?: (data: {
+    productId: string;
+    dateTime: string;
+    bookingItems: Array<{ category: string; count: number }>;
+    returnAvailabilityId?: string | null;
+    pickupLocationId?: string | null;
+    travelerHotel?: string | null;
+    startTime?: string | null;
+    passengerCount?: number | null;
+    childSafetySeatsCount?: number | null;
+    foodRestrictions?: string | null;
+    addOnSelections?: Array<{ addOnId: string; variantId?: string; quantity?: number }> | null;
+    cancellationPolicyId?: string | null;
+    promoCode?: string | null;
+    /** Frontend-calculated new total (used by backend for delta/refund to avoid pricing mismatch). */
+    newTotalAmount?: number;
+    /** When true: apply change but keep original receipt/price — no charge, refund, or line item updates. */
+    keepOriginalPrice?: boolean;
+    additionalHoursCount?: number | null;
+  }) => Promise<void>;
+}
+
+// ============ Booking Widget Component ============
+
+/**
+ * Embeddable booking widget component for React applications
+ * 
+ * @example
+ * ```tsx
+ * <BookingWidget 
+ *   initialProductId="prod_123"
+ *   onBookingSuccess={(data) => console.log('Booking complete!', data)}
+ * />
+ * ```
+ */
+export function BookingWidget({
+  initialProductId,
+  initialProduct,
+  initialBooking,
+  onChangeBooking,
+  products: productsProp,
+  companyId,
+  initialCurrency = 'CAD',
+  showHeader = true,
+  authToken,
+  onProductSelect,
+  onBookingSuccess,
+  onBack,
+  className = '',
+  mode = 'standalone',
+  permissions = {},
+  googleMapsApiKey,
+  onShowManage,
+  getSuccessUrl,
+  showLanguageSelector = true,
+  theme: themeOverride,
+}: BookingWidgetProps) {
+  const { currency, setCurrency } = useCurrency();
+  const theme = mergeTheme(themeOverride);
+  const themeVars = themeToCssVars(theme);
+  
+  // Set auth token for API calls when provided (for embedded use in provider dashboard)
+  useEffect(() => {
+    setAuthToken(authToken || null);
+    // Cleanup on unmount
+    return () => setAuthToken(null);
+  }, [authToken]);
+  
+  // Set initial currency if provided
+  useEffect(() => {
+    if (initialCurrency) {
+      setCurrency(initialCurrency);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Only run on mount
+  const isChangeMode = !!(initialProduct && initialBooking && onChangeBooking);
+  const [navState, setNavState] = useState<NavState>(() => {
+    if (isChangeMode && initialProduct) {
+      return { step: 'booking', selectedProduct: initialProduct };
+    }
+    return { step: 'products', selectedProduct: null };
+  });
+  const [products, setProducts] = useState<Product[]>(() =>
+    productsProp && productsProp.length > 0 ? productsProp : (isChangeMode && initialProduct ? [initialProduct] : [])
+  );
+  const [loadingProducts, setLoadingProducts] = useState(!(productsProp && productsProp.length > 0) && !isChangeMode);
+  const [error, setError] = useState('');
+
+  // Load initial product if specified (normal mode)
+  useEffect(() => {
+    if (isChangeMode) return;
+    if (initialProductId && products.length > 0) {
+      const product = products.find(p => p.productId === initialProductId || p.options?.some(o => o.optionId === initialProductId));
+      if (product) {
+        setNavState({ step: 'booking', selectedProduct: product });
+      }
+    }
+  }, [isChangeMode, initialProductId, products]);
+
+  useEffect(() => {
+    if (productsProp && productsProp.length > 0) {
+      setProducts(productsProp);
+      setLoadingProducts(false);
+      return;
+    }
+    if (isChangeMode) {
+      setLoadingProducts(false);
+      return;
+    }
+    async function fetchProducts() {
+      try {
+        const data = await getProducts();
+        setProducts(data);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load products');
+      } finally {
+        setLoadingProducts(false);
+      }
+    }
+    fetchProducts();
+  }, [isChangeMode, productsProp]);
+
+  const handleSelectProduct = useCallback((product: Product) => {
+    setNavState({ step: 'booking', selectedProduct: product });
+    onProductSelect?.(product);
+  }, [onProductSelect]);
+
+  const handleBack = useCallback(() => {
+    if (isChangeMode) {
+      // In change mode: go back to product selection (don't close dialog)
+      setNavState({ step: 'products', selectedProduct: null });
+    } else {
+      setNavState({ step: 'products', selectedProduct: null });
+      onBack?.();
+    }
+  }, [isChangeMode, onBack]);
+
+  const handleBookingSuccess = useCallback((data: { reservationReference: string; sessionId?: string }) => {
+    onBookingSuccess?.(data);
+  }, [onBookingSuccess]);
+
+  return (
+    <CompanyProvider companyId={companyId}>
+      <BookingAppProvider mode={mode} permissions={permissions} googleMapsApiKey={googleMapsApiKey} onShowManage={onShowManage} getSuccessUrl={getSuccessUrl} showLanguageSelector={showLanguageSelector}>
+      <div className={`min-h-screen overflow-x-hidden ${className}`} style={{ ...themeVars, background: `linear-gradient(to bottom, var(--booking-bg), var(--booking-bg-end))` }}>
+      {showHeader && (
+        <header className="py-4 w-full overflow-hidden" style={{ backgroundColor: 'var(--booking-header-bg)', color: 'var(--booking-header-text)' }}>
+          <div className="max-w-4xl mx-auto px-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 min-w-0">
+            <h1 className="text-xl font-semibold shrink-0" style={{ fontFamily: 'var(--booking-font-sans)' }}>Via Via Moraine Lake</h1>
+            <div className="flex flex-wrap items-center gap-2 sm:gap-4 min-w-0">
+              <CurrencySwitcher currency={currency} onCurrencyChange={setCurrency} />
+              {showLanguageSelector && <LanguageSwitcher />}
+            </div>
+          </div>
+        </header>
+      )}
+
+      {/* When embedded without header, show a compact toolbar */}
+      {!showHeader && (
+        <div className="border-b px-4 py-2 flex flex-wrap items-center justify-end gap-2 min-w-0" style={{ borderColor: 'var(--booking-border)', backgroundColor: 'var(--booking-surface)' }}>
+          <CurrencySwitcher currency={currency} onCurrencyChange={setCurrency} />
+          {showLanguageSelector && <LanguageSwitcher />}
+        </div>
+      )}
+
+      <main className={`max-w-4xl mx-auto px-4 py-8 ${!showHeader ? 'pt-4' : ''}`} style={{ fontFamily: 'var(--booking-font-sans)' }}>
+        <div className="overflow-visible p-8" style={{ backgroundColor: 'var(--booking-surface)', borderRadius: 'var(--booking-radius)', boxShadow: '0 25px 50px -12px rgba(0,0,0,0.25)' }}>
+          {loadingProducts ? (
+            <div className="flex items-center justify-center py-16">
+              <div style={{ color: 'var(--booking-text-muted)' }}>Loading experiences...</div>
+            </div>
+          ) : error ? (
+            <div className="p-4 rounded-lg" style={{ backgroundColor: 'var(--booking-error-bg)', borderWidth: '1px', borderStyle: 'solid', borderColor: 'var(--booking-error-border)', color: 'var(--booking-error-text)' }}>
+              {error}
+            </div>
+          ) : navState.step === 'products' ? (
+            <div>
+              <h2 className="text-2xl font-bold mb-6" style={{ color: 'var(--booking-text)' }}>
+                Choose Your Experience
+              </h2>
+              <ProductList products={products} onSelect={handleSelectProduct} currency={currency} />
+            </div>
+          ) : navState.selectedProduct ? (
+            <ErrorBoundary>
+              {navState.selectedProduct.productType === 'PRIVATE_SHUTTLE' ? (
+                <PrivateShuttleBookingFlow 
+                  product={navState.selectedProduct} 
+                  onBack={handleBack} 
+                  currency={currency}
+                  onSuccess={handleBookingSuccess}
+                  initialBooking={isChangeMode ? initialBooking : undefined}
+                  onChangeBooking={isChangeMode ? onChangeBooking : undefined}
+                />
+              ) : (
+                <BookingFlow 
+                  product={navState.selectedProduct} 
+                  onBack={handleBack} 
+                  currency={currency}
+                  onSuccess={handleBookingSuccess}
+                  initialBooking={isChangeMode ? initialBooking : undefined}
+                  onChangeBooking={isChangeMode ? onChangeBooking : undefined}
+                />
+              )}
+            </ErrorBoundary>
+          ) : null}
+        </div>
+      </main>
+      </div>
+      </BookingAppProvider>
+    </CompanyProvider>
+  );
+}
+