@bigz-app/booking-widget 0.1.25 → 0.2.1

package/dist/index.cjs

@@ -591,6 +591,13 @@ const StyleProvider = ({ config, children, }) => {
 			direction: ltr;
 			isolation: isolate;
 		}
+        .print-only {
+            display: none;
+        }
+        .print-hidden {
+            display: block;
+        }
+        @media print {
 	`;
     // Inject CSS reset styles
     React__default.useEffect(() => {
@@ -936,6 +943,26 @@ const createRequestBody = (config, additionalData) => {
         organizationId: config.organizationId,
     };
 };
+// Helper function to detect Stripe return parameters in URL
+const detectStripeReturn = () => {
+    if (typeof window === "undefined") {
+        return null;
+    }
+    const urlParams = new URLSearchParams(window.location.search);
+    // Check for Stripe return parameters
+    const paymentIntent = urlParams.get("payment_intent");
+    const paymentIntentClientSecret = urlParams.get("payment_intent_client_secret");
+    const redirectStatus = urlParams.get("redirect_status");
+    if (paymentIntent && paymentIntentClientSecret && redirectStatus) {
+        return {
+            isStripeReturn: true,
+            paymentIntent,
+            paymentIntentClientSecret,
+            redirectStatus,
+        };
+    }
+    return null;
+};
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
@@ -9118,7 +9145,7 @@ const spinner = (borderColor) => (jsxRuntime.jsx("div", { style: {
             borderRadius: "50%",
         } }) }));
 // Inner component that uses the Stripe hooks
-function PaymentFormInner({ config, eventDetails, formData, totalAmount, discountCode, onSuccess, onError, systemConfig, clientSecret, }) {
+function PaymentFormInner({ config, eventDetails, formData, totalAmount, discountCode, onSuccess, onError, }) {
     const stripe = reactStripe_umdExports.useStripe();
     const elements = reactStripe_umdExports.useElements();
     const [isLoading, setIsLoading] = React__default.useState(false);
@@ -9144,26 +9171,12 @@ function PaymentFormInner({ config, eventDetails, formData, totalAmount, discoun
                 return;
             }
             // First, confirm the payment with Stripe
+            // Build return URL for Stripe redirect
+            const baseUrl = window !== undefined ? window.location.href : `${config.bookingSystemUrl}/booking-success`;
+            const returnUrl = new URL(baseUrl);
             const confirmParams = {
-                return_url: "https://bigz.surfschule-zingst.de/booking/success",
+                return_url: returnUrl.toString(),
             };
-            // Ensure return_url is properly formatted and doesn't contain fragment identifiers
-            try {
-                const url = new URL(confirmParams.return_url);
-                // Remove any fragment identifiers that might cause issues
-                url.hash = "";
-                confirmParams.return_url = url.toString();
-            }
-            catch (e) {
-                console.warn("[PAYMENT_FORM] Invalid return_url, using fallback:", confirmParams.return_url);
-                // Fallback to current origin if URL parsing fails
-                confirmParams.return_url = window.location.origin + window.location.pathname;
-            }
-            console.log("[PAYMENT_FORM] Confirming payment with params:", {
-                paymentIntentId: clientSecret.split("_secret_")[0],
-                return_url: confirmParams.return_url,
-                redirect: "if_required",
-            });
             const { error, paymentIntent } = await stripe.confirmPayment({
                 elements,
                 confirmParams,
@@ -9181,91 +9194,15 @@ function PaymentFormInner({ config, eventDetails, formData, totalAmount, discoun
                     setPaymentError(error.message || "Zahlungsfehler");
                 }
                 else {
-                    setPaymentError("Ein unerwarteter Fehler ist aufgetreten.");
+                    setPaymentError("Ein unerwarteter Fehler ist aufgetreten. Bitte versuche es nochmal.");
                 }
                 return;
             }
             // Payment succeeded, now create the booking
             if (paymentIntent && paymentIntent.status === "succeeded") {
-                // Check if we have system configuration
-                if (!systemConfig) {
-                    throw new Error("System-Konfiguration nicht verfügbar. Bitte lade die Seite neu.");
-                }
-                // Determine which endpoint to use based on system mode
-                const isConnectMode = systemConfig.systemMode === "connect";
-                const endpoint = isConnectMode
-                    ? "/booking/create-from-payment"
-                    : "/booking-proxy/create-booking";
-                // Calculate if this is a deposit payment
-                const fullAmount = eventDetails.price * formData.participants.filter((p) => p.name.trim()).length;
-                const isDepositPayment = eventDetails.deposit > 0;
-                // Build request body based on mode
-                const requestData = {
-                    // Payment info
-                    paymentIntentId: paymentIntent.id,
-                    paymentMethod: "card",
-                    paymentStatus: isDepositPayment ? "deposit_paid" : "paid",
-                    totalAmount,
-                    depositAmount: isDepositPayment ? totalAmount : undefined,
-                    fullAmount: fullAmount,
-                    // Customer info
-                    customerEmail: formData.customerEmail,
-                    customerName: formData.customerName,
-                    customerPhone: formData.customerPhone,
-                    // Booking info
-                    participants: formData.participants.filter((p) => p.name.trim()),
-                    eventInstanceId: config.eventInstanceId || eventDetails.id,
-                    organizationId: config.organizationId, // Ensure organization ID is always included
-                    discountCode: discountCode?.code,
-                    notes: "",
-                };
-                // Add mode-specific fields
-                if (isConnectMode) {
-                    Object.assign(requestData, {
-                        source: "connect",
-                        stripeAccountType: "connect",
-                    });
-                }
-                else {
-                    // ApiKey mode - include required proxy fields
-                    Object.assign(requestData, {
-                        bookingSystemApiUrl: config.apiBaseUrl,
-                        // apiKey would be added here if required
-                    });
-                }
-                console.log(`[PAYMENT_FORM] Attempting booking creation via ${endpoint}`, {
-                    mode: isConnectMode ? "connect" : "apikey",
-                    paymentIntentId: paymentIntent.id,
-                    eventInstanceId: requestData.eventInstanceId,
-                    organizationId: requestData.organizationId,
-                    participantCount: requestData.participants.length,
-                });
-                const bookingResponse = await fetch(getApiUrl(config.apiBaseUrl, endpoint), {
-                    method: "POST",
-                    headers: createApiHeaders(config),
-                    body: JSON.stringify(createRequestBody(config, requestData)),
-                });
-                const bookingData = await bookingResponse.json();
-                if (!bookingResponse.ok) {
-                    console.error(`[PAYMENT_FORM] Booking creation failed:`, {
-                        status: bookingResponse.status,
-                        error: bookingData.error,
-                        details: bookingData.details,
-                        paymentIntentId: paymentIntent.id,
-                    });
-                    throw new Error(bookingData.error || "Fehler beim Erstellen der Buchung");
-                }
-                console.log(`[PAYMENT_FORM] Booking created successfully:`, {
-                    bookingId: bookingData.booking?.id,
-                    orderId: bookingData.order?.id,
-                    paymentIntentId: paymentIntent.id,
-                });
                 // Booking created successfully
                 onSuccess({
-                    booking: bookingData.booking,
-                    payment: "succeeded",
                     paymentIntent: paymentIntent,
-                    formData: formData,
                 });
             }
             else {
@@ -9341,6 +9278,7 @@ function PaymentFormInner({ config, eventDetails, formData, totalAmount, discoun
 // Main PaymentForm component that handles payment intent creation and Elements wrapper
 function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode, onSuccess, onError, systemConfig, stripePromise, stripeAppearance, }) {
     const [clientSecret, setClientSecret] = React__default.useState(null);
+    const [paymentIntentId, setPaymentIntentId] = React__default.useState(null);
     const [isCreatingPaymentIntent, setIsCreatingPaymentIntent] = React__default.useState(false);
     const [paymentError, setPaymentError] = React__default.useState(null);
     // Create payment intent when component mounts or when relevant data changes
@@ -9368,11 +9306,6 @@ function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode
             setIsCreatingPaymentIntent(true);
             setPaymentError(null);
             try {
-                // Determine endpoint based on system mode
-                const isConnectMode = systemConfig.systemMode === "connect";
-                const endpoint = isConnectMode
-                    ? "/booking/create-payment-intent"
-                    : "/booking-proxy/create-payment-intent";
                 // Build request data with validation
                 const requestData = {
                     eventInstanceId: config.eventInstanceId || eventDetails.id,
@@ -9381,7 +9314,11 @@ function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode
                     currency: "eur",
                     participants: formData.participants.filter((p) => p.name?.trim()),
                     discountCode: discountCode?.code,
+                    customerName: formData.customerName?.trim(),
                     customerEmail: formData.customerEmail?.trim(),
+                    customerPhone: formData.customerPhone?.trim(),
+                    comment: formData.comment?.trim(),
+                    ...(paymentIntentId && { paymentIntentId }), // Include existing payment intent ID if available
                 };
                 // Validate required fields
                 if (!requestData.eventInstanceId) {
@@ -9399,35 +9336,15 @@ function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode
                 if (!requestData.customerEmail) {
                     throw new Error("Customer email is required");
                 }
-                console.log("[PAYMENT_FORM] Creating payment intent:", {
-                    endpoint,
-                    mode: isConnectMode ? "connect" : "apikey",
-                    amount: requestData.amount,
-                    currency: requestData.currency,
-                    participantCount: requestData.participants.length,
-                    organizationId: requestData.organizationId,
-                    eventInstanceId: requestData.eventInstanceId,
-                });
-                // Add mode-specific fields
-                if (!isConnectMode) {
-                    // ApiKey mode needs additional fields
-                    Object.assign(requestData, {
-                        bookingSystemApiUrl: config.apiBaseUrl,
-                        // apiKey would be added here if required
-                    });
-                }
-                const response = await fetch(getApiUrl(config.apiBaseUrl, endpoint), {
+                const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/create-payment-intent"), {
                     method: "POST",
                     headers: createApiHeaders(config),
                     body: JSON.stringify(createRequestBody(config, requestData)),
                 });
                 const data = await response.json();
                 if (response.ok) {
-                    console.log("[PAYMENT_FORM] Payment intent created successfully:", {
-                        hasClientSecret: !!data.clientSecret,
-                        clientSecretPrefix: `${data.clientSecret?.substring(0, 20)}...`,
-                    });
                     setClientSecret(data.clientSecret);
+                    setPaymentIntentId(data.paymentIntentId); // Save payment intent ID for future updates
                 }
                 else {
                     console.error("[PAYMENT_FORM] Payment intent creation failed:", {
@@ -9703,6 +9620,7 @@ const bookingFormSchema = objectType({
     customerPhone: stringType().optional(),
     participants: arrayType(participantSchema).min(1, "Mindestens ein Teilnehmer erforderlich"),
     discountCode: stringType().optional(),
+    comment: stringType().optional(),
     acceptTerms: booleanType()
         .refine((val) => val === true, "Bitte akzeptiere die Allgemeinen Geschäftsbedingungen"),
 });
@@ -9718,6 +9636,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
         defaultValues: {
             participants: [{ name: "", age: undefined }],
             discountCode: "",
+            comment: "",
             acceptTerms: false,
         },
     });
@@ -10104,6 +10023,36 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                                         backdropFilter: "blur(4px)",
                                         borderRadius: "var(--bw-border-radius)",
                                         padding: "var(--bw-spacing)",
+                                    }, children: [jsxRuntime.jsx("label", { htmlFor: "booking-comment", style: {
+                                                fontSize: "var(--bw-font-size)",
+                                                fontWeight: "500",
+                                                color: "var(--bw-text-color)",
+                                                fontFamily: "var(--bw-font-family)",
+                                                display: "block",
+                                                marginBottom: "8px",
+                                            }, children: "Kommentar (optional)" }), jsxRuntime.jsx("textarea", { id: "booking-comment", ...form.register("comment"), placeholder: "Zus\u00E4tzliche Anmerkungen zu Ihrer Buchung...", rows: 3, style: {
+                                                width: "100%",
+                                                padding: "12px",
+                                                border: `1px solid var(--bw-border-color)`,
+                                                borderRadius: "var(--bw-border-radius)",
+                                                fontSize: "var(--bw-font-size)",
+                                                fontFamily: "var(--bw-font-family)",
+                                                backgroundColor: "var(--bw-input-bg)",
+                                                color: "var(--bw-text-color)",
+                                                resize: "vertical",
+                                                minHeight: "80px",
+                                                outline: "none",
+                                                transition: "border-color 0.2s ease",
+                                            }, onFocus: (e) => {
+                                                e.target.style.borderColor = "var(--bw-highlight-color)";
+                                            }, onBlur: (e) => {
+                                                e.target.style.borderColor = "var(--bw-border-color)";
+                                            } })] }), jsxRuntime.jsxs("div", { style: {
+                                        backgroundColor: "var(--bw-surface-color)",
+                                        border: `1px solid var(--bw-border-color)`,
+                                        backdropFilter: "blur(4px)",
+                                        borderRadius: "var(--bw-border-radius)",
+                                        padding: "var(--bw-spacing)",
                                     }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [jsxRuntime.jsx("input", { id: "acceptTerms", ...form.register("acceptTerms"), type: "checkbox", style: {
                                                         marginTop: "4px",
                                                         width: "20px",
@@ -10276,162 +10225,339 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                 ` })] }) }));
 }
 
