@primestyleai/tryon 3.8.0 → 3.9.1
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/PrimeStyleTryon.d.ts +1 -0
- package/dist/i18n/cs.d.ts +5 -0
- package/dist/i18n/da.d.ts +5 -0
- package/dist/i18n/de.d.ts +5 -0
- package/dist/i18n/en.d.ts +9 -0
- package/dist/i18n/es.d.ts +5 -0
- package/dist/i18n/fi.d.ts +5 -0
- package/dist/i18n/fr.d.ts +5 -0
- package/dist/i18n/index.d.ts +37 -0
- package/dist/i18n/it.d.ts +5 -0
- package/dist/i18n/ja.d.ts +5 -0
- package/dist/i18n/ko.d.ts +5 -0
- package/dist/i18n/nb.d.ts +5 -0
- package/dist/i18n/nl.d.ts +5 -0
- package/dist/i18n/pl.d.ts +5 -0
- package/dist/i18n/pt-br.d.ts +5 -0
- package/dist/i18n/pt-pt.d.ts +5 -0
- package/dist/i18n/sv.d.ts +5 -0
- package/dist/i18n/th.d.ts +5 -0
- package/dist/i18n/tr.d.ts +5 -0
- package/dist/i18n/zh-cn.d.ts +5 -0
- package/dist/i18n/zh-tw.d.ts +5 -0
- package/dist/index-B0KE3c8S.js +2951 -0
- package/dist/index.d.ts +2 -0
- package/dist/primestyle-tryon.js +35 -24
- package/dist/react/index.d.ts +2 -0
- package/dist/react/index.js +160 -132
- package/package.json +1 -1
- package/dist/image-utils-C9bJ1zKO.js +0 -186
package/dist/react/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { useState, useEffect,
|
|
4
|
-
import { A as ApiClient, S as SseClient, i as isValidImageFile,
|
|
3
|
+
import { useState, useEffect, useMemo, useRef, useCallback } from "react";
|
|
4
|
+
import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage, P as PrimeStyleError } from "../index-B0KE3c8S.js";
|
|
5
5
|
const HEADER_ALIASES = {
|
|
6
6
|
// ── Size label columns (skipped during field derivation) ──
|
|
7
7
|
size: "__size__",
|
|
@@ -216,18 +216,28 @@ function allKeysAreSectionNames(obj) {
|
|
|
216
216
|
function tryPreNormalized(input) {
|
|
217
217
|
if (!isObject(input)) return null;
|
|
218
218
|
const obj = input;
|
|
219
|
-
if (
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
219
|
+
if (!Array.isArray(obj.headers) || !Array.isArray(obj.rows) || obj.headers.length === 0 || obj.rows.length === 0) {
|
|
220
|
+
return null;
|
|
221
|
+
}
|
|
222
|
+
const headers = obj.headers;
|
|
223
|
+
let rows;
|
|
224
|
+
const firstRow = obj.rows[0];
|
|
225
|
+
if (Array.isArray(firstRow)) {
|
|
226
|
+
rows = obj.rows.map((r) => r.map(String));
|
|
227
|
+
} else if (isObject(firstRow)) {
|
|
228
|
+
rows = obj.rows.map(
|
|
229
|
+
(rowObj) => headers.map((h) => String(rowObj[h] ?? ""))
|
|
230
|
+
);
|
|
231
|
+
} else {
|
|
232
|
+
return null;
|
|
229
233
|
}
|
|
230
|
-
return
|
|
234
|
+
return {
|
|
235
|
+
found: true,
|
|
236
|
+
title: typeof obj.title === "string" ? obj.title : void 0,
|
|
237
|
+
headers,
|
|
238
|
+
rows,
|
|
239
|
+
requiredFields: Array.isArray(obj.requiredFields) && obj.requiredFields.length > 0 ? obj.requiredFields : deriveRequiredFields(headers)
|
|
240
|
+
};
|
|
231
241
|
}
|
|
232
242
|
function tryKeyValueObject(input) {
|
|
233
243
|
if (!isObject(input)) return null;
|
|
@@ -524,11 +534,12 @@ function PrimeStyleTryon(props) {
|
|
|
524
534
|
function PrimeStyleTryonInner({
|
|
525
535
|
productImage,
|
|
526
536
|
productTitle = "Product",
|
|
527
|
-
buttonText
|
|
537
|
+
buttonText,
|
|
528
538
|
apiUrl,
|
|
529
539
|
showPoweredBy = true,
|
|
530
540
|
showIcon = true,
|
|
531
541
|
buttonIcon,
|
|
542
|
+
locale,
|
|
532
543
|
buttonStyles: btnS = {},
|
|
533
544
|
modalStyles: mdlS = {},
|
|
534
545
|
classNames: cn = {},
|
|
@@ -542,6 +553,8 @@ function PrimeStyleTryonInner({
|
|
|
542
553
|
onError,
|
|
543
554
|
sizeGuideData
|
|
544
555
|
}) {
|
|
556
|
+
const t = useMemo(() => createT(locale), [locale]);
|
|
557
|
+
const resolvedButtonText = buttonText ?? t("Virtual Try-On");
|
|
545
558
|
const [view, setView] = useState("idle");
|
|
546
559
|
const [selectedFile, setSelectedFile] = useState(null);
|
|
547
560
|
const [previewUrl, setPreviewUrl] = useState(null);
|
|
@@ -610,12 +623,12 @@ function PrimeStyleTryonInner({
|
|
|
610
623
|
if (progressIntervalRef.current) return;
|
|
611
624
|
progressRef.current = 0;
|
|
612
625
|
const statuses = [
|
|
613
|
-
{ at: 0, text: "Preparing your image..." },
|
|
614
|
-
{ at: 15, text: "Analyzing body proportions..." },
|
|
615
|
-
{ at: 30, text: "Matching garment to your photo..." },
|
|
616
|
-
{ at: 50, text: "Generating virtual try-on..." },
|
|
617
|
-
{ at: 75, text: "Refining details..." },
|
|
618
|
-
{ at: 90, text: "Almost there..." }
|
|
626
|
+
{ at: 0, text: t("Preparing your image...") },
|
|
627
|
+
{ at: 15, text: t("Analyzing body proportions...") },
|
|
628
|
+
{ at: 30, text: t("Matching garment to your photo...") },
|
|
629
|
+
{ at: 50, text: t("Generating virtual try-on...") },
|
|
630
|
+
{ at: 75, text: t("Refining details...") },
|
|
631
|
+
{ at: 90, text: t("Almost there...") }
|
|
619
632
|
];
|
|
620
633
|
progressIntervalRef.current = setInterval(() => {
|
|
621
634
|
const p = progressRef.current;
|
|
@@ -751,13 +764,13 @@ function PrimeStyleTryonInner({
|
|
|
751
764
|
}, [onClose, previewUrl]);
|
|
752
765
|
const handleFileSelect = useCallback((file) => {
|
|
753
766
|
if (!isValidImageFile(file)) {
|
|
754
|
-
setErrorMessage("Please upload a JPEG, PNG, or WebP image.");
|
|
767
|
+
setErrorMessage(t("Please upload a JPEG, PNG, or WebP image."));
|
|
755
768
|
setView("error");
|
|
756
769
|
onError?.({ message: "Invalid file type", code: "INVALID_FILE" });
|
|
757
770
|
return;
|
|
758
771
|
}
|
|
759
772
|
if (file.size > 10 * 1024 * 1024) {
|
|
760
|
-
setErrorMessage("Image must be under 10MB.");
|
|
773
|
+
setErrorMessage(t("Image must be under 10MB."));
|
|
761
774
|
setView("error");
|
|
762
775
|
onError?.({ message: "File too large", code: "FILE_TOO_LARGE" });
|
|
763
776
|
return;
|
|
@@ -791,7 +804,7 @@ function PrimeStyleTryonInner({
|
|
|
791
804
|
progressRef.current = 100;
|
|
792
805
|
if (progressBarRef.current) progressBarRef.current.style.width = "100%";
|
|
793
806
|
if (progressTextRef.current) progressTextRef.current.textContent = "100%";
|
|
794
|
-
if (progressStatusRef.current) progressStatusRef.current.textContent = "Complete!";
|
|
807
|
+
if (progressStatusRef.current) progressStatusRef.current.textContent = t("Complete!");
|
|
795
808
|
cleanupJob();
|
|
796
809
|
setTimeout(() => setView("result"), 400);
|
|
797
810
|
onComplete?.({ jobId: update.galleryId, imageUrl: update.imageUrl });
|
|
@@ -800,7 +813,7 @@ function PrimeStyleTryonInner({
|
|
|
800
813
|
if (!completedRef.current) {
|
|
801
814
|
completedRef.current = true;
|
|
802
815
|
cleanupJob();
|
|
803
|
-
const msg = update.error || "Try-on generation failed";
|
|
816
|
+
const msg = update.error || t("Try-on generation failed");
|
|
804
817
|
setErrorMessage(msg);
|
|
805
818
|
setView("error");
|
|
806
819
|
onError?.({ message: msg });
|
|
@@ -875,7 +888,7 @@ function PrimeStyleTryonInner({
|
|
|
875
888
|
}, [apiUrl, sizingMethod, sizingCountry, heightUnit, weightUnit, sizingUnit, sizeGuide, productTitle, dynamicFields]);
|
|
876
889
|
const handleTryOnSubmit = useCallback(async () => {
|
|
877
890
|
if (!selectedFile || !apiRef.current || !sseRef.current) {
|
|
878
|
-
const msg = !apiRef.current ? "
|
|
891
|
+
const msg = !apiRef.current ? t("SDK not configured. Please provide an API key.") : t("Something went wrong");
|
|
879
892
|
setErrorMessage(msg);
|
|
880
893
|
setView("error");
|
|
881
894
|
onError?.({ message: msg, code: "SDK_NOT_CONFIGURED" });
|
|
@@ -910,7 +923,7 @@ function PrimeStyleTryonInner({
|
|
|
910
923
|
}
|
|
911
924
|
}, 3e3);
|
|
912
925
|
} catch (err) {
|
|
913
|
-
const message = err instanceof Error ? err.message : "Failed to start try-on";
|
|
926
|
+
const message = err instanceof Error ? err.message : t("Failed to start try-on");
|
|
914
927
|
const code = err instanceof PrimeStyleError ? err.code : void 0;
|
|
915
928
|
setErrorMessage(message);
|
|
916
929
|
setView("error");
|
|
@@ -1084,12 +1097,13 @@ function PrimeStyleTryonInner({
|
|
|
1084
1097
|
}, []);
|
|
1085
1098
|
const shoeField = useMemo(() => {
|
|
1086
1099
|
const map = {
|
|
1087
|
-
US: { key: "shoeUS",
|
|
1088
|
-
UK: { key: "shoeUK",
|
|
1089
|
-
AU: { key: "shoeUK",
|
|
1100
|
+
US: { key: "shoeUS", labelKey: "Shoe size (US)", ph: "e.g. 10" },
|
|
1101
|
+
UK: { key: "shoeUK", labelKey: "Shoe size (UK)", ph: "e.g. 9" },
|
|
1102
|
+
AU: { key: "shoeUK", labelKey: "Shoe size (UK)", ph: "e.g. 9" }
|
|
1090
1103
|
};
|
|
1091
|
-
|
|
1092
|
-
|
|
1104
|
+
const raw = map[sizingCountry] || { key: "shoeEU", labelKey: "Shoe size (EU)", ph: "e.g. 43" };
|
|
1105
|
+
return { key: raw.key, label: t(raw.labelKey), ph: raw.ph };
|
|
1106
|
+
}, [sizingCountry, t]);
|
|
1093
1107
|
const rootVars = {
|
|
1094
1108
|
"--ps-btn-bg": btnS.backgroundColor,
|
|
1095
1109
|
"--ps-btn-color": btnS.textColor,
|
|
@@ -1133,7 +1147,7 @@ function PrimeStyleTryonInner({
|
|
|
1133
1147
|
i > 1 && /* @__PURE__ */ jsx("div", { className: `ps-tryon-stepper-line${i <= stepIndex ? " ps-done" : ""}` }),
|
|
1134
1148
|
/* @__PURE__ */ jsxs("div", { className: `ps-tryon-stepper-step${i < stepIndex ? " ps-done" : i === stepIndex ? " ps-active" : ""}`, children: [
|
|
1135
1149
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-stepper-circle", children: i < stepIndex ? /* @__PURE__ */ jsx(CheckIcon, {}) : i }),
|
|
1136
|
-
/* @__PURE__ */ jsx("div", { className: "ps-tryon-stepper-label", children: STEP_LABELS[i] })
|
|
1150
|
+
/* @__PURE__ */ jsx("div", { className: "ps-tryon-stepper-label", children: t(STEP_LABELS[i]) })
|
|
1137
1151
|
] })
|
|
1138
1152
|
] }, i)) }) });
|
|
1139
1153
|
}
|
|
@@ -1162,33 +1176,35 @@ function PrimeStyleTryonInner({
|
|
|
1162
1176
|
/* @__PURE__ */ jsx("img", { src: productImage, alt: "Product", className: "ps-tryon-welcome-product" }),
|
|
1163
1177
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-welcome-sparkle", children: /* @__PURE__ */ jsx(SparkleIcon, { size: 20 }) })
|
|
1164
1178
|
] }),
|
|
1165
|
-
/* @__PURE__ */ jsx("h2", { className: "ps-tryon-welcome-title", children: "Find Your Perfect Size" }),
|
|
1166
|
-
/* @__PURE__ */ jsx("p", { className: "ps-tryon-welcome-sub", children: "Get your size instantly, then try it on" })
|
|
1179
|
+
/* @__PURE__ */ jsx("h2", { className: "ps-tryon-welcome-title", children: t("Find Your Perfect Size") }),
|
|
1180
|
+
/* @__PURE__ */ jsx("p", { className: "ps-tryon-welcome-sub", children: t("Get your size instantly, then try it on") })
|
|
1167
1181
|
] }),
|
|
1168
1182
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-features", children: [
|
|
1169
|
-
{ icon: /* @__PURE__ */ jsx(RulerIcon, {}), title: "Get Your Size", desc: "Instant fit recommendation" },
|
|
1170
|
-
{ icon: /* @__PURE__ */ jsx(CameraIcon, {}), title: "Try It On", desc: "See how it looks on you" }
|
|
1183
|
+
{ icon: /* @__PURE__ */ jsx(RulerIcon, {}), title: t("Get Your Size"), desc: t("Instant fit recommendation") },
|
|
1184
|
+
{ icon: /* @__PURE__ */ jsx(CameraIcon, {}), title: t("Try It On"), desc: t("See how it looks on you") }
|
|
1171
1185
|
].map((f, i) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-feature", children: [
|
|
1172
1186
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-feature-icon", children: f.icon }),
|
|
1173
1187
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-feature-title", children: f.title }),
|
|
1174
1188
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-feature-desc", children: f.desc })
|
|
1175
1189
|
] }, i)) }),
|
|
1176
1190
|
/* @__PURE__ */ jsxs("button", { className: "ps-tryon-cta", onClick: () => setView("sizing-choice"), children: [
|
|
1177
|
-
"Find My Size
|
|
1191
|
+
t("Find My Size"),
|
|
1192
|
+
" ",
|
|
1178
1193
|
/* @__PURE__ */ jsx(ArrowRightIcon, {})
|
|
1179
1194
|
] }),
|
|
1180
|
-
/* @__PURE__ */ jsx("div", { className: "ps-tryon-welcome-note", children: "Takes less than a minute" })
|
|
1195
|
+
/* @__PURE__ */ jsx("div", { className: "ps-tryon-welcome-note", children: t("Takes less than a minute") })
|
|
1181
1196
|
] });
|
|
1182
1197
|
}
|
|
1183
1198
|
function UploadView() {
|
|
1184
1199
|
return /* @__PURE__ */ jsx(Fragment, { children: selectedFile && previewUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1185
1200
|
/* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-preview", cn.preview), children: [
|
|
1186
1201
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-preview-blur", style: { backgroundImage: `url(${previewUrl})` } }),
|
|
1187
|
-
/* @__PURE__ */ jsx("img", { src: previewUrl, alt: "Your photo", className: cn.previewImage }),
|
|
1202
|
+
/* @__PURE__ */ jsx("img", { src: previewUrl, alt: t("Your photo"), className: cn.previewImage }),
|
|
1188
1203
|
/* @__PURE__ */ jsx("button", { onClick: handleRemovePreview, className: cx("ps-tryon-preview-remove", cn.removeButton), children: "×" })
|
|
1189
1204
|
] }),
|
|
1190
1205
|
/* @__PURE__ */ jsxs("button", { onClick: handleTryOnSubmit, className: cx("ps-tryon-submit", cn.submitButton), children: [
|
|
1191
|
-
"Try It On
|
|
1206
|
+
t("Try It On"),
|
|
1207
|
+
" ",
|
|
1192
1208
|
/* @__PURE__ */ jsx(ArrowRightIcon, {})
|
|
1193
1209
|
] })
|
|
1194
1210
|
] }) : /* @__PURE__ */ jsxs(
|
|
@@ -1222,8 +1238,8 @@ function PrimeStyleTryonInner({
|
|
|
1222
1238
|
}
|
|
1223
1239
|
),
|
|
1224
1240
|
/* @__PURE__ */ jsx(UploadIcon, {}),
|
|
1225
|
-
/* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-text", cn.uploadText), children: "Upload a full body photo" }),
|
|
1226
|
-
/* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-hint", cn.uploadHint), children: "JPEG, PNG or WebP (max 10MB)" })
|
|
1241
|
+
/* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-text", cn.uploadText), children: t("Upload a full body photo") }),
|
|
1242
|
+
/* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-hint", cn.uploadHint), children: t("JPEG, PNG or WebP (max 10MB)") })
|
|
1227
1243
|
]
|
|
1228
1244
|
}
|
|
1229
1245
|
) });
|
|
@@ -1235,16 +1251,17 @@ function PrimeStyleTryonInner({
|
|
|
1235
1251
|
return /* @__PURE__ */ jsx("div", { className: "ps-tryon-sizing-choice", children: /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sg-checking", children: [
|
|
1236
1252
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-sg-checking-icon", children: /* @__PURE__ */ jsx(RulerIcon, { size: 32 }) }),
|
|
1237
1253
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-sg-checking-bar-wrap", children: /* @__PURE__ */ jsx("div", { className: "ps-tryon-sg-checking-bar" }) }),
|
|
1238
|
-
/* @__PURE__ */ jsx("h3", { className: "ps-tryon-section-title", children: "Checking size guide..." }),
|
|
1239
|
-
/* @__PURE__ */ jsx("p", { className: "ps-tryon-sg-checking-sub", children: "Looking for size chart data for this product" })
|
|
1254
|
+
/* @__PURE__ */ jsx("h3", { className: "ps-tryon-section-title", children: t("Checking size guide...") }),
|
|
1255
|
+
/* @__PURE__ */ jsx("p", { className: "ps-tryon-sg-checking-sub", children: t("Looking for size chart data for this product") })
|
|
1240
1256
|
] }) });
|
|
1241
1257
|
}
|
|
1242
1258
|
return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sizing-choice", children: [
|
|
1243
|
-
/* @__PURE__ */ jsx("h3", { className: "ps-tryon-section-title", children: "How would you like to find your size?" }),
|
|
1244
|
-
sgChecked && !sgAvailable && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sg-notice", children: "Size guide is not available for this product — sizing will use standard measurements" }),
|
|
1259
|
+
/* @__PURE__ */ jsx("h3", { className: "ps-tryon-section-title", children: t("How would you like to find your size?") }),
|
|
1260
|
+
sgChecked && !sgAvailable && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sg-notice", children: t("Size guide is not available for this product — sizing will use standard measurements") }),
|
|
1245
1261
|
sgChecked && sgAvailable && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sg-notice ps-tryon-sg-found", children: [
|
|
1246
1262
|
/* @__PURE__ */ jsx(CheckIcon, { size: 14 }),
|
|
1247
|
-
"
|
|
1263
|
+
" ",
|
|
1264
|
+
t("Size guide found for this product")
|
|
1248
1265
|
] }),
|
|
1249
1266
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-cards", children: [
|
|
1250
1267
|
/* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
|
|
@@ -1253,10 +1270,10 @@ function PrimeStyleTryonInner({
|
|
|
1253
1270
|
}, children: [
|
|
1254
1271
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-icon", children: /* @__PURE__ */ jsx(RulerIcon, { size: 24 }) }),
|
|
1255
1272
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-info", children: [
|
|
1256
|
-
/* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: "Enter my measurements" }),
|
|
1257
|
-
/* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: sizeGuide?.requiredFields?.length ? sizeGuide.requiredFields.filter((f) => f.required).slice(0, 3).map((f) => f.label).join(", ") + (sizeGuide.requiredFields.length > 3 ? "
|
|
1273
|
+
/* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: t("Enter my measurements") }),
|
|
1274
|
+
/* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: sizeGuide?.requiredFields?.length ? sizeGuide.requiredFields.filter((f) => f.required).slice(0, 3).map((f) => t(f.label)).join(", ") + (sizeGuide.requiredFields.length > 3 ? ` ${t("& more")}` : "") : t("Chest, waist, hips, shoes & more") })
|
|
1258
1275
|
] }),
|
|
1259
|
-
/* @__PURE__ */ jsx("span", { className: "ps-tryon-choice-badge", children: "Best accuracy" })
|
|
1276
|
+
/* @__PURE__ */ jsx("span", { className: "ps-tryon-choice-badge", children: t("Best accuracy") })
|
|
1260
1277
|
] }),
|
|
1261
1278
|
/* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
|
|
1262
1279
|
setSizingMethod("quick");
|
|
@@ -1264,8 +1281,8 @@ function PrimeStyleTryonInner({
|
|
|
1264
1281
|
}, children: [
|
|
1265
1282
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-icon", children: /* @__PURE__ */ jsx(SparkleIcon, { size: 24 }) }),
|
|
1266
1283
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-info", children: [
|
|
1267
|
-
/* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: "Just height & weight" }),
|
|
1268
|
-
/* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: "Quick estimate in seconds" })
|
|
1284
|
+
/* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: t("Just height & weight") }),
|
|
1285
|
+
/* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: t("Quick estimate in seconds") })
|
|
1269
1286
|
] })
|
|
1270
1287
|
] }),
|
|
1271
1288
|
/* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
|
|
@@ -1274,8 +1291,8 @@ function PrimeStyleTryonInner({
|
|
|
1274
1291
|
}, children: [
|
|
1275
1292
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-icon", children: /* @__PURE__ */ jsx(CameraIcon, { size: 24 }) }),
|
|
1276
1293
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-info", children: [
|
|
1277
|
-
/* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: "Skip, just try it on" }),
|
|
1278
|
-
/* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: "Upload a photo to see how it looks" })
|
|
1294
|
+
/* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: t("Skip, just try it on") }),
|
|
1295
|
+
/* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: t("Upload a photo to see how it looks") })
|
|
1279
1296
|
] })
|
|
1280
1297
|
] })
|
|
1281
1298
|
] })
|
|
@@ -1289,37 +1306,38 @@ function PrimeStyleTryonInner({
|
|
|
1289
1306
|
return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sizing-form", children: [
|
|
1290
1307
|
/* @__PURE__ */ jsxs("button", { className: "ps-tryon-back", onClick: () => setView("sizing-choice"), children: [
|
|
1291
1308
|
/* @__PURE__ */ jsx(ArrowLeftIcon, {}),
|
|
1292
|
-
"
|
|
1309
|
+
" ",
|
|
1310
|
+
t("Back")
|
|
1293
1311
|
] }),
|
|
1294
1312
|
sizingMethod === "exact" && profiles.length > 0 && /* @__PURE__ */ jsx("div", { className: "ps-tryon-profile-bar", children: /* @__PURE__ */ jsxs("select", { className: "ps-tryon-profile-select", value: activeProfileId || "", onChange: (e) => {
|
|
1295
1313
|
if (e.target.value) applyProfile(e.target.value);
|
|
1296
1314
|
}, children: [
|
|
1297
|
-
/* @__PURE__ */ jsx("option", { value: "", children: "Auto-fill from saved profile..." }),
|
|
1315
|
+
/* @__PURE__ */ jsx("option", { value: "", children: t("Auto-fill from saved profile...") }),
|
|
1298
1316
|
profiles.map((p) => /* @__PURE__ */ jsxs("option", { value: p.id, children: [
|
|
1299
1317
|
p.name,
|
|
1300
1318
|
" (",
|
|
1301
|
-
p.gender === "female" ? "Women's" : "Men's",
|
|
1319
|
+
p.gender === "female" ? t("Women's") : t("Men's"),
|
|
1302
1320
|
")"
|
|
1303
1321
|
] }, p.id))
|
|
1304
1322
|
] }) }),
|
|
1305
1323
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
|
|
1306
|
-
/* @__PURE__ */ jsx("label", { children: "I'm shopping for" }),
|
|
1324
|
+
/* @__PURE__ */ jsx("label", { children: t("I'm shopping for") }),
|
|
1307
1325
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-unit-toggle", children: [
|
|
1308
1326
|
/* @__PURE__ */ jsx("button", { className: `ps-tryon-unit-btn${!isFemale ? " ps-active" : ""}`, onClick: () => {
|
|
1309
1327
|
updateField("gender", "male");
|
|
1310
1328
|
setFormGender("male");
|
|
1311
|
-
}, children: "Men's" }),
|
|
1329
|
+
}, children: t("Men's") }),
|
|
1312
1330
|
/* @__PURE__ */ jsx("button", { className: `ps-tryon-unit-btn${isFemale ? " ps-active" : ""}`, onClick: () => {
|
|
1313
1331
|
updateField("gender", "female");
|
|
1314
1332
|
setFormGender("female");
|
|
1315
|
-
}, children: "Women's" })
|
|
1333
|
+
}, children: t("Women's") })
|
|
1316
1334
|
] })
|
|
1317
1335
|
] }),
|
|
1318
1336
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
|
|
1319
|
-
/* @__PURE__ */ jsx("label", { children: "Sizing region" }),
|
|
1320
|
-
/* @__PURE__ */ jsx("select", { className: "ps-tryon-country-select", value: sizingCountry, onChange: (e) => setSizingCountry(e.target.value), children: SIZING_COUNTRIES.map((c) => /* @__PURE__ */ jsx("option", { value: c.code, children: c.label }, c.code)) })
|
|
1337
|
+
/* @__PURE__ */ jsx("label", { children: t("Sizing region") }),
|
|
1338
|
+
/* @__PURE__ */ jsx("select", { className: "ps-tryon-country-select", value: sizingCountry, onChange: (e) => setSizingCountry(e.target.value), children: SIZING_COUNTRIES.map((c) => /* @__PURE__ */ jsx("option", { value: c.code, children: t(c.label) }, c.code)) })
|
|
1321
1339
|
] }),
|
|
1322
|
-
sizingMethod === "exact" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: "cm", value: "cm" }, { label: "in", value: "in" }], value: sizingUnit, onChange: (v) => {
|
|
1340
|
+
sizingMethod === "exact" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: t("cm"), value: "cm" }, { label: t("in"), value: "in" }], value: sizingUnit, onChange: (v) => {
|
|
1323
1341
|
setSizingUnit(v);
|
|
1324
1342
|
setHeightUnit(v === "cm" ? "cm" : "ft");
|
|
1325
1343
|
setWeightUnit(v === "cm" ? "kg" : "lbs");
|
|
@@ -1336,7 +1354,7 @@ function PrimeStyleTryonInner({
|
|
|
1336
1354
|
const showOriginal = field.key !== key;
|
|
1337
1355
|
return /* @__PURE__ */ jsxs("span", { children: [
|
|
1338
1356
|
/* @__PURE__ */ jsx(InputRow, { label: `${regionField.label}${field.required ? " *" : ""}`, fieldKey: key, placeholder: regionField.ph }),
|
|
1339
|
-
showOriginal && /* @__PURE__ */ jsx(InputRow, { label: field.label, fieldKey: field.key, placeholder: field.placeholder })
|
|
1357
|
+
showOriginal && /* @__PURE__ */ jsx(InputRow, { label: t(field.label), fieldKey: field.key, placeholder: field.placeholder })
|
|
1340
1358
|
] }, field.key);
|
|
1341
1359
|
}
|
|
1342
1360
|
const phNum = parseFloat(field.placeholder?.replace(/[^0-9.]/g, "") || "");
|
|
@@ -1345,7 +1363,7 @@ function PrimeStyleTryonInner({
|
|
|
1345
1363
|
return /* @__PURE__ */ jsx(
|
|
1346
1364
|
InputRow,
|
|
1347
1365
|
{
|
|
1348
|
-
label: `${field.label}${field.required ? " *" : ""}`,
|
|
1366
|
+
label: `${t(field.label)}${field.required ? " *" : ""}`,
|
|
1349
1367
|
fieldKey: field.key,
|
|
1350
1368
|
placeholder,
|
|
1351
1369
|
type: "number",
|
|
@@ -1370,11 +1388,11 @@ function PrimeStyleTryonInner({
|
|
|
1370
1388
|
const allOptFields = [...optFields, ...profileExtras];
|
|
1371
1389
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1372
1390
|
reqFields.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1373
|
-
/* @__PURE__ */ jsx("div", { className: "ps-tryon-section-label", children: "Required for this product" }),
|
|
1391
|
+
/* @__PURE__ */ jsx("div", { className: "ps-tryon-section-label", children: t("Required for this product") }),
|
|
1374
1392
|
reqFields.map(renderField)
|
|
1375
1393
|
] }),
|
|
1376
1394
|
isFemale && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
|
|
1377
|
-
/* @__PURE__ */ jsx("label", { children: "Fit type" }),
|
|
1395
|
+
/* @__PURE__ */ jsx("label", { children: t("Fit type") }),
|
|
1378
1396
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-unit-toggle", children: ["petite", "standard", "tall", "plus"].map((fp) => /* @__PURE__ */ jsx(
|
|
1379
1397
|
"button",
|
|
1380
1398
|
{
|
|
@@ -1382,9 +1400,10 @@ function PrimeStyleTryonInner({
|
|
|
1382
1400
|
onClick: (e) => {
|
|
1383
1401
|
updateField("fitPreference", fp);
|
|
1384
1402
|
const btns = e.target.parentElement.querySelectorAll(".ps-tryon-unit-btn");
|
|
1385
|
-
btns.forEach((b) => b.classList.toggle("ps-active", b.
|
|
1403
|
+
btns.forEach((b) => b.classList.toggle("ps-active", b.dataset.fp === fp));
|
|
1386
1404
|
},
|
|
1387
|
-
|
|
1405
|
+
"data-fp": fp,
|
|
1406
|
+
children: t(fp.charAt(0).toUpperCase() + fp.slice(1))
|
|
1388
1407
|
},
|
|
1389
1408
|
fp
|
|
1390
1409
|
)) })
|
|
@@ -1399,7 +1418,7 @@ function PrimeStyleTryonInner({
|
|
|
1399
1418
|
if (arrow) arrow.style.transform = open ? "rotate(0deg)" : "rotate(180deg)";
|
|
1400
1419
|
}
|
|
1401
1420
|
}, children: [
|
|
1402
|
-
/* @__PURE__ */ jsx("span", { children: "Optional — improve accuracy & save to profile" }),
|
|
1421
|
+
/* @__PURE__ */ jsx("span", { children: t("Optional — improve accuracy & save to profile") }),
|
|
1403
1422
|
/* @__PURE__ */ jsx("span", { className: "ps-tryon-chevron", children: "▾" })
|
|
1404
1423
|
] }),
|
|
1405
1424
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-optional-fields", style: { display: "none" }, children: allOptFields.map(renderField) })
|
|
@@ -1407,33 +1426,39 @@ function PrimeStyleTryonInner({
|
|
|
1407
1426
|
] });
|
|
1408
1427
|
})() }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1409
1428
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
|
|
1410
|
-
/* @__PURE__ */
|
|
1429
|
+
/* @__PURE__ */ jsxs("label", { children: [
|
|
1430
|
+
t("Height"),
|
|
1431
|
+
" *"
|
|
1432
|
+
] }),
|
|
1411
1433
|
heightUnit === "ft" ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-height-ft", children: [
|
|
1412
1434
|
/* @__PURE__ */ jsx("input", { type: "number", placeholder: "5", defaultValue: formRef.current.heightFeet || "", onInput: (e) => updateField("heightFeet", e.target.value) }),
|
|
1413
|
-
/* @__PURE__ */ jsx("span", { children: "ft" }),
|
|
1435
|
+
/* @__PURE__ */ jsx("span", { children: t("ft") }),
|
|
1414
1436
|
/* @__PURE__ */ jsx("input", { type: "number", placeholder: "4", defaultValue: formRef.current.heightInches || "", onInput: (e) => updateField("heightInches", e.target.value) }),
|
|
1415
|
-
/* @__PURE__ */ jsx("span", { children: "in" })
|
|
1437
|
+
/* @__PURE__ */ jsx("span", { children: t("in") })
|
|
1416
1438
|
] }) : /* @__PURE__ */ jsx("input", { type: "number", placeholder: "e.g. 175", defaultValue: formRef.current.height || "", onInput: (e) => updateField("height", e.target.value) }),
|
|
1417
|
-
/* @__PURE__ */ jsx(UnitToggle, { options: [{ label: "cm", value: "cm" }, { label: "ft", value: "ft" }], value: heightUnit, onChange: setHeightUnit })
|
|
1439
|
+
/* @__PURE__ */ jsx(UnitToggle, { options: [{ label: t("cm"), value: "cm" }, { label: t("ft"), value: "ft" }], value: heightUnit, onChange: setHeightUnit })
|
|
1418
1440
|
] }),
|
|
1419
1441
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
|
|
1420
|
-
/* @__PURE__ */
|
|
1442
|
+
/* @__PURE__ */ jsxs("label", { children: [
|
|
1443
|
+
t("Weight"),
|
|
1444
|
+
" *"
|
|
1445
|
+
] }),
|
|
1421
1446
|
/* @__PURE__ */ jsx("input", { type: "number", placeholder: weightUnit === "lbs" ? "e.g. 170" : "e.g. 75", defaultValue: formRef.current.weight || "", onInput: (e) => updateField("weight", e.target.value) }),
|
|
1422
|
-
/* @__PURE__ */ jsx(UnitToggle, { options: [{ label: "kg", value: "kg" }, { label: "lbs", value: "lbs" }], value: weightUnit, onChange: setWeightUnit })
|
|
1447
|
+
/* @__PURE__ */ jsx(UnitToggle, { options: [{ label: t("kg"), value: "kg" }, { label: t("lbs"), value: "lbs" }], value: weightUnit, onChange: setWeightUnit })
|
|
1423
1448
|
] })
|
|
1424
1449
|
] }),
|
|
1425
|
-
/* @__PURE__ */ jsx("p", { className: "ps-tryon-disclaimer", children: "Fill in what you know — more measurements = better accuracy." }),
|
|
1450
|
+
/* @__PURE__ */ jsx("p", { className: "ps-tryon-disclaimer", children: t("Fill in what you know — more measurements = better accuracy.") }),
|
|
1426
1451
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-form-save-toggle", children: [
|
|
1427
1452
|
/* @__PURE__ */ jsxs("label", { className: "ps-tryon-form-save-check", children: [
|
|
1428
1453
|
/* @__PURE__ */ jsx("input", { type: "checkbox", checked: saveToggle, onChange: (e) => setSaveToggle(e.target.checked) }),
|
|
1429
|
-
/* @__PURE__ */ jsx("span", { children: "Save as profile" })
|
|
1454
|
+
/* @__PURE__ */ jsx("span", { children: t("Save as profile") })
|
|
1430
1455
|
] }),
|
|
1431
1456
|
saveToggle && /* @__PURE__ */ jsx(
|
|
1432
1457
|
"input",
|
|
1433
1458
|
{
|
|
1434
1459
|
type: "text",
|
|
1435
1460
|
className: "ps-tryon-form-save-name",
|
|
1436
|
-
placeholder: "Profile name (e.g. John, Sarah)",
|
|
1461
|
+
placeholder: t("Profile name (e.g. John, Sarah)"),
|
|
1437
1462
|
value: saveFormName,
|
|
1438
1463
|
onChange: (e) => setSaveFormName(e.target.value)
|
|
1439
1464
|
}
|
|
@@ -1447,50 +1472,51 @@ function PrimeStyleTryonInner({
|
|
|
1447
1472
|
submitSizing();
|
|
1448
1473
|
setView("size-result");
|
|
1449
1474
|
}, children: [
|
|
1450
|
-
"Get My Size
|
|
1475
|
+
t("Get My Size"),
|
|
1476
|
+
" ",
|
|
1451
1477
|
/* @__PURE__ */ jsx(ArrowRightIcon, {})
|
|
1452
1478
|
] })
|
|
1453
1479
|
] }, `form-${formGender}-${sizingUnit}-${heightUnit}-${sizingCountry}-${formKey}`);
|
|
1454
1480
|
}
|
|
1455
1481
|
function SizeResultView() {
|
|
1456
1482
|
const [showFitDetails, setShowFitDetails] = useState(false);
|
|
1457
|
-
const confidenceLabel = sizingResult?.confidence === "high" ? "High Confidence" : sizingResult?.confidence === "medium" ? "Medium Confidence" : sizingResult?.confidence === "low" ? "Low Confidence" : "";
|
|
1483
|
+
const confidenceLabel = sizingResult?.confidence === "high" ? t("High Confidence") : sizingResult?.confidence === "medium" ? t("Medium Confidence") : sizingResult?.confidence === "low" ? t("Low Confidence") : "";
|
|
1458
1484
|
return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-result-view", children: [
|
|
1459
1485
|
sizingLoading && !sizingResult && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-recommend ps-tryon-sizing-loading", children: [
|
|
1460
1486
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner" }),
|
|
1461
|
-
/* @__PURE__ */ jsx("p", { className: "ps-tryon-size-reasoning", children: "Analyzing your size..." })
|
|
1487
|
+
/* @__PURE__ */ jsx("p", { className: "ps-tryon-size-reasoning", children: t("Analyzing your size...") })
|
|
1462
1488
|
] }),
|
|
1463
1489
|
sizingResult && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1464
1490
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-recommend", children: [
|
|
1465
|
-
/* @__PURE__ */ jsx("h3", { className: "ps-tryon-size-title", children: "Your Size" }),
|
|
1491
|
+
/* @__PURE__ */ jsx("h3", { className: "ps-tryon-size-title", children: t("Your Size") }),
|
|
1466
1492
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-hero-row", children: [
|
|
1467
1493
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-size-badge", children: sizingResult.recommendedSize }),
|
|
1468
1494
|
/* @__PURE__ */ jsx("span", { className: `ps-tryon-size-conf-label ps-conf-${sizingResult.confidence}`, children: confidenceLabel })
|
|
1469
1495
|
] }),
|
|
1470
1496
|
sizingResult.sections && Object.keys(sizingResult.sections).length > 1 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-multi-section", children: [
|
|
1471
|
-
/* @__PURE__ */ jsx("h4", { className: "ps-tryon-fit-summary-title", children: "Sizing by Garment" }),
|
|
1497
|
+
/* @__PURE__ */ jsx("h4", { className: "ps-tryon-fit-summary-title", children: t("Sizing by Garment") }),
|
|
1472
1498
|
Object.entries(sizingResult.sections).map(([name, sec]) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-section-row", children: [
|
|
1473
1499
|
/* @__PURE__ */ jsx("span", { className: "ps-tryon-section-name", children: name }),
|
|
1474
1500
|
/* @__PURE__ */ jsx("span", { className: "ps-tryon-size-badge ps-tryon-section-badge", children: sec.recommendedSize })
|
|
1475
1501
|
] }, name))
|
|
1476
1502
|
] }),
|
|
1477
1503
|
sizingResult.matchDetails && sizingResult.matchDetails.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-fit-summary", children: [
|
|
1478
|
-
/* @__PURE__ */ jsx("h4", { className: "ps-tryon-fit-summary-title", children: "Fit Summary" }),
|
|
1504
|
+
/* @__PURE__ */ jsx("h4", { className: "ps-tryon-fit-summary-title", children: t("Fit Summary") }),
|
|
1479
1505
|
sizingResult.matchDetails.map((m, i) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-fit-row", children: [
|
|
1480
1506
|
/* @__PURE__ */ jsx("span", { className: `ps-tryon-fit-icon ps-fit-icon-${m.fit}`, children: m.fit === "good" ? "✓" : m.fit === "tight" ? "↑" : "↓" }),
|
|
1481
1507
|
/* @__PURE__ */ jsxs("span", { className: "ps-tryon-fit-text", children: [
|
|
1482
1508
|
/* @__PURE__ */ jsx("strong", { children: m.measurement }),
|
|
1483
1509
|
" ",
|
|
1484
|
-
m.fit === "good" ? "within range" : m.fit === "tight" ? "may be snug" : "may be loose"
|
|
1510
|
+
m.fit === "good" ? t("within range") : m.fit === "tight" ? t("may be snug") : t("may be loose")
|
|
1485
1511
|
] })
|
|
1486
1512
|
] }, i)),
|
|
1487
|
-
/* @__PURE__ */ jsx("button", { className: "ps-tryon-fit-details-toggle", onClick: () => setShowFitDetails(!showFitDetails), children: showFitDetails ? "Hide details
|
|
1513
|
+
/* @__PURE__ */ jsx("button", { className: "ps-tryon-fit-details-toggle", onClick: () => setShowFitDetails(!showFitDetails), children: showFitDetails ? `${t("Hide details")} ↑` : `${t("See details")} ↓` }),
|
|
1488
1514
|
showFitDetails && /* @__PURE__ */ jsxs("table", { className: "ps-tryon-fit-table", children: [
|
|
1489
1515
|
/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
|
|
1490
|
-
/* @__PURE__ */ jsx("th", { children: "Area" }),
|
|
1491
|
-
/* @__PURE__ */ jsx("th", { children: "You" }),
|
|
1492
|
-
/* @__PURE__ */ jsx("th", { children: "Chart" }),
|
|
1493
|
-
/* @__PURE__ */ jsx("th", { children: "Fit" })
|
|
1516
|
+
/* @__PURE__ */ jsx("th", { children: t("Area") }),
|
|
1517
|
+
/* @__PURE__ */ jsx("th", { children: t("You") }),
|
|
1518
|
+
/* @__PURE__ */ jsx("th", { children: t("Chart") }),
|
|
1519
|
+
/* @__PURE__ */ jsx("th", { children: t("Fit") })
|
|
1494
1520
|
] }) }),
|
|
1495
1521
|
/* @__PURE__ */ jsx("tbody", { children: sizingResult.matchDetails.map((m, i) => /* @__PURE__ */ jsxs("tr", { children: [
|
|
1496
1522
|
/* @__PURE__ */ jsx("td", { children: m.measurement }),
|
|
@@ -1501,7 +1527,7 @@ function PrimeStyleTryonInner({
|
|
|
1501
1527
|
] })
|
|
1502
1528
|
] }),
|
|
1503
1529
|
sizingResult.internationalSizes && Object.keys(sizingResult.internationalSizes).length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-equiv-section", children: [
|
|
1504
|
-
/* @__PURE__ */ jsx("h4", { className: "ps-tryon-equiv-title", children: "Equivalent Sizes" }),
|
|
1530
|
+
/* @__PURE__ */ jsx("h4", { className: "ps-tryon-equiv-title", children: t("Equivalent Sizes") }),
|
|
1505
1531
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-equiv-chips", children: Object.entries(sizingResult.internationalSizes).map(([k, v]) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-equiv-chip", children: [
|
|
1506
1532
|
/* @__PURE__ */ jsx("span", { className: "ps-tryon-equiv-region", children: k }),
|
|
1507
1533
|
/* @__PURE__ */ jsx("span", { className: "ps-tryon-equiv-value", children: v })
|
|
@@ -1511,10 +1537,11 @@ function PrimeStyleTryonInner({
|
|
|
1511
1537
|
] }),
|
|
1512
1538
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-tryon-cta", children: [
|
|
1513
1539
|
/* @__PURE__ */ jsxs("button", { className: "ps-tryon-cta", onClick: () => setView("upload"), children: [
|
|
1514
|
-
"See how it looks on you
|
|
1540
|
+
t("See how it looks on you"),
|
|
1541
|
+
" ",
|
|
1515
1542
|
/* @__PURE__ */ jsx(ArrowRightIcon, {})
|
|
1516
1543
|
] }),
|
|
1517
|
-
/* @__PURE__ */ jsx("button", { className: "ps-tryon-btn-secondary", onClick: handleClose, children: "Done" })
|
|
1544
|
+
/* @__PURE__ */ jsx("button", { className: "ps-tryon-btn-secondary", onClick: handleClose, children: t("Done") })
|
|
1518
1545
|
] })
|
|
1519
1546
|
] })
|
|
1520
1547
|
] });
|
|
@@ -1535,7 +1562,7 @@ function PrimeStyleTryonInner({
|
|
|
1535
1562
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing-image-wrap", children: [
|
|
1536
1563
|
previewUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1537
1564
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-processing-blur", style: { backgroundImage: `url(${previewUrl})` } }),
|
|
1538
|
-
/* @__PURE__ */ jsx("img", { src: previewUrl, alt: "Your photo", className: "ps-tryon-processing-model" })
|
|
1565
|
+
/* @__PURE__ */ jsx("img", { src: previewUrl, alt: t("Your photo"), className: "ps-tryon-processing-model" })
|
|
1539
1566
|
] }),
|
|
1540
1567
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-scan-line" }),
|
|
1541
1568
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-scan-overlay" })
|
|
@@ -1544,21 +1571,21 @@ function PrimeStyleTryonInner({
|
|
|
1544
1571
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-progress-bar-wrap", children: /* @__PURE__ */ jsx("div", { ref: barCb, className: "ps-tryon-progress-bar-fill" }) }),
|
|
1545
1572
|
/* @__PURE__ */ jsx("span", { ref: pctCb, className: "ps-tryon-progress-pct", children: "0%" })
|
|
1546
1573
|
] }),
|
|
1547
|
-
/* @__PURE__ */ jsx("div", { ref: statusCb, className: cx("ps-tryon-processing-text", cn.processingText), children: "Preparing your image..." }),
|
|
1548
|
-
/* @__PURE__ */ jsx("p", { className: cx("ps-tryon-processing-sub", cn.processingSubText), children: "This usually takes 15-25 seconds" })
|
|
1574
|
+
/* @__PURE__ */ jsx("div", { ref: statusCb, className: cx("ps-tryon-processing-text", cn.processingText), children: t("Preparing your image...") }),
|
|
1575
|
+
/* @__PURE__ */ jsx("p", { className: cx("ps-tryon-processing-sub", cn.processingSubText), children: t("This usually takes 15-25 seconds") })
|
|
1549
1576
|
] });
|
|
1550
1577
|
}
|
|
1551
1578
|
function ResultView() {
|
|
1552
1579
|
return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-result-layout", children: [
|
|
1553
|
-
resultImageUrl && /* @__PURE__ */ jsx("div", { className: "ps-tryon-result-image-col", children: /* @__PURE__ */ jsx("img", { src: resultImageUrl, alt: "Try-on result", className: cn.resultImage }) }),
|
|
1580
|
+
resultImageUrl && /* @__PURE__ */ jsx("div", { className: "ps-tryon-result-image-col", children: /* @__PURE__ */ jsx("img", { src: resultImageUrl, alt: t("Try-on result"), className: cn.resultImage }) }),
|
|
1554
1581
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-result-info-col", children: [
|
|
1555
1582
|
sizingResult && /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-recommend ps-tryon-size-compact", children: /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-hero-row", children: [
|
|
1556
|
-
/* @__PURE__ */ jsx("span", { className: "ps-tryon-size-compact-label", children: "Your size:" }),
|
|
1583
|
+
/* @__PURE__ */ jsx("span", { className: "ps-tryon-size-compact-label", children: t("Your size:") }),
|
|
1557
1584
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-size-badge", children: sizingResult.recommendedSize })
|
|
1558
1585
|
] }) }),
|
|
1559
1586
|
/* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-result-actions", cn.resultActions), children: [
|
|
1560
|
-
/* @__PURE__ */ jsx("button", { onClick: handleDownload, className: cx("ps-tryon-btn-download", cn.downloadButton), children: "Download" }),
|
|
1561
|
-
/* @__PURE__ */ jsx("button", { onClick: handleRetry, className: cx("ps-tryon-btn-retry", cn.retryButton), children: "Start Over" })
|
|
1587
|
+
/* @__PURE__ */ jsx("button", { onClick: handleDownload, className: cx("ps-tryon-btn-download", cn.downloadButton), children: t("Download") }),
|
|
1588
|
+
/* @__PURE__ */ jsx("button", { onClick: handleRetry, className: cx("ps-tryon-btn-retry", cn.retryButton), children: t("Start Over") })
|
|
1562
1589
|
] })
|
|
1563
1590
|
] })
|
|
1564
1591
|
] });
|
|
@@ -1566,8 +1593,8 @@ function PrimeStyleTryonInner({
|
|
|
1566
1593
|
function ErrorView() {
|
|
1567
1594
|
return /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-error", cn.error), children: [
|
|
1568
1595
|
/* @__PURE__ */ jsx(AlertIcon, {}),
|
|
1569
|
-
/* @__PURE__ */ jsx("p", { className: cx("ps-tryon-error-text", cn.errorText), children: errorMessage || "Something went wrong" }),
|
|
1570
|
-
/* @__PURE__ */ jsx("button", { onClick: handleRetry, className: cx("ps-tryon-submit", cn.submitButton), children: "Try Again" })
|
|
1596
|
+
/* @__PURE__ */ jsx("p", { className: cx("ps-tryon-error-text", cn.errorText), children: errorMessage || t("Something went wrong") }),
|
|
1597
|
+
/* @__PURE__ */ jsx("button", { onClick: handleRetry, className: cx("ps-tryon-submit", cn.submitButton), children: t("Try Again") })
|
|
1571
1598
|
] });
|
|
1572
1599
|
}
|
|
1573
1600
|
function DrawerPanel() {
|
|
@@ -1575,9 +1602,9 @@ function PrimeStyleTryonInner({
|
|
|
1575
1602
|
return /* @__PURE__ */ jsxs("div", { className: `ps-tryon-drawer${drawer ? " ps-tryon-drawer-open" : ""}`, children: [
|
|
1576
1603
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-drawer-header", children: [
|
|
1577
1604
|
/* @__PURE__ */ jsx("button", { className: "ps-tryon-drawer-back", onClick: () => setDrawer(null), children: /* @__PURE__ */ jsx(ArrowLeftIcon, {}) }),
|
|
1578
|
-
/* @__PURE__ */ jsx("span", { className: "ps-tryon-drawer-title", children: drawer === "profiles" ? "My Profiles" : "History" })
|
|
1605
|
+
/* @__PURE__ */ jsx("span", { className: "ps-tryon-drawer-title", children: drawer === "profiles" ? t("My Profiles") : t("History") })
|
|
1579
1606
|
] }),
|
|
1580
|
-
/* @__PURE__ */ jsx("div", { className: "ps-tryon-drawer-list", children: drawer === "profiles" ? profiles.length === 0 ? /* @__PURE__ */ jsx("div", { className: "ps-tryon-drawer-empty", children: "No saved profiles yet." }) : profiles.map((p) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-profile-item", onClick: () => {
|
|
1607
|
+
/* @__PURE__ */ jsx("div", { className: "ps-tryon-drawer-list", children: drawer === "profiles" ? profiles.length === 0 ? /* @__PURE__ */ jsx("div", { className: "ps-tryon-drawer-empty", children: t("No saved profiles yet.") }) : profiles.map((p) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-profile-item", onClick: () => {
|
|
1581
1608
|
setProfileDetail(p);
|
|
1582
1609
|
setDrawer(null);
|
|
1583
1610
|
}, children: [
|
|
@@ -1585,18 +1612,18 @@ function PrimeStyleTryonInner({
|
|
|
1585
1612
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-profile-info", children: [
|
|
1586
1613
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-profile-name", children: p.name }),
|
|
1587
1614
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-profile-detail", children: [
|
|
1588
|
-
p.gender === "female" ? "Women's" : "Men's",
|
|
1589
|
-
p.heightCm ? ` · ${Math.round(p.heightCm)}cm` : ""
|
|
1615
|
+
p.gender === "female" ? t("Women's") : t("Men's"),
|
|
1616
|
+
p.heightCm ? ` · ${Math.round(p.heightCm)}${t("cm")}` : ""
|
|
1590
1617
|
] })
|
|
1591
1618
|
] }),
|
|
1592
1619
|
/* @__PURE__ */ jsx(ChevronRightIcon, {})
|
|
1593
|
-
] }, p.id)) : history.length === 0 ? /* @__PURE__ */ jsx("div", { className: "ps-tryon-drawer-empty", children: "No history yet." }) : history.map((entry, idx) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-history-item", children: [
|
|
1620
|
+
] }, p.id)) : history.length === 0 ? /* @__PURE__ */ jsx("div", { className: "ps-tryon-drawer-empty", children: t("No history yet.") }) : history.map((entry, idx) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-history-item", children: [
|
|
1594
1621
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-history-images", children: [
|
|
1595
1622
|
entry.productImage && /* @__PURE__ */ jsx("img", { src: entry.productImage, alt: "", className: "ps-tryon-history-thumb" }),
|
|
1596
1623
|
entry.resultImageUrl && /* @__PURE__ */ jsx("img", { src: entry.resultImageUrl, alt: "", className: "ps-tryon-history-result-img" })
|
|
1597
1624
|
] }),
|
|
1598
1625
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-history-info", children: [
|
|
1599
|
-
/* @__PURE__ */ jsx("div", { className: "ps-tryon-history-product", children: entry.productTitle || "Product" }),
|
|
1626
|
+
/* @__PURE__ */ jsx("div", { className: "ps-tryon-history-product", children: entry.productTitle || t("Product") }),
|
|
1600
1627
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-history-meta", children: [
|
|
1601
1628
|
entry.profileName ? `${entry.profileName} · ` : "",
|
|
1602
1629
|
new Date(entry.date).toLocaleDateString()
|
|
@@ -1617,20 +1644,20 @@ function PrimeStyleTryonInner({
|
|
|
1617
1644
|
if (!profileDetail) return null;
|
|
1618
1645
|
const p = profileDetail;
|
|
1619
1646
|
const measurements = [
|
|
1620
|
-
{ label: "Height", value: p.heightCm, unit: "cm" },
|
|
1621
|
-
{ label: "Weight", value: p.weightKg, unit: "kg" },
|
|
1622
|
-
{ label: "Chest", value: p.chest, unit: "cm" },
|
|
1623
|
-
{ label: "Bust", value: p.bust, unit: "cm" },
|
|
1624
|
-
{ label: "Waist", value: p.waist, unit: "cm" },
|
|
1625
|
-
{ label: "Hips", value: p.hips, unit: "cm" },
|
|
1626
|
-
{ label: "Shoulders", value: p.shoulderWidth, unit: "cm" },
|
|
1627
|
-
{ label: "Sleeve", value: p.sleeveLength, unit: "cm" },
|
|
1628
|
-
{ label: "Inseam", value: p.inseam, unit: "cm" },
|
|
1629
|
-
{ label: "Neck", value: p.neckCircumference, unit: "cm" },
|
|
1630
|
-
{ label: "Foot", value: p.footLengthCm, unit: "cm" },
|
|
1631
|
-
{ label: "Shoe EU", value: p.shoeEU ? Number(p.shoeEU) : void 0, unit: "" },
|
|
1632
|
-
{ label: "Shoe US", value: p.shoeUS ? Number(p.shoeUS) : void 0, unit: "" },
|
|
1633
|
-
{ label: "Shoe UK", value: p.shoeUK ? Number(p.shoeUK) : void 0, unit: "" }
|
|
1647
|
+
{ label: t("Height"), value: p.heightCm, unit: t("cm") },
|
|
1648
|
+
{ label: t("Weight"), value: p.weightKg, unit: t("kg") },
|
|
1649
|
+
{ label: t("Chest"), value: p.chest, unit: t("cm") },
|
|
1650
|
+
{ label: t("Bust"), value: p.bust, unit: t("cm") },
|
|
1651
|
+
{ label: t("Waist"), value: p.waist, unit: t("cm") },
|
|
1652
|
+
{ label: t("Hips"), value: p.hips, unit: t("cm") },
|
|
1653
|
+
{ label: t("Shoulders"), value: p.shoulderWidth, unit: t("cm") },
|
|
1654
|
+
{ label: t("Sleeve"), value: p.sleeveLength, unit: t("cm") },
|
|
1655
|
+
{ label: t("Inseam"), value: p.inseam, unit: t("cm") },
|
|
1656
|
+
{ label: t("Neck"), value: p.neckCircumference, unit: t("cm") },
|
|
1657
|
+
{ label: t("Foot"), value: p.footLengthCm, unit: t("cm") },
|
|
1658
|
+
{ label: t("Shoe EU"), value: p.shoeEU ? Number(p.shoeEU) : void 0, unit: "" },
|
|
1659
|
+
{ label: t("Shoe US"), value: p.shoeUS ? Number(p.shoeUS) : void 0, unit: "" },
|
|
1660
|
+
{ label: t("Shoe UK"), value: p.shoeUK ? Number(p.shoeUK) : void 0, unit: "" }
|
|
1634
1661
|
].filter((m) => m.value);
|
|
1635
1662
|
return /* @__PURE__ */ jsx("div", { className: "ps-tryon-detail-overlay", onClick: (e) => {
|
|
1636
1663
|
if (e.target === e.currentTarget) setProfileDetail(null);
|
|
@@ -1643,8 +1670,7 @@ function PrimeStyleTryonInner({
|
|
|
1643
1670
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-gender", children: [
|
|
1644
1671
|
/* @__PURE__ */ jsx(UserIcon, { size: 18 }),
|
|
1645
1672
|
" ",
|
|
1646
|
-
p.gender === "female" ? "Women's" : "Men's"
|
|
1647
|
-
" Profile"
|
|
1673
|
+
p.gender === "female" ? t("Women's Profile") : t("Men's Profile")
|
|
1648
1674
|
] }),
|
|
1649
1675
|
measurements.length > 0 && /* @__PURE__ */ jsx("div", { className: "ps-tryon-detail-grid", children: measurements.map((m) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-cell", children: [
|
|
1650
1676
|
/* @__PURE__ */ jsx("div", { className: "ps-tryon-detail-cell-label", children: m.label }),
|
|
@@ -1654,7 +1680,8 @@ function PrimeStyleTryonInner({
|
|
|
1654
1680
|
] })
|
|
1655
1681
|
] }, m.label)) }),
|
|
1656
1682
|
p.createdAt && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-date", children: [
|
|
1657
|
-
"Saved
|
|
1683
|
+
t("Saved"),
|
|
1684
|
+
" ",
|
|
1658
1685
|
new Date(p.createdAt).toLocaleDateString()
|
|
1659
1686
|
] }),
|
|
1660
1687
|
/* @__PURE__ */ jsxs("button", { className: "ps-tryon-detail-delete", onClick: () => {
|
|
@@ -1663,7 +1690,8 @@ function PrimeStyleTryonInner({
|
|
|
1663
1690
|
setProfileDetail(null);
|
|
1664
1691
|
}, children: [
|
|
1665
1692
|
/* @__PURE__ */ jsx(TrashIcon, {}),
|
|
1666
|
-
"
|
|
1693
|
+
" ",
|
|
1694
|
+
t("Delete Profile")
|
|
1667
1695
|
] })
|
|
1668
1696
|
] })
|
|
1669
1697
|
] }) });
|
|
@@ -1693,16 +1721,16 @@ function PrimeStyleTryonInner({
|
|
|
1693
1721
|
return /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-root", cn.root || className), style: { ...cssVars, ...style }, "data-ps-tryon": true, children: [
|
|
1694
1722
|
/* @__PURE__ */ jsxs("button", { onClick: handleOpen, className: cx("ps-tryon-btn", cn.button), children: [
|
|
1695
1723
|
showIcon !== false && (buttonIcon || /* @__PURE__ */ jsx(CameraIcon, {})),
|
|
1696
|
-
/* @__PURE__ */ jsx("span", { children:
|
|
1724
|
+
/* @__PURE__ */ jsx("span", { children: resolvedButtonText })
|
|
1697
1725
|
] }),
|
|
1698
1726
|
view !== "idle" && /* @__PURE__ */ jsx("div", { className: cx("ps-tryon-overlay", cn.overlay), onClick: (e) => {
|
|
1699
1727
|
if (e.target === e.currentTarget) handleClose();
|
|
1700
1728
|
}, children: /* @__PURE__ */ jsxs("div", { className: cx(`ps-tryon-modal${view === "result" && resultImageUrl && sizingResult ? " ps-tryon-modal-wide" : ""}`, cn.modal), onClick: (e) => e.stopPropagation(), children: [
|
|
1701
1729
|
/* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-header", cn.header), children: [
|
|
1702
|
-
/* @__PURE__ */ jsx("span", { className: cx("ps-tryon-title", cn.title), children: "Virtual Try-On" }),
|
|
1730
|
+
/* @__PURE__ */ jsx("span", { className: cx("ps-tryon-title", cn.title), children: t("Virtual Try-On") }),
|
|
1703
1731
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-header-actions", children: [
|
|
1704
|
-
profiles.length > 0 && /* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: "Profiles", onClick: () => setDrawer(drawer === "profiles" ? null : "profiles"), children: /* @__PURE__ */ jsx(UserIcon, {}) }),
|
|
1705
|
-
history.length > 0 && /* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: "History", onClick: () => setDrawer(drawer === "history" ? null : "history"), children: /* @__PURE__ */ jsx(ClockIcon, {}) }),
|
|
1732
|
+
profiles.length > 0 && /* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: t("Profiles"), onClick: () => setDrawer(drawer === "profiles" ? null : "profiles"), children: /* @__PURE__ */ jsx(UserIcon, {}) }),
|
|
1733
|
+
history.length > 0 && /* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: t("History"), onClick: () => setDrawer(drawer === "history" ? null : "history"), children: /* @__PURE__ */ jsx(ClockIcon, {}) }),
|
|
1706
1734
|
/* @__PURE__ */ jsx("button", { onClick: handleClose, className: cx("ps-tryon-close", cn.closeButton), children: /* @__PURE__ */ jsx(XIcon, {}) })
|
|
1707
1735
|
] })
|
|
1708
1736
|
] }),
|
|
@@ -1712,7 +1740,7 @@ function PrimeStyleTryonInner({
|
|
|
1712
1740
|
/* @__PURE__ */ jsx(DrawerPanel, {})
|
|
1713
1741
|
] }),
|
|
1714
1742
|
showPoweredBy && /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-powered", cn.poweredBy), children: [
|
|
1715
|
-
"Powered by",
|
|
1743
|
+
t("Powered by"),
|
|
1716
1744
|
" ",
|
|
1717
1745
|
/* @__PURE__ */ jsx("a", { href: "https://myaifitting.com", target: "_blank", rel: "noopener noreferrer", children: "PrimeStyle AI" })
|
|
1718
1746
|
] })
|