@sonordev/site-kit 1.4.4 → 1.4.6

package/dist/{chunk-BYXMT7IG.js → chunk-WAY6CT4A.js}

@@ -319,6 +319,26 @@ async function registerForEvent(eventId, scheduleId, customer) {
     return { success: false, error: "Network error. Please try again." };
   }
 }
+async function validateDiscountCode(code, subtotal, offeringIds = []) {
+  const { apiUrl, apiKey } = getApiConfig();
+  try {
+    const response = await fetch(`${apiUrl}/api/public/commerce/discount/validate`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": apiKey
+      },
+      body: JSON.stringify({ code, subtotal, offeringIds })
+    });
+    if (!response.ok) {
+      const body = await response.json().catch(() => ({}));
+      return { valid: false, message: body?.message || "Invalid discount code" };
+    }
+    return await response.json();
+  } catch {
+    return { valid: false, message: "Could not validate discount code" };
+  }
+}
 async function fetchProcessorConfig() {
   const { apiUrl, apiKey } = getApiConfig();
   if (!apiKey) return null;
@@ -1267,9 +1287,9 @@ function SizeChart({ chart, selectedSize, className }) {
             gap: 0
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: showAlt ? 400 : 700, opacity: showAlt ? 0.45 : 1 }, children: "in" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: activeUnit === "inches" ? 700 : 400, opacity: activeUnit === "inches" ? 1 : 0.45 }, 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" })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: activeUnit === "cm" ? 700 : 400, opacity: activeUnit === "cm" ? 1 : 0.45 }, children: "cm" })
           ]
         }
       )
@@ -1707,7 +1727,7 @@ var ICON_MAP = {
   return: IconReturn,
   shield: IconShield
 };
-function ProductGallery({ images, productName, selectedIndex, onSelect }) {
+function ProductGallery({ images, productName, selectedIndex, onSelect, imageIds, imageModelInfo }) {
   const [zoomStyle, setZoomStyle] = React5.useState(null);
   const [isHovering, setIsHovering] = React5.useState(false);
   const handleMouseMove = (e) => {
@@ -1748,6 +1768,39 @@ function ProductGallery({ images, productName, selectedIndex, onSelect }) {
               draggable: false
             }
           ),
+          (() => {
+            const currentImgId = imageIds?.[selectedIndex];
+            const modelInfo = currentImgId && imageModelInfo?.[currentImgId];
+            if (!modelInfo) return null;
+            const parts = [];
+            if (modelInfo.height) parts.push(modelInfo.height);
+            if (modelInfo.weight) parts.push(modelInfo.weight);
+            const line1 = parts.length ? `Model: ${parts.join(", ")}` : modelInfo.model_name ? `Model: ${modelInfo.model_name}` : null;
+            const line2 = modelInfo.wearing_size ? `Wearing size ${modelInfo.wearing_size}` : null;
+            if (!line1 && !line2) return null;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  background: "linear-gradient(transparent, rgba(0,0,0,0.65))",
+                  padding: "1.5rem 1rem 0.75rem",
+                  color: "#fff",
+                  fontSize: "0.8125rem",
+                  lineHeight: 1.4,
+                  pointerEvents: "none",
+                  zIndex: 2
+                },
+                children: [
+                  line1 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600 }, children: line1 }),
+                  line2 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 400, opacity: 0.9 }, children: line2 })
+                ]
+              }
+            );
+          })(),
           images.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
@@ -1874,20 +1927,33 @@ function VariantSelector({ variants, selected, isClothing, showInventory, onSele
           disabled: variantOutOfStock,
           style: {
             position: "relative",
-            padding: "0.5rem 1rem",
+            padding: variantOutOfStock ? "0.375rem 1rem 0.25rem" : "0.5rem 1rem",
             borderRadius: "var(--commerce-radius-sm, 8px)",
-            border: isSelected ? "2px solid var(--commerce-accent, #2563eb)" : "1px solid var(--commerce-border, #e5e7eb)",
-            backgroundColor: isSelected ? "color-mix(in srgb, var(--commerce-accent, #2563eb) 8%, transparent)" : "var(--commerce-surface, #f9fafb)",
+            border: isSelected ? "2px solid var(--commerce-accent, #2563eb)" : variantOutOfStock ? "1px solid var(--commerce-border, #e5e7eb)" : "1px solid var(--commerce-border, #e5e7eb)",
+            backgroundColor: isSelected ? "color-mix(in srgb, var(--commerce-accent, #2563eb) 8%, transparent)" : variantOutOfStock ? "var(--commerce-surface, #f9fafb)" : "var(--commerce-surface, #f9fafb)",
             color: variantOutOfStock ? "var(--commerce-text-muted, #9ca3af)" : "var(--commerce-text, #111827)",
             fontSize: "0.875rem",
             fontWeight: 500,
             cursor: variantOutOfStock ? "not-allowed" : "pointer",
-            opacity: variantOutOfStock ? 0.5 : 1,
+            opacity: variantOutOfStock ? 0.6 : 1,
             transition: "all 0.15s ease",
-            textDecoration: variantOutOfStock ? "line-through" : "none"
+            textDecoration: "none",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: variantOutOfStock ? "1px" : 0,
+            minWidth: 48
           },
           children: [
-            variant.options?.Size || variant.name,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { textDecoration: variantOutOfStock ? "line-through" : "none" }, children: variant.options?.Size || variant.name }),
+            variantOutOfStock && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+              fontSize: "0.5625rem",
+              fontWeight: 600,
+              color: "var(--commerce-danger, #dc2626)",
+              textTransform: "uppercase",
+              letterSpacing: "0.03em",
+              lineHeight: 1
+            }, children: "Sold Out" }),
             showInventory && !variantOutOfStock && /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
