@bigz-app/booking-widget 0.1.21 → 0.1.23

package/dist/booking-widget.js

@@ -7042,17 +7042,18 @@
                                           backgroundColor: "var(--bw-background-color)",
                                           borderRadius: "var(--bw-border-radius)",
                                           border: `1px solid var(--bw-border-color)`,
-                                      }, children: [u$2("div", { children: [u$2("div", { style: {
-                                                          fontSize: "14px",
-                                                          color: "var(--bw-text-muted)",
+                                      }, children: [u$2("div", { children: [u$2("div", { className: "bw-event-type-price", style: {
+                                                          fontWeight: "700",
+                                                          color: "var(--bw-text-color)",
                                                           fontFamily: "var(--bw-font-family)",
-                                                          marginBottom: "4px",
-                                                      }, children: "Preis ab" }), u$2("div", { style: {
-                                                          fontSize: "32px",
+                                                          textAlign: "left",
+                                                      }, children: eventType.groupedDurations && u$2("span", { children: eventType.groupedDurations }) }), u$2("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 && (u$2("button", { onClick: handleBookingClick, style: {
+                                                          textAlign: "right",
+                                                      }, children: u$2("span", { children: ["ab ", formatCurrency(eventType.minPrice)] }) })] }), isAvailable && (u$2("button", { onClick: handleBookingClick, style: {
                                                   backgroundColor: "var(--bw-highlight-color)",
                                                   color: "white",
                                                   padding: "14px 28px",
@@ -7627,10 +7628,10 @@
                                   e.currentTarget.style.color = "var(--bw-highlight-color)";
                                   e.currentTarget.style.transform = "translateY(0)";
                               }, children: [u$2("span", { style: { fontSize: "16px" }, children: "\uD83D\uDD04" }), "Seite neu laden"] })] }) })) : (u$2("div", { className: "bw-event-type-list", style: { padding: "0px 0px" }, children: u$2("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 (u$2("div", { className: "bw-event-type-card", style: {
@@ -7638,16 +7639,11 @@
                                   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)";
@@ -7674,7 +7670,12 @@
                                               padding: "3px 8px",
                                               borderRadius: "var(--bw-border-radius)",
                                               fontFamily: "var(--bw-font-family)",
-                                          }, children: eventType.category.name }) }), u$2("div", { className: "bw-event-type-img", style: { position: "relative", width: "100%", height: "300px" }, children: u$2(ImageCarousel, { images: eventType.images, eventName: eventType.name }) }), u$2("div", { className: "bw-event-type-content", style: { padding: "12px 18px" }, children: [u$2("h2", { className: "bw-event-type-title", style: {
+                                          }, children: eventType.category.name }) }), u$2("div", { className: "bw-event-type-img", style: { position: "relative", width: "100%", height: "300px" }, children: u$2(ImageCarousel, { images: eventType.images, eventName: eventType.name }) }), u$2("div", { className: "bw-event-type-content", style: {
+                                          padding: "12px 18px",
+                                          display: "flex",
+                                          flexDirection: "column",
+                                          justifyContent: "space-between",
+                                      }, children: [u$2("h2", { className: "bw-event-type-title", style: {
                                                   fontSize: "clamp(1.1rem, 2.5vw, 24px)",
                                                   fontWeight: "700",
                                                   color: "var(--bw-text-color)",
@@ -7727,9 +7728,7 @@
                                                                       overflow: "hidden",
                                                                       whiteSpace: "nowrap",
                                                                       flex: "1",
-                                                                  }, children: highlight.trim() })] }, index))) }) })) : (
-                                              // Fallback to description with React Markdown
-                                              eventType.description && (u$2("div", { className: "bw-event-type-desc", style: {
+                                                                  }, children: highlight.trim() })] }, index))) }) })) : eventType.description ? (u$2("div", { className: "bw-event-type-desc", style: {
                                                       color: "var(--bw-text-muted)",
                                                       fontSize: "clamp(0.95rem, 2vw, 16px)",
                                                       lineHeight: "1.6",
@@ -7746,13 +7745,30 @@
                                                           overflow: "hidden",
                                                       }, children: Markdown({
                                                           children: preprocessMarkdown(eventType.description),
-                                                      }) }) }))) }), u$2("div", { children: [u$2("div", { className: "bw-event-type-price", style: {
+                                                      }) }) })) : (u$2("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" })) }), u$2("div", { children: [u$2("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 ? (u$2("span", { children: eventType.groupedDurations })) : (u$2("span", { children: eventType.cheapestDurationPerDay % 60 === 0
+                                                              ? `${eventType.cheapestDurationPerDay / 60} Stunde${eventType.cheapestDurationPerDay / 60 > 1 ? "n" : ""}`
+                                                              : `${eventType.cheapestDurationPerDay} Minuten` })) }), u$2("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) }), " "] }), u$2("div", { style: {
+                                                      }, children: u$2("span", { children: ["ab ", formatCurrency(eventType.minPrice)] }) })] }), u$2("div", { style: {
                                                   display: "flex",
                                                   justifyContent: "flex-end",
                                                   alignItems: "center",
@@ -9179,14 +9195,39 @@
                   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");
                   }
@@ -9383,16 +9424,41 @@
                   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
@@ -9408,14 +9474,25 @@
                   });
                   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);
@@ -11678,6 +11755,25 @@
                   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
@@ -11719,6 +11815,25 @@
                       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));
                   }
               }