@ticketboothapp/booking 1.2.64 → 1.2.66

package/src/components/booking/AdminPaymentChoiceModal.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { createPortal } from 'react-dom';
 import { formatCurrencyAmount } from '../../lib/currency';
 import type { Currency } from './CurrencySwitcher';
 
@@ -17,8 +16,8 @@ interface AdminPaymentChoiceModalProps {
 
 /**
  * Provider / staff: pay now vs confirm without payment.
- * Uses the same overlay + card + Tailwind button pattern as {@link CheckoutModal}
- * so `.booking-flow-preflight button { background: transparent }` does not strip primary styles.
+ * Render inline (not portaled) so it remains interactive when embedded inside modal hosts
+ * that lock pointer events/inert siblings on `document.body`.
  */
 export function AdminPaymentChoiceModal({
   open,
@@ -34,10 +33,15 @@ export function AdminPaymentChoiceModal({
 
   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"
+      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 gap-3">
             <h3 className="text-lg font-semibold text-stone-900 pr-2">
@@ -94,5 +98,5 @@ export function AdminPaymentChoiceModal({
       </div>
     </div>
   );
-  return typeof document !== 'undefined' ? createPortal(modal, document.body) : null;
+  return modal;
 }

package/src/components/booking/BookingFlow.tsx

@@ -15,7 +15,7 @@ export type {
 
 /**
  * Routes to {@link NewBookingFlow}, {@link ChangeBookingFlow}, or {@link AdminChangeBookingFlow}
- * — duplicated implementations so each flow can be refactored without coupling (no shared runtime core).
+ * — duplicated implementations so each flow can evolve independently.
  */
 export function BookingFlow(props: BookingFlowProps) {
   if (props.mode === 'change') {