@@ -3124,6 +3190,21 @@ function ProductDetail({
       ...product.variants?.map((v) => v.image_url).filter(Boolean) || []
     ].filter(Boolean);
   }, [product]);
+  const allImageIds = React5.useMemo(() => {
+    if (!product) return [];
+    const ids = [
+      product.featured_image_id,
+      ...product.gallery_image_ids || [],
+      ...product.variants?.map((v) => v.id) || []
+      // variant images don't have separate IDs for model info
+    ];
+    const urls = [
+      product.featured_image_url,
+      ...product.gallery_images || [],
+      ...product.variants?.map((v) => v.image_url).filter(Boolean) || []
+    ];
+    return urls.map((url, i) => url ? ids[i] : void 0).filter((_id, i) => urls[i]);
+  }, [product]);
   const currentPrice = product ? selectedVariant?.price ?? product.price ?? 0 : 0;
   const compareAtPrice = product?.compare_at_price;
   const hasDiscount = compareAtPrice != null && compareAtPrice > currentPrice;
@@ -3332,7 +3413,9 @@ function ProductDetail({
           images: allImages,
           productName: product.name,
           selectedIndex: selectedImage,
-          onSelect: setSelectedImage
+          onSelect: setSelectedImage,
+          imageIds: allImageIds,
+          imageModelInfo: product.metadata?.image_model_info
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -3499,6 +3582,18 @@ function ProductDetail({
             onSelect: handleVariantChange
           }
         ),
+        product.metadata?.sizing_notes && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              marginTop: "0.5rem",
+              fontSize: "0.8125rem",
+              color: "var(--commerce-text-secondary, #6b7280)",
+              fontStyle: "italic"
+            },
+            children: product.metadata.sizing_notes
+          }
+        ),
         product.size_chart?.fit_note && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -3526,6 +3621,34 @@ function ProductDetail({
             ]
           }
         ),
