@primestyleai/tryon 2.2.1 → 3.0.0

package/dist/react/index.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties } from "react";
-import type { ButtonStyles, ModalStyles, PrimeStyleClassNames, SizeGuideData } from "../types";
+import type { ButtonStyles, ModalStyles, PrimeStyleClassNames } from "../types";
 export interface PrimeStyleTryonProps {
     productImage: string;
     productTitle?: string;
@@ -23,29 +23,7 @@ export interface PrimeStyleTryonProps {
         message: string;
         code?: string;
     }) => void;
-    /** Pre-computed size guide — skips AI extraction if provided */
-    sizeGuide?: SizeGuideData;
-    /** Product description HTML for AI size guide extraction */
-    productDescription?: string;
-    /** Product vendor/brand for AI extraction */
-    productVendor?: string;
-    /** Product type (e.g. "T-Shirt", "Jacket") */
-    productType?: string;
-    /** Product tags for AI extraction */
-    productTags?: string[];
-    /** Product variants with size options */
-    productVariants?: Array<{
-        title: string;
-        option1?: string | null;
-        option2?: string | null;
-        option3?: string | null;
-    }>;
-    /** Product options (e.g. [{name: "Size", values: ["S","M","L"]}]) */
-    productOptions?: Array<{
-        name: string;
-        values?: string[];
-    }>;
-    /** Scan the page DOM for size guide tables/modals (like the Shopify widget does) */
-    scanPageForSizeGuide?: boolean;
+    /** Size guide data from your backend — pass as-is, any format (HTML, JSON, object, string). Our AI will parse it. */
+    sizeGuideData?: unknown;
 }
 export declare function PrimeStyleTryon(props: PrimeStyleTryonProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/react/index.js

@@ -21,150 +21,6 @@ function lsSet(key, value) {
   } catch {
   }
 }
