@ticketboothapp/booking 1.2.162 → 1.2.163

package/package.json

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

package/src/components/booking/AdminChangeBookingContent.tsx

@@ -48,6 +48,7 @@ const dialogPropKeys = [
   'onCheckoutClose',
   'onPaymentSubmitStart',
   'onPaymentSubmitError',
+  'onPaymentConfirmed',
   'getSuccessUrl',
   't',
 ] as const;

package/src/components/booking/AdminChangeBookingFlow.tsx

@@ -930,6 +930,7 @@ export function AdminChangeBookingFlow({
     handlePayNow,
     handlePaymentSubmitStart,
     handlePaymentSubmitError,
+    handlePaymentConfirmed,
     handleAdminPaymentChoiceCancel,
   } = useAdminChangeCheckoutController({
     selectedAvailability,
@@ -1022,7 +1023,7 @@ export function AdminChangeBookingFlow({
         onPayNow: handlePayNow,
         onConfirmWithoutPayment: handleConfirmWithoutPayment, onAdminPaymentChoiceCancel: handleAdminPaymentChoiceCancel,
         onCheckoutClose: cancelPendingReservation, onPaymentSubmitStart: handlePaymentSubmitStart,
-        onPaymentSubmitError: handlePaymentSubmitError,
+        onPaymentSubmitError: handlePaymentSubmitError, onPaymentConfirmed: handlePaymentConfirmed,
         isPartialLaunch,
         checkoutVisible: selectedAvailability != null,
         visible: isAdmin && !isInitialPrivateShuttleBooking && availableChangeProducts.length > 1,

package/src/components/booking/AdminChangeCheckoutDialogs.tsx

@@ -28,6 +28,7 @@ export interface AdminChangeCheckoutDialogsProps {
   onCheckoutClose: () => void;
   onPaymentSubmitStart: () => void;
   onPaymentSubmitError: () => void;
+  onPaymentConfirmed: (paymentIntentId: string) => Promise<void>;
 }
 
 export function AdminChangeCheckoutDialogs({
@@ -48,6 +49,7 @@ export function AdminChangeCheckoutDialogs({
   onCheckoutClose,
   onPaymentSubmitStart,
   onPaymentSubmitError,
+  onPaymentConfirmed,
 }: AdminChangeCheckoutDialogsProps) {
   return (
     <>
@@ -61,6 +63,10 @@ export function AdminChangeCheckoutDialogs({
         onPayNow={onPayNow}
         onConfirmWithoutPayment={onConfirmWithoutPayment}
         onCancel={onAdminPaymentChoiceCancel}
+        title={adminChoiceData?.dialogTitle}
+        description={adminChoiceData?.dialogDescription}
+        confirmWithoutPaymentLabel={adminChoiceData?.confirmWithoutPaymentLabel}
+        preferConfirmWithoutPayment={adminChoiceData?.preferConfirmWithoutPayment}
       />
       {checkoutModalData && (
         <CheckoutModal
@@ -68,6 +74,9 @@ export function AdminChangeCheckoutDialogs({
           onClose={onCheckoutClose}
           onPaymentSubmitStart={onPaymentSubmitStart}
           onPaymentSubmitError={onPaymentSubmitError}
+          onPaymentConfirmed={
+            checkoutModalData.finalizeExistingChangeInline ? onPaymentConfirmed : undefined
+          }
           clientSecret={checkoutClientSecret}
           reservationReference={checkoutModalData.reservationReference}
           reservationExpiration={checkoutModalData.reservationExpiration}

package/src/components/booking/AdminPaymentChoiceModal.tsx

@@ -21,6 +21,9 @@ interface AdminPaymentChoiceModalProps {
   onCancel: () => void;
   description?: string;
   payNowLabel?: string;
+  title?: string;
+  confirmWithoutPaymentLabel?: string;
+  preferConfirmWithoutPayment?: boolean;
 }
 
 /**
@@ -40,6 +43,9 @@ export function AdminPaymentChoiceModal({
   onCancel,
   description,
   payNowLabel,
+  title,
+  confirmWithoutPaymentLabel,
+  preferConfirmWithoutPayment = false,
 }: AdminPaymentChoiceModalProps) {
   const [nowMs, setNowMs] = useState(() => Date.now());
 
@@ -69,7 +75,7 @@ export function AdminPaymentChoiceModal({
         <div className="p-6 border-b border-stone-200 flex-shrink-0">
           <div className="flex justify-between items-start gap-3">
             <h3 className="text-lg font-semibold text-stone-900 pr-2">
-              Complete booking
+              {title ?? 'Complete booking'}
             </h3>
             <button
               type="button"
@@ -120,22 +126,38 @@ export function AdminPaymentChoiceModal({
             </p>
           ) : null}
 
+          {preferConfirmWithoutPayment ? (
+            <button
+              type="button"
+              onClick={onConfirmWithoutPayment}
+              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 ? 'Applying...' : (confirmWithoutPaymentLabel ?? 'Confirm without payment')}
+            </button>
+          ) : null}
           <button
             type="button"
             onClick={onPayNow}
             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"
+            className={`w-full py-3 px-4 font-semibold rounded-lg disabled:opacity-50 disabled:cursor-not-allowed ${
+              preferConfirmWithoutPayment
+                ? 'border border-stone-300 text-stone-700 hover:bg-stone-50'
+                : 'bg-emerald-600 text-white hover:bg-emerald-700'
+            }`}
           >
             {loading ? 'Loading...' : `${payNowLabel ?? 'Pay now'} (${formatCurrencyAmount(totalAmount, currency)})`}
           </button>
-          <button
-            type="button"
-            onClick={onConfirmWithoutPayment}
-            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
-          </button>
+          {!preferConfirmWithoutPayment ? (
+            <button
+              type="button"
+              onClick={onConfirmWithoutPayment}
+              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"
+            >
+              {confirmWithoutPaymentLabel ?? 'Confirm without payment'}
+            </button>
+          ) : null}
           <button
             type="button"
             onClick={onCancel}

package/src/components/booking/CheckoutModal.tsx

@@ -29,6 +29,8 @@ export interface CheckoutModalProps {
   onClose: () => void;
   onPaymentSubmitStart?: () => void;
   onPaymentSubmitError?: () => void;
+  /** Called after Stripe authorizes/confirms payment without redirecting. May commit a quoted change. */
+  onPaymentConfirmed?: (paymentIntentId: string) => Promise<void>;
   clientSecret: string;
   reservationReference: string;
   reservationExpiration?: string;
@@ -74,6 +76,7 @@ function CheckoutForm({
   onClose,
   onPaymentSubmitStart,
   onPaymentSubmitError,
+  onPaymentConfirmed,
   t,
   total,
   currency,
@@ -83,6 +86,7 @@ function CheckoutForm({
   onClose: () => void;
   onPaymentSubmitStart?: () => void;
   onPaymentSubmitError?: () => void;
+  onPaymentConfirmed?: (paymentIntentId: string) => Promise<void>;
   t: (key: string) => string;
   total: number;
   currency: Currency;
@@ -109,15 +113,38 @@ function CheckoutForm({
     onPaymentSubmitStart?.();
     // Store before redirect so success page can fire purchase event
     analytics.storePendingPurchase(total, currency);
-    const { error: confirmError } = await stripe.confirmPayment({
-      elements,
-      confirmParams: {
-        return_url: successUrl,
-      },
-    });
+    const confirmation = onPaymentConfirmed
+      ? await stripe.confirmPayment({
+          elements,
+          confirmParams: { return_url: successUrl },
+          redirect: 'if_required',
+        })
+      : await stripe.confirmPayment({
+          elements,
+          confirmParams: { return_url: successUrl },
+        });
+    const confirmError = 'error' in confirmation ? confirmation.error : undefined;
+    const paymentIntent = 'paymentIntent' in confirmation ? confirmation.paymentIntent : undefined;
     if (confirmError) {
       setError(confirmError.message ?? 'Payment failed');
       onPaymentSubmitError?.();
+    } else if (onPaymentConfirmed) {
+      const paymentIntentId = paymentIntent?.id;
+      if (!paymentIntentId) {
+        setError('Payment was authorized, but the booking change could not be completed. Please try again.');
+        onPaymentSubmitError?.();
+      } else {
+        try {
+          await onPaymentConfirmed(paymentIntentId);
+        } catch (completionError) {
+          setError(
+            completionError instanceof Error
+              ? completionError.message
+              : 'Payment was authorized, but the booking change could not be completed.',
+          );
+          onPaymentSubmitError?.();
+        }
+      }
     }
     setLoading(false);
   };
@@ -155,6 +182,7 @@ export function CheckoutModal({
   onClose,
   onPaymentSubmitStart,
   onPaymentSubmitError,
+  onPaymentConfirmed,
   clientSecret,
   reservationReference,
   reservationExpiration,
@@ -462,6 +490,7 @@ export function CheckoutModal({
                 onClose={onClose}
                 onPaymentSubmitStart={onPaymentSubmitStart}
                 onPaymentSubmitError={onPaymentSubmitError}
+                onPaymentConfirmed={onPaymentConfirmed}
                 t={t}
                 total={total}
                 currency={currency}

package/src/components/booking/admin-change-payment-choice-runner.ts

@@ -14,7 +14,9 @@ import type { CheckoutModalLineItem } from './CheckoutModal';
 import type { Currency } from './CurrencySwitcher';
 import type { ChangeBookingPaidCheckoutModalData } from './change-booking-payment-modal-builders';
 
-export type AdminChangeCheckoutModalData = ChangeBookingPaidCheckoutModalData;
+export type AdminChangeCheckoutModalData = ChangeBookingPaidCheckoutModalData & {
+  finalizeExistingChangeInline?: boolean;
+};
 
 export interface AdminChangePaymentChoiceData {
   reservationReference: string;
@@ -38,6 +40,13 @@ export interface AdminChangePaymentChoiceData {
   taxRate: number;
   promoDiscountAmount: number;
   discountLabel?: string | null;
+  dialogTitle?: string;
+  dialogDescription?: string;
+  confirmWithoutPaymentLabel?: string;
+  previousTotal?: number;
+  newTotal?: number;
+  finalizeExistingChangeInline?: boolean;
+  preferConfirmWithoutPayment?: boolean;
 }
 
 export interface BuildAdminChangePaymentChoiceDataParams {
@@ -61,6 +70,13 @@ export interface BuildAdminChangePaymentChoiceDataParams {
   taxRate: number;
   promoDiscountAmount: number;
   discountLabel?: string | null;
+  dialogTitle?: string;
+  dialogDescription?: string;
+  confirmWithoutPaymentLabel?: string;
+  previousTotal?: number;
+  newTotal?: number;
+  finalizeExistingChangeInline?: boolean;
+  preferConfirmWithoutPayment?: boolean;
 }
 
 export function buildAdminChangePaymentChoiceData(
@@ -93,6 +109,15 @@ export function buildAdminChangePayNowCheckoutModalData(
     taxRate: adminChoiceData.taxRate,
     promoDiscountAmount: adminChoiceData.promoDiscountAmount,
     discountLabel: adminChoiceData.discountLabel,
+    finalizeExistingChangeInline: adminChoiceData.finalizeExistingChangeInline,
+    changeTotals:
+      adminChoiceData.previousTotal != null && adminChoiceData.newTotal != null
+        ? {
+            previousTotal: adminChoiceData.previousTotal,
+            newTotal: adminChoiceData.newTotal,
+            differenceTotal: adminChoiceData.totalAmount,
+          }
+        : undefined,
   };
 }
 

package/src/components/booking/useAdminChangeCheckoutController.ts

@@ -2,6 +2,8 @@ import { useCallback, useEffect, useRef, useState, type Dispatch, type SetStateA
 import {
   cancelReservation,
   cancelReservationBestEffort,
+  applyAdminChangeBookingV2,
+  createAdminChangeBookingPaymentIntentV2,
   createChangeBookingPaymentIntent,
   createPaymentIntent,
   describeStandardTourCapacityConflictMessage,
@@ -419,31 +421,6 @@ export function useAdminChangeCheckoutController({
         return;
       }
 
-      // Provider changes are applied by the dashboard through the exact Pricing V2 quote.
-      // Do not create the legacy FE-authoritative change intent or collect a card payment first;
-      // apply-v2 records any positive delta as a quote-linked pending balance.
-      if (isProviderDashboardChange && isChangeBookingContext) {
-        if (!onChangeBooking) {
-          throw new Error('Provider change handler is unavailable.');
-        }
-        if (!latestChangeQuote?.quoteId || latestChangeQuote.canProceed === false) {
-          throw new Error(latestChangeQuote?.reasonIfBlocked || 'The authoritative change quote is not ready.');
-        }
-        const providerPayload = buildProviderChangePayload(availabilityProductOptionId, bookingItems);
-        if (!providerPayload) {
-          throw new Error('No availability selected');
-        }
-        await onChangeBooking(providerPayload);
-        const bookingReference = initialValues?.bookingReference?.trim();
-        if (!bookingReference) {
-          throw new Error('Missing booking reference.');
-        }
-        onSuccess?.({ reservationReference: bookingReference });
-        finishManageFlow(bookingReference);
-        setLoading(false);
-        return;
-      }
-
       const bookingSourceContext = buildBookingSourceContext(bookingSourceAttribution, {
         clientChannelSource: inferClientBookingSourceFromProductIds(
           product.productId,
@@ -523,7 +500,9 @@ export function useAdminChangeCheckoutController({
       const timePart = selectedAvailability.dateTime.split('T')[1]?.substring(0, 5) || '00:00';
       const itineraryDisplay = computeItineraryDisplayForStorage() ?? computeItineraryDisplay();
       const taxForBreakdown = effectivePromoDiscountAmount > 0 ? effectiveTax : tax;
-      const amountDueForCheckout = isCustomerSelfServeChange
+      const amountDueForCheckout = isProviderDashboardChange && isChangeBookingContext
+        ? Math.max(0, latestChangeQuote?.priceDiff ?? 0)
+        : isCustomerSelfServeChange
         ? confirmedChangeAmountDueForCheckout ??
           Math.max(
             0,
@@ -562,6 +541,63 @@ export function useAdminChangeCheckoutController({
         roundingLabel: t('booking.rounding') || 'Rounding',
       });
 
+      // Provider changes reuse the exact stored admin quote for both settlement choices.
+      // Pay later applies immediately with a pending balance. Pay now first creates a
+      // quote-bound Stripe authorization and applies only after that authorization succeeds.
+      if (isProviderDashboardChange && isChangeBookingContext) {
+        const bookingReference = initialValues?.bookingReference?.trim();
+        const quoteId = latestChangeQuote?.quoteId?.trim();
+        if (!bookingReference) throw new Error('Missing booking reference.');
+        if (!quoteId || latestChangeQuote?.canProceed === false) {
+          throw new Error(latestChangeQuote?.reasonIfBlocked || 'The authoritative change quote is not ready.');
+        }
+        if (amountDueForCheckout <= 0) {
+          if (!onChangeBooking) throw new Error('Provider change handler is unavailable.');
+          const providerPayload = buildProviderChangePayload(availabilityProductOptionId, bookingItems);
+          if (!providerPayload) throw new Error('No availability selected');
+          await onChangeBooking(providerPayload);
+          onSuccess?.({ reservationReference: bookingReference });
+          finishManageFlow(bookingReference);
+          setLoading(false);
+          return;
+        }
+        setAdminChoiceData(buildAdminChangePaymentChoiceData({
+          reservationReference: bookingReference,
+          checkoutBreakdown,
+          totalAmount: amountDueForCheckout,
+          datePart,
+          timePart,
+          availabilityProductOptionId,
+          itineraryDisplay: itineraryDisplay ?? undefined,
+          clientSecret: '',
+          ticketLinesForModal: checkoutModalTicketLinesDisplay,
+          feeLineItems: feeLineItemsWithAddOns,
+          returnPriceAdjustment: checkoutReturnLineAmount,
+          cancellationPolicyFee,
+          cancellationPolicyLabel: effectiveCancellationPolicyLabel,
+          subtotal: effectiveSubtotalForCheckout,
+          tax: effectivePromoDiscountAmount > 0 ? effectiveTax : tax,
+          totalQuantity,
+          isTaxIncludedInPrice,
+          taxRate: pricingConfig?.taxRate ?? 0,
+          promoDiscountAmount: effectivePromoDiscountAmount > 0 ? effectivePromoDiscountAmount : 0,
+          discountLabel: appliedPromoCode
+            ? `Promo: ${appliedPromoCode}`
+            : (originalReceiptPromoAdjustment.label || originalReceipt?.promoLabel || undefined),
+          dialogTitle: 'Complete booking change',
+          dialogDescription:
+            'Pay later to apply the change and add the amount to the booking balance, or collect a new card payment before applying it.',
+          confirmWithoutPaymentLabel: 'Pay later',
+          previousTotal: originalReceipt?.total,
+          newTotal: latestChangeQuote?.quotedTotal ?? latestChangeQuote?.serverDisplay?.total,
+          finalizeExistingChangeInline: true,
+          preferConfirmWithoutPayment: true,
+        }));
+        setShowAdminPaymentChoice(true);
+        setLoading(false);
+        return;
+      }
+
       const paymentIntent = isCustomerSelfServeChange
         ? await createChangeBookingPaymentIntent(
             (() => {
@@ -816,12 +852,38 @@ export function useAdminChangeCheckoutController({
     }
   };
 
-  const handlePayNow = () => {
+  const handlePayNow = async () => {
     if (!adminChoiceData) return;
     if (reservationHoldHasExpired(adminChoiceData.reservationExpiration)) {
       setError(RESERVATION_HOLD_EXPIRED_MESSAGE);
       return;
     }
+    if (isProviderDashboardChange && isChangeBookingContext) {
+      const bookingReference = initialValues?.bookingReference?.trim();
+      const quoteId = latestChangeQuote?.quoteId?.trim();
+      if (!bookingReference || !quoteId) {
+        setError('The authoritative change quote is no longer available.');
+        return;
+      }
+      setLoading(true);
+      setError('');
+      try {
+        const paymentIntent = await createAdminChangeBookingPaymentIntentV2(bookingReference, quoteId);
+        const expectedAmountCents = Math.round(adminChoiceData.totalAmount * 100);
+        if (paymentIntent.amountDueCents !== expectedAmountCents) {
+          throw new Error('The payment amount changed. Close this dialog and review a fresh quote.');
+        }
+        setShowAdminPaymentChoice(false);
+        setCheckoutClientSecret(paymentIntent.clientSecret);
+        setCheckoutModalData(buildAdminChangePayNowCheckoutModalData(adminChoiceData, lastName));
+        setShowCheckoutModal(true);
+      } catch (error) {
+        setError(error instanceof Error ? error.message : 'Failed to prepare payment.');
+      } finally {
+        setLoading(false);
+      }
+      return;
+    }
     setShowAdminPaymentChoice(false);
     setCheckoutClientSecret(adminChoiceData.clientSecret);
     setCheckoutModalData(buildAdminChangePayNowCheckoutModalData(adminChoiceData, lastName));
@@ -829,6 +891,32 @@ export function useAdminChangeCheckoutController({
     setAdminChoiceData(null);
   };
 
+  const handlePaymentConfirmed = useCallback(async (paymentIntentId: string) => {
+    if (!isProviderDashboardChange || !isChangeBookingContext) return;
+    const bookingReference = initialValues?.bookingReference?.trim();
+    const quoteId = latestChangeQuote?.quoteId?.trim();
+    if (!bookingReference || !quoteId) {
+      throw new Error('Payment was authorized, but the booking quote is no longer available.');
+    }
+    await applyAdminChangeBookingV2(bookingReference, quoteId, {
+      paymentMode: 'PAY_NOW',
+      paymentIntentId,
+    });
+    paymentSubmitInFlightRef.current = false;
+    setShowCheckoutModal(false);
+    setCheckoutModalData(null);
+    setCheckoutClientSecret('');
+    setAdminChoiceData(null);
+    onSuccess?.({ reservationReference: bookingReference });
+    finishManageFlow(bookingReference);
+  }, [
+    initialValues?.bookingReference,
+    isChangeBookingContext,
+    isProviderDashboardChange,
+    latestChangeQuote?.quoteId,
+    onSuccess,
+  ]);
+
   const handlePaymentSubmitStart = useCallback(() => {
     paymentSubmitInFlightRef.current = true;
   }, []);
@@ -856,6 +944,7 @@ export function useAdminChangeCheckoutController({
     handlePayNow,
     handlePaymentSubmitStart,
     handlePaymentSubmitError,
+    handlePaymentConfirmed,
     handleAdminPaymentChoiceCancel,
   };
 }

package/src/lib/booking-api.ts

@@ -1502,6 +1502,21 @@ export interface CreateChangePaymentIntentResponse {
   currency: string;
 }
 
+export interface CreateAdminChangePaymentIntentV2Response extends CreateChangePaymentIntentResponse {
+  quoteId: string;
+  expiresAt: string;
+}
+
+export interface ApplyAdminChangeBookingV2Response {
+  bookingReference: string;
+  reservationReference: string;
+  status: string;
+  quoteId: string;
+  paymentAction: 'NONE' | 'PAID_CHARGE' | 'PENDING_CHARGE' | 'PENDING_REFUND' | string;
+  amountToCharge: number;
+  refundCandidate: number;
+}
+
 export interface ConfirmFreeChangeResponse {
   status?: string;
   booking?: unknown;
@@ -1763,6 +1778,62 @@ export async function createChangeBookingPaymentIntent(
     data) as CreateChangePaymentIntentResponse;
 }
 
+export async function createAdminChangeBookingPaymentIntentV2(
+  bookingReference: string,
+  quoteId: string,
+): Promise<CreateAdminChangePaymentIntentV2Response> {
+  const res = await fetch(
+    `${API_BASE}/1/admin/bookings/${encodeURIComponent(bookingReference)}/change/payment-intent-v2`,
+    {
+      method: 'POST',
+      headers: getAuthHeaders(),
+      body: JSON.stringify({ quoteId }),
+    },
+  );
+  if (!res.ok) {
+    const err = await parseJsonSafely(res);
+    const message = isApiErrorPayload(err)
+      ? err.errorMessage || err.error || 'Failed to prepare payment for this booking change'
+      : 'Failed to prepare payment for this booking change';
+    throw new Error(message);
+  }
+  const data = await parseJsonSafely(res);
+  return ((data as { data?: CreateAdminChangePaymentIntentV2Response } | null)?.data ??
+    data) as CreateAdminChangePaymentIntentV2Response;
+}
+
+export async function applyAdminChangeBookingV2(
+  bookingReference: string,
+  quoteId: string,
+  options: {
+    paymentMode: 'DEFER_TO_BALANCE' | 'PAY_NOW';
+    paymentIntentId?: string;
+  },
+): Promise<ApplyAdminChangeBookingV2Response> {
+  const res = await fetch(
+    `${API_BASE}/1/admin/bookings/${encodeURIComponent(bookingReference)}/change/apply-v2`,
+    {
+      method: 'POST',
+      headers: getAuthHeaders(),
+      body: JSON.stringify({
+        quoteId,
+        paymentMode: options.paymentMode,
+        ...(options.paymentIntentId ? { paymentIntentId: options.paymentIntentId } : {}),
+      }),
+    },
+  );
+  if (!res.ok) {
+    const err = await parseJsonSafely(res);
+    const message = isApiErrorPayload(err)
+      ? err.errorMessage || err.error || 'Failed to apply this booking change'
+      : 'Failed to apply this booking change';
+    throw new Error(message);
+  }
+  const data = await parseJsonSafely(res);
+  return ((data as { data?: ApplyAdminChangeBookingV2Response } | null)?.data ??
+    data) as ApplyAdminChangeBookingV2Response;
+}
+
 export async function confirmFreeChangeBooking(
   changeIntentId: string
 ): Promise<ConfirmFreeChangeResponse> {

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

@@ -34,6 +34,10 @@ import {
 } from '../src/components/booking/reservation-hold';
 import { buildAdminChangeProviderPayload } from '../src/components/booking/admin-change-provider-payload';
 import { buildPublicChangeAmountDueSummary } from '../src/components/booking/change-booking-flow-helpers';
+import {
+  buildAdminChangePaymentChoiceData,
+  buildAdminChangePayNowCheckoutModalData,
+} from '../src/components/booking/admin-change-payment-choice-runner';
 
 function quote(overrides: Partial<ChangeBookingQuoteResponse>): ChangeBookingQuoteResponse {
   return {
@@ -73,6 +77,53 @@ test('admin payment choice countdown expires exactly at the reservation deadline
   assert.equal(formatReservationHoldTime(604), '10:04');
 });
 
+test('admin existing-booking pay-now review keeps previous, updated, and exact difference totals', () => {
+  const choice = buildAdminChangePaymentChoiceData({
+    reservationReference: 'KBRCIGCO',
+    checkoutBreakdown: { lineItems: [] },
+    totalAmount: 256.58,
+    datePart: '2026-07-31',
+    timePart: '09:00',
+    availabilityProductOptionId: 'option_1',
+    clientSecret: '',
+    ticketLinesForModal: [],
+    feeLineItems: [],
+    returnPriceAdjustment: 39,
+    cancellationPolicyFee: 0,
+    subtotal: 236.48,
+    tax: 20.1,
+    totalQuantity: 3,
+    isTaxIncludedInPrice: false,
+    taxRate: 0.085,
+    promoDiscountAmount: 0,
+    previousTotal: 513.16,
+    newTotal: 769.74,
+    dialogTitle: 'Complete booking change',
+    dialogDescription: 'Pay later or collect a new card.',
+    confirmWithoutPaymentLabel: 'Pay later',
+    finalizeExistingChangeInline: true,
+    preferConfirmWithoutPayment: true,
+  } as Parameters<typeof buildAdminChangePaymentChoiceData>[0]);
+
+  const checkout = buildAdminChangePayNowCheckoutModalData(choice, 'Tauro');
+  assert.deepEqual(checkout.changeTotals, {
+    previousTotal: 513.16,
+    newTotal: 769.74,
+    differenceTotal: 256.58,
+  });
+  assert.equal(checkout.total, 256.58);
+  assert.equal(checkout.finalizeExistingChangeInline, true);
+  assert.equal(choice.confirmWithoutPaymentLabel, 'Pay later');
+  assert.equal(choice.preferConfirmWithoutPayment, true);
+  assert.equal(
+    buildAdminChangePayNowCheckoutModalData(
+      { ...choice, finalizeExistingChangeInline: undefined },
+      'Tauro',
+    ).finalizeExistingChangeInline,
+    undefined,
+  );
+});
+
 test('malformed reservation expiration fails closed', () => {
   assert.equal(reservationHoldSecondsRemaining('not-a-date', Date.now()), 0);
   assert.equal(reservationHoldHasExpired('not-a-date', Date.now()), true);