@ticketboothapp/booking 0.1.7 → 0.1.8

package/package.json

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

package/src/components/BookingWidget.tsx

@@ -1,349 +1,65 @@
 '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 ============
+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';
 
 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.
-   */
+  getSuccessUrl?: (params: { reservationRef: string; lastName: string; focusDate?: string }) => string;
   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>;
+  flowUi?: BookingFlowUiOptions;
+  bookingSourceAttribution?: Partial<BookingSourceMetadata>;
 }
 
-// ============ Booking Widget Component ============
+const getBookingHost = (): string =>
+  process.env.NEXT_PUBLIC_BOOKING_WIDGET_URL || 'https://viaviamorainelake.com';
 
-/**
- * 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,
+  googleMapsApiKey,
+  bookingSourceAttribution,
 }: 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]);
+  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 frameStyle: CSSProperties = {
+    width: '100%',
+    minHeight: '900px',
+    border: 0,
+    display: 'block',
+    backgroundColor: 'transparent',
+  };
 
   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>
+    <div className={className}>
+      <iframe title="Customer booking" src={src} style={frameStyle} loading="lazy" />
+    </div>
   );
 }
 

package/src/components/ManageBookingView.tsx

@@ -1,13 +1,6 @@
 'use client';
 
-import { useState, useEffect, useLayoutEffect } from 'react';
-import { formatBookingRefForDisplay } from '@/lib/booking-ref';
-import { BookingDetails, type BookingData } from '@/components/BookingDetails';
-import { type Currency } from '@/components/CurrencySwitcher';
-import { ENV } from '@/lib/env';
-import { formatCurrencyAmount } from '@/lib/currency';
-
-const API_URL = ENV.API_URL;
+import { useMemo, type CSSProperties } from 'react';
 
 /** Provider-only fields merged after public manage lookup (e.g. embedded in provider dashboard). */
 export interface StaffBookingAttribution {
@@ -24,386 +17,59 @@ export interface StaffBookingAttribution {
   commissionUsesPartnerRate?: boolean;
 }
 
-function staffChannelLabel(source: string): string {
-  const labels: Record<string, string> = {
-    DASHBOARD: 'Dashboard',
-    GYG: 'GetYourGuide',
-    WEBSITE: 'Website (main site)',
-    PARTNER_PORTAL: 'Website (main site)',
-    WEBSITE_PARTNER_PORTAL: 'Partner booking portal',
-    AFFILIATE: 'Affiliate',
-    VIATOR: 'Viator',
-  };
-  return labels[source] ?? source;
-}
-
 export interface ManageBookingViewProps {
-  /** Initial booking reference (ref or bookingReference from URL) */
   initialRef?: string;
-  /** Initial last name (from URL or success callback) */
   initialLastName?: string;
-  /** Reservation reference (e.g. after Stripe redirect; triggers poll until booking exists) */
   initialReservationRef?: string;
-  /** True when returning from balance payment success (Stripe redirect); triggers polling to catch webhook update */
   initialPaymentSuccess?: boolean;
-  /** When provided (e.g. manage page), called to replace URL when poll finds booking; when undefined (e.g. dialog), no navigation */
   replaceUrl?: (url: string) => void;
-  /** When provided (e.g. dialog), show compact layout and optionally a close button. Set showCloseButton false when the host provides its own close (e.g. dialog X). */
   onClose?: () => void;
-  /** When false, do not render the in-content close button (e.g. host dialog already has an X). Default true when onClose is set. */
   showCloseButton?: boolean;
-  /**
-   * When embedded with staff auth, fetch attribution (partner portal vs main site, partner/agent, commission)
-   * after the public booking loads. Uses provider GET /1/bookings/:ref — implement in the host app.
-   */
   fetchStaffAttribution?: (bookingReference: string) => Promise<StaffBookingAttribution | null>;
 }
 
+const getBookingHost = (): string =>
+  process.env.NEXT_PUBLIC_BOOKING_WIDGET_URL || 'https://viaviamorainelake.com';
+
 export function ManageBookingView({
-  initialRef: initialRefProp = '',
-  initialLastName: initialLastNameProp = '',
-  initialReservationRef: initialReservationRefProp = '',
+  initialRef = '',
+  initialLastName = '',
+  initialReservationRef = '',
   initialPaymentSuccess = false,
-  replaceUrl,
   onClose,
   showCloseButton = true,
-  fetchStaffAttribution,
 }: ManageBookingViewProps) {
-  const [bookingReference, setBookingReference] = useState(initialRefProp);
-  const [lastName, setLastName] = useState(initialLastNameProp);
-  const [booking, setBooking] = useState<BookingData | null>(null);
-  const [staffAttribution, setStaffAttribution] = useState<StaffBookingAttribution | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
-
-  useLayoutEffect(() => {
-    setBookingReference(initialRefProp ? formatBookingRefForDisplay(initialRefProp) || initialRefProp : initialRefProp);
-    setLastName(initialLastNameProp);
-  }, [initialRefProp, initialLastNameProp]);
-
-  const initialRef = initialRefProp.trim();
-  const initialLastName = initialLastNameProp.trim();
-  const initialReservationRef = (initialReservationRefProp || '').trim();
-
-  useEffect(() => {
-    if (!booking?.bookingReference || !fetchStaffAttribution) {
-      setStaffAttribution(null);
-      return;
-    }
-    let cancelled = false;
-    const ref = formatBookingRefForDisplay(booking.bookingReference) || booking.bookingReference;
-    fetchStaffAttribution(ref)
-      .then((a) => {
-        if (!cancelled) setStaffAttribution(a);
-      })
-      .catch(() => {
-        if (!cancelled) setStaffAttribution(null);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [booking?.bookingReference, fetchStaffAttribution]);
-
-  // Auto-lookup when booking ref + lastName present (e.g. /manage?ref=ABC12345&lastName=Smith)
-  // When initialPaymentSuccess, poll a few times if we get deposit-owing to catch webhook update
-  useEffect(() => {
-    if (!initialRef || !initialLastName) return;
-    let cancelled = false;
-    const POLL_DELAY_MS = 2000;
-    const MAX_POLL_ATTEMPTS = 3;
-
-    const fetchBooking = async (): Promise<BookingData | null> => {
-      const response = await fetch(
-        `${API_URL}/1/public/bookings/${encodeURIComponent(initialRef)}?lastName=${encodeURIComponent(initialLastName)}`,
-        { method: 'GET', headers: { 'Content-Type': 'application/json' } }
-      );
-      if (!response.ok) {
-        if (response.status === 404) throw new Error('Booking not found or last name does not match');
-        const err = await response.json();
-        throw new Error(err.errorMessage || err.error || 'Failed to lookup booking');
-      }
-      const data = await response.json();
-      return data.data as BookingData;
-    };
-
-    const doLookup = async () => {
-      setLoading(true);
-      setError('');
-      setBooking(null);
-      try {
-        let b = await fetchBooking();
-        if (cancelled) return;
-        setBooking(b);
-
-        // If we just returned from payment and still show amount owing, poll to catch webhook
-        const hasPaymentOwing = (booking: BookingData) => {
-          const status = booking?.payment?.status;
-          const balanceAmount = booking?.payment?.plan?.balanceAmount ?? 0;
-          const depositAmount = booking?.payment?.plan?.depositAmount ?? 0;
-          return (status === 'DEPOSIT_PAID' && balanceAmount > 0) ||
-            (status === 'AWAITING_PAYMENT' && (depositAmount > 0 || balanceAmount > 0));
-        };
-
-        if (initialPaymentSuccess && b && hasPaymentOwing(b)) {
-          for (let attempt = 1; attempt < MAX_POLL_ATTEMPTS && !cancelled; attempt++) {
-            await new Promise((r) => setTimeout(r, POLL_DELAY_MS));
-            if (cancelled) return;
-            b = await fetchBooking();
-            if (cancelled) return;
-            setBooking(b);
-            if (!b || !hasPaymentOwing(b)) break;
-          }
-          // Clean payment param from URL (whether we got FULLY_PAID or not)
-          replaceUrl?.(`/manage?ref=${encodeURIComponent(initialRef)}&lastName=${encodeURIComponent(initialLastName)}`);
-        }
-      } catch (err) {
-        if (!cancelled) setError(err instanceof Error ? err.message : 'Failed to lookup booking');
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    };
-    doLookup();
-    return () => { cancelled = true; };
-  }, [initialRef, initialLastName, initialPaymentSuccess, replaceUrl]);
-
-  // Auto-lookup when reservationRef + lastName present (e.g. Stripe redirect after payment)
-  // Poll until webhook creates booking (up to 30s)
-  useEffect(() => {
-    if (!initialReservationRef || !initialLastName || initialRef) return;
-    let cancelled = false;
-    const POLL_MS = 1500;
-    const MAX_MS = 30000;
-    let attempt = 0;
-    const doLookup = async () => {
-      setLoading(true);
-      setError('');
-      setBooking(null);
-      const poll = async (): Promise<void> => {
-        if (cancelled) return;
-        try {
-          const response = await fetch(
-            `${API_URL}/1/public/bookings/by-reservation?reservationRef=${encodeURIComponent(initialReservationRef)}&lastName=${encodeURIComponent(initialLastName)}`,
-            { method: 'GET', headers: { 'Content-Type': 'application/json' } }
-          );
-          if (cancelled) return;
-          if (response.ok) {
-            const data = await response.json();
-            const b = data.data as BookingData;
-            if (b?.bookingReference && !cancelled) {
-              const shortRef = formatBookingRefForDisplay(b.bookingReference);
-              replaceUrl?.(`/manage?ref=${encodeURIComponent(shortRef)}&lastName=${encodeURIComponent(initialLastName)}`);
-              setBookingReference(shortRef);
-              setBooking(b);
-              setLoading(false);
-              return;
-            }
-          }
-        } catch { /* ignore */ }
-        if (cancelled) return;
-        attempt += 1;
-        if (attempt * POLL_MS < MAX_MS) {
-          setTimeout(poll, POLL_MS);
-        } else {
-          if (!cancelled) setError('Booking not found. Enter your booking reference from the confirmation email when it arrives.');
-          setLoading(false);
-        }
-      };
-      await poll();
-    };
-    doLookup();
-    return () => { cancelled = true; };
-  }, [initialReservationRef, initialLastName, initialRef, replaceUrl]);
-
-  async function handleLookup() {
-    if (!bookingReference.trim() || !lastName.trim()) {
-      setError('Please enter both booking reference and last name');
-      return;
-    }
-
-    setLoading(true);
-    setError('');
-    setBooking(null);
-
-    try {
-      const response = await fetch(
-        `${API_URL}/1/public/bookings/${encodeURIComponent(bookingReference.trim())}?lastName=${encodeURIComponent(lastName.trim())}`,
-        { method: 'GET', headers: { 'Content-Type': 'application/json' } }
-      );
-
-      if (!response.ok) {
-        if (response.status === 404) throw new Error('Booking not found or last name does not match');
-        const err = await response.json();
-        throw new Error(err.errorMessage || err.error || 'Failed to lookup booking');
-      }
-
-      const data = await response.json();
-      setBooking(data.data);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to lookup booking');
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function handleRefetch() {
-    if (!bookingReference.trim() || !lastName.trim()) return;
-    try {
-      const response = await fetch(
-        `${API_URL}/1/public/bookings/${encodeURIComponent(bookingReference.trim())}?lastName=${encodeURIComponent(lastName.trim())}`,
-        { method: 'GET', headers: { 'Content-Type': 'application/json' } }
-      );
-      if (response.ok) {
-        const data = await response.json();
-        setBooking(data.data);
-      }
-    } catch {
-      // Silently ignore refetch errors
-    }
-  }
-
-  const isEmbed = !!onClose;
-  const showClose = isEmbed && showCloseButton;
-  const containerClass = isEmbed ? 'flex flex-col p-4' : 'min-h-screen bg-gradient-to-b from-stone-100 to-stone-200 flex flex-col items-center justify-center gap-4 p-4';
-  const formOuterClass = isEmbed ? '' : 'min-h-screen bg-gradient-to-b from-stone-100 to-stone-200 flex items-center justify-center p-4';
-
-  if (booking) {
-    return (
-      <div className={isEmbed ? 'w-full max-w-2xl' : 'min-h-screen bg-gradient-to-b from-stone-100 to-stone-200'}>
-        {showClose && (
-          <div className="flex justify-end mb-2">
-            <button
-              type="button"
-              onClick={onClose}
-              className="text-sm hover:opacity-80"
-              style={{ color: 'var(--booking-text-muted)' }}
-            >
-              Close
-            </button>
-          </div>
-        )}
-        {staffAttribution ? (
-          <div
-            className="mb-4 rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm text-stone-800"
-            role="region"
-            aria-label="Staff booking attribution"
-          >
-            <p className="font-semibold text-stone-900 mb-2">Booking attribution</p>
-            <p>
-              <span className="text-stone-600">Channel:</span> {staffChannelLabel(staffAttribution.reportingSource)}
-            </p>
-            {staffAttribution.partnerId ? (
-              <p>
-                <span className="text-stone-600">Partner:</span>{' '}
-                {staffAttribution.partnerName
-                  ? `${staffAttribution.partnerName} (${staffAttribution.partnerId})`
-                  : staffAttribution.partnerId}
-              </p>
-            ) : null}
-            {staffAttribution.agentDisplay || staffAttribution.agentId ? (
-              <p>
-                <span className="text-stone-600">Agent:</span>{' '}
-                {staffAttribution.agentDisplay ?? staffAttribution.agentId}
-              </p>
-            ) : null}
-            {staffAttribution.commissionAmount != null && staffAttribution.commissionAmount > 0 ? (
-              <p>
-                <span className="text-stone-600">Commission:</span>{' '}
-                {formatCurrencyAmount(staffAttribution.commissionAmount, staffAttribution.bookingCurrency as Currency)}
-                {staffAttribution.commissionRate != null && staffAttribution.commissionRate > 0 ? (
-                  <>
-                    {' '}
-                    ({Math.round(staffAttribution.commissionRate * 100)}% of{' '}
-                    {staffAttribution.commissionUsesPartnerRate && staffAttribution.commissionBaseAmount != null
-                      ? `${formatCurrencyAmount(staffAttribution.commissionBaseAmount, staffAttribution.bookingCurrency as Currency)} pre-tax`
-                      : 'booking total'}
-                    )
-                  </>
-                ) : null}
-              </p>
-            ) : null}
-          </div>
-        ) : null}
-        <BookingDetails booking={booking} currency={booking.receipt.currency as Currency} onRefetch={handleRefetch} />
-      </div>
-    );
-  }
-
-  const waitingForBooking = initialReservationRef && initialLastName && !initialRef;
-  if (waitingForBooking && loading) {
-    return (
-      <div className={containerClass}>
-        <div className="w-10 h-10 border-2 border-t-transparent rounded-full animate-spin" style={{ borderColor: 'var(--booking-primary)' }} aria-hidden />
-        <p style={{ color: 'var(--booking-text-muted)' }}>Confirming your booking…</p>
-      </div>
-    );
-  }
+  const src = useMemo(() => {
+    const url = new URL('/manage', getBookingHost());
+    if (initialRef) url.searchParams.set('ref', initialRef);
+    if (initialLastName) url.searchParams.set('lastName', initialLastName);
+    if (initialReservationRef) url.searchParams.set('reservationRef', initialReservationRef);
+    if (initialPaymentSuccess) url.searchParams.set('payment', 'balance_success');
+    return url.toString();
+  }, [initialLastName, initialPaymentSuccess, initialRef, initialReservationRef]);
+
+  const frameStyle: CSSProperties = {
+    width: '100%',
+    minHeight: '700px',
+    border: 0,
+    display: 'block',
+    backgroundColor: 'transparent',
+  };
 
   return (
-    <div className={formOuterClass || undefined}>
-      <div className="p-8 max-w-md w-full shadow-xl" style={{ backgroundColor: 'var(--booking-surface)', borderRadius: 'var(--booking-radius)' }}>
-        {isEmbed && (
-          <div className={`flex justify-between items-center mb-4 ${showClose ? '' : 'justify-start'}`}>
-            <h1 className="text-2xl font-bold" style={{ color: 'var(--booking-text)' }}>Manage Your Booking</h1>
-            {showClose && (
-              <button type="button" onClick={onClose} className="text-sm hover:opacity-80" style={{ color: 'var(--booking-text-muted)' }}>
-                Close
-              </button>
-            )}
-          </div>
-        )}
-        {!isEmbed && <h1 className="text-2xl font-bold mb-6" style={{ color: 'var(--booking-text)' }}>Manage Your Booking</h1>}
-
-        <form onSubmit={(e) => { e.preventDefault(); handleLookup(); }} className="space-y-4">
-          <div>
-            <label htmlFor="manage-booking-ref" className="block text-sm font-medium mb-1" style={{ color: 'var(--booking-text)' }}>
-              Booking Reference
-            </label>
-            <input
-              id="manage-booking-ref"
-              type="text"
-              value={bookingReference}
-              onChange={(e) => setBookingReference(formatBookingRefForDisplay(e.target.value) || e.target.value)}
-              className="w-full px-4 py-2 rounded-lg focus:ring-2"
-              style={{ borderColor: 'var(--booking-border-input)', borderWidth: '1px', borderStyle: 'solid' }}
-              placeholder="e.g., ABC12345"
-              required
-            />
-          </div>
-          <div>
-            <label htmlFor="manage-booking-lastname" className="block text-sm font-medium mb-1" style={{ color: 'var(--booking-text)' }}>
-              Last Name
-            </label>
-            <input
-              id="manage-booking-lastname"
-              type="text"
-              value={lastName}
-              onChange={(e) => setLastName(e.target.value)}
-              className="w-full px-4 py-2 rounded-lg focus:ring-2"
-              style={{ borderColor: 'var(--booking-border-input)', borderWidth: '1px', borderStyle: 'solid' }}
-              placeholder="As entered at booking"
-              required
-            />
-          </div>
-          {error && (
-            <div className="rounded-lg p-3 text-sm" style={{ backgroundColor: 'var(--booking-error-bg)', border: '1px solid var(--booking-error-border)', color: 'var(--booking-error-text)' }}>{error}</div>
-          )}
+    <div className="w-full">
+      {onClose && showCloseButton ? (
+        <div className="mb-2 flex justify-end">
           <button
-            type="submit"
-            disabled={loading}
-            className="w-full py-3 text-white font-semibold rounded-lg transition-colors disabled:cursor-not-allowed"
-            style={{ backgroundColor: loading ? 'var(--booking-border-input)' : 'var(--booking-primary)' }}
+            type="button"
+            onClick={onClose}
+            className="rounded border border-stone-300 px-3 py-1 text-sm hover:bg-stone-100"
           >
-            {loading ? 'Looking up...' : 'View Booking'}
+            Close
           </button>
-        </form>
-
-        {!isEmbed && (
-          <div className="mt-6 pt-6 text-center text-sm" style={{ borderColor: 'var(--booking-border)', borderTopWidth: '1px', borderTopStyle: 'solid', color: 'var(--booking-text-muted)' }}>
-            <p>Enter your booking reference and last name to view your booking details.</p>
-            <p className="mt-1" style={{ color: 'var(--booking-text-muted)' }}>You can also share a link: /manage?ref=ABC12345&amp;lastName=Smith</p>
-          </div>
-        )}
-      </div>
+        </div>
+      ) : null}
+      <iframe title="Manage booking" src={src} style={frameStyle} loading="lazy" />
     </div>
   );
 }