@uptrademedia/site-kit 1.1.3 → 1.1.5

package/dist/{chunk-YZRNC2Z6.js → chunk-TGX5Q6UK.js}

@@ -112,7 +112,14 @@ async function apiPost(endpoint, body = {}) {
       body: JSON.stringify(body)
     });
     if (!response.ok) {
-      console.error(`[Commerce] API error: ${response.statusText}`);
+      const text = await response.text();
+      let body2 = null;
+      try {
+        body2 = text ? JSON.parse(text) : null;
+      } catch {
+        body2 = text;
+      }
+      console.error(`[Commerce] API error:`, response.status, response.statusText || "Unknown", body2);
       return null;
     }
     return await response.json();
@@ -141,9 +148,20 @@ async function fetchOffering(slug) {
     "/api/public/commerce/offering",
     { slug }
   );
-  return result?.offering || null;
+  if (!result) return null;
+  const offering = result.offering ?? result;
+  return offering?.id ? offering : null;
 }
 async function fetchLatestOffering(type, category) {
+  if (type === "product") {
+    const { products } = await fetchProductsPublic({
+      category,
+      limit: 1,
+      orderBy: "created_at",
+      order: "desc"
+    });
+    return products[0] || null;
+  }
   const result = await apiPost(
     "/api/public/commerce/offerings",
     {
@@ -174,7 +192,15 @@ async function fetchNextEvent(category) {
   return events[0] || null;
 }
 async function fetchProducts(options = {}) {
-  return fetchOfferings({ ...options, type: "product" });
+  const { products } = await fetchProductsPublic({
+    category: options.category,
+    limit: options.limit,
+    offset: options.offset,
+    orderBy: options.orderBy || "sort_order",
+    order: options.order || "asc",
+    search: options.search
+  });
+  return products;
 }
 async function fetchServices(options = {}) {
   return fetchOfferings({ ...options, type: "service" });
@@ -203,6 +229,37 @@ async function fetchCategories() {
   );
   return result?.categories || [];
 }
+async function fetchShippingRates(shippingAddress, offerings) {
+  const result = await apiPost(
+    "/api/public/commerce/shipping-rates",
+    {
+      shippingAddress: {
+        street1: shippingAddress.street1,
+        street2: shippingAddress.street2,
+        city: shippingAddress.city,
+        state: shippingAddress.state,
+        zip: shippingAddress.zip,
+        country: shippingAddress.country || "US"
+      },
+      offerings
+    }
+  );
+  return Array.isArray(result) ? result : [];
+}
+async function validateAddress(address) {
+  const result = await apiPost(
+    "/api/public/commerce/validate-address",
+    {
+      street1: address.street1,
+      street2: address.street2,
+      city: address.city,
+      state: address.state,
+      zip: address.zip,
+      country: address.country || "US"
+    }
+  );
+  return result || { isValid: true, messages: [] };
+}
 async function fetchActiveProcessor() {
   const { apiUrl, apiKey } = getApiConfig();
   if (!apiKey) return null;
@@ -571,8 +628,9 @@ function OfferingList({
       setError(null);
       try {
         let data;
-        if (type === "product") {
-          data = await fetchProducts({ category, limit, status });
+        if (type === "product" || Array.isArray(type) && type.includes("product")) {
+          const { products } = await fetchProductsPublic({ category, limit, orderBy: "sort_order", order: "asc" });
+          data = products;
         } else if (type === "event") {
           data = await fetchUpcomingEvents({ category, limit });
         } else {
@@ -1058,7 +1116,7 @@ function ProductEmbed({
       try {
         let data = null;
         if (mode === "specific" && slug) {
-          data = await fetchOffering(slug);
+          data = await fetchProductBySlug(slug);
         } else if (mode === "latest" || mode === "featured") {
           data = await fetchLatestOffering("product", category);
         }
@@ -1147,7 +1205,7 @@ function ProductDetail({
     async function load() {
       setLoading(true);
       try {
-        const data = await fetchOffering(slug);
+        const data = await fetchProductBySlug(slug);
         setProduct(data);
         if (data?.variants?.length) {
           const defaultVariant = data.variants.find((v) => v.is_default) || data.variants[0];
@@ -1562,6 +1620,7 @@ function ProductGrid({
   style
 }) {
   const [products, setProducts] = React5.useState(propProducts || []);
+  const [total, setTotal] = React5.useState(0);
   const [loading, setLoading] = React5.useState(!propProducts);
   const [searchQuery, setSearchQuery] = React5.useState("");
   const [selectedCategory, setSelectedCategory] = React5.useState(propCategory);
@@ -1578,19 +1637,20 @@ function ProductGrid({
   React5.useEffect(() => {
     if (propProducts) {
       setProducts(propProducts);
+      setTotal(propProducts.length);
       return;
     }
     async function load() {
       setLoading(true);
       try {
-        const data = await fetchOfferings({
-          type: "product",
+        const { products: data, total: count } = await fetchProductsPublic({
           category: selectedCategory,
           limit,
           orderBy: "created_at",
           order: "desc"
         });
         setProducts(data);
+        setTotal(count);
       } catch (e) {
         console.error("Failed to load products:", e);
       } finally {
@@ -1716,9 +1776,9 @@ function ProductGrid({
         fontSize: "0.875rem",
         color: "#6b7280"
       }, children: [
-        filteredProducts.length,
+        searchQuery ? filteredProducts.length : total,
         " product",
-        filteredProducts.length !== 1 ? "s" : ""
+        (searchQuery ? filteredProducts.length : total) !== 1 ? "s" : ""
       ] })
     ] }),
     loading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "site-kit-product-grid__grid", style: {
@@ -1817,7 +1877,7 @@ function ProductPage({
     async function load() {
       setLoading(true);
       try {
-        const data = await fetchOffering(slug);
+        const data = await fetchProductBySlug(slug);
         setProduct(data);
       } catch (e) {
         console.error("Failed to load product:", e);
@@ -1831,13 +1891,12 @@ function ProductPage({
     if (!product || !showRelatedProducts) return;
     async function loadRelated() {
       try {
-        const data = await fetchOfferings({
-          type: "product",
+        const { products } = await fetchProductsPublic({
           category: product?.category_id,
           limit: relatedProductsLimit + 1
           // Fetch one extra to exclude current
         });
-        const filtered = data.filter((p) => p.id !== product?.id).slice(0, relatedProductsLimit);
+        const filtered = products.filter((p) => p.id !== product?.id).slice(0, relatedProductsLimit);
         setRelatedProducts(filtered);
       } catch (e) {
         console.error("Failed to load related products:", e);
@@ -2093,21 +2152,62 @@ function CheckoutForm({
   const [success, setSuccess] = React5.useState(false);
   const [quantity, setQuantity] = React5.useState(initialQuantity);
   const [processor, setProcessor] = React5.useState(null);
+  const [shippingEnabled, setShippingEnabled] = React5.useState(false);
+  const [shippingStep, setShippingStep] = React5.useState("address");
+  const [shippingAddress, setShippingAddress] = React5.useState({
+    street1: "",
+    street2: "",
+    city: "",
+    state: "",
+    zip: "",
+    country: "US"
+  });
+  const [shippingRates, setShippingRates] = React5.useState([]);
+  const [selectedRate, setSelectedRate] = React5.useState(null);
+  const [loadingRates, setLoadingRates] = React5.useState(false);
   const [customer, setCustomer] = React5.useState({
     email: "",
     name: "",
     phone: ""
   });
+  const isProduct = offering.type === "product";
   React5.useEffect(() => {
-    fetchActiveProcessor().then((p) => {
-      if (p) setProcessor(p);
+    fetchProcessorConfig().then((config) => {
+      if (config?.processor) setProcessor(config.processor);
+      if (config?.shipping_enabled && isProduct) setShippingEnabled(true);
     });
-  }, []);
+  }, [isProduct]);
   const isEvent = offering.type === "event" || offering.type === "class";
   const isFree = !offering.price || offering.price === 0;
   const actualMode = isEvent && isFree ? "register" : mode;
   const defaultSubmitText = actualMode === "register" ? "Register" : isFree ? "Complete Order" : "Continue to Payment";
-  const total = offering.price ? offering.price * quantity : 0;
+  const subtotal = offering.price ? offering.price * quantity : 0;
+  const shippingCost = selectedRate ? parseFloat(selectedRate.amount) : 0;
+  const total = subtotal + shippingCost;
+  const updateShippingAddress = (field, value) => {
+    setShippingAddress((prev) => ({ ...prev, [field]: value }));
+  };
+  const handleGetShippingRates = async () => {
+    if (!shippingAddress.street1 || !shippingAddress.city || !shippingAddress.state || !shippingAddress.zip) {
+      setError("Please fill in all required address fields.");
+      return;
+    }
+    setLoadingRates(true);
+    setError(null);
+    try {
+      const rates = await fetchShippingRates(
+        { ...shippingAddress, name: customer.name, phone: customer.phone },
+        [{ offering_id: offering.id, quantity }]
+      );
+      setShippingRates(rates);
+      if (rates.length > 0) setSelectedRate(rates[0]);
+      setShippingStep("rates");
+    } catch (e) {
+      setError("Failed to get shipping rates. Please check your address.");
+    } finally {
+      setLoadingRates(false);
+    }
+  };
   const handleSubmit = async (e) => {
     e.preventDefault();
     setLoading(true);
@@ -2123,12 +2223,23 @@ function CheckoutForm({
           onError?.(result.error || "Registration failed");
         }
       } else {
-        const result = await createCheckoutSession(offering.id, {
+        const checkoutOptions = {
           variantId,
           scheduleId,
           quantity,
           customer
-        });
+        };
+        if (shippingEnabled && shippingAddress.street1 && selectedRate) {
+          checkoutOptions.shippingAddress = {
+            ...shippingAddress,
+            name: customer.name,
+            phone: customer.phone
+          };
+          checkoutOptions.shippingCarrier = selectedRate.carrier;
+          checkoutOptions.shippingService = selectedRate.service;
+          checkoutOptions.shippingCost = parseFloat(selectedRate.amount);
+        }
+        const result = await createCheckoutSession(offering.id, checkoutOptions);
         if (result.success && result.payment_url) {
           window.location.href = result.payment_url;
         } else {
@@ -2147,6 +2258,7 @@ function CheckoutForm({
   const updateCustomer = (field, value) => {
     setCustomer((prev) => ({ ...prev, [field]: value }));
   };
+  const canProceedToPayment = !shippingEnabled || shippingStep === "rates" && selectedRate;
   if (success) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-checkout-success ${className}`, style: {
       padding: "2rem",
@@ -2191,10 +2303,7 @@ function CheckoutForm({
             children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((n) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: n, children: n }, n))
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { marginLeft: "auto", fontWeight: 600 }, children: [
-          "Total: ",
-          formatPrice(total, offering.currency)
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: "auto", fontWeight: 600 }, children: shippingEnabled && selectedRate ? `Subtotal: ${formatPrice(subtotal, offering.currency)}` : `Total: ${formatPrice(total, offering.currency)}` })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
@@ -2258,6 +2367,161 @@ function CheckoutForm({
         )
       ] })
     ] }),
+    shippingEnabled && !isEvent && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "1.5rem", paddingTop: "1.5rem", borderTop: "1px solid #e5e7eb" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { margin: "0 0 1rem", fontSize: "1rem" }, children: "Shipping Address" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.875rem", fontWeight: 500, marginBottom: "0.25rem" }, children: "Street Address *" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              required: shippingEnabled,
+              value: shippingAddress.street1,
+              onChange: (e) => updateShippingAddress("street1", e.target.value),
+              className: inputClassName,
+              placeholder: "123 Main St",
+              style: { width: "100%", padding: "0.625rem 0.75rem", borderRadius: "6px", border: "1px solid #d1d5db", fontSize: "1rem" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.875rem", fontWeight: 500, marginBottom: "0.25rem" }, children: "Apartment, suite, etc." }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              value: shippingAddress.street2 || "",
+              onChange: (e) => updateShippingAddress("street2", e.target.value),
+              className: inputClassName,
+              style: { width: "100%", padding: "0.625rem 0.75rem", borderRadius: "6px", border: "1px solid #d1d5db", fontSize: "1rem" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.875rem", fontWeight: 500, marginBottom: "0.25rem" }, children: "City *" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "text",
+                required: shippingEnabled,
+                value: shippingAddress.city,
+                onChange: (e) => updateShippingAddress("city", e.target.value),
+                className: inputClassName,
+                style: { width: "100%", padding: "0.625rem 0.75rem", borderRadius: "6px", border: "1px solid #d1d5db", fontSize: "1rem" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.875rem", fontWeight: 500, marginBottom: "0.25rem" }, children: "State *" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "text",
+                required: shippingEnabled,
+                value: shippingAddress.state,
+                onChange: (e) => updateShippingAddress("state", e.target.value),
+                className: inputClassName,
+                style: { width: "100%", padding: "0.625rem 0.75rem", borderRadius: "6px", border: "1px solid #d1d5db", fontSize: "1rem" }
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.875rem", fontWeight: 500, marginBottom: "0.25rem" }, children: "ZIP Code *" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              required: shippingEnabled,
+              value: shippingAddress.zip,
+              onChange: (e) => updateShippingAddress("zip", e.target.value),
+              className: inputClassName,
+              style: { width: "100%", maxWidth: "120px", padding: "0.625rem 0.75rem", borderRadius: "6px", border: "1px solid #d1d5db", fontSize: "1rem" }
+            }
+          )
+        ] })
+      ] }),
+      shippingStep === "address" && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleGetShippingRates,
+          disabled: loadingRates || !shippingAddress.street1 || !shippingAddress.city || !shippingAddress.state || !shippingAddress.zip,
+          style: {
+            marginTop: "1rem",
+            padding: "0.625rem 1.25rem",
+            borderRadius: "6px",
+            border: "1px solid #2563eb",
+            background: "white",
+            color: "#2563eb",
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            cursor: loadingRates ? "not-allowed" : "pointer"
+          },
+          children: loadingRates ? "Getting rates..." : "Get shipping options"
+        }
+      ),
+      shippingStep === "rates" && shippingRates.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "1rem" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.875rem", fontWeight: 500, marginBottom: "0.5rem" }, children: "Select shipping method" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: shippingRates.map((rate) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "0.75rem",
+              padding: "0.75rem",
+              borderRadius: "6px",
+              border: `2px solid ${selectedRate === rate ? "#2563eb" : "#e5e7eb"}`,
+              background: selectedRate === rate ? "#eff6ff" : "white",
+              cursor: "pointer"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: "shipping-rate",
+                  checked: selectedRate === rate,
+                  onChange: () => setSelectedRate(rate)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { flex: 1 }, children: [
+                rate.carrier,
+                " - ",
+                rate.service
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600 }, children: formatPrice(parseFloat(rate.amount), rate.currency || "USD") }),
+              rate.estimatedDays && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.75rem", color: "#666" }, children: [
+                "(",
+                rate.estimatedDays,
+                " days)"
+              ] })
+            ]
+          },
+          rate.objectId || `${rate.carrier}-${rate.service}`
+        )) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShippingStep("address"),
+            style: {
+              marginTop: "0.75rem",
+              fontSize: "0.875rem",
+              color: "#6b7280",
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              textDecoration: "underline"
+            },
+            children: "Change address"
+          }
+        )
+      ] })
+    ] }),
     error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
       marginTop: "1rem",
       padding: "0.75rem",
@@ -2271,7 +2535,7 @@ function CheckoutForm({
       "button",
       {
         type: "submit",
-        disabled: loading,
+        disabled: loading || !isEvent && !isFree && !canProceedToPayment,
         className: buttonClassName,
         style: {
           width: "100%",
@@ -4177,6 +4441,7 @@ exports.fetchProductBySlug = fetchProductBySlug;
 exports.fetchProducts = fetchProducts;
 exports.fetchProductsPublic = fetchProductsPublic;
 exports.fetchServices = fetchServices;
+exports.fetchShippingRates = fetchShippingRates;
 exports.fetchUpcomingEvents = fetchUpcomingEvents;
 exports.formatDate = formatDate;
 exports.formatDateRange = formatDateRange;
@@ -4189,5 +4454,6 @@ exports.getSpotsRemaining = getSpotsRemaining;
 exports.isEventSoldOut = isEventSoldOut;
 exports.registerForEvent = registerForEvent;
 exports.useEventModal = useEventModal;
-//# sourceMappingURL=chunk-YZRNC2Z6.js.map
-//# sourceMappingURL=chunk-YZRNC2Z6.js.map
+exports.validateAddress = validateAddress;
+//# sourceMappingURL=chunk-TGX5Q6UK.js.map
+//# sourceMappingURL=chunk-TGX5Q6UK.js.map