@ticketboothapp/booking 1.2.66 → 1.2.68

package/package.json

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

package/src/components/booking/AdminChangeBookingFlow.tsx

@@ -7,9 +7,11 @@ import {
   getAvailabilities,
   cancelReservation,
   cancelReservationBestEffort,
+  createPaymentIntent,
   quoteChangeBooking,
   confirmFreeChangeBooking,
   createChangeBookingPaymentIntent,
+  confirmBookingWithoutPayment,
   getAddOns,
   validatePromoCode,
   getPromoDiscount,
@@ -31,6 +33,7 @@ import {
 } from '../../lib/booking-constants';
 import { getSundayOfWeek } from '../../lib/booking/sunday-week';
 import { Calendar } from './Calendar';
+import { AdminPaymentChoiceModal } from './AdminPaymentChoiceModal';
 import { ItineraryBox } from './ItineraryBox';
 import { ItineraryPlaceholder } from './ItineraryPlaceholder';
 import { PickupTimeSelector } from './PickupTimeSelector';
@@ -96,6 +99,7 @@ import { getItineraryStepLabel } from '../../lib/booking/itinerary-display';
 import { MANAGE_BOOKING_FROM_CHANGE_PAYMENT, MANAGE_BOOKING_QUERY_FROM } from '../../lib/manage-booking-post-checkout';
 import { useBookingHost } from '../../runtime';
 import type { BookingFlowUiOptions } from './booking-flow-ui';
+import type { ProviderDashboardChangeBookingPayload } from './provider-dashboard-change-booking';
 import type { ChangeBookingFlowProps, ChangeFlowSelectionPreview } from './booking-flow-types';
 import { BOOKING_FLOW_ABANDON_EVENT } from '../../providers/booking-dialog-provider';
 
@@ -107,6 +111,8 @@ import { BOOKING_FLOW_ABANDON_EVENT } from '../../providers/booking-dialog-provi
  * `serverPreview.priceSummaryLines` when the quote includes rows; otherwise falls back to FE-built lines after totals confirm.
  *
  * Until the first successful quote, `selfServeCheckoutPlaceholder` still avoids showing unchecked totals.
+ *
+ * **Provider dashboard** (`onChangeBooking`) — unchanged; manual pricing via `flowUi.providerDashboardChangePricingUi`.
  */
 function mergeQuoteSliceWithServerPreview(
   slice: ReturnType<typeof sliceChangeQuoteForUi>,
@@ -403,8 +409,9 @@ function pickOutboundMatchingPreviousSelection(
   anchor: { productOptionId: string | null; minutesFromMidnight: number },
   companyTimezone: string,
   optionsMap: Map<string, { mostPopular?: boolean }>,
+  isAdmin: boolean
 ): Availability | null {
-  const selectable = timesForSelectedDate.filter((a) => (a.vacancies ?? 0) > 0);
+  const selectable = timesForSelectedDate.filter((a) => (a.vacancies ?? 0) > 0 || isAdmin);
   if (selectable.length === 0) return null;
 
   const withOption =
@@ -438,8 +445,9 @@ function pickReturnMatchingPreviousSelection(
   sortedReturnOptions: ReturnOption[],
   anchor: { returnLocation: string; minutesFromMidnight: number },
   companyTimezone: string,
+  isAdmin: boolean
 ): ReturnOption | null {
-  const eligible = sortedReturnOptions.filter((o) => (o.vacancies ?? 0) > 0);
+  const eligible = sortedReturnOptions.filter((o) => (o.vacancies ?? 0) > 0 || isAdmin);
   if (eligible.length === 0) return null;
 
   const sameLoc = eligible.filter((o) => o.returnLocation === anchor.returnLocation);
@@ -628,7 +636,8 @@ function resolveInitialAvailabilityFromBooking(
 }
 
 /**
- * Embed fork (ticketbooth provider dashboard): same self-serve **change booking** as {@link ChangeBookingFlow}.
+ * 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,
@@ -652,6 +661,7 @@ export function AdminChangeBookingFlow({
   partnerPortalBooking = false,
   availabilityPricingProfileId,
   availabilityCancellationPolicyProfileId,
+  onChangeBooking,
 }: ChangeBookingFlowProps) {
   /** Always the booking’s sold currency — not the site currency switcher / parent default. */
   const currency = useMemo((): Currency => {
@@ -663,6 +673,16 @@ export function AdminChangeBookingFlow({
     return DEFAULT_CURRENCY;
   }, [originalReceipt?.currency, initialValues?.currency, currencyFromParent]);
 
+  const isManualOverrideEligibleLine = (line: { editable: boolean; type?: string; label?: string }): boolean => {
+    if (!line.editable) return false;
+    const type = (line.type ?? '').toUpperCase();
+    const label = (line.label ?? '').toLowerCase();
+    const isPromoLikeType =
+      type.includes('PROMO') || type.includes('DISCOUNT') || type.includes('VOUCHER') || type.includes('GIFT');
+    const isPromoLikeLabel =
+      label.includes('promo') || label.includes('discount') || label.includes('voucher') || label.includes('gift');
+    return !(isPromoLikeType || isPromoLikeLabel);
+  };
   const { env, analytics } = useBookingHost();
   const { t } = useTranslations();
   const { locale } = useLocale();
@@ -671,6 +691,7 @@ export function AdminChangeBookingFlow({
   const cancellationPolicyProfileIdForAvailabilities =
     (availabilityCancellationPolicyProfileId ?? '').trim() || null;
   const {
+    permissions,
     isSimplifiedPricingView,
     onShowManage,
     getSuccessUrl,
@@ -678,6 +699,7 @@ export function AdminChangeBookingFlow({
     mode: bookingAppMode,
   } = useBookingApp();
   const availabilitiesCache = useAvailabilitiesCache();
+  const isAdmin = permissions.viewerRole === 'admin';
   const [availabilities, setAvailabilities] = useState<Availability[]>([]);
   const [selectedAvailability, setSelectedAvailability] = useState<Availability | null>(null);
   const [selectedReturnOption, setSelectedReturnOption] = useState<ReturnOption | null>(null);
@@ -776,6 +798,12 @@ export function AdminChangeBookingFlow({
       differenceTotal: number;
     };
   } | null>(null);
+  /** Admin only: skip sending confirmation at creation (provider dashboard). */
+  const [skipConfirmationCommunications, setSkipConfirmationCommunications] = useState(false);
+  /** Admin only: disable all auto communications for this booking (provider dashboard). */
+  const [disableAutoCommunications, setDisableAutoCommunications] = useState(false);
+  /** Admin only: show choice to pay now or confirm without payment (full balance owed). */
+  const [showAdminPaymentChoice, setShowAdminPaymentChoice] = useState(false);
   const hasAppliedInitialValuesRef = useRef(false);
   const hasAppliedInitialQuantitiesRef = useRef(false);
   const hasHydratedAddOnsFromReceiptRef = useRef(false);
@@ -794,11 +822,23 @@ export function AdminChangeBookingFlow({
       return null;
     }
   }, [initialValues?.dateTime, companyTimezone]);
+  const isProviderDashboardChange = Boolean(onChangeBooking);
+  /** Any change from an existing booking (public or provider). */
+  const isChangeBookingContext = Boolean(initialValues?.bookingReference?.trim());
+  /**
+   * When the provider passes `onChangeBooking` we normally apply the change immediately on checkout.
+   * In provider-dashboard + admin + change mode we need the "Pay now / confirm without payment" step
+   * first, so we run the public change-intent quote + PI, then call `onChangeBooking` from
+   * `handleConfirmWithoutPayment` (or after paying in the checkout modal).
+   */
+  const deferProviderApplyToAdminPaymentChoice =
+    isAdmin &&
+    isChangeBookingContext &&
+    bookingAppMode === 'provider-dashboard' &&
+    isProviderDashboardChange;
+  const isCustomerSelfServeChange = !isProviderDashboardChange || deferProviderApplyToAdminPaymentChoice;
   /** Do not render catalog-/FE-derived dollar amounts in UI until `quoteChangeBooking` returns `serverDisplay`. */
-  const suppressSelfServeCurrencyUi = true;
-  /** Self-serve change flow only (no provider/admin pricing paths). */
-  const isCustomerSelfServeChange = true;
-  const isAdmin = false;
+  const suppressSelfServeCurrencyUi = isCustomerSelfServeChange;
 
   useEffect(() => {
     setPartnerAttributionConfirmed(false);
@@ -808,13 +848,13 @@ export function AdminChangeBookingFlow({
    * user picks a different return time — baseline is the first auto-selected return for this outbound.
    */
   const [implicitReturnBaselineId, setImplicitReturnBaselineId] = useState<string | null>(null);
-  /** Promo from booking is fixed — show read-only, never add new. */
+  /** Any change flow (self-serve or provider): promo from booking is fixed — show read-only, never add new. */
   const lockedPromoCode = initialValues?.promoCode?.trim()
     ? initialValues.promoCode.trim().toUpperCase()
     : null;
   /** Public self-serve only: cannot reduce tickets below original counts. */
   const changeBookingMinimumQuantities = useMemo(() => {
-    if (!initialValues?.bookingItems?.length) return undefined;
+    if (!isCustomerSelfServeChange || !initialValues?.bookingItems?.length) return undefined;
     const m: Record<string, number> = {};
     for (const item of initialValues.bookingItems) {
       const key = item.category?.trim();
@@ -822,7 +862,30 @@ export function AdminChangeBookingFlow({
       m[key] = Math.max(0, Number(item.count) || 0);
     }
     return m;
-  }, [initialValues?.bookingItems]);
+  }, [isCustomerSelfServeChange, initialValues?.bookingItems]);
+  const [adminChoiceData, setAdminChoiceData] = useState<{
+    reservationReference: string;
+    reservationExpiration?: string;
+    checkoutBreakdown: { lineItems: Array<{ label: string; amount: number; type?: string; quantity?: number }>; totalAmount: number; currency: string };
+    totalAmount: number;
+    datePart: string;
+    timePart: string;
+    availabilityProductOptionId: string;
+    itineraryDisplay?: ItineraryDisplayStep[] | null;
+    clientSecret: string;
+    ticketLinesForModal: CheckoutModalLineItem[];
+    feeLineItems: OrderSummary['feeLineItems'];
+    returnPriceAdjustment: number;
+    cancellationPolicyFee: number;
+    cancellationPolicyLabel?: string;
+    subtotal: number;
+    tax: number;
+    totalQuantity: number;
+    isTaxIncludedInPrice: boolean;
+    taxRate: number;
+    promoDiscountAmount: number;
+    discountLabel?: string | null;
+  } | null>(null);
   const [latestChangeQuote, setLatestChangeQuote] = useState<{
     priceDiff: number;
     currency: Currency;
@@ -1659,12 +1722,14 @@ export function AdminChangeBookingFlow({
   }, [initialValues?.productId, product.productId]);
 
   /**
-   * Receipt pricing on protected seats/fees: Rule A (exact receipt unit when same calendar day
-   * + same product option) vs Rule B (`max(receipt, live)` when date or option changes).
+   * Receipt pricing on protected seats/fees — **customer self-serve only**: Rule A (exact receipt unit when same calendar day
+   * + same product option) vs Rule B (`max(receipt, live)` when date or option changes). Provider dashboard uses live catalog.
    */
   const changeFlowApplyReceiptPaidFloors = useMemo(
-    () => changeFlowBookingParentProductIdForFloors === product.productId.trim(),
-    [changeFlowBookingParentProductIdForFloors, product.productId],
+    () =>
+      !isProviderDashboardChange &&
+      changeFlowBookingParentProductIdForFloors === product.productId.trim(),
+    [isProviderDashboardChange, changeFlowBookingParentProductIdForFloors, product.productId],
   );
 
   useEffect(() => {
@@ -2774,6 +2839,7 @@ export function AdminChangeBookingFlow({
    */
   const changeFlowProtectedReturnAdjustment = useMemo(() => {
     if (totalQuantity <= 0) return returnPriceAdjustment;
+    if (isProviderDashboardChange) return returnPriceAdjustment;
     if (effectiveChangeFlowReturnUnitFloorPerPerson == null) return returnPriceAdjustment;
     const livePerPerson =
       returnOptionCatalogPerPerson ?? (selectedReturnOption?.priceAdjustmentByCurrency?.[currency] ?? 0);
@@ -2787,6 +2853,7 @@ export function AdminChangeBookingFlow({
   }, [
     totalQuantity,
     returnPriceAdjustment,
+    isProviderDashboardChange,
     effectiveChangeFlowReturnUnitFloorPerPerson,
     selectedReturnOption,
     returnOptionCatalogPerPerson,
@@ -2877,6 +2944,29 @@ export function AdminChangeBookingFlow({
     return [...feeLineItems, ...addOnLines];
   }, [feeLineItems, addOnSelections, addOns]);
 
+  const providerPricingUi = flowUi?.providerDashboardChangePricingUi;
+  const providerQuotedLines = providerPricingUi?.quotedLines ?? [];
+  const providerEditableLines = providerQuotedLines.filter((line) => isManualOverrideEligibleLine(line));
+  const showProviderPricingInlineEditor =
+    isProviderDashboardChange && isAdmin && (
+      providerPricingUi?.loading ||
+      providerPricingUi?.error != null ||
+      providerQuotedLines.length > 0
+    );
+  const normalizeReceiptLabel = (value: string): string =>
+    value
+      .toLowerCase()
+      .replace(/\([^)]*\)/g, '')
+      .replace(/[^a-z0-9]+/g, '')
+      .trim();
+  const providerEditableLineByNormalizedLabel = useMemo(() => {
+    const m = new Map<string, (typeof providerEditableLines)[number]>();
+    for (const line of providerEditableLines) {
+      const key = normalizeReceiptLabel(line.label ?? '');
+      if (key) m.set(key, line);
+    }
+    return m;
+  }, [providerEditableLines]);
 
   const checkoutPriceSummaryLines = useMemo((): PriceSummaryLine[] => {
     if (!selectedAvailability) return [];
@@ -2894,6 +2984,13 @@ export function AdminChangeBookingFlow({
         );
         return {
           kind: 'ticket',
+          lineKey:
+            showProviderPricingInlineEditor
+              ? providerEditableLineByNormalizedLabel.get(normalizeReceiptLabel(line.category))?.lineKey
+              : undefined,
+          editable:
+            showProviderPricingInlineEditor &&
+            providerEditableLineByNormalizedLabel.has(normalizeReceiptLabel(line.category)),
           category: line.category,
           qty: line.qty,
           itemTotal: line.itemTotal,
@@ -2928,6 +3025,25 @@ export function AdminChangeBookingFlow({
             fee.name.toLowerCase().includes('license'));
         return {
           kind: 'line' as const,
+          lineKey:
+            showProviderPricingInlineEditor
+              ? providerEditableLineByNormalizedLabel.get(
+                  normalizeReceiptLabel(
+                    feeLineItems.some((f) => f.name === fee.name)
+                      ? `${fee.name} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`
+                      : fee.name
+                  )
+                )?.lineKey
+              : undefined,
+          editable:
+            showProviderPricingInlineEditor &&
+            providerEditableLineByNormalizedLabel.has(
+              normalizeReceiptLabel(
+                feeLineItems.some((f) => f.name === fee.name)
+                  ? `${fee.name} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`
+                  : fee.name
+              )
+            ),
           label: feeLineItems.some((f) => f.name === fee.name)
             ? `${fee.name} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`
             : fee.name,
@@ -2953,6 +3069,8 @@ export function AdminChangeBookingFlow({
     effectiveCancellationPolicyLabel,
     feeLineItemsWithAddOns,
     feeLineItems,
+    showProviderPricingInlineEditor,
+    providerEditableLineByNormalizedLabel,
   ]);
 
   const checkoutPriceSummaryLinesForCheckout = useMemo(() => {
@@ -3456,7 +3574,8 @@ export function AdminChangeBookingFlow({
         countsChanged ||
         addOnsChanged ||
         returnChanged,
-      // Authoritative for "real user change" gating: ignore option-id noise; only user-visible deltas.
+      // Authoritative for "real user change" gating in provider dashboard:
+      // ignore option-id noise and only consider user-visible booking deltas.
       hasOperationalChangesFromInitial:
         dateChanged ||
         pickupChanged ||
@@ -3483,28 +3602,62 @@ export function AdminChangeBookingFlow({
     addOnSelections,
     initialAddOnMinQtyByKey,
   ]);
-  const hasChangeSelection = changeSelectionDetails.hasChangesFromInitial;
+  const hasChangeSelection =
+    isProviderDashboardChange
+      ? changeSelectionDetails.hasOperationalChangesFromInitial
+      : changeSelectionDetails.hasChangesFromInitial;
 
   const changeFlowNeedsServerPrice =
+    isCustomerSelfServeChange &&
     hasChangeSelection &&
     !!initialValues?.bookingReference?.trim() &&
     !!lastName.trim();
 
-  const isChangeQuoteBlocked = latestChangeQuote?.canProceed === false;
-  const requiresReturnInChangeFlow = !!initialValues?.returnAvailabilityId?.trim();
+  const isChangeQuoteBlocked = isCustomerSelfServeChange && latestChangeQuote?.canProceed === false;
+  const requiresReturnInChangeFlow = isCustomerSelfServeChange && !!initialValues?.returnAvailabilityId?.trim();
   const missingRequiredReturnSelection = requiresReturnInChangeFlow && !selectedReturnOption;
 
   const changeFlowSubmitDisabled =
     missingRequiredReturnSelection ||
-    (changeFlowNeedsServerPrice &&
+    (isCustomerSelfServeChange &&
+      changeFlowNeedsServerPrice &&
       (changeQuoteLoading || (!latestChangeQuote && !changeQuoteFetchError)));
 
-  const hasEffectiveChangeSelection = hasChangeSelection;
+  const providerTotalsPreview =
+    showProviderPricingInlineEditor && providerPricingUi?.totalsPreview
+      ? providerPricingUi.totalsPreview
+      : null;
+  const providerHasEditedLineOverrides =
+    isProviderDashboardChange &&
+    providerQuotedLines.some((line) => {
+      if (!isManualOverrideEligibleLine(line)) return false;
+      const raw = providerPricingUi?.lineAmountInputs?.[line.lineKey];
+      const parsed = raw == null || raw.trim() === '' ? line.amount : Number(raw);
+      if (!Number.isFinite(parsed)) return false;
+      const rounded = Math.round(parsed * 100) / 100;
+      return Math.abs(rounded - line.amount) > 0.0001;
+    });
+  const providerHasAdditionalAdjustments =
+    isProviderDashboardChange &&
+    (providerPricingUi?.additionalAdjustments ?? []).some((adj) => {
+      const parsed = Number((adj.amountInput ?? '').trim());
+      const hasAmount = Number.isFinite(parsed) && parsed > 0;
+      const currentAmount = hasAmount ? (Math.round(parsed * 100) / 100).toFixed(2) : '';
+      const originalAmount = adj.originalAmountInput ?? '';
+      const currentLabel = (adj.label ?? '').trim();
+      const originalLabel = (adj.originalLabel ?? '').trim();
+      const currentMode = adj.mode;
+      const originalMode = adj.originalMode;
+      if (!originalMode) return hasAmount || currentLabel.length > 0;
+      return currentAmount !== originalAmount || currentLabel !== originalLabel || currentMode !== originalMode;
+    });
+  const hasEffectiveChangeSelection =
+    hasChangeSelection || providerHasEditedLineOverrides || providerHasAdditionalAdjustments;
 
   const displayedChangeAmounts = resolveChangeFlowDisplayedAmounts({
-    providerPreview: null,
+    providerPreview: providerTotalsPreview,
     serverQuotePreview:
-      latestChangeQuote?.serverDisplay
+      isCustomerSelfServeChange && latestChangeQuote?.serverDisplay
         ? latestChangeQuote.serverDisplay
         : null,
     fromCart: {
@@ -3520,13 +3673,13 @@ export function AdminChangeBookingFlow({
   const changeFlowClientEstimateDue = (() => {
     if (!originalReceipt) return totalPrice;
     // Customer self-serve: amount due comes from POST .../change/quote (`amountDueCents` / priceDiff), not FE delta math.
-    if (latestChangeQuote != null && !changeQuoteFetchError) {
+    if (isCustomerSelfServeChange && latestChangeQuote != null && !changeQuoteFetchError) {
       return normalizeNearZeroOwed(latestChangeQuote.priceDiff);
     }
     return changeFlowBalanceVsOriginal({
       newTotal: displayChangeFlowProposedTotal,
       originalReceiptTotal: originalReceipt.total,
-      audience: 'customer',
+      audience: isProviderDashboardChange ? 'provider' : 'customer',
     });
   })();
 
@@ -3535,6 +3688,14 @@ export function AdminChangeBookingFlow({
 
   const changeCheckoutButtonLabel = (() => {
     if (!hasEffectiveChangeSelection) return undefined;
+    if (isProviderDashboardChange) {
+      const est = Math.round(changeFlowClientEstimateDue * 100) / 100;
+      return est > 0
+        ? `Change booking (${formatCurrencyAmount(est, currency, locale as 'en' | 'fr')})`
+        : est < 0
+          ? `Change booking (${formatCurrencyAmount(est, currency, locale as 'en' | 'fr')})`
+          : 'Change booking (no charge)';
+    }
     if (changeFlowNeedsServerPrice) {
       if (changeQuoteLoading) {
         const tr = t('booking.updatingPrice');
@@ -3568,8 +3729,39 @@ export function AdminChangeBookingFlow({
   const checkoutFormError =
     (error || '') ||
     (missingRequiredReturnSelection ? 'Removing return option in self-serve is not available. Please contact support.' : '') ||
-    (isChangeQuoteBlocked ? (latestChangeQuote?.reasonIfBlocked ?? '') : '') ||
-    (changeQuoteFetchError ?? '');
+    (isCustomerSelfServeChange && isChangeQuoteBlocked ? (latestChangeQuote?.reasonIfBlocked ?? '') : '') ||
+    (isCustomerSelfServeChange ? changeQuoteFetchError ?? '' : '');
+
+  const providerPricingOverrides =
+    isProviderDashboardChange && providerQuotedLines.length > 0
+      ? providerQuotedLines
+          .filter((line) => isManualOverrideEligibleLine(line))
+          .map((line) => {
+            const raw = providerPricingUi?.lineAmountInputs?.[line.lineKey];
+            const parsed = raw == null || raw.trim() === '' ? line.amount : Number(raw);
+            if (!Number.isFinite(parsed)) return null;
+            const rounded = Math.round(parsed * 100) / 100;
+            return Math.abs(rounded - line.amount) > 0.0001
+              ? { lineKey: line.lineKey, amount: rounded, reason: 'Provider dashboard override' }
+              : null;
+          })
+          .filter((v): v is { lineKey: string; amount: number; reason: string } => v != null)
+      : [];
+  const providerAdditionalAdjustments =
+    isProviderDashboardChange
+      ? (providerPricingUi?.additionalAdjustments ?? [])
+          .map((adj) => {
+            const parsed = Number((adj.amountInput ?? '').trim());
+            if (!Number.isFinite(parsed) || parsed <= 0) return null;
+            const rounded = Math.round(parsed * 100) / 100;
+            const signed = adj.mode === 'DISCOUNT' ? -rounded : rounded;
+            return {
+              label: adj.label?.trim() || (signed < 0 ? 'Provider discount' : 'Provider charge'),
+              amount: signed,
+            };
+          })
+          .filter((v): v is { label: string; amount: number } => v != null)
+      : [];
 
   const changeFlowSelectionPreview = useMemo((): ChangeFlowSelectionPreview | null => {
     if (!selectedAvailability || totalQuantity <= 0) return null;
@@ -3817,7 +4009,8 @@ export function AdminChangeBookingFlow({
           timesForSelectedDate,
           anchor,
           companyTimezone,
-          optionsMap
+          optionsMap,
+          isAdmin
         );
         changeFlowOutboundAnchorRef.current = null;
         if (matched) {
@@ -3908,7 +4101,8 @@ export function AdminChangeBookingFlow({
         const fromAnchor = pickReturnMatchingPreviousSelection(
           sorted,
           returnAnchor,
-          companyTimezone
+          companyTimezone,
+          isAdmin
         );
         changeFlowReturnAnchorRef.current = null;
         if (fromAnchor) {
@@ -4231,6 +4425,8 @@ export function AdminChangeBookingFlow({
       return;
     }
 
+    const skipContactFields = isProviderDashboardChange;
+    if (!skipContactFields) {
       // Validate email (required)
       if (!email) {
         setError(t('booking.enterEmail') || 'Please enter your email address');
@@ -4253,6 +4449,7 @@ export function AdminChangeBookingFlow({
         setError(t('booking.enterLastName') || 'Please enter your last name');
         return;
       }
+    }
 
     // Allow checkout if pickup location is selected OR if user chose "I don't know"
     if (product.pickupLocations && product.pickupLocations.length > 0 && !pickupLocationId && !pickupLocationSkipped) {
@@ -4279,6 +4476,45 @@ export function AdminChangeBookingFlow({
         return;
       }
 
+      if (onChangeBooking && !deferProviderApplyToAdminPaymentChoice) {
+        const pickupForChange = pickupLocationId
+          ? product.pickupLocations?.find((loc) => loc.id === pickupLocationId)
+          : null;
+        await onChangeBooking({
+          productId: availabilityProductOptionId,
+          dateTime: selectedAvailability.dateTime,
+          bookingItems,
+          returnAvailabilityId: selectedReturnOption?.returnAvailabilityId ?? null,
+          pickupLocationId: pickupLocationId ?? null,
+          travelerHotel: pickupForChange?.name ?? null,
+          startTime: selectedAvailability.dateTime ?? null,
+          passengerCount: null,
+          childSafetySeatsCount: null,
+          foodRestrictions: null,
+          addOnSelections: addOnSelections.length > 0 ? addOnSelections : null,
+          cancellationPolicyId: cancellationPolicyId ?? initialValues?.cancellationPolicyId ?? null,
+          promoCode: appliedPromoCode ?? null,
+          newTotalAmount: displayChangeFlowProposedTotal,
+          additionalHoursCount: null,
+          pricingAdjustment:
+            providerPricingOverrides.length > 0 || providerAdditionalAdjustments.length > 0
+              ? {
+                  mode: 'MANUAL_LINES',
+                  lineOverrides: providerPricingOverrides,
+                  additionalAdjustments: providerAdditionalAdjustments,
+                }
+              : undefined,
+          capacitySeatCredit: {
+            enabled: true,
+            previousPassengerCount: changeFlowInitialTicketCount,
+            previousAvailabilityId: initialValues?.availabilityId ?? null,
+            previousReturnAvailabilityId: initialValues?.returnAvailabilityId ?? null,
+          },
+        });
+        setLoading(false);
+        return;
+      }
+
       const bookingSourceContext = buildBookingSourceContext(bookingSourceAttribution, {
         clientChannelSource: inferClientBookingSourceFromProductIds(
           product.productId,
@@ -4296,6 +4532,7 @@ export function AdminChangeBookingFlow({
       let changeIntentIdForCheckout: string | undefined;
       let changeBookingReferenceForPaidFlow: string | undefined;
 
+      if (isCustomerSelfServeChange) {
         const changeBookingReference = initialValues?.bookingReference?.trim();
         const changeLastName = lastName.trim();
         if (!changeBookingReference || !changeLastName) {
@@ -4383,12 +4620,13 @@ export function AdminChangeBookingFlow({
         if (!changeIntentIdForCheckout) {
           throw new Error('Missing change intent for payment.');
         }
+      }
       
       pendingReservationRef.current = null;
 
       // Note: Do NOT call onSuccess here for paid bookings — we're about to show the Stripe
       // CheckoutModal. onSuccess (e.g. closing the parent dialog) should only run when we're
-      // actually done (free booking redirect). Calling it here
+      // actually done (free booking redirect, admin confirm-without-payment). Calling it here
       // would close the dialog before the payment modal opens.
 
       // Update stored booking data (no holds reservation — change flow keys off booking reference elsewhere).
@@ -4414,11 +4652,13 @@ export function AdminChangeBookingFlow({
       // Build checkout breakdown from the exact same values we show in the UI and Stripe modal.
       // Backend will charge totalAmount and store this as the receipt so /manage matches.
       const taxForBreakdown = effectivePromoDiscountAmount > 0 ? effectiveTax : tax;
-      const amountDueForCheckout = changeFlowBalanceVsOriginal({
+      const amountDueForCheckout = isCustomerSelfServeChange
+        ? changeFlowBalanceVsOriginal({
             newTotal: changeFlowNewBookingTotal,
             originalReceiptTotal: originalReceipt?.total ?? 0,
             audience: 'customer',
-          });
+          })
+        : totalPrice;
       const lines = [
         ...ticketLineItemsForChangeFlowDisplay.map((line) => ({
           label: line.category,
@@ -4495,7 +4735,8 @@ export function AdminChangeBookingFlow({
         roundingLabel: t('booking.rounding') || 'Rounding',
       });
 
-      const paymentIntent = await createChangeBookingPaymentIntent(
+      const paymentIntent = isCustomerSelfServeChange
+        ? await createChangeBookingPaymentIntent(
             (() => {
               const id = changeIntentIdForCheckout ?? latestChangeQuote?.changeIntentId;
               if (!id) {
@@ -4503,7 +4744,76 @@ export function AdminChangeBookingFlow({
               }
               return id;
             })()
-          );
+          )
+        : await createPaymentIntent({
+            productId: product.productId,
+            optionId: availabilityProductOptionId,
+            date: datePart,
+            time: timePart,
+            quantity: totalQuantity,
+            customerEmail: email,
+            customerFirstName: firstName.trim() || undefined,
+            customerLastName: lastName.trim() || undefined,
+            currency: currency,
+            travelerHotel: selectedPickupLocation?.name || undefined,
+            pickupLocationId: pickupLocationId || undefined,
+            itineraryDisplay: itineraryDisplay ?? undefined,
+            returnAvailabilityId: selectedReturnOption?.returnAvailabilityId,
+            promoCode: (lockedPromoCode || appliedPromoCode) || undefined,
+            cancellationPolicyId: cancellationPolicyId || undefined,
+            termsAcceptedAt: termsAcceptedAt ?? undefined,
+            checkoutBreakdown,
+            skipConfirmationCommunications: isAdmin && skipConfirmationCommunications ? true : undefined,
+            disableAutoCommunications: isAdmin && disableAutoCommunications ? true : undefined,
+            ...bookingSourceContext,
+          });
+
+      // Admin: show choice to pay now or confirm without payment (customer owes full balance)
+      if (isAdmin) {
+        const adminReservationRef =
+          initialValues?.bookingReference?.trim() ??
+          changeBookingReferenceForPaidFlow ??
+          '';
+        if (!adminReservationRef) {
+          throw new Error('Missing reservation reference for admin payment flow');
+        }
+        setError('');
+        setAdminChoiceData({
+          reservationReference: adminReservationRef,
+          reservationExpiration: undefined,
+          checkoutBreakdown,
+          totalAmount: amountDueForCheckout,
+          datePart,
+          timePart,
+          availabilityProductOptionId,
+          itineraryDisplay: itineraryDisplay ?? undefined,
+          clientSecret: paymentIntent.clientSecret ?? '',
+          ticketLinesForModal: ticketLineItemsForChangeFlowDisplay.map((line) => {
+            const rate = pricing.find((r) => r.category === line.category);
+            const breakdown = getPriceBreakdown(
+              line.category,
+              rate?.priceCAD ?? 0,
+              rate?.baseInDisplayCurrency,
+              rate?.appliedAdjustments ?? []
+            );
+            return { line, breakdown };
+          }),
+          feeLineItems: feeLineItemsWithAddOns,
+          returnPriceAdjustment: checkoutReturnLineAmount,
+          cancellationPolicyFee,
+          cancellationPolicyLabel: effectiveCancellationPolicyLabel,
+          subtotal: effectiveSubtotal,
+          tax: effectivePromoDiscountAmount > 0 ? effectiveTax : tax,
+          totalQuantity,
+          isTaxIncludedInPrice,
+          taxRate: pricingConfig?.taxRate ?? 0,
+          promoDiscountAmount: effectivePromoDiscountAmount > 0 ? effectivePromoDiscountAmount : 0,
+          discountLabel: appliedPromoCode ? `Promo: ${appliedPromoCode}` : (originalReceipt?.promoLabel || undefined),
+        });
+        setShowAdminPaymentChoice(true);
+        setLoading(false);
+        return;
+      }
 
       const ticketLinesForModal: CheckoutModalLineItem[] = ticketLineItemsForChangeFlowDisplay.map((line) => {
         const rate = pricing.find((r) => r.category === line.category);
@@ -4525,7 +4835,7 @@ export function AdminChangeBookingFlow({
         // Paid change: always return to stable ref+lastName + explicit intent (not reservationRef).
         // /manage-booking runs bounded refresh only when `from=change_payment` (see manage-booking page).
         successUrlOverride:
-          changeBookingReferenceForPaidFlow
+          isCustomerSelfServeChange && changeBookingReferenceForPaidFlow
             ? (() => {
                 const origin = typeof window !== 'undefined' ? window.location.origin : '';
                 const ref = encodeURIComponent(
@@ -4553,7 +4863,7 @@ export function AdminChangeBookingFlow({
         promoDiscountAmount: effectivePromoDiscountAmount > 0 ? effectivePromoDiscountAmount : 0,
         discountLabel: appliedPromoCode ? `Promo: ${appliedPromoCode}` : (originalReceipt?.promoLabel || undefined),
         changeTotals:
-          originalReceipt
+          isCustomerSelfServeChange && originalReceipt
             ? {
                 previousTotal: originalReceipt.total,
                 newTotal: displayChangeFlowProposedTotal,
@@ -4622,6 +4932,162 @@ export function AdminChangeBookingFlow({
     }
   };
 
+  const handleConfirmWithoutPayment = async () => {
+    if (!adminChoiceData) return;
+    setLoading(true);
+    setError('');
+    try {
+      if (onChangeBooking) {
+        if (!selectedAvailability) {
+          setError('No availability selected');
+          setLoading(false);
+          return;
+        }
+        const bookingItems = Object.entries(quantities)
+          .filter(([, count]) => count > 0)
+          .map(([category, count]) => ({ category, count }));
+        const availabilityProductOptionId =
+          adminChoiceData.availabilityProductOptionId ||
+          selectedAvailability.productOptionId ||
+          activeOptions[0]?.optionId;
+        if (!availabilityProductOptionId) {
+          setError('No product option selected');
+          setLoading(false);
+          return;
+        }
+        const pickupForChange = pickupLocationId
+          ? product.pickupLocations?.find((loc) => loc.id === pickupLocationId)
+          : null;
+        await onChangeBooking({
+          productId: availabilityProductOptionId,
+          dateTime: selectedAvailability.dateTime,
+          bookingItems,
+          returnAvailabilityId: selectedReturnOption?.returnAvailabilityId ?? null,
+          pickupLocationId: pickupLocationId ?? null,
+          travelerHotel: pickupForChange?.name ?? null,
+          startTime: selectedAvailability.dateTime ?? null,
+          passengerCount: null,
+          childSafetySeatsCount: null,
+          foodRestrictions: null,
+          addOnSelections: addOnSelections.length > 0 ? addOnSelections : null,
+          cancellationPolicyId: cancellationPolicyId ?? initialValues?.cancellationPolicyId ?? null,
+          promoCode: appliedPromoCode ?? null,
+          newTotalAmount: displayChangeFlowProposedTotal,
+          additionalHoursCount: null,
+          pricingAdjustment:
+            providerPricingOverrides.length > 0 || providerAdditionalAdjustments.length > 0
+              ? {
+                  mode: 'MANUAL_LINES',
+                  lineOverrides: providerPricingOverrides,
+                  additionalAdjustments: providerAdditionalAdjustments,
+                }
+              : undefined,
+          capacitySeatCredit: {
+            enabled: true,
+            previousPassengerCount: changeFlowInitialTicketCount,
+            previousAvailabilityId: initialValues?.availabilityId ?? null,
+            previousReturnAvailabilityId: initialValues?.returnAvailabilityId ?? null,
+          },
+        });
+        const bookRef = initialValues?.bookingReference?.trim() || adminChoiceData.reservationReference;
+        setShowAdminPaymentChoice(false);
+        setAdminChoiceData(null);
+        onSuccess?.({ reservationReference: bookRef });
+        const ref = formatBookingRefForDisplay(bookRef);
+        const ln = lastName.trim();
+        if (onShowManage) {
+          onShowManage({ ref, lastName: ln });
+        } else {
+          const params = new URLSearchParams({ ref, lastName: ln, booking_complete: '1' });
+          window.location.href = `/manage-booking?${params.toString()}`;
+        }
+        setLoading(false);
+        return;
+      }
+
+      if (isChangeBookingContext) {
+        setError(
+          'Confirming a booking change without payment requires your dashboard to pass the provider change handler (onChangeBooking). Use Pay now to complete this change, or wire onChangeBooking in the embed.',
+        );
+        setLoading(false);
+        return;
+      }
+
+      const bookingSourceContext = buildBookingSourceContext(bookingSourceAttribution, {
+        clientChannelSource: inferClientBookingSourceFromProductIds(
+          product.productId,
+          adminChoiceData.availabilityProductOptionId,
+        ),
+        forcePartnerPortalChannel: partnerPortalBooking,
+        forceDashboardSource: bookingAppMode === 'provider-dashboard',
+      });
+      const result = await confirmBookingWithoutPayment({
+        reservationReference: adminChoiceData.reservationReference,
+        productId: product.productId,
+        optionId: adminChoiceData.availabilityProductOptionId,
+        date: adminChoiceData.datePart,
+        time: adminChoiceData.timePart,
+        customerEmail: email || undefined,
+        customerFirstName: firstName.trim() || undefined,
+        customerLastName: lastName.trim() || undefined,
+        currency: currency,
+        travelerHotel: product.pickupLocations?.find(loc => loc.id === pickupLocationId)?.name || undefined,
+        pickupLocationId: pickupLocationId || undefined,
+        itineraryDisplay: adminChoiceData.itineraryDisplay ?? undefined,
+        termsAcceptedAt: termsAcceptedAt ?? undefined,
+        skipConfirmationCommunications: skipConfirmationCommunications ? true : undefined,
+        disableAutoCommunications: disableAutoCommunications ? true : undefined,
+        checkoutBreakdown: adminChoiceData.checkoutBreakdown,
+        depositAmount: 0,
+        balanceAmount: adminChoiceData.totalAmount,
+        totalAmount: adminChoiceData.totalAmount,
+        ...bookingSourceContext,
+      });
+      pendingReservationRef.current = null;
+      const ref = formatBookingRefForDisplay(result.bookingReference);
+      const ln = lastName.trim();
+      setShowAdminPaymentChoice(false);
+      setAdminChoiceData(null);
+      onSuccess?.({ reservationReference: adminChoiceData.reservationReference });
+      if (onShowManage) {
+        onShowManage({ ref, lastName: ln });
+      } else {
+        const params = new URLSearchParams({ ref, lastName: ln, booking_complete: '1' });
+        window.location.href = `/manage-booking?${params.toString()}`;
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to confirm booking');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePayNow = () => {
+    if (!adminChoiceData) return;
+    setShowAdminPaymentChoice(false);
+    setCheckoutClientSecret(adminChoiceData.clientSecret);
+    setCheckoutModalData({
+      reservationReference: adminChoiceData.reservationReference,
+      reservationExpiration: adminChoiceData.reservationExpiration,
+      customerLastName: lastName.trim(),
+      ticketLines: adminChoiceData.ticketLinesForModal,
+      feeLineItems: adminChoiceData.feeLineItems,
+      returnPriceAdjustment: adminChoiceData.returnPriceAdjustment,
+      cancellationPolicyFee: adminChoiceData.cancellationPolicyFee,
+      cancellationPolicyLabel: adminChoiceData.cancellationPolicyLabel,
+      subtotal: adminChoiceData.subtotal,
+      tax: adminChoiceData.tax,
+      total: adminChoiceData.totalAmount,
+      totalQuantity: adminChoiceData.totalQuantity,
+      isTaxIncludedInPrice: adminChoiceData.isTaxIncludedInPrice,
+      taxRate: adminChoiceData.taxRate,
+      promoDiscountAmount: adminChoiceData.promoDiscountAmount,
+      discountLabel: adminChoiceData.discountLabel,
+    });
+    setShowCheckoutModal(true);
+    setAdminChoiceData(null);
+  };
+
   if (activeOptions.length === 0) {
     return (
       <div className="flex items-center justify-center py-16">
@@ -4632,6 +5098,17 @@ export function AdminChangeBookingFlow({
 
   return (
     <div className="booking-flow-root space-y-8">
+      {/* Admin: choose to pay now or confirm without payment (full balance owed) */}
+      <AdminPaymentChoiceModal
+        open={!!(showAdminPaymentChoice && adminChoiceData)}
+        totalAmount={adminChoiceData?.totalAmount ?? 0}
+        currency={currency}
+        loading={loading}
+        error={error}
+        onPayNow={handlePayNow}
+        onConfirmWithoutPayment={handleConfirmWithoutPayment}
+        onCancel={() => { setShowAdminPaymentChoice(false); setAdminChoiceData(null); setError(''); }}
+      />
       {checkoutModalData && (
         <CheckoutModal
           open={showCheckoutModal}
@@ -4886,8 +5363,92 @@ export function AdminChangeBookingFlow({
                 currency={currency}
                 locale={locale}
                 t={t}
-                extraBetweenTaxAndTotal={<></>}
-                extraBeforeSubtotal={undefined}
+                extraBetweenTaxAndTotal={
+                  <>
+                    {showProviderPricingInlineEditor && providerPricingUi?.error ? (
+                      <div className="mt-2 text-sm text-red-700">{providerPricingUi.error}</div>
+                    ) : null}
+                    {showProviderPricingInlineEditor &&
+                    providerPricingUi?.loading &&
+                    providerQuotedLines.length === 0 ? (
+                      <div className="mt-2 text-sm text-stone-500">Loading price lines...</div>
+                    ) : null}
+                    {showProviderPricingInlineEditor &&
+                    providerPricingUi?.helperText &&
+                    !providerPricingUi.error ? (
+                      <div className="mt-2 text-xs text-stone-500">{providerPricingUi.helperText}</div>
+                    ) : null}
+                  </>
+                }
+                extraBeforeSubtotal={
+                  showProviderPricingInlineEditor && (providerPricingUi?.additionalAdjustments?.length ?? 0) > 0 ? (
+                    <div className="space-y-1">
+                      {providerPricingUi?.additionalAdjustments?.map((adj) => (
+                        <div key={adj.id} className="flex items-center justify-between gap-2 text-sm">
+                          <div className="flex min-w-0 items-center gap-1">
+                            <button
+                              type="button"
+                              className="rounded border border-stone-300 px-1 text-xs text-stone-600 hover:bg-stone-100"
+                              onClick={() => providerPricingUi?.onRemoveAdditionalAdjustment?.(adj.id)}
+                            >
+                              -
+                            </button>
+                            <input
+                              type="text"
+                              className="w-40 rounded border border-stone-300 px-2 py-0.5 text-sm"
+                              placeholder="Line description"
+                              value={adj.label}
+                              onChange={(e) =>
+                                providerPricingUi?.onUpdateAdditionalAdjustment?.(adj.id, { label: e.target.value })
+                              }
+                            />
+                          </div>
+                          <div className="flex items-center gap-1">
+                            <select
+                              className="rounded border border-stone-300 px-1 py-0.5 text-xs"
+                              value={adj.mode}
+                              onChange={(e) =>
+                                providerPricingUi?.onUpdateAdditionalAdjustment?.(adj.id, {
+                                  mode: e.target.value as 'DISCOUNT' | 'CHARGE',
+                                })
+                              }
+                            >
+                              <option value="DISCOUNT">-</option>
+                              <option value="CHARGE">+</option>
+                            </select>
+                            <input
+                              type="text"
+                              inputMode="decimal"
+                              className="h-6 w-24 rounded border border-stone-300 bg-white px-2 py-0.5 text-right text-sm font-medium leading-none text-stone-700"
+                              placeholder="0.00"
+                              value={adj.amountInput}
+                              onChange={(e) =>
+                                providerPricingUi?.onUpdateAdditionalAdjustment?.(adj.id, {
+                                  amountInput: e.target.value,
+                                })
+                              }
+                            />
+                          </div>
+                        </div>
+                      ))}
+                      <button
+                        type="button"
+                        className="rounded border border-stone-300 px-2 py-0.5 text-xs text-stone-600 hover:bg-stone-100"
+                        onClick={() => providerPricingUi?.onAddAdditionalAdjustment?.()}
+                      >
+                        + add line item
+                      </button>
+                    </div>
+                  ) : showProviderPricingInlineEditor ? (
+                    <button
+                      type="button"
+                      className="rounded border border-stone-300 px-2 py-0.5 text-xs text-stone-600 hover:bg-stone-100"
+                      onClick={() => providerPricingUi?.onAddAdditionalAdjustment?.()}
+                    >
+                      + add line item
+                    </button>
+                  ) : undefined
+                }
                 firstName={firstName}
                 lastName={lastName}
                 email={email}
@@ -4928,12 +5489,12 @@ export function AdminChangeBookingFlow({
                   setTermsAccepted(checked);
                   setTermsAcceptedAt(checked ? new Date().toISOString() : null);
                 }}
-                isAdmin={false}
+                isAdmin={isAdmin}
                 showCommunicationAdminSection={false}
-                skipConfirmationCommunications={false}
-                disableAutoCommunications={false}
-                onSkipConfirmationChange={() => {}}
-                onDisableCommunicationsChange={() => {}}
+                skipConfirmationCommunications={skipConfirmationCommunications}
+                disableAutoCommunications={disableAutoCommunications}
+                onSkipConfirmationChange={setSkipConfirmationCommunications}
+                onDisableCommunicationsChange={setDisableAutoCommunications}
                 error={checkoutFormError}
                 loading={loading}
                 totalQuantity={totalQuantity}
@@ -4941,6 +5502,7 @@ export function AdminChangeBookingFlow({
                 submitLabel={changeCheckoutButtonLabel ?? deferredInvoiceSubmitLabel}
                 hideSubmitButton={
                   showCheckoutModal ||
+                  showAdminPaymentChoice ||
                   !hasEffectiveChangeSelection ||
                   isChangeQuoteBlocked
                 }
@@ -4949,10 +5511,16 @@ export function AdminChangeBookingFlow({
                 attributionConfirmLabel={flowUi?.partnerAttributionConfirmLabel}
                 attributionConfirmed={partnerAttributionConfirmed}
                 onAttributionConfirmedChange={setPartnerAttributionConfirmed}
-                lineAmountInputs={undefined}
-                onLineAmountInputChange={undefined}
-                onLineAmountInputBlur={undefined}
-                onLineAmountReset={undefined}
+                lineAmountInputs={showProviderPricingInlineEditor ? providerPricingUi?.lineAmountInputs : undefined}
+                onLineAmountInputChange={
+                  showProviderPricingInlineEditor ? providerPricingUi?.onLineAmountInputChange : undefined
+                }
+                onLineAmountInputBlur={
+                  showProviderPricingInlineEditor ? providerPricingUi?.onLineAmountInputBlur : undefined
+                }
+                onLineAmountReset={
+                  showProviderPricingInlineEditor ? providerPricingUi?.onLineAmountReset : undefined
+                }
               />
             </>
           )}

package/src/components/booking/CheckoutModal.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useState, useEffect, useRef, useMemo, type ReactNode } from 'react';
-import { createPortal } from 'react-dom';
 import { loadStripe } from '@stripe/stripe-js';
 import { Elements, PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';
 import { useBookingHost } from '../../runtime';
@@ -238,10 +237,12 @@ export function CheckoutModal({
   if (!env.STRIPE_PUBLISHABLE_KEY) {
     const noStripe = (
       <div
-        className="booking-flow-root booking-flow-preflight fixed inset-0 z-[10050] flex items-center justify-center p-4 bg-black/50"
+        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"
         style={{ zIndex: 100_000 }}
+        role="dialog"
+        aria-modal="true"
       >
-        <div className="bg-white rounded-xl shadow-xl max-w-md w-full p-6">
+        <div className="bg-white rounded-xl shadow-xl max-w-md w-full p-6 pointer-events-auto" onClick={(e) => e.stopPropagation()}>
           <h3 className="text-lg font-semibold text-stone-900 mb-2">
             {t('booking.checkout') || 'Checkout'}
           </h3>
@@ -258,7 +259,7 @@ export function CheckoutModal({
         </div>
       </div>
     );
-    return typeof document !== 'undefined' ? createPortal(noStripe, document.body) : null;
+    return noStripe;
   }
 
   const options = {
@@ -274,10 +275,15 @@ export function CheckoutModal({
 
   const checkout = (
     <div
-      className="booking-flow-root booking-flow-preflight fixed inset-0 z-[10050] flex items-center justify-center p-4 bg-black/50"
+      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"
       style={{ zIndex: 100_000 }}
+      role="dialog"
+      aria-modal="true"
     >
-      <div className="bg-white rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-hidden flex flex-col">
+      <div
+        className="bg-white rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-hidden flex flex-col pointer-events-auto"
+        onClick={(e) => e.stopPropagation()}
+      >
         <div className="p-6 border-b border-stone-200 flex-shrink-0">
           <div className="flex justify-between items-start">
             <h3 className="text-lg font-semibold text-stone-900">
@@ -449,5 +455,5 @@ export function CheckoutModal({
       </div>
     </div>
   );
-  return typeof document !== 'undefined' ? createPortal(checkout, document.body) : null;
+  return checkout;
 }

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

@@ -3,6 +3,7 @@ import type { Product } from '../../lib/booking-api';
 import type { BookingSourceMetadata } from '../../lib/booking/source-metadata';
 import type { Currency } from './CurrencySwitcher';
 import type { BookingFlowUiOptions } from './booking-flow-ui';
+import type { ProviderDashboardChangeBookingPayload } from './provider-dashboard-change-booking';
 
 /** Live selection snapshot for change-booking compare UI (parent dialog). */
 export interface ChangeFlowSelectionPreview {
@@ -126,6 +127,8 @@ export interface ChangeBookingFlowProps extends BookingFlowBaseProps {
       quantity?: number;
     }>;
   } | null;
+  /** Admin/provider dashboard integration hook (used by AdminChangeBookingFlow). */
+  onChangeBooking?: (data: ProviderDashboardChangeBookingPayload) => Promise<void>;
   /**
    * Embed compatibility (e.g. ticketbooth provider dashboard): ignored — same flow as the public site.
    * When true, {@link BookingFlow} still renders the fork {@link AdminChangeBookingFlow} for future divergence.