@primestyleai/tryon 2.0.6 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/react/index.d.ts +23 -1
- package/dist/react/index.js +31 -4
- package/dist/types.d.ts +7 -0
- package/package.json +1 -1
package/dist/react/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type CSSProperties } from "react";
|
|
2
|
-
import type { ButtonStyles, ModalStyles, PrimeStyleClassNames } from "../types";
|
|
2
|
+
import type { ButtonStyles, ModalStyles, PrimeStyleClassNames, SizeGuideData } from "../types";
|
|
3
3
|
export interface PrimeStyleTryonProps {
|
|
4
4
|
productImage: string;
|
|
5
5
|
productTitle?: string;
|
|
@@ -23,5 +23,27 @@ export interface PrimeStyleTryonProps {
|
|
|
23
23
|
message: string;
|
|
24
24
|
code?: string;
|
|
25
25
|
}) => void;
|
|
26
|
+
/** Pre-computed size guide — skips AI extraction if provided */
|
|
27
|
+
sizeGuide?: SizeGuideData;
|
|
28
|
+
/** Product description HTML for AI size guide extraction */
|
|
29
|
+
productDescription?: string;
|
|
30
|
+
/** Product vendor/brand for AI extraction */
|
|
31
|
+
productVendor?: string;
|
|
32
|
+
/** Product type (e.g. "T-Shirt", "Jacket") */
|
|
33
|
+
productType?: string;
|
|
34
|
+
/** Product tags for AI extraction */
|
|
35
|
+
productTags?: string[];
|
|
36
|
+
/** Product variants with size options */
|
|
37
|
+
productVariants?: Array<{
|
|
38
|
+
title: string;
|
|
39
|
+
option1?: string | null;
|
|
40
|
+
option2?: string | null;
|
|
41
|
+
option3?: string | null;
|
|
42
|
+
}>;
|
|
43
|
+
/** Product options (e.g. [{name: "Size", values: ["S","M","L"]}]) */
|
|
44
|
+
productOptions?: Array<{
|
|
45
|
+
name: string;
|
|
46
|
+
values?: string[];
|
|
47
|
+
}>;
|
|
26
48
|
}
|
|
27
49
|
export declare function PrimeStyleTryon(props: PrimeStyleTryonProps): import("react/jsx-runtime").JSX.Element | null;
|
package/dist/react/index.js
CHANGED
|
@@ -178,7 +178,14 @@ function PrimeStyleTryonInner({
|
|
|
178
178
|
onUpload,
|
|
179
179
|
onProcessing,
|
|
180
180
|
onComplete,
|
|
181
|
-
onError
|
|
181
|
+
onError,
|
|
182
|
+
sizeGuide: sizeGuideProp,
|
|
183
|
+
productDescription,
|
|
184
|
+
productVendor,
|
|
185
|
+
productType,
|
|
186
|
+
productTags,
|
|
187
|
+
productVariants,
|
|
188
|
+
productOptions
|
|
182
189
|
}) {
|
|
183
190
|
const [view, setView] = useState("idle");
|
|
184
191
|
const [selectedFile, setSelectedFile] = useState(null);
|
|
@@ -283,18 +290,31 @@ function PrimeStyleTryonInner({
|
|
|
283
290
|
useEffect(() => {
|
|
284
291
|
if (view !== "sizing-choice" || sizeGuideFetchedRef.current || !apiRef.current) return;
|
|
285
292
|
sizeGuideFetchedRef.current = true;
|
|
293
|
+
if (sizeGuideProp) {
|
|
294
|
+
setSizeGuide(sizeGuideProp);
|
|
295
|
+
return;
|
|
296
|
+
}
|
|
286
297
|
setSizeGuideFetching(true);
|
|
287
298
|
const baseUrl = getApiUrl(apiUrl);
|
|
288
299
|
const key = getApiKey();
|
|
300
|
+
const productPayload = {
|
|
301
|
+
title: productTitle,
|
|
302
|
+
variants: productVariants || []
|
|
303
|
+
};
|
|
304
|
+
if (productDescription) productPayload.description = productDescription;
|
|
305
|
+
if (productVendor) productPayload.vendor = productVendor;
|
|
306
|
+
if (productType) productPayload.productType = productType;
|
|
307
|
+
if (productTags?.length) productPayload.tags = productTags;
|
|
308
|
+
if (productOptions?.length) productPayload.options = productOptions;
|
|
289
309
|
fetch(`${baseUrl}/api/v1/sizing/sizeguide`, {
|
|
290
310
|
method: "POST",
|
|
291
311
|
headers: { "Content-Type": "application/json", Authorization: `Bearer ${key}` },
|
|
292
|
-
body: JSON.stringify({ product:
|
|
312
|
+
body: JSON.stringify({ product: productPayload })
|
|
293
313
|
}).then((r) => r.ok ? r.json() : null).then((data) => {
|
|
294
314
|
if (data) setSizeGuide(data);
|
|
295
315
|
else setSizeGuide({ found: false });
|
|
296
316
|
}).catch(() => setSizeGuide({ found: false })).finally(() => setSizeGuideFetching(false));
|
|
297
|
-
}, [view, apiUrl, productTitle]);
|
|
317
|
+
}, [view, apiUrl, productTitle, sizeGuideProp]);
|
|
298
318
|
const stepIndex = useMemo(() => {
|
|
299
319
|
switch (view) {
|
|
300
320
|
case "welcome":
|
|
@@ -402,7 +422,14 @@ function PrimeStyleTryonInner({
|
|
|
402
422
|
const payload = {
|
|
403
423
|
method: sizingMethod,
|
|
404
424
|
locale: sizingCountry,
|
|
405
|
-
product: {
|
|
425
|
+
product: {
|
|
426
|
+
title: productTitle,
|
|
427
|
+
description: productDescription || "",
|
|
428
|
+
variants: productVariants || [],
|
|
429
|
+
...productVendor && { vendor: productVendor },
|
|
430
|
+
...productType && { productType },
|
|
431
|
+
...productTags?.length && { tags: productTags }
|
|
432
|
+
}
|
|
406
433
|
};
|
|
407
434
|
if (sizeGuide?.found) payload.sizeGuide = sizeGuide;
|
|
408
435
|
if (sizingMethod === "exact") {
|
package/dist/types.d.ts
CHANGED
|
@@ -130,6 +130,13 @@ export interface PrimeStyleClassNames {
|
|
|
130
130
|
/** Powered by footer */
|
|
131
131
|
poweredBy?: string;
|
|
132
132
|
}
|
|
133
|
+
/** Pre-computed size guide data — pass directly to skip AI extraction */
|
|
134
|
+
export interface SizeGuideData {
|
|
135
|
+
found: true;
|
|
136
|
+
title?: string;
|
|
137
|
+
headers: string[];
|
|
138
|
+
rows: string[][];
|
|
139
|
+
}
|
|
133
140
|
/** Custom events emitted by the component */
|
|
134
141
|
export interface PrimeStyleEvents {
|
|
135
142
|
"ps:open": CustomEvent<void>;
|