@ticketboothapp/booking 0.1.18 → 0.1.20

package/package.json

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

package/src/components/BookingWidget.tsx

@@ -1,46 +1,302 @@
 'use client';
 
-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';
+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;
-  flowUi?: BookingFlowUiOptions;
-  bookingSourceAttribution?: Partial<BookingSourceMetadata>;
-  bookOnTileClick?: boolean;
+  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,
-  flowUi,
-  bookingSourceAttribution,
-  bookOnTileClick = true,
+  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 (
-    <PartnerBookingPageWithBrowserMetadata
-      embedded
-      initialFilterId="all"
-      hideProductGridHeader
-      bookOnTileClick={bookOnTileClick}
-      flowUi={flowUi}
-      canonicalAttribution={{ pagePath: '/provider-dashboard' }}
-      bookingSourceAttributionMerge={bookingSourceAttribution}
-      onBookingFlowSuccess={(data) => {
-        onBookingSuccess?.({
-          reservationReference: data.reservationReference,
-          sessionId: data.bookingReference,
-        });
-      }}
-    />
+    <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>
   );
 }

package/src/components/ManageBookingView.tsx

@@ -2,13 +2,13 @@
 
 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 BookingDetails, { type BookingData } from '@/components/BookingDetails';
+import { type Currency, formatCurrencyAmount } from '@/lib/currency';
 import { ENV } from '@/lib/env';
-import { formatCurrencyAmount } from '@/lib/currency';
 
 const API_URL = ENV.API_URL;
 
