@ticketboothapp/booking 1.2.151 → 1.2.152

package/package.json

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

package/src/components/booking/AdminChangeCheckoutDialogs.tsx

@@ -57,6 +57,7 @@ export function AdminChangeCheckoutDialogs({
         currency={currency}
         loading={loading}
         error={error}
+        reservationExpiration={adminChoiceData?.reservationExpiration}
         onPayNow={onPayNow}
         onConfirmWithoutPayment={onConfirmWithoutPayment}
         onCancel={onAdminPaymentChoiceCancel}

package/src/components/booking/AdminPaymentChoiceModal.tsx

@@ -1,7 +1,13 @@
 'use client';
 
+import { useEffect, useState } from 'react';
 import { formatCurrencyAmount } from '../../lib/currency';
 import type { Currency } from './CurrencySwitcher';
+import {
+  formatReservationHoldTime,
+  reservationHoldSecondsRemaining,
+  RESERVATION_HOLD_EXPIRED_MESSAGE,
+} from './reservation-hold';
 
 interface AdminPaymentChoiceModalProps {
   open: boolean;
@@ -9,6 +15,7 @@ interface AdminPaymentChoiceModalProps {
   currency: Currency;
   loading: boolean;
   error: string;
+  reservationExpiration?: string;
   onPayNow: () => void;
   onConfirmWithoutPayment: () => void;
   onCancel: () => void;
@@ -27,14 +34,27 @@ export function AdminPaymentChoiceModal({
   currency,
   loading,
   error,
+  reservationExpiration,
   onPayNow,
   onConfirmWithoutPayment,
   onCancel,
   description,
   payNowLabel,
 }: AdminPaymentChoiceModalProps) {
+  const [nowMs, setNowMs] = useState(() => Date.now());
+
+  useEffect(() => {
+    if (!open || !reservationExpiration) return;
+    setNowMs(Date.now());
+    const interval = window.setInterval(() => setNowMs(Date.now()), 1000);
+    return () => window.clearInterval(interval);
+  }, [open, reservationExpiration]);
+
   if (!open) return null;
 
+  const secondsRemaining = reservationHoldSecondsRemaining(reservationExpiration, nowMs);
+  const expired = secondsRemaining !== null && secondsRemaining <= 0;
+
   const modal = (
     <div
       className="booking-flow-root booking-flow-preflight fixed inset-0 z-[10050] flex items-center justify-center p-4 bg-black/50 pointer-events-auto"
@@ -68,6 +88,32 @@ export function AdminPaymentChoiceModal({
         </div>
 
         <div className="p-6 flex flex-col gap-3 flex-1 min-h-0">
+          {secondsRemaining !== null ? (
+            <div
+              className={`rounded-lg border p-3 text-sm ${
+                expired
+                  ? 'border-red-200 bg-red-50 text-red-800'
+                  : 'border-emerald-200 bg-emerald-50 text-emerald-800'
+              }`}
+              role={expired ? 'alert' : 'status'}
+              aria-live="polite"
+            >
+              {expired ? (
+                <>
+                  <p className="font-semibold">Reservation hold expired</p>
+                  <p className="mt-1">{RESERVATION_HOLD_EXPIRED_MESSAGE}</p>
+                </>
+              ) : (
+                <>
+                  <p className="font-semibold">
+                    Reservation held for {formatReservationHoldTime(secondsRemaining)}
+                  </p>
+                  <p className="mt-1">Complete payment or confirm the booking before the hold expires.</p>
+                </>
+              )}
+            </div>
+          ) : null}
+
           {error ? (
             <p className="text-sm text-red-600" role="alert">
               {error}
@@ -77,7 +123,7 @@ export function AdminPaymentChoiceModal({
           <button
             type="button"
             onClick={onPayNow}
-            disabled={loading}
+            disabled={loading || expired}
             className="w-full py-3 px-4 bg-emerald-600 text-white font-semibold rounded-lg hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed"
           >
             {loading ? 'Loading...' : `${payNowLabel ?? 'Pay now'} (${formatCurrencyAmount(totalAmount, currency)})`}
@@ -85,7 +131,7 @@ export function AdminPaymentChoiceModal({
           <button
             type="button"
             onClick={onConfirmWithoutPayment}
-            disabled={loading}
+            disabled={loading || expired}
             className="w-full py-3 px-4 border border-stone-300 text-stone-700 rounded-lg hover:bg-stone-50 font-medium disabled:opacity-50 disabled:cursor-not-allowed"
           >
             Confirm without payment
@@ -96,7 +142,7 @@ export function AdminPaymentChoiceModal({
             disabled={loading}
             className="w-full py-2 text-sm text-stone-500 hover:text-stone-700 font-medium disabled:opacity-50"
           >
-            Cancel
+            {expired ? 'Close and restart checkout' : 'Cancel'}
           </button>
         </div>
       </div>

package/src/components/booking/PrivateShuttleCheckoutDialogs.tsx

@@ -57,6 +57,7 @@ export function PrivateShuttleCheckoutDialogs({
         currency={currency}
         loading={loading}
         error={error}
+        reservationExpiration={adminChoiceData?.reservationExpiration}
         description={
           adminChoiceData?.isDepositPayment
             ? 'Pay the deposit now, or confirm without payment. The customer can pay the deposit or remaining balance from the Manage Booking page.'

package/src/components/booking/StandardBookingCheckoutDialogs.tsx

@@ -57,6 +57,7 @@ export function StandardBookingCheckoutDialogs({
         currency={currency}
         loading={loading}
         error={error}
+        reservationExpiration={adminChoiceData?.reservationExpiration}
         onPayNow={onPayNow}
         onConfirmWithoutPayment={onConfirmWithoutPayment}
         onCancel={onAdminPaymentChoiceCancel}

package/src/components/booking/private-shuttle-checkout-controller.ts

@@ -47,6 +47,10 @@ import {
   type PrivateShuttleCheckoutModalData,
 } from './private-shuttle-payment-choice-runner';
 import { BOOKING_FLOW_ABANDON_EVENT } from '../../providers/booking-dialog-provider';
+import {
+  reservationHoldHasExpired,
+  RESERVATION_HOLD_EXPIRED_MESSAGE,
+} from './reservation-hold';
 
 export interface UsePrivateShuttleCheckoutControllerParams {
   selectedOption: string;
@@ -676,6 +680,10 @@ export function usePrivateShuttleCheckoutController({
   const handleConfirmWithoutPayment = async () => {
     const choice = adminChoiceData;
     if (!choice) return;
+    if (reservationHoldHasExpired(choice.reservationExpiration)) {
+      setError(RESERVATION_HOLD_EXPIRED_MESSAGE);
+      return;
+    }
     setLoading(true);
     setError('');
     try {
@@ -718,6 +726,10 @@ export function usePrivateShuttleCheckoutController({
   const handlePayNow = () => {
     const choice = adminChoiceData;
     if (!choice) return;
+    if (reservationHoldHasExpired(choice.reservationExpiration)) {
+      setError(RESERVATION_HOLD_EXPIRED_MESSAGE);
+      return;
+    }
     setShowAdminPaymentChoice(false);
     setCheckoutClientSecret(choice.clientSecret);
     setCheckoutModalData(buildPrivateShuttlePayNowCheckoutModalData(choice, lastName.trim()));
@@ -726,6 +738,7 @@ export function usePrivateShuttleCheckoutController({
   };
 
   const handleAdminPaymentChoiceCancel = () => {
+    cancelPendingReservation();
     setShowAdminPaymentChoice(false);
     setAdminChoiceData(null);
     setError('');

package/src/components/booking/reservation-hold.ts

@@ -0,0 +1,27 @@
+export const RESERVATION_HOLD_EXPIRED_MESSAGE =
+  'This reservation hold has expired. Close this window and restart checkout to get current availability and pricing.';
+
+export function reservationHoldSecondsRemaining(
+  reservationExpiration: string | undefined,
+  nowMs: number = Date.now(),
+): number | null {
+  if (!reservationExpiration) return null;
+  const expirationMs = Date.parse(reservationExpiration);
+  if (!Number.isFinite(expirationMs)) return 0;
+  return Math.max(0, Math.ceil((expirationMs - nowMs) / 1000));
+}
+
+export function reservationHoldHasExpired(
+  reservationExpiration: string | undefined,
+  nowMs: number = Date.now(),
+): boolean {
+  const remaining = reservationHoldSecondsRemaining(reservationExpiration, nowMs);
+  return remaining !== null && remaining <= 0;
+}
+
+export function formatReservationHoldTime(seconds: number): string {
+  const safeSeconds = Math.max(0, Math.floor(seconds));
+  const minutes = Math.floor(safeSeconds / 60);
+  const remainder = safeSeconds % 60;
+  return `${minutes}:${String(remainder).padStart(2, '0')}`;
+}

package/src/components/booking/standard-booking-checkout-controller.ts

@@ -42,6 +42,10 @@ import {
   type StandardCheckoutModalData,
 } from './standard-booking-payment-choice-runner';
 import { BOOKING_FLOW_ABANDON_EVENT } from '../../providers/booking-dialog-provider';
+import {
+  reservationHoldHasExpired,
+  RESERVATION_HOLD_EXPIRED_MESSAGE,
+} from './reservation-hold';
 
 export interface UseStandardBookingCheckoutControllerParams {
   selectedAvailability: Availability | null;
@@ -590,6 +594,10 @@ export function useStandardBookingCheckoutController({
   const handleConfirmWithoutPayment = async () => {
     const choice = adminChoiceData;
     if (!choice) return;
+    if (reservationHoldHasExpired(choice.reservationExpiration)) {
+      setError(RESERVATION_HOLD_EXPIRED_MESSAGE);
+      return;
+    }
     setLoading(true);
     setError('');
     try {
@@ -634,6 +642,10 @@ export function useStandardBookingCheckoutController({
   const handlePayNow = () => {
     const choice = adminChoiceData;
     if (!choice) return;
+    if (reservationHoldHasExpired(choice.reservationExpiration)) {
+      setError(RESERVATION_HOLD_EXPIRED_MESSAGE);
+      return;
+    }
     setShowAdminPaymentChoice(false);
     setCheckoutClientSecret(choice.clientSecret);
     setCheckoutModalData(buildStandardPayNowCheckoutModalData(choice, lastName.trim()));
@@ -642,6 +654,7 @@ export function useStandardBookingCheckoutController({
   };
 
   const handleAdminPaymentChoiceCancel = () => {
+    cancelPendingReservation();
     setShowAdminPaymentChoice(false);
     setAdminChoiceData(null);
     setError('');

package/src/components/booking/useAdminChangeCheckoutController.ts

@@ -62,6 +62,10 @@ import {
   confirmFreeAdminCustomerChange,
   quoteAdminCustomerChangeForCheckout,
 } from './admin-change-customer-quote-runner';
+import {
+  reservationHoldHasExpired,
+  RESERVATION_HOLD_EXPIRED_MESSAGE,
+} from './reservation-hold';
 
 type AdminCustomReceiptLine = { label: string; amountInput: string; amountSign?: number };
 
@@ -690,6 +694,10 @@ export function useAdminChangeCheckoutController({
 
   const handleConfirmWithoutPayment = async () => {
     if (!adminChoiceData) return;
+    if (reservationHoldHasExpired(adminChoiceData.reservationExpiration)) {
+      setError(RESERVATION_HOLD_EXPIRED_MESSAGE);
+      return;
+    }
     setLoading(true);
     setError('');
     try {
@@ -771,6 +779,10 @@ export function useAdminChangeCheckoutController({
 
   const handlePayNow = () => {
     if (!adminChoiceData) return;
+    if (reservationHoldHasExpired(adminChoiceData.reservationExpiration)) {
+      setError(RESERVATION_HOLD_EXPIRED_MESSAGE);
+      return;
+    }
     setShowAdminPaymentChoice(false);
     setCheckoutClientSecret(adminChoiceData.clientSecret);
     setCheckoutModalData(buildAdminChangePayNowCheckoutModalData(adminChoiceData, lastName));
@@ -787,10 +799,11 @@ export function useAdminChangeCheckoutController({
   }, []);
 
   const handleAdminPaymentChoiceCancel = useCallback(() => {
+    cancelPendingReservation();
     setShowAdminPaymentChoice(false);
     setAdminChoiceData(null);
     setError('');
-  }, [setError]);
+  }, [cancelPendingReservation, setError]);
 
   return {
     showCheckoutModal,

package/src/lib/booking-api.ts

@@ -68,6 +68,9 @@ function getUserFacingMessage(endpoint: string): string {
       return 'Unable to hold your booking right now. Please try again.';
     case '/checkout/payment-intent':
       return 'Unable to continue to payment right now. Please try again.';
+    case '/checkout/confirm-booking-without-payment':
+    case '/1/partner/confirm-booking-without-payment':
+      return 'Unable to confirm this booking right now. Please try again or restart checkout.';
     default:
       return 'Something went wrong while loading booking details. Please try again.';
   }
@@ -186,7 +189,11 @@ function createUserError(
   bookingApiErrorCode?: string
 ): BookingClientError {
   const supportCode = buildSupportCode(endpoint, errorClass);
-  const userMessage = `${getUserFacingMessage(endpoint)} (${supportCode})`;
+  const userMessage = bookingApiErrorCode === 'RESERVATION_EXPIRED'
+    ? 'This reservation hold has expired. Close this window and restart checkout to get current availability and pricing.'
+    : bookingApiErrorCode === 'RESERVATION_NOT_ACTIVE'
+      ? 'This reservation has already been completed or closed. Refresh before trying again.'
+      : `${getUserFacingMessage(endpoint)} (${supportCode})`;
   const error = new Error(userMessage) as BookingClientError;
   error.debugMessage = debugMessage;
   if (bookingApiErrorCode) error.bookingApiErrorCode = bookingApiErrorCode;
@@ -2580,7 +2587,12 @@ export async function confirmBookingWithoutPayment(
       httpStatus: res.status,
       errorCode: isApiErrorPayload(err) ? err.errorCode : undefined,
     });
-    throw createUserError(endpoint, 'HTTP', debugMessage);
+    throw createUserError(
+      endpoint,
+      'HTTP',
+      debugMessage,
+      isApiErrorPayload(err) ? err.errorCode : undefined,
+    );
   }
   const data = await parseJsonSafely(res);
   const appError = toAppLevelErrorMessage(endpoint, data, 'Failed to confirm booking');
@@ -2591,7 +2603,12 @@ export async function confirmBookingWithoutPayment(
       message: appError,
       errorCode: isApiErrorPayload(data) ? data.errorCode : undefined,
     });
-    throw createUserError(endpoint, 'APP_ERROR_200', appError);
+    throw createUserError(
+      endpoint,
+      'APP_ERROR_200',
+      appError,
+      isApiErrorPayload(data) ? data.errorCode : undefined,
+    );
   }
   logBookingSourceDebug('response', '/checkout/confirm-booking-without-payment', data);
   return ((data as { data?: ConfirmBookingWithoutPaymentResponse } | null)?.data ??
@@ -2636,7 +2653,12 @@ export async function confirmPartnerBookingWithoutPayment(
       httpStatus: res.status,
       errorCode: isApiErrorPayload(err) ? err.errorCode : undefined,
     });
-    throw createUserError(endpoint, 'HTTP', debugMessage);
+    throw createUserError(
+      endpoint,
+      'HTTP',
+      debugMessage,
+      isApiErrorPayload(err) ? err.errorCode : undefined,
+    );
   }
   const data = await parseJsonSafely(res);
   const appError = toAppLevelErrorMessage(endpoint, data, 'Failed to confirm booking');
@@ -2647,7 +2669,12 @@ export async function confirmPartnerBookingWithoutPayment(
       message: appError,
       errorCode: isApiErrorPayload(data) ? data.errorCode : undefined,
     });
-    throw createUserError(endpoint, 'APP_ERROR_200', appError);
+    throw createUserError(
+      endpoint,
+      'APP_ERROR_200',
+      appError,
+      isApiErrorPayload(data) ? data.errorCode : undefined,
+    );
   }
   logBookingSourceDebug('response', endpoint, data);
   return ((data as { data?: ConfirmBookingWithoutPaymentResponse } | null)?.data ??

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

@@ -14,6 +14,11 @@ import {
   resolveHydratedPrivateShuttleAvailability,
 } from '../src/components/booking/private-shuttle-availability';
 import { sanitizeBookingSourceUrl } from '../src/lib/booking/source-metadata';
+import {
+  formatReservationHoldTime,
+  reservationHoldHasExpired,
+  reservationHoldSecondsRemaining,
+} from '../src/components/booking/reservation-hold';
 
 function quote(overrides: Partial<ChangeBookingQuoteResponse>): ChangeBookingQuoteResponse {
   return {
@@ -42,6 +47,23 @@ function test(name: string, fn: () => void): void {
   }
 }
 
+test('admin payment choice countdown expires exactly at the reservation deadline', () => {
+  const expiration = '2026-07-16T15:46:44+00:00';
+  assert.equal(
+    reservationHoldSecondsRemaining(expiration, Date.parse('2026-07-16T15:46:34Z')),
+    10,
+  );
+  assert.equal(reservationHoldHasExpired(expiration, Date.parse('2026-07-16T15:46:43.999Z')), false);
+  assert.equal(reservationHoldHasExpired(expiration, Date.parse('2026-07-16T15:46:44Z')), true);
+  assert.equal(formatReservationHoldTime(604), '10:04');
+});
+
+test('malformed reservation expiration fails closed', () => {
+  assert.equal(reservationHoldSecondsRemaining('not-a-date', Date.now()), 0);
+  assert.equal(reservationHoldHasExpired('not-a-date', Date.now()), true);
+  assert.equal(reservationHoldHasExpired(undefined, Date.now()), false);
+});
+
 test('source attribution strips Stripe credentials and transient partner checkout identity', () => {
   const sanitized = sanitizeBookingSourceUrl(
     'https://staging.booking.viaviamorainelake.com/?partnerId=par_safe&agentId=agent_safe&agentName=Isadora+Buttonmoss&embed_manage=1&reservationRef=resRef_previous&lastName=Tauro&bookingDate=2026-07-16&payment_intent=pi_previous&payment_intent_client_secret=do_not_store&redirect_status=succeeded&tab=bookings',