@thefittingroom/shop-ui 5.0.18 → 5.0.20
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/index.js +2575 -893
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -14054,7 +14054,7 @@ function applyFrameBaseUrl(url, baseUrl2) {
|
|
|
14054
14054
|
return `${cleanBase}${url.startsWith("/") ? "" : "/"}${url}`;
|
|
14055
14055
|
}
|
|
14056
14056
|
const STORAGE_KEY = "tfr:fitting-room:v1";
|
|
14057
|
-
const logger$
|
|
14057
|
+
const logger$h = getLogger("fitting-room");
|
|
14058
14058
|
function readAll() {
|
|
14059
14059
|
try {
|
|
14060
14060
|
const raw = window.localStorage.getItem(STORAGE_KEY);
|
|
@@ -14067,7 +14067,7 @@ function readAll() {
|
|
|
14067
14067
|
}
|
|
14068
14068
|
return parsed;
|
|
14069
14069
|
} catch (error) {
|
|
14070
|
-
logger$
|
|
14070
|
+
logger$h.logWarn("Failed to read fitting room from localStorage", {
|
|
14071
14071
|
error
|
|
14072
14072
|
});
|
|
14073
14073
|
return {};
|
|
@@ -14077,7 +14077,7 @@ function writeAll(all) {
|
|
|
14077
14077
|
try {
|
|
14078
14078
|
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(all));
|
|
14079
14079
|
} catch (error) {
|
|
14080
|
-
logger$
|
|
14080
|
+
logger$h.logWarn("Failed to write fitting room to localStorage", {
|
|
14081
14081
|
error
|
|
14082
14082
|
});
|
|
14083
14083
|
}
|
|
@@ -14101,34 +14101,39 @@ function _init$7() {
|
|
|
14101
14101
|
fittingRoom: items
|
|
14102
14102
|
});
|
|
14103
14103
|
}
|
|
14104
|
-
async function toggleFittingRoomItem(productId, isPdp) {
|
|
14104
|
+
async function toggleFittingRoomItem(productId, handle, isPdp) {
|
|
14105
14105
|
const state = useMainStore.getState();
|
|
14106
14106
|
const isInFittingRoom = state.fittingRoom.some((item) => item.externalId === productId);
|
|
14107
14107
|
if (isInFittingRoom) {
|
|
14108
|
-
logger$
|
|
14108
|
+
logger$h.logDebug("{{ts}} - Removing from fitting room", {
|
|
14109
14109
|
productId
|
|
14110
14110
|
});
|
|
14111
14111
|
state.removeFromFittingRoom(productId);
|
|
14112
14112
|
return;
|
|
14113
14113
|
}
|
|
14114
|
-
logger$
|
|
14114
|
+
logger$h.logDebug("{{ts}} - Adding to fitting room", {
|
|
14115
14115
|
productId,
|
|
14116
|
+
handle,
|
|
14116
14117
|
isPdp
|
|
14117
14118
|
});
|
|
14118
14119
|
let size = null;
|
|
14119
14120
|
let color = null;
|
|
14120
14121
|
let colorwaySizeAssetId = null;
|
|
14122
|
+
let resolvedHandle = handle;
|
|
14121
14123
|
if (isPdp) {
|
|
14122
14124
|
const {
|
|
14123
14125
|
currentProduct
|
|
14124
14126
|
} = getStaticData();
|
|
14125
14127
|
if (currentProduct) {
|
|
14128
|
+
if (!resolvedHandle) {
|
|
14129
|
+
resolvedHandle = currentProduct.handle;
|
|
14130
|
+
}
|
|
14126
14131
|
try {
|
|
14127
14132
|
const selection = await currentProduct.getSelectedOptions();
|
|
14128
14133
|
size = selection.size || null;
|
|
14129
14134
|
color = selection.color;
|
|
14130
14135
|
} catch (error) {
|
|
14131
|
-
logger$
|
|
14136
|
+
logger$h.logWarn("Failed to read selected options from currentProduct", {
|
|
14132
14137
|
error
|
|
14133
14138
|
});
|
|
14134
14139
|
}
|
|
@@ -14149,6 +14154,7 @@ async function toggleFittingRoomItem(productId, isPdp) {
|
|
|
14149
14154
|
}
|
|
14150
14155
|
state.addToFittingRoom({
|
|
14151
14156
|
externalId: productId,
|
|
14157
|
+
handle: resolvedHandle,
|
|
14152
14158
|
size,
|
|
14153
14159
|
color,
|
|
14154
14160
|
colorwaySizeAssetId,
|
|
@@ -19287,7 +19293,7 @@ const loading$1 = "Loading...";
|
|
|
19287
19293
|
const add_to_fitting_room$1 = "Add to Fitting Room";
|
|
19288
19294
|
const added_to_fitting_room$1 = "In Fitting Room";
|
|
19289
19295
|
const view_fitting_room$1 = "Fitting Room";
|
|
19290
|
-
const fitting_room$1 = { "title": "Fitting Room", "empty": "Your fitting room is empty.", "size_not_chosen": "Size not chosen — pick one before trying on.", "remove": "Remove" };
|
|
19296
|
+
const fitting_room$1 = { "title": "Fitting Room", "empty": "Your fitting room is empty.", "size_not_chosen": "Size not chosen — pick one before trying on.", "remove": "Remove", "ungrouped": "Other", "try_it_on": "Try it on", "view_product_details": "View product details", "hide_product_details": "Hide product details", "add_to_cart": "Add to cart", "recommended_sizes": "Recommended sizes", "shop_now": "Shop now", "sign_out": "Sign out", "try_it_tucked_in": "Try it tucked in", "try_it_untucked": "Try it untucked", "avatar_placeholder_empty": "Add clothes to try on by selecting items in the rails.", "avatar_placeholder_selected": "Avatar render will appear here once VTO is wired up.", "see_selected_items": "See Selected Items", "no_selection": "Nothing selected yet.", "tuck_in": "Tuck In", "untuck": "Untuck", "zoom_in": "Zoom In", "zoom_out": "Zoom Out", "vto_error": "Couldn't load the try-on. Please try again." };
|
|
19291
19297
|
const landing$1 = { "header": "Meet your mini me!", "description": "Loose on your waist but tight on your hips? We’ll show you.", "get_the_app": "Get the app", "already_have_account": "Already have an account?", "sign_in": "Sign in." };
|
|
19292
19298
|
const en$1 = {
|
|
19293
19299
|
try_it_on: try_it_on$1,
|
|
@@ -19311,7 +19317,7 @@ const loading = "Chargement...";
|
|
|
19311
19317
|
const add_to_fitting_room = "Ajouter à la cabine d'essayage";
|
|
19312
19318
|
const added_to_fitting_room = "Dans la cabine d'essayage";
|
|
19313
19319
|
const view_fitting_room = "Cabine d'essayage";
|
|
19314
|
-
const fitting_room = { "title": "Cabine d'essayage", "empty": "Votre cabine d'essayage est vide.", "size_not_chosen": "Taille non choisie — choisissez-en une avant l'essayage.", "remove": "Supprimer" };
|
|
19320
|
+
const fitting_room = { "title": "Cabine d'essayage", "empty": "Votre cabine d'essayage est vide.", "size_not_chosen": "Taille non choisie — choisissez-en une avant l'essayage.", "remove": "Supprimer", "ungrouped": "Autres", "try_it_on": "Essayer", "view_product_details": "Voir les détails du produit", "hide_product_details": "Masquer les détails du produit", "add_to_cart": "Ajouter au panier", "recommended_sizes": "Tailles recommandées", "shop_now": "Acheter", "sign_out": "Se déconnecter", "try_it_tucked_in": "Essayez-le rentré", "try_it_untucked": "Essayez-le non rentré", "avatar_placeholder_empty": "Ajoutez des vêtements à essayer en sélectionnant des articles.", "avatar_placeholder_selected": "L'avatar apparaîtra ici lorsque la VTO sera connectée.", "see_selected_items": "Voir la sélection", "no_selection": "Rien de sélectionné.", "tuck_in": "Rentrer", "untuck": "Sortir", "zoom_in": "Zoom +", "zoom_out": "Zoom −", "vto_error": "Impossible de charger l'essayage. Veuillez réessayer." };
|
|
19315
19321
|
const landing = { "header": "Rencontrez votre mini-moi !", "description": "Lâche à la taille mais serré aux hanches ? Nous allons vous montrer.", "get_the_app": "Obtenez l'application", "already_have_account": "Vous avez déjà un compte ?", "sign_in": "Connectez-vous." };
|
|
19316
19322
|
const fr = {
|
|
19317
19323
|
try_it_on,
|
|
@@ -19464,6 +19470,151 @@ function ButtonT({
|
|
|
19464
19470
|
const translatedText = translate(t, vars);
|
|
19465
19471
|
return /* @__PURE__ */ jsx$1(Button, { ...props, children: translatedText });
|
|
19466
19472
|
}
|
|
19473
|
+
const Text = reactExports.forwardRef(({
|
|
19474
|
+
children,
|
|
19475
|
+
variant,
|
|
19476
|
+
css: css2,
|
|
19477
|
+
...props
|
|
19478
|
+
}, ref) => {
|
|
19479
|
+
const variantCss = useVariantCss(variant, (theme) => ({
|
|
19480
|
+
base: {
|
|
19481
|
+
color: theme.color_fg_text,
|
|
19482
|
+
fontFamily: "sans-serif",
|
|
19483
|
+
fontSize: "14px"
|
|
19484
|
+
},
|
|
19485
|
+
brand: {
|
|
19486
|
+
color: theme.color_fg_text,
|
|
19487
|
+
fontFamily: theme.brand_font_family,
|
|
19488
|
+
fontSize: "14px"
|
|
19489
|
+
},
|
|
19490
|
+
error: {
|
|
19491
|
+
color: theme.color_danger,
|
|
19492
|
+
fontSize: "14px"
|
|
19493
|
+
}
|
|
19494
|
+
}));
|
|
19495
|
+
return /* @__PURE__ */ jsx$1("span", { ref, css: [variantCss, css2, "", ""], ...props, children });
|
|
19496
|
+
});
|
|
19497
|
+
Text.displayName = "Text";
|
|
19498
|
+
function TextT({
|
|
19499
|
+
t,
|
|
19500
|
+
vars,
|
|
19501
|
+
...props
|
|
19502
|
+
}) {
|
|
19503
|
+
const {
|
|
19504
|
+
t: translate
|
|
19505
|
+
} = useTranslation();
|
|
19506
|
+
const translatedText = translate(t, vars);
|
|
19507
|
+
return /* @__PURE__ */ jsx$1(Text, { ...props, children: translatedText });
|
|
19508
|
+
}
|
|
19509
|
+
const SvgArrowBack = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M7.825 13L13.425 18.6L12 20L4 12L12 4L13.425 5.4L7.825 11H20V13H7.825Z", fill: "#1E1E1E" }));
|
|
19510
|
+
const AVATAR_BOTTOM_BACKGROUND_URL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAAHCAYAAACbWWcuAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kbtLw1AUxr+makUqCnYQcchQneyiIo61CkWoEGqFVh1MbvqCJg1Jiouj4Fpw8LFYdXBx1tXBVRAEHyD+AeKk6CIlnpsUWsR44HJ/fPd8h3PPAYRGhWlWVxzQdNtMJxNiNrcqhl4RQA8GAQzIzDLmJCkF3/i6p2yKuxiv5Z/3Z/SreYsBAZE4zgzTJt4gntm0Dc77xBFWklXic+IJkxokfuS64vEb56LLAq8ZMTPpeeIIsVjsYKWDWcnUiKeJo6qmU30h67HKeYuzVqmxVp/8h+G8vrLMdTqjSGIRS5AgQkENZVRgI0a3ToqFNL0nfPwjrl8il0KuMhg5FlCFBtn1g+/g92ytwtSkVymcALpfHOdjDAjtAs2643wfO07zBAg+A1d6219tALOfpNfbWvSI1roNXFy3NWUPuNwBhp8M2ZRdKUhHKBSA9zNaUw4YugX61ry5td5x+gBkaFapG+DgEBgvUu11n3/3ds7t35zW/H4AAbNyeaZGKRsAAAAGYktHRAAAADQAefP4P6sAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfqAQYQDxGSDntlAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAABVZJREFUeNrtXNuW6yAINVn9/7+dzsO0ep6clcUR2FzMpK2+NTWKCMgGzNZaa2W11V6sWcQ2u2+mymhjSf9v21Zaa2yfyNgz+ZFBl9YP4YmHf0jfM/ieIdMZfI6sq/N/pg5t28bqTGvtv/89c9F19DE9a4vyJ7rXmbrd+dufdb5oejcak+MF9wzZ11G/4286Nv2NzqHJJuUPOv6IVu6dzj/6PyfPGfaotVb2fYfsNEe39r60XrSvZdzIf1QHjus/7g1Cp0aDxldJPqx28bgWz9x/0c6ijbNbWfNr47wavKNymMmrGXJp1RV6Ph71v7daa3k+n+X7+7tsC6Cv9gmg3eIonQnSzwwenAXYo2B3Br+492qtkENqAQeRPZEAgmefJJCXud+esTIAuvS+5NxbAboEKqmD2p/VWs1O3MiJyNoDTTa9gQVpXC54EbV9XnnzOlujIIEHoHvA10hPOJsVBY+WQOOZQEDbFwtQj8xnBf7W+SPgfGSHzgCviB23Aq7oGq4G1M+YOxIYvjpovzrmQG3ryL4efZHWWnk+n6XWWu73+wLoqy2QPhuYRMaRMkde8DU7K44c2GdnBr1ZchR8eACE5MCj9Hrf55xxJMMWlamjU22RE6sDMsoGSfzLykaMnFGUP5TmWfKNjp9dHTOjv6SHUcfPW2mBAm8UoHDBAbp2Kut0DG2uyLmi7YslOGMJnEV4jgZQsoE5Vz2h2USEPk/g0xN8ytAHzRbNpsNTMfAp4PPdQPpfypfkWx6B+7Zt5fF4lMfjsQD6ap8H0K2H15WyCJLTxJXMIUBtJnDPAHsUuKClmigQ18CU9be2Dg6wUqOuOS9RcI8cXFnyj+yPJziAOJWU51rQxSrTiKOeVXnC0YlUgsy4ihKtgrAGaGi2IUM+0P3l9npEowTouD5IplyzgTQ4pIH02QEV5NyyVrJ4QGVWJt0aEJhFRxbAsJbnRuiXkhAogBpdoYnwzVPhMotPUgDt3QC9JfMs6Xs0gG0JklpkGqGlV9hRP7CXuH99fZXbgnSrvVukzaOM0bEjCpuxZitAQDMLiBOkZTnR7AwHqI4ljFymgZtXCkRQ55ALVnDZDi3IMerH0aTth/W+qcWpnuHYSjKDRrKtsmKhFym5RLPZ1rVabAd6HxipSMgugczMKmsVRCNd8chHZI1HHksBw9E945H9kubR5Eq6ryzRYtEDTxbWE8SRdD/iQJ8h21ll5a/iW0Xf5wKJnoCQ5YpJVLZnAVCJJq168lMatSGoH3klPtFv33C+w/GMaa2tDPpqn6Hgkf+j/WfSzvVH15yVQZcyOhG+zSi1R7KKUp+Mu+daIGT0LMo/y955Djgkg46UmHv3XAIrx0Pdm0FH6PJkpLiP4nCVMRZeIXfwrWXNlqsJkWsD3LyIg5b18bPofVkJWEczYxbQgWTnND30VDB4bbn3Y1HWYKO3xH1WCb5Fh2Zcu5gB6DV5sQbwIzRoNsz70VDJz/nrINKVfXL07rbnI4ZccB29+oPKlaUv9T96Fn3btrLv+++zn5+fcr/fVwZ9tc9pklG+apwKAbjeO2feuSRwZZkjy0GWHGUr4JIy1RI40spTkQBGKeXXSI+AJHp/UqpekAAFXUOnBQEiXDCGO2DpejQAwd25RWWHy1BaPpyVrR9HPmtOA/ebyotWMdKf11qHvB05ypJse+8kIzZHcq49TjGSmbbIgcY/TvYk+Ue/DaGNZwERkbEtAFoLmCJVBWcC5Mjc0dJYDzi3+AFoX7RqEAHgaCWF9xse2hmPVkNlA9+zAPsrfD0/4gN77X7Ex6e+S9bHF+l4+77/nuW90uR2u5V/yJQ49anG7eoAAAAASUVORK5CYII=";
|
|
19511
|
+
const SvgCheckCircle = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("g", { clipPath: "url(#clip0_4454_620)" }, /* @__PURE__ */ reactExports.createElement("path", { d: "M14.6666 7.38674V8.00007C14.6658 9.43769 14.2003 10.8365 13.3395 11.988C12.4787 13.1394 11.2688 13.9817 9.89016 14.3893C8.51154 14.797 7.03809 14.748 5.68957 14.2498C4.34104 13.7516 3.18969 12.8308 2.40723 11.6248C1.62476 10.4188 1.25311 8.99211 1.3477 7.55761C1.44229 6.12312 1.99806 4.75762 2.93211 3.66479C3.86615 2.57195 5.12844 1.81033 6.53071 1.4935C7.93298 1.17668 9.4001 1.32163 10.7133 1.90674M14.6666 2.66674L7.99992 9.34007L5.99992 7.34007", stroke: "#21201F", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })), /* @__PURE__ */ reactExports.createElement("defs", null, /* @__PURE__ */ reactExports.createElement("clipPath", { id: "clip0_4454_620" }, /* @__PURE__ */ reactExports.createElement("rect", { width: 16, height: 16, fill: "white" }))));
|
|
19512
|
+
const SvgChevronLeft = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("g", { opacity: 0.35 }, /* @__PURE__ */ reactExports.createElement("path", { d: "M30 36L18 24L30 12", stroke: "#1E1E1E", strokeWidth: 4, strokeLinecap: "round", strokeLinejoin: "round" })));
|
|
19513
|
+
const SvgChevronRight = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("g", { opacity: 0.35 }, /* @__PURE__ */ reactExports.createElement("path", { d: "M18 36L30 24L18 12", stroke: "#1E1E1E", strokeWidth: 4, strokeLinecap: "round", strokeLinejoin: "round" })));
|
|
19514
|
+
const SvgCloseIcon = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 15, height: 16, viewBox: "0 0 15 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.249026 1.13202C0.353455 1.02778 0.494976 0.969238 0.642526 0.969238C0.790076 0.969238 0.931598 1.02778 1.03603 1.13202L14.423 14.498C14.4747 14.5498 14.5157 14.6112 14.5436 14.6788C14.5716 14.7463 14.5859 14.8187 14.5859 14.8919C14.5858 14.965 14.5714 15.0374 14.5434 15.1049C14.5153 15.1725 14.4743 15.2338 14.4225 15.2855C14.3708 15.3372 14.3094 15.3782 14.2418 15.4061C14.1742 15.4341 14.1018 15.4484 14.0287 15.4484C13.9555 15.4483 13.8831 15.4339 13.8156 15.4058C13.7481 15.3778 13.6867 15.3368 13.635 15.285L0.250026 1.91802C0.198323 1.86646 0.157301 1.80521 0.129312 1.73777C0.101322 1.67034 0.0869141 1.59804 0.0869141 1.52502C0.0869141 1.45201 0.101322 1.37971 0.129312 1.31227C0.157301 1.24483 0.197323 1.18358 0.249026 1.13202Z", fill: "#21201F" }), /* @__PURE__ */ reactExports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.249003 15.285C0.197149 15.2335 0.156 15.1722 0.127922 15.1046C0.0998429 15.0371 0.0853882 14.9647 0.0853882 14.8916C0.0853882 14.8184 0.0998429 14.746 0.127922 14.6785C0.156 14.6109 0.197149 14.5496 0.249003 14.498L13.635 1.13205C13.7407 1.03479 13.8798 0.982096 14.0234 0.984975C14.167 0.987855 14.3039 1.04608 14.4056 1.1475C14.5073 1.24893 14.5658 1.3857 14.5691 1.52928C14.5723 1.67286 14.52 1.81214 14.423 1.91805L1.036 15.285C0.931574 15.3893 0.790052 15.4478 0.642502 15.4478C0.494952 15.4478 0.353431 15.3893 0.249003 15.285Z", fill: "#21201F" }));
|
|
19515
|
+
const SvgDragHandle = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 32, height: 4, viewBox: "0 0 32 4", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("rect", { width: 32, height: 4, rx: 2, fill: "black" }));
|
|
19516
|
+
const SvgFittingRoomIcon = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 24, height: 24, viewBox: "0 0 11 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M6.16963 1.44419C6.16963 1.16593 6.0591 0.89907 5.86234 0.702313C5.66558 0.505556 5.39872 0.39502 5.12047 0.39502C4.84221 0.39502 4.57535 0.505556 4.37859 0.702313C4.18184 0.89907 4.0713 1.16593 4.0713 1.44419C4.0713 2.31867 4.42277 3.01794 5.12047 3.54252H5.11627M5.11627 3.54252L9.29772 5.86537C9.46136 5.95625 9.59771 6.08925 9.69263 6.25058C9.78754 6.41191 9.83757 6.59569 9.83752 6.78287V7.2146C9.83752 7.49286 9.72698 7.75972 9.53023 7.95648C9.33347 8.15323 9.06661 8.26377 8.78835 8.26377H1.44419C1.16593 8.26377 0.89907 8.15323 0.702313 7.95648C0.505556 7.75972 0.39502 7.49286 0.39502 7.2146V6.78287C0.39497 6.59569 0.444998 6.41191 0.539913 6.25058C0.634829 6.08925 0.771177 5.95625 0.934816 5.86537L5.11627 3.54252Z", stroke: "currentColor", strokeWidth: 0.79, strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
19517
|
+
const SvgInfoIcon = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M6.75 9.15V6.75M6.75 4.35H6.756M12.75 6.75C12.75 10.0637 10.0637 12.75 6.75 12.75C3.43629 12.75 0.75 10.0637 0.75 6.75C0.75 3.43629 3.43629 0.75 6.75 0.75C10.0637 0.75 12.75 3.43629 12.75 6.75Z", stroke: "#757575", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
19518
|
+
const SvgLoadingCircle = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 108, height: 108, viewBox: "0 0 108 108", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M27.1325 75.9593C25.3424 77.0549 23.0032 76.4919 21.9077 74.7018L20.2636 72.0155L18.786 69.0476L17.5726 65.9622L16.6328 62.7828L15.9737 59.5336L15.6002 56.2393L15.5153 52.925L15.7196 49.6159L16.2115 46.3373L16.9485 43.2752C17.4396 41.2348 19.4918 39.9788 21.5322 40.4699C23.5726 40.961 24.8286 43.0132 24.3375 45.0536L23.6782 47.793L23.2847 50.4154L23.1213 53.0621L23.1893 55.713L23.4879 58.3479L24.0151 60.9467L24.7668 63.4897L25.7373 65.9574L26.9191 68.3312L28.39 70.7345C29.4855 72.5246 28.9225 74.8638 27.1325 75.9593Z", fill: "black" }), /* @__PURE__ */ reactExports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M32.542 81.0995C33.5444 79.2557 35.8518 78.5736 37.6955 79.5761L40.171 80.922L42.6022 81.9807L45.1164 82.8236L47.6945 83.4441L50.3169 83.8375L52.9636 84.0009L55.6145 83.933L58.2494 83.6343L60.8482 83.1071L63.3912 82.3554L65.8589 81.385L68.2327 80.2031L70.4945 78.8189L72.627 77.2428L74.6141 75.4868L76.4405 73.5643L78.0924 71.49L79.5573 69.2796L80.8239 66.9499L81.8827 64.5187L82.7255 62.0044L83.346 59.4264L83.7395 56.8039L83.9029 54.1572L83.8349 51.5064L83.5363 48.8715L83.0091 46.2727L82.2574 43.7297L81.2869 41.2619L80.1051 38.8882L78.7208 36.6263L77.1447 34.4938L75.3888 32.5068L73.4662 30.6803L71.392 29.0284L69.1815 27.5636L66.8518 26.297L64.4206 25.2382L61.9064 24.3954L59.3283 23.7749L56.7059 23.3814L54.0592 23.218L51.4083 23.2859L48.7734 23.5846L46.1747 24.1118L43.6316 24.8635L41.1639 25.834L38.7901 27.0158L36.5283 28.4001L34.3958 29.9762L32.4088 31.7321L30.4681 33.7749C29.0225 35.2964 26.6173 35.358 25.0958 33.9125C23.5743 32.467 23.5127 30.0618 24.9582 28.5403L27.1274 26.2569L29.6118 24.0615L32.278 22.0909L35.1058 20.3603L38.0737 18.8826L41.1591 17.6693L44.3385 16.7295L47.5877 16.0704L50.882 15.6969L54.1963 15.612L57.5054 15.8163L60.7841 16.3082L64.0074 17.084L67.1509 18.1378L70.1905 19.4615L73.1032 21.0451L75.8669 22.8766L78.4603 24.942L80.8639 27.2255L83.0594 29.7098L85.0299 32.376L86.7606 35.2039L88.2382 38.1718L89.4516 41.2571L90.3914 44.4365L91.0505 47.6857L91.424 50.98L91.5089 54.2943L91.3046 57.6034L90.8127 60.8821L90.0369 64.1055L88.9831 67.2489L87.6594 70.2886L86.0757 73.2013L84.2443 75.9649L82.1789 78.5584L79.8954 80.962L77.4111 83.1574L74.7448 85.128L71.917 86.8587L68.9491 88.3363L65.8637 89.5496L62.6843 90.4894L59.4351 91.1486L56.1408 91.522L52.8265 91.6069L49.5175 91.4026L46.2388 90.9107L43.0154 90.1349L39.872 89.0811L36.8323 87.7574L34.0653 86.253C32.2216 85.2506 31.5395 82.9432 32.542 81.0995Z", fill: "black", fillOpacity: 0.45 }));
|
|
19519
|
+
const SvgIconSelectedItems = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 25, height: 25, viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M1.00024 18.125L12.4169 23.8333L23.8336 18.125M1.00024 12.4167L12.4169 18.125L23.8336 12.4167M12.4169 1L1.00024 6.70833L12.4169 12.4167L23.8336 6.70833L12.4169 1Z", stroke: "#1E1E1E", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
19520
|
+
const SvgTfrIcon = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 12, height: 24, viewBox: "0 0 12 24", fill: "#21201F", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M11.9082 4.0752V19.8516L0.161133 22.8545V1.05859L11.9082 4.0752ZM9.31836 10.8525C8.96951 10.8525 8.68661 11.206 8.68652 11.6416C8.68652 12.0773 8.96946 12.4307 9.31836 12.4307C9.6671 12.4304 9.9502 12.0771 9.9502 11.6416C9.95011 11.2062 9.66705 10.8528 9.31836 10.8525Z" }));
|
|
19521
|
+
const SvgTfrName = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 1584, height: 245, viewBox: "0 0 1584 245", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M131.362 34.4131V210.725L0 244.291V0.708984L131.362 34.4131ZM110.354 110.164C106.453 110.164 103.29 114.111 103.29 118.979C103.29 123.848 106.453 127.795 110.354 127.795C114.256 127.795 117.419 123.848 117.419 118.979C117.419 114.111 114.256 110.164 110.354 110.164Z", fill: "#265A64" }), /* @__PURE__ */ reactExports.createElement("path", { d: "M175.848 76.9219V60.8636H271.533V76.9219H232.957V184.5H214.363V76.9219H175.848ZM309.279 129.443V184.5H291.229V60.8636H309.038V106.865H310.185C312.358 101.875 315.678 97.9103 320.146 94.9723C324.613 92.0343 330.449 90.5653 337.653 90.5653C344.012 90.5653 349.566 91.8733 354.315 94.4893C359.104 97.1053 362.807 101.009 365.423 106.201C368.079 111.353 369.407 117.792 369.407 125.519V184.5H351.356V127.692C351.356 120.891 349.606 115.619 346.104 111.876C342.603 108.093 337.733 106.201 331.495 106.201C327.229 106.201 323.406 107.107 320.025 108.918C316.684 110.729 314.048 113.385 312.116 116.886C310.225 120.348 309.279 124.533 309.279 129.443ZM433.459 186.371C424.323 186.371 416.455 184.42 409.854 180.516C403.294 176.571 398.223 171.038 394.641 163.914C391.1 156.75 389.329 148.359 389.329 138.74C389.329 129.242 391.1 120.871 394.641 113.626C398.223 106.382 403.214 100.728 409.613 96.6626C416.052 92.5978 423.578 90.5653 432.191 90.5653C437.423 90.5653 442.494 91.4306 447.404 93.1612C452.314 94.8918 456.721 97.6084 460.625 101.311C464.529 105.014 467.608 109.823 469.861 115.739C472.115 121.615 473.242 128.759 473.242 137.17V143.57H399.531V130.047H455.554C455.554 125.298 454.588 121.092 452.656 117.43C450.724 113.727 448.008 110.809 444.506 108.676C441.045 106.543 436.98 105.477 432.312 105.477C427.241 105.477 422.814 106.724 419.031 109.219C415.288 111.674 412.39 114.894 410.337 118.879C408.325 122.823 407.319 127.109 407.319 131.737V142.302C407.319 148.5 408.406 153.772 410.579 158.119C412.792 162.465 415.871 165.786 419.815 168.08C423.759 170.333 428.368 171.46 433.64 171.46C437.061 171.46 440.18 170.977 442.997 170.011C445.814 169.005 448.249 167.516 450.302 165.544C452.354 163.572 453.924 161.137 455.011 158.239L472.095 161.318C470.727 166.349 468.272 170.756 464.73 174.539C461.229 178.282 456.822 181.2 451.509 183.293C446.237 185.345 440.22 186.371 433.459 186.371ZM539.709 184.5V60.8636H616.378V76.9219H558.363V114.592H610.884V130.59H558.363V184.5H539.709ZM637.869 184.5V91.7727H655.92V184.5H637.869ZM646.985 77.4652C643.846 77.4652 641.149 76.4188 638.896 74.326C636.682 72.1929 635.575 69.6574 635.575 66.7195C635.575 63.7412 636.682 61.2057 638.896 59.1129C641.149 56.9799 643.846 55.9133 646.985 55.9133C650.124 55.9133 652.801 56.9799 655.014 59.1129C657.268 61.2057 658.395 63.7412 658.395 66.7195C658.395 69.6574 657.268 72.1929 655.014 74.326C652.801 76.4188 650.124 77.4652 646.985 77.4652ZM723.488 91.7727V106.261H672.838V91.7727H723.488ZM686.421 69.5568H704.472V157.273C704.472 160.775 704.995 163.411 706.041 165.182C707.088 166.912 708.436 168.1 710.086 168.744C711.776 169.347 713.608 169.649 715.58 169.649C717.029 169.649 718.296 169.549 719.383 169.347C720.47 169.146 721.315 168.985 721.918 168.864L725.178 183.776C724.132 184.178 722.643 184.58 720.711 184.983C718.779 185.426 716.364 185.667 713.467 185.707C708.718 185.788 704.291 184.943 700.186 183.172C696.08 181.401 692.76 178.664 690.225 174.962C687.689 171.259 686.421 166.611 686.421 161.016V69.5568ZM786.74 91.7727V106.261H736.09V91.7727H786.74ZM749.673 69.5568H767.724V157.273C767.724 160.775 768.247 163.411 769.293 165.182C770.34 166.912 771.688 168.1 773.338 168.744C775.028 169.347 776.86 169.649 778.832 169.649C780.281 169.649 781.548 169.549 782.635 169.347C783.722 169.146 784.567 168.985 785.17 168.864L788.43 183.776C787.384 184.178 785.895 184.58 783.963 184.983C782.031 185.426 779.616 185.667 776.719 185.707C771.97 185.788 767.543 184.943 763.437 183.172C759.332 181.401 756.012 178.664 753.477 174.962C750.941 171.259 749.673 166.611 749.673 161.016V69.5568ZM806.707 184.5V91.7727H824.758V184.5H806.707ZM815.823 77.4652C812.684 77.4652 809.987 76.4188 807.733 74.326C805.52 72.1929 804.413 69.6574 804.413 66.7195C804.413 63.7412 805.52 61.2057 807.733 59.1129C809.987 56.9799 812.684 55.9133 815.823 55.9133C818.962 55.9133 821.639 56.9799 823.852 59.1129C826.106 61.2057 827.233 63.7412 827.233 66.7195C827.233 69.6574 826.106 72.1929 823.852 74.326C821.639 76.4188 818.962 77.4652 815.823 77.4652ZM867.092 129.443V184.5H849.041V91.7727H866.367V106.865H867.514C869.647 101.955 872.988 98.0109 877.535 95.0327C882.124 92.0544 887.899 90.5653 894.861 90.5653C901.18 90.5653 906.714 91.8935 911.463 94.5497C916.212 97.1657 919.895 101.07 922.511 106.261C925.127 111.453 926.435 117.872 926.435 125.519V184.5H908.384V127.692C908.384 120.971 906.633 115.719 903.132 111.936C899.631 108.113 894.821 106.201 888.704 106.201C884.518 106.201 880.795 107.107 877.535 108.918C874.316 110.729 871.76 113.385 869.869 116.886C868.017 120.348 867.092 124.533 867.092 129.443ZM989.521 221.205C982.156 221.205 975.817 220.239 970.504 218.307C965.232 216.375 960.926 213.819 957.585 210.64C954.245 207.46 951.749 203.979 950.099 200.196L965.614 193.797C966.701 195.568 968.15 197.439 969.961 199.411C971.812 201.424 974.307 203.134 977.447 204.543C980.626 205.951 984.711 206.656 989.702 206.656C996.544 206.656 1002.2 204.985 1006.67 201.645C1011.13 198.345 1013.37 193.072 1013.37 185.828V167.597H1012.22C1011.13 169.569 1009.56 171.762 1007.51 174.177C1005.5 176.592 1002.72 178.684 999.18 180.455C995.638 182.226 991.03 183.112 985.355 183.112C978.03 183.112 971.43 181.401 965.554 177.98C959.718 174.519 955.09 169.428 951.669 162.707C948.288 155.945 946.598 147.634 946.598 137.774C946.598 127.914 948.268 119.462 951.609 112.419C954.989 105.376 959.618 99.983 965.494 96.2401C971.37 92.4569 978.03 90.5653 985.476 90.5653C991.231 90.5653 995.879 91.5312 999.421 93.4631C1002.96 95.3546 1005.72 97.5682 1007.69 100.104C1009.7 102.639 1011.25 104.873 1012.34 106.805H1013.67V91.7727H1031.36V186.553C1031.36 194.521 1029.51 201.061 1025.8 206.173C1022.1 211.284 1017.09 215.067 1010.77 217.522C1004.49 219.977 997.409 221.205 989.521 221.205ZM989.339 168.14C994.531 168.14 998.918 166.933 1002.5 164.518C1006.12 162.063 1008.86 158.561 1010.71 154.013C1012.6 149.425 1013.55 143.932 1013.55 137.533C1013.55 131.295 1012.62 125.801 1010.77 121.052C1008.92 116.303 1006.2 112.6 1002.62 109.944C999.039 107.247 994.612 105.899 989.339 105.899C983.906 105.899 979.379 107.308 975.756 110.125C972.134 112.902 969.397 116.685 967.546 121.474C965.735 126.264 964.83 131.616 964.83 137.533C964.83 143.61 965.755 148.942 967.606 153.531C969.458 158.119 972.195 161.701 975.817 164.276C979.479 166.852 983.987 168.14 989.339 168.14ZM1102 184.5V60.8636H1146.07C1155.65 60.8636 1163.6 62.5137 1169.92 65.8139C1176.28 69.1141 1181.03 73.6821 1184.17 79.5178C1187.31 85.3132 1188.88 92.0142 1188.88 99.6207C1188.88 107.187 1187.29 113.848 1184.11 119.603C1180.97 125.318 1176.22 129.765 1169.86 132.945C1163.54 136.124 1155.59 137.714 1146.01 137.714H1112.63V121.656H1144.32C1150.36 121.656 1155.27 120.79 1159.05 119.06C1162.88 117.329 1165.67 114.814 1167.44 111.513C1169.21 108.213 1170.1 104.249 1170.1 99.6207C1170.1 94.9522 1169.19 90.9074 1167.38 87.4865C1165.61 84.0656 1162.82 81.4496 1158.99 79.6385C1155.21 77.7872 1150.24 76.8615 1144.08 76.8615H1120.66V184.5H1102ZM1163.04 128.719L1193.58 184.5H1172.33L1142.39 128.719H1163.04ZM1248.02 186.371C1239.33 186.371 1231.74 184.379 1225.26 180.395C1218.78 176.411 1213.75 170.836 1210.17 163.673C1206.59 156.509 1204.8 148.138 1204.8 138.559C1204.8 128.94 1206.59 120.529 1210.17 113.325C1213.75 106.12 1218.78 100.526 1225.26 96.5419C1231.74 92.5575 1239.33 90.5653 1248.02 90.5653C1256.72 90.5653 1264.3 92.5575 1270.78 96.5419C1277.26 100.526 1282.29 106.12 1285.87 113.325C1289.46 120.529 1291.25 128.94 1291.25 138.559C1291.25 148.138 1289.46 156.509 1285.87 163.673C1282.29 170.836 1277.26 176.411 1270.78 180.395C1264.3 184.379 1256.72 186.371 1248.02 186.371ZM1248.08 171.219C1253.72 171.219 1258.39 169.73 1262.09 166.751C1265.79 163.773 1268.53 159.809 1270.3 154.859C1272.11 149.908 1273.01 144.455 1273.01 138.499C1273.01 132.582 1272.11 127.149 1270.3 122.199C1268.53 117.208 1265.79 113.204 1262.09 110.185C1258.39 107.167 1253.72 105.658 1248.08 105.658C1242.41 105.658 1237.7 107.167 1233.96 110.185C1230.25 113.204 1227.5 117.208 1225.69 122.199C1223.91 127.149 1223.03 132.582 1223.03 138.499C1223.03 144.455 1223.91 149.908 1225.69 154.859C1227.5 159.809 1230.25 163.773 1233.96 166.751C1237.7 169.73 1242.41 171.219 1248.08 171.219ZM1350.45 186.371C1341.76 186.371 1334.17 184.379 1327.69 180.395C1321.21 176.411 1316.18 170.836 1312.6 163.673C1309.02 156.509 1307.23 148.138 1307.23 138.559C1307.23 128.94 1309.02 120.529 1312.6 113.325C1316.18 106.12 1321.21 100.526 1327.69 96.5419C1334.17 92.5575 1341.76 90.5653 1350.45 90.5653C1359.15 90.5653 1366.73 92.5575 1373.21 96.5419C1379.69 100.526 1384.72 106.12 1388.31 113.325C1391.89 120.529 1393.68 128.94 1393.68 138.559C1393.68 148.138 1391.89 156.509 1388.31 163.673C1384.72 170.836 1379.69 176.411 1373.21 180.395C1366.73 184.379 1359.15 186.371 1350.45 186.371ZM1350.51 171.219C1356.15 171.219 1360.82 169.73 1364.52 166.751C1368.22 163.773 1370.96 159.809 1372.73 154.859C1374.54 149.908 1375.45 144.455 1375.45 138.499C1375.45 132.582 1374.54 127.149 1372.73 122.199C1370.96 117.208 1368.22 113.204 1364.52 110.185C1360.82 107.167 1356.15 105.658 1350.51 105.658C1344.84 105.658 1340.13 107.167 1336.39 110.185C1332.68 113.204 1329.93 117.208 1328.12 122.199C1326.35 127.149 1325.46 132.582 1325.46 138.499C1325.46 144.455 1326.35 149.908 1328.12 154.859C1329.93 159.809 1332.68 163.773 1336.39 166.751C1340.13 169.73 1344.84 171.219 1350.51 171.219ZM1413.83 184.5V91.7727H1431.15V106.865H1432.3C1434.23 101.754 1437.39 97.7694 1441.78 94.9119C1446.16 92.0142 1451.42 90.5653 1457.53 90.5653C1463.73 90.5653 1468.92 92.0142 1473.11 94.9119C1477.33 97.8097 1480.45 101.794 1482.47 106.865H1483.43C1485.65 101.915 1489.17 97.9706 1494 95.0327C1498.83 92.0544 1504.58 90.5653 1511.26 90.5653C1519.67 90.5653 1526.54 93.2015 1531.85 98.4737C1537.2 103.746 1539.88 111.695 1539.88 122.32V184.5H1521.83V124.01C1521.83 117.732 1520.12 113.184 1516.7 110.366C1513.27 107.549 1509.19 106.141 1504.44 106.141C1498.56 106.141 1494 107.952 1490.74 111.574C1487.48 115.156 1485.85 119.764 1485.85 125.398V184.5H1467.86V122.863C1467.86 117.832 1466.29 113.787 1463.15 110.729C1460.01 107.67 1455.92 106.141 1450.89 106.141C1447.47 106.141 1444.31 107.046 1441.42 108.857C1438.56 110.628 1436.24 113.103 1434.47 116.283C1432.74 119.462 1431.88 123.145 1431.88 127.33V184.5H1413.83Z", fill: "#265A64" }));
|
|
19522
|
+
const SvgIconZoom = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M19 19L14.65 14.65M9 6V12M6 9H12M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9Z", stroke: "#1E1E1E", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
19523
|
+
let baseUrl$1;
|
|
19524
|
+
function _init$5() {
|
|
19525
|
+
const {
|
|
19526
|
+
config
|
|
19527
|
+
} = getStaticData();
|
|
19528
|
+
baseUrl$1 = config.asset.baseUrl;
|
|
19529
|
+
}
|
|
19530
|
+
function getExternalAssetUrl(fileName) {
|
|
19531
|
+
return `${baseUrl$1}/${fileName}`;
|
|
19532
|
+
}
|
|
19533
|
+
function Loading({
|
|
19534
|
+
t = "loading"
|
|
19535
|
+
}) {
|
|
19536
|
+
const css2 = useCss((_theme) => {
|
|
19537
|
+
const spin = keyframes({
|
|
19538
|
+
from: {
|
|
19539
|
+
transform: "rotate(0deg)"
|
|
19540
|
+
},
|
|
19541
|
+
to: {
|
|
19542
|
+
transform: "rotate(360deg)"
|
|
19543
|
+
}
|
|
19544
|
+
});
|
|
19545
|
+
return {
|
|
19546
|
+
container: {
|
|
19547
|
+
display: "flex",
|
|
19548
|
+
flexDirection: "column",
|
|
19549
|
+
justifyContent: "center",
|
|
19550
|
+
alignItems: "center",
|
|
19551
|
+
height: "100%",
|
|
19552
|
+
gap: "4px"
|
|
19553
|
+
},
|
|
19554
|
+
icon: {
|
|
19555
|
+
width: "76px",
|
|
19556
|
+
height: "76px",
|
|
19557
|
+
animation: `${spin} 2s linear infinite`
|
|
19558
|
+
},
|
|
19559
|
+
text: {}
|
|
19560
|
+
};
|
|
19561
|
+
});
|
|
19562
|
+
return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
|
|
19563
|
+
/* @__PURE__ */ jsx$1(SvgLoadingCircle, { css: css2.icon }),
|
|
19564
|
+
/* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.text, t })
|
|
19565
|
+
] });
|
|
19566
|
+
}
|
|
19567
|
+
const Link = reactExports.forwardRef(({
|
|
19568
|
+
children,
|
|
19569
|
+
variant,
|
|
19570
|
+
css: css2,
|
|
19571
|
+
...props
|
|
19572
|
+
}, ref) => {
|
|
19573
|
+
const variantCss = useVariantCss(variant, (theme) => ({
|
|
19574
|
+
base: {
|
|
19575
|
+
cursor: "pointer !important",
|
|
19576
|
+
color: theme.color_fg_text,
|
|
19577
|
+
fontFamily: theme.font_family,
|
|
19578
|
+
fontSize: "14px",
|
|
19579
|
+
textDecoration: "none"
|
|
19580
|
+
},
|
|
19581
|
+
brand: {
|
|
19582
|
+
cursor: "pointer !important",
|
|
19583
|
+
color: theme.color_fg_text,
|
|
19584
|
+
fontFamily: theme.brand_font_family,
|
|
19585
|
+
fontSize: "14px",
|
|
19586
|
+
textDecoration: theme.brand_link_text_decoration
|
|
19587
|
+
},
|
|
19588
|
+
underline: {
|
|
19589
|
+
cursor: "pointer !important",
|
|
19590
|
+
color: theme.color_fg_text,
|
|
19591
|
+
fontFamily: theme.font_family,
|
|
19592
|
+
fontSize: "14px",
|
|
19593
|
+
textDecoration: "underline"
|
|
19594
|
+
},
|
|
19595
|
+
semibold: {
|
|
19596
|
+
cursor: "pointer !important",
|
|
19597
|
+
color: theme.color_fg_text,
|
|
19598
|
+
fontFamily: theme.font_family,
|
|
19599
|
+
fontSize: "14px",
|
|
19600
|
+
fontWeight: 600,
|
|
19601
|
+
textDecoration: "none"
|
|
19602
|
+
}
|
|
19603
|
+
}));
|
|
19604
|
+
return /* @__PURE__ */ jsx$1("a", { ref, css: [variantCss, css2, "", ""], ...props, children });
|
|
19605
|
+
});
|
|
19606
|
+
Link.displayName = "Link";
|
|
19607
|
+
function LinkT({
|
|
19608
|
+
t,
|
|
19609
|
+
vars,
|
|
19610
|
+
...props
|
|
19611
|
+
}) {
|
|
19612
|
+
const {
|
|
19613
|
+
t: translate
|
|
19614
|
+
} = useTranslation();
|
|
19615
|
+
const translatedText = translate(t, vars);
|
|
19616
|
+
return /* @__PURE__ */ jsx$1(Link, { ...props, children: translatedText });
|
|
19617
|
+
}
|
|
19467
19618
|
var lib = { exports: {} };
|
|
19468
19619
|
var Modal = {};
|
|
19469
19620
|
var propTypes = { exports: {} };
|
|
@@ -20923,64 +21074,6 @@ function requireLib() {
|
|
|
20923
21074
|
}
|
|
20924
21075
|
var libExports = requireLib();
|
|
20925
21076
|
const ModalBase = /* @__PURE__ */ getDefaultExportFromCjs(libExports);
|
|
20926
|
-
const Text = reactExports.forwardRef(({
|
|
20927
|
-
children,
|
|
20928
|
-
variant,
|
|
20929
|
-
css: css2,
|
|
20930
|
-
...props
|
|
20931
|
-
}, ref) => {
|
|
20932
|
-
const variantCss = useVariantCss(variant, (theme) => ({
|
|
20933
|
-
base: {
|
|
20934
|
-
color: theme.color_fg_text,
|
|
20935
|
-
fontFamily: "sans-serif",
|
|
20936
|
-
fontSize: "14px"
|
|
20937
|
-
},
|
|
20938
|
-
brand: {
|
|
20939
|
-
color: theme.color_fg_text,
|
|
20940
|
-
fontFamily: theme.brand_font_family,
|
|
20941
|
-
fontSize: "14px"
|
|
20942
|
-
},
|
|
20943
|
-
error: {
|
|
20944
|
-
color: theme.color_danger,
|
|
20945
|
-
fontSize: "14px"
|
|
20946
|
-
}
|
|
20947
|
-
}));
|
|
20948
|
-
return /* @__PURE__ */ jsx$1("span", { ref, css: [variantCss, css2, "", ""], ...props, children });
|
|
20949
|
-
});
|
|
20950
|
-
Text.displayName = "Text";
|
|
20951
|
-
function TextT({
|
|
20952
|
-
t,
|
|
20953
|
-
vars,
|
|
20954
|
-
...props
|
|
20955
|
-
}) {
|
|
20956
|
-
const {
|
|
20957
|
-
t: translate
|
|
20958
|
-
} = useTranslation();
|
|
20959
|
-
const translatedText = translate(t, vars);
|
|
20960
|
-
return /* @__PURE__ */ jsx$1(Text, { ...props, children: translatedText });
|
|
20961
|
-
}
|
|
20962
|
-
const SvgArrowBack = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M7.825 13L13.425 18.6L12 20L4 12L12 4L13.425 5.4L7.825 11H20V13H7.825Z", fill: "#1E1E1E" }));
|
|
20963
|
-
const AVATAR_BOTTOM_BACKGROUND_URL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAAHCAYAAACbWWcuAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kbtLw1AUxr+makUqCnYQcchQneyiIo61CkWoEGqFVh1MbvqCJg1Jiouj4Fpw8LFYdXBx1tXBVRAEHyD+AeKk6CIlnpsUWsR44HJ/fPd8h3PPAYRGhWlWVxzQdNtMJxNiNrcqhl4RQA8GAQzIzDLmJCkF3/i6p2yKuxiv5Z/3Z/SreYsBAZE4zgzTJt4gntm0Dc77xBFWklXic+IJkxokfuS64vEb56LLAq8ZMTPpeeIIsVjsYKWDWcnUiKeJo6qmU30h67HKeYuzVqmxVp/8h+G8vrLMdTqjSGIRS5AgQkENZVRgI0a3ToqFNL0nfPwjrl8il0KuMhg5FlCFBtn1g+/g92ytwtSkVymcALpfHOdjDAjtAs2643wfO07zBAg+A1d6219tALOfpNfbWvSI1roNXFy3NWUPuNwBhp8M2ZRdKUhHKBSA9zNaUw4YugX61ry5td5x+gBkaFapG+DgEBgvUu11n3/3ds7t35zW/H4AAbNyeaZGKRsAAAAGYktHRAAAADQAefP4P6sAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfqAQYQDxGSDntlAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAABVZJREFUeNrtXNuW6yAINVn9/7+dzsO0ep6clcUR2FzMpK2+NTWKCMgGzNZaa2W11V6sWcQ2u2+mymhjSf9v21Zaa2yfyNgz+ZFBl9YP4YmHf0jfM/ieIdMZfI6sq/N/pg5t28bqTGvtv/89c9F19DE9a4vyJ7rXmbrd+dufdb5oejcak+MF9wzZ11G/4286Nv2NzqHJJuUPOv6IVu6dzj/6PyfPGfaotVb2fYfsNEe39r60XrSvZdzIf1QHjus/7g1Cp0aDxldJPqx28bgWz9x/0c6ijbNbWfNr47wavKNymMmrGXJp1RV6Ph71v7daa3k+n+X7+7tsC6Cv9gmg3eIonQnSzwwenAXYo2B3Br+492qtkENqAQeRPZEAgmefJJCXud+esTIAuvS+5NxbAboEKqmD2p/VWs1O3MiJyNoDTTa9gQVpXC54EbV9XnnzOlujIIEHoHvA10hPOJsVBY+WQOOZQEDbFwtQj8xnBf7W+SPgfGSHzgCviB23Aq7oGq4G1M+YOxIYvjpovzrmQG3ryL4efZHWWnk+n6XWWu73+wLoqy2QPhuYRMaRMkde8DU7K44c2GdnBr1ZchR8eACE5MCj9Hrf55xxJMMWlamjU22RE6sDMsoGSfzLykaMnFGUP5TmWfKNjp9dHTOjv6SHUcfPW2mBAm8UoHDBAbp2Kut0DG2uyLmi7YslOGMJnEV4jgZQsoE5Vz2h2USEPk/g0xN8ytAHzRbNpsNTMfAp4PPdQPpfypfkWx6B+7Zt5fF4lMfjsQD6ap8H0K2H15WyCJLTxJXMIUBtJnDPAHsUuKClmigQ18CU9be2Dg6wUqOuOS9RcI8cXFnyj+yPJziAOJWU51rQxSrTiKOeVXnC0YlUgsy4ihKtgrAGaGi2IUM+0P3l9npEowTouD5IplyzgTQ4pIH02QEV5NyyVrJ4QGVWJt0aEJhFRxbAsJbnRuiXkhAogBpdoYnwzVPhMotPUgDt3QC9JfMs6Xs0gG0JklpkGqGlV9hRP7CXuH99fZXbgnSrvVukzaOM0bEjCpuxZitAQDMLiBOkZTnR7AwHqI4ljFymgZtXCkRQ55ALVnDZDi3IMerH0aTth/W+qcWpnuHYSjKDRrKtsmKhFym5RLPZ1rVabAd6HxipSMgugczMKmsVRCNd8chHZI1HHksBw9E945H9kubR5Eq6ryzRYtEDTxbWE8SRdD/iQJ8h21ll5a/iW0Xf5wKJnoCQ5YpJVLZnAVCJJq168lMatSGoH3klPtFv33C+w/GMaa2tDPpqn6Hgkf+j/WfSzvVH15yVQZcyOhG+zSi1R7KKUp+Mu+daIGT0LMo/y955Djgkg46UmHv3XAIrx0Pdm0FH6PJkpLiP4nCVMRZeIXfwrWXNlqsJkWsD3LyIg5b18bPofVkJWEczYxbQgWTnND30VDB4bbn3Y1HWYKO3xH1WCb5Fh2Zcu5gB6DV5sQbwIzRoNsz70VDJz/nrINKVfXL07rbnI4ZccB29+oPKlaUv9T96Fn3btrLv+++zn5+fcr/fVwZ9tc9pklG+apwKAbjeO2feuSRwZZkjy0GWHGUr4JIy1RI40spTkQBGKeXXSI+AJHp/UqpekAAFXUOnBQEiXDCGO2DpejQAwd25RWWHy1BaPpyVrR9HPmtOA/ebyotWMdKf11qHvB05ypJse+8kIzZHcq49TjGSmbbIgcY/TvYk+Ue/DaGNZwERkbEtAFoLmCJVBWcC5Mjc0dJYDzi3+AFoX7RqEAHgaCWF9xse2hmPVkNlA9+zAPsrfD0/4gN77X7Ex6e+S9bHF+l4+77/nuW90uR2u5V/yJQ49anG7eoAAAAASUVORK5CYII=";
|
|
20964
|
-
const SvgCheckCircle = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("g", { clipPath: "url(#clip0_4454_620)" }, /* @__PURE__ */ reactExports.createElement("path", { d: "M14.6666 7.38674V8.00007C14.6658 9.43769 14.2003 10.8365 13.3395 11.988C12.4787 13.1394 11.2688 13.9817 9.89016 14.3893C8.51154 14.797 7.03809 14.748 5.68957 14.2498C4.34104 13.7516 3.18969 12.8308 2.40723 11.6248C1.62476 10.4188 1.25311 8.99211 1.3477 7.55761C1.44229 6.12312 1.99806 4.75762 2.93211 3.66479C3.86615 2.57195 5.12844 1.81033 6.53071 1.4935C7.93298 1.17668 9.4001 1.32163 10.7133 1.90674M14.6666 2.66674L7.99992 9.34007L5.99992 7.34007", stroke: "#21201F", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })), /* @__PURE__ */ reactExports.createElement("defs", null, /* @__PURE__ */ reactExports.createElement("clipPath", { id: "clip0_4454_620" }, /* @__PURE__ */ reactExports.createElement("rect", { width: 16, height: 16, fill: "white" }))));
|
|
20965
|
-
const SvgChevronLeft = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("g", { opacity: 0.35 }, /* @__PURE__ */ reactExports.createElement("path", { d: "M30 36L18 24L30 12", stroke: "#1E1E1E", strokeWidth: 4, strokeLinecap: "round", strokeLinejoin: "round" })));
|
|
20966
|
-
const SvgChevronRight = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("g", { opacity: 0.35 }, /* @__PURE__ */ reactExports.createElement("path", { d: "M18 36L30 24L18 12", stroke: "#1E1E1E", strokeWidth: 4, strokeLinecap: "round", strokeLinejoin: "round" })));
|
|
20967
|
-
const SvgCloseIcon = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 15, height: 16, viewBox: "0 0 15 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.249026 1.13202C0.353455 1.02778 0.494976 0.969238 0.642526 0.969238C0.790076 0.969238 0.931598 1.02778 1.03603 1.13202L14.423 14.498C14.4747 14.5498 14.5157 14.6112 14.5436 14.6788C14.5716 14.7463 14.5859 14.8187 14.5859 14.8919C14.5858 14.965 14.5714 15.0374 14.5434 15.1049C14.5153 15.1725 14.4743 15.2338 14.4225 15.2855C14.3708 15.3372 14.3094 15.3782 14.2418 15.4061C14.1742 15.4341 14.1018 15.4484 14.0287 15.4484C13.9555 15.4483 13.8831 15.4339 13.8156 15.4058C13.7481 15.3778 13.6867 15.3368 13.635 15.285L0.250026 1.91802C0.198323 1.86646 0.157301 1.80521 0.129312 1.73777C0.101322 1.67034 0.0869141 1.59804 0.0869141 1.52502C0.0869141 1.45201 0.101322 1.37971 0.129312 1.31227C0.157301 1.24483 0.197323 1.18358 0.249026 1.13202Z", fill: "#21201F" }), /* @__PURE__ */ reactExports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.249003 15.285C0.197149 15.2335 0.156 15.1722 0.127922 15.1046C0.0998429 15.0371 0.0853882 14.9647 0.0853882 14.8916C0.0853882 14.8184 0.0998429 14.746 0.127922 14.6785C0.156 14.6109 0.197149 14.5496 0.249003 14.498L13.635 1.13205C13.7407 1.03479 13.8798 0.982096 14.0234 0.984975C14.167 0.987855 14.3039 1.04608 14.4056 1.1475C14.5073 1.24893 14.5658 1.3857 14.5691 1.52928C14.5723 1.67286 14.52 1.81214 14.423 1.91805L1.036 15.285C0.931574 15.3893 0.790052 15.4478 0.642502 15.4478C0.494952 15.4478 0.353431 15.3893 0.249003 15.285Z", fill: "#21201F" }));
|
|
20968
|
-
const SvgDragHandle = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 32, height: 4, viewBox: "0 0 32 4", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("rect", { width: 32, height: 4, rx: 2, fill: "black" }));
|
|
20969
|
-
const SvgFittingRoomIcon = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 24, height: 24, viewBox: "0 0 11 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M6.16963 1.44419C6.16963 1.16593 6.0591 0.89907 5.86234 0.702313C5.66558 0.505556 5.39872 0.39502 5.12047 0.39502C4.84221 0.39502 4.57535 0.505556 4.37859 0.702313C4.18184 0.89907 4.0713 1.16593 4.0713 1.44419C4.0713 2.31867 4.42277 3.01794 5.12047 3.54252H5.11627M5.11627 3.54252L9.29772 5.86537C9.46136 5.95625 9.59771 6.08925 9.69263 6.25058C9.78754 6.41191 9.83757 6.59569 9.83752 6.78287V7.2146C9.83752 7.49286 9.72698 7.75972 9.53023 7.95648C9.33347 8.15323 9.06661 8.26377 8.78835 8.26377H1.44419C1.16593 8.26377 0.89907 8.15323 0.702313 7.95648C0.505556 7.75972 0.39502 7.49286 0.39502 7.2146V6.78287C0.39497 6.59569 0.444998 6.41191 0.539913 6.25058C0.634829 6.08925 0.771177 5.95625 0.934816 5.86537L5.11627 3.54252Z", stroke: "currentColor", strokeWidth: 0.79, strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
20970
|
-
const SvgInfoIcon = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M6.75 9.15V6.75M6.75 4.35H6.756M12.75 6.75C12.75 10.0637 10.0637 12.75 6.75 12.75C3.43629 12.75 0.75 10.0637 0.75 6.75C0.75 3.43629 3.43629 0.75 6.75 0.75C10.0637 0.75 12.75 3.43629 12.75 6.75Z", stroke: "#757575", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
20971
|
-
const SvgLoadingCircle = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 108, height: 108, viewBox: "0 0 108 108", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M27.1325 75.9593C25.3424 77.0549 23.0032 76.4919 21.9077 74.7018L20.2636 72.0155L18.786 69.0476L17.5726 65.9622L16.6328 62.7828L15.9737 59.5336L15.6002 56.2393L15.5153 52.925L15.7196 49.6159L16.2115 46.3373L16.9485 43.2752C17.4396 41.2348 19.4918 39.9788 21.5322 40.4699C23.5726 40.961 24.8286 43.0132 24.3375 45.0536L23.6782 47.793L23.2847 50.4154L23.1213 53.0621L23.1893 55.713L23.4879 58.3479L24.0151 60.9467L24.7668 63.4897L25.7373 65.9574L26.9191 68.3312L28.39 70.7345C29.4855 72.5246 28.9225 74.8638 27.1325 75.9593Z", fill: "black" }), /* @__PURE__ */ reactExports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M32.542 81.0995C33.5444 79.2557 35.8518 78.5736 37.6955 79.5761L40.171 80.922L42.6022 81.9807L45.1164 82.8236L47.6945 83.4441L50.3169 83.8375L52.9636 84.0009L55.6145 83.933L58.2494 83.6343L60.8482 83.1071L63.3912 82.3554L65.8589 81.385L68.2327 80.2031L70.4945 78.8189L72.627 77.2428L74.6141 75.4868L76.4405 73.5643L78.0924 71.49L79.5573 69.2796L80.8239 66.9499L81.8827 64.5187L82.7255 62.0044L83.346 59.4264L83.7395 56.8039L83.9029 54.1572L83.8349 51.5064L83.5363 48.8715L83.0091 46.2727L82.2574 43.7297L81.2869 41.2619L80.1051 38.8882L78.7208 36.6263L77.1447 34.4938L75.3888 32.5068L73.4662 30.6803L71.392 29.0284L69.1815 27.5636L66.8518 26.297L64.4206 25.2382L61.9064 24.3954L59.3283 23.7749L56.7059 23.3814L54.0592 23.218L51.4083 23.2859L48.7734 23.5846L46.1747 24.1118L43.6316 24.8635L41.1639 25.834L38.7901 27.0158L36.5283 28.4001L34.3958 29.9762L32.4088 31.7321L30.4681 33.7749C29.0225 35.2964 26.6173 35.358 25.0958 33.9125C23.5743 32.467 23.5127 30.0618 24.9582 28.5403L27.1274 26.2569L29.6118 24.0615L32.278 22.0909L35.1058 20.3603L38.0737 18.8826L41.1591 17.6693L44.3385 16.7295L47.5877 16.0704L50.882 15.6969L54.1963 15.612L57.5054 15.8163L60.7841 16.3082L64.0074 17.084L67.1509 18.1378L70.1905 19.4615L73.1032 21.0451L75.8669 22.8766L78.4603 24.942L80.8639 27.2255L83.0594 29.7098L85.0299 32.376L86.7606 35.2039L88.2382 38.1718L89.4516 41.2571L90.3914 44.4365L91.0505 47.6857L91.424 50.98L91.5089 54.2943L91.3046 57.6034L90.8127 60.8821L90.0369 64.1055L88.9831 67.2489L87.6594 70.2886L86.0757 73.2013L84.2443 75.9649L82.1789 78.5584L79.8954 80.962L77.4111 83.1574L74.7448 85.128L71.917 86.8587L68.9491 88.3363L65.8637 89.5496L62.6843 90.4894L59.4351 91.1486L56.1408 91.522L52.8265 91.6069L49.5175 91.4026L46.2388 90.9107L43.0154 90.1349L39.872 89.0811L36.8323 87.7574L34.0653 86.253C32.2216 85.2506 31.5395 82.9432 32.542 81.0995Z", fill: "black", fillOpacity: 0.45 }));
|
|
20972
|
-
const SvgTfrIcon = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 12, height: 24, viewBox: "0 0 12 24", fill: "#21201F", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M11.9082 4.0752V19.8516L0.161133 22.8545V1.05859L11.9082 4.0752ZM9.31836 10.8525C8.96951 10.8525 8.68661 11.206 8.68652 11.6416C8.68652 12.0773 8.96946 12.4307 9.31836 12.4307C9.6671 12.4304 9.9502 12.0771 9.9502 11.6416C9.95011 11.2062 9.66705 10.8528 9.31836 10.8525Z" }));
|
|
20973
|
-
const SvgTfrName = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 1584, height: 245, viewBox: "0 0 1584 245", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M131.362 34.4131V210.725L0 244.291V0.708984L131.362 34.4131ZM110.354 110.164C106.453 110.164 103.29 114.111 103.29 118.979C103.29 123.848 106.453 127.795 110.354 127.795C114.256 127.795 117.419 123.848 117.419 118.979C117.419 114.111 114.256 110.164 110.354 110.164Z", fill: "#265A64" }), /* @__PURE__ */ reactExports.createElement("path", { d: "M175.848 76.9219V60.8636H271.533V76.9219H232.957V184.5H214.363V76.9219H175.848ZM309.279 129.443V184.5H291.229V60.8636H309.038V106.865H310.185C312.358 101.875 315.678 97.9103 320.146 94.9723C324.613 92.0343 330.449 90.5653 337.653 90.5653C344.012 90.5653 349.566 91.8733 354.315 94.4893C359.104 97.1053 362.807 101.009 365.423 106.201C368.079 111.353 369.407 117.792 369.407 125.519V184.5H351.356V127.692C351.356 120.891 349.606 115.619 346.104 111.876C342.603 108.093 337.733 106.201 331.495 106.201C327.229 106.201 323.406 107.107 320.025 108.918C316.684 110.729 314.048 113.385 312.116 116.886C310.225 120.348 309.279 124.533 309.279 129.443ZM433.459 186.371C424.323 186.371 416.455 184.42 409.854 180.516C403.294 176.571 398.223 171.038 394.641 163.914C391.1 156.75 389.329 148.359 389.329 138.74C389.329 129.242 391.1 120.871 394.641 113.626C398.223 106.382 403.214 100.728 409.613 96.6626C416.052 92.5978 423.578 90.5653 432.191 90.5653C437.423 90.5653 442.494 91.4306 447.404 93.1612C452.314 94.8918 456.721 97.6084 460.625 101.311C464.529 105.014 467.608 109.823 469.861 115.739C472.115 121.615 473.242 128.759 473.242 137.17V143.57H399.531V130.047H455.554C455.554 125.298 454.588 121.092 452.656 117.43C450.724 113.727 448.008 110.809 444.506 108.676C441.045 106.543 436.98 105.477 432.312 105.477C427.241 105.477 422.814 106.724 419.031 109.219C415.288 111.674 412.39 114.894 410.337 118.879C408.325 122.823 407.319 127.109 407.319 131.737V142.302C407.319 148.5 408.406 153.772 410.579 158.119C412.792 162.465 415.871 165.786 419.815 168.08C423.759 170.333 428.368 171.46 433.64 171.46C437.061 171.46 440.18 170.977 442.997 170.011C445.814 169.005 448.249 167.516 450.302 165.544C452.354 163.572 453.924 161.137 455.011 158.239L472.095 161.318C470.727 166.349 468.272 170.756 464.73 174.539C461.229 178.282 456.822 181.2 451.509 183.293C446.237 185.345 440.22 186.371 433.459 186.371ZM539.709 184.5V60.8636H616.378V76.9219H558.363V114.592H610.884V130.59H558.363V184.5H539.709ZM637.869 184.5V91.7727H655.92V184.5H637.869ZM646.985 77.4652C643.846 77.4652 641.149 76.4188 638.896 74.326C636.682 72.1929 635.575 69.6574 635.575 66.7195C635.575 63.7412 636.682 61.2057 638.896 59.1129C641.149 56.9799 643.846 55.9133 646.985 55.9133C650.124 55.9133 652.801 56.9799 655.014 59.1129C657.268 61.2057 658.395 63.7412 658.395 66.7195C658.395 69.6574 657.268 72.1929 655.014 74.326C652.801 76.4188 650.124 77.4652 646.985 77.4652ZM723.488 91.7727V106.261H672.838V91.7727H723.488ZM686.421 69.5568H704.472V157.273C704.472 160.775 704.995 163.411 706.041 165.182C707.088 166.912 708.436 168.1 710.086 168.744C711.776 169.347 713.608 169.649 715.58 169.649C717.029 169.649 718.296 169.549 719.383 169.347C720.47 169.146 721.315 168.985 721.918 168.864L725.178 183.776C724.132 184.178 722.643 184.58 720.711 184.983C718.779 185.426 716.364 185.667 713.467 185.707C708.718 185.788 704.291 184.943 700.186 183.172C696.08 181.401 692.76 178.664 690.225 174.962C687.689 171.259 686.421 166.611 686.421 161.016V69.5568ZM786.74 91.7727V106.261H736.09V91.7727H786.74ZM749.673 69.5568H767.724V157.273C767.724 160.775 768.247 163.411 769.293 165.182C770.34 166.912 771.688 168.1 773.338 168.744C775.028 169.347 776.86 169.649 778.832 169.649C780.281 169.649 781.548 169.549 782.635 169.347C783.722 169.146 784.567 168.985 785.17 168.864L788.43 183.776C787.384 184.178 785.895 184.58 783.963 184.983C782.031 185.426 779.616 185.667 776.719 185.707C771.97 185.788 767.543 184.943 763.437 183.172C759.332 181.401 756.012 178.664 753.477 174.962C750.941 171.259 749.673 166.611 749.673 161.016V69.5568ZM806.707 184.5V91.7727H824.758V184.5H806.707ZM815.823 77.4652C812.684 77.4652 809.987 76.4188 807.733 74.326C805.52 72.1929 804.413 69.6574 804.413 66.7195C804.413 63.7412 805.52 61.2057 807.733 59.1129C809.987 56.9799 812.684 55.9133 815.823 55.9133C818.962 55.9133 821.639 56.9799 823.852 59.1129C826.106 61.2057 827.233 63.7412 827.233 66.7195C827.233 69.6574 826.106 72.1929 823.852 74.326C821.639 76.4188 818.962 77.4652 815.823 77.4652ZM867.092 129.443V184.5H849.041V91.7727H866.367V106.865H867.514C869.647 101.955 872.988 98.0109 877.535 95.0327C882.124 92.0544 887.899 90.5653 894.861 90.5653C901.18 90.5653 906.714 91.8935 911.463 94.5497C916.212 97.1657 919.895 101.07 922.511 106.261C925.127 111.453 926.435 117.872 926.435 125.519V184.5H908.384V127.692C908.384 120.971 906.633 115.719 903.132 111.936C899.631 108.113 894.821 106.201 888.704 106.201C884.518 106.201 880.795 107.107 877.535 108.918C874.316 110.729 871.76 113.385 869.869 116.886C868.017 120.348 867.092 124.533 867.092 129.443ZM989.521 221.205C982.156 221.205 975.817 220.239 970.504 218.307C965.232 216.375 960.926 213.819 957.585 210.64C954.245 207.46 951.749 203.979 950.099 200.196L965.614 193.797C966.701 195.568 968.15 197.439 969.961 199.411C971.812 201.424 974.307 203.134 977.447 204.543C980.626 205.951 984.711 206.656 989.702 206.656C996.544 206.656 1002.2 204.985 1006.67 201.645C1011.13 198.345 1013.37 193.072 1013.37 185.828V167.597H1012.22C1011.13 169.569 1009.56 171.762 1007.51 174.177C1005.5 176.592 1002.72 178.684 999.18 180.455C995.638 182.226 991.03 183.112 985.355 183.112C978.03 183.112 971.43 181.401 965.554 177.98C959.718 174.519 955.09 169.428 951.669 162.707C948.288 155.945 946.598 147.634 946.598 137.774C946.598 127.914 948.268 119.462 951.609 112.419C954.989 105.376 959.618 99.983 965.494 96.2401C971.37 92.4569 978.03 90.5653 985.476 90.5653C991.231 90.5653 995.879 91.5312 999.421 93.4631C1002.96 95.3546 1005.72 97.5682 1007.69 100.104C1009.7 102.639 1011.25 104.873 1012.34 106.805H1013.67V91.7727H1031.36V186.553C1031.36 194.521 1029.51 201.061 1025.8 206.173C1022.1 211.284 1017.09 215.067 1010.77 217.522C1004.49 219.977 997.409 221.205 989.521 221.205ZM989.339 168.14C994.531 168.14 998.918 166.933 1002.5 164.518C1006.12 162.063 1008.86 158.561 1010.71 154.013C1012.6 149.425 1013.55 143.932 1013.55 137.533C1013.55 131.295 1012.62 125.801 1010.77 121.052C1008.92 116.303 1006.2 112.6 1002.62 109.944C999.039 107.247 994.612 105.899 989.339 105.899C983.906 105.899 979.379 107.308 975.756 110.125C972.134 112.902 969.397 116.685 967.546 121.474C965.735 126.264 964.83 131.616 964.83 137.533C964.83 143.61 965.755 148.942 967.606 153.531C969.458 158.119 972.195 161.701 975.817 164.276C979.479 166.852 983.987 168.14 989.339 168.14ZM1102 184.5V60.8636H1146.07C1155.65 60.8636 1163.6 62.5137 1169.92 65.8139C1176.28 69.1141 1181.03 73.6821 1184.17 79.5178C1187.31 85.3132 1188.88 92.0142 1188.88 99.6207C1188.88 107.187 1187.29 113.848 1184.11 119.603C1180.97 125.318 1176.22 129.765 1169.86 132.945C1163.54 136.124 1155.59 137.714 1146.01 137.714H1112.63V121.656H1144.32C1150.36 121.656 1155.27 120.79 1159.05 119.06C1162.88 117.329 1165.67 114.814 1167.44 111.513C1169.21 108.213 1170.1 104.249 1170.1 99.6207C1170.1 94.9522 1169.19 90.9074 1167.38 87.4865C1165.61 84.0656 1162.82 81.4496 1158.99 79.6385C1155.21 77.7872 1150.24 76.8615 1144.08 76.8615H1120.66V184.5H1102ZM1163.04 128.719L1193.58 184.5H1172.33L1142.39 128.719H1163.04ZM1248.02 186.371C1239.33 186.371 1231.74 184.379 1225.26 180.395C1218.78 176.411 1213.75 170.836 1210.17 163.673C1206.59 156.509 1204.8 148.138 1204.8 138.559C1204.8 128.94 1206.59 120.529 1210.17 113.325C1213.75 106.12 1218.78 100.526 1225.26 96.5419C1231.74 92.5575 1239.33 90.5653 1248.02 90.5653C1256.72 90.5653 1264.3 92.5575 1270.78 96.5419C1277.26 100.526 1282.29 106.12 1285.87 113.325C1289.46 120.529 1291.25 128.94 1291.25 138.559C1291.25 148.138 1289.46 156.509 1285.87 163.673C1282.29 170.836 1277.26 176.411 1270.78 180.395C1264.3 184.379 1256.72 186.371 1248.02 186.371ZM1248.08 171.219C1253.72 171.219 1258.39 169.73 1262.09 166.751C1265.79 163.773 1268.53 159.809 1270.3 154.859C1272.11 149.908 1273.01 144.455 1273.01 138.499C1273.01 132.582 1272.11 127.149 1270.3 122.199C1268.53 117.208 1265.79 113.204 1262.09 110.185C1258.39 107.167 1253.72 105.658 1248.08 105.658C1242.41 105.658 1237.7 107.167 1233.96 110.185C1230.25 113.204 1227.5 117.208 1225.69 122.199C1223.91 127.149 1223.03 132.582 1223.03 138.499C1223.03 144.455 1223.91 149.908 1225.69 154.859C1227.5 159.809 1230.25 163.773 1233.96 166.751C1237.7 169.73 1242.41 171.219 1248.08 171.219ZM1350.45 186.371C1341.76 186.371 1334.17 184.379 1327.69 180.395C1321.21 176.411 1316.18 170.836 1312.6 163.673C1309.02 156.509 1307.23 148.138 1307.23 138.559C1307.23 128.94 1309.02 120.529 1312.6 113.325C1316.18 106.12 1321.21 100.526 1327.69 96.5419C1334.17 92.5575 1341.76 90.5653 1350.45 90.5653C1359.15 90.5653 1366.73 92.5575 1373.21 96.5419C1379.69 100.526 1384.72 106.12 1388.31 113.325C1391.89 120.529 1393.68 128.94 1393.68 138.559C1393.68 148.138 1391.89 156.509 1388.31 163.673C1384.72 170.836 1379.69 176.411 1373.21 180.395C1366.73 184.379 1359.15 186.371 1350.45 186.371ZM1350.51 171.219C1356.15 171.219 1360.82 169.73 1364.52 166.751C1368.22 163.773 1370.96 159.809 1372.73 154.859C1374.54 149.908 1375.45 144.455 1375.45 138.499C1375.45 132.582 1374.54 127.149 1372.73 122.199C1370.96 117.208 1368.22 113.204 1364.52 110.185C1360.82 107.167 1356.15 105.658 1350.51 105.658C1344.84 105.658 1340.13 107.167 1336.39 110.185C1332.68 113.204 1329.93 117.208 1328.12 122.199C1326.35 127.149 1325.46 132.582 1325.46 138.499C1325.46 144.455 1326.35 149.908 1328.12 154.859C1329.93 159.809 1332.68 163.773 1336.39 166.751C1340.13 169.73 1344.84 171.219 1350.51 171.219ZM1413.83 184.5V91.7727H1431.15V106.865H1432.3C1434.23 101.754 1437.39 97.7694 1441.78 94.9119C1446.16 92.0142 1451.42 90.5653 1457.53 90.5653C1463.73 90.5653 1468.92 92.0142 1473.11 94.9119C1477.33 97.8097 1480.45 101.794 1482.47 106.865H1483.43C1485.65 101.915 1489.17 97.9706 1494 95.0327C1498.83 92.0544 1504.58 90.5653 1511.26 90.5653C1519.67 90.5653 1526.54 93.2015 1531.85 98.4737C1537.2 103.746 1539.88 111.695 1539.88 122.32V184.5H1521.83V124.01C1521.83 117.732 1520.12 113.184 1516.7 110.366C1513.27 107.549 1509.19 106.141 1504.44 106.141C1498.56 106.141 1494 107.952 1490.74 111.574C1487.48 115.156 1485.85 119.764 1485.85 125.398V184.5H1467.86V122.863C1467.86 117.832 1466.29 113.787 1463.15 110.729C1460.01 107.67 1455.92 106.141 1450.89 106.141C1447.47 106.141 1444.31 107.046 1441.42 108.857C1438.56 110.628 1436.24 113.103 1434.47 116.283C1432.74 119.462 1431.88 123.145 1431.88 127.33V184.5H1413.83Z", fill: "#265A64" }));
|
|
20974
|
-
let baseUrl$1;
|
|
20975
|
-
function _init$5() {
|
|
20976
|
-
const {
|
|
20977
|
-
config
|
|
20978
|
-
} = getStaticData();
|
|
20979
|
-
baseUrl$1 = config.asset.baseUrl;
|
|
20980
|
-
}
|
|
20981
|
-
function getExternalAssetUrl(fileName) {
|
|
20982
|
-
return `${baseUrl$1}/${fileName}`;
|
|
20983
|
-
}
|
|
20984
21077
|
function ModalFrame({
|
|
20985
21078
|
isOpen,
|
|
20986
21079
|
onRequestClose,
|
|
@@ -21141,175 +21234,6 @@ function SidecarModalFrame({
|
|
|
21141
21234
|
};
|
|
21142
21235
|
return /* @__PURE__ */ jsx$1(ModalFrame, { isOpen: true, onRequestClose, contentStyle: applyContentStyle, children });
|
|
21143
21236
|
}
|
|
21144
|
-
function measureTopOffset() {
|
|
21145
|
-
const {
|
|
21146
|
-
getOverlayTopOffset
|
|
21147
|
-
} = getStaticData();
|
|
21148
|
-
if (!getOverlayTopOffset) {
|
|
21149
|
-
return 0;
|
|
21150
|
-
}
|
|
21151
|
-
try {
|
|
21152
|
-
const offset = getOverlayTopOffset();
|
|
21153
|
-
return Number.isFinite(offset) && offset > 0 ? offset : 0;
|
|
21154
|
-
} catch {
|
|
21155
|
-
return 0;
|
|
21156
|
-
}
|
|
21157
|
-
}
|
|
21158
|
-
function FittingRoomOverlay() {
|
|
21159
|
-
const {
|
|
21160
|
-
t
|
|
21161
|
-
} = useTranslation();
|
|
21162
|
-
const fittingRoom = useMainStore((state) => state.fittingRoom);
|
|
21163
|
-
const removeFromFittingRoom = useMainStore((state) => state.removeFromFittingRoom);
|
|
21164
|
-
const closeOverlay = useMainStore((state) => state.closeOverlay);
|
|
21165
|
-
const [topOffset, setTopOffset] = reactExports.useState(() => 0);
|
|
21166
|
-
reactExports.useEffect(() => {
|
|
21167
|
-
const savedScrollY = window.scrollY;
|
|
21168
|
-
if (savedScrollY > 0) {
|
|
21169
|
-
window.scrollTo(0, 0);
|
|
21170
|
-
}
|
|
21171
|
-
setTopOffset(measureTopOffset());
|
|
21172
|
-
const onResize = () => setTopOffset(measureTopOffset());
|
|
21173
|
-
window.addEventListener("resize", onResize);
|
|
21174
|
-
return () => {
|
|
21175
|
-
window.removeEventListener("resize", onResize);
|
|
21176
|
-
if (savedScrollY > 0) {
|
|
21177
|
-
window.scrollTo(0, savedScrollY);
|
|
21178
|
-
}
|
|
21179
|
-
};
|
|
21180
|
-
}, []);
|
|
21181
|
-
const css2 = useCss((theme) => ({
|
|
21182
|
-
body: {
|
|
21183
|
-
width: "100%",
|
|
21184
|
-
height: "100%",
|
|
21185
|
-
overflowY: "auto",
|
|
21186
|
-
padding: "24px",
|
|
21187
|
-
boxSizing: "border-box"
|
|
21188
|
-
},
|
|
21189
|
-
list: {
|
|
21190
|
-
display: "flex",
|
|
21191
|
-
flexDirection: "column",
|
|
21192
|
-
gap: "12px",
|
|
21193
|
-
width: "100%",
|
|
21194
|
-
maxWidth: "760px",
|
|
21195
|
-
margin: "0 auto"
|
|
21196
|
-
},
|
|
21197
|
-
item: {
|
|
21198
|
-
display: "flex",
|
|
21199
|
-
flexDirection: "column",
|
|
21200
|
-
gap: "4px",
|
|
21201
|
-
padding: "12px",
|
|
21202
|
-
borderColor: theme.color_fg_text,
|
|
21203
|
-
borderStyle: "solid",
|
|
21204
|
-
borderWidth: "1px",
|
|
21205
|
-
borderRadius: "8px"
|
|
21206
|
-
},
|
|
21207
|
-
itemHeader: {
|
|
21208
|
-
display: "flex",
|
|
21209
|
-
justifyContent: "space-between",
|
|
21210
|
-
alignItems: "center",
|
|
21211
|
-
gap: "8px"
|
|
21212
|
-
},
|
|
21213
|
-
itemId: {
|
|
21214
|
-
fontWeight: "bold",
|
|
21215
|
-
wordBreak: "break-all"
|
|
21216
|
-
},
|
|
21217
|
-
itemMeta: {
|
|
21218
|
-
fontSize: "13px",
|
|
21219
|
-
color: theme.color_fg_text
|
|
21220
|
-
},
|
|
21221
|
-
itemMissing: {
|
|
21222
|
-
fontSize: "13px",
|
|
21223
|
-
color: theme.color_danger
|
|
21224
|
-
},
|
|
21225
|
-
removeButton: {
|
|
21226
|
-
fontSize: "13px",
|
|
21227
|
-
textDecoration: "underline"
|
|
21228
|
-
},
|
|
21229
|
-
empty: {
|
|
21230
|
-
marginTop: "48px",
|
|
21231
|
-
textAlign: "center"
|
|
21232
|
-
}
|
|
21233
|
-
}));
|
|
21234
|
-
const overlayStyle = {
|
|
21235
|
-
top: `${topOffset}px`,
|
|
21236
|
-
left: 0,
|
|
21237
|
-
right: 0,
|
|
21238
|
-
bottom: 0,
|
|
21239
|
-
backgroundColor: "transparent"
|
|
21240
|
-
};
|
|
21241
|
-
const contentStyle = {
|
|
21242
|
-
position: "absolute",
|
|
21243
|
-
inset: 0,
|
|
21244
|
-
margin: 0,
|
|
21245
|
-
padding: 0,
|
|
21246
|
-
border: "none",
|
|
21247
|
-
borderRadius: 0,
|
|
21248
|
-
backgroundColor: "#FFFFFF",
|
|
21249
|
-
overflow: "hidden"
|
|
21250
|
-
};
|
|
21251
|
-
return /* @__PURE__ */ jsx$1(ModalFrame, { isOpen: true, onRequestClose: closeOverlay, overlayStyle, contentStyle, children: /* @__PURE__ */ jsx$1("div", { css: css2.body, children: fittingRoom.length === 0 ? /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.empty, t: "fitting_room.empty" }) : /* @__PURE__ */ jsx$1("div", { css: css2.list, children: fittingRoom.map((item) => {
|
|
21252
|
-
const hasVariant = item.size != null;
|
|
21253
|
-
return /* @__PURE__ */ jsxs("div", { css: css2.item, children: [
|
|
21254
|
-
/* @__PURE__ */ jsxs("div", { css: css2.itemHeader, children: [
|
|
21255
|
-
/* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.itemId, children: item.externalId }),
|
|
21256
|
-
/* @__PURE__ */ jsx$1(Button, { variant: "base", css: css2.removeButton, onClick: () => removeFromFittingRoom(item.externalId), children: t("fitting_room.remove") })
|
|
21257
|
-
] }),
|
|
21258
|
-
hasVariant ? /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.itemMeta, children: [item.size, item.color].filter(Boolean).join(" / ") }) : /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.itemMissing, t: "fitting_room.size_not_chosen" })
|
|
21259
|
-
] }, item.externalId);
|
|
21260
|
-
}) }) }) });
|
|
21261
|
-
}
|
|
21262
|
-
const Link = reactExports.forwardRef(({
|
|
21263
|
-
children,
|
|
21264
|
-
variant,
|
|
21265
|
-
css: css2,
|
|
21266
|
-
...props
|
|
21267
|
-
}, ref) => {
|
|
21268
|
-
const variantCss = useVariantCss(variant, (theme) => ({
|
|
21269
|
-
base: {
|
|
21270
|
-
cursor: "pointer !important",
|
|
21271
|
-
color: theme.color_fg_text,
|
|
21272
|
-
fontFamily: theme.font_family,
|
|
21273
|
-
fontSize: "14px",
|
|
21274
|
-
textDecoration: "none"
|
|
21275
|
-
},
|
|
21276
|
-
brand: {
|
|
21277
|
-
cursor: "pointer !important",
|
|
21278
|
-
color: theme.color_fg_text,
|
|
21279
|
-
fontFamily: theme.brand_font_family,
|
|
21280
|
-
fontSize: "14px",
|
|
21281
|
-
textDecoration: theme.brand_link_text_decoration
|
|
21282
|
-
},
|
|
21283
|
-
underline: {
|
|
21284
|
-
cursor: "pointer !important",
|
|
21285
|
-
color: theme.color_fg_text,
|
|
21286
|
-
fontFamily: theme.font_family,
|
|
21287
|
-
fontSize: "14px",
|
|
21288
|
-
textDecoration: "underline"
|
|
21289
|
-
},
|
|
21290
|
-
semibold: {
|
|
21291
|
-
cursor: "pointer !important",
|
|
21292
|
-
color: theme.color_fg_text,
|
|
21293
|
-
fontFamily: theme.font_family,
|
|
21294
|
-
fontSize: "14px",
|
|
21295
|
-
fontWeight: 600,
|
|
21296
|
-
textDecoration: "none"
|
|
21297
|
-
}
|
|
21298
|
-
}));
|
|
21299
|
-
return /* @__PURE__ */ jsx$1("a", { ref, css: [variantCss, css2, "", ""], ...props, children });
|
|
21300
|
-
});
|
|
21301
|
-
Link.displayName = "Link";
|
|
21302
|
-
function LinkT({
|
|
21303
|
-
t,
|
|
21304
|
-
vars,
|
|
21305
|
-
...props
|
|
21306
|
-
}) {
|
|
21307
|
-
const {
|
|
21308
|
-
t: translate
|
|
21309
|
-
} = useTranslation();
|
|
21310
|
-
const translatedText = translate(t, vars);
|
|
21311
|
-
return /* @__PURE__ */ jsx$1(Link, { ...props, children: translatedText });
|
|
21312
|
-
}
|
|
21313
21237
|
var dayjs_min$1 = { exports: {} };
|
|
21314
21238
|
var dayjs_min = dayjs_min$1.exports;
|
|
21315
21239
|
var hasRequiredDayjs_min;
|
|
@@ -23073,7 +22997,7 @@ function isVersionServiceProvider(provider) {
|
|
|
23073
22997
|
}
|
|
23074
22998
|
const name$q = "@firebase/app";
|
|
23075
22999
|
const version$1$1 = "0.14.5";
|
|
23076
|
-
const logger$
|
|
23000
|
+
const logger$g = new Logger3("@firebase/app");
|
|
23077
23001
|
const name$p = "@firebase/app-compat";
|
|
23078
23002
|
const name$o = "@firebase/analytics-compat";
|
|
23079
23003
|
const name$n = "@firebase/analytics";
|
|
@@ -23140,13 +23064,13 @@ function _addComponent(app, component) {
|
|
|
23140
23064
|
try {
|
|
23141
23065
|
app.container.addComponent(component);
|
|
23142
23066
|
} catch (e) {
|
|
23143
|
-
logger$
|
|
23067
|
+
logger$g.debug(`Component ${component.name} failed to register with FirebaseApp ${app.name}`, e);
|
|
23144
23068
|
}
|
|
23145
23069
|
}
|
|
23146
23070
|
function _registerComponent(component) {
|
|
23147
23071
|
const componentName = component.name;
|
|
23148
23072
|
if (_components.has(componentName)) {
|
|
23149
|
-
logger$
|
|
23073
|
+
logger$g.debug(`There were multiple attempts to register component ${componentName}.`);
|
|
23150
23074
|
return false;
|
|
23151
23075
|
}
|
|
23152
23076
|
_components.set(componentName, component);
|
|
@@ -23355,7 +23279,7 @@ function registerVersion(libraryKeyOrName, version2, variant) {
|
|
|
23355
23279
|
if (versionMismatch) {
|
|
23356
23280
|
warning.push(`version name "${version2}" contains illegal characters (whitespace or "/")`);
|
|
23357
23281
|
}
|
|
23358
|
-
logger$
|
|
23282
|
+
logger$g.warn(warning.join(" "));
|
|
23359
23283
|
return;
|
|
23360
23284
|
}
|
|
23361
23285
|
_registerComponent(new Component(
|
|
@@ -23399,12 +23323,12 @@ async function readHeartbeatsFromIndexedDB(app) {
|
|
|
23399
23323
|
return result;
|
|
23400
23324
|
} catch (e) {
|
|
23401
23325
|
if (e instanceof FirebaseError) {
|
|
23402
|
-
logger$
|
|
23326
|
+
logger$g.warn(e.message);
|
|
23403
23327
|
} else {
|
|
23404
23328
|
const idbGetError = ERROR_FACTORY.create("idb-get", {
|
|
23405
23329
|
originalErrorMessage: e?.message
|
|
23406
23330
|
});
|
|
23407
|
-
logger$
|
|
23331
|
+
logger$g.warn(idbGetError.message);
|
|
23408
23332
|
}
|
|
23409
23333
|
}
|
|
23410
23334
|
}
|
|
@@ -23417,12 +23341,12 @@ async function writeHeartbeatsToIndexedDB(app, heartbeatObject) {
|
|
|
23417
23341
|
await tx.done;
|
|
23418
23342
|
} catch (e) {
|
|
23419
23343
|
if (e instanceof FirebaseError) {
|
|
23420
|
-
logger$
|
|
23344
|
+
logger$g.warn(e.message);
|
|
23421
23345
|
} else {
|
|
23422
23346
|
const idbGetError = ERROR_FACTORY.create("idb-set", {
|
|
23423
23347
|
originalErrorMessage: e?.message
|
|
23424
23348
|
});
|
|
23425
|
-
logger$
|
|
23349
|
+
logger$g.warn(idbGetError.message);
|
|
23426
23350
|
}
|
|
23427
23351
|
}
|
|
23428
23352
|
}
|
|
@@ -23471,7 +23395,7 @@ class HeartbeatServiceImpl {
|
|
|
23471
23395
|
}
|
|
23472
23396
|
return this._storage.overwrite(this._heartbeatsCache);
|
|
23473
23397
|
} catch (e) {
|
|
23474
|
-
logger$
|
|
23398
|
+
logger$g.warn(e);
|
|
23475
23399
|
}
|
|
23476
23400
|
}
|
|
23477
23401
|
/**
|
|
@@ -23502,7 +23426,7 @@ class HeartbeatServiceImpl {
|
|
|
23502
23426
|
}
|
|
23503
23427
|
return headerString;
|
|
23504
23428
|
} catch (e) {
|
|
23505
|
-
logger$
|
|
23429
|
+
logger$g.warn(e);
|
|
23506
23430
|
return "";
|
|
23507
23431
|
}
|
|
23508
23432
|
}
|
|
@@ -41070,7 +40994,7 @@ const firebaseDateToDayjs = (date) => {
|
|
|
41070
40994
|
return dayjs(date.seconds * 1e3);
|
|
41071
40995
|
};
|
|
41072
40996
|
const LOGIN_TRACKING_PERIOD_SECONDS = 1800;
|
|
41073
|
-
const logger$
|
|
40997
|
+
const logger$f = getLogger("firebase");
|
|
41074
40998
|
let firebaseApp = null;
|
|
41075
40999
|
class FirestoreManager {
|
|
41076
41000
|
constructor(firestore) {
|
|
@@ -41106,18 +41030,6 @@ class FirestoreManager {
|
|
|
41106
41030
|
});
|
|
41107
41031
|
return unsubscribe;
|
|
41108
41032
|
}
|
|
41109
|
-
// listenToSubDoc subscribes to <parent>/<parentID>/<sub>/<subID>. Used for
|
|
41110
|
-
// VTO compositions which live at users/{uid}/vto_compositions/{token}.
|
|
41111
|
-
listenToSubDoc(parent, parentID, sub, subID, callback) {
|
|
41112
|
-
const docRef = doc(this.firestore, parent, parentID, sub, subID);
|
|
41113
|
-
return onSnapshot(docRef, (snap) => {
|
|
41114
|
-
if (snap.exists()) {
|
|
41115
|
-
callback(snap.data());
|
|
41116
|
-
} else {
|
|
41117
|
-
callback(null);
|
|
41118
|
-
}
|
|
41119
|
-
});
|
|
41120
|
-
}
|
|
41121
41033
|
async queryDocs(collectionName, constraints) {
|
|
41122
41034
|
const q2 = query(this.collection(collectionName), ...constraints);
|
|
41123
41035
|
return getDocs(q2);
|
|
@@ -41210,7 +41122,7 @@ class AuthManager {
|
|
|
41210
41122
|
this.listenToUserProfileUnsub = null;
|
|
41211
41123
|
}
|
|
41212
41124
|
if (authUser) {
|
|
41213
|
-
logger$
|
|
41125
|
+
logger$f.logDebug("User logged in:", {
|
|
41214
41126
|
uid: authUser.uid
|
|
41215
41127
|
});
|
|
41216
41128
|
this.listenToUserProfileUnsub = getFirestoreManager().listenToDoc("users", authUser.uid, (doc2) => {
|
|
@@ -41244,7 +41156,7 @@ class AuthManager {
|
|
|
41244
41156
|
await firestore.mergeDocData("user_logging", userLoggingDocId, userLoggingData);
|
|
41245
41157
|
}
|
|
41246
41158
|
} catch (error) {
|
|
41247
|
-
logger$
|
|
41159
|
+
logger$f.logError("Error logging user login activity:", {
|
|
41248
41160
|
error
|
|
41249
41161
|
});
|
|
41250
41162
|
}
|
|
@@ -41292,122 +41204,2320 @@ async function _init$4() {
|
|
|
41292
41204
|
authManager = new AuthManager(auth, brandId);
|
|
41293
41205
|
}
|
|
41294
41206
|
}
|
|
41295
|
-
|
|
41296
|
-
|
|
41297
|
-
function
|
|
41298
|
-
returnToOverlay
|
|
41299
|
-
}) {
|
|
41207
|
+
let baseUrl;
|
|
41208
|
+
let responseCache = {};
|
|
41209
|
+
function _init$3() {
|
|
41300
41210
|
const {
|
|
41301
|
-
|
|
41302
|
-
} =
|
|
41303
|
-
|
|
41304
|
-
|
|
41305
|
-
|
|
41306
|
-
|
|
41307
|
-
const [linkSent, setLinkSent] = reactExports.useState(false);
|
|
41308
|
-
const css2 = useCss((theme) => ({
|
|
41309
|
-
titleText: {
|
|
41310
|
-
fontSize: "20px"
|
|
41311
|
-
},
|
|
41312
|
-
form: {
|
|
41313
|
-
width: "100%",
|
|
41314
|
-
display: "flex",
|
|
41315
|
-
flexDirection: "column",
|
|
41316
|
-
gap: "0"
|
|
41317
|
-
},
|
|
41318
|
-
input: {
|
|
41319
|
-
width: "100%",
|
|
41320
|
-
padding: "12px 16px",
|
|
41321
|
-
border: "1px solid #767676",
|
|
41322
|
-
borderRadius: "8px",
|
|
41323
|
-
fontSize: "16px"
|
|
41324
|
-
},
|
|
41325
|
-
inputError: {
|
|
41326
|
-
border: `1px solid ${theme.color_danger}`
|
|
41327
|
-
},
|
|
41328
|
-
descriptionContainer: {
|
|
41329
|
-
marginTop: "48px",
|
|
41330
|
-
textAlign: "center"
|
|
41331
|
-
},
|
|
41332
|
-
linkSentContainer: {
|
|
41333
|
-
marginTop: "48px",
|
|
41334
|
-
height: "48px",
|
|
41335
|
-
padding: "8px 16px",
|
|
41336
|
-
boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)"
|
|
41337
|
-
},
|
|
41338
|
-
linkSentText: {
|
|
41339
|
-
color: theme.color_tfr_800
|
|
41340
|
-
},
|
|
41341
|
-
emailContainer: {
|
|
41342
|
-
marginTop: "48px"
|
|
41343
|
-
},
|
|
41344
|
-
emailErrorContainer: {
|
|
41345
|
-
marginTop: "4px",
|
|
41346
|
-
height: "18px"
|
|
41347
|
-
},
|
|
41348
|
-
submitButtonContainer: {
|
|
41349
|
-
marginTop: "64px"
|
|
41350
|
-
},
|
|
41351
|
-
contactContainer: {
|
|
41352
|
-
marginTop: "32px"
|
|
41353
|
-
}
|
|
41354
|
-
}));
|
|
41355
|
-
const handleSubmit = reactExports.useCallback((event) => {
|
|
41356
|
-
async function resetUserPassword(email2) {
|
|
41357
|
-
try {
|
|
41358
|
-
const authManager2 = getAuthManager();
|
|
41359
|
-
await authManager2.sendPasswordResetEmail(email2);
|
|
41360
|
-
setLinkSent(true);
|
|
41361
|
-
} catch (error) {
|
|
41362
|
-
logger$9.logError("Error sending password reset email:", {
|
|
41363
|
-
error
|
|
41364
|
-
});
|
|
41365
|
-
}
|
|
41211
|
+
config
|
|
41212
|
+
} = getStaticData();
|
|
41213
|
+
baseUrl = config.api.baseUrl;
|
|
41214
|
+
useMainStore.subscribe((state, prevState) => {
|
|
41215
|
+
if (state.userIsLoggedIn !== prevState.userIsLoggedIn) {
|
|
41216
|
+
clearApiCache();
|
|
41366
41217
|
}
|
|
41367
|
-
|
|
41368
|
-
|
|
41369
|
-
|
|
41370
|
-
|
|
41371
|
-
|
|
41372
|
-
|
|
41218
|
+
});
|
|
41219
|
+
}
|
|
41220
|
+
function clearApiCache() {
|
|
41221
|
+
responseCache = {};
|
|
41222
|
+
}
|
|
41223
|
+
async function execApiRequest(params) {
|
|
41224
|
+
const authManager2 = getAuthManager();
|
|
41225
|
+
const {
|
|
41226
|
+
useCache,
|
|
41227
|
+
useToken,
|
|
41228
|
+
method,
|
|
41229
|
+
endpoint,
|
|
41230
|
+
body,
|
|
41231
|
+
timeoutMs
|
|
41232
|
+
} = params;
|
|
41233
|
+
const url = `${baseUrl}${endpoint}`;
|
|
41234
|
+
if (useCache && responseCache[url]) {
|
|
41235
|
+
return responseCache[url];
|
|
41236
|
+
}
|
|
41237
|
+
const options = {
|
|
41238
|
+
method,
|
|
41239
|
+
headers: {
|
|
41240
|
+
"Content-Type": "application/json"
|
|
41373
41241
|
}
|
|
41374
|
-
|
|
41375
|
-
|
|
41376
|
-
|
|
41377
|
-
|
|
41242
|
+
};
|
|
41243
|
+
if (useToken) {
|
|
41244
|
+
const token2 = await authManager2.getAuthToken();
|
|
41245
|
+
options.headers = {
|
|
41246
|
+
...options.headers,
|
|
41247
|
+
Authorization: `Bearer ${token2}`
|
|
41248
|
+
};
|
|
41249
|
+
}
|
|
41250
|
+
if (body) {
|
|
41251
|
+
options.body = JSON.stringify(body);
|
|
41252
|
+
}
|
|
41253
|
+
let timeoutHandle;
|
|
41254
|
+
if (timeoutMs && timeoutMs > 0) {
|
|
41255
|
+
const controller = new AbortController();
|
|
41256
|
+
options.signal = controller.signal;
|
|
41257
|
+
timeoutHandle = setTimeout(() => controller.abort(), timeoutMs);
|
|
41258
|
+
}
|
|
41259
|
+
let response;
|
|
41260
|
+
try {
|
|
41261
|
+
response = await fetch(url, options);
|
|
41262
|
+
} finally {
|
|
41263
|
+
if (timeoutHandle) clearTimeout(timeoutHandle);
|
|
41264
|
+
}
|
|
41265
|
+
if (!response.ok) {
|
|
41266
|
+
let detail = "";
|
|
41267
|
+
try {
|
|
41268
|
+
const errBody = await response.json();
|
|
41269
|
+
if (errBody && typeof errBody.error === "string") {
|
|
41270
|
+
detail = errBody.error;
|
|
41271
|
+
}
|
|
41272
|
+
} catch {
|
|
41378
41273
|
}
|
|
41379
|
-
|
|
41380
|
-
|
|
41381
|
-
|
|
41382
|
-
|
|
41383
|
-
|
|
41384
|
-
|
|
41385
|
-
}
|
|
41386
|
-
}, [returnToOverlay, openOverlay]);
|
|
41387
|
-
const handleContactUsClick = reactExports.useCallback(() => {
|
|
41388
|
-
window.open(CONTACT_US_LINK, "_blank");
|
|
41389
|
-
}, []);
|
|
41390
|
-
const titleNode = /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.titleText, t: "forgot-password.title" });
|
|
41391
|
-
let descriptionNode;
|
|
41392
|
-
if (linkSent) {
|
|
41393
|
-
descriptionNode = /* @__PURE__ */ jsx$1("div", { css: css2.linkSentContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.linkSentText, t: "forgot-password.link_sent" }) });
|
|
41274
|
+
throw new Error(detail || `API request failed with status ${response.status}`);
|
|
41275
|
+
}
|
|
41276
|
+
let data;
|
|
41277
|
+
if (response.status === 204) {
|
|
41278
|
+
data = {
|
|
41279
|
+
noResponse: true
|
|
41280
|
+
};
|
|
41394
41281
|
} else {
|
|
41395
|
-
|
|
41282
|
+
data = await response.json();
|
|
41396
41283
|
}
|
|
41397
|
-
|
|
41398
|
-
|
|
41399
|
-
|
|
41400
|
-
|
|
41401
|
-
/* @__PURE__ */ jsx$1("div", { css: css2.submitButtonContainer, children: /* @__PURE__ */ jsx$1(ButtonT, { type: "submit", variant: "primary", t: "forgot-password.send_link" }) }),
|
|
41402
|
-
/* @__PURE__ */ jsxs("div", { css: css2.contactContainer, children: [
|
|
41403
|
-
/* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "forgot-password.need_help" }),
|
|
41404
|
-
" ",
|
|
41405
|
-
/* @__PURE__ */ jsx$1(LinkT, { variant: "semibold", t: "forgot-password.contact_us", onClick: handleContactUsClick })
|
|
41406
|
-
] })
|
|
41407
|
-
] }) });
|
|
41284
|
+
if (useCache) {
|
|
41285
|
+
responseCache[url] = data;
|
|
41286
|
+
}
|
|
41287
|
+
return data;
|
|
41408
41288
|
}
|
|
41409
|
-
function
|
|
41410
|
-
|
|
41289
|
+
async function getSizeRecommendation(styleId) {
|
|
41290
|
+
return await execApiRequest({
|
|
41291
|
+
useCache: true,
|
|
41292
|
+
useToken: true,
|
|
41293
|
+
method: "GET",
|
|
41294
|
+
endpoint: `/v1/styles/${styleId}/recommendation`
|
|
41295
|
+
});
|
|
41296
|
+
}
|
|
41297
|
+
async function getStyleCategories() {
|
|
41298
|
+
return await execApiRequest({
|
|
41299
|
+
useCache: true,
|
|
41300
|
+
useToken: true,
|
|
41301
|
+
method: "GET",
|
|
41302
|
+
endpoint: "/v1/style-categories"
|
|
41303
|
+
});
|
|
41304
|
+
}
|
|
41305
|
+
async function getStyleCategoryGroups() {
|
|
41306
|
+
return await execApiRequest({
|
|
41307
|
+
useCache: true,
|
|
41308
|
+
useToken: true,
|
|
41309
|
+
method: "GET",
|
|
41310
|
+
endpoint: "/v1/style-category-groups"
|
|
41311
|
+
});
|
|
41312
|
+
}
|
|
41313
|
+
const inFlightVtoRequests = /* @__PURE__ */ new Map();
|
|
41314
|
+
function canonicalVtoKey(items) {
|
|
41315
|
+
const normalized = items.map((i) => ({
|
|
41316
|
+
csa: i.colorway_size_asset_id,
|
|
41317
|
+
untucked: !!i.untucked
|
|
41318
|
+
})).sort((a, b) => a.csa - b.csa || Number(a.untucked) - Number(b.untucked));
|
|
41319
|
+
return JSON.stringify(normalized);
|
|
41320
|
+
}
|
|
41321
|
+
function requestVto(items) {
|
|
41322
|
+
const key = canonicalVtoKey(items);
|
|
41323
|
+
const existing = inFlightVtoRequests.get(key);
|
|
41324
|
+
if (existing) {
|
|
41325
|
+
return existing;
|
|
41326
|
+
}
|
|
41327
|
+
const promise = execApiRequest({
|
|
41328
|
+
useToken: true,
|
|
41329
|
+
method: "POST",
|
|
41330
|
+
endpoint: "/v1/vto-compositions",
|
|
41331
|
+
body: {
|
|
41332
|
+
items
|
|
41333
|
+
},
|
|
41334
|
+
timeoutMs: getStaticData().config.api.vtoTimeoutMs
|
|
41335
|
+
}).finally(() => {
|
|
41336
|
+
inFlightVtoRequests.delete(key);
|
|
41337
|
+
});
|
|
41338
|
+
inFlightVtoRequests.set(key, promise);
|
|
41339
|
+
return promise;
|
|
41340
|
+
}
|
|
41341
|
+
const recordCache = {};
|
|
41342
|
+
async function getStyleByExternalId(brandId, externalId) {
|
|
41343
|
+
const cacheKey = `getStyleByExternalId/${brandId}/${externalId}`;
|
|
41344
|
+
if (recordCache[cacheKey]) {
|
|
41345
|
+
return recordCache[cacheKey];
|
|
41346
|
+
}
|
|
41347
|
+
const firestore = getFirestoreManager();
|
|
41348
|
+
const querySnapshot = await firestore.queryDocs("styles", [where("brand_id", "==", brandId), where("external_id", "==", externalId)]);
|
|
41349
|
+
if (querySnapshot.empty) {
|
|
41350
|
+
return null;
|
|
41351
|
+
}
|
|
41352
|
+
const record = querySnapshot.docs[0].data();
|
|
41353
|
+
recordCache[cacheKey] = record;
|
|
41354
|
+
return record;
|
|
41355
|
+
}
|
|
41356
|
+
const logger$e = getLogger("product");
|
|
41357
|
+
function _init$2() {
|
|
41358
|
+
useMainStore.subscribe((state, prevState) => {
|
|
41359
|
+
if (state.userHasAvatar && !prevState.userHasAvatar) {
|
|
41360
|
+
const {
|
|
41361
|
+
currentProduct
|
|
41362
|
+
} = getStaticData();
|
|
41363
|
+
if (currentProduct) {
|
|
41364
|
+
loadProductDataToStore(currentProduct.externalId);
|
|
41365
|
+
}
|
|
41366
|
+
}
|
|
41367
|
+
});
|
|
41368
|
+
}
|
|
41369
|
+
async function loadProductData(externalId) {
|
|
41370
|
+
const {
|
|
41371
|
+
brandId
|
|
41372
|
+
} = getStaticData();
|
|
41373
|
+
const style = await getStyleByExternalId(brandId, externalId);
|
|
41374
|
+
if (!style) {
|
|
41375
|
+
throw new Error(`Style not found for externalId: ${externalId}`);
|
|
41376
|
+
}
|
|
41377
|
+
const sizeFitRecommendation = await getSizeRecommendation(style.id);
|
|
41378
|
+
return {
|
|
41379
|
+
externalId,
|
|
41380
|
+
style,
|
|
41381
|
+
sizeFitRecommendation
|
|
41382
|
+
};
|
|
41383
|
+
}
|
|
41384
|
+
function loadProductDataToStore(externalId) {
|
|
41385
|
+
async function loadAndStore() {
|
|
41386
|
+
try {
|
|
41387
|
+
const productData2 = await loadProductData(externalId);
|
|
41388
|
+
useMainStore.getState().setProductData(productData2.externalId, productData2);
|
|
41389
|
+
logger$e.logDebug(`Loaded product data for externalId: ${externalId}`, {
|
|
41390
|
+
productData: productData2
|
|
41391
|
+
});
|
|
41392
|
+
} catch (error) {
|
|
41393
|
+
logger$e.logError(`Error loading product data for externalId: ${externalId}`, {
|
|
41394
|
+
error
|
|
41395
|
+
});
|
|
41396
|
+
}
|
|
41397
|
+
}
|
|
41398
|
+
const {
|
|
41399
|
+
userIsLoggedIn,
|
|
41400
|
+
userHasAvatar,
|
|
41401
|
+
productData
|
|
41402
|
+
} = useMainStore.getState();
|
|
41403
|
+
if (productData[externalId] || !userIsLoggedIn || userHasAvatar === false) {
|
|
41404
|
+
return;
|
|
41405
|
+
}
|
|
41406
|
+
loadAndStore();
|
|
41407
|
+
}
|
|
41408
|
+
const logger$d = getLogger("style-categories");
|
|
41409
|
+
let cached = null;
|
|
41410
|
+
let inflight = null;
|
|
41411
|
+
function buildIndex(categories, groups) {
|
|
41412
|
+
const categoryMap = /* @__PURE__ */ new Map();
|
|
41413
|
+
for (const c of categories) {
|
|
41414
|
+
categoryMap.set(String(c.name), c);
|
|
41415
|
+
}
|
|
41416
|
+
const groupMap = /* @__PURE__ */ new Map();
|
|
41417
|
+
for (const g of groups) {
|
|
41418
|
+
groupMap.set(g.name, g);
|
|
41419
|
+
}
|
|
41420
|
+
return {
|
|
41421
|
+
byName(name2) {
|
|
41422
|
+
return categoryMap.get(name2) ?? null;
|
|
41423
|
+
},
|
|
41424
|
+
groupByName(name2) {
|
|
41425
|
+
return groupMap.get(name2) ?? null;
|
|
41426
|
+
},
|
|
41427
|
+
groupForCategory(categoryName) {
|
|
41428
|
+
const cat = categoryMap.get(categoryName);
|
|
41429
|
+
if (!cat) {
|
|
41430
|
+
return null;
|
|
41431
|
+
}
|
|
41432
|
+
return groupMap.get(cat.group) ?? null;
|
|
41433
|
+
},
|
|
41434
|
+
groupsInOrder() {
|
|
41435
|
+
return [...groups].sort((a, b) => a.display_order - b.display_order);
|
|
41436
|
+
},
|
|
41437
|
+
raw: {
|
|
41438
|
+
categories,
|
|
41439
|
+
groups
|
|
41440
|
+
}
|
|
41441
|
+
};
|
|
41442
|
+
}
|
|
41443
|
+
async function loadStyleCategoryIndex() {
|
|
41444
|
+
if (cached) {
|
|
41445
|
+
return cached;
|
|
41446
|
+
}
|
|
41447
|
+
if (inflight) {
|
|
41448
|
+
return inflight;
|
|
41449
|
+
}
|
|
41450
|
+
inflight = (async () => {
|
|
41451
|
+
try {
|
|
41452
|
+
logger$d.logDebug("{{ts}} - Loading style-category index");
|
|
41453
|
+
const [categories, groups] = await Promise.all([getStyleCategories(), getStyleCategoryGroups()]);
|
|
41454
|
+
cached = buildIndex(categories, groups);
|
|
41455
|
+
return cached;
|
|
41456
|
+
} finally {
|
|
41457
|
+
inflight = null;
|
|
41458
|
+
}
|
|
41459
|
+
})();
|
|
41460
|
+
return inflight;
|
|
41461
|
+
}
|
|
41462
|
+
function peekStyleCategoryIndex() {
|
|
41463
|
+
return cached;
|
|
41464
|
+
}
|
|
41465
|
+
const logger$c = getLogger("fitting-room-data");
|
|
41466
|
+
async function loadFittingRoomData() {
|
|
41467
|
+
const state = useMainStore.getState();
|
|
41468
|
+
const items = state.fittingRoom;
|
|
41469
|
+
loadStyleCategoryIndex().catch((error) => {
|
|
41470
|
+
logger$c.logError("Failed to load style-category index", {
|
|
41471
|
+
error
|
|
41472
|
+
});
|
|
41473
|
+
});
|
|
41474
|
+
for (const item of items) {
|
|
41475
|
+
loadProductDataToStore(item.externalId);
|
|
41476
|
+
}
|
|
41477
|
+
const {
|
|
41478
|
+
productLookup
|
|
41479
|
+
} = getStaticData();
|
|
41480
|
+
if (!productLookup) {
|
|
41481
|
+
for (const item of items) {
|
|
41482
|
+
if (state.merchantProductData[item.externalId]) continue;
|
|
41483
|
+
state.setMerchantProductData(item.externalId, {
|
|
41484
|
+
error: new Error("No productLookup callback configured")
|
|
41485
|
+
});
|
|
41486
|
+
}
|
|
41487
|
+
return;
|
|
41488
|
+
}
|
|
41489
|
+
const itemsNeedingLookup = items.filter((item) => !state.merchantProductData[item.externalId]);
|
|
41490
|
+
const itemsWithHandle = itemsNeedingLookup.filter((item) => !!item.handle);
|
|
41491
|
+
const itemsWithoutHandle = itemsNeedingLookup.filter((item) => !item.handle);
|
|
41492
|
+
for (const item of itemsWithoutHandle) {
|
|
41493
|
+
state.setMerchantProductData(item.externalId, {
|
|
41494
|
+
error: new Error("Item has no handle (legacy localStorage entry — re-add to refresh)")
|
|
41495
|
+
});
|
|
41496
|
+
}
|
|
41497
|
+
if (itemsWithHandle.length === 0) {
|
|
41498
|
+
return;
|
|
41499
|
+
}
|
|
41500
|
+
const handles = itemsWithHandle.map((item) => item.handle);
|
|
41501
|
+
try {
|
|
41502
|
+
const products = await productLookup(handles);
|
|
41503
|
+
const byExternalId = /* @__PURE__ */ new Map();
|
|
41504
|
+
for (const p of products) {
|
|
41505
|
+
byExternalId.set(p.externalId, p);
|
|
41506
|
+
}
|
|
41507
|
+
for (const item of itemsWithHandle) {
|
|
41508
|
+
const product = byExternalId.get(item.externalId);
|
|
41509
|
+
if (product) {
|
|
41510
|
+
state.setMerchantProductData(item.externalId, product);
|
|
41511
|
+
} else {
|
|
41512
|
+
state.setMerchantProductData(item.externalId, {
|
|
41513
|
+
error: new Error(`Product not found in merchant lookup (handle: ${item.handle})`)
|
|
41514
|
+
});
|
|
41515
|
+
}
|
|
41516
|
+
}
|
|
41517
|
+
} catch (error) {
|
|
41518
|
+
logger$c.logError("productLookup batch failed", {
|
|
41519
|
+
error,
|
|
41520
|
+
handles
|
|
41521
|
+
});
|
|
41522
|
+
const wrapped = error instanceof Error ? error : new Error(String(error));
|
|
41523
|
+
for (const item of itemsWithHandle) {
|
|
41524
|
+
state.setMerchantProductData(item.externalId, {
|
|
41525
|
+
error: wrapped
|
|
41526
|
+
});
|
|
41527
|
+
}
|
|
41528
|
+
}
|
|
41529
|
+
}
|
|
41530
|
+
function isMerchantError(value) {
|
|
41531
|
+
return !!value && "error" in value;
|
|
41532
|
+
}
|
|
41533
|
+
function isLoadedError(value) {
|
|
41534
|
+
return !!value && "error" in value;
|
|
41535
|
+
}
|
|
41536
|
+
function resolveItem(item, merchantSlot, loadedSlot, index) {
|
|
41537
|
+
const merchantProduct = merchantSlot && !isMerchantError(merchantSlot) ? merchantSlot : null;
|
|
41538
|
+
const merchantError = merchantSlot && isMerchantError(merchantSlot) ? merchantSlot.error : null;
|
|
41539
|
+
const loadedProduct = loadedSlot && !isLoadedError(loadedSlot) ? loadedSlot : null;
|
|
41540
|
+
const loadedError = loadedSlot && isLoadedError(loadedSlot) ? loadedSlot.error : null;
|
|
41541
|
+
let styleCategory = null;
|
|
41542
|
+
let styleCategoryGroup = null;
|
|
41543
|
+
if (loadedProduct && index) {
|
|
41544
|
+
const categoryName = String(loadedProduct.style.style_category_name);
|
|
41545
|
+
styleCategory = index.byName(categoryName);
|
|
41546
|
+
styleCategoryGroup = index.groupForCategory(categoryName);
|
|
41547
|
+
}
|
|
41548
|
+
let needsResize = item.colorwaySizeAssetId == null;
|
|
41549
|
+
if (!needsResize && loadedProduct && item.colorwaySizeAssetId != null) {
|
|
41550
|
+
const found = loadedProduct.sizeFitRecommendation.available_sizes.some((sz) => sz.colorway_size_assets.some((csa) => csa.id === item.colorwaySizeAssetId));
|
|
41551
|
+
if (!found) {
|
|
41552
|
+
needsResize = true;
|
|
41553
|
+
logger$c.logDebug("csa no longer in size rec, marking needsResize", {
|
|
41554
|
+
externalId: item.externalId,
|
|
41555
|
+
csa: item.colorwaySizeAssetId
|
|
41556
|
+
});
|
|
41557
|
+
}
|
|
41558
|
+
if (!needsResize && item.size) {
|
|
41559
|
+
const sizeStillExists = loadedProduct.sizeFitRecommendation.available_sizes.some((sz) => getSizeLabelFromSize(sz) === item.size);
|
|
41560
|
+
if (!sizeStillExists) {
|
|
41561
|
+
needsResize = true;
|
|
41562
|
+
}
|
|
41563
|
+
}
|
|
41564
|
+
}
|
|
41565
|
+
const isReady = !!merchantProduct && !!loadedProduct && !!styleCategory && !needsResize;
|
|
41566
|
+
return {
|
|
41567
|
+
externalId: item.externalId,
|
|
41568
|
+
storage: item,
|
|
41569
|
+
merchantProduct,
|
|
41570
|
+
merchantError,
|
|
41571
|
+
loadedProduct,
|
|
41572
|
+
loadedError,
|
|
41573
|
+
styleCategory,
|
|
41574
|
+
styleCategoryGroup,
|
|
41575
|
+
isReady,
|
|
41576
|
+
needsResize
|
|
41577
|
+
};
|
|
41578
|
+
}
|
|
41579
|
+
function useResolvedFittingRoom() {
|
|
41580
|
+
const fittingRoom = useMainStore((state) => state.fittingRoom);
|
|
41581
|
+
const productData = useMainStore((state) => state.productData);
|
|
41582
|
+
const merchantProductData = useMainStore((state) => state.merchantProductData);
|
|
41583
|
+
const [index, setIndex] = reactExports.useState(() => peekStyleCategoryIndex());
|
|
41584
|
+
const [styleCategoryError, setStyleCategoryError] = reactExports.useState(null);
|
|
41585
|
+
reactExports.useEffect(() => {
|
|
41586
|
+
let cancelled = false;
|
|
41587
|
+
loadStyleCategoryIndex().then((idx) => {
|
|
41588
|
+
if (!cancelled) {
|
|
41589
|
+
setIndex(idx);
|
|
41590
|
+
setStyleCategoryError(null);
|
|
41591
|
+
}
|
|
41592
|
+
}).catch((error) => {
|
|
41593
|
+
if (!cancelled) {
|
|
41594
|
+
setStyleCategoryError(error instanceof Error ? error : new Error(String(error)));
|
|
41595
|
+
}
|
|
41596
|
+
});
|
|
41597
|
+
return () => {
|
|
41598
|
+
cancelled = true;
|
|
41599
|
+
};
|
|
41600
|
+
}, []);
|
|
41601
|
+
reactExports.useEffect(() => {
|
|
41602
|
+
loadFittingRoomData().catch((error) => {
|
|
41603
|
+
logger$c.logError("loadFittingRoomData failed", {
|
|
41604
|
+
error
|
|
41605
|
+
});
|
|
41606
|
+
});
|
|
41607
|
+
}, [fittingRoom]);
|
|
41608
|
+
return reactExports.useMemo(() => {
|
|
41609
|
+
const items = fittingRoom.map((item) => resolveItem(item, merchantProductData[item.externalId], productData[item.externalId], index));
|
|
41610
|
+
const isLoading = !index || items.some((i) => !i.merchantProduct && !i.merchantError || !i.loadedProduct && !i.loadedError);
|
|
41611
|
+
const groups = [];
|
|
41612
|
+
const ungrouped = [];
|
|
41613
|
+
if (index) {
|
|
41614
|
+
const groupBuckets = /* @__PURE__ */ new Map();
|
|
41615
|
+
for (const item of items) {
|
|
41616
|
+
if (item.styleCategoryGroup) {
|
|
41617
|
+
const key = item.styleCategoryGroup.name;
|
|
41618
|
+
let bucket = groupBuckets.get(key);
|
|
41619
|
+
if (!bucket) {
|
|
41620
|
+
bucket = [];
|
|
41621
|
+
groupBuckets.set(key, bucket);
|
|
41622
|
+
}
|
|
41623
|
+
bucket.push(item);
|
|
41624
|
+
} else {
|
|
41625
|
+
ungrouped.push(item);
|
|
41626
|
+
}
|
|
41627
|
+
}
|
|
41628
|
+
for (const group of index.groupsInOrder()) {
|
|
41629
|
+
const bucket = groupBuckets.get(group.name);
|
|
41630
|
+
if (bucket && bucket.length > 0) {
|
|
41631
|
+
groups.push({
|
|
41632
|
+
group,
|
|
41633
|
+
items: bucket
|
|
41634
|
+
});
|
|
41635
|
+
}
|
|
41636
|
+
}
|
|
41637
|
+
} else {
|
|
41638
|
+
ungrouped.push(...items);
|
|
41639
|
+
}
|
|
41640
|
+
return {
|
|
41641
|
+
items,
|
|
41642
|
+
groups,
|
|
41643
|
+
ungrouped,
|
|
41644
|
+
isLoading,
|
|
41645
|
+
styleCategoryError
|
|
41646
|
+
};
|
|
41647
|
+
}, [fittingRoom, productData, merchantProductData, index, styleCategoryError]);
|
|
41648
|
+
}
|
|
41649
|
+
function useMobileSheetSnap(initial = "collapsed") {
|
|
41650
|
+
const [snap, setSnap] = reactExports.useState(initial);
|
|
41651
|
+
const handleTouchStart = reactExports.useCallback((e) => {
|
|
41652
|
+
const startY = e.touches[0].clientY;
|
|
41653
|
+
const initialSnap = snap;
|
|
41654
|
+
const onTouchMove = (moveEvent) => {
|
|
41655
|
+
const deltaY = moveEvent.touches[0].clientY - startY;
|
|
41656
|
+
if (Math.abs(deltaY) < 30) return;
|
|
41657
|
+
if (deltaY > 0) {
|
|
41658
|
+
if (initialSnap === "full" || initialSnap === "expanded") {
|
|
41659
|
+
setSnap("collapsed");
|
|
41660
|
+
}
|
|
41661
|
+
} else {
|
|
41662
|
+
if (initialSnap === "collapsed") {
|
|
41663
|
+
setSnap("expanded");
|
|
41664
|
+
} else if (initialSnap === "expanded") {
|
|
41665
|
+
setSnap("full");
|
|
41666
|
+
}
|
|
41667
|
+
}
|
|
41668
|
+
document.removeEventListener("touchmove", onTouchMove);
|
|
41669
|
+
};
|
|
41670
|
+
document.addEventListener("touchmove", onTouchMove);
|
|
41671
|
+
const onTouchEnd = () => {
|
|
41672
|
+
document.removeEventListener("touchmove", onTouchMove);
|
|
41673
|
+
document.removeEventListener("touchend", onTouchEnd);
|
|
41674
|
+
};
|
|
41675
|
+
document.addEventListener("touchend", onTouchEnd);
|
|
41676
|
+
}, [snap]);
|
|
41677
|
+
return {
|
|
41678
|
+
snap,
|
|
41679
|
+
setSnap,
|
|
41680
|
+
handleTouchStart
|
|
41681
|
+
};
|
|
41682
|
+
}
|
|
41683
|
+
const MAX_OUTFIT_ITEMS = 4;
|
|
41684
|
+
function asStringList(value) {
|
|
41685
|
+
if (!Array.isArray(value)) return [];
|
|
41686
|
+
const out = [];
|
|
41687
|
+
for (const v of value) {
|
|
41688
|
+
if (typeof v === "string") out.push(v);
|
|
41689
|
+
else if (v != null) out.push(String(v));
|
|
41690
|
+
}
|
|
41691
|
+
return out;
|
|
41692
|
+
}
|
|
41693
|
+
function catName(c) {
|
|
41694
|
+
return String(c.name);
|
|
41695
|
+
}
|
|
41696
|
+
function pairCompatible(a, b, group) {
|
|
41697
|
+
const aName = catName(a);
|
|
41698
|
+
const bName = catName(b);
|
|
41699
|
+
const aIncl = asStringList(a.includes);
|
|
41700
|
+
const aExcl = asStringList(a.excludes);
|
|
41701
|
+
const bIncl = asStringList(b.includes);
|
|
41702
|
+
const bExcl = asStringList(b.excludes);
|
|
41703
|
+
if (aExcl.includes(bName) || bExcl.includes(aName)) {
|
|
41704
|
+
return false;
|
|
41705
|
+
}
|
|
41706
|
+
if (a.group !== b.group) {
|
|
41707
|
+
return true;
|
|
41708
|
+
}
|
|
41709
|
+
const sameGroupDefault = group?.same_group_default ?? "exclusive";
|
|
41710
|
+
if (sameGroupDefault === "compatible") {
|
|
41711
|
+
return true;
|
|
41712
|
+
}
|
|
41713
|
+
if (aName === bName) {
|
|
41714
|
+
return false;
|
|
41715
|
+
}
|
|
41716
|
+
return aIncl.includes(bName) || bIncl.includes(aName);
|
|
41717
|
+
}
|
|
41718
|
+
function computeAvailability(item, selectedExternalIds, resolved) {
|
|
41719
|
+
if (selectedExternalIds.has(item.externalId)) {
|
|
41720
|
+
return "selected";
|
|
41721
|
+
}
|
|
41722
|
+
if (selectedExternalIds.size >= MAX_OUTFIT_ITEMS) {
|
|
41723
|
+
return "disabled";
|
|
41724
|
+
}
|
|
41725
|
+
if (!item.styleCategory) {
|
|
41726
|
+
return "disabled";
|
|
41727
|
+
}
|
|
41728
|
+
const itemCat = item.styleCategory;
|
|
41729
|
+
for (const sel of resolved.items) {
|
|
41730
|
+
if (!selectedExternalIds.has(sel.externalId)) continue;
|
|
41731
|
+
if (!sel.styleCategory) continue;
|
|
41732
|
+
if (!pairCompatible(sel.styleCategory, itemCat, sel.styleCategoryGroup)) {
|
|
41733
|
+
return "disabled";
|
|
41734
|
+
}
|
|
41735
|
+
}
|
|
41736
|
+
return "available";
|
|
41737
|
+
}
|
|
41738
|
+
function makeOutfitItem(r, forceUntuck) {
|
|
41739
|
+
if (!r.styleCategory) return null;
|
|
41740
|
+
if (r.storage.colorwaySizeAssetId == null) return null;
|
|
41741
|
+
const tuckable = !!r.styleCategory.tuckable;
|
|
41742
|
+
const untucked = forceUntuck && tuckable;
|
|
41743
|
+
const layerOrder = untucked ? r.styleCategory.layer_order_untucked : r.styleCategory.layer_order;
|
|
41744
|
+
const outfitItem = {
|
|
41745
|
+
externalId: r.externalId,
|
|
41746
|
+
colorwaySizeAssetId: r.storage.colorwaySizeAssetId,
|
|
41747
|
+
...untucked ? {
|
|
41748
|
+
untucked: true
|
|
41749
|
+
} : {}
|
|
41750
|
+
};
|
|
41751
|
+
return {
|
|
41752
|
+
outfitItem,
|
|
41753
|
+
layerOrder
|
|
41754
|
+
};
|
|
41755
|
+
}
|
|
41756
|
+
function buildOutfit(selectedExternalIds, resolved, forceUntuck, lastAddedExternalId) {
|
|
41757
|
+
const entries = [];
|
|
41758
|
+
let lastAddedResolved = null;
|
|
41759
|
+
for (const r of resolved.items) {
|
|
41760
|
+
if (!selectedExternalIds.has(r.externalId)) continue;
|
|
41761
|
+
if (r.externalId === lastAddedExternalId) lastAddedResolved = r;
|
|
41762
|
+
const entry = makeOutfitItem(r, forceUntuck);
|
|
41763
|
+
if (entry) entries.push(entry);
|
|
41764
|
+
}
|
|
41765
|
+
entries.sort((a, b) => a.layerOrder - b.layerOrder);
|
|
41766
|
+
const items = entries.slice(0, MAX_OUTFIT_ITEMS).map((e) => e.outfitItem);
|
|
41767
|
+
const alternates = buildAlternateOutfits(items, lastAddedResolved);
|
|
41768
|
+
return {
|
|
41769
|
+
items,
|
|
41770
|
+
alternates
|
|
41771
|
+
};
|
|
41772
|
+
}
|
|
41773
|
+
function buildAlternateOutfits(primary, lastAddedResolved) {
|
|
41774
|
+
if (!lastAddedResolved || !lastAddedResolved.loadedProduct) return [];
|
|
41775
|
+
const currentCsaId = lastAddedResolved.storage.colorwaySizeAssetId;
|
|
41776
|
+
if (currentCsaId == null) return [];
|
|
41777
|
+
if (!primary.some((i) => i.externalId === lastAddedResolved.externalId)) return [];
|
|
41778
|
+
const sizeRec = lastAddedResolved.loadedProduct.sizeFitRecommendation;
|
|
41779
|
+
let currentColorwayId = null;
|
|
41780
|
+
for (const sz of sizeRec.available_sizes) {
|
|
41781
|
+
const found = sz.colorway_size_assets.find((c) => c.id === currentCsaId);
|
|
41782
|
+
if (found) {
|
|
41783
|
+
currentColorwayId = found.colorway_id;
|
|
41784
|
+
break;
|
|
41785
|
+
}
|
|
41786
|
+
}
|
|
41787
|
+
const out = [];
|
|
41788
|
+
for (const sz of sizeRec.available_sizes) {
|
|
41789
|
+
const altCsa = sz.colorway_size_assets.find((c) => c.id !== currentCsaId && (currentColorwayId == null || c.colorway_id === currentColorwayId));
|
|
41790
|
+
if (!altCsa) continue;
|
|
41791
|
+
const alternate = primary.map((it) => it.externalId === lastAddedResolved.externalId ? {
|
|
41792
|
+
...it,
|
|
41793
|
+
colorwaySizeAssetId: altCsa.id
|
|
41794
|
+
} : it);
|
|
41795
|
+
out.push(alternate);
|
|
41796
|
+
}
|
|
41797
|
+
return out;
|
|
41798
|
+
}
|
|
41799
|
+
function AvatarControls({
|
|
41800
|
+
selectedItems,
|
|
41801
|
+
hasTuckable,
|
|
41802
|
+
forceUntuck,
|
|
41803
|
+
zoomed,
|
|
41804
|
+
onToggleUntuck,
|
|
41805
|
+
onToggleZoom,
|
|
41806
|
+
onRemoveItem
|
|
41807
|
+
}) {
|
|
41808
|
+
const {
|
|
41809
|
+
t
|
|
41810
|
+
} = useTranslation();
|
|
41811
|
+
const [popoverOpen, setPopoverOpen] = reactExports.useState(false);
|
|
41812
|
+
const popoverWrapperRef = reactExports.useRef(null);
|
|
41813
|
+
reactExports.useEffect(() => {
|
|
41814
|
+
if (!popoverOpen) return;
|
|
41815
|
+
const onDocClick = (e) => {
|
|
41816
|
+
if (popoverWrapperRef.current && !popoverWrapperRef.current.contains(e.target)) {
|
|
41817
|
+
setPopoverOpen(false);
|
|
41818
|
+
}
|
|
41819
|
+
};
|
|
41820
|
+
document.addEventListener("mousedown", onDocClick);
|
|
41821
|
+
return () => document.removeEventListener("mousedown", onDocClick);
|
|
41822
|
+
}, [popoverOpen]);
|
|
41823
|
+
const handleTogglePopover = reactExports.useCallback(() => {
|
|
41824
|
+
setPopoverOpen((open) => !open);
|
|
41825
|
+
}, []);
|
|
41826
|
+
const css2 = useCss((theme) => ({
|
|
41827
|
+
wrapper: {
|
|
41828
|
+
position: "absolute",
|
|
41829
|
+
right: "16px",
|
|
41830
|
+
bottom: "16px",
|
|
41831
|
+
display: "flex",
|
|
41832
|
+
flexDirection: "column",
|
|
41833
|
+
gap: "8px",
|
|
41834
|
+
alignItems: "flex-end"
|
|
41835
|
+
},
|
|
41836
|
+
pill: {
|
|
41837
|
+
display: "inline-flex",
|
|
41838
|
+
alignItems: "center",
|
|
41839
|
+
gap: "8px",
|
|
41840
|
+
padding: "8px 16px",
|
|
41841
|
+
borderRadius: "24px",
|
|
41842
|
+
backgroundColor: "rgba(255, 255, 255, 0.95)",
|
|
41843
|
+
border: `1px solid ${theme.color_fg_text}`,
|
|
41844
|
+
fontSize: "12px",
|
|
41845
|
+
fontWeight: "500",
|
|
41846
|
+
letterSpacing: "0.5px",
|
|
41847
|
+
textTransform: "uppercase",
|
|
41848
|
+
cursor: "pointer",
|
|
41849
|
+
userSelect: "none",
|
|
41850
|
+
WebkitUserSelect: "none"
|
|
41851
|
+
},
|
|
41852
|
+
pillIcon: {
|
|
41853
|
+
width: "14px",
|
|
41854
|
+
height: "14px",
|
|
41855
|
+
flex: "none"
|
|
41856
|
+
},
|
|
41857
|
+
popover: {
|
|
41858
|
+
position: "absolute",
|
|
41859
|
+
bottom: "calc(100% + 8px)",
|
|
41860
|
+
right: 0,
|
|
41861
|
+
width: "280px",
|
|
41862
|
+
maxHeight: "320px",
|
|
41863
|
+
overflowY: "auto",
|
|
41864
|
+
backgroundColor: "#FFFFFF",
|
|
41865
|
+
border: `1px solid ${theme.color_fg_text}`,
|
|
41866
|
+
borderRadius: "8px",
|
|
41867
|
+
padding: "8px",
|
|
41868
|
+
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)",
|
|
41869
|
+
display: "flex",
|
|
41870
|
+
flexDirection: "column",
|
|
41871
|
+
gap: "4px"
|
|
41872
|
+
},
|
|
41873
|
+
popoverRow: {
|
|
41874
|
+
display: "flex",
|
|
41875
|
+
alignItems: "center",
|
|
41876
|
+
gap: "8px",
|
|
41877
|
+
padding: "6px"
|
|
41878
|
+
},
|
|
41879
|
+
popoverThumb: {
|
|
41880
|
+
width: "40px",
|
|
41881
|
+
height: "52px",
|
|
41882
|
+
backgroundColor: "#F4F4F4",
|
|
41883
|
+
flex: "none",
|
|
41884
|
+
objectFit: "cover"
|
|
41885
|
+
},
|
|
41886
|
+
popoverLabel: {
|
|
41887
|
+
flex: 1,
|
|
41888
|
+
fontSize: "12px"
|
|
41889
|
+
},
|
|
41890
|
+
popoverRemove: {
|
|
41891
|
+
width: "24px",
|
|
41892
|
+
height: "24px",
|
|
41893
|
+
borderRadius: "12px",
|
|
41894
|
+
border: "none",
|
|
41895
|
+
backgroundColor: "transparent",
|
|
41896
|
+
cursor: "pointer",
|
|
41897
|
+
fontSize: "14px"
|
|
41898
|
+
}
|
|
41899
|
+
}));
|
|
41900
|
+
const seePill = /* @__PURE__ */ jsxs("div", { ref: popoverWrapperRef, style: {
|
|
41901
|
+
position: "relative"
|
|
41902
|
+
}, children: [
|
|
41903
|
+
/* @__PURE__ */ jsxs(Button, { variant: "base", css: css2.pill, onClick: handleTogglePopover, children: [
|
|
41904
|
+
/* @__PURE__ */ jsx$1(SvgIconSelectedItems, { css: css2.pillIcon }),
|
|
41905
|
+
/* @__PURE__ */ jsx$1(Text, { variant: "base", children: t("fitting_room.see_selected_items") })
|
|
41906
|
+
] }),
|
|
41907
|
+
popoverOpen ? /* @__PURE__ */ jsx$1("div", { css: css2.popover, children: selectedItems.length === 0 ? /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.popoverLabel, children: t("fitting_room.no_selection") }) : selectedItems.map((item) => /* @__PURE__ */ jsxs("div", { css: css2.popoverRow, children: [
|
|
41908
|
+
item.merchantProduct?.imageUrl ? /* @__PURE__ */ jsx$1("img", { src: item.merchantProduct.imageUrl, css: css2.popoverThumb, alt: "" }) : /* @__PURE__ */ jsx$1("div", { css: css2.popoverThumb }),
|
|
41909
|
+
/* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.popoverLabel, children: item.merchantProduct?.productName ?? item.externalId }),
|
|
41910
|
+
/* @__PURE__ */ jsx$1("button", { css: css2.popoverRemove, onClick: () => onRemoveItem(item.externalId), "aria-label": "Remove", children: "×" })
|
|
41911
|
+
] }, item.externalId)) }) : null
|
|
41912
|
+
] });
|
|
41913
|
+
return /* @__PURE__ */ jsxs("div", { css: css2.wrapper, children: [
|
|
41914
|
+
seePill,
|
|
41915
|
+
hasTuckable ? /* @__PURE__ */ jsxs(Button, { variant: "base", css: css2.pill, onClick: onToggleUntuck, children: [
|
|
41916
|
+
/* @__PURE__ */ jsx$1(SvgInfoIcon, { css: css2.pillIcon }),
|
|
41917
|
+
/* @__PURE__ */ jsx$1(Text, { variant: "base", children: t(forceUntuck ? "fitting_room.tuck_in" : "fitting_room.untuck") })
|
|
41918
|
+
] }) : null,
|
|
41919
|
+
/* @__PURE__ */ jsxs(Button, { variant: "base", css: css2.pill, onClick: onToggleZoom, children: [
|
|
41920
|
+
/* @__PURE__ */ jsx$1(SvgIconZoom, { css: css2.pillIcon }),
|
|
41921
|
+
/* @__PURE__ */ jsx$1(Text, { variant: "base", children: t(zoomed ? "fitting_room.zoom_out" : "fitting_room.zoom_in") })
|
|
41922
|
+
] })
|
|
41923
|
+
] });
|
|
41924
|
+
}
|
|
41925
|
+
function AvatarFrameViewer({
|
|
41926
|
+
frameUrls,
|
|
41927
|
+
selectedFrameIndex,
|
|
41928
|
+
setSelectedFrameIndex,
|
|
41929
|
+
imageContainerStyle,
|
|
41930
|
+
imageStyle,
|
|
41931
|
+
loadingT = "vto-single.avatar_loading"
|
|
41932
|
+
}) {
|
|
41933
|
+
const css2 = useCss((_theme) => ({
|
|
41934
|
+
imageContainer: {
|
|
41935
|
+
position: "absolute"
|
|
41936
|
+
},
|
|
41937
|
+
image: {
|
|
41938
|
+
objectFit: "contain",
|
|
41939
|
+
cursor: "grab"
|
|
41940
|
+
},
|
|
41941
|
+
chevronLeftContainer: {
|
|
41942
|
+
position: "absolute",
|
|
41943
|
+
top: "50%",
|
|
41944
|
+
left: "0",
|
|
41945
|
+
transform: "translateY(-50%)",
|
|
41946
|
+
cursor: "pointer"
|
|
41947
|
+
},
|
|
41948
|
+
chevronRightContainer: {
|
|
41949
|
+
position: "absolute",
|
|
41950
|
+
top: "50%",
|
|
41951
|
+
right: "0",
|
|
41952
|
+
transform: "translateY(-50%)",
|
|
41953
|
+
cursor: "pointer"
|
|
41954
|
+
},
|
|
41955
|
+
chevronIcon: {
|
|
41956
|
+
width: "48px",
|
|
41957
|
+
height: "48px"
|
|
41958
|
+
}
|
|
41959
|
+
}));
|
|
41960
|
+
reactExports.useEffect(() => {
|
|
41961
|
+
if (!frameUrls || frameUrls.length === 0 || selectedFrameIndex != null) {
|
|
41962
|
+
return;
|
|
41963
|
+
}
|
|
41964
|
+
let currentFrameIndex = 0;
|
|
41965
|
+
setSelectedFrameIndex(currentFrameIndex);
|
|
41966
|
+
const intervalId = setInterval(() => {
|
|
41967
|
+
currentFrameIndex = (currentFrameIndex + 1) % frameUrls.length;
|
|
41968
|
+
setSelectedFrameIndex(currentFrameIndex);
|
|
41969
|
+
if (currentFrameIndex === 0) {
|
|
41970
|
+
clearInterval(intervalId);
|
|
41971
|
+
}
|
|
41972
|
+
}, 500);
|
|
41973
|
+
return () => clearInterval(intervalId);
|
|
41974
|
+
}, [frameUrls, selectedFrameIndex, setSelectedFrameIndex]);
|
|
41975
|
+
const rotateLeft = reactExports.useCallback(() => {
|
|
41976
|
+
setSelectedFrameIndex((prevIndex) => {
|
|
41977
|
+
if (prevIndex == null) return null;
|
|
41978
|
+
return prevIndex === 0 ? frameUrls ? frameUrls.length - 1 : 0 : prevIndex - 1;
|
|
41979
|
+
});
|
|
41980
|
+
}, [frameUrls, setSelectedFrameIndex]);
|
|
41981
|
+
const rotateRight = reactExports.useCallback(() => {
|
|
41982
|
+
setSelectedFrameIndex((prevIndex) => {
|
|
41983
|
+
if (prevIndex == null) return null;
|
|
41984
|
+
return prevIndex === (frameUrls ? frameUrls.length - 1 : 0) ? 0 : prevIndex + 1;
|
|
41985
|
+
});
|
|
41986
|
+
}, [frameUrls, setSelectedFrameIndex]);
|
|
41987
|
+
const handleImageMouseDrag = reactExports.useCallback((e) => {
|
|
41988
|
+
e.preventDefault();
|
|
41989
|
+
let startX = e.clientX;
|
|
41990
|
+
const onMouseMove = (moveEvent) => {
|
|
41991
|
+
const deltaX = moveEvent.clientX - startX;
|
|
41992
|
+
if (Math.abs(deltaX) >= 50) {
|
|
41993
|
+
if (deltaX > 0) rotateRight();
|
|
41994
|
+
else rotateLeft();
|
|
41995
|
+
startX = moveEvent.clientX;
|
|
41996
|
+
}
|
|
41997
|
+
};
|
|
41998
|
+
const onMouseUp = () => {
|
|
41999
|
+
window.removeEventListener("mousemove", onMouseMove);
|
|
42000
|
+
window.removeEventListener("mouseup", onMouseUp);
|
|
42001
|
+
};
|
|
42002
|
+
window.addEventListener("mousemove", onMouseMove);
|
|
42003
|
+
window.addEventListener("mouseup", onMouseUp);
|
|
42004
|
+
}, [rotateLeft, rotateRight]);
|
|
42005
|
+
const handleImageTouchDrag = reactExports.useCallback((e) => {
|
|
42006
|
+
e.preventDefault();
|
|
42007
|
+
let startX = e.touches[0].clientX;
|
|
42008
|
+
const onTouchMove = (moveEvent) => {
|
|
42009
|
+
const deltaX = moveEvent.touches[0].clientX - startX;
|
|
42010
|
+
if (Math.abs(deltaX) >= 50) {
|
|
42011
|
+
if (deltaX > 0) rotateRight();
|
|
42012
|
+
else rotateLeft();
|
|
42013
|
+
startX = moveEvent.touches[0].clientX;
|
|
42014
|
+
}
|
|
42015
|
+
};
|
|
42016
|
+
const onTouchEnd = () => {
|
|
42017
|
+
window.removeEventListener("touchmove", onTouchMove);
|
|
42018
|
+
window.removeEventListener("touchend", onTouchEnd);
|
|
42019
|
+
};
|
|
42020
|
+
window.addEventListener("touchmove", onTouchMove);
|
|
42021
|
+
window.addEventListener("touchend", onTouchEnd);
|
|
42022
|
+
}, [rotateLeft, rotateRight]);
|
|
42023
|
+
if (!frameUrls || selectedFrameIndex == null) {
|
|
42024
|
+
return /* @__PURE__ */ jsx$1(Loading, { t: loadingT });
|
|
42025
|
+
}
|
|
42026
|
+
return /* @__PURE__ */ jsxs("div", { css: css2.imageContainer, style: imageContainerStyle, children: [
|
|
42027
|
+
/* @__PURE__ */ jsx$1("img", { src: frameUrls[selectedFrameIndex], css: css2.image, style: imageStyle, onMouseDown: handleImageMouseDrag, onTouchStart: handleImageTouchDrag }),
|
|
42028
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.chevronLeftContainer, onClick: rotateLeft, children: /* @__PURE__ */ jsx$1(SvgChevronLeft, { css: css2.chevronIcon }) }),
|
|
42029
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.chevronRightContainer, onClick: rotateRight, children: /* @__PURE__ */ jsx$1(SvgChevronRight, { css: css2.chevronIcon }) })
|
|
42030
|
+
] });
|
|
42031
|
+
}
|
|
42032
|
+
function AvatarPane({
|
|
42033
|
+
frameUrls,
|
|
42034
|
+
hasSelection,
|
|
42035
|
+
controls
|
|
42036
|
+
}) {
|
|
42037
|
+
const [selectedFrameIndex, setSelectedFrameIndex] = reactExports.useState(null);
|
|
42038
|
+
const css2 = useCss((theme) => ({
|
|
42039
|
+
container: {
|
|
42040
|
+
width: "100%",
|
|
42041
|
+
height: "100%",
|
|
42042
|
+
display: "flex",
|
|
42043
|
+
alignItems: "center",
|
|
42044
|
+
justifyContent: "center",
|
|
42045
|
+
backgroundColor: "#FAFAFA",
|
|
42046
|
+
color: theme.color_fg_text,
|
|
42047
|
+
fontSize: "14px",
|
|
42048
|
+
position: "relative"
|
|
42049
|
+
},
|
|
42050
|
+
placeholder: {
|
|
42051
|
+
padding: "32px",
|
|
42052
|
+
textAlign: "center"
|
|
42053
|
+
},
|
|
42054
|
+
frameSlot: {
|
|
42055
|
+
position: "relative",
|
|
42056
|
+
width: "100%",
|
|
42057
|
+
height: "100%"
|
|
42058
|
+
},
|
|
42059
|
+
frameContainer: {
|
|
42060
|
+
position: "absolute",
|
|
42061
|
+
inset: 0
|
|
42062
|
+
},
|
|
42063
|
+
frameImage: {
|
|
42064
|
+
width: "100%",
|
|
42065
|
+
height: "100%"
|
|
42066
|
+
}
|
|
42067
|
+
}));
|
|
42068
|
+
if (frameUrls && frameUrls.length > 0) {
|
|
42069
|
+
return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
|
|
42070
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.frameSlot, children: /* @__PURE__ */ jsx$1(AvatarFrameViewer, { frameUrls, selectedFrameIndex, setSelectedFrameIndex, imageContainerStyle: css2.frameContainer, imageStyle: css2.frameImage, loadingT: "vto-single.avatar_loading" }) }),
|
|
42071
|
+
controls
|
|
42072
|
+
] });
|
|
42073
|
+
}
|
|
42074
|
+
if (hasSelection) {
|
|
42075
|
+
return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
|
|
42076
|
+
/* @__PURE__ */ jsx$1(Loading, { t: "vto-single.avatar_loading" }),
|
|
42077
|
+
controls
|
|
42078
|
+
] });
|
|
42079
|
+
}
|
|
42080
|
+
return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
|
|
42081
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.placeholder, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "fitting_room.avatar_placeholder_empty" }) }),
|
|
42082
|
+
controls
|
|
42083
|
+
] });
|
|
42084
|
+
}
|
|
42085
|
+
function ProductCard({
|
|
42086
|
+
item,
|
|
42087
|
+
availability,
|
|
42088
|
+
onClick,
|
|
42089
|
+
onRemove
|
|
42090
|
+
}) {
|
|
42091
|
+
const css2 = useCss((theme) => ({
|
|
42092
|
+
container: {
|
|
42093
|
+
position: "relative",
|
|
42094
|
+
width: "160px",
|
|
42095
|
+
flex: "none",
|
|
42096
|
+
display: "flex",
|
|
42097
|
+
flexDirection: "column",
|
|
42098
|
+
gap: "8px",
|
|
42099
|
+
padding: "8px",
|
|
42100
|
+
border: "1px solid transparent",
|
|
42101
|
+
backgroundColor: "transparent",
|
|
42102
|
+
textAlign: "left"
|
|
42103
|
+
},
|
|
42104
|
+
containerSelected: {
|
|
42105
|
+
border: `1px solid ${theme.color_fg_text}`
|
|
42106
|
+
},
|
|
42107
|
+
containerDisabled: {
|
|
42108
|
+
opacity: 0.35
|
|
42109
|
+
},
|
|
42110
|
+
cardBody: {
|
|
42111
|
+
width: "100%",
|
|
42112
|
+
display: "flex",
|
|
42113
|
+
flexDirection: "column",
|
|
42114
|
+
gap: "8px",
|
|
42115
|
+
background: "none",
|
|
42116
|
+
border: "none",
|
|
42117
|
+
padding: 0,
|
|
42118
|
+
textAlign: "left",
|
|
42119
|
+
cursor: "pointer",
|
|
42120
|
+
fontFamily: theme.font_family
|
|
42121
|
+
},
|
|
42122
|
+
cardBodyDisabled: {
|
|
42123
|
+
cursor: "not-allowed"
|
|
42124
|
+
},
|
|
42125
|
+
imageContainer: {
|
|
42126
|
+
width: "100%",
|
|
42127
|
+
aspectRatio: "3 / 4",
|
|
42128
|
+
backgroundColor: "#F4F4F4",
|
|
42129
|
+
overflow: "hidden"
|
|
42130
|
+
},
|
|
42131
|
+
image: {
|
|
42132
|
+
width: "100%",
|
|
42133
|
+
height: "100%",
|
|
42134
|
+
objectFit: "cover"
|
|
42135
|
+
},
|
|
42136
|
+
nameText: {
|
|
42137
|
+
fontSize: "13px",
|
|
42138
|
+
lineHeight: "1.3"
|
|
42139
|
+
},
|
|
42140
|
+
priceText: {
|
|
42141
|
+
fontSize: "12px",
|
|
42142
|
+
color: theme.color_fg_text
|
|
42143
|
+
},
|
|
42144
|
+
removeButton: {
|
|
42145
|
+
position: "absolute",
|
|
42146
|
+
top: "4px",
|
|
42147
|
+
right: "4px",
|
|
42148
|
+
width: "24px",
|
|
42149
|
+
height: "24px",
|
|
42150
|
+
borderRadius: "12px",
|
|
42151
|
+
border: "none",
|
|
42152
|
+
backgroundColor: "rgba(255, 255, 255, 0.85)",
|
|
42153
|
+
display: "flex",
|
|
42154
|
+
alignItems: "center",
|
|
42155
|
+
justifyContent: "center",
|
|
42156
|
+
cursor: "pointer",
|
|
42157
|
+
padding: 0,
|
|
42158
|
+
zIndex: 1
|
|
42159
|
+
},
|
|
42160
|
+
removeIcon: {
|
|
42161
|
+
width: "12px",
|
|
42162
|
+
height: "12px"
|
|
42163
|
+
}
|
|
42164
|
+
}));
|
|
42165
|
+
const disabled = availability === "disabled";
|
|
42166
|
+
const selected = availability === "selected";
|
|
42167
|
+
const handleClick = () => {
|
|
42168
|
+
if (disabled) return;
|
|
42169
|
+
onClick();
|
|
42170
|
+
};
|
|
42171
|
+
const name2 = item.merchantProduct?.productName ?? item.externalId;
|
|
42172
|
+
const imageUrl = item.merchantProduct?.imageUrl ?? null;
|
|
42173
|
+
const price = item.merchantProduct?.variants[0]?.priceFormatted ?? null;
|
|
42174
|
+
return /* @__PURE__ */ jsxs("div", { css: /* @__PURE__ */ css$1({
|
|
42175
|
+
...css2.container,
|
|
42176
|
+
...selected && css2.containerSelected,
|
|
42177
|
+
...disabled && css2.containerDisabled
|
|
42178
|
+
}, "", ""), children: [
|
|
42179
|
+
/* @__PURE__ */ jsx$1("button", { css: css2.removeButton, onClick: (e) => {
|
|
42180
|
+
e.stopPropagation();
|
|
42181
|
+
onRemove();
|
|
42182
|
+
}, "aria-label": "Remove from fitting room", children: /* @__PURE__ */ jsx$1(SvgCloseIcon, { css: css2.removeIcon }) }),
|
|
42183
|
+
/* @__PURE__ */ jsxs(Button, { variant: "base", css: /* @__PURE__ */ css$1({
|
|
42184
|
+
...css2.cardBody,
|
|
42185
|
+
...disabled && css2.cardBodyDisabled
|
|
42186
|
+
}, "", ""), onClick: handleClick, disabled, children: [
|
|
42187
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.imageContainer, children: imageUrl ? /* @__PURE__ */ jsx$1("img", { src: imageUrl, css: css2.image, alt: name2 }) : null }),
|
|
42188
|
+
/* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.nameText, children: name2 }),
|
|
42189
|
+
price ? /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.priceText, children: price }) : null
|
|
42190
|
+
] })
|
|
42191
|
+
] });
|
|
42192
|
+
}
|
|
42193
|
+
function CardRail({
|
|
42194
|
+
group,
|
|
42195
|
+
availabilityByExternalId,
|
|
42196
|
+
onSelectItem,
|
|
42197
|
+
onRemoveItem,
|
|
42198
|
+
layout
|
|
42199
|
+
}) {
|
|
42200
|
+
const [collapsed, setCollapsed] = reactExports.useState(false);
|
|
42201
|
+
const css2 = useCss((theme) => ({
|
|
42202
|
+
container: {
|
|
42203
|
+
display: "flex",
|
|
42204
|
+
flexDirection: "column",
|
|
42205
|
+
gap: "8px"
|
|
42206
|
+
},
|
|
42207
|
+
header: {
|
|
42208
|
+
display: "flex",
|
|
42209
|
+
alignItems: "center",
|
|
42210
|
+
justifyContent: "space-between",
|
|
42211
|
+
padding: "8px 0",
|
|
42212
|
+
borderBottom: `1px solid ${theme.color_fg_text}`
|
|
42213
|
+
},
|
|
42214
|
+
headerLabel: {
|
|
42215
|
+
fontSize: "12px",
|
|
42216
|
+
fontWeight: "600",
|
|
42217
|
+
letterSpacing: "0.5px",
|
|
42218
|
+
textTransform: "uppercase"
|
|
42219
|
+
},
|
|
42220
|
+
chevron: {
|
|
42221
|
+
fontSize: "12px"
|
|
42222
|
+
},
|
|
42223
|
+
horizontal: {
|
|
42224
|
+
display: "flex",
|
|
42225
|
+
flexDirection: "row",
|
|
42226
|
+
gap: "8px",
|
|
42227
|
+
overflowX: "auto",
|
|
42228
|
+
padding: "4px 0"
|
|
42229
|
+
},
|
|
42230
|
+
grid: {
|
|
42231
|
+
display: "grid",
|
|
42232
|
+
gridTemplateColumns: "repeat(2, 1fr)",
|
|
42233
|
+
gap: "8px",
|
|
42234
|
+
padding: "4px 0"
|
|
42235
|
+
}
|
|
42236
|
+
}));
|
|
42237
|
+
return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
|
|
42238
|
+
/* @__PURE__ */ jsxs(Button, { variant: "base", css: css2.header, onClick: () => setCollapsed((c) => !c), children: [
|
|
42239
|
+
/* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.headerLabel, children: group.group.label }),
|
|
42240
|
+
/* @__PURE__ */ jsx$1("span", { css: css2.chevron, children: collapsed ? "⌄" : "⌃" })
|
|
42241
|
+
] }),
|
|
42242
|
+
collapsed ? null : /* @__PURE__ */ jsx$1("div", { css: layout === "horizontal" ? css2.horizontal : css2.grid, children: group.items.map((item) => /* @__PURE__ */ jsx$1(ProductCard, { item, availability: availabilityByExternalId[item.externalId] ?? "disabled", onClick: () => onSelectItem(item.externalId), onRemove: () => onRemoveItem(item.externalId) }, item.externalId)) })
|
|
42243
|
+
] });
|
|
42244
|
+
}
|
|
42245
|
+
function AddToCartButton({
|
|
42246
|
+
onClick
|
|
42247
|
+
}) {
|
|
42248
|
+
return /* @__PURE__ */ jsx$1(ButtonT, { variant: "brand", t: "vto-single.add_to_cart", onClick });
|
|
42249
|
+
}
|
|
42250
|
+
function ItemFitDetails({
|
|
42251
|
+
loadedProductData,
|
|
42252
|
+
selectedSizeLabel
|
|
42253
|
+
}) {
|
|
42254
|
+
const {
|
|
42255
|
+
t
|
|
42256
|
+
} = useTranslation();
|
|
42257
|
+
const css2 = useCss((_theme) => ({
|
|
42258
|
+
container: {
|
|
42259
|
+
width: "100%"
|
|
42260
|
+
},
|
|
42261
|
+
line: {
|
|
42262
|
+
display: "flex",
|
|
42263
|
+
justifyContent: "space-between",
|
|
42264
|
+
alignItems: "center",
|
|
42265
|
+
gap: "8px",
|
|
42266
|
+
marginTop: "4px",
|
|
42267
|
+
borderTop: "1px solid rgb(33, 32, 31)",
|
|
42268
|
+
paddingTop: "4px"
|
|
42269
|
+
},
|
|
42270
|
+
firstLine: {
|
|
42271
|
+
borderTop: "none",
|
|
42272
|
+
marginTop: "0px",
|
|
42273
|
+
paddingTop: "0px"
|
|
42274
|
+
},
|
|
42275
|
+
detailCell: {
|
|
42276
|
+
display: "flex",
|
|
42277
|
+
alignItems: "center",
|
|
42278
|
+
gap: "6px"
|
|
42279
|
+
}
|
|
42280
|
+
}));
|
|
42281
|
+
const fitLineNodeList = reactExports.useMemo(() => {
|
|
42282
|
+
const selectedSizeRecord = loadedProductData.sizes.find((s) => s.sizeLabel === selectedSizeLabel);
|
|
42283
|
+
if (!selectedSizeRecord) {
|
|
42284
|
+
return null;
|
|
42285
|
+
}
|
|
42286
|
+
return selectedSizeRecord.fit.measurement_location_fits.map((mlf, index) => {
|
|
42287
|
+
const locationLabel = t(`size-rec.measurementLocation.${mlf.measurement_location}`) || mlf.measurement_location;
|
|
42288
|
+
const fit = mlf.fit;
|
|
42289
|
+
const fitLabel = t(`size-rec.fit.${fit}`) || fit;
|
|
42290
|
+
return /* @__PURE__ */ jsxs("div", { css: [css2.line, index === 0 && css2.firstLine, "", ""], children: [
|
|
42291
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.detailCell, children: locationLabel }),
|
|
42292
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.detailCell, children: fit === "perfect_fit" ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
42293
|
+
/* @__PURE__ */ jsx$1(SvgCheckCircle, {}),
|
|
42294
|
+
" ",
|
|
42295
|
+
fitLabel
|
|
42296
|
+
] }) : fitLabel })
|
|
42297
|
+
] }, index);
|
|
42298
|
+
});
|
|
42299
|
+
}, [loadedProductData, selectedSizeLabel]);
|
|
42300
|
+
return /* @__PURE__ */ jsx$1("div", { css: css2.container, children: fitLineNodeList });
|
|
42301
|
+
}
|
|
42302
|
+
function ItemFitText({
|
|
42303
|
+
loadedProductData,
|
|
42304
|
+
textCss
|
|
42305
|
+
}) {
|
|
42306
|
+
const {
|
|
42307
|
+
t
|
|
42308
|
+
} = useTranslation();
|
|
42309
|
+
return /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: textCss, t: "size-rec.item_fit", vars: {
|
|
42310
|
+
fit: t(`size-rec.fitClassification.${loadedProductData.fitClassification}`) || loadedProductData.fitClassification
|
|
42311
|
+
} });
|
|
42312
|
+
}
|
|
42313
|
+
function SizeSelector({
|
|
42314
|
+
loadedProductData,
|
|
42315
|
+
selectedSizeLabel,
|
|
42316
|
+
onChangeSize
|
|
42317
|
+
}) {
|
|
42318
|
+
const css2 = useCss((_theme) => ({
|
|
42319
|
+
container: {
|
|
42320
|
+
display: "flex",
|
|
42321
|
+
alignItems: "center",
|
|
42322
|
+
gap: "12px"
|
|
42323
|
+
},
|
|
42324
|
+
button: {
|
|
42325
|
+
width: "54px",
|
|
42326
|
+
height: "44px",
|
|
42327
|
+
border: "1px solid rgba(33, 32, 31, 0.2)",
|
|
42328
|
+
padding: "9px 5px"
|
|
42329
|
+
},
|
|
42330
|
+
selectedButton: {
|
|
42331
|
+
border: "1px solid rgb(33, 32, 31)",
|
|
42332
|
+
cursor: "default"
|
|
42333
|
+
}
|
|
42334
|
+
}));
|
|
42335
|
+
const sizeSelectorNodeList = reactExports.useMemo(() => loadedProductData.sizes.map((sizeRecord) => {
|
|
42336
|
+
const isSelected = sizeRecord.sizeLabel === selectedSizeLabel;
|
|
42337
|
+
return /* @__PURE__ */ jsx$1(Button, { variant: "base", css: /* @__PURE__ */ css$1({
|
|
42338
|
+
...css2.button,
|
|
42339
|
+
...isSelected && css2.selectedButton
|
|
42340
|
+
}, "", ""), onClick: () => {
|
|
42341
|
+
if (isSelected) {
|
|
42342
|
+
return;
|
|
42343
|
+
}
|
|
42344
|
+
onChangeSize(sizeRecord.sizeLabel);
|
|
42345
|
+
}, children: sizeRecord.sizeLabel }, sizeRecord.sizeLabel);
|
|
42346
|
+
}), [loadedProductData.sizes, selectedSizeLabel, onChangeSize]);
|
|
42347
|
+
return /* @__PURE__ */ jsx$1("div", { css: css2.container, children: sizeSelectorNodeList });
|
|
42348
|
+
}
|
|
42349
|
+
const logger$b = getLogger("overlays/fitting-room/product-data");
|
|
42350
|
+
function buildVtoProductDataFromResolved(item) {
|
|
42351
|
+
const {
|
|
42352
|
+
merchantProduct,
|
|
42353
|
+
loadedProduct
|
|
42354
|
+
} = item;
|
|
42355
|
+
if (!merchantProduct || !loadedProduct) return null;
|
|
42356
|
+
const sizeRec = loadedProduct.sizeFitRecommendation;
|
|
42357
|
+
const recommendedSizeId = sizeRec.recommended_size.id || null;
|
|
42358
|
+
const recommendedSizeLabel = getSizeLabelFromSize(sizeRec.recommended_size);
|
|
42359
|
+
if (recommendedSizeId == null || !recommendedSizeLabel) {
|
|
42360
|
+
logger$b.logWarn("Missing recommended size for item", {
|
|
42361
|
+
externalId: item.externalId
|
|
42362
|
+
});
|
|
42363
|
+
return null;
|
|
42364
|
+
}
|
|
42365
|
+
const sizes = [];
|
|
42366
|
+
for (const sizeRecord of sizeRec.available_sizes) {
|
|
42367
|
+
const sizeLabel = getSizeLabelFromSize(sizeRecord);
|
|
42368
|
+
if (!sizeLabel) continue;
|
|
42369
|
+
const fit = sizeRec.fits.find((f) => f.size_id === sizeRecord.id);
|
|
42370
|
+
if (!fit) continue;
|
|
42371
|
+
const colors = [];
|
|
42372
|
+
for (const csa of sizeRecord.colorway_size_assets) {
|
|
42373
|
+
const variant = merchantProduct.variants.find((v) => v.sku === csa.sku);
|
|
42374
|
+
if (!variant) continue;
|
|
42375
|
+
colors.push({
|
|
42376
|
+
colorwaySizeAssetId: csa.id,
|
|
42377
|
+
colorLabel: variant.color || null,
|
|
42378
|
+
sku: csa.sku,
|
|
42379
|
+
priceFormatted: variant.priceFormatted
|
|
42380
|
+
});
|
|
42381
|
+
}
|
|
42382
|
+
if (colors.length === 0) continue;
|
|
42383
|
+
sizes.push({
|
|
42384
|
+
sizeId: sizeRecord.id,
|
|
42385
|
+
sizeLabel,
|
|
42386
|
+
isRecommended: sizeRecord.id === recommendedSizeId,
|
|
42387
|
+
fit,
|
|
42388
|
+
colors
|
|
42389
|
+
});
|
|
42390
|
+
}
|
|
42391
|
+
if (sizes.length === 0) return null;
|
|
42392
|
+
return {
|
|
42393
|
+
productName: merchantProduct.productName,
|
|
42394
|
+
productDescriptionHtml: merchantProduct.productDescriptionHtml,
|
|
42395
|
+
fitClassification: sizeRec.fit_classification,
|
|
42396
|
+
recommendedSizeId,
|
|
42397
|
+
recommendedSizeLabel,
|
|
42398
|
+
sizes,
|
|
42399
|
+
styleCategoryLabel: item.styleCategory?.label_singular ?? loadedProduct.style.style_category_label ?? null
|
|
42400
|
+
};
|
|
42401
|
+
}
|
|
42402
|
+
function findRecommendedColorSize(data, preferredColor) {
|
|
42403
|
+
const recommended = data.sizes.find((s) => s.isRecommended);
|
|
42404
|
+
if (!recommended || recommended.colors.length === 0) return null;
|
|
42405
|
+
return recommended.colors.find((c) => c.colorLabel === preferredColor) ?? recommended.colors[0];
|
|
42406
|
+
}
|
|
42407
|
+
function findCsaByLabel(data, sizeLabel, preferredColor) {
|
|
42408
|
+
const sizeRecord = data.sizes.find((s) => s.sizeLabel === sizeLabel);
|
|
42409
|
+
if (!sizeRecord || sizeRecord.colors.length === 0) return null;
|
|
42410
|
+
return sizeRecord.colors.find((c) => c.colorLabel === preferredColor) ?? sizeRecord.colors[0];
|
|
42411
|
+
}
|
|
42412
|
+
function DetailAccordionItem({
|
|
42413
|
+
item,
|
|
42414
|
+
isOpen,
|
|
42415
|
+
platform,
|
|
42416
|
+
forceUntuck,
|
|
42417
|
+
detailMode,
|
|
42418
|
+
isMobileQuickRow,
|
|
42419
|
+
onToggleOpen,
|
|
42420
|
+
onChangeDetailMode,
|
|
42421
|
+
onChangeSize,
|
|
42422
|
+
onAddToCart,
|
|
42423
|
+
onToggleUntuck
|
|
42424
|
+
}) {
|
|
42425
|
+
const productData = reactExports.useMemo(() => buildVtoProductDataFromResolved(item), [item]);
|
|
42426
|
+
const selectedSizeLabel = reactExports.useMemo(() => {
|
|
42427
|
+
if (!productData) return null;
|
|
42428
|
+
const csaId = item.storage.colorwaySizeAssetId;
|
|
42429
|
+
if (csaId == null) return null;
|
|
42430
|
+
for (const sizeRec of productData.sizes) {
|
|
42431
|
+
if (sizeRec.colors.some((c) => c.colorwaySizeAssetId === csaId)) {
|
|
42432
|
+
return sizeRec.sizeLabel;
|
|
42433
|
+
}
|
|
42434
|
+
}
|
|
42435
|
+
return null;
|
|
42436
|
+
}, [productData, item.storage.colorwaySizeAssetId]);
|
|
42437
|
+
const currentPrice = reactExports.useMemo(() => {
|
|
42438
|
+
if (!productData) return null;
|
|
42439
|
+
const csaId = item.storage.colorwaySizeAssetId;
|
|
42440
|
+
if (csaId == null) return null;
|
|
42441
|
+
for (const sizeRec of productData.sizes) {
|
|
42442
|
+
const c = sizeRec.colors.find((c2) => c2.colorwaySizeAssetId === csaId);
|
|
42443
|
+
if (c) return c.priceFormatted;
|
|
42444
|
+
}
|
|
42445
|
+
return null;
|
|
42446
|
+
}, [productData, item.storage.colorwaySizeAssetId]);
|
|
42447
|
+
const categoryLabel = item.styleCategory?.label_singular ?? item.styleCategory?.label ?? "";
|
|
42448
|
+
const productName = item.merchantProduct?.productName ?? item.externalId;
|
|
42449
|
+
const tuckable = !!item.styleCategory?.tuckable;
|
|
42450
|
+
if (platform === "desktop") {
|
|
42451
|
+
return /* @__PURE__ */ jsx$1(DesktopAccordionItem, { isOpen, categoryLabel, productData, currentPrice, selectedSizeLabel, onToggleOpen, onChangeSize, onAddToCart });
|
|
42452
|
+
}
|
|
42453
|
+
return /* @__PURE__ */ jsx$1(MobileAccordionItem, { isOpen, categoryLabel, productName, productData, selectedSizeLabel, currentPrice, detailMode, isMobileQuickRow, tuckable, forceUntuck, onToggleOpen, onChangeDetailMode, onChangeSize, onAddToCart, onToggleUntuck });
|
|
42454
|
+
}
|
|
42455
|
+
function DesktopAccordionItem({
|
|
42456
|
+
isOpen,
|
|
42457
|
+
categoryLabel,
|
|
42458
|
+
productData,
|
|
42459
|
+
currentPrice,
|
|
42460
|
+
selectedSizeLabel,
|
|
42461
|
+
onToggleOpen,
|
|
42462
|
+
onChangeSize,
|
|
42463
|
+
onAddToCart
|
|
42464
|
+
}) {
|
|
42465
|
+
const css2 = useCss((theme) => ({
|
|
42466
|
+
container: {
|
|
42467
|
+
display: "flex",
|
|
42468
|
+
flexDirection: "column",
|
|
42469
|
+
borderBottom: `1px solid ${theme.color_fg_text}`
|
|
42470
|
+
},
|
|
42471
|
+
header: {
|
|
42472
|
+
display: "flex",
|
|
42473
|
+
alignItems: "center",
|
|
42474
|
+
justifyContent: "space-between",
|
|
42475
|
+
padding: "14px 4px",
|
|
42476
|
+
width: "100%",
|
|
42477
|
+
gap: "8px"
|
|
42478
|
+
},
|
|
42479
|
+
categoryLabel: {
|
|
42480
|
+
fontSize: "12px",
|
|
42481
|
+
fontWeight: "600",
|
|
42482
|
+
letterSpacing: "0.5px",
|
|
42483
|
+
textTransform: "uppercase"
|
|
42484
|
+
},
|
|
42485
|
+
chevron: {
|
|
42486
|
+
fontSize: "12px"
|
|
42487
|
+
},
|
|
42488
|
+
body: {
|
|
42489
|
+
display: "flex",
|
|
42490
|
+
flexDirection: "column",
|
|
42491
|
+
alignItems: "center",
|
|
42492
|
+
gap: "12px",
|
|
42493
|
+
padding: "8px 16px 24px 16px",
|
|
42494
|
+
textAlign: "center"
|
|
42495
|
+
},
|
|
42496
|
+
productName: {
|
|
42497
|
+
fontSize: "22px",
|
|
42498
|
+
lineHeight: "1.2"
|
|
42499
|
+
},
|
|
42500
|
+
price: {
|
|
42501
|
+
fontSize: "15px"
|
|
42502
|
+
},
|
|
42503
|
+
sizeBox: {
|
|
42504
|
+
width: "100%",
|
|
42505
|
+
maxWidth: "320px",
|
|
42506
|
+
border: `1px solid ${theme.color_fg_text}`,
|
|
42507
|
+
padding: "20px 24px",
|
|
42508
|
+
display: "flex",
|
|
42509
|
+
flexDirection: "column",
|
|
42510
|
+
alignItems: "center",
|
|
42511
|
+
gap: "12px",
|
|
42512
|
+
marginTop: "8px"
|
|
42513
|
+
},
|
|
42514
|
+
recommendedSize: {
|
|
42515
|
+
fontSize: "13px",
|
|
42516
|
+
fontWeight: "600"
|
|
42517
|
+
},
|
|
42518
|
+
selectPrompt: {
|
|
42519
|
+
fontSize: "12px"
|
|
42520
|
+
},
|
|
42521
|
+
fitText: {
|
|
42522
|
+
fontSize: "12px"
|
|
42523
|
+
},
|
|
42524
|
+
fitDetails: {
|
|
42525
|
+
width: "100%"
|
|
42526
|
+
},
|
|
42527
|
+
sizeRow: {
|
|
42528
|
+
display: "flex",
|
|
42529
|
+
gap: "8px",
|
|
42530
|
+
alignItems: "center",
|
|
42531
|
+
justifyContent: "center"
|
|
42532
|
+
},
|
|
42533
|
+
cartContainer: {
|
|
42534
|
+
width: "100%",
|
|
42535
|
+
maxWidth: "320px",
|
|
42536
|
+
marginTop: "16px"
|
|
42537
|
+
},
|
|
42538
|
+
description: {
|
|
42539
|
+
fontSize: "12px",
|
|
42540
|
+
lineHeight: "1.5",
|
|
42541
|
+
textAlign: "left",
|
|
42542
|
+
marginTop: "8px"
|
|
42543
|
+
}
|
|
42544
|
+
}));
|
|
42545
|
+
return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
|
|
42546
|
+
/* @__PURE__ */ jsxs(Button, { variant: "base", css: css2.header, onClick: onToggleOpen, children: [
|
|
42547
|
+
/* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.categoryLabel, children: categoryLabel }),
|
|
42548
|
+
/* @__PURE__ */ jsx$1("span", { css: css2.chevron, children: isOpen ? "⌃" : "⌄" })
|
|
42549
|
+
] }),
|
|
42550
|
+
!isOpen ? null : /* @__PURE__ */ jsx$1("div", { css: css2.body, children: productData ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
42551
|
+
/* @__PURE__ */ jsx$1(Text, { variant: "brand", css: css2.productName, children: productData.productName }),
|
|
42552
|
+
currentPrice ? /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.price, children: currentPrice }) : null,
|
|
42553
|
+
/* @__PURE__ */ jsxs("div", { css: css2.sizeBox, children: [
|
|
42554
|
+
/* @__PURE__ */ jsxs(Text, { variant: "base", css: css2.recommendedSize, children: [
|
|
42555
|
+
"Recommended Size: ",
|
|
42556
|
+
productData.recommendedSizeLabel
|
|
42557
|
+
] }),
|
|
42558
|
+
/* @__PURE__ */ jsx$1(ItemFitText, { loadedProductData: productData, textCss: css2.fitText }),
|
|
42559
|
+
/* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.selectPrompt, t: "size-rec.select_size" }),
|
|
42560
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.sizeRow, children: /* @__PURE__ */ jsx$1(SizeSelector, { loadedProductData: productData, selectedSizeLabel, onChangeSize }) }),
|
|
42561
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.fitDetails, children: /* @__PURE__ */ jsx$1(ItemFitDetails, { loadedProductData: productData, selectedSizeLabel }) })
|
|
42562
|
+
] }),
|
|
42563
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.cartContainer, children: /* @__PURE__ */ jsx$1(AddToCartButton, { onClick: onAddToCart }) }),
|
|
42564
|
+
/* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.description, children: /* @__PURE__ */ jsx$1("span", { dangerouslySetInnerHTML: {
|
|
42565
|
+
__html: productData.productDescriptionHtml
|
|
42566
|
+
} }) })
|
|
42567
|
+
] }) : /* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "loading" }) })
|
|
42568
|
+
] });
|
|
42569
|
+
}
|
|
42570
|
+
function MobileAccordionItem({
|
|
42571
|
+
isOpen,
|
|
42572
|
+
categoryLabel,
|
|
42573
|
+
productName,
|
|
42574
|
+
productData,
|
|
42575
|
+
selectedSizeLabel,
|
|
42576
|
+
currentPrice,
|
|
42577
|
+
detailMode,
|
|
42578
|
+
isMobileQuickRow,
|
|
42579
|
+
tuckable,
|
|
42580
|
+
forceUntuck,
|
|
42581
|
+
onToggleOpen,
|
|
42582
|
+
onChangeDetailMode,
|
|
42583
|
+
onChangeSize,
|
|
42584
|
+
onAddToCart,
|
|
42585
|
+
onToggleUntuck
|
|
42586
|
+
}) {
|
|
42587
|
+
const {
|
|
42588
|
+
t
|
|
42589
|
+
} = useTranslation();
|
|
42590
|
+
const css2 = useCss((theme) => ({
|
|
42591
|
+
container: {
|
|
42592
|
+
display: "flex",
|
|
42593
|
+
flexDirection: "column",
|
|
42594
|
+
borderBottom: `1px solid ${theme.color_fg_text}`
|
|
42595
|
+
},
|
|
42596
|
+
header: {
|
|
42597
|
+
display: "flex",
|
|
42598
|
+
alignItems: "center",
|
|
42599
|
+
justifyContent: "space-between",
|
|
42600
|
+
padding: "12px 0",
|
|
42601
|
+
width: "100%",
|
|
42602
|
+
gap: "8px"
|
|
42603
|
+
},
|
|
42604
|
+
headerLabel: {
|
|
42605
|
+
display: "flex",
|
|
42606
|
+
gap: "8px",
|
|
42607
|
+
alignItems: "baseline"
|
|
42608
|
+
},
|
|
42609
|
+
categoryLabel: {
|
|
42610
|
+
fontSize: "12px",
|
|
42611
|
+
fontWeight: "600",
|
|
42612
|
+
letterSpacing: "0.5px",
|
|
42613
|
+
textTransform: "uppercase"
|
|
42614
|
+
},
|
|
42615
|
+
productName: {
|
|
42616
|
+
fontSize: "12px",
|
|
42617
|
+
color: theme.color_fg_text
|
|
42618
|
+
},
|
|
42619
|
+
chevron: {
|
|
42620
|
+
fontSize: "12px"
|
|
42621
|
+
},
|
|
42622
|
+
body: {
|
|
42623
|
+
display: "flex",
|
|
42624
|
+
flexDirection: "column",
|
|
42625
|
+
gap: "16px",
|
|
42626
|
+
padding: "4px 0 16px 0"
|
|
42627
|
+
},
|
|
42628
|
+
quickRow: {
|
|
42629
|
+
display: "flex",
|
|
42630
|
+
alignItems: "center",
|
|
42631
|
+
gap: "12px",
|
|
42632
|
+
padding: "8px 0"
|
|
42633
|
+
},
|
|
42634
|
+
sizeRow: {
|
|
42635
|
+
display: "flex",
|
|
42636
|
+
gap: "8px",
|
|
42637
|
+
alignItems: "center"
|
|
42638
|
+
},
|
|
42639
|
+
fitDetailsContainer: {
|
|
42640
|
+
width: "min(100%, 220px)"
|
|
42641
|
+
},
|
|
42642
|
+
buttonContainer: {
|
|
42643
|
+
width: "100%",
|
|
42644
|
+
maxWidth: "375px"
|
|
42645
|
+
},
|
|
42646
|
+
detailsLink: {
|
|
42647
|
+
fontSize: "13px",
|
|
42648
|
+
textDecoration: "underline",
|
|
42649
|
+
textTransform: "uppercase",
|
|
42650
|
+
letterSpacing: "0.5px",
|
|
42651
|
+
cursor: "pointer"
|
|
42652
|
+
},
|
|
42653
|
+
expandedBlock: {
|
|
42654
|
+
display: "flex",
|
|
42655
|
+
flexDirection: "column",
|
|
42656
|
+
gap: "8px",
|
|
42657
|
+
marginTop: "8px"
|
|
42658
|
+
},
|
|
42659
|
+
expandedTitle: {
|
|
42660
|
+
fontSize: "18px",
|
|
42661
|
+
fontWeight: "500"
|
|
42662
|
+
},
|
|
42663
|
+
expandedPrice: {
|
|
42664
|
+
fontSize: "14px"
|
|
42665
|
+
},
|
|
42666
|
+
expandedDescription: {
|
|
42667
|
+
fontSize: "12px"
|
|
42668
|
+
},
|
|
42669
|
+
tuckButton: {
|
|
42670
|
+
width: "100%",
|
|
42671
|
+
maxWidth: "375px",
|
|
42672
|
+
padding: "12px 16px",
|
|
42673
|
+
borderRadius: "24px",
|
|
42674
|
+
backgroundColor: "#FFFFFF",
|
|
42675
|
+
color: theme.color_fg_text,
|
|
42676
|
+
border: `1px solid ${theme.color_fg_text}`,
|
|
42677
|
+
fontSize: "13px",
|
|
42678
|
+
fontWeight: "500",
|
|
42679
|
+
letterSpacing: "0.5px",
|
|
42680
|
+
textTransform: "uppercase",
|
|
42681
|
+
cursor: "pointer"
|
|
42682
|
+
}
|
|
42683
|
+
}));
|
|
42684
|
+
const handleViewDetailsClick = reactExports.useCallback(() => {
|
|
42685
|
+
onChangeDetailMode(detailMode === "compact" ? "expanded" : "compact");
|
|
42686
|
+
}, [detailMode, onChangeDetailMode]);
|
|
42687
|
+
const tuckLabelKey = forceUntuck ? "fitting_room.try_it_tucked_in" : "fitting_room.try_it_untucked";
|
|
42688
|
+
return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
|
|
42689
|
+
/* @__PURE__ */ jsxs(Button, { variant: "base", css: css2.header, onClick: onToggleOpen, children: [
|
|
42690
|
+
/* @__PURE__ */ jsxs("div", { css: css2.headerLabel, children: [
|
|
42691
|
+
/* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.categoryLabel, children: categoryLabel }),
|
|
42692
|
+
/* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.productName, children: productName })
|
|
42693
|
+
] }),
|
|
42694
|
+
/* @__PURE__ */ jsx$1("span", { css: css2.chevron, children: isOpen ? "⌃" : "⌄" })
|
|
42695
|
+
] }),
|
|
42696
|
+
!isOpen ? null : isMobileQuickRow ? /* @__PURE__ */ jsx$1("div", { css: css2.quickRow, children: productData ? /* @__PURE__ */ jsx$1(SizeSelector, { loadedProductData: productData, selectedSizeLabel, onChangeSize }) : null }) : /* @__PURE__ */ jsx$1("div", { css: css2.body, children: productData ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
42697
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.sizeRow, children: /* @__PURE__ */ jsx$1(SizeSelector, { loadedProductData: productData, selectedSizeLabel, onChangeSize }) }),
|
|
42698
|
+
/* @__PURE__ */ jsx$1(ItemFitText, { loadedProductData: productData }),
|
|
42699
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.fitDetailsContainer, children: /* @__PURE__ */ jsx$1(ItemFitDetails, { loadedProductData: productData, selectedSizeLabel }) }),
|
|
42700
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.buttonContainer, children: /* @__PURE__ */ jsx$1(AddToCartButton, { onClick: onAddToCart }) }),
|
|
42701
|
+
/* @__PURE__ */ jsx$1(LinkT, { variant: "base", css: css2.detailsLink, t: detailMode === "compact" ? "fitting_room.view_product_details" : "fitting_room.hide_product_details", onClick: handleViewDetailsClick }),
|
|
42702
|
+
detailMode === "expanded" ? /* @__PURE__ */ jsxs("div", { css: css2.expandedBlock, children: [
|
|
42703
|
+
/* @__PURE__ */ jsx$1(Text, { variant: "brand", css: css2.expandedTitle, children: productData.productName }),
|
|
42704
|
+
currentPrice ? /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.expandedPrice, children: currentPrice }) : null,
|
|
42705
|
+
/* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.expandedDescription, children: /* @__PURE__ */ jsx$1("span", { dangerouslySetInnerHTML: {
|
|
42706
|
+
__html: productData.productDescriptionHtml
|
|
42707
|
+
} }) }),
|
|
42708
|
+
tuckable ? /* @__PURE__ */ jsx$1(Button, { variant: "base", css: css2.tuckButton, onClick: onToggleUntuck, children: t(tuckLabelKey) }) : null
|
|
42709
|
+
] }) : null
|
|
42710
|
+
] }) : /* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "loading" }) })
|
|
42711
|
+
] });
|
|
42712
|
+
}
|
|
42713
|
+
function DetailAccordion({
|
|
42714
|
+
items,
|
|
42715
|
+
openItemExternalId,
|
|
42716
|
+
platform,
|
|
42717
|
+
detailMode,
|
|
42718
|
+
isMobileQuickRow,
|
|
42719
|
+
forceUntuck,
|
|
42720
|
+
onOpenItem,
|
|
42721
|
+
onChangeDetailMode,
|
|
42722
|
+
onChangeSize,
|
|
42723
|
+
onAddToCart,
|
|
42724
|
+
onToggleUntuck
|
|
42725
|
+
}) {
|
|
42726
|
+
const css2 = useCss((_theme) => ({
|
|
42727
|
+
container: {
|
|
42728
|
+
display: "flex",
|
|
42729
|
+
flexDirection: "column"
|
|
42730
|
+
}
|
|
42731
|
+
}));
|
|
42732
|
+
return /* @__PURE__ */ jsx$1("div", { css: css2.container, children: items.map((item) => {
|
|
42733
|
+
const isOpen = openItemExternalId === item.externalId;
|
|
42734
|
+
return /* @__PURE__ */ jsx$1(DetailAccordionItem, { item, isOpen, platform, detailMode, isMobileQuickRow, forceUntuck, onToggleOpen: () => onOpenItem(isOpen ? null : item.externalId), onChangeDetailMode, onChangeSize: (label) => onChangeSize(item.externalId, label), onAddToCart: () => onAddToCart(item.externalId), onToggleUntuck }, item.externalId);
|
|
42735
|
+
}) });
|
|
42736
|
+
}
|
|
42737
|
+
const AVATAR_ASPECT_RATIO = 2 / 3;
|
|
42738
|
+
const CONTAINER_PADDING_PX = 16;
|
|
42739
|
+
const AVATAR_MIN_WIDTH_PX = 240;
|
|
42740
|
+
const AVATAR_MAX_WIDTH_PX = 560;
|
|
42741
|
+
const DETAILS_MIN_WIDTH_PX = 350;
|
|
42742
|
+
const DETAILS_FR = 2;
|
|
42743
|
+
const CARDS_FR = 3;
|
|
42744
|
+
function DesktopLayout$1({
|
|
42745
|
+
resolved,
|
|
42746
|
+
selectedItems,
|
|
42747
|
+
availabilityByExternalId,
|
|
42748
|
+
openAccordionItemId,
|
|
42749
|
+
detailMode,
|
|
42750
|
+
forceUntuck,
|
|
42751
|
+
zoomed,
|
|
42752
|
+
frameUrls,
|
|
42753
|
+
onSelectItem,
|
|
42754
|
+
onRemoveItem,
|
|
42755
|
+
onOpenAccordionItem,
|
|
42756
|
+
onChangeDetailMode,
|
|
42757
|
+
onChangeSize,
|
|
42758
|
+
onAddToCart,
|
|
42759
|
+
onToggleUntuck,
|
|
42760
|
+
onToggleZoom,
|
|
42761
|
+
onSignOut
|
|
42762
|
+
}) {
|
|
42763
|
+
const hasSelection = selectedItems.length > 0;
|
|
42764
|
+
const hasTuckable = selectedItems.some((i) => i.styleCategory?.tuckable);
|
|
42765
|
+
const containerRef = reactExports.useRef(null);
|
|
42766
|
+
const [avatarWidth, setAvatarWidth] = reactExports.useState(AVATAR_MIN_WIDTH_PX);
|
|
42767
|
+
reactExports.useLayoutEffect(() => {
|
|
42768
|
+
const el = containerRef.current;
|
|
42769
|
+
if (!el) return;
|
|
42770
|
+
const observer = new ResizeObserver(() => {
|
|
42771
|
+
const availableHeightPx = el.clientHeight - CONTAINER_PADDING_PX * 2;
|
|
42772
|
+
if (availableHeightPx <= 0) return;
|
|
42773
|
+
const target = Math.floor(availableHeightPx * AVATAR_ASPECT_RATIO);
|
|
42774
|
+
setAvatarWidth(Math.min(AVATAR_MAX_WIDTH_PX, Math.max(AVATAR_MIN_WIDTH_PX, target)));
|
|
42775
|
+
});
|
|
42776
|
+
observer.observe(el);
|
|
42777
|
+
return () => observer.disconnect();
|
|
42778
|
+
}, []);
|
|
42779
|
+
const gridTemplateColumns = zoomed ? "1fr" : hasSelection ? `${avatarWidth}px minmax(${DETAILS_MIN_WIDTH_PX}px, ${DETAILS_FR}fr) ${CARDS_FR}fr` : `${avatarWidth}px 1fr`;
|
|
42780
|
+
const css2 = useCss((_theme) => ({
|
|
42781
|
+
container: {
|
|
42782
|
+
display: "grid",
|
|
42783
|
+
gap: "16px",
|
|
42784
|
+
width: "100%",
|
|
42785
|
+
height: "100%",
|
|
42786
|
+
padding: `${CONTAINER_PADDING_PX}px`,
|
|
42787
|
+
boxSizing: "border-box",
|
|
42788
|
+
overflow: "hidden"
|
|
42789
|
+
},
|
|
42790
|
+
avatarColumn: {
|
|
42791
|
+
minWidth: 0,
|
|
42792
|
+
minHeight: 0
|
|
42793
|
+
},
|
|
42794
|
+
detailColumn: {
|
|
42795
|
+
minWidth: 0,
|
|
42796
|
+
minHeight: 0,
|
|
42797
|
+
overflowY: "auto",
|
|
42798
|
+
padding: "0 8px"
|
|
42799
|
+
},
|
|
42800
|
+
railsColumn: {
|
|
42801
|
+
minWidth: 0,
|
|
42802
|
+
minHeight: 0,
|
|
42803
|
+
overflowY: "auto",
|
|
42804
|
+
display: "flex",
|
|
42805
|
+
flexDirection: "column",
|
|
42806
|
+
gap: "24px",
|
|
42807
|
+
padding: "0 8px"
|
|
42808
|
+
},
|
|
42809
|
+
railsHeader: {
|
|
42810
|
+
display: "flex",
|
|
42811
|
+
justifyContent: "flex-end",
|
|
42812
|
+
paddingBottom: "4px"
|
|
42813
|
+
},
|
|
42814
|
+
signOut: {
|
|
42815
|
+
fontSize: "12px",
|
|
42816
|
+
letterSpacing: "0.3px"
|
|
42817
|
+
}
|
|
42818
|
+
}));
|
|
42819
|
+
const controls = hasSelection ? /* @__PURE__ */ jsx$1(AvatarControls, { selectedItems, hasTuckable, forceUntuck, zoomed, onToggleUntuck, onToggleZoom, onRemoveItem }) : null;
|
|
42820
|
+
return /* @__PURE__ */ jsxs("div", { ref: containerRef, css: css2.container, style: {
|
|
42821
|
+
gridTemplateColumns
|
|
42822
|
+
}, children: [
|
|
42823
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.avatarColumn, children: /* @__PURE__ */ jsx$1(AvatarPane, { hasSelection, frameUrls, controls }) }),
|
|
42824
|
+
!zoomed && hasSelection ? /* @__PURE__ */ jsx$1("div", { css: css2.detailColumn, children: /* @__PURE__ */ jsx$1(DetailAccordion, { items: selectedItems, openItemExternalId: openAccordionItemId, platform: "desktop", detailMode, isMobileQuickRow: false, forceUntuck, onOpenItem: onOpenAccordionItem, onChangeDetailMode, onChangeSize, onAddToCart, onToggleUntuck }) }) : null,
|
|
42825
|
+
!zoomed ? /* @__PURE__ */ jsxs("div", { css: css2.railsColumn, children: [
|
|
42826
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.railsHeader, children: /* @__PURE__ */ jsx$1(LinkT, { variant: "underline", css: css2.signOut, t: "fitting_room.sign_out", onClick: onSignOut }) }),
|
|
42827
|
+
resolved.groups.map((group) => /* @__PURE__ */ jsx$1(CardRail, { group, availabilityByExternalId, onSelectItem, onRemoveItem, layout: "horizontal" }, group.group.name))
|
|
42828
|
+
] }) : null
|
|
42829
|
+
] });
|
|
42830
|
+
}
|
|
42831
|
+
function MobileLayout$1({
|
|
42832
|
+
mode,
|
|
42833
|
+
resolved,
|
|
42834
|
+
selectedItems,
|
|
42835
|
+
availabilityByExternalId,
|
|
42836
|
+
openAccordionItemId,
|
|
42837
|
+
detailMode,
|
|
42838
|
+
forceUntuck,
|
|
42839
|
+
frameUrls,
|
|
42840
|
+
sheetSnap,
|
|
42841
|
+
sheetTouchStart,
|
|
42842
|
+
onSelectItem,
|
|
42843
|
+
onRemoveItem,
|
|
42844
|
+
onTryItOn,
|
|
42845
|
+
onBackToBrowse,
|
|
42846
|
+
onOpenAccordionItem,
|
|
42847
|
+
onChangeDetailMode,
|
|
42848
|
+
onChangeSize,
|
|
42849
|
+
onAddToCart,
|
|
42850
|
+
onToggleUntuck
|
|
42851
|
+
}) {
|
|
42852
|
+
if (mode === "browse") {
|
|
42853
|
+
return /* @__PURE__ */ jsx$1(BrowseView, { resolved, availabilityByExternalId, selectedCount: selectedItems.length, onSelectItem, onRemoveItem, onTryItOn });
|
|
42854
|
+
}
|
|
42855
|
+
return /* @__PURE__ */ jsx$1(TryOnView, { selectedItems, openAccordionItemId, detailMode, forceUntuck, frameUrls, sheetSnap, sheetTouchStart, onBackToBrowse, onOpenAccordionItem, onChangeDetailMode, onChangeSize, onAddToCart, onToggleUntuck });
|
|
42856
|
+
}
|
|
42857
|
+
function BrowseView({
|
|
42858
|
+
resolved,
|
|
42859
|
+
availabilityByExternalId,
|
|
42860
|
+
selectedCount,
|
|
42861
|
+
onSelectItem,
|
|
42862
|
+
onRemoveItem,
|
|
42863
|
+
onTryItOn
|
|
42864
|
+
}) {
|
|
42865
|
+
const css2 = useCss((_theme) => ({
|
|
42866
|
+
container: {
|
|
42867
|
+
display: "flex",
|
|
42868
|
+
flexDirection: "column",
|
|
42869
|
+
height: "100%",
|
|
42870
|
+
width: "100%"
|
|
42871
|
+
},
|
|
42872
|
+
railsArea: {
|
|
42873
|
+
flex: 1,
|
|
42874
|
+
overflowY: "auto",
|
|
42875
|
+
padding: "16px",
|
|
42876
|
+
display: "flex",
|
|
42877
|
+
flexDirection: "column",
|
|
42878
|
+
gap: "24px"
|
|
42879
|
+
},
|
|
42880
|
+
bottomBar: {
|
|
42881
|
+
flex: "none",
|
|
42882
|
+
padding: "16px",
|
|
42883
|
+
borderTop: "1px solid rgba(0, 0, 0, 0.1)",
|
|
42884
|
+
backgroundColor: "#FFFFFF"
|
|
42885
|
+
}
|
|
42886
|
+
}));
|
|
42887
|
+
return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
|
|
42888
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.railsArea, children: resolved.groups.map((group) => /* @__PURE__ */ jsx$1(CardRail, { group, availabilityByExternalId, onSelectItem, onRemoveItem, layout: "grid" }, group.group.name)) }),
|
|
42889
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.bottomBar, children: /* @__PURE__ */ jsx$1(ButtonT, { variant: "brand", t: "fitting_room.try_it_on", onClick: onTryItOn, disabled: selectedCount === 0 }) })
|
|
42890
|
+
] });
|
|
42891
|
+
}
|
|
42892
|
+
function TryOnView({
|
|
42893
|
+
selectedItems,
|
|
42894
|
+
openAccordionItemId,
|
|
42895
|
+
detailMode,
|
|
42896
|
+
forceUntuck,
|
|
42897
|
+
frameUrls,
|
|
42898
|
+
sheetSnap,
|
|
42899
|
+
sheetTouchStart,
|
|
42900
|
+
onBackToBrowse,
|
|
42901
|
+
onOpenAccordionItem,
|
|
42902
|
+
onChangeDetailMode,
|
|
42903
|
+
onChangeSize,
|
|
42904
|
+
onAddToCart,
|
|
42905
|
+
onToggleUntuck
|
|
42906
|
+
}) {
|
|
42907
|
+
const innerRef = reactExports.useRef(null);
|
|
42908
|
+
const [sheetStyle, setSheetStyle] = reactExports.useState({});
|
|
42909
|
+
const isMobileQuickRow = sheetSnap === "expanded" && openAccordionItemId == null;
|
|
42910
|
+
reactExports.useEffect(() => {
|
|
42911
|
+
function refresh() {
|
|
42912
|
+
const el = innerRef.current;
|
|
42913
|
+
if (!el) return;
|
|
42914
|
+
const maxHeightPx = Number(window.getComputedStyle(el.parentElement).getPropertyValue("max-height").replace("px", ""));
|
|
42915
|
+
const heightPx = Math.min(el.clientHeight, maxHeightPx || el.clientHeight);
|
|
42916
|
+
setSheetStyle({
|
|
42917
|
+
height: `${heightPx}px`
|
|
42918
|
+
});
|
|
42919
|
+
}
|
|
42920
|
+
setSheetStyle({});
|
|
42921
|
+
const timeoutId = setTimeout(refresh, 50);
|
|
42922
|
+
return () => clearTimeout(timeoutId);
|
|
42923
|
+
}, [sheetSnap, openAccordionItemId, detailMode]);
|
|
42924
|
+
const css2 = useCss((_theme) => ({
|
|
42925
|
+
container: {
|
|
42926
|
+
width: "100%",
|
|
42927
|
+
height: "100%",
|
|
42928
|
+
position: "relative"
|
|
42929
|
+
},
|
|
42930
|
+
backButton: {
|
|
42931
|
+
position: "absolute",
|
|
42932
|
+
top: "12px",
|
|
42933
|
+
left: "10px",
|
|
42934
|
+
width: "30px",
|
|
42935
|
+
height: "30px",
|
|
42936
|
+
border: "none",
|
|
42937
|
+
borderRadius: "15px",
|
|
42938
|
+
backgroundColor: "rgba(255, 255, 255, 0.85)",
|
|
42939
|
+
display: "flex",
|
|
42940
|
+
alignItems: "center",
|
|
42941
|
+
justifyContent: "center",
|
|
42942
|
+
zIndex: 2
|
|
42943
|
+
},
|
|
42944
|
+
backArrow: {
|
|
42945
|
+
fontSize: "18px",
|
|
42946
|
+
lineHeight: "1"
|
|
42947
|
+
},
|
|
42948
|
+
sheetOuter: {
|
|
42949
|
+
position: "absolute",
|
|
42950
|
+
left: 0,
|
|
42951
|
+
right: 0,
|
|
42952
|
+
bottom: 0,
|
|
42953
|
+
maxHeight: "85vh",
|
|
42954
|
+
backgroundColor: "rgba(255, 255, 255, 0.95)",
|
|
42955
|
+
borderTopLeftRadius: "28px",
|
|
42956
|
+
borderTopRightRadius: "28px",
|
|
42957
|
+
borderTop: "1px solid rgba(0, 0, 0, 0.1)",
|
|
42958
|
+
transition: "height 0.4s",
|
|
42959
|
+
overflow: "hidden"
|
|
42960
|
+
},
|
|
42961
|
+
sheetInner: {
|
|
42962
|
+
width: "100%",
|
|
42963
|
+
padding: "12px 16px 16px 16px",
|
|
42964
|
+
display: "flex",
|
|
42965
|
+
flexDirection: "column",
|
|
42966
|
+
alignItems: "stretch",
|
|
42967
|
+
gap: "8px"
|
|
42968
|
+
},
|
|
42969
|
+
sheetHandleRow: {
|
|
42970
|
+
display: "flex",
|
|
42971
|
+
flexDirection: "column",
|
|
42972
|
+
alignItems: "center",
|
|
42973
|
+
paddingBottom: "8px"
|
|
42974
|
+
},
|
|
42975
|
+
sheetTitle: {
|
|
42976
|
+
fontSize: "12px",
|
|
42977
|
+
fontWeight: "600",
|
|
42978
|
+
textTransform: "uppercase",
|
|
42979
|
+
letterSpacing: "0.5px",
|
|
42980
|
+
marginTop: "8px"
|
|
42981
|
+
},
|
|
42982
|
+
sheetContent: {
|
|
42983
|
+
overflowY: "auto"
|
|
42984
|
+
}
|
|
42985
|
+
}));
|
|
42986
|
+
return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
|
|
42987
|
+
/* @__PURE__ */ jsx$1(AvatarPane, { hasSelection: selectedItems.length > 0, frameUrls }),
|
|
42988
|
+
/* @__PURE__ */ jsx$1(Button, { variant: "base", css: css2.backButton, onClick: onBackToBrowse, "aria-label": "Back to browse", children: /* @__PURE__ */ jsx$1("span", { css: css2.backArrow, children: "←" }) }),
|
|
42989
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.sheetOuter, style: sheetStyle, children: /* @__PURE__ */ jsxs("div", { ref: innerRef, css: css2.sheetInner, style: sheetStyle, children: [
|
|
42990
|
+
/* @__PURE__ */ jsxs("div", { css: css2.sheetHandleRow, onTouchStart: sheetTouchStart, children: [
|
|
42991
|
+
/* @__PURE__ */ jsx$1(SvgDragHandle, {}),
|
|
42992
|
+
/* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.sheetTitle, children: "RECOMMENDED SIZES" })
|
|
42993
|
+
] }),
|
|
42994
|
+
sheetSnap === "collapsed" ? null : /* @__PURE__ */ jsx$1("div", { css: css2.sheetContent, children: /* @__PURE__ */ jsx$1(DetailAccordion, { items: selectedItems, openItemExternalId: openAccordionItemId, platform: "mobile", detailMode, isMobileQuickRow, forceUntuck, onOpenItem: onOpenAccordionItem, onChangeDetailMode, onChangeSize, onAddToCart, onToggleUntuck }) })
|
|
42995
|
+
] }) })
|
|
42996
|
+
] });
|
|
42997
|
+
}
|
|
42998
|
+
const logger$a = getLogger("overlays/fitting-room/use-vto-requests");
|
|
42999
|
+
const NON_PRIORITY_REQUEST_DELAY_MS = 500;
|
|
43000
|
+
function outfitKey(items) {
|
|
43001
|
+
return items.map((i) => `${i.colorway_size_asset_id}:${i.untucked ? 1 : 0}`).sort().join("|");
|
|
43002
|
+
}
|
|
43003
|
+
function useVtoRequests() {
|
|
43004
|
+
const [framesByKey, setFramesByKey] = reactExports.useState({});
|
|
43005
|
+
const requestedKeysRef = reactExports.useRef(/* @__PURE__ */ new Set());
|
|
43006
|
+
const lastPriorityTimeRef = reactExports.useRef(null);
|
|
43007
|
+
const [lastError, setLastError] = reactExports.useState(null);
|
|
43008
|
+
const clearError = reactExports.useCallback(() => setLastError(null), []);
|
|
43009
|
+
const request = reactExports.useCallback((items, priority) => {
|
|
43010
|
+
if (items.length === 0) return;
|
|
43011
|
+
const key = outfitKey(items);
|
|
43012
|
+
if (requestedKeysRef.current.has(key)) return;
|
|
43013
|
+
const exec = () => {
|
|
43014
|
+
requestedKeysRef.current.add(key);
|
|
43015
|
+
logger$a.logDebug("Requesting VTO composition", {
|
|
43016
|
+
key,
|
|
43017
|
+
items,
|
|
43018
|
+
priority
|
|
43019
|
+
});
|
|
43020
|
+
requestVto(items).then((resp) => {
|
|
43021
|
+
logger$a.logDebug("VTO frames ready", {
|
|
43022
|
+
key,
|
|
43023
|
+
count: resp.frames.length
|
|
43024
|
+
});
|
|
43025
|
+
setFramesByKey((prev2) => ({
|
|
43026
|
+
...prev2,
|
|
43027
|
+
[key]: resp.frames
|
|
43028
|
+
}));
|
|
43029
|
+
}).catch((error) => {
|
|
43030
|
+
logger$a.logError("VTO request failed", {
|
|
43031
|
+
error,
|
|
43032
|
+
items,
|
|
43033
|
+
key
|
|
43034
|
+
});
|
|
43035
|
+
requestedKeysRef.current.delete(key);
|
|
43036
|
+
setLastError(error instanceof Error ? error : new Error(String(error)));
|
|
43037
|
+
});
|
|
43038
|
+
};
|
|
43039
|
+
if (priority) {
|
|
43040
|
+
lastPriorityTimeRef.current = Date.now();
|
|
43041
|
+
exec();
|
|
43042
|
+
return;
|
|
43043
|
+
}
|
|
43044
|
+
const last = lastPriorityTimeRef.current;
|
|
43045
|
+
let delay = 0;
|
|
43046
|
+
if (last) {
|
|
43047
|
+
const now = Date.now();
|
|
43048
|
+
const minNext = last + NON_PRIORITY_REQUEST_DELAY_MS;
|
|
43049
|
+
if (now < minNext) delay = minNext - now;
|
|
43050
|
+
}
|
|
43051
|
+
if (delay > 0) {
|
|
43052
|
+
setTimeout(exec, delay);
|
|
43053
|
+
} else {
|
|
43054
|
+
exec();
|
|
43055
|
+
}
|
|
43056
|
+
}, []);
|
|
43057
|
+
const framesForOutfit = reactExports.useCallback((items) => {
|
|
43058
|
+
if (items.length === 0) return null;
|
|
43059
|
+
const key = outfitKey(items);
|
|
43060
|
+
const frames = framesByKey[key];
|
|
43061
|
+
if (!frames || frames.length === 0) return null;
|
|
43062
|
+
const baseUrl2 = getStaticData().config.frames.baseUrl;
|
|
43063
|
+
return frames.map((u) => applyFrameBaseUrl(u, baseUrl2));
|
|
43064
|
+
}, [framesByKey]);
|
|
43065
|
+
return {
|
|
43066
|
+
request,
|
|
43067
|
+
framesForOutfit,
|
|
43068
|
+
lastError,
|
|
43069
|
+
clearError
|
|
43070
|
+
};
|
|
43071
|
+
}
|
|
43072
|
+
function toWireItems(items) {
|
|
43073
|
+
return items.map((i) => ({
|
|
43074
|
+
colorway_size_asset_id: i.colorwaySizeAssetId,
|
|
43075
|
+
...i.untucked ? {
|
|
43076
|
+
untucked: true
|
|
43077
|
+
} : {}
|
|
43078
|
+
}));
|
|
43079
|
+
}
|
|
43080
|
+
const logger$9 = getLogger("overlays/fitting-room");
|
|
43081
|
+
function measureTopOffset() {
|
|
43082
|
+
const {
|
|
43083
|
+
getOverlayTopOffset
|
|
43084
|
+
} = getStaticData();
|
|
43085
|
+
if (!getOverlayTopOffset) return 0;
|
|
43086
|
+
try {
|
|
43087
|
+
const offset = getOverlayTopOffset();
|
|
43088
|
+
return Number.isFinite(offset) && offset > 0 ? offset : 0;
|
|
43089
|
+
} catch {
|
|
43090
|
+
return 0;
|
|
43091
|
+
}
|
|
43092
|
+
}
|
|
43093
|
+
function FittingRoomOverlay() {
|
|
43094
|
+
const deviceLayout = useMainStore((state) => state.deviceLayout);
|
|
43095
|
+
const userIsLoggedIn = useMainStore((state) => state.userIsLoggedIn);
|
|
43096
|
+
const userHasAvatar = useMainStore((state) => state.userHasAvatar);
|
|
43097
|
+
const userProfile = useMainStore((state) => state.userProfile);
|
|
43098
|
+
const closeOverlay = useMainStore((state) => state.closeOverlay);
|
|
43099
|
+
const openOverlay = useMainStore((state) => state.openOverlay);
|
|
43100
|
+
const updateFittingRoomItem = useMainStore((state) => state.updateFittingRoomItem);
|
|
43101
|
+
const resolved = useResolvedFittingRoom();
|
|
43102
|
+
const [topOffset, setTopOffset] = reactExports.useState(0);
|
|
43103
|
+
const [selectedExternalIds, setSelectedExternalIds] = reactExports.useState(() => /* @__PURE__ */ new Set());
|
|
43104
|
+
const [openAccordionItemId, setOpenAccordionItemId] = reactExports.useState(null);
|
|
43105
|
+
const [detailMode, setDetailMode] = reactExports.useState("compact");
|
|
43106
|
+
const [forceUntuck, setForceUntuck] = reactExports.useState(false);
|
|
43107
|
+
const [lastAddedExternalId, setLastAddedExternalId] = reactExports.useState(null);
|
|
43108
|
+
const [mobileMode, setMobileMode] = reactExports.useState("browse");
|
|
43109
|
+
const [zoomed, setZoomed] = reactExports.useState(false);
|
|
43110
|
+
const {
|
|
43111
|
+
snap: sheetSnap,
|
|
43112
|
+
setSnap: setSheetSnap,
|
|
43113
|
+
handleTouchStart: sheetTouchStart
|
|
43114
|
+
} = useMobileSheetSnap("collapsed");
|
|
43115
|
+
const isMobileLayout = deviceLayout === DeviceLayout.MOBILE_PORTRAIT || deviceLayout === DeviceLayout.TABLET_PORTRAIT;
|
|
43116
|
+
const {
|
|
43117
|
+
request: requestVtoComposition,
|
|
43118
|
+
framesForOutfit,
|
|
43119
|
+
lastError: vtoError,
|
|
43120
|
+
clearError: clearVtoError
|
|
43121
|
+
} = useVtoRequests();
|
|
43122
|
+
reactExports.useEffect(() => {
|
|
43123
|
+
const savedScrollY = window.scrollY;
|
|
43124
|
+
if (savedScrollY > 0) window.scrollTo(0, 0);
|
|
43125
|
+
setTopOffset(measureTopOffset());
|
|
43126
|
+
const onResize = () => setTopOffset(measureTopOffset());
|
|
43127
|
+
window.addEventListener("resize", onResize);
|
|
43128
|
+
return () => {
|
|
43129
|
+
window.removeEventListener("resize", onResize);
|
|
43130
|
+
if (savedScrollY > 0) window.scrollTo(0, savedScrollY);
|
|
43131
|
+
};
|
|
43132
|
+
}, []);
|
|
43133
|
+
const selectedItems = reactExports.useMemo(() => resolved.items.filter((item) => selectedExternalIds.has(item.externalId)), [resolved.items, selectedExternalIds]);
|
|
43134
|
+
const availabilityByExternalId = reactExports.useMemo(() => {
|
|
43135
|
+
const out = {};
|
|
43136
|
+
for (const item of resolved.items) {
|
|
43137
|
+
out[item.externalId] = computeAvailability(item, selectedExternalIds, resolved);
|
|
43138
|
+
}
|
|
43139
|
+
return out;
|
|
43140
|
+
}, [resolved, selectedExternalIds]);
|
|
43141
|
+
const ensureSizeForItem = reactExports.useCallback((item) => {
|
|
43142
|
+
if (item.storage.colorwaySizeAssetId != null) return;
|
|
43143
|
+
const productData = buildVtoProductDataFromResolved(item);
|
|
43144
|
+
if (!productData) return;
|
|
43145
|
+
const csa = findRecommendedColorSize(productData, item.storage.color);
|
|
43146
|
+
if (!csa) return;
|
|
43147
|
+
const sizeRec = item.loadedProduct?.sizeFitRecommendation;
|
|
43148
|
+
const sizeLabel = sizeRec ? getSizeLabelFromSize(sizeRec.recommended_size) : productData.recommendedSizeLabel;
|
|
43149
|
+
updateFittingRoomItem(item.externalId, {
|
|
43150
|
+
colorwaySizeAssetId: csa.colorwaySizeAssetId,
|
|
43151
|
+
size: sizeLabel,
|
|
43152
|
+
color: csa.colorLabel
|
|
43153
|
+
});
|
|
43154
|
+
logger$9.logDebug("Auto-picked recommended size", {
|
|
43155
|
+
externalId: item.externalId,
|
|
43156
|
+
sizeLabel,
|
|
43157
|
+
csaId: csa.colorwaySizeAssetId
|
|
43158
|
+
});
|
|
43159
|
+
}, [updateFittingRoomItem]);
|
|
43160
|
+
const handleSelectItem = reactExports.useCallback((externalId) => {
|
|
43161
|
+
const item = resolved.items.find((i) => i.externalId === externalId);
|
|
43162
|
+
if (!item) return;
|
|
43163
|
+
const isSelected = selectedExternalIds.has(externalId);
|
|
43164
|
+
const nextSelected = new Set(selectedExternalIds);
|
|
43165
|
+
if (isSelected) {
|
|
43166
|
+
nextSelected.delete(externalId);
|
|
43167
|
+
if (openAccordionItemId === externalId) setOpenAccordionItemId(null);
|
|
43168
|
+
} else {
|
|
43169
|
+
nextSelected.add(externalId);
|
|
43170
|
+
ensureSizeForItem(item);
|
|
43171
|
+
setLastAddedExternalId(externalId);
|
|
43172
|
+
if (!isMobileLayout) {
|
|
43173
|
+
setOpenAccordionItemId(externalId);
|
|
43174
|
+
setDetailMode("compact");
|
|
43175
|
+
}
|
|
43176
|
+
}
|
|
43177
|
+
setSelectedExternalIds(nextSelected);
|
|
43178
|
+
}, [resolved, selectedExternalIds, openAccordionItemId, isMobileLayout, ensureSizeForItem]);
|
|
43179
|
+
const handleChangeSize = reactExports.useCallback((externalId, sizeLabel) => {
|
|
43180
|
+
const item = resolved.items.find((i) => i.externalId === externalId);
|
|
43181
|
+
if (!item) return;
|
|
43182
|
+
const productData = buildVtoProductDataFromResolved(item);
|
|
43183
|
+
if (!productData) return;
|
|
43184
|
+
const csa = findCsaByLabel(productData, sizeLabel, item.storage.color);
|
|
43185
|
+
if (!csa) return;
|
|
43186
|
+
updateFittingRoomItem(externalId, {
|
|
43187
|
+
colorwaySizeAssetId: csa.colorwaySizeAssetId,
|
|
43188
|
+
size: sizeLabel,
|
|
43189
|
+
color: csa.colorLabel
|
|
43190
|
+
});
|
|
43191
|
+
}, [resolved.items, updateFittingRoomItem]);
|
|
43192
|
+
const handleAddToCart = reactExports.useCallback(async (externalId) => {
|
|
43193
|
+
const {
|
|
43194
|
+
addToCart
|
|
43195
|
+
} = getStaticData();
|
|
43196
|
+
if (!addToCart) {
|
|
43197
|
+
logger$9.logWarn("No addToCart callback configured; skipping", {
|
|
43198
|
+
externalId
|
|
43199
|
+
});
|
|
43200
|
+
return;
|
|
43201
|
+
}
|
|
43202
|
+
const item = resolved.items.find((i) => i.externalId === externalId);
|
|
43203
|
+
if (!item || !item.storage.size || !item.storage.color) {
|
|
43204
|
+
logger$9.logWarn("Cannot add to cart: missing size or color", {
|
|
43205
|
+
externalId,
|
|
43206
|
+
size: item?.storage.size,
|
|
43207
|
+
color: item?.storage.color
|
|
43208
|
+
});
|
|
43209
|
+
return;
|
|
43210
|
+
}
|
|
43211
|
+
try {
|
|
43212
|
+
await addToCart(externalId, {
|
|
43213
|
+
size: item.storage.size,
|
|
43214
|
+
color: item.storage.color
|
|
43215
|
+
});
|
|
43216
|
+
closeOverlay();
|
|
43217
|
+
} catch (error) {
|
|
43218
|
+
logger$9.logError("addToCart failed", {
|
|
43219
|
+
error,
|
|
43220
|
+
externalId
|
|
43221
|
+
});
|
|
43222
|
+
}
|
|
43223
|
+
}, [resolved.items, closeOverlay]);
|
|
43224
|
+
const handleToggleUntuck = reactExports.useCallback(() => {
|
|
43225
|
+
setForceUntuck((prev2) => !prev2);
|
|
43226
|
+
}, []);
|
|
43227
|
+
const handleToggleZoom = reactExports.useCallback(() => {
|
|
43228
|
+
setZoomed((prev2) => !prev2);
|
|
43229
|
+
}, []);
|
|
43230
|
+
const handleRemoveItem = reactExports.useCallback((externalId) => {
|
|
43231
|
+
setSelectedExternalIds((prev2) => {
|
|
43232
|
+
if (!prev2.has(externalId)) return prev2;
|
|
43233
|
+
const next2 = new Set(prev2);
|
|
43234
|
+
next2.delete(externalId);
|
|
43235
|
+
return next2;
|
|
43236
|
+
});
|
|
43237
|
+
if (openAccordionItemId === externalId) setOpenAccordionItemId(null);
|
|
43238
|
+
}, [openAccordionItemId]);
|
|
43239
|
+
const handleTryItOn = reactExports.useCallback(() => {
|
|
43240
|
+
setMobileMode("try-on");
|
|
43241
|
+
setSheetSnap("collapsed");
|
|
43242
|
+
}, [setSheetSnap]);
|
|
43243
|
+
const handleBackToBrowse = reactExports.useCallback(() => {
|
|
43244
|
+
setMobileMode("browse");
|
|
43245
|
+
}, []);
|
|
43246
|
+
reactExports.useEffect(() => {
|
|
43247
|
+
if (isMobileLayout) return;
|
|
43248
|
+
if (openAccordionItemId && selectedExternalIds.has(openAccordionItemId)) return;
|
|
43249
|
+
if (selectedItems.length === 0) {
|
|
43250
|
+
if (openAccordionItemId !== null) setOpenAccordionItemId(null);
|
|
43251
|
+
return;
|
|
43252
|
+
}
|
|
43253
|
+
let mostRecent = null;
|
|
43254
|
+
for (const item of selectedItems) {
|
|
43255
|
+
if (!mostRecent || item.storage.addedAt > mostRecent.storage.addedAt) {
|
|
43256
|
+
mostRecent = item;
|
|
43257
|
+
}
|
|
43258
|
+
}
|
|
43259
|
+
if (mostRecent) setOpenAccordionItemId(mostRecent.externalId);
|
|
43260
|
+
}, [isMobileLayout, openAccordionItemId, selectedExternalIds, selectedItems]);
|
|
43261
|
+
const outfit = reactExports.useMemo(() => buildOutfit(selectedExternalIds, resolved, forceUntuck, lastAddedExternalId), [selectedExternalIds, resolved, forceUntuck, lastAddedExternalId]);
|
|
43262
|
+
reactExports.useEffect(() => {
|
|
43263
|
+
if (!userIsLoggedIn || !userHasAvatar) return;
|
|
43264
|
+
if (outfit.items.length === 0) return;
|
|
43265
|
+
requestVtoComposition(toWireItems(outfit.items), true);
|
|
43266
|
+
if (getStaticData().config.features.vtoPrefetch) {
|
|
43267
|
+
for (const alt of outfit.alternates) {
|
|
43268
|
+
requestVtoComposition(toWireItems(alt), false);
|
|
43269
|
+
}
|
|
43270
|
+
}
|
|
43271
|
+
}, [userIsLoggedIn, userHasAvatar, outfit, requestVtoComposition]);
|
|
43272
|
+
const frameUrls = reactExports.useMemo(() => {
|
|
43273
|
+
if (outfit.items.length === 0) {
|
|
43274
|
+
const bareFrames = userProfile?.avatar_frames;
|
|
43275
|
+
if (!bareFrames || bareFrames.length === 0) return null;
|
|
43276
|
+
const baseUrl2 = getStaticData().config.frames.baseUrl;
|
|
43277
|
+
return bareFrames.map((u) => applyFrameBaseUrl(u, baseUrl2));
|
|
43278
|
+
}
|
|
43279
|
+
return framesForOutfit(toWireItems(outfit.items));
|
|
43280
|
+
}, [outfit, framesForOutfit, userProfile]);
|
|
43281
|
+
reactExports.useEffect(() => {
|
|
43282
|
+
if (!userIsLoggedIn) {
|
|
43283
|
+
openOverlay(OverlayName.LANDING, {
|
|
43284
|
+
returnToOverlay: OverlayName.FITTING_ROOM
|
|
43285
|
+
});
|
|
43286
|
+
return;
|
|
43287
|
+
}
|
|
43288
|
+
if (userHasAvatar === false) {
|
|
43289
|
+
openOverlay(OverlayName.GET_APP, {
|
|
43290
|
+
returnToOverlay: OverlayName.FITTING_ROOM,
|
|
43291
|
+
noAvatar: true
|
|
43292
|
+
});
|
|
43293
|
+
}
|
|
43294
|
+
}, [userIsLoggedIn, userHasAvatar, openOverlay]);
|
|
43295
|
+
const handleSignOut = reactExports.useCallback(() => {
|
|
43296
|
+
closeOverlay();
|
|
43297
|
+
const authManager2 = getAuthManager();
|
|
43298
|
+
authManager2.logout().catch((error) => {
|
|
43299
|
+
logger$9.logError("Error during logout", {
|
|
43300
|
+
error
|
|
43301
|
+
});
|
|
43302
|
+
});
|
|
43303
|
+
}, [closeOverlay]);
|
|
43304
|
+
const handleShopNow = reactExports.useCallback(() => {
|
|
43305
|
+
closeOverlay();
|
|
43306
|
+
}, [closeOverlay]);
|
|
43307
|
+
const css2 = useCss((theme) => ({
|
|
43308
|
+
body: {
|
|
43309
|
+
width: "100%",
|
|
43310
|
+
height: "100%",
|
|
43311
|
+
overflow: "hidden",
|
|
43312
|
+
boxSizing: "border-box",
|
|
43313
|
+
backgroundColor: "#FFFFFF"
|
|
43314
|
+
},
|
|
43315
|
+
empty: {
|
|
43316
|
+
display: "flex",
|
|
43317
|
+
width: "100%",
|
|
43318
|
+
height: "100%",
|
|
43319
|
+
alignItems: "center",
|
|
43320
|
+
justifyContent: "center",
|
|
43321
|
+
padding: "32px"
|
|
43322
|
+
},
|
|
43323
|
+
emptyCard: {
|
|
43324
|
+
display: "flex",
|
|
43325
|
+
flexDirection: "column",
|
|
43326
|
+
alignItems: "center",
|
|
43327
|
+
gap: "16px",
|
|
43328
|
+
maxWidth: "420px",
|
|
43329
|
+
textAlign: "center"
|
|
43330
|
+
},
|
|
43331
|
+
emptyTitle: {
|
|
43332
|
+
fontSize: "24px"
|
|
43333
|
+
},
|
|
43334
|
+
emptyTagline: {
|
|
43335
|
+
fontSize: "14px",
|
|
43336
|
+
color: theme.color_fg_text
|
|
43337
|
+
},
|
|
43338
|
+
emptyShopNow: {
|
|
43339
|
+
width: "min(100%, 240px)",
|
|
43340
|
+
marginTop: "8px"
|
|
43341
|
+
},
|
|
43342
|
+
emptySignOut: {
|
|
43343
|
+
fontSize: "13px",
|
|
43344
|
+
textDecoration: "underline",
|
|
43345
|
+
marginTop: "8px"
|
|
43346
|
+
},
|
|
43347
|
+
snackbar: {
|
|
43348
|
+
position: "absolute",
|
|
43349
|
+
left: "50%",
|
|
43350
|
+
bottom: "24px",
|
|
43351
|
+
transform: "translateX(-50%)",
|
|
43352
|
+
padding: "12px 20px",
|
|
43353
|
+
borderRadius: "24px",
|
|
43354
|
+
backgroundColor: theme.color_fg_text,
|
|
43355
|
+
color: "#FFFFFF",
|
|
43356
|
+
fontSize: "13px",
|
|
43357
|
+
display: "flex",
|
|
43358
|
+
alignItems: "center",
|
|
43359
|
+
gap: "12px",
|
|
43360
|
+
zIndex: 10,
|
|
43361
|
+
maxWidth: "calc(100% - 32px)"
|
|
43362
|
+
},
|
|
43363
|
+
snackbarDismiss: {
|
|
43364
|
+
background: "none",
|
|
43365
|
+
border: "none",
|
|
43366
|
+
color: "#FFFFFF",
|
|
43367
|
+
fontSize: "16px",
|
|
43368
|
+
cursor: "pointer"
|
|
43369
|
+
}
|
|
43370
|
+
}));
|
|
43371
|
+
const overlayStyle = {
|
|
43372
|
+
top: `${topOffset}px`,
|
|
43373
|
+
left: 0,
|
|
43374
|
+
right: 0,
|
|
43375
|
+
bottom: 0,
|
|
43376
|
+
backgroundColor: "transparent"
|
|
43377
|
+
};
|
|
43378
|
+
const contentStyle = {
|
|
43379
|
+
position: "absolute",
|
|
43380
|
+
inset: 0,
|
|
43381
|
+
margin: 0,
|
|
43382
|
+
padding: 0,
|
|
43383
|
+
border: "none",
|
|
43384
|
+
borderRadius: 0,
|
|
43385
|
+
backgroundColor: "#FFFFFF",
|
|
43386
|
+
overflow: "hidden"
|
|
43387
|
+
};
|
|
43388
|
+
const authResolved = userIsLoggedIn && userHasAvatar === true;
|
|
43389
|
+
if (!authResolved) {
|
|
43390
|
+
return /* @__PURE__ */ jsx$1(ModalFrame, { isOpen: true, onRequestClose: closeOverlay, overlayStyle, contentStyle, children: /* @__PURE__ */ jsx$1(Loading, {}) });
|
|
43391
|
+
}
|
|
43392
|
+
return /* @__PURE__ */ jsx$1(ModalFrame, { isOpen: true, onRequestClose: closeOverlay, overlayStyle, contentStyle, children: /* @__PURE__ */ jsxs("div", { css: css2.body, children: [
|
|
43393
|
+
resolved.items.length === 0 ? /* @__PURE__ */ jsx$1("div", { css: css2.empty, children: /* @__PURE__ */ jsxs("div", { css: css2.emptyCard, children: [
|
|
43394
|
+
/* @__PURE__ */ jsx$1(TextT, { variant: "brand", css: css2.emptyTitle, t: "fitting_room.title" }),
|
|
43395
|
+
/* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.emptyTagline, t: "landing.description" }),
|
|
43396
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.emptyShopNow, children: /* @__PURE__ */ jsx$1(ButtonT, { variant: "primary", t: "fitting_room.shop_now", onClick: handleShopNow }) }),
|
|
43397
|
+
userIsLoggedIn ? /* @__PURE__ */ jsx$1(LinkT, { variant: "underline", css: css2.emptySignOut, t: "fitting_room.sign_out", onClick: handleSignOut }) : null
|
|
43398
|
+
] }) }) : isMobileLayout ? /* @__PURE__ */ jsx$1(MobileLayout$1, { mode: mobileMode, resolved, selectedItems, availabilityByExternalId, openAccordionItemId, detailMode, forceUntuck, frameUrls, sheetSnap, sheetTouchStart, onSelectItem: handleSelectItem, onRemoveItem: handleRemoveItem, onTryItOn: handleTryItOn, onBackToBrowse: handleBackToBrowse, onOpenAccordionItem: setOpenAccordionItemId, onChangeDetailMode: setDetailMode, onChangeSize: handleChangeSize, onAddToCart: handleAddToCart, onToggleUntuck: handleToggleUntuck }) : /* @__PURE__ */ jsx$1(DesktopLayout$1, { resolved, selectedItems, availabilityByExternalId, openAccordionItemId, detailMode, forceUntuck, zoomed, frameUrls, onSelectItem: handleSelectItem, onRemoveItem: handleRemoveItem, onOpenAccordionItem: setOpenAccordionItemId, onChangeDetailMode: setDetailMode, onChangeSize: handleChangeSize, onAddToCart: handleAddToCart, onToggleUntuck: handleToggleUntuck, onToggleZoom: handleToggleZoom, onSignOut: handleSignOut }),
|
|
43399
|
+
vtoError ? /* @__PURE__ */ jsxs("div", { css: css2.snackbar, children: [
|
|
43400
|
+
/* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "fitting_room.vto_error" }),
|
|
43401
|
+
/* @__PURE__ */ jsx$1("button", { css: css2.snackbarDismiss, onClick: clearVtoError, "aria-label": "Dismiss", children: "×" })
|
|
43402
|
+
] }) : null
|
|
43403
|
+
] }) });
|
|
43404
|
+
}
|
|
43405
|
+
const CONTACT_US_LINK = "mailto:info@thefittingroom.tech?subject=Forgot%20Password%20Assistance";
|
|
43406
|
+
const logger$8 = getLogger("forgot-password");
|
|
43407
|
+
function ForgotPasswordOverlay({
|
|
43408
|
+
returnToOverlay
|
|
43409
|
+
}) {
|
|
43410
|
+
const {
|
|
43411
|
+
t
|
|
43412
|
+
} = useTranslation();
|
|
43413
|
+
const closeOverlay = useMainStore((state) => state.closeOverlay);
|
|
43414
|
+
const openOverlay = useMainStore((state) => state.openOverlay);
|
|
43415
|
+
const emailInputRef = reactExports.useRef(null);
|
|
43416
|
+
const [emailError, setEmailError] = reactExports.useState(null);
|
|
43417
|
+
const [linkSent, setLinkSent] = reactExports.useState(false);
|
|
43418
|
+
const css2 = useCss((theme) => ({
|
|
43419
|
+
titleText: {
|
|
43420
|
+
fontSize: "20px"
|
|
43421
|
+
},
|
|
43422
|
+
form: {
|
|
43423
|
+
width: "100%",
|
|
43424
|
+
display: "flex",
|
|
43425
|
+
flexDirection: "column",
|
|
43426
|
+
gap: "0"
|
|
43427
|
+
},
|
|
43428
|
+
input: {
|
|
43429
|
+
width: "100%",
|
|
43430
|
+
padding: "12px 16px",
|
|
43431
|
+
border: "1px solid #767676",
|
|
43432
|
+
borderRadius: "8px",
|
|
43433
|
+
fontSize: "16px"
|
|
43434
|
+
},
|
|
43435
|
+
inputError: {
|
|
43436
|
+
border: `1px solid ${theme.color_danger}`
|
|
43437
|
+
},
|
|
43438
|
+
descriptionContainer: {
|
|
43439
|
+
marginTop: "48px",
|
|
43440
|
+
textAlign: "center"
|
|
43441
|
+
},
|
|
43442
|
+
linkSentContainer: {
|
|
43443
|
+
marginTop: "48px",
|
|
43444
|
+
height: "48px",
|
|
43445
|
+
padding: "8px 16px",
|
|
43446
|
+
boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)"
|
|
43447
|
+
},
|
|
43448
|
+
linkSentText: {
|
|
43449
|
+
color: theme.color_tfr_800
|
|
43450
|
+
},
|
|
43451
|
+
emailContainer: {
|
|
43452
|
+
marginTop: "48px"
|
|
43453
|
+
},
|
|
43454
|
+
emailErrorContainer: {
|
|
43455
|
+
marginTop: "4px",
|
|
43456
|
+
height: "18px"
|
|
43457
|
+
},
|
|
43458
|
+
submitButtonContainer: {
|
|
43459
|
+
marginTop: "64px"
|
|
43460
|
+
},
|
|
43461
|
+
contactContainer: {
|
|
43462
|
+
marginTop: "32px"
|
|
43463
|
+
}
|
|
43464
|
+
}));
|
|
43465
|
+
const handleSubmit = reactExports.useCallback((event) => {
|
|
43466
|
+
async function resetUserPassword(email2) {
|
|
43467
|
+
try {
|
|
43468
|
+
const authManager2 = getAuthManager();
|
|
43469
|
+
await authManager2.sendPasswordResetEmail(email2);
|
|
43470
|
+
setLinkSent(true);
|
|
43471
|
+
} catch (error) {
|
|
43472
|
+
logger$8.logError("Error sending password reset email:", {
|
|
43473
|
+
error
|
|
43474
|
+
});
|
|
43475
|
+
}
|
|
43476
|
+
}
|
|
43477
|
+
event.preventDefault();
|
|
43478
|
+
const formEl = event.target;
|
|
43479
|
+
const emailEl = formEl.elements.namedItem("email");
|
|
43480
|
+
let emailError2 = null;
|
|
43481
|
+
if (!emailEl.validity.valid) {
|
|
43482
|
+
emailError2 = t("sign-in.invalid_email");
|
|
43483
|
+
}
|
|
43484
|
+
setEmailError(emailError2);
|
|
43485
|
+
if (emailError2) {
|
|
43486
|
+
emailEl.focus();
|
|
43487
|
+
return;
|
|
43488
|
+
}
|
|
43489
|
+
const email = emailEl.value;
|
|
43490
|
+
resetUserPassword(email);
|
|
43491
|
+
}, [t]);
|
|
43492
|
+
const handleBackToSignInClick = reactExports.useCallback(() => {
|
|
43493
|
+
openOverlay(OverlayName.SIGN_IN, {
|
|
43494
|
+
returnToOverlay
|
|
43495
|
+
});
|
|
43496
|
+
}, [returnToOverlay, openOverlay]);
|
|
43497
|
+
const handleContactUsClick = reactExports.useCallback(() => {
|
|
43498
|
+
window.open(CONTACT_US_LINK, "_blank");
|
|
43499
|
+
}, []);
|
|
43500
|
+
const titleNode = /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.titleText, t: "forgot-password.title" });
|
|
43501
|
+
let descriptionNode;
|
|
43502
|
+
if (linkSent) {
|
|
43503
|
+
descriptionNode = /* @__PURE__ */ jsx$1("div", { css: css2.linkSentContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.linkSentText, t: "forgot-password.link_sent" }) });
|
|
43504
|
+
} else {
|
|
43505
|
+
descriptionNode = /* @__PURE__ */ jsx$1("div", { css: css2.descriptionContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "forgot-password.description" }) });
|
|
43506
|
+
}
|
|
43507
|
+
return /* @__PURE__ */ jsx$1(ContentModal, { onRequestClose: closeOverlay, title: titleNode, onBackClick: handleBackToSignInClick, children: /* @__PURE__ */ jsxs("form", { css: css2.form, onSubmit: handleSubmit, children: [
|
|
43508
|
+
descriptionNode,
|
|
43509
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.emailContainer, children: /* @__PURE__ */ jsx$1("input", { name: "email", type: "email", required: true, placeholder: t("sign-in.email"), ref: emailInputRef, css: [css2.input, emailError ? css2.inputError : null, "", ""] }) }),
|
|
43510
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.emailErrorContainer, children: emailError && /* @__PURE__ */ jsx$1(Text, { variant: "error", children: emailError }) }),
|
|
43511
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.submitButtonContainer, children: /* @__PURE__ */ jsx$1(ButtonT, { type: "submit", variant: "primary", t: "forgot-password.send_link" }) }),
|
|
43512
|
+
/* @__PURE__ */ jsxs("div", { css: css2.contactContainer, children: [
|
|
43513
|
+
/* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "forgot-password.need_help" }),
|
|
43514
|
+
" ",
|
|
43515
|
+
/* @__PURE__ */ jsx$1(LinkT, { variant: "semibold", t: "forgot-password.contact_us", onClick: handleContactUsClick })
|
|
43516
|
+
] })
|
|
43517
|
+
] }) });
|
|
43518
|
+
}
|
|
43519
|
+
function PoweredByFooter() {
|
|
43520
|
+
const css2 = useCss((_theme) => ({
|
|
41411
43521
|
footer: {
|
|
41412
43522
|
position: "absolute",
|
|
41413
43523
|
bottom: "16px",
|
|
@@ -41578,7 +43688,7 @@ function TfrTitle() {
|
|
|
41578
43688
|
}));
|
|
41579
43689
|
return /* @__PURE__ */ jsx$1("div", { css: css2.container, children: /* @__PURE__ */ jsx$1(SvgTfrName, { css: css2.nameIcon }) });
|
|
41580
43690
|
}
|
|
41581
|
-
const logger$
|
|
43691
|
+
const logger$7 = getLogger("sign-in");
|
|
41582
43692
|
function SignInOverlay({
|
|
41583
43693
|
returnToOverlay
|
|
41584
43694
|
}) {
|
|
@@ -41652,7 +43762,7 @@ function SignInOverlay({
|
|
|
41652
43762
|
closeOverlay();
|
|
41653
43763
|
}
|
|
41654
43764
|
} catch (error) {
|
|
41655
|
-
logger$
|
|
43765
|
+
logger$7.logError("Login failed:", {
|
|
41656
43766
|
error
|
|
41657
43767
|
});
|
|
41658
43768
|
setEmailError(" ");
|
|
@@ -41990,215 +44100,34 @@ function FitChart({
|
|
|
41990
44100
|
/* @__PURE__ */ jsx$1("div", { css: css2.scaleSegment, children: /* @__PURE__ */ jsx$1("div", { css: css2.scaleCategoryLabelLeft, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.scaleCategoryLabelPoorFitText, t: "fit-chart.fit.poor_fit" }) }) }),
|
|
41991
44101
|
/* @__PURE__ */ jsx$1("div", { css: css2.scaleSegment, children: /* @__PURE__ */ jsx$1("div", { css: css2.scaleCategoryLabelCenter, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.scaleCategoryLabelGoodFitText, t: "fit-chart.fit.acceptable_fit" }) }) }),
|
|
41992
44102
|
/* @__PURE__ */ jsx$1("div", { css: css2.scaleSegment, children: /* @__PURE__ */ jsx$1("div", { css: css2.scaleCategoryLabelRight, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.scaleCategoryLabelPoorFitText, t: "fit-chart.fit.poor_fit" }) }) })
|
|
41993
|
-
] })
|
|
41994
|
-
] }),
|
|
41995
|
-
/* @__PURE__ */ jsx$1("div", { css: css2.chartTitleContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.chartTitleText, t: "fit-chart.measurement_points" }) }),
|
|
41996
|
-
/* @__PURE__ */ jsxs("div", { css: css2.chartContainer, children: [
|
|
41997
|
-
/* @__PURE__ */ jsx$1("img", { src: getExternalAssetUrl("fit-chart-outline.png"), alt: "Fit Chart", css: css2.chartImage }),
|
|
41998
|
-
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLineBase, css2.chartLine1, "", ""], children: " " }),
|
|
41999
|
-
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLineBase, css2.chartLine2, "", ""], children: " " }),
|
|
42000
|
-
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLineBase, css2.chartLine3, "", ""], children: " " }),
|
|
42001
|
-
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLineBase, css2.chartLine4, "", ""], children: " " }),
|
|
42002
|
-
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLineBase, css2.chartLine5, "", ""], children: " " }),
|
|
42003
|
-
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLineBase, css2.chartLine6a, "", ""], children: " " }),
|
|
42004
|
-
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLineBase, css2.chartLine6b, "", ""], children: " " }),
|
|
42005
|
-
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLabelBase, css2.chartLabel1, "", ""], children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.chartLabelText, t: "fit-chart.point.bust" }) }),
|
|
42006
|
-
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLabelBase, css2.chartLabel2, "", ""], children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.chartLabelText, t: "fit-chart.point.waist" }) }),
|
|
42007
|
-
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLabelBase, css2.chartLabel3, "", ""], children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.chartLabelText, t: "fit-chart.point.pant_waist" }) }),
|
|
42008
|
-
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLabelBase, css2.chartLabel4, "", ""], children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.chartLabelText, t: "fit-chart.point.high_hip" }) }),
|
|
42009
|
-
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLabelBase, css2.chartLabel5, "", ""], children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.chartLabelText, t: "fit-chart.point.low_hip" }) }),
|
|
42010
|
-
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLabelBase, css2.chartLabel6, "", ""], children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.chartLabelText, t: "fit-chart.point.thigh" }) })
|
|
42011
|
-
] })
|
|
42012
|
-
] })
|
|
42013
|
-
] });
|
|
42014
|
-
}
|
|
42015
|
-
function Loading({
|
|
42016
|
-
t = "loading"
|
|
42017
|
-
}) {
|
|
42018
|
-
const css2 = useCss((_theme) => {
|
|
42019
|
-
const spin = keyframes({
|
|
42020
|
-
from: {
|
|
42021
|
-
transform: "rotate(0deg)"
|
|
42022
|
-
},
|
|
42023
|
-
to: {
|
|
42024
|
-
transform: "rotate(360deg)"
|
|
42025
|
-
}
|
|
42026
|
-
});
|
|
42027
|
-
return {
|
|
42028
|
-
container: {
|
|
42029
|
-
display: "flex",
|
|
42030
|
-
flexDirection: "column",
|
|
42031
|
-
justifyContent: "center",
|
|
42032
|
-
alignItems: "center",
|
|
42033
|
-
height: "100%",
|
|
42034
|
-
gap: "4px"
|
|
42035
|
-
},
|
|
42036
|
-
icon: {
|
|
42037
|
-
width: "76px",
|
|
42038
|
-
height: "76px",
|
|
42039
|
-
animation: `${spin} 2s linear infinite`
|
|
42040
|
-
},
|
|
42041
|
-
text: {}
|
|
42042
|
-
};
|
|
42043
|
-
});
|
|
42044
|
-
return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
|
|
42045
|
-
/* @__PURE__ */ jsx$1(SvgLoadingCircle, { css: css2.icon }),
|
|
42046
|
-
/* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.text, t })
|
|
42047
|
-
] });
|
|
42048
|
-
}
|
|
42049
|
-
let baseUrl;
|
|
42050
|
-
let responseCache = {};
|
|
42051
|
-
function _init$3() {
|
|
42052
|
-
const {
|
|
42053
|
-
config
|
|
42054
|
-
} = getStaticData();
|
|
42055
|
-
baseUrl = config.api.baseUrl;
|
|
42056
|
-
useMainStore.subscribe((state, prevState) => {
|
|
42057
|
-
if (state.userIsLoggedIn !== prevState.userIsLoggedIn) {
|
|
42058
|
-
clearApiCache();
|
|
42059
|
-
}
|
|
42060
|
-
});
|
|
42061
|
-
}
|
|
42062
|
-
function clearApiCache() {
|
|
42063
|
-
responseCache = {};
|
|
42064
|
-
}
|
|
42065
|
-
async function execApiRequest(params) {
|
|
42066
|
-
const authManager2 = getAuthManager();
|
|
42067
|
-
const {
|
|
42068
|
-
useCache,
|
|
42069
|
-
useToken,
|
|
42070
|
-
method,
|
|
42071
|
-
endpoint,
|
|
42072
|
-
body
|
|
42073
|
-
} = params;
|
|
42074
|
-
const url = `${baseUrl}${endpoint}`;
|
|
42075
|
-
if (useCache && responseCache[url]) {
|
|
42076
|
-
return responseCache[url];
|
|
42077
|
-
}
|
|
42078
|
-
const options = {
|
|
42079
|
-
method,
|
|
42080
|
-
headers: {
|
|
42081
|
-
"Content-Type": "application/json"
|
|
42082
|
-
}
|
|
42083
|
-
};
|
|
42084
|
-
if (useToken) {
|
|
42085
|
-
const token2 = await authManager2.getAuthToken();
|
|
42086
|
-
options.headers = {
|
|
42087
|
-
...options.headers,
|
|
42088
|
-
Authorization: `Bearer ${token2}`
|
|
42089
|
-
};
|
|
42090
|
-
}
|
|
42091
|
-
if (body) {
|
|
42092
|
-
options.body = JSON.stringify(body);
|
|
42093
|
-
}
|
|
42094
|
-
const response = await fetch(url, options);
|
|
42095
|
-
if (!response.ok) {
|
|
42096
|
-
throw new Error(`API request failed with status ${response.status}`);
|
|
42097
|
-
}
|
|
42098
|
-
let data;
|
|
42099
|
-
if (response.status === 204) {
|
|
42100
|
-
data = {
|
|
42101
|
-
noResponse: true
|
|
42102
|
-
};
|
|
42103
|
-
} else {
|
|
42104
|
-
data = await response.json();
|
|
42105
|
-
}
|
|
42106
|
-
if (useCache) {
|
|
42107
|
-
responseCache[url] = data;
|
|
42108
|
-
}
|
|
42109
|
-
return data;
|
|
42110
|
-
}
|
|
42111
|
-
async function getSizeRecommendation(styleId) {
|
|
42112
|
-
return await execApiRequest({
|
|
42113
|
-
useCache: true,
|
|
42114
|
-
useToken: true,
|
|
42115
|
-
method: "GET",
|
|
42116
|
-
endpoint: `/v1/styles/${styleId}/recommendation`
|
|
42117
|
-
});
|
|
42118
|
-
}
|
|
42119
|
-
async function requestVto(items) {
|
|
42120
|
-
return await execApiRequest({
|
|
42121
|
-
useToken: true,
|
|
42122
|
-
method: "POST",
|
|
42123
|
-
endpoint: "/v1/vto-compositions",
|
|
42124
|
-
body: {
|
|
42125
|
-
items
|
|
42126
|
-
}
|
|
42127
|
-
});
|
|
42128
|
-
}
|
|
42129
|
-
const recordCache = {};
|
|
42130
|
-
async function getStyleByExternalId(brandId, externalId) {
|
|
42131
|
-
const cacheKey = `getStyleByExternalId/${brandId}/${externalId}`;
|
|
42132
|
-
if (recordCache[cacheKey]) {
|
|
42133
|
-
return recordCache[cacheKey];
|
|
42134
|
-
}
|
|
42135
|
-
const firestore = getFirestoreManager();
|
|
42136
|
-
const querySnapshot = await firestore.queryDocs("styles", [where("brand_id", "==", brandId), where("external_id", "==", externalId)]);
|
|
42137
|
-
if (querySnapshot.empty) {
|
|
42138
|
-
return null;
|
|
42139
|
-
}
|
|
42140
|
-
const record = querySnapshot.docs[0].data();
|
|
42141
|
-
recordCache[cacheKey] = record;
|
|
42142
|
-
return record;
|
|
42143
|
-
}
|
|
42144
|
-
const logger$7 = getLogger("product");
|
|
42145
|
-
function _init$2() {
|
|
42146
|
-
useMainStore.subscribe((state, prevState) => {
|
|
42147
|
-
if (state.userHasAvatar && !prevState.userHasAvatar) {
|
|
42148
|
-
const {
|
|
42149
|
-
currentProduct
|
|
42150
|
-
} = getStaticData();
|
|
42151
|
-
if (currentProduct) {
|
|
42152
|
-
loadProductDataToStore(currentProduct.externalId);
|
|
42153
|
-
}
|
|
42154
|
-
}
|
|
42155
|
-
});
|
|
42156
|
-
}
|
|
42157
|
-
async function loadProductData(externalId) {
|
|
42158
|
-
const {
|
|
42159
|
-
brandId
|
|
42160
|
-
} = getStaticData();
|
|
42161
|
-
const style = await getStyleByExternalId(brandId, externalId);
|
|
42162
|
-
if (!style) {
|
|
42163
|
-
throw new Error(`Style not found for externalId: ${externalId}`);
|
|
42164
|
-
}
|
|
42165
|
-
const sizeFitRecommendation = await getSizeRecommendation(style.id);
|
|
42166
|
-
return {
|
|
42167
|
-
externalId,
|
|
42168
|
-
style,
|
|
42169
|
-
sizeFitRecommendation
|
|
42170
|
-
};
|
|
42171
|
-
}
|
|
42172
|
-
function loadProductDataToStore(externalId) {
|
|
42173
|
-
async function loadAndStore() {
|
|
42174
|
-
try {
|
|
42175
|
-
const productData2 = await loadProductData(externalId);
|
|
42176
|
-
useMainStore.getState().setProductData(productData2.externalId, productData2);
|
|
42177
|
-
logger$7.logDebug(`Loaded product data for externalId: ${externalId}`, {
|
|
42178
|
-
productData: productData2
|
|
42179
|
-
});
|
|
42180
|
-
} catch (error) {
|
|
42181
|
-
logger$7.logError(`Error loading product data for externalId: ${externalId}`, {
|
|
42182
|
-
error
|
|
42183
|
-
});
|
|
42184
|
-
}
|
|
42185
|
-
}
|
|
42186
|
-
const {
|
|
42187
|
-
userIsLoggedIn,
|
|
42188
|
-
userHasAvatar,
|
|
42189
|
-
productData
|
|
42190
|
-
} = useMainStore.getState();
|
|
42191
|
-
if (productData[externalId] || !userIsLoggedIn || userHasAvatar === false) {
|
|
42192
|
-
return;
|
|
42193
|
-
}
|
|
42194
|
-
loadAndStore();
|
|
44103
|
+
] })
|
|
44104
|
+
] }),
|
|
44105
|
+
/* @__PURE__ */ jsx$1("div", { css: css2.chartTitleContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.chartTitleText, t: "fit-chart.measurement_points" }) }),
|
|
44106
|
+
/* @__PURE__ */ jsxs("div", { css: css2.chartContainer, children: [
|
|
44107
|
+
/* @__PURE__ */ jsx$1("img", { src: getExternalAssetUrl("fit-chart-outline.png"), alt: "Fit Chart", css: css2.chartImage }),
|
|
44108
|
+
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLineBase, css2.chartLine1, "", ""], children: " " }),
|
|
44109
|
+
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLineBase, css2.chartLine2, "", ""], children: " " }),
|
|
44110
|
+
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLineBase, css2.chartLine3, "", ""], children: " " }),
|
|
44111
|
+
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLineBase, css2.chartLine4, "", ""], children: " " }),
|
|
44112
|
+
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLineBase, css2.chartLine5, "", ""], children: " " }),
|
|
44113
|
+
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLineBase, css2.chartLine6a, "", ""], children: " " }),
|
|
44114
|
+
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLineBase, css2.chartLine6b, "", ""], children: " " }),
|
|
44115
|
+
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLabelBase, css2.chartLabel1, "", ""], children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.chartLabelText, t: "fit-chart.point.bust" }) }),
|
|
44116
|
+
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLabelBase, css2.chartLabel2, "", ""], children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.chartLabelText, t: "fit-chart.point.waist" }) }),
|
|
44117
|
+
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLabelBase, css2.chartLabel3, "", ""], children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.chartLabelText, t: "fit-chart.point.pant_waist" }) }),
|
|
44118
|
+
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLabelBase, css2.chartLabel4, "", ""], children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.chartLabelText, t: "fit-chart.point.high_hip" }) }),
|
|
44119
|
+
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLabelBase, css2.chartLabel5, "", ""], children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.chartLabelText, t: "fit-chart.point.low_hip" }) }),
|
|
44120
|
+
/* @__PURE__ */ jsx$1("div", { css: [css2.chartLabelBase, css2.chartLabel6, "", ""], children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.chartLabelText, t: "fit-chart.point.thigh" }) })
|
|
44121
|
+
] })
|
|
44122
|
+
] })
|
|
44123
|
+
] });
|
|
42195
44124
|
}
|
|
42196
44125
|
const NON_PRIORITY_VTO_REQUEST_DELAY_MS = 500;
|
|
42197
44126
|
const AVATAR_IMAGE_ASPECT_RATIO = 2 / 3;
|
|
42198
44127
|
const AVATAR_GUTTER_HEIGHT_PX = 100;
|
|
42199
44128
|
const CONTENT_AREA_WIDTH_PX = 550;
|
|
42200
44129
|
const logger$6 = getLogger("overlays/vto-single");
|
|
42201
|
-
function compositionKey(csaId,
|
|
44130
|
+
function compositionKey(csaId, untucked) {
|
|
42202
44131
|
return `${csaId}:${0}`;
|
|
42203
44132
|
}
|
|
42204
44133
|
function VtoSingleOverlay() {
|
|
@@ -42213,9 +44142,8 @@ function VtoSingleOverlay() {
|
|
|
42213
44142
|
const [selectedSizeLabel, setSelectedSizeLabel] = reactExports.useState(null);
|
|
42214
44143
|
const [selectedColorLabel, setSelectedColorLabel] = reactExports.useState(null);
|
|
42215
44144
|
const [modalStyle, setModalStyle] = reactExports.useState({});
|
|
42216
|
-
const
|
|
42217
|
-
const
|
|
42218
|
-
const subscriptionsRef = reactExports.useRef(/* @__PURE__ */ new Map());
|
|
44145
|
+
const [framesByKey, setFramesByKey] = reactExports.useState({});
|
|
44146
|
+
const requestedKeysRef = reactExports.useRef(/* @__PURE__ */ new Set());
|
|
42219
44147
|
const lastPriorityVtoRequestTimeRef = reactExports.useRef(null);
|
|
42220
44148
|
reactExports.useEffect(() => {
|
|
42221
44149
|
if (!userIsLoggedIn) {
|
|
@@ -42390,7 +44318,7 @@ function VtoSingleOverlay() {
|
|
|
42390
44318
|
const requestVto$1 = reactExports.useCallback((sizeColorRecord, priority) => {
|
|
42391
44319
|
const csaId = sizeColorRecord.colorwaySizeAssetId;
|
|
42392
44320
|
const key = compositionKey(csaId);
|
|
42393
|
-
if (
|
|
44321
|
+
if (requestedKeysRef.current.has(key)) {
|
|
42394
44322
|
return;
|
|
42395
44323
|
}
|
|
42396
44324
|
function executeRequest() {
|
|
@@ -42399,19 +44327,23 @@ function VtoSingleOverlay() {
|
|
|
42399
44327
|
priority,
|
|
42400
44328
|
sizeColorRecord
|
|
42401
44329
|
});
|
|
42402
|
-
|
|
44330
|
+
requestedKeysRef.current.add(key);
|
|
42403
44331
|
requestVto([{
|
|
42404
44332
|
colorway_size_asset_id: csaId,
|
|
42405
|
-
|
|
44333
|
+
untucked: false
|
|
42406
44334
|
}]).then((resp) => {
|
|
42407
|
-
|
|
42408
|
-
|
|
44335
|
+
logger$6.timerEnd(`requestVto_${sizeColorRecord.sku}`);
|
|
44336
|
+
logger$6.logTimer(`requestVto_${sizeColorRecord.sku}`, `{{ts}} - VTO data is loaded for sku: ${sizeColorRecord.sku}`);
|
|
44337
|
+
setFramesByKey((prev2) => ({
|
|
44338
|
+
...prev2,
|
|
44339
|
+
[key]: resp.frames
|
|
44340
|
+
}));
|
|
42409
44341
|
}).catch((error) => {
|
|
42410
44342
|
logger$6.logError(`Error requesting VTO for sku: ${sizeColorRecord.sku}`, {
|
|
42411
44343
|
error,
|
|
42412
44344
|
sizeColorRecord
|
|
42413
44345
|
});
|
|
42414
|
-
|
|
44346
|
+
requestedKeysRef.current.delete(key);
|
|
42415
44347
|
});
|
|
42416
44348
|
}
|
|
42417
44349
|
{
|
|
@@ -42435,51 +44367,15 @@ function VtoSingleOverlay() {
|
|
|
42435
44367
|
}
|
|
42436
44368
|
executeRequest();
|
|
42437
44369
|
}, []);
|
|
42438
|
-
const subscribeToCompositionToken = reactExports.useCallback((token2, sku) => {
|
|
42439
|
-
if (subscriptionsRef.current.has(token2)) {
|
|
42440
|
-
return;
|
|
42441
|
-
}
|
|
42442
|
-
const authManager2 = getAuthManager();
|
|
42443
|
-
const uid = authManager2.getAuthUser()?.uid;
|
|
42444
|
-
if (!uid) {
|
|
42445
|
-
logger$6.logWarn(`subscribe to vto composition skipped: no uid`, {
|
|
42446
|
-
token: token2,
|
|
42447
|
-
sku
|
|
42448
|
-
});
|
|
42449
|
-
return;
|
|
42450
|
-
}
|
|
42451
|
-
const unsub = getFirestoreManager().listenToSubDoc("users", uid, "vto_compositions", token2, (data) => {
|
|
42452
|
-
if (data && data.frames && data.frames.length > 0) {
|
|
42453
|
-
logger$6.timerEnd(`requestVto_${sku}`);
|
|
42454
|
-
logger$6.logTimer(`requestVto_${sku}`, `{{ts}} - VTO data is loaded for sku: ${sku}`);
|
|
42455
|
-
}
|
|
42456
|
-
setVtoDocsByToken((prev2) => ({
|
|
42457
|
-
...prev2,
|
|
42458
|
-
[token2]: data ?? {}
|
|
42459
|
-
}));
|
|
42460
|
-
});
|
|
42461
|
-
subscriptionsRef.current.set(token2, unsub);
|
|
42462
|
-
}, []);
|
|
42463
|
-
reactExports.useEffect(() => {
|
|
42464
|
-
return () => {
|
|
42465
|
-
subscriptionsRef.current.forEach((unsub) => {
|
|
42466
|
-
try {
|
|
42467
|
-
unsub();
|
|
42468
|
-
} catch (e) {
|
|
42469
|
-
logger$6.logError("Error unsubscribing from vto composition", {
|
|
42470
|
-
error: e
|
|
42471
|
-
});
|
|
42472
|
-
}
|
|
42473
|
-
});
|
|
42474
|
-
subscriptionsRef.current.clear();
|
|
42475
|
-
};
|
|
42476
|
-
}, []);
|
|
42477
44370
|
reactExports.useEffect(() => {
|
|
42478
44371
|
if (selectedColorSizeRecord) {
|
|
42479
44372
|
requestVto$1(selectedColorSizeRecord, true);
|
|
42480
44373
|
}
|
|
42481
44374
|
}, [requestVto$1, selectedColorSizeRecord]);
|
|
42482
44375
|
reactExports.useEffect(() => {
|
|
44376
|
+
if (!getStaticData().config.features.vtoPrefetch) {
|
|
44377
|
+
return;
|
|
44378
|
+
}
|
|
42483
44379
|
if (!vtoProductData) {
|
|
42484
44380
|
return;
|
|
42485
44381
|
}
|
|
@@ -42490,32 +44386,24 @@ function VtoSingleOverlay() {
|
|
|
42490
44386
|
}
|
|
42491
44387
|
}
|
|
42492
44388
|
}, [requestVto$1, vtoProductData, selectedColorLabel]);
|
|
42493
|
-
const
|
|
44389
|
+
const frameUrls = reactExports.useMemo(() => {
|
|
42494
44390
|
if (!selectedColorSizeRecord) {
|
|
42495
44391
|
return null;
|
|
42496
44392
|
}
|
|
42497
44393
|
const key = compositionKey(selectedColorSizeRecord.colorwaySizeAssetId);
|
|
42498
|
-
const
|
|
42499
|
-
if (!
|
|
42500
|
-
return null;
|
|
42501
|
-
}
|
|
42502
|
-
const doc2 = vtoDocsByToken[token2];
|
|
42503
|
-
if (!doc2 || !doc2.frames || doc2.frames.length === 0) {
|
|
44394
|
+
const frames = framesByKey[key];
|
|
44395
|
+
if (!frames || frames.length === 0) {
|
|
42504
44396
|
return null;
|
|
42505
44397
|
}
|
|
42506
44398
|
logger$6.logDebug(`{{ts}} - Displaying VTO for sku: ${selectedColorSizeRecord.sku}`);
|
|
42507
|
-
return doc2;
|
|
42508
|
-
}, [selectedColorSizeRecord, vtoDocsByToken]);
|
|
42509
|
-
const frameUrls = reactExports.useMemo(() => {
|
|
42510
|
-
if (!vtoData?.frames) return null;
|
|
42511
44399
|
const baseUrl2 = getStaticData().config.frames.baseUrl;
|
|
42512
|
-
const rewritten =
|
|
44400
|
+
const rewritten = frames.map((u) => applyFrameBaseUrl(u, baseUrl2));
|
|
42513
44401
|
rewritten.forEach((url) => {
|
|
42514
44402
|
const img = new Image();
|
|
42515
44403
|
img.src = url;
|
|
42516
44404
|
});
|
|
42517
44405
|
return rewritten;
|
|
42518
|
-
}, [
|
|
44406
|
+
}, [selectedColorSizeRecord, framesByKey]);
|
|
42519
44407
|
const handleSignOutClick = reactExports.useCallback(() => {
|
|
42520
44408
|
closeOverlay();
|
|
42521
44409
|
const authManager2 = getAuthManager();
|
|
@@ -42613,7 +44501,11 @@ function MobileLayout({
|
|
|
42613
44501
|
onAddToCart,
|
|
42614
44502
|
onSignOut
|
|
42615
44503
|
}) {
|
|
42616
|
-
const
|
|
44504
|
+
const {
|
|
44505
|
+
snap: contentView,
|
|
44506
|
+
setSnap: setContentView,
|
|
44507
|
+
handleTouchStart: handleBottomFrameTouchStart
|
|
44508
|
+
} = useMobileSheetSnap("collapsed");
|
|
42617
44509
|
const bottomFrameInnerRef = reactExports.useRef(null);
|
|
42618
44510
|
const [bottomFrameOuterStyle, setBottomFrameOuterStyle] = reactExports.useState({});
|
|
42619
44511
|
const [bottomFrameInnerStyle, setBottomFrameInnerStyle] = reactExports.useState({});
|
|
@@ -42711,33 +44603,6 @@ function MobileLayout({
|
|
|
42711
44603
|
setBottomFrameInnerStyle({});
|
|
42712
44604
|
setTimeout(refreshBottomFrameStyle, 50);
|
|
42713
44605
|
}, [contentView]);
|
|
42714
|
-
const handleBottomFrameTouchStart = reactExports.useCallback((e) => {
|
|
42715
|
-
let startY = e.touches[0].clientY;
|
|
42716
|
-
const initialContentView = contentView;
|
|
42717
|
-
const onTouchMove = (moveEvent) => {
|
|
42718
|
-
const deltaY = moveEvent.touches[0].clientY - startY;
|
|
42719
|
-
if (Math.abs(deltaY) >= 30) {
|
|
42720
|
-
if (deltaY > 0) {
|
|
42721
|
-
if (initialContentView === "full" || initialContentView === "expanded") {
|
|
42722
|
-
setContentView("collapsed");
|
|
42723
|
-
}
|
|
42724
|
-
} else {
|
|
42725
|
-
if (initialContentView === "collapsed") {
|
|
42726
|
-
setContentView("expanded");
|
|
42727
|
-
} else if (initialContentView === "expanded") {
|
|
42728
|
-
setContentView("full");
|
|
42729
|
-
}
|
|
42730
|
-
}
|
|
42731
|
-
document.removeEventListener("touchmove", onTouchMove);
|
|
42732
|
-
}
|
|
42733
|
-
};
|
|
42734
|
-
document.addEventListener("touchmove", onTouchMove);
|
|
42735
|
-
const onTouchEnd = () => {
|
|
42736
|
-
document.removeEventListener("touchmove", onTouchMove);
|
|
42737
|
-
document.removeEventListener("touchend", onTouchEnd);
|
|
42738
|
-
};
|
|
42739
|
-
document.addEventListener("touchend", onTouchEnd);
|
|
42740
|
-
}, [contentView]);
|
|
42741
44606
|
let aboveContentNode = null;
|
|
42742
44607
|
if (contentView === "expanded" || contentView === "full") {
|
|
42743
44608
|
aboveContentNode = /* @__PURE__ */ jsx$1(ProductSummaryRow, { loadedProductData });
|
|
@@ -43086,31 +44951,6 @@ function Avatar({
|
|
|
43086
44951
|
flex: "none",
|
|
43087
44952
|
height: "100%"
|
|
43088
44953
|
},
|
|
43089
|
-
imageContainer: {
|
|
43090
|
-
position: "absolute"
|
|
43091
|
-
},
|
|
43092
|
-
image: {
|
|
43093
|
-
objectFit: "contain",
|
|
43094
|
-
cursor: "grab"
|
|
43095
|
-
},
|
|
43096
|
-
chevronLeftContainer: {
|
|
43097
|
-
position: "absolute",
|
|
43098
|
-
top: "50%",
|
|
43099
|
-
left: "0",
|
|
43100
|
-
transform: "translateY(-50%)",
|
|
43101
|
-
cursor: "pointer"
|
|
43102
|
-
},
|
|
43103
|
-
chevronRightContainer: {
|
|
43104
|
-
position: "absolute",
|
|
43105
|
-
top: "50%",
|
|
43106
|
-
right: "0",
|
|
43107
|
-
transform: "translateY(-50%)",
|
|
43108
|
-
cursor: "pointer"
|
|
43109
|
-
},
|
|
43110
|
-
chevronIcon: {
|
|
43111
|
-
width: "48px",
|
|
43112
|
-
height: "48px"
|
|
43113
|
-
},
|
|
43114
44954
|
bottomContainer: {
|
|
43115
44955
|
position: "absolute",
|
|
43116
44956
|
bottom: "1px",
|
|
@@ -43221,94 +45061,14 @@ function Avatar({
|
|
|
43221
45061
|
window.removeEventListener("resize", refreshLayoutData);
|
|
43222
45062
|
};
|
|
43223
45063
|
}, [isMobileLayout]);
|
|
43224
|
-
|
|
43225
|
-
|
|
43226
|
-
|
|
43227
|
-
|
|
43228
|
-
|
|
43229
|
-
|
|
43230
|
-
|
|
43231
|
-
|
|
43232
|
-
clearInterval(intervalId);
|
|
43233
|
-
}
|
|
43234
|
-
}, 500);
|
|
43235
|
-
}
|
|
43236
|
-
}, [frameUrls, selectedFrameIndex]);
|
|
43237
|
-
const rotateLeft = reactExports.useCallback(() => {
|
|
43238
|
-
setSelectedFrameIndex((prevIndex) => {
|
|
43239
|
-
if (prevIndex == null) {
|
|
43240
|
-
return null;
|
|
43241
|
-
}
|
|
43242
|
-
return prevIndex === 0 ? frameUrls ? frameUrls.length - 1 : 0 : prevIndex - 1;
|
|
43243
|
-
});
|
|
43244
|
-
}, [frameUrls]);
|
|
43245
|
-
const rotateRight = reactExports.useCallback(() => {
|
|
43246
|
-
setSelectedFrameIndex((prevIndex) => {
|
|
43247
|
-
if (prevIndex == null) {
|
|
43248
|
-
return null;
|
|
43249
|
-
}
|
|
43250
|
-
return prevIndex === (frameUrls ? frameUrls.length - 1 : 0) ? 0 : prevIndex + 1;
|
|
43251
|
-
});
|
|
43252
|
-
}, [frameUrls]);
|
|
43253
|
-
const handleImageMouseDrag = reactExports.useCallback((e) => {
|
|
43254
|
-
e.preventDefault();
|
|
43255
|
-
let startX = e.clientX;
|
|
43256
|
-
const onMouseMove = (moveEvent) => {
|
|
43257
|
-
const deltaX = moveEvent.clientX - startX;
|
|
43258
|
-
if (Math.abs(deltaX) >= 50) {
|
|
43259
|
-
if (deltaX > 0) {
|
|
43260
|
-
rotateRight();
|
|
43261
|
-
} else {
|
|
43262
|
-
rotateLeft();
|
|
43263
|
-
}
|
|
43264
|
-
startX = moveEvent.clientX;
|
|
43265
|
-
}
|
|
43266
|
-
};
|
|
43267
|
-
const onMouseUp = () => {
|
|
43268
|
-
window.removeEventListener("mousemove", onMouseMove);
|
|
43269
|
-
window.removeEventListener("mouseup", onMouseUp);
|
|
43270
|
-
};
|
|
43271
|
-
window.addEventListener("mousemove", onMouseMove);
|
|
43272
|
-
window.addEventListener("mouseup", onMouseUp);
|
|
43273
|
-
}, [rotateLeft, rotateRight]);
|
|
43274
|
-
const handleImageTouchDrag = reactExports.useCallback((e) => {
|
|
43275
|
-
e.preventDefault();
|
|
43276
|
-
let startX = e.touches[0].clientX;
|
|
43277
|
-
const onTouchMove = (moveEvent) => {
|
|
43278
|
-
const deltaX = moveEvent.touches[0].clientX - startX;
|
|
43279
|
-
if (Math.abs(deltaX) >= 50) {
|
|
43280
|
-
if (deltaX > 0) {
|
|
43281
|
-
rotateRight();
|
|
43282
|
-
} else {
|
|
43283
|
-
rotateLeft();
|
|
43284
|
-
}
|
|
43285
|
-
startX = moveEvent.touches[0].clientX;
|
|
43286
|
-
}
|
|
43287
|
-
};
|
|
43288
|
-
const onTouchEnd = () => {
|
|
43289
|
-
window.removeEventListener("touchmove", onTouchMove);
|
|
43290
|
-
window.removeEventListener("touchend", onTouchEnd);
|
|
43291
|
-
};
|
|
43292
|
-
window.addEventListener("touchmove", onTouchMove);
|
|
43293
|
-
window.addEventListener("touchend", onTouchEnd);
|
|
43294
|
-
}, [rotateLeft, rotateRight]);
|
|
43295
|
-
let contentNode;
|
|
43296
|
-
if (frameUrls && selectedFrameIndex != null) {
|
|
43297
|
-
contentNode = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
43298
|
-
/* @__PURE__ */ jsxs("div", { css: css2.imageContainer, style: layoutData.imageContainerStyle, children: [
|
|
43299
|
-
/* @__PURE__ */ jsx$1("img", { src: frameUrls[selectedFrameIndex], css: css2.image, style: layoutData.imageStyle, onMouseDown: handleImageMouseDrag, onTouchStart: handleImageTouchDrag }),
|
|
43300
|
-
/* @__PURE__ */ jsx$1("div", { css: css2.chevronLeftContainer, onClick: rotateLeft, children: /* @__PURE__ */ jsx$1(SvgChevronLeft, { css: css2.chevronIcon }) }),
|
|
43301
|
-
/* @__PURE__ */ jsx$1("div", { css: css2.chevronRightContainer, onClick: rotateRight, children: /* @__PURE__ */ jsx$1(SvgChevronRight, { css: css2.chevronIcon }) })
|
|
43302
|
-
] }),
|
|
43303
|
-
/* @__PURE__ */ jsx$1("div", { css: css2.bottomContainer, style: layoutData.bottomContainerStyle, children: isMobileLayout ? /* @__PURE__ */ jsx$1(Fragment, { children: " " }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
43304
|
-
/* @__PURE__ */ jsx$1("input", { type: "range", min: 0, max: frameUrls.length - 1, step: 1, value: selectedFrameIndex, onChange: (e) => setSelectedFrameIndex(Number(e.target.value)), css: css2.sliderInput }),
|
|
43305
|
-
/* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "vto-single.slide_to_rotate", css: css2.sliderText })
|
|
43306
|
-
] }) })
|
|
43307
|
-
] });
|
|
43308
|
-
} else {
|
|
43309
|
-
contentNode = /* @__PURE__ */ jsx$1(Loading, { t: "vto-single.avatar_loading" });
|
|
43310
|
-
}
|
|
43311
|
-
return /* @__PURE__ */ jsx$1("div", { css: css2.topContainer, style: layoutData.topContainerStyle, children: contentNode });
|
|
45064
|
+
const isReady = !!frameUrls && selectedFrameIndex != null;
|
|
45065
|
+
return /* @__PURE__ */ jsxs("div", { css: css2.topContainer, style: layoutData.topContainerStyle, children: [
|
|
45066
|
+
/* @__PURE__ */ jsx$1(AvatarFrameViewer, { frameUrls, selectedFrameIndex, setSelectedFrameIndex, imageContainerStyle: layoutData.imageContainerStyle, imageStyle: layoutData.imageStyle, loadingT: "vto-single.avatar_loading" }),
|
|
45067
|
+
isReady ? /* @__PURE__ */ jsx$1("div", { css: css2.bottomContainer, style: layoutData.bottomContainerStyle, children: isMobileLayout ? /* @__PURE__ */ jsx$1(Fragment, { children: " " }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
45068
|
+
/* @__PURE__ */ jsx$1("input", { type: "range", min: 0, max: frameUrls.length - 1, step: 1, value: selectedFrameIndex, onChange: (e) => setSelectedFrameIndex(Number(e.target.value)), css: css2.sliderInput }),
|
|
45069
|
+
/* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "vto-single.slide_to_rotate", css: css2.sliderText })
|
|
45070
|
+
] }) }) : null
|
|
45071
|
+
] });
|
|
43312
45072
|
}
|
|
43313
45073
|
function ProductSummaryRow({
|
|
43314
45074
|
loadedProductData
|
|
@@ -43365,42 +45125,6 @@ function ColorSelector({
|
|
|
43365
45125
|
/* @__PURE__ */ jsx$1("select", { value: selectedColorLabel ?? "", onChange: handleColorSelectChange, css: css2.colorSelect, children: availableColorLabels.map((colorLabel) => /* @__PURE__ */ jsx$1("option", { value: colorLabel, children: colorLabel }, colorLabel)) })
|
|
43366
45126
|
] }) });
|
|
43367
45127
|
}
|
|
43368
|
-
function SizeSelector({
|
|
43369
|
-
loadedProductData,
|
|
43370
|
-
selectedSizeLabel,
|
|
43371
|
-
onChangeSize
|
|
43372
|
-
}) {
|
|
43373
|
-
const css2 = useCss((_theme) => ({
|
|
43374
|
-
container: {
|
|
43375
|
-
display: "flex",
|
|
43376
|
-
alignItems: "center",
|
|
43377
|
-
gap: "12px"
|
|
43378
|
-
},
|
|
43379
|
-
button: {
|
|
43380
|
-
width: "54px",
|
|
43381
|
-
height: "44px",
|
|
43382
|
-
border: "1px solid rgba(33, 32, 31, 0.2)",
|
|
43383
|
-
padding: "9px 5px"
|
|
43384
|
-
},
|
|
43385
|
-
selectedButton: {
|
|
43386
|
-
border: "1px solid rgb(33, 32, 31)",
|
|
43387
|
-
cursor: "default"
|
|
43388
|
-
}
|
|
43389
|
-
}));
|
|
43390
|
-
const sizeSelectorNodeList = reactExports.useMemo(() => loadedProductData.sizes.map((sizeRecord) => {
|
|
43391
|
-
const isSelected = sizeRecord.sizeLabel === selectedSizeLabel;
|
|
43392
|
-
return /* @__PURE__ */ jsx$1(Button, { variant: "base", css: /* @__PURE__ */ css$1({
|
|
43393
|
-
...css2.button,
|
|
43394
|
-
...isSelected && css2.selectedButton
|
|
43395
|
-
}, "", ""), onClick: () => {
|
|
43396
|
-
if (isSelected) {
|
|
43397
|
-
return;
|
|
43398
|
-
}
|
|
43399
|
-
onChangeSize(sizeRecord.sizeLabel);
|
|
43400
|
-
}, children: sizeRecord.sizeLabel }, sizeRecord.sizeLabel);
|
|
43401
|
-
}), [loadedProductData.sizes, selectedSizeLabel, onChangeSize]);
|
|
43402
|
-
return /* @__PURE__ */ jsx$1("div", { css: css2.container, children: sizeSelectorNodeList });
|
|
43403
|
-
}
|
|
43404
45128
|
function RecommendedSizeText({
|
|
43405
45129
|
loadedProductData,
|
|
43406
45130
|
textCss
|
|
@@ -43409,74 +45133,6 @@ function RecommendedSizeText({
|
|
|
43409
45133
|
size: loadedProductData.recommendedSizeLabel
|
|
43410
45134
|
} });
|
|
43411
45135
|
}
|
|
43412
|
-
function ItemFitText({
|
|
43413
|
-
loadedProductData,
|
|
43414
|
-
textCss
|
|
43415
|
-
}) {
|
|
43416
|
-
const {
|
|
43417
|
-
t
|
|
43418
|
-
} = useTranslation();
|
|
43419
|
-
return /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: textCss, t: "size-rec.item_fit", vars: {
|
|
43420
|
-
fit: t(`size-rec.fitClassification.${loadedProductData.fitClassification}`) || loadedProductData.fitClassification
|
|
43421
|
-
} });
|
|
43422
|
-
}
|
|
43423
|
-
function ItemFitDetails({
|
|
43424
|
-
loadedProductData,
|
|
43425
|
-
selectedSizeLabel
|
|
43426
|
-
}) {
|
|
43427
|
-
const {
|
|
43428
|
-
t
|
|
43429
|
-
} = useTranslation();
|
|
43430
|
-
const css2 = useCss((_theme) => ({
|
|
43431
|
-
container: {
|
|
43432
|
-
width: "100%"
|
|
43433
|
-
},
|
|
43434
|
-
line: {
|
|
43435
|
-
display: "flex",
|
|
43436
|
-
justifyContent: "space-between",
|
|
43437
|
-
alignItems: "center",
|
|
43438
|
-
gap: "8px",
|
|
43439
|
-
marginTop: "4px",
|
|
43440
|
-
borderTop: "1px solid rgb(33, 32, 31)",
|
|
43441
|
-
paddingTop: "4px"
|
|
43442
|
-
},
|
|
43443
|
-
firstLine: {
|
|
43444
|
-
borderTop: "none",
|
|
43445
|
-
marginTop: "0px",
|
|
43446
|
-
paddingTop: "0px"
|
|
43447
|
-
},
|
|
43448
|
-
detailCell: {
|
|
43449
|
-
display: "flex",
|
|
43450
|
-
alignItems: "center",
|
|
43451
|
-
gap: "6px"
|
|
43452
|
-
}
|
|
43453
|
-
}));
|
|
43454
|
-
const fitLineNodeList = reactExports.useMemo(() => {
|
|
43455
|
-
const selectedSizeRecord = loadedProductData.sizes.find((s) => s.sizeLabel === selectedSizeLabel);
|
|
43456
|
-
if (!selectedSizeRecord) {
|
|
43457
|
-
return null;
|
|
43458
|
-
}
|
|
43459
|
-
return selectedSizeRecord.fit.measurement_location_fits.map((mlf, index) => {
|
|
43460
|
-
const locationLabel = t(`size-rec.measurementLocation.${mlf.measurement_location}`) || mlf.measurement_location;
|
|
43461
|
-
const fit = mlf.fit;
|
|
43462
|
-
const fitLabel = t(`size-rec.fit.${fit}`) || fit;
|
|
43463
|
-
return /* @__PURE__ */ jsxs("div", { css: [css2.line, index === 0 && css2.firstLine, "", ""], children: [
|
|
43464
|
-
/* @__PURE__ */ jsx$1("div", { css: css2.detailCell, children: locationLabel }),
|
|
43465
|
-
/* @__PURE__ */ jsx$1("div", { css: css2.detailCell, children: fit === "perfect_fit" ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
43466
|
-
/* @__PURE__ */ jsx$1(SvgCheckCircle, {}),
|
|
43467
|
-
" ",
|
|
43468
|
-
fitLabel
|
|
43469
|
-
] }) : fitLabel })
|
|
43470
|
-
] }, index);
|
|
43471
|
-
});
|
|
43472
|
-
}, [loadedProductData, selectedSizeLabel]);
|
|
43473
|
-
return /* @__PURE__ */ jsx$1("div", { css: css2.container, children: fitLineNodeList });
|
|
43474
|
-
}
|
|
43475
|
-
function AddToCartButton({
|
|
43476
|
-
onClick
|
|
43477
|
-
}) {
|
|
43478
|
-
return /* @__PURE__ */ jsx$1(ButtonT, { variant: "brand", t: "vto-single.add_to_cart", onClick });
|
|
43479
|
-
}
|
|
43480
45136
|
function ProductDescriptionText({
|
|
43481
45137
|
loadedProductData
|
|
43482
45138
|
}) {
|
|
@@ -43527,8 +45183,10 @@ function AddToFittingRoomCompactWidget({
|
|
|
43527
45183
|
currentProduct
|
|
43528
45184
|
} = getStaticData();
|
|
43529
45185
|
const attrProductId = attributes["product-id"];
|
|
45186
|
+
const attrProductHandle = attributes["product-handle"];
|
|
43530
45187
|
const productId = attrProductId || currentProduct?.externalId || null;
|
|
43531
45188
|
const isPdp = productId != null && productId === currentProduct?.externalId;
|
|
45189
|
+
const productHandle = attrProductHandle || (isPdp ? currentProduct?.handle ?? null : null);
|
|
43532
45190
|
const isInFittingRoom = useMainStore((state) => productId == null ? false : state.fittingRoom.some((item) => item.externalId === productId));
|
|
43533
45191
|
const css2 = useCss((theme) => ({
|
|
43534
45192
|
button: {
|
|
@@ -43559,7 +45217,7 @@ function AddToFittingRoomCompactWidget({
|
|
|
43559
45217
|
return null;
|
|
43560
45218
|
}
|
|
43561
45219
|
const handleClick = () => {
|
|
43562
|
-
toggleFittingRoomItem(productId, isPdp).catch((error) => {
|
|
45220
|
+
toggleFittingRoomItem(productId, productHandle, isPdp).catch((error) => {
|
|
43563
45221
|
logger$5.logError("toggleFittingRoomItem failed", {
|
|
43564
45222
|
error
|
|
43565
45223
|
});
|
|
@@ -43576,8 +45234,10 @@ function AddToFittingRoomWidget({
|
|
|
43576
45234
|
currentProduct
|
|
43577
45235
|
} = getStaticData();
|
|
43578
45236
|
const attrProductId = attributes["product-id"];
|
|
45237
|
+
const attrProductHandle = attributes["product-handle"];
|
|
43579
45238
|
const productId = attrProductId || currentProduct?.externalId || null;
|
|
43580
45239
|
const isPdp = productId != null && productId === currentProduct?.externalId;
|
|
45240
|
+
const productHandle = attrProductHandle || (isPdp ? currentProduct?.handle ?? null : null);
|
|
43581
45241
|
const isInFittingRoom = useMainStore((state) => productId == null ? false : state.fittingRoom.some((item) => item.externalId === productId));
|
|
43582
45242
|
const css2 = useCss((theme) => ({
|
|
43583
45243
|
button: {
|
|
@@ -43611,7 +45271,7 @@ function AddToFittingRoomWidget({
|
|
|
43611
45271
|
return null;
|
|
43612
45272
|
}
|
|
43613
45273
|
const handleClick = () => {
|
|
43614
|
-
toggleFittingRoomItem(productId, isPdp).catch((error) => {
|
|
45274
|
+
toggleFittingRoomItem(productId, productHandle, isPdp).catch((error) => {
|
|
43615
45275
|
logger$4.logError("toggleFittingRoomItem failed", {
|
|
43616
45276
|
error
|
|
43617
45277
|
});
|
|
@@ -43989,6 +45649,14 @@ const useMainStore = create((set) => ({
|
|
|
43989
45649
|
[externalId]: data
|
|
43990
45650
|
}
|
|
43991
45651
|
})),
|
|
45652
|
+
// Merchant-supplied product data:
|
|
45653
|
+
merchantProductData: {},
|
|
45654
|
+
setMerchantProductData: (externalId, data) => set((prevState) => ({
|
|
45655
|
+
merchantProductData: {
|
|
45656
|
+
...prevState.merchantProductData,
|
|
45657
|
+
[externalId]: data
|
|
45658
|
+
}
|
|
45659
|
+
})),
|
|
43992
45660
|
// Fitting room:
|
|
43993
45661
|
fittingRoom: [],
|
|
43994
45662
|
addToFittingRoom: (item) => set((prevState) => {
|
|
@@ -44077,9 +45745,9 @@ const SHARED_CONFIG = {
|
|
|
44077
45745
|
appGooglePlayUrl: "https://play.google.com/store/apps/details?id=com.thefittingroom.marketplace"
|
|
44078
45746
|
},
|
|
44079
45747
|
build: {
|
|
44080
|
-
version: `${"5.0.
|
|
44081
|
-
commitHash: `${"
|
|
44082
|
-
date: `${"2026-05-
|
|
45748
|
+
version: `${"5.0.20"}`,
|
|
45749
|
+
commitHash: `${"ec50778"}`,
|
|
45750
|
+
date: `${"2026-05-16T14:14:47.264Z"}`
|
|
44083
45751
|
}
|
|
44084
45752
|
};
|
|
44085
45753
|
const CONFIGS = {
|
|
@@ -44097,7 +45765,8 @@ const CONFIGS = {
|
|
|
44097
45765
|
measurementId: "G-B7GDQ1Y9LL"
|
|
44098
45766
|
},
|
|
44099
45767
|
api: {
|
|
44100
|
-
baseUrl: "https://tfr.dev.thefittingroom.xyz"
|
|
45768
|
+
baseUrl: "https://tfr.dev.thefittingroom.xyz",
|
|
45769
|
+
vtoTimeoutMs: 12e4
|
|
44101
45770
|
},
|
|
44102
45771
|
asset: {
|
|
44103
45772
|
baseUrl: "https://assets.dev.thefittingroom.xyz/shop-sdk/assets/v5"
|
|
@@ -44105,6 +45774,9 @@ const CONFIGS = {
|
|
|
44105
45774
|
frames: {
|
|
44106
45775
|
baseUrl: "https://assets.dev.thefittingroom.xyz"
|
|
44107
45776
|
},
|
|
45777
|
+
features: {
|
|
45778
|
+
vtoPrefetch: false
|
|
45779
|
+
},
|
|
44108
45780
|
...SHARED_CONFIG
|
|
44109
45781
|
},
|
|
44110
45782
|
[
|
|
@@ -44121,7 +45793,8 @@ const CONFIGS = {
|
|
|
44121
45793
|
measurementId: "G-XH9VV5N6EW"
|
|
44122
45794
|
},
|
|
44123
45795
|
api: {
|
|
44124
|
-
baseUrl: "https://tfr.p.thefittingroom.xyz"
|
|
45796
|
+
baseUrl: "https://tfr.p.thefittingroom.xyz",
|
|
45797
|
+
vtoTimeoutMs: 12e4
|
|
44125
45798
|
},
|
|
44126
45799
|
asset: {
|
|
44127
45800
|
baseUrl: "https://assets.p.thefittingroom.xyz/shop-sdk/assets/v5"
|
|
@@ -44129,6 +45802,9 @@ const CONFIGS = {
|
|
|
44129
45802
|
frames: {
|
|
44130
45803
|
baseUrl: "https://assets.p.thefittingroom.xyz"
|
|
44131
45804
|
},
|
|
45805
|
+
features: {
|
|
45806
|
+
vtoPrefetch: false
|
|
45807
|
+
},
|
|
44132
45808
|
...SHARED_CONFIG
|
|
44133
45809
|
},
|
|
44134
45810
|
[
|
|
@@ -44145,13 +45821,17 @@ const CONFIGS = {
|
|
|
44145
45821
|
measurementId: "G-B7GDQ1Y9LL"
|
|
44146
45822
|
},
|
|
44147
45823
|
api: {
|
|
44148
|
-
baseUrl: "
|
|
45824
|
+
baseUrl: "https://minecraftbadapple.com/api",
|
|
45825
|
+
vtoTimeoutMs: 12e4
|
|
44149
45826
|
},
|
|
44150
45827
|
asset: {
|
|
44151
|
-
baseUrl: "http://
|
|
45828
|
+
baseUrl: "http://minecraftbadapple.com/s3/tfr-assets-dev/shop-sdk/assets/v5"
|
|
44152
45829
|
},
|
|
44153
45830
|
frames: {
|
|
44154
|
-
baseUrl: "http://
|
|
45831
|
+
baseUrl: "http://minecraftbadapple.com/s3/tfr-assets-dev"
|
|
45832
|
+
},
|
|
45833
|
+
features: {
|
|
45834
|
+
vtoPrefetch: false
|
|
44155
45835
|
},
|
|
44156
45836
|
...SHARED_CONFIG
|
|
44157
45837
|
}
|
|
@@ -44181,7 +45861,8 @@ async function init(initParams) {
|
|
|
44181
45861
|
theme = null,
|
|
44182
45862
|
debug,
|
|
44183
45863
|
productLookup,
|
|
44184
|
-
getOverlayTopOffset
|
|
45864
|
+
getOverlayTopOffset,
|
|
45865
|
+
addToCart
|
|
44185
45866
|
} = initParams;
|
|
44186
45867
|
if (!brandId || typeof brandId !== "number" || isNaN(brandId) || brandId <= 0) {
|
|
44187
45868
|
throw new Error(`Invalid brandId "${brandId}"`);
|
|
@@ -44206,7 +45887,8 @@ async function init(initParams) {
|
|
|
44206
45887
|
environment,
|
|
44207
45888
|
config,
|
|
44208
45889
|
productLookup: productLookup ?? null,
|
|
44209
|
-
getOverlayTopOffset: getOverlayTopOffset ?? null
|
|
45890
|
+
getOverlayTopOffset: getOverlayTopOffset ?? null,
|
|
45891
|
+
addToCart: addToCart ?? null
|
|
44210
45892
|
});
|
|
44211
45893
|
_init$7();
|
|
44212
45894
|
_init$5();
|