@primestyleai/tryon 5.10.88 → 5.10.90
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.
|
@@ -4,8 +4,13 @@ import type { TranslateFn } from "../../i18n";
|
|
|
4
4
|
* product (no merchant CSV uploaded, no inline size guide). The user
|
|
5
5
|
* still gets a polite path forward — skip sizing entirely and try the
|
|
6
6
|
* product on visually.
|
|
7
|
+
*
|
|
8
|
+
* Desktop layout: split — product image left, message + CTAs right.
|
|
9
|
+
* Mobile layout: stacked — image on top, text + CTAs below.
|
|
7
10
|
*/
|
|
8
|
-
export declare function NoChartView({ onTryOn, onClose, t, }: {
|
|
11
|
+
export declare function NoChartView({ productImage, productTitle, onTryOn, onClose, t, }: {
|
|
12
|
+
productImage?: string;
|
|
13
|
+
productTitle?: string;
|
|
9
14
|
onTryOn: () => void;
|
|
10
15
|
onClose: () => void;
|
|
11
16
|
t: TranslateFn;
|
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
import type { PrimeStyleClassNames } from "../../types";
|
|
2
2
|
import type { TranslateFn } from "../../i18n";
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* Engaging try-on processing screen — 65/35 split.
|
|
5
|
+
* Left (~65%): user's photo + scanning overlay
|
|
6
|
+
* Right (~35%): big % ring → "WHILE YOU WAIT" cards (style tip /
|
|
7
|
+
* garment spotlight / AI fact) → cancel link.
|
|
8
|
+
*
|
|
9
|
+
* Distracts the user from the 25s wait by feeding them branded micro-
|
|
10
|
+
* content tied to their actual purchase context.
|
|
11
|
+
*/
|
|
12
|
+
export declare function ProcessingView({ previewUrl, progressRef, progressBarRef, progressTextRef, progressStatusRef, progressEtaRef, progressRingRef, productTitle, productMaterial, productDescription, onCancel, cn, t, }: {
|
|
4
13
|
previewUrl: string | null;
|
|
5
14
|
progressRef: React.MutableRefObject<number>;
|
|
6
15
|
progressBarRef: React.MutableRefObject<HTMLDivElement | null>;
|
|
@@ -8,6 +17,10 @@ export declare function ProcessingView({ previewUrl, progressRef, progressBarRef
|
|
|
8
17
|
progressStatusRef: React.MutableRefObject<HTMLDivElement | null>;
|
|
9
18
|
progressEtaRef: React.MutableRefObject<HTMLSpanElement | null>;
|
|
10
19
|
progressRingRef: React.MutableRefObject<SVGCircleElement | null>;
|
|
20
|
+
productTitle?: string;
|
|
21
|
+
productMaterial?: string;
|
|
22
|
+
productDescription?: string;
|
|
23
|
+
onCancel?: () => void;
|
|
11
24
|
cn: PrimeStyleClassNames;
|
|
12
25
|
t: TranslateFn;
|
|
13
26
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -12081,6 +12081,184 @@ const STYLES$1 = `
|
|
|
12081
12081
|
}
|
|
12082
12082
|
.ps-tryon-processing-sub { font-size: 0.63vw; color: var(--ps-text-secondary); margin: 0; }
|
|
12083
12083
|
|
|
12084
|
+
/* ──────────────────────────────────────────────
|
|
12085
|
+
ProcessingView v2 — split (image left ~65%,
|
|
12086
|
+
panel right ~35%) with engaging cards while
|
|
12087
|
+
the user waits 25s for the try-on to complete.
|
|
12088
|
+
────────────────────────────────────────────── */
|
|
12089
|
+
.ps-tryon-processing-v2 {
|
|
12090
|
+
display: flex; gap: 1.2vw;
|
|
12091
|
+
padding: 1.2vw;
|
|
12092
|
+
width: 100%; height: 100%;
|
|
12093
|
+
align-items: stretch;
|
|
12094
|
+
}
|
|
12095
|
+
.ps-tryon-processing-v2-image {
|
|
12096
|
+
flex: 0 0 62%;
|
|
12097
|
+
position: relative;
|
|
12098
|
+
border-radius: 0.6vw;
|
|
12099
|
+
overflow: hidden;
|
|
12100
|
+
background: var(--ps-bg-tertiary, #f3f4f6);
|
|
12101
|
+
min-height: 28vw;
|
|
12102
|
+
}
|
|
12103
|
+
.ps-tryon-processing-v2-image .ps-tryon-processing-blur,
|
|
12104
|
+
.ps-tryon-processing-v2-image .ps-tryon-processing-model {
|
|
12105
|
+
position: absolute; inset: 0;
|
|
12106
|
+
width: 100%; height: 100%;
|
|
12107
|
+
}
|
|
12108
|
+
.ps-tryon-processing-v2-image .ps-tryon-processing-blur {
|
|
12109
|
+
background-size: cover; background-position: center;
|
|
12110
|
+
filter: blur(40px) brightness(0.8); opacity: 0.65;
|
|
12111
|
+
}
|
|
12112
|
+
.ps-tryon-processing-v2-image .ps-tryon-processing-model {
|
|
12113
|
+
object-fit: contain; z-index: 1;
|
|
12114
|
+
}
|
|
12115
|
+
.ps-tryon-processing-v2-badge {
|
|
12116
|
+
position: absolute; top: 0.8vw; left: 0.8vw; z-index: 3;
|
|
12117
|
+
display: inline-flex; align-items: center; gap: 0.4vw;
|
|
12118
|
+
padding: 0.4vw 0.7vw;
|
|
12119
|
+
background: rgba(33, 84, 239, 0.10);
|
|
12120
|
+
color: var(--ps-accent);
|
|
12121
|
+
border: 1px solid rgba(33, 84, 239, 0.20);
|
|
12122
|
+
border-radius: 999px;
|
|
12123
|
+
font-size: 0.6vw; font-weight: 700;
|
|
12124
|
+
letter-spacing: 0.12em;
|
|
12125
|
+
}
|
|
12126
|
+
.ps-tryon-processing-v2-badge-dot {
|
|
12127
|
+
width: 6px; height: 6px; border-radius: 50%;
|
|
12128
|
+
background: var(--ps-accent);
|
|
12129
|
+
animation: ps-pulse-dot 1.4s ease-in-out infinite;
|
|
12130
|
+
}
|
|
12131
|
+
@keyframes ps-pulse-dot {
|
|
12132
|
+
0%, 100% { opacity: 0.3; transform: scale(0.85); }
|
|
12133
|
+
50% { opacity: 1; transform: scale(1.1); }
|
|
12134
|
+
}
|
|
12135
|
+
|
|
12136
|
+
.ps-tryon-processing-v2-panel {
|
|
12137
|
+
flex: 1 1 38%;
|
|
12138
|
+
display: flex; flex-direction: column;
|
|
12139
|
+
gap: 0.9vw;
|
|
12140
|
+
padding: 0.6vw 0.4vw;
|
|
12141
|
+
min-width: 0;
|
|
12142
|
+
}
|
|
12143
|
+
.ps-tryon-processing-v2-head {
|
|
12144
|
+
text-align: center;
|
|
12145
|
+
}
|
|
12146
|
+
.ps-tryon-processing-v2-title {
|
|
12147
|
+
margin: 0;
|
|
12148
|
+
font-size: 1.1vw; font-weight: 700;
|
|
12149
|
+
color: var(--ps-text-primary);
|
|
12150
|
+
line-height: 1.25;
|
|
12151
|
+
}
|
|
12152
|
+
.ps-tryon-processing-v2-sub {
|
|
12153
|
+
margin: 0.3vw 0 0;
|
|
12154
|
+
font-size: 0.68vw; line-height: 1.45;
|
|
12155
|
+
color: var(--ps-text-secondary);
|
|
12156
|
+
}
|
|
12157
|
+
|
|
12158
|
+
.ps-tryon-processing-v2-ring-wrap {
|
|
12159
|
+
position: relative;
|
|
12160
|
+
width: 120px; height: 120px;
|
|
12161
|
+
margin: 0.4vw auto 0;
|
|
12162
|
+
}
|
|
12163
|
+
.ps-tryon-processing-v2-ring-wrap svg {
|
|
12164
|
+
transform: rotate(-90deg);
|
|
12165
|
+
}
|
|
12166
|
+
.ps-tryon-processing-v2-ring-wrap .ps-tryon-progress-ring-track {
|
|
12167
|
+
fill: none; stroke: var(--ps-border-color); stroke-width: 6;
|
|
12168
|
+
}
|
|
12169
|
+
.ps-tryon-processing-v2-ring-wrap .ps-tryon-progress-ring-fill {
|
|
12170
|
+
fill: none; stroke: var(--ps-accent); stroke-width: 6;
|
|
12171
|
+
stroke-linecap: round;
|
|
12172
|
+
transition: stroke-dashoffset 0.3s ease;
|
|
12173
|
+
}
|
|
12174
|
+
.ps-tryon-processing-v2-ring-text {
|
|
12175
|
+
position: absolute; inset: 0;
|
|
12176
|
+
display: flex; flex-direction: column;
|
|
12177
|
+
align-items: center; justify-content: center;
|
|
12178
|
+
pointer-events: none;
|
|
12179
|
+
gap: 2px;
|
|
12180
|
+
}
|
|
12181
|
+
.ps-tryon-processing-v2-pct {
|
|
12182
|
+
font-size: 22px; font-weight: 700;
|
|
12183
|
+
color: var(--ps-accent);
|
|
12184
|
+
font-variant-numeric: tabular-nums;
|
|
12185
|
+
}
|
|
12186
|
+
.ps-tryon-processing-v2-status {
|
|
12187
|
+
font-size: 9px; font-weight: 700;
|
|
12188
|
+
letter-spacing: 0.12em; text-transform: uppercase;
|
|
12189
|
+
color: var(--ps-text-muted);
|
|
12190
|
+
text-align: center;
|
|
12191
|
+
max-width: 95px; line-height: 1.2;
|
|
12192
|
+
}
|
|
12193
|
+
|
|
12194
|
+
.ps-tryon-processing-v2-bar-hidden {
|
|
12195
|
+
display: none;
|
|
12196
|
+
}
|
|
12197
|
+
|
|
12198
|
+
.ps-tryon-processing-v2-sep {
|
|
12199
|
+
height: 1px; width: 100%;
|
|
12200
|
+
background: var(--ps-border-subtle, rgba(0,0,0,0.06));
|
|
12201
|
+
margin: 0.4vw 0 0;
|
|
12202
|
+
}
|
|
12203
|
+
|
|
12204
|
+
.ps-tryon-processing-v2-section-label {
|
|
12205
|
+
font-size: 0.6vw; font-weight: 700;
|
|
12206
|
+
letter-spacing: 0.12em; text-transform: uppercase;
|
|
12207
|
+
color: var(--ps-text-muted);
|
|
12208
|
+
margin-bottom: 0.5vw;
|
|
12209
|
+
}
|
|
12210
|
+
.ps-tryon-processing-v2-cards {
|
|
12211
|
+
display: flex; flex-direction: column; gap: 0.5vw;
|
|
12212
|
+
}
|
|
12213
|
+
.ps-tryon-processing-v2-card {
|
|
12214
|
+
display: flex; align-items: flex-start; gap: 0.6vw;
|
|
12215
|
+
padding: 0.7vw 0.8vw;
|
|
12216
|
+
background: var(--ps-bg-secondary, #f9fafb);
|
|
12217
|
+
border: 1px solid var(--ps-border-subtle, rgba(0,0,0,0.06));
|
|
12218
|
+
border-radius: 0.55vw;
|
|
12219
|
+
}
|
|
12220
|
+
.ps-tryon-processing-v2-card-icon {
|
|
12221
|
+
width: 1.7vw; height: 1.7vw;
|
|
12222
|
+
min-width: 28px; min-height: 28px;
|
|
12223
|
+
display: flex; align-items: center; justify-content: center;
|
|
12224
|
+
border-radius: 50%;
|
|
12225
|
+
flex-shrink: 0;
|
|
12226
|
+
}
|
|
12227
|
+
.ps-tryon-processing-v2-card-icon.ps-style { background: rgba(33, 84, 239, 0.10); color: var(--ps-accent); }
|
|
12228
|
+
.ps-tryon-processing-v2-card-icon.ps-spotlight { background: rgba(168, 85, 247, 0.10); color: #9333ea; }
|
|
12229
|
+
.ps-tryon-processing-v2-card-icon.ps-fact { background: rgba(16, 185, 129, 0.10); color: #059669; }
|
|
12230
|
+
.ps-tryon-processing-v2-card-text {
|
|
12231
|
+
flex: 1; min-width: 0;
|
|
12232
|
+
}
|
|
12233
|
+
.ps-tryon-processing-v2-card-head {
|
|
12234
|
+
font-size: 0.7vw; font-weight: 700;
|
|
12235
|
+
color: var(--ps-text-primary);
|
|
12236
|
+
margin-bottom: 2px;
|
|
12237
|
+
}
|
|
12238
|
+
.ps-tryon-processing-v2-card-body {
|
|
12239
|
+
font-size: 0.65vw; line-height: 1.5;
|
|
12240
|
+
color: var(--ps-text-secondary);
|
|
12241
|
+
animation: ps-fade-in 0.4s ease;
|
|
12242
|
+
}
|
|
12243
|
+
@keyframes ps-fade-in {
|
|
12244
|
+
from { opacity: 0; transform: translateY(2px); }
|
|
12245
|
+
to { opacity: 1; transform: translateY(0); }
|
|
12246
|
+
}
|
|
12247
|
+
|
|
12248
|
+
.ps-tryon-processing-v2-cancel {
|
|
12249
|
+
margin-top: auto;
|
|
12250
|
+
background: transparent; border: none;
|
|
12251
|
+
color: var(--ps-text-muted);
|
|
12252
|
+
font-family: inherit;
|
|
12253
|
+
font-size: 0.68vw; font-weight: 600;
|
|
12254
|
+
cursor: pointer;
|
|
12255
|
+
padding: 0.3vw 0;
|
|
12256
|
+
text-align: center;
|
|
12257
|
+
width: 100%;
|
|
12258
|
+
transition: color 0.15s;
|
|
12259
|
+
}
|
|
12260
|
+
.ps-tryon-processing-v2-cancel:hover { color: var(--ps-text-primary); }
|
|
12261
|
+
|
|
12084
12262
|
/* Result — split layout */
|
|
12085
12263
|
.ps-tryon-result-split {
|
|
12086
12264
|
display: flex; gap: 1.5vw; text-align: left; align-items: flex-start;
|
|
@@ -12880,46 +13058,71 @@ const STYLES$1 = `
|
|
|
12880
13058
|
/* ──────────────────────────────────────────────
|
|
12881
13059
|
NoChartView — empty state when the merchant
|
|
12882
13060
|
hasn't uploaded a size chart for this product.
|
|
13061
|
+
Desktop: split (image left, panel right).
|
|
13062
|
+
Mobile: stacked (image top, panel bottom).
|
|
12883
13063
|
────────────────────────────────────────────── */
|
|
12884
13064
|
.ps-tryon-no-chart {
|
|
13065
|
+
display: flex; align-items: stretch;
|
|
13066
|
+
gap: 1.2vw;
|
|
13067
|
+
padding: 1.5vw;
|
|
13068
|
+
width: 100%;
|
|
13069
|
+
min-height: 28vw;
|
|
13070
|
+
}
|
|
13071
|
+
.ps-tryon-no-chart-image {
|
|
13072
|
+
flex: 1 1 50%;
|
|
13073
|
+
min-width: 0;
|
|
13074
|
+
border-radius: 0.5vw;
|
|
13075
|
+
overflow: hidden;
|
|
13076
|
+
background: var(--ps-bg-tertiary, #f3f4f6);
|
|
13077
|
+
display: flex; align-items: center; justify-content: center;
|
|
13078
|
+
}
|
|
13079
|
+
.ps-tryon-no-chart-image-img {
|
|
13080
|
+
width: 100%; height: 100%;
|
|
13081
|
+
object-fit: contain;
|
|
13082
|
+
display: block;
|
|
13083
|
+
}
|
|
13084
|
+
.ps-tryon-no-chart-panel {
|
|
13085
|
+
flex: 1 1 50%;
|
|
12885
13086
|
display: flex; flex-direction: column;
|
|
12886
|
-
align-items:
|
|
12887
|
-
|
|
12888
|
-
padding:
|
|
12889
|
-
|
|
12890
|
-
min-height: 60vh;
|
|
12891
|
-
gap: 16px;
|
|
13087
|
+
align-items: flex-start; justify-content: center;
|
|
13088
|
+
gap: 0.8vw;
|
|
13089
|
+
padding: 0.6vw 1vw;
|
|
13090
|
+
min-width: 0;
|
|
12892
13091
|
}
|
|
12893
13092
|
.ps-tryon-no-chart-icon {
|
|
12894
|
-
width:
|
|
13093
|
+
width: 3.2vw; height: 3.2vw;
|
|
13094
|
+
min-width: 48px; min-height: 48px;
|
|
12895
13095
|
display: flex; align-items: center; justify-content: center;
|
|
12896
13096
|
border-radius: 50%;
|
|
12897
13097
|
background: var(--ps-bg-tertiary, #f3f4f6);
|
|
12898
13098
|
color: var(--ps-text-secondary);
|
|
12899
13099
|
}
|
|
13100
|
+
.ps-tryon-no-chart-icon svg {
|
|
13101
|
+
width: 60%; height: 60%;
|
|
13102
|
+
}
|
|
12900
13103
|
.ps-tryon-no-chart-title {
|
|
12901
|
-
font-size:
|
|
13104
|
+
font-size: 1.1vw; font-weight: 700;
|
|
12902
13105
|
color: var(--ps-text-primary);
|
|
12903
|
-
margin:
|
|
13106
|
+
margin: 0;
|
|
13107
|
+
line-height: 1.25;
|
|
12904
13108
|
}
|
|
12905
13109
|
.ps-tryon-no-chart-msg {
|
|
12906
|
-
font-size:
|
|
13110
|
+
font-size: 0.72vw; line-height: 1.55;
|
|
12907
13111
|
color: var(--ps-text-secondary);
|
|
12908
13112
|
margin: 0;
|
|
12909
|
-
max-width: 380px;
|
|
12910
13113
|
}
|
|
12911
13114
|
.ps-tryon-no-chart-actions {
|
|
12912
13115
|
display: flex; flex-direction: column;
|
|
12913
|
-
align-items: stretch; gap:
|
|
12914
|
-
width: 100%; max-width:
|
|
12915
|
-
margin-top:
|
|
13116
|
+
align-items: stretch; gap: 0.5vw;
|
|
13117
|
+
width: 100%; max-width: 22vw;
|
|
13118
|
+
margin-top: 0.4vw;
|
|
12916
13119
|
}
|
|
12917
13120
|
.ps-tryon-no-chart-cta {
|
|
12918
13121
|
background: var(--ps-accent); color: #FFFFFF;
|
|
12919
|
-
border: none; border-radius:
|
|
12920
|
-
padding:
|
|
13122
|
+
border: none; border-radius: 0.5vw;
|
|
13123
|
+
padding: 0.8vw 1vw;
|
|
12921
13124
|
font-family: inherit;
|
|
12922
|
-
font-size:
|
|
13125
|
+
font-size: 0.78vw; font-weight: 700;
|
|
12923
13126
|
letter-spacing: 0.04em;
|
|
12924
13127
|
cursor: pointer;
|
|
12925
13128
|
transition: opacity 0.15s, transform 0.15s;
|
|
@@ -12928,10 +13131,10 @@ const STYLES$1 = `
|
|
|
12928
13131
|
.ps-tryon-no-chart-secondary {
|
|
12929
13132
|
background: transparent; color: var(--ps-text-secondary);
|
|
12930
13133
|
border: 1px solid var(--ps-border-color);
|
|
12931
|
-
border-radius:
|
|
12932
|
-
padding:
|
|
13134
|
+
border-radius: 0.5vw;
|
|
13135
|
+
padding: 0.7vw 1vw;
|
|
12933
13136
|
font-family: inherit;
|
|
12934
|
-
font-size:
|
|
13137
|
+
font-size: 0.7vw; font-weight: 600;
|
|
12935
13138
|
cursor: pointer;
|
|
12936
13139
|
transition: background 0.15s;
|
|
12937
13140
|
}
|
|
@@ -13183,6 +13386,73 @@ const STYLES$1 = `
|
|
|
13183
13386
|
px-based sizing (vw becomes sub-pixel and unreadable on phones)
|
|
13184
13387
|
════════════════════════════════════════════════════════════════ */
|
|
13185
13388
|
@media (max-width: 768px) {
|
|
13389
|
+
/* ProcessingView v2 mobile — stack: image on top (max 38vh), then
|
|
13390
|
+
* the progress + cards panel below. */
|
|
13391
|
+
.ps-tryon-processing-v2 {
|
|
13392
|
+
flex-direction: column !important;
|
|
13393
|
+
gap: 12px !important;
|
|
13394
|
+
padding: 12px !important;
|
|
13395
|
+
height: auto !important;
|
|
13396
|
+
}
|
|
13397
|
+
.ps-tryon-processing-v2-image {
|
|
13398
|
+
flex: 0 0 auto !important;
|
|
13399
|
+
width: 100% !important;
|
|
13400
|
+
height: 38vh !important; min-height: 280px !important;
|
|
13401
|
+
border-radius: 12px !important;
|
|
13402
|
+
}
|
|
13403
|
+
.ps-tryon-processing-v2-badge {
|
|
13404
|
+
top: 10px !important; left: 10px !important;
|
|
13405
|
+
padding: 5px 10px !important; gap: 6px !important;
|
|
13406
|
+
font-size: 10px !important;
|
|
13407
|
+
}
|
|
13408
|
+
.ps-tryon-processing-v2-panel {
|
|
13409
|
+
gap: 12px !important; padding: 4px 6px !important;
|
|
13410
|
+
}
|
|
13411
|
+
.ps-tryon-processing-v2-title { font-size: 17px !important; }
|
|
13412
|
+
.ps-tryon-processing-v2-sub { font-size: 12px !important; margin-top: 4px !important; }
|
|
13413
|
+
.ps-tryon-processing-v2-ring-wrap { width: 96px !important; height: 96px !important; }
|
|
13414
|
+
.ps-tryon-processing-v2-ring-wrap svg { width: 96px !important; height: 96px !important; }
|
|
13415
|
+
.ps-tryon-processing-v2-pct { font-size: 18px !important; }
|
|
13416
|
+
.ps-tryon-processing-v2-status { font-size: 8px !important; max-width: 75px !important; }
|
|
13417
|
+
.ps-tryon-processing-v2-section-label { font-size: 10px !important; margin-bottom: 8px !important; }
|
|
13418
|
+
.ps-tryon-processing-v2-cards { gap: 8px !important; }
|
|
13419
|
+
.ps-tryon-processing-v2-card { padding: 10px 12px !important; gap: 10px !important; border-radius: 10px !important; }
|
|
13420
|
+
.ps-tryon-processing-v2-card-icon { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; }
|
|
13421
|
+
.ps-tryon-processing-v2-card-head { font-size: 12px !important; }
|
|
13422
|
+
.ps-tryon-processing-v2-card-body { font-size: 11px !important; }
|
|
13423
|
+
.ps-tryon-processing-v2-cancel { font-size: 12px !important; padding: 8px 0 !important; }
|
|
13424
|
+
|
|
13425
|
+
/* NoChartView mobile — stack image on top, panel below. */
|
|
13426
|
+
.ps-tryon-no-chart {
|
|
13427
|
+
flex-direction: column !important;
|
|
13428
|
+
gap: 16px !important;
|
|
13429
|
+
padding: 16px !important;
|
|
13430
|
+
min-height: 0 !important;
|
|
13431
|
+
}
|
|
13432
|
+
.ps-tryon-no-chart-image {
|
|
13433
|
+
flex: 0 0 auto !important;
|
|
13434
|
+
width: 100% !important;
|
|
13435
|
+
max-height: 38vh !important;
|
|
13436
|
+
border-radius: 12px !important;
|
|
13437
|
+
}
|
|
13438
|
+
.ps-tryon-no-chart-image-img {
|
|
13439
|
+
max-height: 38vh !important; width: auto !important; max-width: 100% !important;
|
|
13440
|
+
}
|
|
13441
|
+
.ps-tryon-no-chart-panel {
|
|
13442
|
+
flex: 1 1 auto !important;
|
|
13443
|
+
align-items: center !important; justify-content: flex-start !important;
|
|
13444
|
+
text-align: center !important;
|
|
13445
|
+
gap: 12px !important;
|
|
13446
|
+
padding: 4px 8px !important;
|
|
13447
|
+
}
|
|
13448
|
+
.ps-tryon-no-chart-icon { width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; }
|
|
13449
|
+
.ps-tryon-no-chart-icon svg { width: 28px !important; height: 28px !important; }
|
|
13450
|
+
.ps-tryon-no-chart-title { font-size: 18px !important; text-align: center !important; }
|
|
13451
|
+
.ps-tryon-no-chart-msg { font-size: 13px !important; text-align: center !important; max-width: 360px !important; margin: 0 auto !important; }
|
|
13452
|
+
.ps-tryon-no-chart-actions { max-width: 320px !important; gap: 10px !important; margin-top: 4px !important; }
|
|
13453
|
+
.ps-tryon-no-chart-cta { padding: 14px 18px !important; font-size: 13px !important; border-radius: 10px !important; }
|
|
13454
|
+
.ps-tryon-no-chart-secondary { padding: 12px 18px !important; font-size: 12px !important; border-radius: 10px !important; }
|
|
13455
|
+
|
|
13186
13456
|
/* ── Trigger button: minimum 44px touch target, readable text ── */
|
|
13187
13457
|
.ps-tryon-btn {
|
|
13188
13458
|
padding: max(12px, 3vw) max(20px, 5vw); font-size: max(14px, 3.6vw); gap: max(8px, 2vw);
|
|
@@ -21658,7 +21928,7 @@ function UploadView({
|
|
|
21658
21928
|
}
|
|
21659
21929
|
) });
|
|
21660
21930
|
}
|
|
21661
|
-
const RING_RADIUS =
|
|
21931
|
+
const RING_RADIUS = 38;
|
|
21662
21932
|
const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
|
|
21663
21933
|
function ProcessingView({
|
|
21664
21934
|
previewUrl,
|
|
@@ -21668,6 +21938,10 @@ function ProcessingView({
|
|
|
21668
21938
|
progressStatusRef,
|
|
21669
21939
|
progressEtaRef,
|
|
21670
21940
|
progressRingRef,
|
|
21941
|
+
productTitle,
|
|
21942
|
+
productMaterial,
|
|
21943
|
+
productDescription,
|
|
21944
|
+
onCancel,
|
|
21671
21945
|
cn,
|
|
21672
21946
|
t: t2
|
|
21673
21947
|
}) {
|
|
@@ -21692,33 +21966,56 @@ function ProcessingView({
|
|
|
21692
21966
|
el2.style.strokeDashoffset = String(offset);
|
|
21693
21967
|
}
|
|
21694
21968
|
}, []);
|
|
21695
|
-
|
|
21696
|
-
|
|
21969
|
+
const aiFacts = [
|
|
21970
|
+
t2("Our model is analyzing 150+ body landmarks for the perfect fit"),
|
|
21971
|
+
t2("Calibrating fabric drape against your body proportions"),
|
|
21972
|
+
t2("Cross-checking fit against millions of garment patterns"),
|
|
21973
|
+
t2("Rendering shadows and highlights to match your photo's lighting")
|
|
21974
|
+
];
|
|
21975
|
+
const styleTip = (() => {
|
|
21976
|
+
const t1 = t2("Pair this with neutral tones for a balanced look");
|
|
21977
|
+
const t22 = t2("Layer with a fitted base for sharper silhouette");
|
|
21978
|
+
const t3 = t2("Cuff once for a relaxed everyday feel");
|
|
21979
|
+
return [t1, t22, t3];
|
|
21980
|
+
})();
|
|
21981
|
+
const [factIdx, setFactIdx] = reactExports.useState(0);
|
|
21982
|
+
const [tipIdx, setTipIdx] = reactExports.useState(0);
|
|
21983
|
+
reactExports.useEffect(() => {
|
|
21984
|
+
const f2 = setInterval(() => setFactIdx((i) => (i + 1) % aiFacts.length), 4e3);
|
|
21985
|
+
const s = setInterval(() => setTipIdx((i) => (i + 1) % styleTip.length), 5e3);
|
|
21986
|
+
return () => {
|
|
21987
|
+
clearInterval(f2);
|
|
21988
|
+
clearInterval(s);
|
|
21989
|
+
};
|
|
21990
|
+
}, []);
|
|
21991
|
+
const garmentLine = productMaterial?.trim() || (productDescription?.trim() ? productDescription.trim().slice(0, 90) + (productDescription.trim().length > 90 ? "…" : "") : null) || t2("Crafted with quality materials for everyday comfort");
|
|
21992
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2", children: [
|
|
21993
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-image", children: [
|
|
21697
21994
|
previewUrl && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
21698
21995
|
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-blur", style: { backgroundImage: `url(${previewUrl})` } }),
|
|
21699
21996
|
/* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: previewUrl, alt: t2("Your photo"), className: "ps-tryon-processing-model" })
|
|
21700
21997
|
] }),
|
|
21701
21998
|
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-scan-line" }),
|
|
21702
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-scan-overlay" })
|
|
21999
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-scan-overlay" }),
|
|
22000
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-badge", children: [
|
|
22001
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-processing-v2-badge-dot", "aria-hidden": "true" }),
|
|
22002
|
+
t2("ANALYZING BODY MAP")
|
|
22003
|
+
] })
|
|
21703
22004
|
] }),
|
|
21704
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-
|
|
21705
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-
|
|
21706
|
-
/* @__PURE__ */ jsxRuntimeExports.
|
|
21707
|
-
|
|
21708
|
-
|
|
21709
|
-
|
|
21710
|
-
|
|
21711
|
-
|
|
21712
|
-
r: RING_RADIUS,
|
|
21713
|
-
className: "ps-tryon-progress-ring-track"
|
|
21714
|
-
}
|
|
21715
|
-
),
|
|
22005
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-panel", children: [
|
|
22006
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-head", children: [
|
|
22007
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "ps-tryon-processing-v2-title", children: t2("Generating Your Look") }),
|
|
22008
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "ps-tryon-processing-v2-sub", children: t2("Our AI is precisely mapping the garment to your unique proportions.") })
|
|
22009
|
+
] }),
|
|
22010
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-ring-wrap", children: [
|
|
22011
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 96 96", width: "120", height: "120", "aria-hidden": "true", children: [
|
|
22012
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "48", cy: "48", r: RING_RADIUS, className: "ps-tryon-progress-ring-track" }),
|
|
21716
22013
|
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
21717
22014
|
"circle",
|
|
21718
22015
|
{
|
|
21719
22016
|
ref: ringCb,
|
|
21720
|
-
cx: "
|
|
21721
|
-
cy: "
|
|
22017
|
+
cx: "48",
|
|
22018
|
+
cy: "48",
|
|
21722
22019
|
r: RING_RADIUS,
|
|
21723
22020
|
className: "ps-tryon-progress-ring-fill",
|
|
21724
22021
|
strokeDasharray: RING_CIRCUMFERENCE,
|
|
@@ -21726,13 +22023,48 @@ function ProcessingView({
|
|
|
21726
22023
|
}
|
|
21727
22024
|
)
|
|
21728
22025
|
] }),
|
|
21729
|
-
/* @__PURE__ */ jsxRuntimeExports.
|
|
22026
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-ring-text", children: [
|
|
22027
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { ref: pctCb, className: "ps-tryon-processing-v2-pct", children: "0%" }),
|
|
22028
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { ref: statusCb, className: "ps-tryon-processing-v2-status", children: t2("Preparing your image…") })
|
|
22029
|
+
] })
|
|
21730
22030
|
] }),
|
|
21731
|
-
/* @__PURE__ */ jsxRuntimeExports.
|
|
21732
|
-
|
|
21733
|
-
|
|
21734
|
-
|
|
21735
|
-
|
|
22031
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-bar-hidden", children: [
|
|
22032
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: barCb }),
|
|
22033
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { ref: etaCb })
|
|
22034
|
+
] }),
|
|
22035
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-sep" }),
|
|
22036
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-section", children: [
|
|
22037
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-section-label", children: t2("WHILE YOU WAIT") }),
|
|
22038
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-cards", children: [
|
|
22039
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-card", children: [
|
|
22040
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-card-icon ps-style", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c1 .9 1 1.8 1 2.3v1h6v-1c0-.5 0-1.4 1-2.3A7 7 0 0 0 12 2z" }) }) }),
|
|
22041
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-card-text", children: [
|
|
22042
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-card-head", children: t2("Style Tip") }),
|
|
22043
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-card-body", children: styleTip[tipIdx] }, tipIdx)
|
|
22044
|
+
] })
|
|
22045
|
+
] }),
|
|
22046
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-card", children: [
|
|
22047
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-card-icon ps-spotlight", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
22048
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "10" }),
|
|
22049
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
|
|
22050
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
|
|
22051
|
+
] }) }),
|
|
22052
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-card-text", children: [
|
|
22053
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-card-head", children: t2("Garment Spotlight") }),
|
|
22054
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-card-body", children: garmentLine })
|
|
22055
|
+
] })
|
|
22056
|
+
] }),
|
|
22057
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-card", children: [
|
|
22058
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-card-icon ps-fact", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 2v6M12 16v6M4.93 4.93l4.24 4.24M14.83 14.83l4.24 4.24M2 12h6M16 12h6M4.93 19.07l4.24-4.24M14.83 9.17l4.24-4.24" }) }) }),
|
|
22059
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-card-text", children: [
|
|
22060
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-card-head", children: t2("AI Fact") }),
|
|
22061
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-card-body", children: aiFacts[factIdx] }, factIdx)
|
|
22062
|
+
] })
|
|
22063
|
+
] })
|
|
22064
|
+
] })
|
|
22065
|
+
] }),
|
|
22066
|
+
onCancel && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-tryon-processing-v2-cancel", onClick: onCancel, children: t2("Cancel Generation") })
|
|
22067
|
+
] })
|
|
21736
22068
|
] });
|
|
21737
22069
|
}
|
|
21738
22070
|
function ErrorView({
|
|
@@ -21748,23 +22080,28 @@ function ErrorView({
|
|
|
21748
22080
|
] });
|
|
21749
22081
|
}
|
|
21750
22082
|
function NoChartView({
|
|
22083
|
+
productImage,
|
|
22084
|
+
productTitle,
|
|
21751
22085
|
onTryOn,
|
|
21752
22086
|
onClose,
|
|
21753
22087
|
t: t2
|
|
21754
22088
|
}) {
|
|
21755
22089
|
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-no-chart", children: [
|
|
21756
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-no-chart-
|
|
21757
|
-
|
|
21758
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("
|
|
21759
|
-
|
|
21760
|
-
|
|
21761
|
-
|
|
21762
|
-
|
|
21763
|
-
/* @__PURE__ */ jsxRuntimeExports.
|
|
21764
|
-
|
|
21765
|
-
"
|
|
21766
|
-
|
|
21767
|
-
|
|
22090
|
+
productImage && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-no-chart-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: productImage, alt: productTitle || "", className: "ps-tryon-no-chart-image-img" }) }),
|
|
22091
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-no-chart-panel", children: [
|
|
22092
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-no-chart-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", width: "44", height: "44", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
22093
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3 17l6 6 12-12-6-6L3 17z" }),
|
|
22094
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14 4l-3 3M16 6l-2 2M18 8l-2 2M11 7l-2 2M13 9l-2 2M15 11l-2 2" })
|
|
22095
|
+
] }) }),
|
|
22096
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "ps-tryon-no-chart-title", children: t2("No size chart available") }),
|
|
22097
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "ps-tryon-no-chart-msg", children: t2("The merchant hasn't uploaded sizing data for this product yet. You can still see how it looks on you with a virtual try-on.") }),
|
|
22098
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-no-chart-actions", children: [
|
|
22099
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", className: "ps-tryon-no-chart-cta", onClick: onTryOn, children: [
|
|
22100
|
+
t2("See how it looks on you"),
|
|
22101
|
+
" →"
|
|
22102
|
+
] }),
|
|
22103
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-tryon-no-chart-secondary", onClick: onClose, children: t2("Continue Shopping") })
|
|
22104
|
+
] })
|
|
21768
22105
|
] })
|
|
21769
22106
|
] });
|
|
21770
22107
|
}
|
|
@@ -27006,7 +27343,7 @@ function PrimeStyleTryonInner({
|
|
|
27006
27343
|
{ at: 75, text: t2("Refining details...") },
|
|
27007
27344
|
{ at: 90, text: t2("Almost there...") }
|
|
27008
27345
|
];
|
|
27009
|
-
const RING_CIRCUMFERENCE2 = 2 * Math.PI *
|
|
27346
|
+
const RING_CIRCUMFERENCE2 = 2 * Math.PI * 38;
|
|
27010
27347
|
progressIntervalRef.current = setInterval(() => {
|
|
27011
27348
|
if (completedRef.current) return;
|
|
27012
27349
|
const startTs = progressStartTsRef.current || Date.now();
|
|
@@ -28689,6 +29026,13 @@ function PrimeStyleTryonInner({
|
|
|
28689
29026
|
progressStatusRef,
|
|
28690
29027
|
progressEtaRef,
|
|
28691
29028
|
progressRingRef,
|
|
29029
|
+
productTitle,
|
|
29030
|
+
productMaterial,
|
|
29031
|
+
productDescription,
|
|
29032
|
+
onCancel: () => {
|
|
29033
|
+
setView("size-result");
|
|
29034
|
+
setTryOnProcessing(false);
|
|
29035
|
+
},
|
|
28692
29036
|
cn,
|
|
28693
29037
|
t: t2
|
|
28694
29038
|
}
|
|
@@ -28844,6 +29188,8 @@ function PrimeStyleTryonInner({
|
|
|
28844
29188
|
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-view-enter", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
28845
29189
|
NoChartView,
|
|
28846
29190
|
{
|
|
29191
|
+
productImage,
|
|
29192
|
+
productTitle,
|
|
28847
29193
|
onTryOn: () => setView("upload"),
|
|
28848
29194
|
onClose: onClose ?? (() => {
|
|
28849
29195
|
}),
|