-function extractTableData(table) {
-  const headers = [];
-  const headerRow = table.querySelector("thead tr") || table.querySelector("tr");
-  if (!headerRow) return null;
-  for (const cell of headerRow.querySelectorAll("th, td")) {
-    const txt = (cell.textContent || "").trim();
-    if (txt) headers.push(txt);
-  }
-  if (headers.length < 2) return null;
-  const rows = [];
-  for (const tr of table.querySelectorAll("tbody tr, tr")) {
-    if (tr === headerRow) continue;
-    const cells = tr.querySelectorAll("td, th");
-    if (cells.length < 2) continue;
-    const row = [];
-    for (const c of cells) row.push((c.textContent || "").trim());
-    if (row.some((v) => v.length > 0)) rows.push(row);
-  }
-  return rows.length > 0 ? { headers, rows } : null;
-}
-const SIZE_KEYWORDS = /size|chest|bust|waist|hips|shoulder|sleeve|length|inseam|\b(XS|S|M|L|XL|XXL|2XL|3XL)\b/i;
-const SG_BUTTON_KEYWORDS = /size.?(guide|chart|table)|sizing|fit.?guide|measurement/i;
-function findSizeTables(container) {
-  const results = [];
-  for (const table of container.querySelectorAll("table")) {
-    if (SIZE_KEYWORDS.test(table.textContent || "")) {
-      const data = extractTableData(table);
-      if (data) results.push(data);
-    }
-  }
-  return results;
-}
-function detectUnit(container) {
-  for (const sel of [".active", ".selected", "[aria-selected=true]", "[class*=active]"]) {
-    try {
-      for (const tab of container.querySelectorAll(sel)) {
-        const t = (tab.textContent || "").trim().toLowerCase();
-        if (t.length > 20) continue;
-        if (/\bcm\b|centimeter/i.test(t)) return "cm";
-        if (/\binch|inches/i.test(t)) return "inches";
-      }
-    } catch {
-    }
-  }
-  for (const th of container.querySelectorAll("th")) {
-    const h = (th.textContent || "").toLowerCase();
-    if (/\(cm\)/.test(h)) return "cm";
-    if (/\(in|inch/.test(h)) return "inches";
-  }
-  return null;
-}
-function findSizeGuideButton() {
-  for (const el of document.querySelectorAll("button, a, [role=button], .size-guide, .size-chart, [data-action*=size], [class*=size-guide], [class*=size-chart], [class*=sizeguide], [class*=sizechart]")) {
-    const text = (el.textContent || "").trim();
-    const cls = el.className || "";
-    const ariaLabel = el.getAttribute("aria-label") || "";
-    if (SG_BUTTON_KEYWORDS.test(text) || SG_BUTTON_KEYWORDS.test(cls) || SG_BUTTON_KEYWORDS.test(ariaLabel)) {
-      return el;
-    }
-  }
-  return null;
-}
-function scanDomForSizeGuide() {
-  const containerSelectors = [
-    "[class*=kiwi]",
-    "[class*=esc-size]",
-    "[class*=size-matters]",
-    "[class*=avada-size]",
-    "[class*=size-guide]",
-    "[class*=sizeguide]",
-    "[class*=size-chart]",
-    "[class*=sizechart]",
-    "[class*=fit-guide]",
-    "[class*=fitguide]",
-    "[id*=size-guide]",
-    "[id*=sizeguide]",
-    "[id*=size-chart]",
-    "[id*=sizechart]"
-  ];
-  for (const sel of containerSelectors) {
-    try {
-      for (const el of document.querySelectorAll(sel)) {
-        const tables = findSizeTables(el);
-        if (tables.length > 0) {
-          return { found: true, ...tables[0], unit: detectUnit(el) };
-        }
-      }
-    } catch {
-    }
-  }
-  const pageTables = findSizeTables(document);
-  if (pageTables.length > 0) {
-    return { found: true, ...pageTables[0] };
-  }
-  const sizeBtn = findSizeGuideButton();
-  if (sizeBtn) {
-    try {
-      sizeBtn.click();
-    } catch {
-    }
-    return { found: false, buttonClicked: true };
-  }
-  return { found: false };
-}
-function scanAfterClick() {
-  const images = [];
-  const overlaySelectors = [
-    "[class*=modal]",
-    "[class*=drawer]",
-    "[class*=popup]",
-    "[class*=overlay]",
-    "[role=dialog]",
-    "[aria-modal=true]",
-    "[class*=kiwi]",
-    "[class*=size-guide]",
-    "[class*=sizeguide]",
-    "[class*=size-chart]",
-    "[class*=sizechart]"
-  ];
-  for (const sel of overlaySelectors) {
-    try {
-      for (const el of document.querySelectorAll(sel)) {
-        if (el.classList.contains("ps-tryon-overlay")) continue;
-        const style = window.getComputedStyle(el);
-        if (style.display === "none" || style.visibility === "hidden") continue;
-        const tables = findSizeTables(el);
-        if (tables.length > 0) {
-          for (const img of el.querySelectorAll("img")) {
-            let src = img.src || img.getAttribute("data-src") || "";
-            if (src.startsWith("//")) src = `https:${src}`;
-            const w = img.naturalWidth || img.width || 0;
-            const h = img.naturalHeight || img.height || 0;
-            if (src.startsWith("http") && (w === 0 || w > 100) && (h === 0 || h > 100)) images.push(src);
-          }
-          return { found: true, ...tables[0], unit: detectUnit(el), images };
-        }
-      }
-    } catch {
-    }
-  }
-  const pageTables = findSizeTables(document);
-  if (pageTables.length > 0) return { found: true, ...pageTables[0], images };
-  return { found: false, images };
-}
 const SIZING_COUNTRIES = [
   { code: "US", label: "United States" },
   { code: "UK", label: "United Kingdom" },
@@ -323,14 +179,7 @@ function PrimeStyleTryonInner({
   onProcessing,
   onComplete,
   onError,
-  sizeGuide: sizeGuideProp,
-  productDescription,
-  productVendor,
-  productType,
-  productTags,
-  productVariants,
-  productOptions,
-  scanPageForSizeGuide = false
+  sizeGuideData
 }) {
   const [view, setView] = useState("idle");
   const [selectedFile, setSelectedFile] = useState(null);
@@ -435,64 +284,22 @@ function PrimeStyleTryonInner({
   useEffect(() => {
     if (view !== "sizing-choice" || sizeGuideFetchedRef.current || !apiRef.current) return;
     sizeGuideFetchedRef.current = true;
-    if (sizeGuideProp) {
-      setSizeGuide(sizeGuideProp);
+    if (!sizeGuideData) {
+      setSizeGuide({ found: false });
       return;
     }
-    if (scanPageForSizeGuide) {
-      setSizeGuideFetching(true);
-      const domResult = scanDomForSizeGuide();
-      if (domResult.found && domResult.headers && domResult.rows) {
-        setSizeGuide({ found: true, headers: domResult.headers, rows: domResult.rows });
-        setSizeGuideFetching(false);
-        return;
-      }
-      if (domResult.buttonClicked) {
-        setTimeout(() => {
-          const afterClick = scanAfterClick();
-          try {
-            document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
-          } catch {
-          }
-          try {
-            const closeBtn = document.querySelector("[role=dialog] button[aria-label*=close], [class*=modal] button[class*=close], [aria-modal=true] button");
-            if (closeBtn) closeBtn.click();
-          } catch {
-          }
-          if (afterClick.found && afterClick.headers && afterClick.rows) {
-            setSizeGuide({ found: true, headers: afterClick.headers, rows: afterClick.rows });
-            setSizeGuideFetching(false);
-            return;
-          }
-          fetchSizeGuideFromApi();
-        }, 800);
-        return;
-      }
-    }
-    fetchSizeGuideFromApi();
-    function fetchSizeGuideFromApi() {
-      setSizeGuideFetching(true);
-      const baseUrl = getApiUrl(apiUrl);
-      const key = getApiKey();
-      const productPayload = {
-        title: productTitle,
-        variants: productVariants || []
-      };
-      if (productDescription) productPayload.description = productDescription;
-      if (productVendor) productPayload.vendor = productVendor;
-      if (productType) productPayload.productType = productType;
-      if (productTags?.length) productPayload.tags = productTags;
-      if (productOptions?.length) productPayload.options = productOptions;
-      fetch(`${baseUrl}/api/v1/sizing/sizeguide`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json", Authorization: `Bearer ${key}` },
-        body: JSON.stringify({ product: productPayload })
-      }).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, sizeGuideProp, scanPageForSizeGuide]);
+    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 }, sizeGuideRaw: sizeGuideData })
+    }).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, sizeGuideData]);
   const stepIndex = useMemo(() => {
     switch (view) {
       case "welcome":
@@ -600,14 +407,7 @@ function PrimeStyleTryonInner({
     const payload = {
       method: sizingMethod,
       locale: sizingCountry,
-      product: {
-        title: productTitle,
-        description: productDescription || "",
-        variants: productVariants || [],
-        ...productVendor && { vendor: productVendor },
-        ...productType && { productType },
-        ...productTags?.length && { tags: productTags }
-      }
+      product: { title: productTitle, description: "", variants: [] }
     };
     if (sizeGuide?.found) payload.sizeGuide = sizeGuide;
     if (sizingMethod === "exact") {

package/package.json

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