@ticketboothapp/booking 1.2.96 → 1.2.97

package/CHANGE_BOOKING_BE_HANDOFF.md

@@ -126,6 +126,17 @@ Same selection fields as `ChangeBookingQuoteRequest`, plus:
   - `lineItems: Array<{ label?: string; amount?: number; type?: string; quantity?: number }>`
 - `feAmountDueMajorUnits?` (optional signed delta the FE displays; `newTotal - previousTotal`)
 
+For admin/provider cross-product changes, FE also sends:
+
+- `newParentProductId`: destination parent catalog product id (`p_...`)
+- `newProductId`: destination product option id selected from availability (`po_...` or equivalent), preserved for existing quote/apply compatibility
+
+BE should persist both the destination parent product and selected option when applying the change. Capacity checks,
+receipt pricing, add-ons, pickup locations, and itinerary display should resolve against `newParentProductId` +
+`newProductId`, not the booking’s original product. Same-parent receipt-floor rules continue only when the booking
+parent product equals `newParentProductId`; cross-parent changes should price from the destination catalog / FE
+authoritative admin receipt path.
+
 ### Backend expectations
 
 - Validate admin auth + booking/availability eligibility only.

package/package.json

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

package/src/components/booking/AdminChangeBookingFlow.tsx

@@ -5,6 +5,7 @@ import { parseISO, addWeeks, format, isBefore, isAfter, startOfDay, endOfDay } f
 import { formatInTimeZone, fromZonedTime } from 'date-fns-tz';
 import {
   getAvailabilities,
+  fetchProducts,
   cancelReservation,
   cancelReservationBestEffort,
   createPaymentIntent,
@@ -687,12 +688,29 @@ function resolveInitialAvailabilityFromBooking(
   return { selection: fallback, defer: false };
 }
 
+function isPrivateShuttleProduct(product: Pick<Product, 'productType'> | null | undefined): boolean {
+  return product?.productType === 'PRIVATE_SHUTTLE';
+}
+
+function getAdminChangeEligibleProducts(products: Product[], currentProduct: Product): Product[] {
+  if (isPrivateShuttleProduct(currentProduct)) return [currentProduct];
+  const activeStandardProducts = products.filter(
+    (p) =>
+      p.status === 'ACTIVE' &&
+      !isPrivateShuttleProduct(p) &&
+      p.options?.some((o) => o.status === 'ACTIVE'),
+  );
+  return activeStandardProducts.some((p) => p.productId === currentProduct.productId)
+    ? activeStandardProducts
+    : [currentProduct, ...activeStandardProducts];
+}
+
 /**
  * Admin / provider-dashboard **change booking** — literal duplicate of {@link ChangeBookingFlow} for now
  * so ticketbooth can diverge without affecting the public site flow.
  */
 export function AdminChangeBookingFlow({
-  product,
+  product: initialProduct,
   productId,
   onBack,
   currency: currencyFromParent,
@@ -714,6 +732,7 @@ export function AdminChangeBookingFlow({
   availabilityPricingProfileId,
   availabilityCancellationPolicyProfileId,
   onChangeBooking,
+  changeProductOptions,
 }: ChangeBookingFlowProps) {
   /** Always the booking’s sold currency — not the site currency switcher / parent default. */
   const currency = useMemo((): Currency => {
@@ -736,6 +755,19 @@ export function AdminChangeBookingFlow({
     return !(isPromoLikeType || isPromoLikeLabel);
   };
   const { env, analytics } = useBookingHost();
+  const isInitialPrivateShuttleBooking = isPrivateShuttleProduct(initialProduct);
+  const [availableChangeProducts, setAvailableChangeProducts] = useState<Product[]>(
+    () => getAdminChangeEligibleProducts(changeProductOptions ?? [initialProduct], initialProduct),
+  );
+  const [selectedChangeProductId, setSelectedChangeProductId] = useState(initialProduct.productId);
+  const [changeProductsLoading, setChangeProductsLoading] = useState(false);
+  const [changeProductsError, setChangeProductsError] = useState<string | null>(null);
+  const product = useMemo(
+    () =>
+      availableChangeProducts.find((p) => p.productId === selectedChangeProductId) ??
+      initialProduct,
+    [availableChangeProducts, selectedChangeProductId, initialProduct],
+  );
   const { t } = useTranslations();
   const { locale } = useLocale();
   const companyTimezone = useCompanyTimezone(); // Get timezone from context
@@ -752,6 +784,12 @@ export function AdminChangeBookingFlow({
   } = useBookingApp();
   const availabilitiesCache = useAvailabilitiesCache();
   const isAdmin = permissions.viewerRole === 'admin';
+  const originalParentProductId = useMemo(() => {
+    const pid = initialValues?.productId?.trim();
+    if (pid && isParentProductId(pid)) return pid;
+    return initialProduct.productId;
+  }, [initialValues?.productId, initialProduct.productId]);
+  const selectedParentProductChanged = selectedChangeProductId !== originalParentProductId;
   const [availabilities, setAvailabilities] = useState<Availability[]>([]);
   const [selectedAvailability, setSelectedAvailability] = useState<Availability | null>(null);
   const [selectedReturnOption, setSelectedReturnOption] = useState<ReturnOption | null>(null);
@@ -783,6 +821,83 @@ export function AdminChangeBookingFlow({
     Array<{ id: string; label: string; amountInput: string; amountSign: 1 | -1 }>
   >([]);
   const adminCustomLineIdRef = useRef(0);
+  const previousSelectedChangeProductIdRef = useRef(selectedChangeProductId);
+
+  useEffect(() => {
+    if (changeProductOptions?.length) {
+      const nextProducts = getAdminChangeEligibleProducts(changeProductOptions, initialProduct);
+      setAvailableChangeProducts(nextProducts);
+      setSelectedChangeProductId((current) =>
+        nextProducts.some((p) => p.productId === current) ? current : initialProduct.productId,
+      );
+      return;
+    }
+    setAvailableChangeProducts((prev) => {
+      const hasInitial = prev.some((p) => p.productId === initialProduct.productId);
+      return hasInitial ? prev : [initialProduct, ...prev];
+    });
+    setSelectedChangeProductId((current) => current || initialProduct.productId);
+  }, [initialProduct, changeProductOptions]);
+
+  useEffect(() => {
+    if (changeProductOptions?.length) return;
+    if (!isAdmin || !env.COMPANY_ID) return;
+    let cancelled = false;
+    setChangeProductsLoading(true);
+    setChangeProductsError(null);
+    fetchProducts(env.COMPANY_ID)
+      .then((products) => {
+        if (cancelled) return;
+        const nextProducts = getAdminChangeEligibleProducts(products, initialProduct);
+        setAvailableChangeProducts(nextProducts);
+        setSelectedChangeProductId((current) =>
+          nextProducts.some((p) => p.productId === current) ? current : initialProduct.productId,
+        );
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setChangeProductsError(err instanceof Error ? err.message : 'Failed to load products');
+      })
+      .finally(() => {
+        if (!cancelled) setChangeProductsLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [changeProductOptions, isAdmin, env.COMPANY_ID, initialProduct]);
+
+  useEffect(() => {
+    if (previousSelectedChangeProductIdRef.current === selectedChangeProductId) return;
+    previousSelectedChangeProductIdRef.current = selectedChangeProductId;
+    setAvailabilities([]);
+    setSelectedAvailability(null);
+    setSelectedReturnOption(null);
+    setAddOns([]);
+    setPrecomputedPricesByOption(null);
+    setPricingConfig(null);
+    pricingConfigSetRef.current = false;
+    fetchingRef.current = false;
+    hasLoadedAvailabilitiesRef.current = false;
+    inFlightRangeRef.current = null;
+    fetchedRangesRef.current = [];
+    pendingRangeRef.current = null;
+    earliestAvailabilityDateRef.current = null;
+    lastCompletedQuoteInputsKeyRef.current = null;
+    inFlightQuoteInputsKeyRef.current = null;
+    setLatestChangeQuote(null);
+    setChangeQuoteFetchError(null);
+    setChangeQuoteLoading(false);
+    setError('');
+  }, [selectedChangeProductId]);
+
+  useEffect(() => {
+    if (!pickupLocationId) return;
+    const pickupLocations = product.pickupLocations ?? [];
+    if (pickupLocations.length === 0) return;
+    if (pickupLocations.some((loc) => loc.id === pickupLocationId)) return;
+    setPickupLocationId(null);
+    setPickupLocationSkipped(false);
+  }, [pickupLocationId, product.pickupLocations]);
 
   // Auto-apply promo code when parent page passes one (e.g. partner pages).
   // Seed input only; validate/apply runs after date/time + tickets exist (debounced + handleApplyPromo).
@@ -3574,6 +3689,7 @@ export function AdminChangeBookingFlow({
         hasOperationalChangesFromInitial: false,
         dateChanged: false,
         ticketsChanged: false,
+        productChanged: false,
         optionChanged: false,
         pickupChanged: false,
         countsChanged: false,
@@ -3587,6 +3703,7 @@ export function AdminChangeBookingFlow({
         hasOperationalChangesFromInitial: false,
         dateChanged: false,
         ticketsChanged: false,
+        productChanged: false,
         optionChanged: false,
         pickupChanged: false,
         countsChanged: false,
@@ -3605,6 +3722,7 @@ export function AdminChangeBookingFlow({
     const optionChanged = Boolean(
       selectedOpt != null && initialOpt != null && initialOpt !== selectedOpt
     );
+    const productChanged = selectedParentProductChanged;
     const normalizePickupId = (value: string | null | undefined) => {
       const trimmed = value?.trim();
       return trimmed ? trimmed : null;
@@ -3678,6 +3796,7 @@ export function AdminChangeBookingFlow({
     return {
       hasChangesFromInitial:
         dateChanged ||
+        productChanged ||
         optionChanged ||
         pickupChanged ||
         countsChanged ||
@@ -3687,13 +3806,15 @@ export function AdminChangeBookingFlow({
       // ignore option-id noise and only consider user-visible booking deltas.
       hasOperationalChangesFromInitial:
         dateChanged ||
+        productChanged ||
         pickupChanged ||
         countsChanged ||
         addOnsChanged ||
         returnChanged,
       dateChanged,
       // Tickets line corresponds to "option + ticket counts"; add-ons and pickup changes affect itinerary but not the ticket label.
-      ticketsChanged: Boolean(optionChanged || countsChanged),
+      ticketsChanged: Boolean(productChanged || optionChanged || countsChanged),
+      productChanged,
       optionChanged,
       pickupChanged,
       countsChanged,
@@ -3702,6 +3823,7 @@ export function AdminChangeBookingFlow({
     };
   }, [
     initialValues,
+    selectedParentProductChanged,
     changeFlowResolvedInitialProductOptionId,
     selectedAvailability,
     selectedReturnOption,
@@ -3726,6 +3848,7 @@ export function AdminChangeBookingFlow({
   const changeQuoteInputsKey = useMemo(() => JSON.stringify({
     bookingReference: initialValues?.bookingReference?.trim() ?? '',
     lastName: lastName.trim().toLowerCase(),
+    parentProductId: product.productId,
     optionId: selectedAvailability?.productOptionId?.trim() || activeOptions[0]?.optionId || '',
     dateTime: selectedAvailability?.dateTime ?? '',
     availabilityId: selectedAvailability?.availabilityId ?? null,
@@ -3740,6 +3863,7 @@ export function AdminChangeBookingFlow({
   }), [
     initialValues?.bookingReference,
     lastName,
+    product.productId,
     selectedAvailability?.productOptionId,
     selectedAvailability?.dateTime,
     selectedAvailability?.availabilityId,
@@ -3753,8 +3877,8 @@ export function AdminChangeBookingFlow({
     editableSummaryLineLabelInputs,
     useAdminFeAuthoritativeQuote,
   ]);
-  const requiresReturnInChangeFlow = isCustomerSelfServeChange && !!initialValues?.returnAvailabilityId?.trim();
-  const missingRequiredReturnSelection = requiresReturnInChangeFlow && !selectedReturnOption;
+  const destinationRequiresReturnSelection = Boolean(selectedAvailability?.returnOptions?.length);
+  const missingRequiredReturnSelection = destinationRequiresReturnSelection && !selectedReturnOption;
 
   const changeFlowSubmitDisabled =
     missingRequiredReturnSelection ||
@@ -4104,7 +4228,7 @@ export function AdminChangeBookingFlow({
 
   const checkoutFormError =
     (error || '') ||
-    (missingRequiredReturnSelection ? 'Removing return option in self-serve is not available. Please contact support.' : '') ||
+    (missingRequiredReturnSelection ? 'Please select a return time for this product.' : '') ||
     (isCustomerSelfServeChange && isChangeQuoteBlocked ? (latestChangeQuote?.reasonIfBlocked ?? '') : '') ||
     (isCustomerSelfServeChange ? changeQuoteFetchError ?? '' : '');
 
@@ -4317,6 +4441,7 @@ export function AdminChangeBookingFlow({
             bookingReference: bookingReferenceForQuote,
             lastName: lastName.trim(),
             newProductId: optionId,
+            newParentProductId: product.productId,
             newDateTime: selectedAvailability.dateTime,
             newAvailabilityId: selectedAvailability.availabilityId || null,
             newPickupLocationId: pickupLocationId || null,
@@ -4588,6 +4713,21 @@ export function AdminChangeBookingFlow({
     initialValues?.returnDateTime,
   ]);
 
+  useEffect(() => {
+    if (!selectedReturnOption) return;
+    const returnOptions = selectedAvailability?.returnOptions ?? [];
+    if (returnOptions.length === 0) {
+      setSelectedReturnOption(null);
+      return;
+    }
+    const updatedReturnOption = returnOptions.find(
+      (opt) => opt.returnAvailabilityId === selectedReturnOption.returnAvailabilityId,
+    );
+    if (!updatedReturnOption) {
+      setSelectedReturnOption(null);
+    }
+  }, [selectedAvailability?.returnOptions, selectedReturnOption]);
+
   // Fetch add-ons when availability (product option) is selected; clear selections when option changes
   const availabilityProductOptionId = selectedAvailability?.productOptionId ?? null;
   const prevAvailabilityProductOptionIdRef = useRef<string | null>(null);
@@ -4856,7 +4996,7 @@ export function AdminChangeBookingFlow({
       return;
     }
     if (missingRequiredReturnSelection) {
-      setError('Removing return option in self-serve is not available. Please contact support.');
+      setError('Please select a return time for this product.');
       return;
     }
 
@@ -4939,6 +5079,7 @@ export function AdminChangeBookingFlow({
           bookingReference: changeBookingReference,
           lastName: changeLastName,
           newProductId: availabilityProductOptionId,
+          newParentProductId: product.productId,
           newDateTime: selectedAvailability.dateTime,
           newAvailabilityId: selectedAvailability.availabilityId || null,
           newPickupLocationId: pickupLocationId || null,
@@ -5053,6 +5194,7 @@ export function AdminChangeBookingFlow({
               : null;
             await onChangeBooking({
               productId: availabilityProductOptionId,
+              parentProductId: product.productId,
               dateTime: selectedAvailability.dateTime,
               bookingItems,
               returnAvailabilityId: selectedReturnOption?.returnAvailabilityId ?? null,
@@ -5448,6 +5590,7 @@ export function AdminChangeBookingFlow({
           : null;
         await onChangeBooking({
           productId: availabilityProductOptionId,
+          parentProductId: product.productId,
           dateTime: selectedAvailability.dateTime,
           bookingItems,
           returnAvailabilityId: selectedReturnOption?.returnAvailabilityId ?? null,
@@ -5645,6 +5788,40 @@ export function AdminChangeBookingFlow({
       )}
       {isPartialLaunch ? null : (
       <div className="booking-calendar-section">
+      {isAdmin && !isInitialPrivateShuttleBooking && availableChangeProducts.length > 1 ? (
+        <div className="mb-6 rounded-lg border border-stone-200 bg-stone-50 p-4">
+          <label
+            className="mb-2 block text-sm font-medium text-stone-800"
+            htmlFor="admin-change-product-select"
+          >
+            Product
+          </label>
+          <select
+            id="admin-change-product-select"
+            className="w-full rounded-md border border-stone-300 bg-white px-3 py-2 text-sm text-stone-900 focus:outline-none focus:ring-2 focus:ring-stone-400/80"
+            value={selectedChangeProductId}
+            disabled={changeProductsLoading || loading || showCheckoutModal || showAdminPaymentChoice}
+            onChange={(e) => {
+              setSelectedChangeProductId(e.target.value);
+              setSelectedDate('');
+              setImplicitReturnBaselineId(null);
+              changeFlowOutboundAnchorRef.current = null;
+              changeFlowReturnAnchorRef.current = null;
+            }}
+          >
+            {availableChangeProducts.map((p) => (
+              <option key={p.productId} value={p.productId}>
+                {p.name}
+              </option>
+            ))}
+          </select>
+          {changeProductsError ? (
+            <div className="mt-2 text-xs text-amber-800">
+              Product list could not be refreshed. Showing the current product only.
+            </div>
+          ) : null}
+        </div>
+      ) : null}
       {loadingAvailabilities && availabilities.length === 0 ? (
         <div className="flex flex-col items-center justify-center py-12 gap-4">
           <div className="booking-loading-spinner" aria-hidden />

package/src/components/booking/booking-flow-types.ts

@@ -104,6 +104,8 @@ export interface BookingFlowBaseProps {
   availabilityPricingProfileId?: string | null;
   /** When set (e.g. partner portal), get-availabilities filters cancellation policies by this profile. */
   availabilityCancellationPolicyProfileId?: string | null;
+  /** Admin change-booking: available destination products for switching the booking to another product. */
+  changeProductOptions?: Product[];
 }
 
 /** Standard (new) reservation flow — no change-booking receipt or callbacks. */

package/src/components/booking/provider-dashboard-change-booking.ts

@@ -2,6 +2,9 @@ import type { Currency } from './CurrencySwitcher';
 
 /** Payload passed to `onChangeBooking` when applying a dashboard-managed booking change. */
 export type ProviderDashboardChangeBookingPayload = {
+  /** Parent catalog product id. Present when admin changes the booking to a different product. */
+  parentProductId?: string;
+  /** Product option id selected for the new booking. */
   productId: string;
   dateTime: string;
   bookingItems: Array<{ category: string; count: number }>;

package/src/lib/booking-api.ts

@@ -845,6 +845,9 @@ export interface CreatePaymentIntentResponse {
 export interface ChangeBookingQuoteRequest {
   bookingReference: string;
   lastName: string;
+  /** Parent catalog product id for cross-product admin/provider changes. */
+  newParentProductId?: string | null;
+  /** Product option id selected for the new booking; retained as `newProductId` for existing BE compatibility. */
   newProductId: string;
   newDateTime: string;
   /** Outbound availability id for the new selection (must match option + datetime server-side). */