@ticketboothapp/booking 1.2.99 → 1.2.101

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticketboothapp/booking",
-  "version": "1.2.99",
+  "version": "1.2.101",
   "private": false,
   "sideEffects": [
     "**/*.css",
@@ -14,6 +14,8 @@
     "./booking-flow.css": "./src/components/booking/booking-flow.css",
     "./runtime": "./src/runtime/index.ts",
     "./contexts/booking-app-context": "./src/contexts/BookingAppContext.tsx",
+    "./contexts/company-context": "./src/contexts/CompanyContext.tsx",
+    "./contexts/availabilities-cache-context": "./src/contexts/AvailabilitiesCacheContext.tsx",
     "./providers/booking-dialog-provider": "./src/providers/booking-dialog-provider.tsx",
     "./hooks/useBookingSourceMetadataFromLocation": "./src/hooks/useBookingSourceMetadataFromLocation.ts",
     "./hooks/useIsBookingLaunchLive": "./src/hooks/useIsBookingLaunchLive.ts",

package/src/components/booking/BookingDialog.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useBookingSourceMetadataFromLocation } from '../../hooks/useBookingSourceMetadataFromLocation';
 import { useBookingDialog } from '../../providers/booking-dialog-provider';
 import { useBookingHost } from '../../runtime';
@@ -49,15 +49,28 @@ function BookFlowScreen({
   const apiProductId = config?.productId ?? productId;
 
   // Build minimal product from config for immediate availability fetch (no /products wait)
-  const minimalProduct =
-    config && catalog.buildMinimalProductFromConfig
-      ? (catalog.buildMinimalProductFromConfig(config, env.COMPANY_ID) as Product)
-      : null;
+  const staticProduct = useMemo(
+    () =>
+      catalog.getStaticProductByIdOrSlug
+        ? (catalog.getStaticProductByIdOrSlug(productId) as Product | null)
+        : null,
+    [catalog, productId]
+  );
+
+  const minimalProduct = useMemo(
+    () =>
+      config && catalog.buildMinimalProductFromConfig
+        ? (catalog.buildMinimalProductFromConfig(config, env.COMPANY_ID) as Product)
+        : null,
+    [catalog, config, env.COMPANY_ID]
+  );
 
   useEffect(() => {
     if (isPartialLaunch) return; // No API needed for partial launch
-    let cancelled = false;
     setError(null);
+    setProduct(null);
+    if (staticProduct || minimalProduct) return;
+    let cancelled = false;
     getProduct(apiProductId, env.COMPANY_ID)
       .then((p) => {
         if (!cancelled && p) setProduct(p);
@@ -67,13 +80,14 @@ function BookFlowScreen({
         if (!cancelled) setError(err instanceof Error ? err.message : 'Failed to load product');
       });
     return () => { cancelled = true; };
-  }, [apiProductId, config, isPartialLaunch]);
+  }, [apiProductId, config, env.COMPANY_ID, isPartialLaunch, minimalProduct, staticProduct]);
 
   useEffect(() => {
-    if (product) {
-      onProductLoaded?.(product.name);
+    const loadedProduct = product?.productId === apiProductId ? product : staticProduct ?? minimalProduct;
+    if (loadedProduct) {
+      onProductLoaded?.(loadedProduct.name);
     }
-  }, [product?.name, onProductLoaded]);
+  }, [apiProductId, minimalProduct, onProductLoaded, product, staticProduct]);
 
   // Partial launch: show collage + description immediately (no API)
   if (isPartialLaunch) {
@@ -84,8 +98,10 @@ function BookFlowScreen({
     );
   }
 
-  // No config: must wait for API (product not in products-config)
-  if (!config) {
+  const displayProduct = product?.productId === apiProductId ? product : staticProduct ?? minimalProduct;
+
+  // No local/static product: must wait for API (product not in products-config)
+  if (!displayProduct) {
     if (error) {
       return (
         <div className={`${styles.screen} booking-flow-preflight`}>
@@ -107,10 +123,7 @@ function BookFlowScreen({
     );
   }
 
-  // Use full product when loaded, otherwise minimal from config (availabilities fetch starts immediately)
-  const displayProduct = product ?? minimalProduct!;
-
-  if (error && !product) {
+  if (error && !displayProduct) {
     return (
       <div className={`${styles.screen} booking-flow-preflight`}>
         <div className="flex flex-col items-center justify-center py-16 gap-4">

package/src/components/booking/ChangeBookingDialog.tsx

@@ -107,12 +107,20 @@ export default function ChangeBookingDialog({
         : null,
     [config, catalog, env.COMPANY_ID]
   );
+  const staticProduct = useMemo(
+    () =>
+      catalog.getStaticProductByIdOrSlug
+        ? (catalog.getStaticProductByIdOrSlug(bookingProductId) as Product | null)
+        : null,
+    [bookingProductId, catalog]
+  );
 
   useEffect(() => {
     if (!isOpen) return;
     let cancelled = false;
     setError(null);
-    if (minimalProduct) setProduct(minimalProduct);
+    setProduct(staticProduct ?? minimalProduct);
+    if (staticProduct || minimalProduct) return;
     getProduct(apiProductId, env.COMPANY_ID)
       .then((p) => {
         if (!cancelled && p) setProduct(p);
@@ -123,7 +131,7 @@ export default function ChangeBookingDialog({
     return () => {
       cancelled = true;
     };
-  }, [isOpen, apiProductId, minimalProduct]);
+  }, [isOpen, apiProductId, minimalProduct, staticProduct]);
 
   useEffect(() => {
     if (isOpen) {

package/src/components/booking/CheckoutModal.tsx

@@ -334,9 +334,12 @@ export function CheckoutModal({
                   : []),
                 ...feeLineItems.map((fee) => {
                   const isMoraineLakeRoadAccessFee = fee.name.toLowerCase().includes('moraine') && (fee.name.toLowerCase().includes('access') || fee.name.toLowerCase().includes('road') || fee.name.toLowerCase().includes('license'));
+                  const showQuantityLabel = fee.showQuantityLabel !== false;
                   return {
                     kind: 'line' as const,
-                    label: `${fee.name} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`,
+                    label: showQuantityLabel
+                      ? `${fee.name} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`
+                      : fee.name,
                     amount: fee.totalAmount,
                     type: 'fee',
                     tooltip: isMoraineLakeRoadAccessFee