@uptrademedia/site-kit 1.0.35 → 1.0.37

package/dist/{chunk-CNPLYTFZ.mjs → chunk-35ZB446O.mjs}

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React5, { useState, useEffect, useMemo, useCallback } from 'react';
+import React5, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
 
 // src/commerce/utils.ts
 function formatPrice(amount, currency = "USD") {
@@ -248,6 +248,24 @@ async function registerForEvent(eventId, scheduleId, customer) {
     return { success: false, error: "Network error. Please try again." };
   }
 }
+async function fetchProcessorConfig() {
+  const { apiUrl, apiKey } = getApiConfig();
+  if (!apiKey) return null;
+  try {
+    const response = await fetch(`${apiUrl}/api/public/commerce/processor-config`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": apiKey
+      },
+      body: JSON.stringify({})
+    });
+    if (!response.ok) return null;
+    return await response.json();
+  } catch {
+    return null;
+  }
+}
 async function createCheckoutSession(optionsOrOfferingId, legacyOptions) {
   const { apiUrl, apiKey } = getApiConfig();
   const options = typeof optionsOrOfferingId === "string" ? { offeringId: optionsOrOfferingId, ...legacyOptions } : optionsOrOfferingId;
@@ -268,8 +286,17 @@ async function createCheckoutSession(optionsOrOfferingId, legacyOptions) {
       })
     });
     if (!response.ok) {
-      const error = await response.json();
-      return { success: false, error: error.message || "Checkout failed" };
+      const text = await response.text();
+      let error = {};
+      try {
+        error = JSON.parse(text);
+      } catch {
+      }
+      const message = (typeof error?.message === "string" ? error.message : null) || (typeof error?.error === "string" ? error.error : null) || "Payment could not be processed. Please try again or use a different card.";
+      if (typeof console !== "undefined" && console.error) {
+        console.error("[Commerce] Checkout failed:", response.status, message, error);
+      }
+      return { success: false, error: message };
     }
     const result = await response.json();
     return {
@@ -2805,6 +2832,17 @@ function CalendarView({
     }, children: "Loading..." })
   ] });
 }
