@primestyleai/tryon 3.1.0 → 3.2.0

package/dist/react/index.js

@@ -189,6 +189,7 @@ function PrimeStyleTryonInner({
   const [dragOver, setDragOver] = useState(false);
   const [sizingMethod, setSizingMethod] = useState(null);
   const [sizingResult, setSizingResult] = useState(null);
+  const [sizingLoading, setSizingLoading] = useState(false);
   const [sizeGuide, setSizeGuide] = useState(null);
   const [sizeGuideFetching, setSizeGuideFetching] = useState(false);
   const sizeGuideFetchedRef = useRef(false);
@@ -348,6 +349,7 @@ function PrimeStyleTryonInner({
     setErrorMessage(null);
     setSizingMethod(null);
     setSizingResult(null);
+    setSizingLoading(false);
     setSizeGuide(null);
     setProfileSaved(false);
     formRef.current = {};
@@ -444,9 +446,16 @@ function PrimeStyleTryonInner({
       if (formRef.current.fitPreference) m.fitPreference = formRef.current.fitPreference;
       payload.measurements = m;
     } else {
+      const qHeight = heightUnit === "ft" ? ftInToCm(parseFloat(formRef.current.heightFeet || "0"), parseFloat(formRef.current.heightInches || "0")) : parseFloat(formRef.current.height || "0");
+      const qWeight = weightUnit === "lbs" ? lbsToKg(parseFloat(formRef.current.weight || "0")) : parseFloat(formRef.current.weight || "0");
+      if (!qHeight || qHeight < 100 || !qWeight || qWeight < 30) {
+        console.warn("[PrimeStyle] Skipping sizing — invalid height/weight:", { qHeight, qWeight });
+        setSizingLoading(false);
+        return;
+      }
       payload.quickEstimate = {
-        heightCm: heightUnit === "ft" ? ftInToCm(parseFloat(formRef.current.heightFeet || "0"), parseFloat(formRef.current.heightInches || "0")) : parseFloat(formRef.current.height || "0"),
-        weightKg: weightUnit === "lbs" ? lbsToKg(parseFloat(formRef.current.weight || "0")) : parseFloat(formRef.current.weight || "0"),
+        heightCm: qHeight,
+        weightKg: qWeight,
         gender: formRef.current.gender || "male"
       };
     }
@@ -459,8 +468,13 @@ function PrimeStyleTryonInner({
       if (res.ok) {
         const data = await res.json();
         setSizingResult(data);
+      } else {
+        console.warn("[PrimeStyle] Sizing API error:", res.status, await res.text().catch(() => ""));
       }
-    } catch {
+    } catch (err) {
+      console.warn("[PrimeStyle] Sizing request failed:", err);
+    } finally {
+      setSizingLoading(false);
     }
   }, [apiUrl, sizingMethod, sizingCountry, heightUnit, weightUnit, sizingUnit, sizeGuide, productTitle]);
   const handleSubmit = useCallback(async () => {
@@ -473,7 +487,10 @@ function PrimeStyleTryonInner({
     }
     completedRef.current = false;
     setView("processing");
-    if (sizingMethod) submitSizing();
+    if (sizingMethod) {
+      setSizingLoading(true);
+      submitSizing();
+    }
     try {
       const modelImage = await compressImage(selectedFile);
       const response = await apiRef.current.submitTryOn(modelImage, productImage);
@@ -536,6 +553,7 @@ function PrimeStyleTryonInner({
     setErrorMessage(null);
     setSizingMethod(null);
     setSizingResult(null);
+    setSizingLoading(false);
     setProfileSaved(false);
     setView("upload");
   }, [previewUrl, cleanupJob]);
@@ -733,75 +751,71 @@ function PrimeStyleTryonInner({
     ] });
   }
   function UploadView() {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      profiles.length > 0 && /* @__PURE__ */ jsx("div", { className: "ps-tryon-profile-bar", children: /* @__PURE__ */ jsxs("select", { className: "ps-tryon-profile-select", value: activeProfileId || "", onChange: (e) => {
-        if (e.target.value) applyProfile(e.target.value);
-      }, children: [
-        /* @__PURE__ */ jsx("option", { value: "", children: "Auto-fill from saved profile..." }),
-        profiles.map((p) => /* @__PURE__ */ jsxs("option", { value: p.id, children: [
-          p.name,
-          " (",
-          p.gender === "female" ? "Women's" : "Men's",
-          ")"
-        ] }, p.id))
-      ] }) }),
-      selectedFile && previewUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-preview", cn.preview), children: [
-          /* @__PURE__ */ jsx("img", { src: previewUrl, alt: "Your photo", className: cn.previewImage }),
-          /* @__PURE__ */ jsx("button", { onClick: handleRemovePreview, className: cx("ps-tryon-preview-remove", cn.removeButton), children: "×" })
-        ] }),
-        /* @__PURE__ */ jsxs("button", { onClick: () => setView("sizing-choice"), className: cx("ps-tryon-submit", cn.submitButton), children: [
-          "Continue to Sizing ",
-          /* @__PURE__ */ jsx(ArrowRightIcon, {})
-        ] })
-      ] }) : /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cx(`ps-tryon-upload${dragOver ? " ps-tryon-drag-over" : ""}`, cn.uploadZone),
-          onClick: () => fileInputRef.current?.click(),
-          onDragOver: (e) => {
-            e.preventDefault();
-            setDragOver(true);
-          },
-          onDragLeave: () => setDragOver(false),
-          onDrop: (e) => {
-            e.preventDefault();
-            setDragOver(false);
-            const f = e.dataTransfer?.files?.[0];
-            if (f) handleFileSelect(f);
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                ref: fileInputRef,
-                type: "file",
-                accept: "image/jpeg,image/png,image/webp",
-                style: { display: "none" },
-                onChange: (e) => {
-                  const f = e.target.files?.[0];
-                  if (f) handleFileSelect(f);
-                }
+    return /* @__PURE__ */ jsx(Fragment, { children: selectedFile && previewUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-preview", cn.preview), children: [
+        /* @__PURE__ */ jsx("img", { src: previewUrl, alt: "Your photo", className: cn.previewImage }),
+        /* @__PURE__ */ jsx("button", { onClick: handleRemovePreview, className: cx("ps-tryon-preview-remove", cn.removeButton), children: "×" })
+      ] }),
+      /* @__PURE__ */ jsxs("button", { onClick: () => setView("sizing-choice"), className: cx("ps-tryon-submit", cn.submitButton), children: [
+        "Continue to Sizing ",
+        /* @__PURE__ */ jsx(ArrowRightIcon, {})
+      ] })
+    ] }) : /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(`ps-tryon-upload${dragOver ? " ps-tryon-drag-over" : ""}`, cn.uploadZone),
+        onClick: () => fileInputRef.current?.click(),
+        onDragOver: (e) => {
+          e.preventDefault();
+          setDragOver(true);
+        },
+        onDragLeave: () => setDragOver(false),
+        onDrop: (e) => {
+          e.preventDefault();
+          setDragOver(false);
+          const f = e.dataTransfer?.files?.[0];
+          if (f) handleFileSelect(f);
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept: "image/jpeg,image/png,image/webp",
+              style: { display: "none" },
+              onChange: (e) => {
+                const f = e.target.files?.[0];
+                if (f) handleFileSelect(f);
               }
-            ),
-            /* @__PURE__ */ jsx(UploadIcon, {}),
-            /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-text", cn.uploadText), children: "Drop or upload your full body photo!" }),
-            /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-hint", cn.uploadHint), children: "JPEG, PNG or WebP (max 10MB)" })
-          ]
-        }
-      )
-    ] });
+            }
+          ),
+          /* @__PURE__ */ jsx(UploadIcon, {}),
+          /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-text", cn.uploadText), children: "Drop or upload your full body photo!" }),
+          /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-hint", cn.uploadHint), children: "JPEG, PNG or WebP (max 10MB)" })
+        ]
+      }
+    ) });
   }
   function SizingChoiceView() {
     const sgAvailable = sizeGuide?.found === true;
-    const sgDisabled = !sizeGuideFetching && !sgAvailable;
-    const disabledClass = sgDisabled ? " ps-tryon-choice-disabled" : sizeGuideFetching ? " ps-tryon-choice-loading" : "";
+    const sgChecked = !sizeGuideFetching && sizeGuide !== null;
+    if (sizeGuideFetching) {
+      return /* @__PURE__ */ jsx("div", { className: "ps-tryon-sizing-choice", children: /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sg-checking", children: [
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-sg-checking-spinner" }),
+        /* @__PURE__ */ jsx("h3", { className: "ps-tryon-section-title", children: "Checking size guide..." }),
+        /* @__PURE__ */ jsx("p", { className: "ps-tryon-sg-checking-sub", children: "Looking for size chart data for this product" })
+      ] }) });
+    }
     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..." }),