+        product.metadata?.notices?.map((notice, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              marginTop: "0.75rem",
+              padding: "0.625rem 0.875rem",
+              borderRadius: "var(--commerce-radius-sm, 8px)",
+              backgroundColor: "color-mix(in srgb, var(--commerce-warning, #d97706) 10%, transparent)",
+              border: "1px solid color-mix(in srgb, var(--commerce-warning, #d97706) 25%, transparent)",
+              display: "flex",
+              alignItems: "flex-start",
+              gap: "0.5rem",
+              fontSize: "0.8125rem",
+              color: "var(--commerce-warning, #d97706)",
+              fontWeight: 500,
+              lineHeight: 1.4
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0, marginTop: 1 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+              ] }),
+              notice
+            ]
+          },
+          idx
+        )),
         showSizeChart && product.is_clothing && product.size_chart && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "0.625rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
           SizeChart,
           {
@@ -3588,6 +3711,35 @@ function ProductDetail({
           }
         ),
         showTrustBadges && /* @__PURE__ */ jsxRuntime.jsx(TrustBadges, { badges: trustBadges }),
+        product.metadata?.care_instructions && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              marginTop: "1rem",
+              padding: "0.75rem 1rem",
+              borderRadius: "var(--commerce-radius-sm, 8px)",
+              backgroundColor: "color-mix(in srgb, var(--commerce-accent, #2563eb) 6%, transparent)",
+              border: "1px solid color-mix(in srgb, var(--commerce-accent, #2563eb) 18%, transparent)",
+              display: "flex",
+              alignItems: "flex-start",
+              gap: "0.625rem",
+              fontSize: "0.8125rem",
+              color: "var(--commerce-text-secondary, #6b7280)",
+              lineHeight: 1.5
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "var(--commerce-accent, #2563eb)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0, marginTop: 2 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, color: "var(--commerce-text, #111827)", marginBottom: 2 }, children: "Care Instructions" }),
+                product.metadata.care_instructions
+              ] })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           ProductTabs,
           {
@@ -4326,6 +4478,9 @@ function CheckoutForm({
     name: "",
     phone: ""
   });
+  const [discountCode, setDiscountCode] = React5.useState("");
+  const [discountResult, setDiscountResult] = React5.useState(null);
+  const [applyingDiscount, setApplyingDiscount] = React5.useState(false);
   const isProduct = offering.type === "product";
   const analytics = chunkGTLIGQDM_js.useAnalyticsOptional();
   React5.useEffect(() => {
@@ -4340,7 +4495,30 @@ function CheckoutForm({
   const defaultSubmitText = actualMode === "register" ? "Register" : isFree ? "Complete Order" : "Continue to Payment";
   const subtotal = offering.price ? offering.price * quantity : 0;
   const shippingCost = selectedRate ? parseFloat(selectedRate.amount) : 0;
-  const total = subtotal + shippingCost;
+  const discountAmount = discountResult?.valid ? discountResult.discount_amount ?? 0 : 0;
+  const total = Math.max(0, subtotal + shippingCost - discountAmount);
+  const handleApplyDiscount = async () => {
+    if (!discountCode.trim()) return;
+    setApplyingDiscount(true);
+    try {
+      const result = await validateDiscountCode(discountCode.trim(), subtotal, [offering.id]);
+      setDiscountResult(result);
+      if (!result.valid) {
+        setError(result.message || "Invalid discount code");
+      } else {
+        setError(null);
+      }
+    } catch {
+      setDiscountResult(null);
+      setError("Could not validate discount code");
+    } finally {
+      setApplyingDiscount(false);
+    }
+  };
+  const handleRemoveDiscount = () => {
+    setDiscountCode("");
+    setDiscountResult(null);
+  };
   const updateShippingAddress = (field, value) => {
     setShippingAddress((prev) => ({ ...prev, [field]: value }));
   };
@@ -4392,7 +4570,8 @@ function CheckoutForm({
           variantId,
           scheduleId,
           quantity,
-          customer
+          customer,
+          discountCode: discountResult?.valid ? discountCode.trim() : void 0
         };
         if (shippingEnabled && shippingAddress.street1 && selectedRate) {
           checkoutOptions.shippingAddress = {
@@ -4471,6 +4650,103 @@ function CheckoutForm({
         /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: "auto", fontWeight: 600 }, children: shippingEnabled && selectedRate ? `Subtotal: ${formatPrice(subtotal, offering.currency)}` : `Total: ${formatPrice(total, offering.currency)}` })
       ] })
     ] }),
+    !isFree && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "1.5rem" }, children: discountResult?.valid ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "0.625rem 0.875rem",
+      background: "#f0fdf4",
+      border: "1px solid #bbf7d0",
+      borderRadius: "6px"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.875rem", fontWeight: 500, color: "#166534" }, children: discountResult.name || discountCode }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.875rem", color: "#15803d", marginLeft: "0.5rem" }, children: [
+          "\u2212",
+          formatPrice(discountAmount, offering.currency)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleRemoveDiscount,
+          style: {
+            background: "none",
+            border: "none",
+            color: "#dc2626",
+            cursor: "pointer",
+            fontSize: "0.75rem",
+            fontWeight: 500
+          },
+          children: "Remove"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "0.5rem" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          value: discountCode,
+          onChange: (e) => setDiscountCode(e.target.value.toUpperCase()),
+          placeholder: "Discount code",
+          className: inputClassName,
+          style: {
+            flex: 1,
+            padding: "0.5rem 0.75rem",
+            borderRadius: "6px",
+            border: "1px solid #d1d5db",
+            fontSize: "0.875rem"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleApplyDiscount,
+          disabled: applyingDiscount || !discountCode.trim(),
+          style: {
+            padding: "0.5rem 1rem",
+            borderRadius: "6px",
+            border: "1px solid #d1d5db",
+            background: "white",
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            cursor: applyingDiscount || !discountCode.trim() ? "not-allowed" : "pointer",
+            opacity: applyingDiscount || !discountCode.trim() ? 0.5 : 1
+          },
+          children: applyingDiscount ? "..." : "Apply"
+        }
+      )
+    ] }) }),
+    discountResult?.valid && !isFree && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      padding: "0.75rem 1rem",
+      background: "#f9fafb",
+      borderRadius: "6px",
+      marginBottom: "1.5rem",
+      fontSize: "0.875rem"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "0.25rem" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#666" }, children: "Subtotal" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatPrice(subtotal, offering.currency) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "0.25rem", color: "#16a34a" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Discount" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "\u2212",
+          formatPrice(discountAmount, offering.currency)
+        ] })
+      ] }),
+      shippingCost > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "0.25rem" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#666" }, children: "Shipping" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatPrice(shippingCost, offering.currency) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", borderTop: "1px solid #e5e7eb", paddingTop: "0.5rem", marginTop: "0.25rem", fontWeight: 600 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Total" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatPrice(total, offering.currency) })
+      ] })
+    ] }),
     /* @__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: "Full Name *" }),
@@ -6622,5 +6898,6 @@ exports.isEventSoldOut = isEventSoldOut;
 exports.registerForEvent = registerForEvent;
 exports.useEventModal = useEventModal;
 exports.validateAddress = validateAddress;
-//# sourceMappingURL=chunk-BYXMT7IG.js.map
-//# sourceMappingURL=chunk-BYXMT7IG.js.map
+exports.validateDiscountCode = validateDiscountCode;
+//# sourceMappingURL=chunk-WAY6CT4A.js.map
+//# sourceMappingURL=chunk-WAY6CT4A.js.map