+function loadSquareSDK(environment) {
+  return new Promise((resolve, reject) => {
+    if (typeof window === "undefined") return reject(new Error("No window"));
+    if (window.Square) return resolve();
+    const script = document.createElement("script");
+    script.src = environment === "sandbox" ? "https://sandbox.web.squarecdn.com/v1/square.js" : "https://web.squarecdn.com/v1/square.js";
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error("Failed to load Square SDK"));
+    document.head.appendChild(script);
+  });
+}
 function EventModal({
   event,
   schedule: propSchedule,
@@ -2829,13 +2867,54 @@ function EventModal({
   });
   const [additionalData, setAdditionalData] = useState({});
   const [processor, setProcessor] = useState(null);
+  const [processorConfig, setProcessorConfig] = useState(null);
+  const [squareCard, setSquareCard] = useState(null);
+  const [cardReady, setCardReady] = useState(false);
+  const cardContainerRef = useRef(null);
   const schedule = propSchedule || event?.schedules?.[0] || event?.next_schedule;
   useEffect(() => {
-    if (isOpen) {
-      fetchActiveProcessor().then((p) => {
-        if (p) setProcessor(p);
+    if (!isOpen) return;
+    fetchProcessorConfig().then(async (config) => {
+      setProcessorConfig(config);
+      if (config?.processor) setProcessor(config.processor);
+      if (config?.processor === "square" && config.squareAppId && config.squareLocationId) {
+        try {
+          await loadSquareSDK(config.squareEnvironment || "production");
+          const Square = window.Square;
+          const payments = Square.payments(config.squareAppId, config.squareLocationId);
+          const card = await payments.card({
+            style: {
+              ".input-container": {
+                borderColor: "#d1d5db",
+                borderRadius: "6px"
+              },
+              ".input-container.is-focus": {
+                borderColor: "#2563eb"
+              },
+              ".input-container.is-error": {
+                borderColor: "#dc2626"
+              }
+            }
+          });
+          await card.attach("#sq-card-container");
+          setSquareCard(card);
+          setCardReady(true);
+        } catch (err) {
+          console.error("[Commerce] Square card init failed:", err);
+        }
+      }
+    });
+    return () => {
+      setSquareCard((prev) => {
+        if (prev) {
+          prev.destroy?.().catch(() => {
+          });
+        }
+        return null;
       });
-    }
+      setCardReady(false);
+      setProcessorConfig(null);
+    };
   }, [isOpen]);
   useEffect(() => {
     if (isOpen && event) {
@@ -2897,17 +2976,34 @@ function EventModal({
           onError?.(result.error || "Registration failed");
         }
       } else {
-        const result = await createCheckoutSession(event.id, {
+        let sourceId;
+        if (squareCard && cardReady) {
+          const tokenResult = await squareCard.tokenize();
+          if (tokenResult.status !== "OK") {
+            const msg = tokenResult.errors?.[0]?.message || "Card verification failed. Please check your card details.";
+            setError(msg);
+            onError?.(msg);
+            setLoading(false);
+            return;
+          }
+          sourceId = tokenResult.token;
+        }
+        const result = await createCheckoutSession({
+          offeringId: event.id,
           scheduleId: schedule.id,
           quantity,
           customer: {
             ...customer,
             ...additionalData
           },
+          sourceId,
           successUrl: window.location.href + "?registration=success",
           cancelUrl: window.location.href
         });
-        if (result.success && result.payment_url) {
+        if (result.success && !result.payment_url) {
+          setSuccess(true);
+          onSuccess?.(result);
+        } else if (result.success && result.payment_url) {
           window.location.href = result.payment_url;
         } else {
           setError(result.error || "Checkout failed");
@@ -3231,6 +3327,30 @@ function EventModal({
                     )
                   ] }, field.name))
                 ] }),
+                !isFree && processor === "square" && /* @__PURE__ */ jsxs("div", { style: { marginTop: "1rem" }, children: [
+                  /* @__PURE__ */ jsx("label", { style: {
+                    display: "block",
+                    fontSize: "0.875rem",
+                    fontWeight: 500,
+                    color: "#374151",
+                    marginBottom: "0.375rem"
+                  }, children: "Card Details *" }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      id: "sq-card-container",
+                      ref: cardContainerRef,
+                      style: {
+                        minHeight: "42px",
+                        border: "1px solid #d1d5db",
+                        borderRadius: "6px",
+                        padding: "0.5rem 0.75rem",
+                        background: "#fff"
+                      }
+                    }
+                  ),
+                  !cardReady && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.75rem", color: "#9ca3af", marginTop: "0.25rem" }, children: "Loading card form..." })
+                ] }),
                 error && /* @__PURE__ */ jsx("div", { style: {
                   marginTop: "1rem",
                   padding: "0.75rem",
@@ -3244,7 +3364,7 @@ function EventModal({
                   "button",
                   {
                     type: "submit",
-                    disabled: loading,
+                    disabled: loading || !isFree && processor === "square" && !cardReady,
                     style: {
                       width: "100%",
                       marginTop: "1.25rem",
@@ -3253,9 +3373,9 @@ function EventModal({
                       fontWeight: 600,
                       borderRadius: "8px",
                       border: "none",
-                      background: loading ? "#93c5fd" : "#2563eb",
+                      background: loading || !isFree && processor === "square" && !cardReady ? "#93c5fd" : "#2563eb",
                       color: "white",
-                      cursor: loading ? "not-allowed" : "pointer"
+                      cursor: loading || !isFree && processor === "square" && !cardReady ? "not-allowed" : "pointer"
                     },
                     children: loading ? "Processing..." : isFree ? "Register Free" : `Pay ${formatPrice(total, event.currency)}`
                   }
@@ -3909,6 +4029,6 @@ function getApiKey() {
   return "";
 }
 
-export { CalendarView, CheckoutForm, EventCalendar, EventEmbed, EventModal, EventTile, EventsWidget, OfferingCard, OfferingList, ProductDetail, ProductEmbed, ProductGrid, ProductPage, RegistrationForm, UpcomingEvents, createCheckoutSession, fetchActiveProcessor, fetchCategories, fetchLatestOffering, fetchNextEvent, fetchOffering, fetchOfferings, fetchProductBySlug, fetchProducts, fetchProductsPublic, fetchServices, fetchUpcomingEvents, formatDate, formatDateRange, formatDateTime, formatPrice, formatTime, getOfferingUrl, getRelativeTimeUntil, getSpotsRemaining, isEventSoldOut, registerForEvent, useEventModal };
-//# sourceMappingURL=chunk-CNPLYTFZ.mjs.map
-//# sourceMappingURL=chunk-CNPLYTFZ.mjs.map
+export { CalendarView, CheckoutForm, EventCalendar, EventEmbed, EventModal, EventTile, EventsWidget, OfferingCard, OfferingList, ProductDetail, ProductEmbed, ProductGrid, ProductPage, RegistrationForm, UpcomingEvents, createCheckoutSession, fetchActiveProcessor, fetchCategories, fetchLatestOffering, fetchNextEvent, fetchOffering, fetchOfferings, fetchProcessorConfig, fetchProductBySlug, fetchProducts, fetchProductsPublic, fetchServices, fetchUpcomingEvents, formatDate, formatDateRange, formatDateTime, formatPrice, formatTime, getOfferingUrl, getRelativeTimeUntil, getSpotsRemaining, isEventSoldOut, registerForEvent, useEventModal };
+//# sourceMappingURL=chunk-35ZB446O.mjs.map
+//# sourceMappingURL=chunk-35ZB446O.mjs.map