-const BookingSuccessModal = ({ isOpen, onClose, bookingData, eventDetails, formData, config, }) => {
-    if (!isOpen || !bookingData)
+const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId, }) => {
+    const [bookingData, setBookingData] = React__default.useState(null);
+    const [eventDetails, setEventDetails] = React__default.useState(null);
+    const [formData, setFormData] = React__default.useState(null);
+    const [isLoading, setIsLoading] = React__default.useState(false);
+    const [paymentStatus, setPaymentStatus] = React__default.useState(null);
+    const fetchBookingData = async (intentId) => {
+        const targetPaymentIntentId = paymentIntentId;
+        // If we have payment intent ID, fetch from API
+        if (targetPaymentIntentId) {
+            setIsLoading(true);
+            try {
+                const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/get-booking-by-payment-intent"), {
+                    method: "POST",
+                    headers: createApiHeaders(config),
+                    body: JSON.stringify(createRequestBody(config, {
+                        paymentIntentId: targetPaymentIntentId,
+                    })),
+                });
+                const data = await response.json();
+                if (response.ok) {
+                    setBookingData({
+                        booking: data.booking,
+                        order: data.order,
+                        payments: data.payments,
+                        orderItems: data.orderItems,
+                        stripePaymentIntent: data.stripePaymentIntent,
+                    });
+                    setEventDetails({
+                        id: data.booking.eventInstance.id,
+                        name: data.booking.eventInstance.eventType.name,
+                        description: data.booking.eventInstance.eventType.description,
+                        startTime: data.booking.eventInstance.startTime,
+                        endTime: data.booking.eventInstance.endTime,
+                        price: data.order.total / data.booking.participantCount,
+                    });
+                    setFormData({
+                        customerEmail: data.booking.customerEmail,
+                        customerName: data.booking.customerName,
+                        customerPhone: data.booking.customerPhone,
+                        participants: data.booking.participants || [],
+                    });
+                    // Set payment status from Stripe data or order status
+                    setPaymentStatus(data.stripePaymentIntent?.status || data.order.status);
+                }
+                else {
+                    onError?.(data.error || "Fehler beim Abrufen der Buchungsdaten");
+                }
+            }
+            catch (err) {
+                console.error("[BookingSuccessModal] Error fetching booking data:", err);
+                onError?.("Ein Fehler ist bei der Verarbeitung aufgetreten.");
+            }
+            finally {
+                setIsLoading(false);
+            }
+            return;
+        }
+    };
+    React__default.useEffect(() => {
+        if (isOpen) {
+            fetchBookingData();
+        }
+    }, [isOpen, paymentIntentId, config, onError]);
+    if (!isOpen)
         return null;
