@primestyleai/tryon 2.0.3 → 2.0.5

package/dist/react/index.js

@@ -7,6 +7,7 @@ function cx(base, override) {
 }
 const LS_PREFIX = "primestyle_";
 function lsGet(key, fallback) {
+  if (typeof window === "undefined") return fallback;
   try {
     const raw = localStorage.getItem(LS_PREFIX + key);
     return raw ? JSON.parse(raw) : fallback;
@@ -37,6 +38,7 @@ const SIZING_COUNTRIES = [
 const STEP_LABELS = ["", "Welcome", "Photo", "Size", "Generate", "Results"];
 const TOTAL_STEPS = 5;
 function detectLocale() {
+  if (typeof window === "undefined") return "US";
   const l = (navigator.language || "en-US").toLowerCase();
   if (l.includes("en-gb") || l.includes("en-au")) return "UK";
   if (l.includes("en")) return "US";
@@ -182,6 +184,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");
@@ -202,6 +206,17 @@ function PrimeStyleTryon({
   const pollingRef = useRef(null);
   const completedRef = useRef(false);
   const bodyRef = useRef(null);
+  useEffect(() => {
+    const id = "ps-tryon-styles";
+    if (document.getElementById(id)) return;
+    const el = document.createElement("style");
+    el.id = id;
+    el.textContent = STYLES;
+    document.head.appendChild(el);
+    return () => {
+      el.remove();
+    };
+  }, []);
   useEffect(() => {
     try {
       const key = getApiKey();
@@ -257,6 +272,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 +323,8 @@ function PrimeStyleTryon({
     setProfileSaved(false);
     formRef.current = {};
     setFormGender("male");
+    sizeGuideFetchedRef.current = false;
+    setSizeGuideFetching(false);
     unsubRef.current?.();
     unsubRef.current = null;
     if (pollingRef.current) {
@@ -719,10 +751,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 +770,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: [
@@ -1051,8 +1088,7 @@ function PrimeStyleTryon({
         /* @__PURE__ */ jsx("a", { href: "https://myaifitting.com", target: "_blank", rel: "noopener noreferrer", children: "PrimeStyle AI" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx(ProfileDetailModal, {}),
-    /* @__PURE__ */ jsx("style", { children: STYLES })
+    /* @__PURE__ */ jsx(ProfileDetailModal, {})
   ] });
 }
 const STYLES = `
@@ -1228,6 +1264,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.5",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",