@primestyleai/tryon 3.6.5 → 3.7.0

package/dist/react/index.js

@@ -261,11 +261,11 @@ function PrimeStyleTryonInner({
   const progressBarRef = useRef(null);
   const progressTextRef = useRef(null);
   const progressStatusRef = useRef(null);
+  const progressIntervalRef = useRef(null);
   useEffect(() => {
     if (view === "processing") {
+      if (progressIntervalRef.current) return;
       progressRef.current = 0;
-      if (progressBarRef.current) progressBarRef.current.style.width = "0%";
-      if (progressTextRef.current) progressTextRef.current.textContent = "0%";
       const statuses = [
         { at: 0, text: "Preparing your image..." },
         { at: 15, text: "Analyzing body proportions..." },
@@ -274,7 +274,7 @@ function PrimeStyleTryonInner({
         { at: 75, text: "Refining details..." },
         { at: 90, text: "Almost there..." }
       ];
-      const interval = setInterval(() => {
+      progressIntervalRef.current = setInterval(() => {
         const p = progressRef.current;
         if (p >= 100) return;
         const increment = p < 30 ? 1.2 : p < 60 ? 0.8 : p < 80 ? 0.4 : p < 95 ? 0.15 : 0;
@@ -287,7 +287,15 @@ function PrimeStyleTryonInner({
           if (status) progressStatusRef.current.textContent = status.text;
         }
       }, 200);
-      return () => clearInterval(interval);
+      return () => {
+        clearInterval(progressIntervalRef.current);
+        progressIntervalRef.current = null;
+      };
+    } else {
+      if (progressIntervalRef.current) {
+        clearInterval(progressIntervalRef.current);
+        progressIntervalRef.current = null;
+      }
     }
   }, [view]);
   useEffect(() => {
@@ -958,9 +966,17 @@ function PrimeStyleTryonInner({
       sizingMethod === "exact" ? /* @__PURE__ */ jsx(Fragment, { children: (() => {
         const reqFields = dynamicFields.filter((f) => f.required);
         const optFields = dynamicFields.filter((f) => !f.required);
+        const isShoeProduct = reqFields.some((f) => f.category === "shoe");
+        const isClothingProduct = reqFields.some((f) => f.category === "body");
         const renderField = (field) => {
           if (["shoeEU", "shoeUS", "shoeUK"].includes(field.key)) {
-            return /* @__PURE__ */ jsx(InputRow, { label: `${field.label} *`, fieldKey: field.key, placeholder: field.placeholder }, field.key);
+            const regionField = shoeField;
+            const key = regionField.key;
+            const showOriginal = field.key !== key;
+            return /* @__PURE__ */ jsxs("span", { children: [
+              /* @__PURE__ */ jsx(InputRow, { label: `${regionField.label}${field.required ? " *" : ""}`, fieldKey: key, placeholder: regionField.ph }),
+              showOriginal && /* @__PURE__ */ jsx(InputRow, { label: field.label, fieldKey: field.key, placeholder: field.placeholder })
+            ] }, field.key);
           }
           const phNum = parseFloat(field.placeholder?.replace(/[^0-9.]/g, "") || "");
           const phIn = !isNaN(phNum) && phNum > 0 && field.unit === "cm" ? String(Math.round(phNum / 2.54)) : "";
@@ -977,6 +993,20 @@ function PrimeStyleTryonInner({
             field.key
           );
         };
+        const profileExtras = [];
+        if (isShoeProduct && !dynamicFields.some((f) => f.category === "body")) {
+          const bodyFields = isFemale ? FALLBACK_FIELDS_FEMALE : FALLBACK_FIELDS_MALE;
+          for (const f of bodyFields) {
+            if (!dynamicFields.some((d) => d.key === f.key)) {
+              profileExtras.push({ ...f, required: false });
+            }
+          }
+        }
+        if (isClothingProduct && !dynamicFields.some((f) => f.category === "shoe")) {
+          profileExtras.push({ key: "footLengthCm", label: "Foot length", required: false, unit: "cm", placeholder: "e.g. 27", category: "shoe" });
+          profileExtras.push({ key: shoeField.key, label: shoeField.label, required: false, unit: "size", placeholder: shoeField.ph, category: "shoe" });
+        }
+        const allOptFields = [...optFields, ...profileExtras];
         return /* @__PURE__ */ jsxs(Fragment, { children: [
           reqFields.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("div", { className: "ps-tryon-section-label", children: "Required for this product" }),
@@ -998,7 +1028,7 @@ function PrimeStyleTryonInner({
               fp
             )) })
           ] }),
-          optFields.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-optional-section", children: [
+          allOptFields.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-optional-section", children: [
             /* @__PURE__ */ jsxs("button", { className: "ps-tryon-optional-toggle", onClick: (e) => {
               const wrap = e.target.closest(".ps-tryon-optional-section").querySelector(".ps-tryon-optional-fields");
               const arrow = e.target.closest(".ps-tryon-optional-toggle").querySelector(".ps-tryon-chevron");
@@ -1011,18 +1041,7 @@ function PrimeStyleTryonInner({
               /* @__PURE__ */ jsx("span", { children: "Optional — improve accuracy & save to profile" }),
               /* @__PURE__ */ jsx("span", { className: "ps-tryon-chevron", children: "▾" })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "ps-tryon-optional-fields", style: { display: "none" }, children: [
-              optFields.map(renderField),
-              !dynamicFields.some((f) => f.category === "shoe") && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(InputRow, { label: "Foot length", fieldKey: "footLengthCm", placeholder: isCm ? "e.g. 27" : "e.g. 10.5", type: "number", unit: sizingUnit }),
-                /* @__PURE__ */ jsx(InputRow, { label: shoeField.label, fieldKey: shoeField.key, placeholder: shoeField.ph })
-              ] })
-            ] })
-          ] }),
-          optFields.length === 0 && !dynamicFields.some((f) => f.category === "shoe") && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-shoe-section", children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-shoe-title", children: "Shoe sizing (optional)" }),
-            /* @__PURE__ */ jsx(InputRow, { label: "Foot length", fieldKey: "footLengthCm", placeholder: isCm ? "e.g. 27" : "e.g. 10.5", type: "number", unit: sizingUnit }),
-            /* @__PURE__ */ jsx(InputRow, { label: shoeField.label, fieldKey: shoeField.key, placeholder: shoeField.ph })
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-optional-fields", style: { display: "none" }, children: allOptFields.map(renderField) })
           ] })
         ] });
       })() }) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1071,6 +1090,17 @@ function PrimeStyleTryonInner({
     ] }, `form-${formGender}-${sizingUnit}-${heightUnit}-${sizingCountry}-${formKey}`);
   }
   function ProcessingView() {
+    const barCb = useCallback((el) => {
+      progressBarRef.current = el;
+      if (el) el.style.width = `${Math.round(progressRef.current)}%`;
+    }, []);
+    const pctCb = useCallback((el) => {
+      progressTextRef.current = el;
+      if (el) el.textContent = `${Math.round(progressRef.current)}%`;
+    }, []);
+    const statusCb = useCallback((el) => {
+      progressStatusRef.current = el;
+    }, []);
     return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing", children: [
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing-image-wrap", children: [
         previewUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1081,10 +1111,10 @@ function PrimeStyleTryonInner({
         /* @__PURE__ */ jsx("div", { className: "ps-tryon-scan-overlay" })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-progress-section", children: [
-        /* @__PURE__ */ jsx("div", { className: "ps-tryon-progress-bar-wrap", children: /* @__PURE__ */ jsx("div", { ref: progressBarRef, className: "ps-tryon-progress-bar-fill" }) }),
-        /* @__PURE__ */ jsx("span", { ref: progressTextRef, className: "ps-tryon-progress-pct", children: "0%" })
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-progress-bar-wrap", children: /* @__PURE__ */ jsx("div", { ref: barCb, className: "ps-tryon-progress-bar-fill" }) }),
+        /* @__PURE__ */ jsx("span", { ref: pctCb, className: "ps-tryon-progress-pct", children: "0%" })
       ] }),
-      /* @__PURE__ */ jsx("div", { ref: progressStatusRef, className: cx("ps-tryon-processing-text", cn.processingText), children: "Preparing your image..." }),
+      /* @__PURE__ */ jsx("div", { ref: statusCb, className: cx("ps-tryon-processing-text", cn.processingText), children: "Preparing your image..." }),
       /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-processing-sub", cn.processingSubText), children: "This usually takes 15-25 seconds" })
     ] });
   }

package/package.json

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