@ticketboothapp/booking 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticketboothapp/booking",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "private": false,
   "sideEffects": false,
   "publishConfig": {

package/src/components/BookingWidget.tsx

@@ -1,13 +1,40 @@
 'use client';
 
-import { useMemo, type CSSProperties } from 'react';
-import type { BookingFlowUiOptions } from './booking/booking-flow-ui';
-import type { BookingSourceMetadata } from '../lib/booking/source-metadata';
-import type { BookingAppMode, BookingAppPermissions, ManageParams } from '../contexts/BookingAppContext';
+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';
 
 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;
@@ -15,51 +42,225 @@ export interface BookingWidgetProps {
   permissions?: Partial<BookingAppPermissions>;
   googleMapsApiKey?: string;
   onShowManage?: (params: ManageParams) => void;
-  getSuccessUrl?: (params: { reservationRef: string; lastName: string; focusDate?: string }) => string;
+  getSuccessUrl?: (params: { reservationRef: string; lastName: string }) => string;
   showLanguageSelector?: boolean;
-  flowUi?: BookingFlowUiOptions;
-  bookingSourceAttribution?: Partial<BookingSourceMetadata>;
+  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>;
 }
 
-const getBookingHost = (): string =>
-  process.env.NEXT_PUBLIC_BOOKING_WIDGET_URL || 'https://viaviamorainelake.com';
-
 export function BookingWidget({
   initialProductId,
+  initialProduct,
+  initialBooking,
+  onChangeBooking,
+  products: productsProp,
+  companyId,
+  initialCurrency = 'CAD',
+  showHeader = true,
+  authToken,
+  onProductSelect,
+  onBookingSuccess,
+  onBack,
   className = '',
   mode = 'standalone',
-  showLanguageSelector = true,
+  permissions = {},
   googleMapsApiKey,
-  bookingSourceAttribution,
+  onShowManage,
+  getSuccessUrl,
+  showLanguageSelector = true,
+  theme: themeOverride,
 }: BookingWidgetProps) {
-  const src = useMemo(() => {
-    // Route directly to customer booking (not partner portal root).
-    const url = new URL('/offers', getBookingHost());
-    if (initialProductId) url.searchParams.set('productId', initialProductId);
-    if (!showLanguageSelector) url.searchParams.set('showLanguageSelector', '0');
-    if (googleMapsApiKey) url.searchParams.set('gmapsKey', googleMapsApiKey);
-    if (mode) url.searchParams.set('embedMode', mode);
-    if (bookingSourceAttribution?.utmSource) url.searchParams.set('utm_source', bookingSourceAttribution.utmSource);
-    if (bookingSourceAttribution?.utmCampaign) url.searchParams.set('utm_campaign', bookingSourceAttribution.utmCampaign);
-    if (bookingSourceAttribution?.utmMedium) url.searchParams.set('utm_medium', bookingSourceAttribution.utmMedium);
-    if (bookingSourceAttribution?.partnerId) url.searchParams.set('partnerId', bookingSourceAttribution.partnerId);
-    if (bookingSourceAttribution?.agentId) url.searchParams.set('agentId', bookingSourceAttribution.agentId);
-    if (bookingSourceAttribution?.agentName) url.searchParams.set('agentName', bookingSourceAttribution.agentName);
-    return url.toString();
-  }, [bookingSourceAttribution, googleMapsApiKey, initialProductId, mode, showLanguageSelector]);
+  const { currency, setCurrency } = useCurrency();
+  const theme = mergeTheme(themeOverride);
+  const themeVars = themeToCssVars(theme);
 
-  const frameStyle: CSSProperties = {
-    width: '100%',
-    minHeight: '900px',
-    border: 0,
-    display: 'block',
-    backgroundColor: 'transparent',
-  };
+  useEffect(() => {
+    setAuthToken(authToken || null);
+    return () => setAuthToken(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 (
-    <div className={className}>
-      <iframe title="Customer booking" src={src} style={frameStyle} loading="lazy" />
-    </div>
+    <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>
   );
 }