@bigz-app/booking-widget 0.1.21 → 0.1.23

package/dist/index.esm.js

@@ -6984,17 +6984,18 @@ function EventTypeDetailsDialog({ isOpen, onClose, eventType, onEventTypeSelect,
                                         backgroundColor: "var(--bw-background-color)",
                                         borderRadius: "var(--bw-border-radius)",
                                         border: `1px solid var(--bw-border-color)`,
-                                    }, children: [jsxs("div", { children: [jsx("div", { style: {
-                                                        fontSize: "14px",
-                                                        color: "var(--bw-text-muted)",
+                                    }, children: [jsxs("div", { children: [jsx("div", { className: "bw-event-type-price", style: {
+                                                        fontWeight: "700",
+                                                        color: "var(--bw-text-color)",
                                                         fontFamily: "var(--bw-font-family)",
-                                                        marginBottom: "4px",
-                                                    }, children: "Preis ab" }), jsx("div", { style: {
-                                                        fontSize: "32px",
+                                                        textAlign: "left",
+                                                    }, children: eventType.groupedDurations && jsx("span", { children: eventType.groupedDurations }) }), jsx("div", { className: "bw-event-type-price", style: {
+                                                        fontSize: "clamp(1.72rem, 4vw, 32px)",
                                                         fontWeight: "700",
                                                         color: "var(--bw-text-color)",
                                                         fontFamily: "var(--bw-font-family)",
-                                                    }, children: formatCurrency(eventType.basePrice) })] }), isAvailable && (jsxs("button", { onClick: handleBookingClick, style: {
+                                                        textAlign: "right",
+                                                    }, children: jsxs("span", { children: ["ab ", formatCurrency(eventType.minPrice)] }) })] }), isAvailable && (jsxs("button", { onClick: handleBookingClick, style: {
                                                 backgroundColor: "var(--bw-highlight-color)",
                                                 color: "white",
                                                 padding: "14px 28px",
@@ -7569,10 +7570,10 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, isLoading = false,
                                 e.currentTarget.style.color = "var(--bw-highlight-color)";
                                 e.currentTarget.style.transform = "translateY(0)";
                             }, children: [jsx("span", { style: { fontSize: "16px" }, children: "\uD83D\uDD04" }), "Seite neu laden"] })] }) })) : (jsx("div", { className: "bw-event-type-list", style: { padding: "0px 0px" }, children: jsx("div", { style: {
-                        display: "flex",
-                        flexWrap: "wrap",
-                        justifyContent: "center",
+                        display: "grid",
+                        gridTemplateColumns: "repeat(auto-fill, minmax(350px, 1fr))",
                         gap: "24px",
+                        gridAutoRows: "1fr",
                     }, children: eventTypes.map((eventType) => {
                         const isAvailable = eventType.hasAvailableInstances;
                         return (jsxs("div", { className: "bw-event-type-card", style: {
@@ -7580,16 +7581,11 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, isLoading = false,
                                 backgroundColor: "var(--bw-surface-color)",
                                 border: `1px solid var(--bw-border-color)`,
                                 borderRadius: "var(--bw-border-radius)",
-                                overflow: "hidden",
                                 transition: "all 0.3s ease",
                                 cursor: isAvailable ? "pointer" : "not-allowed",
                                 opacity: isAvailable ? 1 : 0.6,
                                 boxShadow: "var(--bw-shadow-md)",
                                 fontFamily: "var(--bw-font-family)",
-                                maxWidth: "500px",
-                                flex: "1 1 350px",
-                                display: "flex",
-                                flexDirection: "column",
                             }, onClick: () => isAvailable && onEventTypeSelect(eventType), onMouseEnter: (e) => {
                                 if (isAvailable) {
                                     e.currentTarget.style.boxShadow = "var(--bw-shadow-lg)";
@@ -7616,7 +7612,12 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, isLoading = false,
                                             padding: "3px 8px",
                                             borderRadius: "var(--bw-border-radius)",
                                             fontFamily: "var(--bw-font-family)",
-                                        }, children: eventType.category.name }) }), jsx("div", { className: "bw-event-type-img", style: { position: "relative", width: "100%", height: "300px" }, children: jsx(ImageCarousel, { images: eventType.images, eventName: eventType.name }) }), jsxs("div", { className: "bw-event-type-content", style: { padding: "12px 18px" }, children: [jsx("h2", { className: "bw-event-type-title", style: {
+                                        }, children: eventType.category.name }) }), jsx("div", { className: "bw-event-type-img", style: { position: "relative", width: "100%", height: "300px" }, children: jsx(ImageCarousel, { images: eventType.images, eventName: eventType.name }) }), jsxs("div", { className: "bw-event-type-content", style: {
+                                        padding: "12px 18px",
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        justifyContent: "space-between",
+                                    }, children: [jsx("h2", { className: "bw-event-type-title", style: {
                                                 fontSize: "clamp(1.1rem, 2.5vw, 24px)",
                                                 fontWeight: "700",
                                                 color: "var(--bw-text-color)",
@@ -7669,9 +7670,7 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, isLoading = false,
                                                                     overflow: "hidden",
                                                                     whiteSpace: "nowrap",
                                                                     flex: "1",
-                                                                }, children: highlight.trim() })] }, index))) }) })) : (
-                                            // Fallback to description with React Markdown
-                                            eventType.description && (jsx("div", { className: "bw-event-type-desc", style: {
+                                                                }, children: highlight.trim() })] }, index))) }) })) : eventType.description ? (jsx("div", { className: "bw-event-type-desc", style: {
                                                     color: "var(--bw-text-muted)",
                                                     fontSize: "clamp(0.95rem, 2vw, 16px)",
                                                     lineHeight: "1.6",
@@ -7688,13 +7687,30 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, isLoading = false,
                                                         overflow: "hidden",
                                                     }, children: Markdown({
                                                         children: preprocessMarkdown(eventType.description),
-                                                    }) }) }))) }), jsxs("div", { children: [jsx("div", { className: "bw-event-type-price", style: {
+                                                    }) }) })) : (jsx("div", { className: "bw-event-type-desc", style: {
+                                                    color: "var(--bw-text-muted)",
+                                                    fontSize: "clamp(0.95rem, 2vw, 16px)",
+                                                    lineHeight: "1.6",
+                                                    fontFamily: "var(--bw-font-family)",
+                                                    margin: "10px 0 10px 0",
+                                                    minHeight: "128px",
+                                                    maxHeight: "128px",
+                                                    overflow: "hidden",
+                                                    textAlign: "left",
+                                                }, children: "\u00A0" })) }), jsxs("div", { children: [jsx("div", { className: "bw-event-type-price", style: {
+                                                        fontWeight: "700",
+                                                        color: "var(--bw-text-color)",
+                                                        fontFamily: "var(--bw-font-family)",
+                                                        textAlign: "right",
+                                                    }, children: eventType.groupedDurations.length > 1 ? (jsx("span", { children: eventType.groupedDurations })) : (jsx("span", { children: eventType.cheapestDurationPerDay % 60 === 0
+                                                            ? `${eventType.cheapestDurationPerDay / 60} Stunde${eventType.cheapestDurationPerDay / 60 > 1 ? "n" : ""}`
+                                                            : `${eventType.cheapestDurationPerDay} Minuten` })) }), jsx("div", { className: "bw-event-type-price", style: {
                                                         fontSize: "clamp(1.72rem, 4vw, 32px)",
                                                         fontWeight: "700",
                                                         color: "var(--bw-text-color)",
                                                         fontFamily: "var(--bw-font-family)",
                                                         textAlign: "right",
-                                                    }, children: formatCurrency(eventType.basePrice) }), " "] }), jsxs("div", { style: {
+                                                    }, children: jsxs("span", { children: ["ab ", formatCurrency(eventType.minPrice)] }) })] }), jsxs("div", { style: {
                                                 display: "flex",
                                                 justifyContent: "flex-end",
                                                 alignItems: "center",
@@ -9094,14 +9110,39 @@ function PaymentFormInner({ config, eventDetails, formData, totalAmount, discoun
                 return;
             }
             // First, confirm the payment with Stripe
+            const confirmParams = {
+                return_url: "https://bigz.surfschule-zingst.de/booking/success",
+            };
+            // 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: {
-                    return_url: window.location.href,
-                },
+                confirmParams,
                 redirect: "if_required",
             });
             if (error) {
+                console.error("[PAYMENT_FORM] Payment confirmation error:", {
+                    type: error.type,
+                    code: error.code,
+                    message: error.message,
+                    decline_code: error.decline_code,
+                    payment_intent: error.payment_intent,
+                });
                 if (error.type === "card_error" || error.type === "validation_error") {
                     setPaymentError(error.message || "Zahlungsfehler");
                 }
@@ -9298,16 +9339,41 @@ function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode
                 const endpoint = isConnectMode
                     ? "/booking/create-payment-intent"
                     : "/booking-proxy/create-payment-intent";
-                // Build request data
+                // Build request data with validation
                 const requestData = {
                     eventInstanceId: config.eventInstanceId || eventDetails.id,
                     organizationId: config.organizationId, // Required for payment intent creation
-                    amount: totalAmount,
+                    amount: Math.round(totalAmount), // Ensure integer (should already be in cents)
                     currency: "eur",
-                    participants: formData.participants.filter((p) => p.name.trim()),
+                    participants: formData.participants.filter((p) => p.name?.trim()),
                     discountCode: discountCode?.code,
-                    customerEmail: formData.customerEmail,
+                    customerEmail: formData.customerEmail?.trim(),
                 };
+                // Validate required fields
+                if (!requestData.eventInstanceId) {
+                    throw new Error("Event instance ID is required");
+                }
+                if (!requestData.organizationId) {
+                    throw new Error("Organization ID is required");
+                }
+                if (!requestData.amount || requestData.amount <= 0) {
+                    throw new Error("Valid amount is required");
+                }
+                if (!requestData.participants || requestData.participants.length === 0) {
+                    throw new Error("At least one participant is required");
+                }
+                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
@@ -9323,14 +9389,25 @@ function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode
                 });
                 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);
                 }
                 else {
+                    console.error("[PAYMENT_FORM] Payment intent creation failed:", {
+                        status: response.status,
+                        error: data.error,
+                        details: data.details,
+                        requestData: { ...requestData, customerEmail: "[redacted]" },
+                    });
                     setPaymentError(data.error || "Fehler beim Erstellen der Zahlungsabsicht");
                 }
             }
             catch (err) {
-                setPaymentError("Fehler beim Erstellen der Zahlungsabsicht");
+                console.error("[PAYMENT_FORM] Payment intent creation error:", err);
+                setPaymentError(err.message || "Fehler beim Erstellen der Zahlungsabsicht");
             }
             finally {
                 setIsCreatingPaymentIntent(false);
@@ -11593,6 +11670,25 @@ function UniversalBookingWidget({ config: baseConfig }) {
                 if (data.connectedAccountId) {
                     stripeOptions.stripeAccount = data.connectedAccountId;
                 }
+                // Add options to prevent sandbox warnings in vanilla JS environments
+                if (typeof window !== "undefined" && window.document) {
+                    // Check if we're in a potential iframe or restricted environment
+                    try {
+                        // Test if we can access parent window (this will throw in sandbox)
+                        const hasParentAccess = window.parent === window || window.parent.location.href;
+                        // Add apiVersion to ensure compatibility
+                        stripeOptions.apiVersion = "2025-02-24.acacia";
+                        // For vanilla JS builds, explicitly set betas to empty array to avoid issues
+                        if (!stripeOptions.betas) {
+                            stripeOptions.betas = [];
+                        }
+                    }
+                    catch (e) {
+                        // We're likely in a sandboxed environment, add specific options
+                        console.warn("[WIDGET] Detected restricted environment, adjusting Stripe options");
+                        stripeOptions.betas = [];
+                    }
+                }
                 setStripePromise(loadStripe(data.stripePublishableKey, stripeOptions));
             }
             // If only one instance, skip to booking
@@ -11634,6 +11730,25 @@ function UniversalBookingWidget({ config: baseConfig }) {
                     if (data.connectedAccountId) {
                         stripeOptions.stripeAccount = data.connectedAccountId;
                     }
+                    // Add options to prevent sandbox warnings in vanilla JS environments
+                    if (typeof window !== "undefined" && window.document) {
+                        // Check if we're in a potential iframe or restricted environment
+                        try {
+                            // Test if we can access parent window (this will throw in sandbox)
+                            const hasParentAccess = window.parent === window || window.parent.location.href;
+                            // Add apiVersion to ensure compatibility
+                            stripeOptions.apiVersion = "2025-02-24.acacia";
+                            // For vanilla JS builds, explicitly set betas to empty array to avoid issues
+                            if (!stripeOptions.betas) {
+                                stripeOptions.betas = [];
+                            }
+                        }
+                        catch (e) {
+                            // We're likely in a sandboxed environment, add specific options
+                            console.warn("[WIDGET] Detected restricted environment, adjusting Stripe options");
+                            stripeOptions.betas = [];
+                        }
+                    }
                     setStripePromise(loadStripe(data.stripePublishableKey, stripeOptions));
                 }
             }