+      sgChecked && !sgAvailable && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sg-notice", children: "Size guide is not available for this product — sizing will use standard measurements" }),
+      sgChecked && sgAvailable && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sg-notice ps-tryon-sg-found", children: [
+        /* @__PURE__ */ jsx(CheckIcon, { size: 14 }),
+        " Size guide found for this product"
+      ] }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-cards", children: [
-        /* @__PURE__ */ jsxs("button", { className: `ps-tryon-choice-card${disabledClass}`, disabled: sgDisabled || sizeGuideFetching, onClick: () => {
+        /* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
           setSizingMethod("exact");
           setView("sizing-form");
         }, children: [
@@ -812,7 +826,7 @@ function PrimeStyleTryonInner({
           ] }),
           /* @__PURE__ */ jsx("span", { className: "ps-tryon-choice-badge", children: "Best accuracy" })
         ] }),
-        /* @__PURE__ */ jsxs("button", { className: `ps-tryon-choice-card${disabledClass}`, disabled: sgDisabled || sizeGuideFetching, onClick: () => {
+        /* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
           setSizingMethod("quick");
           setView("sizing-form");
         }, children: [
@@ -839,6 +853,17 @@ function PrimeStyleTryonInner({
     const isFemale = formGender === "female";
     const isCm = sizingUnit === "cm";
     return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sizing-form", children: [
+      profiles.length > 0 && /* @__PURE__ */ jsx("div", { className: "ps-tryon-profile-bar", children: /* @__PURE__ */ jsxs("select", { className: "ps-tryon-profile-select", value: activeProfileId || "", onChange: (e) => {
+        if (e.target.value) applyProfile(e.target.value);
+      }, children: [
+        /* @__PURE__ */ jsx("option", { value: "", children: "Auto-fill from saved profile..." }),
+        profiles.map((p) => /* @__PURE__ */ jsxs("option", { value: p.id, children: [
+          p.name,
+          " (",
+          p.gender === "female" ? "Women's" : "Men's",
+          ")"
+        ] }, p.id))
+      ] }) }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
         /* @__PURE__ */ jsx("label", { children: "I'm shopping for" }),
         /* @__PURE__ */ jsxs("div", { className: "ps-tryon-unit-toggle", children: [
@@ -934,11 +959,16 @@ function PrimeStyleTryonInner({
     ] });
   }
   function ResultView() {
-    const hasBoth = !!resultImageUrl && !!sizingResult;
+    const hasSizing = !!sizingResult || sizingLoading;
+    const hasBoth = !!resultImageUrl && hasSizing;
     const [profileName, setProfileName] = useState("");
     return /* @__PURE__ */ jsxs("div", { className: `ps-tryon-result-layout${hasBoth ? " ps-tryon-result-split" : ""}`, children: [
       resultImageUrl && /* @__PURE__ */ jsx("div", { className: "ps-tryon-result-image-col", children: /* @__PURE__ */ jsx("img", { src: resultImageUrl, alt: "Try-on result", className: cn.resultImage }) }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-result-info-col", children: [
+        sizingLoading && !sizingResult && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-recommend ps-tryon-sizing-loading", children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner" }),
+          /* @__PURE__ */ jsx("p", { className: "ps-tryon-size-reasoning", children: "Analyzing your size..." })
+        ] }),
         sizingResult && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-recommend", children: [
           /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-badge", children: sizingResult.recommendedSize }),
           /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-confidence", children: [
@@ -1312,15 +1342,25 @@ 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; }
+  .ps-tryon-sg-found {
+    color: #4ade80; border-color: rgba(74,222,128,0.2); background: rgba(74,222,128,0.05);
+    display: flex; align-items: center; justify-content: center; gap: 6px;
+  }
+  .ps-tryon-sg-found svg { stroke: #4ade80; }
+  .ps-tryon-sg-checking {
+    display: flex; flex-direction: column; align-items: center; padding: 40px 20px; text-align: center;
+  }
+  .ps-tryon-sg-checking-spinner {
+    width: 40px; height: 40px; border: 3px solid #333;
+    border-top-color: #bb945c; border-radius: 50%;
+    animation: ps-spin 0.8s linear infinite; margin-bottom: 20px;
+  }
+  .ps-tryon-sg-checking .ps-tryon-section-title { margin-bottom: 6px; }
+  .ps-tryon-sg-checking-sub { font-size: 13px; color: #999; margin: 0; }
 
   /* Sizing form */
   .ps-tryon-sizing-form { display: flex; flex-direction: column; gap: 12px; }
@@ -1431,6 +1471,13 @@ const STYLES = `
     background: linear-gradient(135deg, #bb945c, #d6ba7d);
     color: #111; font-size: 20px; font-weight: 700; margin-bottom: 10px;
   }
+  .ps-tryon-sizing-loading { text-align: center; padding: 20px 0; }
+  .ps-tryon-size-loading-spinner {
+    width: 36px; height: 36px; border: 3px solid #333;
+    border-top-color: #bb945c; border-radius: 50%;
+    animation: ps-spin 0.8s linear infinite; margin: 0 auto 12px;
+  }
+  @keyframes ps-spin { to { transform: rotate(360deg); } }
   .ps-tryon-size-confidence { font-size: 12px; color: #999; margin-bottom: 8px; }
   .ps-conf-high { color: #4ade80; } .ps-conf-medium { color: #bb945c; } .ps-conf-low { color: #ef4444; }
   .ps-tryon-size-reasoning { font-size: 13px; color: #ccc; line-height: 1.5; margin-bottom: 12px; }

package/package.json

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