@sonordev/site-kit 1.3.2 → 1.3.4

package/dist/{chunk-TLHRV3LZ.js → chunk-MSBWUOIU.js}

@@ -1,6 +1,7 @@
 'use client';
 'use strict';
 
+var chunkGTLIGQDM_js = require('./chunk-GTLIGQDM.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React5 = require('react');
 
@@ -1170,6 +1171,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] = React5.useState(false);
+  const [showAlt, setShowAlt] = React5.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__ */ jsxRuntime.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { style: { fontWeight: showAlt ? 400 : 700, opacity: showAlt ? 0.45 : 1 }, children: "in" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { margin: "0 3px", opacity: 0.3 }, children: "/" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: showAlt ? 700 : 400, opacity: showAlt ? 1 : 0.45 }, children: "cm" })
+          ]
+        }
+      )
+    ] }),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "12px", overflowX: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "table",
+      {
+        style: {
+          width: "100%",
+          borderCollapse: "collapse",
+          fontSize: "13px",
+          lineHeight: 1.5
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("th", { style: thStyle, children: "Size" }),
+            chart.measurements.map((m) => /* @__PURE__ */ jsxRuntime.jsxs("th", { style: thStyle, children: [
+              m,
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { opacity: 0.5, fontWeight: 400 }, children: [
+                "(",
+                unitLabel,
+                ")"
+              ] })
+            ] }, m))
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: chart.rows.map((row) => {
+            const isSelected = selectedSize === row.size;
+            const displayValues = getDisplayValues(row);
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "tr",
+              {
+                style: {
+                  backgroundColor: isSelected ? "rgba(57, 191, 176, 0.08)" : void 0
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("td", { style: { ...tdStyle, fontWeight: 600 }, children: row.size }),
+                  displayValues.map((v, i) => /* @__PURE__ */ jsxRuntime.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,
@@ -1195,6 +1318,20 @@ function ProductDetail({
   const [quantity, setQuantity] = React5.useState(1);
   const [selectedImage, setSelectedImage] = React5.useState(0);
   const [checkingOut, setCheckingOut] = React5.useState(false);
+  const analytics = chunkGTLIGQDM_js.useAnalyticsOptional();
+  React5.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]);
   React5.useEffect(() => {
     if (propProduct) {
       setProduct(propProduct);
@@ -1257,11 +1394,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;
@@ -1438,6 +1595,13 @@ function ProductDetail({
           );
         }) })
       ] }),
+      product.is_clothing && product.size_chart && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "0.75rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        SizeChart,
+        {
+          chart: product.size_chart,
+          selectedSize: selectedVariant?.options?.["Size"]
+        }
+      ) }),
       showQuantity && !isOutOfStock && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "site-kit-product-detail__quantity", style: { marginTop: "1.5rem" }, children: [
         /* @__PURE__ */ jsxRuntime.jsx("label", { style: {
           display: "block",
@@ -2181,6 +2345,7 @@ function CheckoutForm({
     phone: ""
   });
   const isProduct = offering.type === "product";
+  const analytics = chunkGTLIGQDM_js.useAnalyticsOptional();
   React5.useEffect(() => {
     fetchProcessorConfig().then((config) => {
       if (config?.processor) setProcessor(config.processor);
@@ -2222,6 +2387,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);
@@ -4438,6 +4611,7 @@ exports.ProductEmbed = ProductEmbed;
 exports.ProductGrid = ProductGrid;
 exports.ProductPage = ProductPage;
 exports.RegistrationForm = RegistrationForm;
+exports.SizeChart = SizeChart;
 exports.UpcomingEvents = UpcomingEvents;
 exports.createCheckoutSession = createCheckoutSession;
 exports.fetchActiveProcessor = fetchActiveProcessor;
@@ -4465,5 +4639,5 @@ exports.isEventSoldOut = isEventSoldOut;
 exports.registerForEvent = registerForEvent;
 exports.useEventModal = useEventModal;
 exports.validateAddress = validateAddress;
-//# sourceMappingURL=chunk-TLHRV3LZ.js.map
-//# sourceMappingURL=chunk-TLHRV3LZ.js.map
+//# sourceMappingURL=chunk-MSBWUOIU.js.map
+//# sourceMappingURL=chunk-MSBWUOIU.js.map