+    // Show loading state while fetching data
+    if (isLoading || !bookingData) {
+        return (jsxRuntime.jsx(DialogWrapper, { isOpen: isOpen, onClose: onClose, maxWidth: "700px", children: jsxRuntime.jsx("div", { style: {
+                    padding: "var(--bw-spacing-large)",
+                    textAlign: "center",
+                    minHeight: "200px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, children: jsxRuntime.jsx("div", { style: {
+                        color: "var(--bw-text-muted)",
+                        fontFamily: "var(--bw-font-family)",
+                        fontSize: "var(--bw-font-size-large)",
+                    }, children: "Buchungsdaten werden geladen..." }) }) }));
+    }
     const booking = bookingData.booking;
-    return (jsxRuntime.jsx(DialogWrapper, { isOpen: isOpen, onClose: onClose, maxWidth: "700px", children: jsxRuntime.jsxs("div", { style: { padding: "var(--bw-spacing-large)" }, children: [jsxRuntime.jsxs("div", { style: {
-                        textAlign: "center",
-                        marginBottom: "var(--bw-spacing-large)",
-                    }, children: [jsxRuntime.jsx("div", { style: {
-                                width: "64px",
-                                height: "64px",
-                                backgroundColor: "var(--bw-success-color, #10B981)",
-                                borderRadius: "50%",
-                                margin: "0 auto var(--bw-spacing)",
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                fontSize: "32px",
-                                color: "white",
-                            }, children: "\u2713" }), jsxRuntime.jsx("h2", { style: {
-                                fontSize: "var(--bw-font-size-xl)",
-                                fontWeight: "700",
-                                color: "var(--bw-text-color)",
-                                margin: "0 0 var(--bw-spacing-small) 0",
-                                fontFamily: "var(--bw-font-family)",
-                            }, children: "Buchung erfolgreich!" }), jsxRuntime.jsx("p", { style: {
-                                color: "var(--bw-text-muted)",
-                                fontFamily: "var(--bw-font-family)",
-                                margin: 0,
-                            }, children: "Deine Buchung wurde erfolgreich abgeschlossen." })] }), jsxRuntime.jsxs("div", { style: {
-                        backgroundColor: "var(--bw-surface-color)",
-                        border: `1px solid var(--bw-border-color)`,
-                        borderRadius: "var(--bw-border-radius)",
-                        padding: "var(--bw-spacing)",
+    new Date(eventDetails.startTime);
+    new Date(eventDetails.endTime);
+    const handlePrint = () => {
+        window.print();
+    };
+    const formatTime12 = (dateString) => {
+        return formatTime(dateString, "Europe/Berlin", "de");
+    };
+    const formatDate12 = (dateString) => {
+        return formatEventDate(dateString);
+    };
+    return (jsxRuntime.jsx(DialogWrapper, { isOpen: isOpen, onClose: onClose, maxWidth: "700px", children: jsxRuntime.jsxs("div", { style: {
+                fontFamily: "var(--bw-font-family)",
+                padding: "var(--bw-spacing-large)",
+                maxWidth: "100%",
+            }, children: [jsxRuntime.jsxs("div", { className: "flex justify-between items-center print-hidden", style: {
                         marginBottom: "var(--bw-spacing-large)",
-                    }, children: [jsxRuntime.jsx("h3", { style: {
-                                fontSize: "var(--bw-font-size-large)",
-                                fontWeight: "600",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                    }, children: [jsxRuntime.jsxs("h1", { className: "font-bold text-3xl flex items-center gap-2", style: {
                                 color: "var(--bw-text-color)",
-                                margin: "0 0 var(--bw-spacing) 0",
                                 fontFamily: "var(--bw-font-family)",
-                            }, children: "Buchungsdetails" }), jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing)" }, children: [booking.bookingHash && (jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Buchungs-ID:" }), jsxRuntime.jsx("span", { style: {
-                                                color: "var(--bw-text-color)",
-                                                fontWeight: "500",
-                                                fontFamily: "monospace",
-                                                fontSize: "var(--bw-font-size-small)",
-                                                backgroundColor: "var(--bw-background-color)",
-                                                padding: "4px 8px",
-                                                borderRadius: "var(--bw-border-radius-small)",
-                                            }, children: booking.bookingHash })] })), jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Event:" }), jsxRuntime.jsx("span", { style: {
-                                                color: "var(--bw-text-color)",
-                                                fontWeight: "500",
-                                                fontFamily: "var(--bw-font-family)",
-                                                textAlign: "right",
-                                                maxWidth: "60%",
-                                            }, children: eventDetails.name })] }), jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Datum:" }), jsxRuntime.jsx("span", { style: {
-                                                color: "var(--bw-text-color)",
-                                                fontWeight: "500",
-                                                fontFamily: "var(--bw-font-family)",
-                                                textAlign: "right",
-                                                maxWidth: "60%",
-                                            }, children: formatEventDate(eventDetails.startTime) })] }), jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Uhrzeit:" }), jsxRuntime.jsx("span", { style: {
-                                                color: "var(--bw-text-color)",
-                                                fontWeight: "500",
-                                                fontFamily: "var(--bw-font-family)",
-                                                textAlign: "right",
-                                                maxWidth: "60%",
-                                            }, children: formatTime(eventDetails.startTime, "Europe/Berlin", "de") })] }), jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Teilnehmer:" }), jsxRuntime.jsx("span", { style: {
-                                                color: "var(--bw-text-color)",
-                                                fontWeight: "500",
-                                                fontFamily: "var(--bw-font-family)",
-                                            }, children: booking.participantCount })] }), jsxRuntime.jsxs("div", { style: {
+                                marginBottom: "var(--bw-spacing-large)",
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "var(--bw-spacing-small)",
+                            }, children: [jsxRuntime.jsx("div", { style: {
+                                        width: "32px",
+                                        height: "32px",
+                                        backgroundColor: "var(--bw-highlight-color, #10B981)",
+                                        borderRadius: "50%",
                                         display: "flex",
-                                        justifyContent: "space-between",
                                         alignItems: "center",
-                                        borderTop: `1px solid var(--bw-border-color)`,
-                                        paddingTop: "var(--bw-spacing)",
-                                        marginTop: "var(--bw-spacing)",
-                                    }, children: [jsxRuntime.jsx("span", { style: {
-                                                color: "var(--bw-text-color)",
-                                                fontWeight: "600",
-                                                fontFamily: "var(--bw-font-family)",
-                                            }, children: "Gesamtbetrag:" }), jsxRuntime.jsx("span", { style: {
-                                                color: "var(--bw-text-color)",
-                                                fontWeight: "600",
-                                                fontSize: "var(--bw-font-size-large)",
-                                                fontFamily: "var(--bw-font-family)",
-                                            }, children: formatCurrency(booking.total) })] })] })] }), formData.participants && formData.participants.length > 0 && (jsxRuntime.jsxs("div", { style: {
-                        border: `1px solid var(--bw-border-color)`,
-                        borderRadius: "var(--bw-border-radius)",
-                        padding: "var(--bw-spacing)",
-                        marginBottom: "var(--bw-spacing-large)",
-                    }, children: [jsxRuntime.jsx("h3", { style: {
-                                fontSize: "var(--bw-font-size-large)",
-                                fontWeight: "600",
+                                        justifyContent: "center",
+                                        color: "white",
+                                    }, children: "\u2713" }), jsxRuntime.jsx("p", { style: {
+                                        fontSize: "var(--bw-font-size-large)",
+                                        fontWeight: "600",
+                                        color: "var(--bw-highlight-color)",
+                                        margin: "0px 10px",
+                                    }, children: "Buchung erfolgreich erstellt!" })] }), jsxRuntime.jsx("button", { onClick: handlePrint, style: {
+                                backgroundColor: "transparent",
+                                border: `1px solid var(--bw-border-color)`,
                                 color: "var(--bw-text-color)",
-                                margin: "0 0 var(--bw-spacing) 0",
+                                padding: "8px 16px",
+                                borderRadius: "var(--bw-border-radius)",
+                                cursor: "pointer",
                                 fontFamily: "var(--bw-font-family)",
-                            }, children: "Teilnehmer" }), jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-small)" }, children: formData.participants
-                                .filter((p) => p.name.trim())
-                                .map((participant, index) => (jsxRuntime.jsxs("div", { style: {
-                                    display: "flex",
-                                    justifyContent: "space-between",
-                                    alignItems: "center",
-                                    padding: "var(--bw-spacing-small)",
-                                    borderRadius: "var(--bw-border-radius-small)",
-                                }, children: [jsxRuntime.jsx("span", { style: {
+                                fontSize: "var(--bw-font-size-small)",
+                            }, children: "Drucken" })] }), jsxRuntime.jsxs("div", { className: "print-only print-booking-header", children: [jsxRuntime.jsx("h1", { children: "Buchungsbest\u00E4tigung" }), jsxRuntime.jsx("div", { className: "subtitle", children: "Vielen Dank f\u00FCr deine Buchung! Hier sind deine Buchungsdetails." })] }), jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [jsxRuntime.jsxs("div", { className: "print-booking-card", style: {
+                                backgroundColor: "var(--bw-surface-color)",
+                                border: `1px solid var(--bw-border-color)`,
+                                borderRadius: "var(--bw-border-radius)",
+                                padding: "var(--bw-spacing)",
+                                marginBottom: "var(--bw-spacing-large)",
+                            }, children: [jsxRuntime.jsx("div", { className: "print-hidden", style: { marginBottom: "var(--bw-spacing)" }, children: jsxRuntime.jsx("h3", { style: {
+                                            fontSize: "var(--bw-font-size-large)",
+                                            fontWeight: "600",
                                             color: "var(--bw-text-color)",
+                                            margin: "0",
                                             fontFamily: "var(--bw-font-family)",
-                                        }, children: participant.name }), participant.age && (jsxRuntime.jsxs("span", { style: {
-                                            color: "var(--bw-text-muted)",
-                                            fontSize: "var(--bw-font-size-small)",
+                                        }, children: "Buchungsdetails" }) }), jsxRuntime.jsx("div", { className: "print-only", children: jsxRuntime.jsx("div", { className: "print-section-title", children: "Buchungsdetails" }) }), jsxRuntime.jsxs("div", { className: "space-y-4 print-only:space-y-2 print-only:p-0", children: [jsxRuntime.jsxs("div", { className: "gap-4 grid grid-cols-2 print-detail-grid", style: {
+                                                display: "grid",
+                                                gridTemplateColumns: "1fr 1fr",
+                                                gap: "var(--bw-spacing)",
+                                            }, children: [jsxRuntime.jsxs("div", { className: "print-detail-item", style: { marginBottom: "span 2" }, children: [jsxRuntime.jsx("div", { className: "font-medium text-muted-foreground text-sm print-detail-label", style: {
+                                                                color: "var(--bw-text-muted)",
+                                                                fontSize: "var(--bw-font-size-small)",
+                                                                fontFamily: "var(--bw-font-family)",
+                                                            }, children: "Buchungs-ID" }), jsxRuntime.jsx("p", { className: "font-semibold print-detail-value", style: {
+                                                                fontWeight: "600",
+                                                                color: "var(--bw-text-color)",
+                                                                fontFamily: "var(--bw-font-family)",
+                                                                fontSize: "var(--bw-font-size-medium)",
+                                                                margin: "0px 0px 6px 0",
+                                                            }, children: booking.bookingHash })] }), jsxRuntime.jsxs("div", { className: "print-detail-item", children: [jsxRuntime.jsx("div", { className: "font-medium text-muted-foreground text-sm print-detail-label", style: {
+                                                                color: "var(--bw-text-muted)",
+                                                                fontSize: "var(--bw-font-size-small)",
+                                                                fontFamily: "var(--bw-font-family)",
+                                                            }, children: "Bezahl-Status" }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("span", { className: "print-hidden", style: {
+                                                                        backgroundColor: "var(--bw-success-color, #10B981)",
+                                                                        color: "white",
+                                                                        padding: "2px 8px",
+                                                                        borderRadius: "var(--bw-border-radius-small)",
+                                                                        fontSize: "var(--bw-font-size-small)",
+                                                                        fontFamily: "var(--bw-font-family)",
+                                                                        width: "fit-content",
+                                                                    }, children: paymentStatus === "succeeded"
+                                                                        ? "erfolgreich"
+                                                                        : paymentStatus === "canceled" || paymentStatus === "failed"
+                                                                            ? "fehlgeschlagen"
+                                                                            : "in Bearbeitung" }), jsxRuntime.jsx("span", { className: "print-only print-status-badge print-status-paid", children: "Bezahlt" })] })] })] }), jsxRuntime.jsxs("div", { className: "print-detail-item print-only:col-span-2", children: [jsxRuntime.jsx("div", { className: "font-medium text-muted-foreground text-sm print-detail-label", style: {
+                                                        color: "var(--bw-text-muted)",
+                                                        fontSize: "var(--bw-font-size-small)",
+                                                        fontFamily: "var(--bw-font-family)",
+                                                    }, children: "Event" }), jsxRuntime.jsx("p", { className: "font-semibold print-detail-value", style: {
+                                                        fontWeight: "600",
+                                                        color: "var(--bw-text-color)",
+                                                        fontFamily: "var(--bw-font-family)",
+                                                        fontSize: "var(--bw-font-size-large)",
+                                                        margin: "0 0 6px 0",
+                                                    }, children: eventDetails.name })] }), jsxRuntime.jsxs("div", { className: "gap-4 grid grid-cols-2 print-detail-grid", style: {
+                                                display: "grid",
+                                                gridTemplateColumns: "1fr 1fr",
+                                                gap: "var(--bw-spacing)",
+                                            }, children: [jsxRuntime.jsxs("div", { className: "print-detail-item", children: [jsxRuntime.jsx("div", { className: "font-medium text-muted-foreground text-sm print-detail-label", style: {
+                                                                color: "var(--bw-text-muted)",
+                                                                fontSize: "var(--bw-font-size-small)",
+                                                                fontFamily: "var(--bw-font-family)",
+                                                            }, children: "Datum" }), jsxRuntime.jsx("p", { className: "print-detail-value", style: {
+                                                                fontWeight: "600",
+                                                                color: "var(--bw-text-color)",
+                                                                fontFamily: "var(--bw-font-family)",
+                                                                fontSize: "var(--bw-font-size-large)",
+                                                                margin: "0 0 6px 0",
+                                                            }, children: formatDate12(eventDetails.startTime) })] }), jsxRuntime.jsxs("div", { className: "print-detail-item", children: [jsxRuntime.jsx("div", { className: "font-medium text-muted-foreground text-sm print-detail-label", style: {
+                                                                color: "var(--bw-text-muted)",
+                                                                fontSize: "var(--bw-font-size-small)",
+                                                                fontFamily: "var(--bw-font-family)",
+                                                            }, children: "Zeit" }), jsxRuntime.jsxs("p", { className: "print-detail-value", style: {
+                                                                fontWeight: "600",
+                                                                color: "var(--bw-text-color)",
+                                                                fontFamily: "var(--bw-font-family)",
+                                                                fontSize: "var(--bw-font-size-large)",
+                                                                margin: "0 0 6px 0",
+                                                            }, children: [formatTime12(eventDetails.startTime), " - ", formatTime12(eventDetails.endTime)] })] })] })] })] }), formData.participants && formData.participants.length > 0 && (jsxRuntime.jsxs("div", { className: "print-booking-card", style: {
+                                border: `1px solid var(--bw-border-color)`,
+                                borderRadius: "var(--bw-border-radius)",
+                                padding: "var(--bw-spacing)",
+                                marginBottom: "var(--bw-spacing-large)",
+                            }, children: [jsxRuntime.jsx("div", { className: "print-hidden", style: { marginBottom: "var(--bw-spacing)" }, children: jsxRuntime.jsxs("h3", { style: {
+                                            fontSize: "var(--bw-font-size-large)",
+                                            fontWeight: "600",
+                                            color: "var(--bw-text-color)",
+                                            margin: "0",
                                             fontFamily: "var(--bw-font-family)",
-                                        }, children: [participant.age, " Jahre"] }))] }, index))) })] })), jsxRuntime.jsxs("div", { style: {
-                        backgroundColor: "var(--bw-surface-color)",
-                        border: `1px solid var(--bw-border-color)`,
-                        borderRadius: "var(--bw-border-radius)",
-                        padding: "var(--bw-spacing)",
-                        marginBottom: "var(--bw-spacing-large)",
-                    }, children: [jsxRuntime.jsx("h3", { style: {
-                                fontSize: "var(--bw-font-size-large)",
-                                fontWeight: "600",
-                                color: "var(--bw-text-color)",
-                                margin: "0 0 var(--bw-spacing) 0",
-                                fontFamily: "var(--bw-font-family)",
-                            }, children: "Kontaktdaten" }), jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-small)" }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Name:" }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerName })] }), jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "E-Mail:" }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerEmail })] }), formData.customerPhone && (jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Telefon:" }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerPhone })] }))] })] }), jsxRuntime.jsxs("div", { style: {
-                        backgroundColor: "var(--bw-surface-muted-bg, rgba(59, 130, 246, 0.05))",
-                        border: `1px solid var(--bw-border-color)`,
-                        borderRadius: "var(--bw-border-radius)",
-                        padding: "var(--bw-spacing)",
-                        marginBottom: "var(--bw-spacing-large)",
-                        textAlign: "center",
-                    }, children: [jsxRuntime.jsx("div", { style: {
-                                color: "var(--bw-highlight-color)",
-                                fontSize: "24px",
-                                marginBottom: "var(--bw-spacing-small)",
-                            }, children: "\uD83D\uDCE7" }), jsxRuntime.jsxs("p", { style: {
-                                color: "var(--bw-text-muted)",
-                                margin: 0,
-                                fontFamily: "var(--bw-font-family)",
-                                fontSize: "var(--bw-font-size-small)",
-                            }, children: ["Eine Best\u00E4tigungs-E-Mail wird in K\u00FCrze an ", formData.customerEmail, " gesendet."] })] }), jsxRuntime.jsx("div", { style: { textAlign: "center" }, children: jsxRuntime.jsx("button", { onClick: onClose, style: {
-                            backgroundColor: "var(--bw-highlight-color)",
-                            color: "white",
-                            padding: "12px 32px",
-                            border: "none",
-                            borderRadius: "var(--bw-border-radius)",
-                            fontSize: "var(--bw-font-size)",
-                            fontWeight: "600",
-                            cursor: "pointer",
-                            fontFamily: "var(--bw-font-family)",
-                            transition: "all 0.2s ease",
-                        }, onMouseEnter: (e) => {
-                            e.currentTarget.style.opacity = "0.9";
-                        }, onMouseLeave: (e) => {
-                            e.currentTarget.style.opacity = "1";
-                        }, children: "Schlie\u00DFen" }) })] }) }));
+                                        }, children: ["Teilnehmer (", formData.participants.length, ")"] }) }), jsxRuntime.jsx("div", { className: "print-only", children: jsxRuntime.jsxs("div", { className: "print-section-title", children: ["Teilnehmer (", formData.participants.length, ")"] }) }), jsxRuntime.jsx("div", { className: "print-only:p-0", children: jsxRuntime.jsx("div", { className: "space-y-3 print-only:space-y-1", style: {
+                                            display: "flex",
+                                            flexDirection: "column",
+                                            gap: "var(--bw-spacing-small)",
+                                        }, children: formData.participants
+                                            .filter((p) => p.name.trim())
+                                            .map((participant, index) => (jsxRuntime.jsx("div", { className: "flex justify-between items-center bg-muted p-3 rounded-lg print-participant", style: {
+                                                display: "flex",
+                                                justifyContent: "space-between",
+                                                alignItems: "center",
+                                                backgroundColor: "var(--bw-surface-color, #f9fafb)",
+                                                padding: "var(--bw-spacing-small)",
+                                                borderRadius: "var(--bw-border-radius-small)",
+                                            }, children: jsxRuntime.jsxs("div", { className: "print-participant-info", children: [jsxRuntime.jsx("div", { className: "print-participant-name", style: {
+                                                            color: "var(--bw-text-color)",
+                                                            fontFamily: "var(--bw-font-family)",
+                                                        }, children: participant.name }), participant.age && (jsxRuntime.jsxs("div", { className: "text-muted-foreground text-sm print-participant-age", style: {
+                                                            color: "var(--bw-text-muted)",
+                                                            fontSize: "var(--bw-font-size-small)",
+                                                            fontFamily: "var(--bw-font-family)",
+                                                        }, children: [participant.age, " Jahre"] }))] }) }, index))) }) })] })), jsxRuntime.jsxs("div", { className: "print-booking-card", style: {
+                                backgroundColor: "var(--bw-surface-color)",
+                                border: `1px solid var(--bw-border-color)`,
+                                borderRadius: "var(--bw-border-radius)",
+                                padding: "var(--bw-spacing)",
+                                marginBottom: "var(--bw-spacing-large)",
+                            }, children: [jsxRuntime.jsx("div", { className: "print-hidden", style: { marginBottom: "var(--bw-spacing)" }, children: jsxRuntime.jsx("h3", { style: {
+                                            fontSize: "var(--bw-font-size-large)",
+                                            fontWeight: "600",
+                                            color: "var(--bw-text-color)",
+                                            margin: "0",
+                                            fontFamily: "var(--bw-font-family)",
+                                        }, children: "Zahlungs\u00FCbersicht" }) }), jsxRuntime.jsx("div", { className: "print-only", children: jsxRuntime.jsx("div", { className: "print-section-title", children: "Zahlungs\u00FCbersicht" }) }), jsxRuntime.jsxs("div", { className: "space-y-2 print-only:p-0 print-only:space-y-1", children: [jsxRuntime.jsxs("div", { className: "print-payment-summary print-only", children: [jsxRuntime.jsxs("div", { className: "print-payment-row", children: [jsxRuntime.jsx("span", { children: "Gesamtbetrag" }), jsxRuntime.jsx("span", { children: formatCurrency(booking.total) })] }), jsxRuntime.jsxs("div", { className: "print-payment-row", children: [jsxRuntime.jsx("span", { children: "Bezahlt" }), jsxRuntime.jsx("span", { children: formatCurrency(booking.total) })] })] }), jsxRuntime.jsxs("div", { className: "print-hidden space-y-2", style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-small)" }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: "Gesamtbetrag" }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(booking.total) })] }), jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: "Bezahlt" }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(booking.total) })] })] })] })] }), jsxRuntime.jsxs("div", { className: "print-booking-card", style: {
+                                backgroundColor: "var(--bw-surface-color)",
+                                border: `1px solid var(--bw-border-color)`,
+                                borderRadius: "var(--bw-border-radius)",
+                                padding: "var(--bw-spacing)",
+                                marginBottom: "var(--bw-spacing-large)",
+                            }, children: [jsxRuntime.jsx("div", { className: "print-hidden", style: { marginBottom: "var(--bw-spacing)" }, children: jsxRuntime.jsx("h3", { style: {
+                                            fontSize: "var(--bw-font-size-large)",
+                                            fontWeight: "600",
+                                            color: "var(--bw-text-color)",
+                                            margin: "0",
+                                            fontFamily: "var(--bw-font-family)",
+                                        }, children: "Kontaktdaten" }) }), jsxRuntime.jsx("div", { className: "print-only", children: jsxRuntime.jsx("div", { className: "print-section-title", children: "Kontaktdaten" }) }), jsxRuntime.jsxs("div", { className: "space-y-2 print-only:p-0 print-only:space-y-1", style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-small)" }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Name:" }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerName })] }), jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "E-Mail:" }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerEmail })] }), formData.customerPhone && (jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Telefon:" }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerPhone })] }))] })] }), jsxRuntime.jsx("div", { className: "print-booking-card", style: {
+                                backgroundColor: "var(--bw-surface-color)",
+                                border: `1px solid var(--bw-border-color)`,
+                                borderRadius: "var(--bw-border-radius)",
+                                padding: "var(--bw-spacing)",
+                                marginBottom: "var(--bw-spacing-large)",
+                                textAlign: "center",
+                            }, children: jsxRuntime.jsxs("p", { style: {
+                                    color: "var(--bw-text-muted)",
+                                    margin: 0,
+                                    fontFamily: "var(--bw-font-family)",
+                                    fontSize: "var(--bw-font-size-small)",
+                                    textAlign: "center",
+                                }, children: ["Eine Best\u00E4tigungs-E-Mail wird in K\u00FCrze an ", formData.customerEmail, " gesendet."] }) }), paymentStatus && paymentStatus !== "succeeded" && (jsxRuntime.jsxs("div", { style: {
+                                backgroundColor: "var(--bw-warning-bg, #FEF3C7)",
+                                border: "1px solid var(--bw-warning-border, #F59E0B)",
+                                borderRadius: "var(--bw-border-radius)",
+                                padding: "var(--bw-spacing)",
+                                marginBottom: "var(--bw-spacing-large)",
+                                textAlign: "center",
+                            }, children: [jsxRuntime.jsx("p", { style: {
+                                        color: "var(--bw-warning-text, #92400E)",
+                                        margin: "0 0 var(--bw-spacing) 0",
+                                        fontFamily: "var(--bw-font-family)",
+                                        fontWeight: "600",
+                                    }, children: "Zahlung wird noch verarbeitet" }), jsxRuntime.jsxs("p", { style: {
+                                        color: "var(--bw-warning-text, #92400E)",
+                                        margin: "0 0 var(--bw-spacing) 0",
+                                        fontFamily: "var(--bw-font-family)",
+                                        fontSize: "var(--bw-font-size-small)",
+                                    }, children: ["Status: ", paymentStatus] }), jsxRuntime.jsx("button", { onClick: () => fetchBookingData(), disabled: isLoading, style: {
+                                        backgroundColor: "var(--bw-warning-text, #92400E)",
+                                        color: "white",
+                                        padding: "8px 16px",
+                                        border: "none",
+                                        borderRadius: "var(--bw-border-radius)",
+                                        fontSize: "var(--bw-font-size-small)",
+                                        fontWeight: "600",
+                                        cursor: isLoading ? "not-allowed" : "pointer",
+                                        fontFamily: "var(--bw-font-family)",
+                                        opacity: isLoading ? 0.6 : 1,
+                                        transition: "all 0.2s ease",
+                                    }, children: isLoading ? "Aktualisiere..." : "Status aktualisieren" })] })), jsxRuntime.jsx("div", { style: {
+                                textAlign: "center",
+                                marginTop: "var(--bw-spacing-large)",
+                                paddingTop: "var(--bw-spacing)",
+                                borderTop: `1px solid var(--bw-border-color)`,
+                            }, children: jsxRuntime.jsx("button", { onClick: onClose, style: {
+                                    backgroundColor: "var(--bw-highlight-color)",
+                                    color: "white",
+                                    padding: "12px 32px",
+                                    border: "none",
+                                    borderRadius: "var(--bw-border-radius)",
+                                    fontSize: "var(--bw-font-size)",
+                                    fontWeight: "600",
+                                    cursor: "pointer",
+                                    fontFamily: "var(--bw-font-family)",
+                                    transition: "all 0.2s ease",
+                                }, onMouseEnter: (e) => {
+                                    e.currentTarget.style.opacity = "0.9";
+                                }, onMouseLeave: (e) => {
+                                    e.currentTarget.style.opacity = "1";
+                                }, children: "Schlie\u00DFen" }) }), jsxRuntime.jsxs("div", { className: "print-only print-footer", children: [jsxRuntime.jsxs("p", { children: ["Diese Buchungsbest\u00E4tigung wurde am", " ", new Date().toLocaleString("de-DE", {
+                                            day: "2-digit",
+                                            month: "2-digit",
+                                            year: "numeric",
+                                            hour: "2-digit",
+                                            minute: "2-digit",
+                                            timeZone: "Europe/Berlin",
+                                        }), " ", "erstellt."] }), jsxRuntime.jsx("p", { children: "Bei Fragen zu deiner Buchung kontaktiere uns gerne." })] })] })] }) }));
 };
 
 const months = [
@@ -11547,7 +11673,7 @@ function UniversalBookingWidget({ config: baseConfig }) {
     const [isLoadingShowAll, setIsLoadingShowAll] = React__default.useState(false); // For "show all events" operation
     const [error, setError] = React__default.useState(null);
     const [isSuccess, setIsSuccess] = React__default.useState(false);
-    const [successData, setSuccessData] = React__default.useState(null);
+    const [successPaymentIntentId, setSuccessPaymentIntentId] = React__default.useState(null);
     const [systemConfig, setSystemConfig] = React__default.useState(null);
     // PERFORMANCE OPTIMIZATION: Lazy component loading
     const [shouldRenderInstanceSelection, setShouldRenderInstanceSelection] = React__default.useState(false);
@@ -11594,6 +11720,29 @@ function UniversalBookingWidget({ config: baseConfig }) {
         initializeWidget();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [config]);
+    // Handle Stripe payment return
+    React__default.useEffect(() => {
+        const handleStripeReturn = () => {
+            const stripeReturn = detectStripeReturn();
+            if (stripeReturn) {
+                if (stripeReturn.redirectStatus === "succeeded") {
+                    // Store payment intent ID and show success modal
+                    setSuccessPaymentIntentId(stripeReturn.paymentIntent);
+                    setIsSuccess(true);
+                }
+                else if (stripeReturn.redirectStatus === "failed") {
+                    setError("Die Zahlung war nicht erfolgreich. Bitte versuche es erneut.");
+                }
+                else {
+                    setError("Die Zahlung konnte nicht abgeschlossen werden. Bitte versuche es erneut.");
+                }
+            }
+        };
+        // Only run on mount to avoid running multiple times
+        if (!isLoading) {
+            handleStripeReturn();
+        }
+    }, [isLoading]); // Only depend on isLoading to run after initial load
     // PERFORMANCE OPTIMIZATION: Lazy load components when needed
     React__default.useEffect(() => {
         if (currentStep === "eventInstances" && !shouldRenderInstanceSelection) {
@@ -11836,7 +11985,7 @@ function UniversalBookingWidget({ config: baseConfig }) {
     };
     const handleBookingSuccess = (result) => {
         setIsSuccess(true);
-        setSuccessData(result);
+        setSuccessPaymentIntentId(result.paymentIntent.id);
         config.onSuccess?.(result);
     };
     const handleBookingError = (errorMessage) => {
@@ -12019,10 +12168,18 @@ function UniversalBookingWidget({ config: baseConfig }) {
                         setIsSuccess(false);
                         setCurrentStep("eventTypes");
                         setShowingPreview(true);
+                        // Reset state
+                        setSuccessPaymentIntentId(null);
                         // Reset lazy loading flags
                         setShouldRenderInstanceSelection(false);
                         setShouldRenderBookingForm(false);
-                    }, bookingData: successData, eventDetails: eventDetails, formData: successData?.formData, config: config })] }));
+                        // Clean up URL to remove Stripe parameters
+                        const url = new URL(window.location.href);
+                        url.searchParams.delete("payment_intent");
+                        url.searchParams.delete("payment_intent_client_secret");
+                        url.searchParams.delete("redirect_status");
+                        window.history.replaceState({}, "", url.toString());
+                    }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }));
     }
     if (viewMode === "next-events" && !showingPreview && currentStep === "eventInstances") {
         // Show all events for the single event type
@@ -12036,10 +12193,18 @@ function UniversalBookingWidget({ config: baseConfig }) {
                         setIsSuccess(false);
                         setCurrentStep("eventTypes");
                         setShowingPreview(true);
+                        // Reset state
+                        setSuccessPaymentIntentId(null);
                         // Reset lazy loading flags
                         setShouldRenderInstanceSelection(false);
                         setShouldRenderBookingForm(false);
-                    }, bookingData: successData, eventDetails: eventDetails, formData: successData?.formData, config: config })] }));
+                        // Clean up URL to remove Stripe parameters
+                        const url = new URL(window.location.href);
+                        url.searchParams.delete("payment_intent");
+                        url.searchParams.delete("payment_intent_client_secret");
+                        url.searchParams.delete("redirect_status");
+                        window.history.replaceState({}, "", url.toString());
+                    }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }));
     }
     if (viewMode === "button" && (isSingleEventTypeMode || isDirectInstanceMode)) {
         // Button mode - show button that opens sidebar/booking directly
@@ -12073,10 +12238,18 @@ function UniversalBookingWidget({ config: baseConfig }) {
                             setIsSuccess(false);
                             setCurrentStep("eventTypes");
                             setSidebarOpen(false);
+                            // Reset state
+                            setSuccessPaymentIntentId(null);
                             // Reset lazy loading flags
                             setShouldRenderInstanceSelection(false);
                             setShouldRenderBookingForm(false);
-                        }, bookingData: successData, eventDetails: eventDetails, formData: successData?.formData, config: config })] }) }));
+                            // Clean up URL to remove Stripe parameters
+                            const url = new URL(window.location.href);
+                            url.searchParams.delete("payment_intent");
+                            url.searchParams.delete("payment_intent_client_secret");
+                            url.searchParams.delete("redirect_status");
+                            window.history.replaceState({}, "", url.toString());
+                        }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }) }));
     }
     // Cards mode (default) - show event type selection
     const cardsView = (jsxRuntime.jsx(EventTypeSelection, { eventTypes: eventTypes, onEventTypeSelect: handleEventTypeSelect, isLoading: isLoading, skeletonCount: getSkeletonCount() }));
@@ -12112,10 +12285,18 @@ function UniversalBookingWidget({ config: baseConfig }) {
     return (jsxRuntime.jsxs(StyleProvider, { config: config, children: [cardsView, shouldRenderInstanceSelection && (jsxRuntime.jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderBookingForm && eventDetails && (jsxRuntime.jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: backHandlers.onBackToEventInstances, onBackToEventTypes: backHandlers.onBackToEventTypes, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: backHandlers.onClose, systemConfig: systemConfig })), jsxRuntime.jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
                     setIsSuccess(false);
                     setCurrentStep("eventTypes");
+                    // Reset state
+                    setSuccessPaymentIntentId(null);
                     // Reset lazy loading flags
                     setShouldRenderInstanceSelection(false);
                     setShouldRenderBookingForm(false);
-                }, bookingData: successData, eventDetails: eventDetails, formData: successData?.formData, config: config })] }));
+                    // Clean up URL to remove Stripe parameters
+                    const url = new URL(window.location.href);
+                    url.searchParams.delete("payment_intent");
+                    url.searchParams.delete("payment_intent_client_secret");
+                    url.searchParams.delete("redirect_status");
+                    window.history.replaceState({}, "", url.toString());
+                }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }));
 }
 
 // Export init function for vanilla JS usage