@sonordev/site-kit 1.3.3 → 1.3.5

package/dist/{chunk-6YXRLC6W.mjs → chunk-IZZ7XJYN.mjs}

@@ -1,4 +1,5 @@
 'use client';
+import { useAnalyticsOptional } from './chunk-FP66BKW6.mjs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React5, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
 
@@ -395,6 +396,10 @@ function OfferingCard({
     subscription: "Subscribe"
   }[offering.type] || "View Details";
   const handleClick = () => {
+    if (offering.external_url && typeof window !== "undefined") {
+      window.open(offering.external_url, "_blank", "noopener,noreferrer");
+      return;
+    }
     if (onCtaClick) {
       onCtaClick(offering);
     } else if (typeof window !== "undefined") {
@@ -786,6 +791,10 @@ function EventTile({
   const spotsRemaining = schedule ? getSpotsRemaining(schedule.capacity, schedule.current_registrations) : null;
   const defaultCtaText = event.price && event.price > 0 ? "Get Tickets" : "Register Free";
   const handleClick = async () => {
+    if (event.external_url) {
+      window.open(event.external_url, "_blank", "noopener,noreferrer");
+      return;
+    }
     if (onCtaClick) {
       onCtaClick(event);
       return;
@@ -1164,6 +1173,128 @@ function ProductEmbed({
     }
   ) });
 }
+var CM_PER_INCH = 2.54;
+function convertValue(value, fromUnit) {
+  if (fromUnit === "inches") return Math.round(value * CM_PER_INCH * 10) / 10;
+  return Math.round(value / CM_PER_INCH * 10) / 10;
+}
+function SizeChart({ chart, selectedSize, className }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [showAlt, setShowAlt] = useState(false);
+  if (!chart?.measurements?.length || !chart?.rows?.length) return null;
+  const primaryUnit = chart.unit;
+  const altUnit = primaryUnit === "inches" ? "cm" : "inches";
+  const activeUnit = showAlt ? altUnit : primaryUnit;
+  const unitLabel = activeUnit === "cm" ? "cm" : "in";
+  function getDisplayValues(row) {
+    if (!showAlt) return row.values;
+    if (row.values_alt && row.values_alt.length === row.values.length) {
+      return row.values_alt;
+    }
+    return row.values.map((v) => convertValue(v, primaryUnit));
+  }
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setIsOpen(!isOpen),
+          style: {
+            background: "none",
+            border: "none",
+            padding: 0,
+            cursor: "pointer",
+            fontSize: "14px",
+            color: "inherit",
+            opacity: 0.7,
+            textDecoration: "underline",
+            textUnderlineOffset: "2px"
+          },
+          children: isOpen ? "Hide Size Chart" : "View Size Chart"
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowAlt(!showAlt),
+          style: {
+            background: "none",
+            border: "1px solid rgba(128,128,128,0.25)",
+            borderRadius: "999px",
+            padding: "2px 8px",
+            cursor: "pointer",
+            fontSize: "11px",
+            lineHeight: 1.4,
+            display: "flex",
+            alignItems: "center",
+            gap: 0
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: showAlt ? 400 : 700, opacity: showAlt ? 0.45 : 1 }, children: "in" }),
+            /* @__PURE__ */ jsx("span", { style: { margin: "0 3px", opacity: 0.3 }, children: "/" }),
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: showAlt ? 700 : 400, opacity: showAlt ? 1 : 0.45 }, children: "cm" })
+          ]
+        }
+      )
+    ] }),
+    isOpen && /* @__PURE__ */ jsx("div", { style: { marginTop: "12px", overflowX: "auto" }, children: /* @__PURE__ */ jsxs(
+      "table",
+      {
+        style: {
+          width: "100%",
+          borderCollapse: "collapse",
+          fontSize: "13px",
+          lineHeight: 1.5
+        },
+        children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { style: thStyle, children: "Size" }),
+            chart.measurements.map((m) => /* @__PURE__ */ jsxs("th", { style: thStyle, children: [
+              m,
+              " ",
+              /* @__PURE__ */ jsxs("span", { style: { opacity: 0.5, fontWeight: 400 }, children: [
+                "(",
+                unitLabel,
+                ")"
+              ] })
+            ] }, m))
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: chart.rows.map((row) => {
+            const isSelected = selectedSize === row.size;
+            const displayValues = getDisplayValues(row);
+            return /* @__PURE__ */ jsxs(
+              "tr",
+              {
+                style: {
+                  backgroundColor: isSelected ? "rgba(57, 191, 176, 0.08)" : void 0
+                },
+                children: [
+                  /* @__PURE__ */ jsx("td", { style: { ...tdStyle, fontWeight: 600 }, children: row.size }),
+                  displayValues.map((v, i) => /* @__PURE__ */ jsx("td", { style: tdStyle, children: v }, i))
+                ]
+              },
+              row.size
+            );
+          }) })
+        ]
+      }
+    ) })
+  ] });
+}
+var thStyle = {
+  padding: "8px 12px",
+  textAlign: "left",
+  fontWeight: 600,
+  borderBottom: "1px solid rgba(128, 128, 128, 0.2)",
+  whiteSpace: "nowrap"
+};
+var tdStyle = {
+  padding: "8px 12px",
+  borderBottom: "1px solid rgba(128, 128, 128, 0.1)",
+  whiteSpace: "nowrap"
+};
 function ProductDetail({
   product: propProduct,
   slug,
@@ -1189,6 +1320,20 @@ function ProductDetail({
   const [quantity, setQuantity] = useState(1);
   const [selectedImage, setSelectedImage] = useState(0);
   const [checkingOut, setCheckingOut] = useState(false);
+  const analytics = useAnalyticsOptional();
+  useEffect(() => {
+    if (!product || !analytics) return;
+    analytics.trackEvent({
+      name: "product_view",
+      properties: {
+        offering_id: product.id,
+        name: product.name,
+        price: product.price,
+        type: product.type,
+        category: product.category?.name
+      }
+    });
+  }, [product?.id, analytics]);
   useEffect(() => {
     if (propProduct) {
       setProduct(propProduct);
@@ -1251,11 +1396,31 @@ function ProductDetail({
   const isLowStock = product.track_inventory && inventoryCount !== void 0 && inventoryCount > 0 && inventoryCount <= 5;
   const needsVariantSelection = (product.is_clothing || (product.variants?.length ?? 0) > 0) && !selectedVariant;
   const handleAddToCart = () => {
+    analytics?.trackEvent({
+      name: "add_to_cart",
+      properties: {
+        offering_id: product.id,
+        variant_id: selectedVariant?.id,
+        quantity,
+        price: selectedVariant?.price ?? product.price,
+        name: product.name
+      }
+    });
     if (onAddToCart) {
       onAddToCart(product, selectedVariant, quantity);
     }
   };
   const handleBuyNow = async () => {
+    analytics?.trackEvent({
+      name: "add_to_cart",
+      properties: {
+        offering_id: product.id,
+        variant_id: selectedVariant?.id,
+        quantity,
+        price: selectedVariant?.price ?? product.price,
+        name: product.name
+      }
+    });
     if (onBuyNow) {
       onBuyNow(product, selectedVariant, quantity);
       return;
@@ -1432,6 +1597,13 @@ function ProductDetail({
           );
         }) })
       ] }),
+      product.is_clothing && product.size_chart && /* @__PURE__ */ jsx("div", { style: { marginTop: "0.75rem" }, children: /* @__PURE__ */ jsx(
+        SizeChart,
+        {
+          chart: product.size_chart,
+          selectedSize: selectedVariant?.options?.["Size"]
+        }
+      ) }),
       showQuantity && !isOutOfStock && /* @__PURE__ */ jsxs("div", { className: "site-kit-product-detail__quantity", style: { marginTop: "1.5rem" }, children: [
         /* @__PURE__ */ jsx("label", { style: {
           display: "block",
@@ -2175,6 +2347,7 @@ function CheckoutForm({
     phone: ""
   });
   const isProduct = offering.type === "product";
+  const analytics = useAnalyticsOptional();
   useEffect(() => {
     fetchProcessorConfig().then((config) => {
       if (config?.processor) setProcessor(config.processor);
@@ -2216,6 +2389,14 @@ function CheckoutForm({
     e.preventDefault();
     setLoading(true);
     setError(null);
+    analytics?.trackEvent({
+      name: "checkout_start",
+      properties: {
+        offering_id: offering.id,
+        total,
+        quantity
+      }
+    });
     try {
       if (actualMode === "register" && isEvent && scheduleId) {
         const result = await registerForEvent(offering.id, scheduleId, customer);
@@ -4418,6 +4599,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, fetchProcessorConfig, fetchProductBySlug, fetchProducts, fetchProductsPublic, fetchServices, fetchShippingRates, fetchUpcomingEvents, formatDate, formatDateRange, formatDateTime, formatPrice, formatTime, getOfferingUrl, getRelativeTimeUntil, getSpotsRemaining, isEventSoldOut, registerForEvent, useEventModal, validateAddress };
-//# sourceMappingURL=chunk-6YXRLC6W.mjs.map
-//# sourceMappingURL=chunk-6YXRLC6W.mjs.map
+export { CalendarView, CheckoutForm, EventCalendar, EventEmbed, EventModal, EventTile, EventsWidget, OfferingCard, OfferingList, ProductDetail, ProductEmbed, ProductGrid, ProductPage, RegistrationForm, SizeChart, UpcomingEvents, createCheckoutSession, fetchActiveProcessor, fetchCategories, fetchLatestOffering, fetchNextEvent, fetchOffering, fetchOfferings, fetchProcessorConfig, fetchProductBySlug, fetchProducts, fetchProductsPublic, fetchServices, fetchShippingRates, fetchUpcomingEvents, formatDate, formatDateRange, formatDateTime, formatPrice, formatTime, getOfferingUrl, getRelativeTimeUntil, getSpotsRemaining, isEventSoldOut, registerForEvent, useEventModal, validateAddress };
+//# sourceMappingURL=chunk-IZZ7XJYN.mjs.map
+//# sourceMappingURL=chunk-IZZ7XJYN.mjs.map