@ticketboothapp/booking 0.1.10 → 0.1.12

package/src/components/BookingWidget.tsx

@@ -1,266 +1,46 @@
 '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';
+import { useEffect } from 'react';
+import PartnerBookingPageWithBrowserMetadata from '@/components/partner/PartnerBookingPageWithBrowserMetadata';
+import type { BookingFlowUiOptions } from '@/components/booking/booking-flow-ui';
+import type { BookingSourceMetadata } from '@/lib/booking/source-metadata';
+import { setPartnerPortalBookingJwtGetter } from '@/lib/booking-api';
 
 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;
-  
   authToken?: string | null;
-  
-  /**
-   * Callback when a product is selected
-   */
-  onProductSelect?: (product: Product) => void;
-  
   onBookingSuccess?: (data: { reservationReference: string; sessionId?: string }) => void;
-  onBack?: () => void;
-  className?: string;
-  mode?: BookingAppMode;
-  permissions?: Partial<BookingAppPermissions>;
-  googleMapsApiKey?: string;
-  onShowManage?: (params: ManageParams) => void;
-  getSuccessUrl?: (params: { reservationRef: string; lastName: string }) => string;
-  showLanguageSelector?: boolean;
-  theme?: Partial<BookingTheme>;
-  initialProduct?: Product;
-  products?: Product[];
-  companyId?: string;
-  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;
-  };
-  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;
-    newTotalAmount?: number;
-    keepOriginalPrice?: boolean;
-    additionalHoursCount?: number | null;
-  }) => Promise<void>;
+  flowUi?: BookingFlowUiOptions;
+  bookingSourceAttribution?: Partial<BookingSourceMetadata>;
+  bookOnTileClick?: boolean;
 }
 
 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,
+  flowUi,
+  bookingSourceAttribution,
+  bookOnTileClick = true,
 }: BookingWidgetProps) {
-  const { currency, setCurrency } = useCurrency();
-  const theme = mergeTheme(themeOverride);
-  const themeVars = themeToCssVars(theme);
-
   useEffect(() => {
-    setAuthToken(authToken || null);
-    return () => setAuthToken(null);
+    setPartnerPortalBookingJwtGetter(() => authToken ?? null);
+    return () => setPartnerPortalBookingJwtGetter(() => null);
   }, [authToken]);
 
-  useEffect(() => {
-    if (initialCurrency) {
-      setCurrency(initialCurrency);
-    }
-  }, [initialCurrency, setCurrency]);
-
-  const isChangeMode = !!(initialProduct && initialBooking && onChangeBooking);
-  const [selectedProduct, setSelectedProduct] = useState<Product | null>(
-    () => (isChangeMode && initialProduct ? initialProduct : 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('');
-
-  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) {
-        setSelectedProduct(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) => {
-    setSelectedProduct(product);
-    onProductSelect?.(product);
-  }, [onProductSelect]);
-
-  const handleBack = useCallback(() => {
-    setSelectedProduct(null);
-    onBack?.();
-  }, [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>
-          )}
-
-          {!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>
-              ) : !selectedProduct ? (
-                <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>
-              ) : (
-                <ErrorBoundary>
-                  {selectedProduct.productType === 'PRIVATE_SHUTTLE' ? (
-                    <PrivateShuttleBookingFlow
-                      product={selectedProduct}
-                      onBack={handleBack}
-                      currency={currency}
-                      onSuccess={handleBookingSuccess}
-                      initialBooking={isChangeMode ? initialBooking : undefined}
-                      onChangeBooking={isChangeMode ? onChangeBooking : undefined}
-                    />
-                  ) : (
-                    <BookingFlow
-                      product={selectedProduct}
-                      onBack={handleBack}
-                      currency={currency}
-                      onSuccess={handleBookingSuccess}
-                      initialBooking={isChangeMode ? initialBooking : undefined}
-                      onChangeBooking={isChangeMode ? onChangeBooking : undefined}
-                    />
-                  )}
-                </ErrorBoundary>
-              )}
-            </div>
-          </main>
-        </div>
-      </BookingAppProvider>
-    </CompanyProvider>
+    <PartnerBookingPageWithBrowserMetadata
+      embedded
+      initialFilterId="all"
+      hideProductGridHeader
+      bookOnTileClick={bookOnTileClick}
+      flowUi={flowUi}
+      canonicalAttribution={{ pagePath: '/provider-dashboard' }}
+      bookingSourceAttributionMerge={bookingSourceAttribution}
+      onBookingFlowSuccess={(data) => {
+        onBookingSuccess?.({
+          reservationReference: data.reservationReference,
+          sessionId: data.bookingReference,
+        });
+      }}
+    />
   );
 }
-