@primestyleai/tryon 5.8.43 → 5.8.45

package/dist/react/index.js

@@ -12620,23 +12620,7 @@ function AccessorySizeView({
     ] }) });
   }
   return /* @__PURE__ */ jsxs("div", { className: "ps-bp-layout", children: [
-    /* @__PURE__ */ jsx("div", { className: "ps-bp-image", style: { position: "relative", display: step === "photo" && !photoPreview ? "none" : void 0 }, children: step === "photo" ? (
-      /* Photo step: show preview if uploaded, otherwise empty */
-      photoPreview ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("img", { src: photoPreview, alt: "preview", className: "ps-bp-image-img" }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: handleRemovePhoto,
-            style: { position: "absolute", top: "0.5vw", right: "0.5vw", width: "1.6vw", height: "1.6vw", borderRadius: "50%", background: "rgba(0,0,0,0.55)", border: "none", color: "#fff", fontSize: "0.9vw", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" },
-            children: "×"
-          }
-        )
-      ] }) : null
-    ) : (
-      /* Manual step: product image */
-      /* @__PURE__ */ jsx("img", { src: productImage, alt: productTitle, className: "ps-bp-image-img" })
-    ) }),
+    step !== "photo" && /* @__PURE__ */ jsx("div", { className: "ps-bp-image", style: { position: "relative" }, children: /* @__PURE__ */ jsx("img", { src: productImage, alt: productTitle, className: "ps-bp-image-img" }) }),
     /* @__PURE__ */ jsx("div", { className: "ps-bp-root", children: step === "photo" ? (
       /* ── Photo step — identical to BodyProfileView photo step ── */
       /* @__PURE__ */ jsxs("div", { className: "ps-bp-wrapper", style: { display: "flex", flexDirection: "column", width: "100%", height: "100%" }, children: [
@@ -13438,6 +13422,69 @@ function PrimeStyleTryonInner({
     const method = methodOverride || sizingMethod;
     const baseUrl = getApiUrl(apiUrl);
     const key = getApiKey();
+    const measurementType = detectMeasurementType(productTitle);
+    if (measurementType === "face" || measurementType === "head") {
+      const f = formRef.current;
+      const toNum = (v) => {
+        if (!v) return void 0;
+        const n = parseFloat(v);
+        return Number.isFinite(n) && n > 0 ? n : void 0;
+      };
+      const inputUnit = f.sizingUnit || sizingUnit || (measurementType === "head" ? "cm" : "mm");
+      const toMm = (n) => {
+        if (n == null) return void 0;
+        if (inputUnit === "mm") return n;
+        if (inputUnit === "cm") return n * 10;
+        if (inputUnit === "in") return n * 25.4;
+        return n;
+      };
+      const faceMm = {};
+      const src = {
+        bridgeWidth: toMm(toNum(f.bridgeWidth)),
+        templeLength: toMm(toNum(f.templeLength) ?? toNum(f.armLength)),
+        lensWidth: toMm(toNum(f.lensWidth)),
+        lensHeight: toMm(toNum(f.lensHeight)),
+        faceWidth: toMm(toNum(f.faceWidth) ?? toNum(f.frameWidth)),
+        pd: toMm(toNum(f.pd)),
+        // Headwear — circumference usually typed in cm; keep as mm internally.
+        headCircumference: toMm(toNum(f.headCircumference)),
+        headWidth: toMm(toNum(f.headWidth))
+      };
+      for (const [k, v] of Object.entries(src)) if (typeof v === "number") faceMm[k] = v;
+      const facePayload = {
+        product: { title: productTitle, productId },
+        sizeGuide: sizeGuide?.found ? sizeGuide : { found: false },
+        sizingUnit: measurementType === "head" ? "cm" : "mm",
+        category: measurementType,
+        ...Object.keys(faceMm).length > 0 && { faceMeasurementsMm: faceMm, irisConfidence: 1 }
+      };
+      try {
+        const resp = await fetch(`${baseUrl}/api/v1/sizing/face-recommend`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json", Authorization: `Bearer ${key}` },
+          body: JSON.stringify(facePayload)
+        });
+        if (resp.ok) {
+          const data = await resp.json();
+          setSizingResult(data);
+          onComplete?.(data);
+        } else {
+          const body = await resp.text().catch(() => "");
+          console.error("[PS-SDK] face-recommend failed:", resp.status, body);
+          setErrorMessage(t("Unable to get size recommendation. Please try again."));
+          setView("error");
+          setEstimationDone(true);
+        }
+      } catch (err) {
+        console.error("[PS-SDK] face-recommend network error:", err);
+        setErrorMessage(t("Unable to connect to sizing service. Please try again."));
+        setView("error");
+        setEstimationDone(true);
+      } finally {
+        setSizingLoading(false);
+      }
+      return;
+    }
     const payload = {
       method,
       locale: sizingCountry,

package/dist/storefront/primestyle-tryon.js

@@ -22044,23 +22044,7 @@ function AccessorySizeView({
     ] }) });
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bp-layout", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bp-image", style: { position: "relative", display: step === "photo" && !photoPreview ? "none" : void 0 }, children: step === "photo" ? (
-      /* Photo step: show preview if uploaded, otherwise empty */
-      photoPreview ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: photoPreview, alt: "preview", className: "ps-bp-image-img" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            onClick: handleRemovePhoto,
-            style: { position: "absolute", top: "0.5vw", right: "0.5vw", width: "1.6vw", height: "1.6vw", borderRadius: "50%", background: "rgba(0,0,0,0.55)", border: "none", color: "#fff", fontSize: "0.9vw", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" },
-            children: "×"
-          }
-        )
-      ] }) : null
-    ) : (
-      /* Manual step: product image */
-      /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: productImage, alt: productTitle, className: "ps-bp-image-img" })
-    ) }),
+    step !== "photo" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bp-image", style: { position: "relative" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: productImage, alt: productTitle, className: "ps-bp-image-img" }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bp-root", children: step === "photo" ? (
       /* ── Photo step — identical to BodyProfileView photo step ── */
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bp-wrapper", style: { display: "flex", flexDirection: "column", width: "100%", height: "100%" }, children: [
@@ -22862,6 +22846,69 @@ function PrimeStyleTryonInner({
     const method = methodOverride || sizingMethod;
     const baseUrl = getApiUrl(apiUrl);
     const key = getApiKey();
+    const measurementType = detectMeasurementType(productTitle);
+    if (measurementType === "face" || measurementType === "head") {
+      const f2 = formRef.current;
+      const toNum = (v2) => {
+        if (!v2) return void 0;
+        const n2 = parseFloat(v2);
+        return Number.isFinite(n2) && n2 > 0 ? n2 : void 0;
+      };
+      const inputUnit = f2.sizingUnit || sizingUnit || (measurementType === "head" ? "cm" : "mm");
+      const toMm = (n2) => {
+        if (n2 == null) return void 0;
+        if (inputUnit === "mm") return n2;
+        if (inputUnit === "cm") return n2 * 10;
+        if (inputUnit === "in") return n2 * 25.4;
+        return n2;
+      };
+      const faceMm = {};
+      const src = {
+        bridgeWidth: toMm(toNum(f2.bridgeWidth)),
+        templeLength: toMm(toNum(f2.templeLength) ?? toNum(f2.armLength)),
+        lensWidth: toMm(toNum(f2.lensWidth)),
+        lensHeight: toMm(toNum(f2.lensHeight)),
+        faceWidth: toMm(toNum(f2.faceWidth) ?? toNum(f2.frameWidth)),
+        pd: toMm(toNum(f2.pd)),
+        // Headwear — circumference usually typed in cm; keep as mm internally.
+        headCircumference: toMm(toNum(f2.headCircumference)),
+        headWidth: toMm(toNum(f2.headWidth))
+      };
+      for (const [k2, v2] of Object.entries(src)) if (typeof v2 === "number") faceMm[k2] = v2;
+      const facePayload = {
+        product: { title: productTitle, productId },
+        sizeGuide: sizeGuide?.found ? sizeGuide : { found: false },
+        sizingUnit: measurementType === "head" ? "cm" : "mm",
+        category: measurementType,
+        ...Object.keys(faceMm).length > 0 && { faceMeasurementsMm: faceMm, irisConfidence: 1 }
+      };
+      try {
+        const resp = await fetch(`${baseUrl}/api/v1/sizing/face-recommend`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json", Authorization: `Bearer ${key}` },
+          body: JSON.stringify(facePayload)
+        });
+        if (resp.ok) {
+          const data = await resp.json();
+          setSizingResult(data);
+          onComplete?.(data);
+        } else {
+          const body = await resp.text().catch(() => "");
+          console.error("[PS-SDK] face-recommend failed:", resp.status, body);
+          setErrorMessage(t2("Unable to get size recommendation. Please try again."));
+          setView("error");
+          setEstimationDone(true);
+        }
+      } catch (err) {
+        console.error("[PS-SDK] face-recommend network error:", err);
+        setErrorMessage(t2("Unable to connect to sizing service. Please try again."));
+        setView("error");
+        setEstimationDone(true);
+      } finally {
+        setSizingLoading(false);
+      }
+      return;
+    }
     const payload = {
       method,
       locale: sizingCountry,

package/package.json

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