+/** Provider-only fields merged after public manage lookup (e.g. embedded in provider dashboard). */
 export interface StaffBookingAttribution {
   reportingSource: string;
   partnerBookingPortal: boolean;
@@ -121,12 +121,14 @@ export function ManageBookingView({
         if (cancelled) return;
         setBooking(b);
 
-        const hasPaymentOwing = (bookingData: BookingData) => {
-          const status = bookingData?.payment?.status;
-          const balanceAmount = bookingData?.payment?.plan?.balanceAmount ?? 0;
-          const depositAmount = bookingData?.payment?.plan?.depositAmount ?? 0;
-          return (status === 'DEPOSIT_PAID' && balanceAmount > 0) ||
-            (status === 'AWAITING_PAYMENT' && (depositAmount > 0 || balanceAmount > 0));
+        const hasPaymentOwing = (bk: BookingData) => {
+          const status = bk?.payment?.status;
+          const balanceAmount = bk?.payment?.plan?.balanceAmount ?? 0;
+          const depositAmount = bk?.payment?.plan?.depositAmount ?? 0;
+          return (
+            (status === 'DEPOSIT_PAID' && balanceAmount > 0) ||
+            (status === 'AWAITING_PAYMENT' && (depositAmount > 0 || balanceAmount > 0))
+          );
         };
 
         if (initialPaymentSuccess && b && hasPaymentOwing(b)) {
@@ -147,7 +149,9 @@ export function ManageBookingView({
       }
     };
     doLookup();
-    return () => { cancelled = true; };
+    return () => {
+      cancelled = true;
+    };
   }, [initialRef, initialLastName, initialPaymentSuccess, replaceUrl]);
 
   useEffect(() => {
@@ -180,7 +184,9 @@ export function ManageBookingView({
               return;
             }
           }
-        } catch { /* ignore */ }
+        } catch {
+          /* ignore */
+        }
         if (cancelled) return;
         attempt += 1;
         if (attempt * POLL_MS < MAX_MS) {
@@ -193,7 +199,9 @@ export function ManageBookingView({
       await poll();
     };
     doLookup();
-    return () => { cancelled = true; };
+    return () => {
+      cancelled = true;
+    };
   }, [initialReservationRef, initialLastName, initialRef, replaceUrl]);
 
   async function handleLookup() {
@@ -239,7 +247,7 @@ export function ManageBookingView({
         setBooking(data.data);
       }
     } catch {
-      // ignore
+      /* ignore */
     }
   }
 
@@ -264,7 +272,11 @@ export function ManageBookingView({
           </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">
+          <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)}
@@ -272,7 +284,9 @@ export function ManageBookingView({
             {staffAttribution.partnerId ? (
               <p>
                 <span className="text-stone-600">Partner:</span>{' '}
-                {staffAttribution.partnerName ? `${staffAttribution.partnerName} (${staffAttribution.partnerId})` : staffAttribution.partnerId}
+                {staffAttribution.partnerName
+                  ? `${staffAttribution.partnerName} (${staffAttribution.partnerId})`
+                  : staffAttribution.partnerId}
               </p>
             ) : null}
             {staffAttribution.agentDisplay || staffAttribution.agentId ? (
@@ -308,7 +322,11 @@ export function ManageBookingView({
   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 />
+        <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>
     );
@@ -316,10 +334,15 @@ export function ManageBookingView({
 
   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)' }}>
+      <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>
+            <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
@@ -327,9 +350,19 @@ export function ManageBookingView({
             )}
           </div>
         )}
-        {!isEmbed && <h1 className="text-2xl font-bold mb-6" style={{ color: 'var(--booking-text)' }}>Manage Your Booking</h1>}
+        {!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">
+        <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
@@ -361,7 +394,16 @@ export function ManageBookingView({
             />
           </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="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>
           )}
           <button
             type="submit"
@@ -374,9 +416,19 @@ export function ManageBookingView({
         </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)' }}>
+          <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>
+            <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>

package/src/components/booking/BookingProductGrid.tsx

@@ -19,7 +19,7 @@ import defaultStrings from '@/strings';
 import { getImageUrl } from '@/constants/images';
 import BackgroundPlayer from 'next-video/background-player';
 import styles from './BookingProductGrid.module.css';
-import Button, { ButtonHoverColor } from '../button';
+import Button, { ButtonHoverColor } from '@/components/button';
 
 const DEFAULT_VIDEO = {
   src: '/videos/via-via-moraine-lake-tour-video.mp4',

package/src/components/booking/Calendar.module.css

@@ -381,17 +381,17 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  min-height: 6.25rem; /* Desktop: taller base cell for availability-mode readability */
+  min-height: 5.5rem; /* Desktop: enough room for time pills */
   cursor: pointer;
 }
 
 /* Admin (showCapacity): extra line under each time pill — taller cells on sm+ only */
 @media (min-width: 640px) {
   .calendar .calendarDayCell.calendarDayCellWithAdminCapacity {
-    min-height: 8.25rem;
+    min-height: 7.5rem;
   }
   .calendar .calendarDayCell.calendarDayCellWithAdminCapacity.calendarDayCellWithAdminCapacityTall {
-    min-height: 9.75rem;
+    min-height: 9rem;
   }
 }
 

package/src/components/booking/CheckoutForm.tsx

@@ -6,7 +6,7 @@ import { PickupLocationSelector } from './PickupLocationSelector';
 import type { Currency } from './CurrencySwitcher';
 import type { PickupLocation, Destination } from '@/lib/booking-api';
 import styles from './CheckoutForm.module.css';
-import Button, { ButtonHoverColor } from '../button';
+import Button, { ButtonHoverColor } from '@/components/button';
 import { AnimatePresence, motion } from 'framer-motion';
 
 type TranslationFn = (key: string, params?: Record<string, string>) => string;

package/src/components/booking/PickupLocationSelector.tsx

@@ -890,7 +890,7 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
 
       {/* Input with search icon inside - padding ensures text stays to the right of icon */}
       <div className="relative">
-        <div className="absolute left-0 top-1/2 -translate-y-1/2 pl-4 flex items-center pointer-events-none text-stone-400">
+        <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-stone-400">
           <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
           </svg>

package/src/index.ts

@@ -31,9 +31,10 @@ export {
   CompanyProvider,
   useCompany,
   useCompanyTimezone,
-  type Company,
 } from './contexts/CompanyContext';
 
+export { type Company } from './lib/booking-api';
+
 export {
   AVAILABILITIES_CACHE_TTL_MS,
   AvailabilitiesCacheProvider,
@@ -55,6 +56,7 @@ export {
 
 export {
   setPartnerPortalBookingJwtGetter,
+  type Product,
 } from './lib/booking-api';
 
 export {