@primestyleai/tryon 2.0.3 → 2.0.4

package/dist/react/index.js

@@ -182,6 +182,8 @@ function PrimeStyleTryon({
   const [sizingMethod, setSizingMethod] = useState(null);
   const [sizingResult, setSizingResult] = useState(null);
   const [sizeGuide, setSizeGuide] = useState(null);
+  const [sizeGuideFetching, setSizeGuideFetching] = useState(false);
+  const sizeGuideFetchedRef = useRef(false);
   const [sizingCountry, setSizingCountry] = useState(detectLocale);
   const imperial = isImperial(sizingCountry);
   const [sizingUnit, setSizingUnit] = useState(imperial ? "in" : "cm");
@@ -257,6 +259,21 @@ function PrimeStyleTryon({
   useEffect(() => {
     lsSet("history", history);
   }, [history]);
+  useEffect(() => {
+    if (view !== "sizing-choice" || sizeGuideFetchedRef.current || !apiRef.current) return;
+    sizeGuideFetchedRef.current = true;
+    setSizeGuideFetching(true);
+    const baseUrl = getApiUrl(apiUrl);
+    const key = getApiKey();
+    fetch(`${baseUrl}/api/v1/sizing/sizeguide`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", Authorization: `Bearer ${key}` },
+      body: JSON.stringify({ product: { title: productTitle, variants: [] } })
+    }).then((r) => r.ok ? r.json() : null).then((data) => {
+      if (data) setSizeGuide(data);
+      else setSizeGuide({ found: false });
+    }).catch(() => setSizeGuide({ found: false })).finally(() => setSizeGuideFetching(false));
+  }, [view, apiUrl, productTitle]);
   const stepIndex = useMemo(() => {
     switch (view) {
       case "welcome":
@@ -293,6 +310,8 @@ function PrimeStyleTryon({
     setProfileSaved(false);
     formRef.current = {};
     setFormGender("male");
+    sizeGuideFetchedRef.current = false;
+    setSizeGuideFetching(false);
     unsubRef.current?.();
     unsubRef.current = null;
     if (pollingRef.current) {
@@ -719,10 +738,15 @@ function PrimeStyleTryon({
     ] });
   }
   function SizingChoiceView() {
+    const sgAvailable = sizeGuide?.found === true;
+    const sgDisabled = !sizeGuideFetching && !sgAvailable;
+    const disabledClass = sgDisabled ? " ps-tryon-choice-disabled" : sizeGuideFetching ? " ps-tryon-choice-loading" : "";
     return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sizing-choice", children: [
       /* @__PURE__ */ jsx("h3", { className: "ps-tryon-section-title", children: "How would you like to find your size?" }),
+      sgDisabled && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sg-notice", children: "Size guide is not available for this product" }),
+      sizeGuideFetching && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sg-notice ps-tryon-sg-loading", children: "Checking size guide availability..." }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-cards", children: [
-        /* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
+        /* @__PURE__ */ jsxs("button", { className: `ps-tryon-choice-card${disabledClass}`, disabled: sgDisabled || sizeGuideFetching, onClick: () => {
           setSizingMethod("exact");
           setView("sizing-form");
         }, children: [
@@ -733,7 +757,7 @@ function PrimeStyleTryon({
           ] }),
           /* @__PURE__ */ jsx("span", { className: "ps-tryon-choice-badge", children: "Best accuracy" })
         ] }),
-        /* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
+        /* @__PURE__ */ jsxs("button", { className: `ps-tryon-choice-card${disabledClass}`, disabled: sgDisabled || sizeGuideFetching, onClick: () => {
           setSizingMethod("quick");
           setView("sizing-form");
         }, children: [
@@ -1228,6 +1252,15 @@ const STYLES = `
     padding: 3px 10px; border-radius: 20px; flex-shrink: 0;
     background: rgba(187,148,92,0.12); color: #bb945c; font-size: 10px; font-weight: 600;
   }
+  .ps-tryon-choice-disabled { opacity: 0.4; cursor: not-allowed !important; pointer-events: none; }
+  .ps-tryon-choice-disabled:hover { border-color: #333; transform: none; box-shadow: none; }
+  .ps-tryon-choice-disabled::before { display: none; }
+  .ps-tryon-choice-loading { opacity: 0.5; cursor: wait !important; pointer-events: none; }
+  .ps-tryon-sg-notice {
+    font-size: 12px; color: #999; text-align: center; padding: 10px 14px;
+    margin-bottom: 12px; border: 1px solid #333; border-radius: 10px; background: #1a1b1a;
+  }
+  .ps-tryon-sg-loading { border-style: dashed; }
 
   /* Sizing form */
   .ps-tryon-sizing-form { display: flex; flex-direction: column; gap: 12px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primestyleai/tryon",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",