@ticketboothapp/booking 1.2.25-rc.0 → 1.2.27

package/src/components/BookingWidget.tsx

@@ -1,302 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import { CompanyProvider } from '@/contexts/CompanyContext';
-import {
-  BookingAppProvider,
-  type BookingAppMode,
-  type BookingAppPermissions,
-  type ManageParams,
-} from '@/contexts/BookingAppContext';
-import { BookingFlow } from '@/components/booking/BookingFlow';
-import { PrivateShuttleBookingFlow } from '@/components/booking/PrivateShuttleBookingFlow';
-import { CurrencySwitcher, useCurrency, type Currency } from '@/components/booking/CurrencySwitcher';
-import { ErrorBoundary } from '@/components/booking/ErrorBoundary';
-import { getProduct, setPartnerPortalBookingJwtGetter, type Product } from '@/lib/booking-api';
-import { getProductByIdOrSlug } from '@/lib/products-config';
-import { ENV } from '@/lib/env';
-import BookingProductGrid from '@/components/booking/BookingProductGrid';
-import { BookingDialogProvider } from '@/providers/booking-dialog-provider';
-
-type Step = 'products' | 'booking';
-
-interface NavState {
-  step: Step;
-  selectedProduct: Product | null;
-}
-
-export interface BookingWidgetProps {
-  initialProductId?: string;
-  initialCurrency?: Currency;
-  showHeader?: boolean;
-  authToken?: string | null;
-  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; focusDate?: string }) => string;
-  showLanguageSelector?: boolean;
-  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;
-  };
-  /** Last name on the booking — required for public change-quote APIs inside the flow. */
-  changeFlowLastName?: string;
-}
-
-/**
- * Embeddable booking UI (product grid + flow). Used by provider-dashboard change-booking in “change mode”.
- */
-export function BookingWidget({
-  initialProductId,
-  initialProduct,
-  initialBooking,
-  changeFlowLastName = '',
-  products: productsProp,
-  companyId: _companyId,
-  initialCurrency = 'CAD',
-  showHeader = true,
-  authToken,
-  onProductSelect,
-  onBookingSuccess,
-  onBack,
-  className = '',
-  mode = 'standalone',
-  permissions = {},
-  googleMapsApiKey,
-  onShowManage,
-  getSuccessUrl,
-  showLanguageSelector = true,
-}: BookingWidgetProps) {
-  const { currency, setCurrency } = useCurrency();
-
-  useEffect(() => {
-    setPartnerPortalBookingJwtGetter(() => authToken ?? null);
-    return () => setPartnerPortalBookingJwtGetter(() => null);
-  }, [authToken]);
-
-  useEffect(() => {
-    if (initialCurrency) setCurrency(initialCurrency);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const isChangeMode = !!(initialProduct && initialBooking);
-
-  const flowInitialValues = initialBooking
-    ? {
-        bookingReference: initialBooking.bookingReference,
-        dateTime: initialBooking.dateTime,
-        availabilityId: initialBooking.availabilityId ?? null,
-        productOptionId: initialBooking.productId,
-        pickupLocationId: initialBooking.pickupLocationId ?? null,
-        returnAvailabilityId: initialBooking.returnAvailabilityId ?? null,
-        bookingItems: initialBooking.bookingItems,
-        addOnSelections: initialBooking.addOnSelections ?? null,
-        promoCode: initialBooking.promoCode ?? null,
-        cancellationPolicyId: initialBooking.cancellationPolicyId ?? null,
-        customer: changeFlowLastName ? { lastName: changeFlowLastName } : null,
-      }
-    : undefined;
-
-  const privateShuttleInitialValues = initialBooking
-    ? {
-        bookingReference: initialBooking.bookingReference,
-        dateTime: initialBooking.dateTime,
-        pickupLocationId: initialBooking.pickupLocationId ?? null,
-        customPickupAddress: initialBooking.travelerHotel ?? null,
-        passengers: initialBooking.privateShuttleDetails?.passengerCount ?? null,
-        additionalHoursCount: initialBooking.additionalHoursCount ?? null,
-        notes: null,
-        specialRequest: null,
-      }
-    : undefined;
-
-  const bookingSourceAttribution: import('@/lib/booking/source-metadata').BookingSourceMetadata = {
-    pagePath: '/provider-dashboard',
-  };
-
-  const [navState, setNavState] = useState<NavState>(() => {
-    if (isChangeMode && initialProduct) {
-      return { step: 'booking', selectedProduct: initialProduct };
-    }
-    return { step: 'products', selectedProduct: null };
-  });
-
-  const [error, setError] = useState('');
-
-  useEffect(() => {
-    if (!isChangeMode || !productsProp?.length || !initialProductId) return;
-    const product = productsProp.find(
-      (p) => p.productId === initialProductId || p.options?.some((o) => o.optionId === initialProductId)
-    );
-    if (product) setNavState({ step: 'booking', selectedProduct: product });
-  }, [isChangeMode, initialProductId, productsProp]);
-
-  useEffect(() => {
-    if (isChangeMode || !initialProductId) return;
-    let cancelled = false;
-    (async () => {
-      const config = getProductByIdOrSlug(initialProductId);
-      const apiProductId = config?.productId ?? initialProductId;
-      try {
-        const p = await getProduct(apiProductId, ENV.COMPANY_ID);
-        if (!cancelled && p) setNavState({ step: 'booking', selectedProduct: p });
-      } catch (e) {
-        if (!cancelled) setError(e instanceof Error ? e.message : 'Failed to load product');
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [isChangeMode, initialProductId]);
-
-  const handleSelectProduct = useCallback(
-    (product: Product) => {
-      setNavState({ step: 'booking', selectedProduct: product });
-      onProductSelect?.(product);
-    },
-    [onProductSelect]
-  );
-
-  const handleBookProductId = useCallback(
-    async (productSlugOrId: string) => {
-      const config = getProductByIdOrSlug(productSlugOrId);
-      const apiProductId = config?.productId ?? productSlugOrId;
-      try {
-        const p = await getProduct(apiProductId, ENV.COMPANY_ID);
-        if (p) handleSelectProduct(p);
-      } catch (e) {
-        setError(e instanceof Error ? e.message : 'Failed to load product');
-      }
-    },
-    [handleSelectProduct]
-  );
-
-  const handleBack = useCallback(() => {
-    setNavState({ step: 'products', selectedProduct: null });
-    onBack?.();
-  }, [onBack]);
-
-  const handleBookingSuccess = useCallback(
-    (data: { reservationReference: string; sessionId?: string }) => {
-      onBookingSuccess?.(data);
-    },
-    [onBookingSuccess]
-  );
-
-  return (
-    <CompanyProvider>
-      <BookingAppProvider
-        mode={mode}
-        permissions={permissions}
-        googleMapsApiKey={googleMapsApiKey}
-        onShowManage={onShowManage}
-        getSuccessUrl={getSuccessUrl}
-        showLanguageSelector={showLanguageSelector}
-      >
-        <BookingDialogProvider>
-        <div className={`min-h-0 overflow-x-hidden ${className}`}>
-          {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} />
-                </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} />
-            </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)',
-              }}
-            >
-              {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' ? (
-                <BookingProductGrid
-                  initialFilterId="all"
-                  bookOnTileClick
-                  onBookProduct={handleBookProductId}
-                />
-              ) : navState.selectedProduct ? (
-                <ErrorBoundary>
-                  {navState.selectedProduct.productType === 'PRIVATE_SHUTTLE' ? (
-                    <PrivateShuttleBookingFlow
-                      product={navState.selectedProduct}
-                      onBack={handleBack}
-                      currency={currency}
-                      onSuccess={handleBookingSuccess}
-                      mode={isChangeMode ? 'change' : 'standard'}
-                      initialValues={isChangeMode ? privateShuttleInitialValues : undefined}
-                      bookingSourceAttribution={bookingSourceAttribution}
-                    />
-                  ) : (
-                    <BookingFlow
-                      product={navState.selectedProduct}
-                      onBack={handleBack}
-                      currency={currency}
-                      onSuccess={handleBookingSuccess}
-                      mode={isChangeMode ? 'change' : 'standard'}
-                      initialValues={isChangeMode ? flowInitialValues : undefined}
-                      bookingSourceAttribution={bookingSourceAttribution}
-                    />
-                  )}
-                </ErrorBoundary>
-              ) : null}
-            </div>
-          </main>
-        </div>
-        </BookingDialogProvider>
-      </BookingAppProvider>
-    </CompanyProvider>
-  );
-}