@ticketboothapp/booking 1.2.191 → 1.2.193

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticketboothapp/booking",
-  "version": "1.2.191",
+  "version": "1.2.193",
   "private": false,
   "sideEffects": [
     "**/*.css",

package/src/components/booking/PickupLocationDialog.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { formatBookingRefForDisplay } from '../../lib/format-booking-ref';
 import {
   fetchProducts,
@@ -11,23 +11,10 @@ import {
 import { PickupLocationSelector } from './PickupLocationSelector';
 import { useTranslations } from '../../lib/booking/i18n';
 import { getPickupLocationDisclaimer } from '../../lib/booking/pickup-location-disclaimer';
+import { useBookingHost } from '../../runtime';
+import { resolvePickupLocationProduct } from './pickup-location-product';
 import styles from './PickupLocationDialog.module.css';
 
-function findProductWithPickupLocations(
-  products: Product[],
-  bookingProductId: string
-): Product | null {
-  for (const p of products) {
-    if (p.productId === bookingProductId) return p;
-    if (p.pickupLocations?.some((loc) => loc.id === bookingProductId)) return p;
-    const opt = (p as Product & { options?: { optionId: string }[] })?.options?.find(
-      (o) => o.optionId === bookingProductId
-    );
-    if (opt) return p;
-  }
-  return null;
-}
-
 /** Itinerary rows shown on manage-booking (may include optional label/time from API). */
 export interface PickupDialogItineraryStep {
   label?: string | null;
@@ -108,7 +95,8 @@ export function PickupLocationDialog({
   onSuccess,
 }: PickupLocationDialogProps) {
   const { t } = useTranslations();
-  const [products, setProducts] = useState<Product[]>([]);
+  const { catalog } = useBookingHost();
+  const [liveProducts, setLiveProducts] = useState<Product[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [selectedLocationId, setSelectedLocationId] = useState<string | null>(
@@ -130,33 +118,53 @@ export function PickupLocationDialog({
   const lastName = booking.customer?.lastName ?? '';
   const isPrivateShuttle = booking.productType === 'PRIVATE_SHUTTLE';
 
+  const staticProduct = useMemo(
+    () =>
+      catalog.getStaticProductByIdOrSlug
+        ? (catalog.getStaticProductByIdOrSlug(booking.productId) as Product | null)
+        : null,
+    [booking.productId, catalog]
+  );
   const product = useMemo(
-    () => findProductWithPickupLocations(products, booking.productId),
-    [products, booking.productId]
+    () => resolvePickupLocationProduct(staticProduct, liveProducts, booking.productId),
+    [staticProduct, liveProducts, booking.productId]
   );
-  const pickupLocations = product?.pickupLocations ?? [];
-  const destinations = product?.destinations ?? [];
+  const pickupLocations = useMemo(() => product?.pickupLocations ?? [], [product]);
+  const destinations = useMemo(() => product?.destinations ?? [], [product]);
 
-  const loadProducts = useCallback(async () => {
-    if (!companyId?.trim()) {
-      setError('Missing company information');
+  useEffect(() => {
+    if (!isOpen) return;
+    setError(null);
+    if (staticProduct) {
+      setLoading(false);
       return;
     }
-    setLoading(true);
-    setError(null);
-    try {
-      const data = await fetchProducts(companyId);
-      setProducts(data);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Failed to load pickup locations');
-    } finally {
+    if (!companyId.trim()) {
       setLoading(false);
+      setError('Missing company information');
+      return;
     }
-  }, [companyId]);
 
-  useEffect(() => {
-    if (isOpen && companyId) loadProducts();
-  }, [isOpen, companyId, loadProducts]);
+    let cancelled = false;
+    setLiveProducts([]);
+    setLoading(true);
+    fetchProducts(companyId)
+      .then((data) => {
+        if (!cancelled) setLiveProducts(data);
+      })
+      .catch((e) => {
+        if (!cancelled) {
+          setError(e instanceof Error ? e.message : 'Failed to load pickup locations');
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [isOpen, companyId, staticProduct]);
 
   useEffect(() => {
     if (isOpen) {

package/src/components/booking/pickup-location-product.ts

@@ -0,0 +1,24 @@
+import type { Product } from '../../lib/booking-api';
+
+export function findProductForPickupLocations(
+  products: Product[],
+  bookingProductId: string,
+): Product | null {
+  for (const product of products) {
+    if (product.productId === bookingProductId) return product;
+    if (product.pickupLocations?.some((location) => location.id === bookingProductId)) {
+      return product;
+    }
+    if (product.options?.some((option) => option.optionId === bookingProductId)) return product;
+  }
+  return null;
+}
+
+/** Keep manage-booking pickup choices aligned with the normal booking flow's static catalog. */
+export function resolvePickupLocationProduct(
+  staticProduct: Product | null,
+  liveProducts: Product[],
+  bookingProductId: string,
+): Product | null {
+  return staticProduct ?? findProductForPickupLocations(liveProducts, bookingProductId);
+}

package/src/lib/booking/pickup-location-disclaimer.ts

@@ -13,6 +13,8 @@ const SAMSON_MALL_PICKUP_LOCATION_ID = 'loc_afkvmlNRwRqZ';
 const SAMSON_MALL_PICKUP_LOCATION_NAME = 'samson mall';
 
 const LAKE_LOUISE_HOTEL_PICKUP_LOCATIONS = new Map([
+  ['loc_Ll05oVACjjAx', 'HI Lake Louise Alpine Centre'],
+  ['loc_VAJ0L8amxnC5', 'Fairmont Lake Louise'],
   ['loc_arPLLVG1xKxw', 'Mountaineer Lodge'],
   ['loc_9ObwCZ7MxfjC', 'Paradise Lodge and Bungalows'],
   ['loc_ieW6EfdVeYd4', 'Post Hotel'],

package/test/change-booking-helpers.test.ts

@@ -94,6 +94,7 @@ import {
   resolveInitialAvailabilityFromBooking,
 } from '../src/components/booking/change-booking-flow-helpers';
 import { collapseAdminPromoLines } from '../src/components/booking/admin-change-receipt-lines';
+import { resolvePickupLocationProduct } from '../src/components/booking/pickup-location-product';
 import {
   buildAdminChangePaymentChoiceData,
   buildAdminChangePayNowCheckoutModalData,
@@ -168,6 +169,43 @@ function test(name: string, fn: () => void | Promise<void>): void {
   }
 }
 
+test('manage-booking pickup locations prefer the normal booking static product', () => {
+  const staticProduct = {
+    productId: 'product_1',
+    name: 'Static product',
+    description: null,
+    status: 'ACTIVE',
+    options: [{ optionId: 'option_1' }],
+    pickupLocations: [{ id: 'pickup_kept', name: 'Kept pickup' }],
+  } as NonNullable<Parameters<typeof resolvePickupLocationProduct>[0]>;
+  const liveProduct = {
+    ...staticProduct,
+    name: 'Live product',
+    pickupLocations: [
+      { id: 'pickup_kept', name: 'Kept pickup' },
+      { id: 'pickup_removed', name: 'Removed pickup' },
+    ],
+  };
+
+  const resolved = resolvePickupLocationProduct(staticProduct, [liveProduct], 'option_1');
+
+  assert.equal(resolved, staticProduct);
+  assert.deepEqual(resolved?.pickupLocations?.map((location) => location.id), ['pickup_kept']);
+});
+
+test('manage-booking pickup locations fall back to a live product matched by option id', () => {
+  const liveProduct = {
+    productId: 'product_1',
+    name: 'Live product',
+    description: null,
+    status: 'ACTIVE',
+    options: [{ optionId: 'option_1' }],
+    pickupLocations: [{ id: 'pickup_1', name: 'Pickup one' }],
+  } as NonNullable<Parameters<typeof resolvePickupLocationProduct>[0]>;
+
+  assert.equal(resolvePickupLocationProduct(null, [liveProduct], 'option_1'), liveProduct);
+});
+
 test('availability cache revalidates only when a covered range is stale', () => {
   assert.equal(shouldRevalidateAvailabilityCache(true, false), false);
   assert.equal(shouldRevalidateAvailabilityCache(true, true), true);