@ticketboothapp/booking 0.1.13 → 0.1.15

package/package.json

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

package/src/assets/icons/minus.svg

@@ -0,0 +1,7 @@
+<svg 
+  width="24" height="24"
+  xmlns="http://www.w3.org/2000/svg" 
+  viewBox="0 0 24 24"
+>
+  <path d="M12 4C12.5523 4 13 4.44772 13 5V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V5C11 4.44772 11.4477 4 12 4Z" fill="currentColor"/>
+</svg> 

package/src/contexts/AvailabilitiesCacheContext.tsx

@@ -1,36 +1,48 @@
 'use client';
 
-import { createContext, useContext, useRef, useCallback, type ReactNode } from 'react';
+import {
+  createContext,
+  useContext,
+  useRef,
+  useCallback,
+  type ReactNode,
+} from 'react';
+import type { Availability, PricingConfig, PrecomputedPricesByCategory } from '@/lib/booking-api';
 
+/** Cache TTL in milliseconds (5 minutes). Entries older than this are considered stale. */
 export const AVAILABILITIES_CACHE_TTL_MS = 5 * 60 * 1000;
 
-export type AvailabilityLike = Record<string, unknown>;
-export type PricingConfigLike = Record<string, unknown>;
-export type PrecomputedPricesByCategoryLike = Record<string, unknown>;
-
 export interface CachedAvailabilitiesData {
   fetchedRanges: Array<{ start: Date; end: Date }>;
-  availabilities: AvailabilityLike[];
-  pricingConfig: PricingConfigLike | null;
-  precomputedPricesByOption: Record<string, PrecomputedPricesByCategoryLike> | null;
-  precomputedPrices?: PrecomputedPricesByCategoryLike | null;
+  availabilities: Availability[];
+  pricingConfig: PricingConfig | null;
+  precomputedPricesByOption: Record<string, PrecomputedPricesByCategory> | null;
+  /** Private Shuttle: shared precomputed prices (category -> currency -> price). */
+  precomputedPrices?: PrecomputedPricesByCategory | null;
+  /** Private Shuttle: resource price by currency. */
   resourcePriceByCurrency?: Record<string, number> | null;
+  /** Private Shuttle: resource price by option (optionId -> currency -> price). */
   resourcePriceByOption?: Record<string, Record<string, number>> | null;
+  /** Timestamp when this entry was cached (for TTL / stale-while-revalidate). */
   cachedAt: number;
 }
 
 interface AvailabilitiesCacheContextValue {
+  /** Get cached data for a product+options+promo. Returns undefined if not cached. */
   get: (cacheKey: string) => CachedAvailabilitiesData | undefined;
+  /** Check if cached entry is stale (older than TTL). Use for stale-while-revalidate. */
   isStale: (cached: CachedAvailabilitiesData) => boolean;
+  /** Replace or set cache entry. */
   set: (cacheKey: string, data: CachedAvailabilitiesData) => void;
+  /** Merge new availabilities into existing cache (or create new entry). */
   merge: (
     cacheKey: string,
     update: {
       fetchedRanges?: Array<{ start: Date; end: Date }>;
-      availabilities?: AvailabilityLike[];
-      pricingConfig?: PricingConfigLike | null;
-      precomputedPricesByOption?: Record<string, PrecomputedPricesByCategoryLike> | null;
-      precomputedPrices?: PrecomputedPricesByCategoryLike | null;
+      availabilities?: Availability[];
+      pricingConfig?: PricingConfig | null;
+      precomputedPricesByOption?: Record<string, PrecomputedPricesByCategory> | null;
+      precomputedPrices?: PrecomputedPricesByCategory | null;
       resourcePriceByCurrency?: Record<string, number> | null;
       resourcePriceByOption?: Record<string, Record<string, number>> | null;
     }
@@ -41,9 +53,10 @@ const AvailabilitiesCacheContext = createContext<AvailabilitiesCacheContextValue
 
 export function useAvailabilitiesCache() {
   const ctx = useContext(AvailabilitiesCacheContext);
-  return ctx;
+  return ctx; // May be null if not wrapped
 }
 
+/** Build cache key from product + options + promo + optional partner pricing profile. */
 export function buildAvailabilitiesCacheKey(
   productId: string,
   optionIdsKey: string,
@@ -57,7 +70,9 @@ export function buildAvailabilitiesCacheKey(
 export function AvailabilitiesCacheProvider({ children }: { children: ReactNode }) {
   const cacheRef = useRef<Map<string, CachedAvailabilitiesData>>(new Map());
 
-  const get = useCallback((cacheKey: string) => cacheRef.current.get(cacheKey), []);
+  const get = useCallback((cacheKey: string) => {
+    return cacheRef.current.get(cacheKey);
+  }, []);
 
   const isStale = useCallback((cached: CachedAvailabilitiesData) => {
     const age = Date.now() - (cached.cachedAt ?? 0);
@@ -73,10 +88,10 @@ export function AvailabilitiesCacheProvider({ children }: { children: ReactNode
       cacheKey: string,
       update: {
         fetchedRanges?: Array<{ start: Date; end: Date }>;
-        availabilities?: AvailabilityLike[];
-        pricingConfig?: PricingConfigLike | null;
-        precomputedPricesByOption?: Record<string, PrecomputedPricesByCategoryLike> | null;
-        precomputedPrices?: PrecomputedPricesByCategoryLike | null;
+        availabilities?: Availability[];
+        pricingConfig?: PricingConfig | null;
+        precomputedPricesByOption?: Record<string, PrecomputedPricesByCategory> | null;
+        precomputedPrices?: PrecomputedPricesByCategory | null;
         resourcePriceByCurrency?: Record<string, number> | null;
         resourcePriceByOption?: Record<string, Record<string, number>> | null;
       }
@@ -91,10 +106,8 @@ export function AvailabilitiesCacheProvider({ children }: { children: ReactNode
             ? update.precomputedPricesByOption
             : existing?.precomputedPricesByOption ?? null,
         precomputedPrices: update.precomputedPrices !== undefined ? update.precomputedPrices : existing?.precomputedPrices ?? null,
-        resourcePriceByCurrency:
-          update.resourcePriceByCurrency !== undefined ? update.resourcePriceByCurrency : existing?.resourcePriceByCurrency ?? null,
-        resourcePriceByOption:
-          update.resourcePriceByOption !== undefined ? update.resourcePriceByOption : existing?.resourcePriceByOption ?? null,
+        resourcePriceByCurrency: update.resourcePriceByCurrency !== undefined ? update.resourcePriceByCurrency : existing?.resourcePriceByCurrency ?? null,
+        resourcePriceByOption: update.resourcePriceByOption !== undefined ? update.resourcePriceByOption : existing?.resourcePriceByOption ?? null,
         cachedAt: Date.now(),
       };
       cacheRef.current.set(cacheKey, next);
@@ -103,5 +116,10 @@ export function AvailabilitiesCacheProvider({ children }: { children: ReactNode
   );
 
   const value: AvailabilitiesCacheContextValue = { get, set, merge, isStale };
-  return <AvailabilitiesCacheContext.Provider value={value}>{children}</AvailabilitiesCacheContext.Provider>;
+
+  return (
+    <AvailabilitiesCacheContext.Provider value={value}>
+      {children}
+    </AvailabilitiesCacheContext.Provider>
+  );
 }

package/src/contexts/BookingAppContext.tsx

@@ -1,21 +1,35 @@
 'use client';
 
-import { createContext, useContext, type ReactNode } from 'react';
+import { createContext, useContext, ReactNode } from 'react';
 
 /** Host app / embedding context (standalone site, provider-dashboard, etc.). */
 export type BookingAppMode = 'standalone' | 'provider-dashboard' | (string & Record<never, never>);
 
-/** Viewer role for the booking app. */
+/**
+ * Viewer role for the booking app. Drives pricing display and (in future) other feature levels.
+ * - public: customer-facing (e.g. standalone site); simplified pricing (dynamic increases rolled into base).
+ * - reseller: same as public for pricing; reserved for future reseller-specific behaviour.
+ * - admin: full detail (e.g. provider dashboard); full price breakdown, no roll-up.
+ */
 export type ViewerRole = 'public' | 'reseller' | 'admin';
 
 /** Feature flags and permissions for the booking app in this context. */
 export interface BookingAppPermissions {
+  /** When true, the price breakdown hover tooltip is shown on itinerary line items. */
   canViewPriceBreakdown?: boolean;
+  /**
+   * Viewer role. For pricing: public and reseller use simplified view; admin uses full detail.
+   * Use this for future feature gating (e.g. reseller vs public vs admin).
+   */
   viewerRole?: ViewerRole;
-  /** @deprecated Prefer viewerRole. */
+  /**
+   * @deprecated Prefer viewerRole. When viewerRole is set it takes precedence.
+   * How much detail to show in the price breakdown tooltip.
+   */
   priceBreakdownDetail?: 'full' | 'simplified';
 }
 
+/** Params for showing the manage-booking UI (e.g. in a dialog when embedded in provider-dashboard). */
 export interface ManageParams {
   ref?: string;
   reservationRef?: string;
@@ -25,11 +39,17 @@ export interface ManageParams {
 export interface BookingAppContextValue {
   mode: BookingAppMode;
   permissions: BookingAppPermissions;
+  /** True when pricing should show simplified view (dynamic increases rolled into base). Derived from viewerRole (public/reseller) or priceBreakdownDetail. */
   isSimplifiedPricingView: boolean;
+  /** When set (e.g. by host), used for Google Maps instead of NEXT_PUBLIC_GOOGLE_MAPS_API_KEY. Fixes prod when embedded code doesn't get build-time env. */
   googleMapsApiKey?: string;
+  /** When set (e.g. provider-dashboard), called instead of redirecting to /manage after free booking or when payment success should show manage UI in-host. */
   onShowManage?: (params: ManageParams) => void;
+  /** When set, used as Stripe return_url so payment success lands on the host (e.g. dashboard) instead of /manage. */
   getSuccessUrl?: (params: { reservationRef: string; lastName: string; focusDate?: string }) => string;
+  /** When false, the language selector is hidden. Host-controlled; default true. */
   showLanguageSelector: boolean;
+  /** Partner portal / embedded host: skip auto-scroll after choosing a calendar date. */
   suppressCalendarDateScroll?: boolean;
 }
 
@@ -52,15 +72,26 @@ const DEFAULT_STANDALONE: BookingAppContextValue = {
 
 export interface BookingAppProviderProps {
   children: ReactNode;
+  /** Which app or page is hosting the booking UI. */
   mode?: BookingAppMode;
+  /** Permissions for this context (e.g. show price breakdown only for staff). */
   permissions?: Partial<BookingAppPermissions>;
+  /** Google Maps API key from the host (use when embedding so the key from the host build is used). */
   googleMapsApiKey?: string;
+  /** When set (e.g. provider-dashboard), called instead of redirecting to /manage; host can show manage UI in a dialog. */
   onShowManage?: (params: ManageParams) => void;
+  /** When set, used as Stripe return_url so payment success lands on the host. */
   getSuccessUrl?: (params: { reservationRef: string; lastName: string; focusDate?: string }) => string;
+  /** When false, the language selector is hidden. Default true. */
   showLanguageSelector?: boolean;
+  /** When true, calendar date selection does not auto-scroll the page/dialog. */
   suppressCalendarDateScroll?: boolean;
 }
 
+/**
+ * Provides the current "mode" (which app is using the booking app) and permissions.
+ * Wrap the booking app at the host level: standalone page or BookingWidget when embedded.
+ */
 export function BookingAppProvider({
   children,
   mode = 'standalone',
@@ -83,11 +114,21 @@ export function BookingAppProvider({
     suppressCalendarDateScroll,
   };
 
-  return <BookingAppContext.Provider value={value}>{children}</BookingAppContext.Provider>;
+  return (
+    <BookingAppContext.Provider value={value}>
+      {children}
+    </BookingAppContext.Provider>
+  );
 }
 
+/**
+ * Hook to access booking app context (mode and permissions).
+ * Use this to gate features like the price breakdown tooltip based on who is using the app.
+ */
 export function useBookingApp(): BookingAppContextValue {
   const context = useContext(BookingAppContext);
-  if (context === undefined) return DEFAULT_STANDALONE;
+  if (context === undefined) {
+    return DEFAULT_STANDALONE;
+  }
   return context;
 }

package/src/contexts/CompanyContext.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { createContext, useContext, useState, useEffect, type ReactNode } from 'react';
-import { getCompany, type Company } from '@/lib/api';
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { getCompany, type Company } from '@/lib/booking-api';
 import { ENV } from '@/lib/env';
 
 interface CompanyContextType {
@@ -14,41 +14,56 @@ const CompanyContext = createContext<CompanyContextType | undefined>(undefined);
 
 interface CompanyProviderProps {
   children: ReactNode;
-  /** Optional company ID. When provided (e.g. from provider dashboard), use instead of ENV.COMPANY_ID. */
-  companyId?: string;
 }
 
-export function CompanyProvider({ children, companyId: companyIdProp }: CompanyProviderProps) {
+/**
+ * Provider component that fetches company data once and makes it available via context
+ */
+export function CompanyProvider({ children }: CompanyProviderProps) {
   const [company, setCompany] = useState<Company | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const companyId = companyIdProp ?? ENV.COMPANY_ID;
 
   useEffect(() => {
     async function fetchCompany() {
       try {
-        const companyData = await getCompany(companyId);
+        const companyData = await getCompany(ENV.COMPANY_ID);
         setCompany(companyData);
         setError(null);
       } catch (err) {
         console.warn('Failed to fetch company data, using defaults:', err);
         setError(err instanceof Error ? err.message : 'Failed to fetch company');
+        // Don't set company to null - let components use defaults
       } finally {
         setLoading(false);
       }
     }
+
     fetchCompany();
-  }, [companyId]);
+  }, []);
 
-  return <CompanyContext.Provider value={{ company, loading, error }}>{children}</CompanyContext.Provider>;
+  return (
+    <CompanyContext.Provider value={{ company, loading, error }}>
+      {children}
+    </CompanyContext.Provider>
+  );
 }
 
+/**
+ * Hook to access company context
+ * Returns company data, loading state, and error
+ */
 export function useCompany() {
   const context = useContext(CompanyContext);
-  if (context === undefined) throw new Error('useCompany must be used within a CompanyProvider');
+  if (context === undefined) {
+    throw new Error('useCompany must be used within a CompanyProvider');
+  }
   return context;
 }
 
+/**
+ * Hook to get company timezone with fallback
+ */
 export function useCompanyTimezone(): string {
   const { company } = useCompany();
   return company?.settings?.timezone || 'America/Edmonton';

package/src/index.ts

@@ -55,7 +55,6 @@ export {
 
 export {
   setPartnerPortalBookingJwtGetter,
-  getPartnerPortalBookingJwt,
 } from './lib/booking-api';
 
 export {