@nok-integration/storefront-react 0.18.4 → 0.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +5 -5
- package/dist/index.mjs +381 -137
- package/dist/standalone/storefront.mjs +381 -137
- package/dist/standalone/styles.css +35 -15
- package/dist/styles.css +35 -15
- package/package.json +26 -9
|
@@ -5191,6 +5191,9 @@ function requireErrors() {
|
|
|
5191
5191
|
// `order_not_found` because saying "unknown order" about a support ticket sends whoever
|
|
5192
5192
|
// reads it looking in the wrong table.
|
|
5193
5193
|
"support_ticket_not_found",
|
|
5194
|
+
// Only ever raised on `/admin/v1`, where a chart can be picked and then deleted by
|
|
5195
|
+
// somebody else before the form is saved.
|
|
5196
|
+
"size_chart_not_found",
|
|
5194
5197
|
// Admin/CMS (`/admin/v1`). The error OBJECT is shared infrastructure — one shape, one
|
|
5195
5198
|
// `code` vocabulary, one filter — so admin failures name themselves here rather than in
|
|
5196
5199
|
// a second enum. `forbidden` is authenticated-but-not-permitted, which `unauthorized`
|
|
@@ -5215,6 +5218,7 @@ function requireErrors() {
|
|
|
5215
5218
|
order_not_cancellable: 409,
|
|
5216
5219
|
cart_not_found: 404,
|
|
5217
5220
|
support_ticket_not_found: 404,
|
|
5221
|
+
size_chart_not_found: 404,
|
|
5218
5222
|
forbidden: 403,
|
|
5219
5223
|
invalid_transition: 409,
|
|
5220
5224
|
rate_limited: 429,
|
|
@@ -5909,8 +5913,228 @@ const styles$L = {
|
|
|
5909
5913
|
row: row$9,
|
|
5910
5914
|
action: action$2
|
|
5911
5915
|
};
|
|
5916
|
+
const MINOR_UNIT_EXPONENT = {
|
|
5917
|
+
JPY: 0,
|
|
5918
|
+
KRW: 0,
|
|
5919
|
+
VND: 0,
|
|
5920
|
+
CLP: 0,
|
|
5921
|
+
ISK: 0,
|
|
5922
|
+
BHD: 3,
|
|
5923
|
+
KWD: 3,
|
|
5924
|
+
OMR: 3,
|
|
5925
|
+
TND: 3,
|
|
5926
|
+
JOD: 3
|
|
5927
|
+
};
|
|
5928
|
+
function minorUnitExponent(currency) {
|
|
5929
|
+
return MINOR_UNIT_EXPONENT[currency.toUpperCase()] ?? 2;
|
|
5930
|
+
}
|
|
5931
|
+
function formatMoney(money2, locale) {
|
|
5932
|
+
const exponent = minorUnitExponent(money2.currency);
|
|
5933
|
+
const major = money2.amount / 10 ** exponent;
|
|
5934
|
+
try {
|
|
5935
|
+
return new Intl.NumberFormat(locale, {
|
|
5936
|
+
style: "currency",
|
|
5937
|
+
currency: money2.currency
|
|
5938
|
+
}).format(major);
|
|
5939
|
+
} catch {
|
|
5940
|
+
return `${major.toFixed(exponent)} ${money2.currency}`;
|
|
5941
|
+
}
|
|
5942
|
+
}
|
|
5943
|
+
function discountPct(price2, compareAt2) {
|
|
5944
|
+
if (!compareAt2) return void 0;
|
|
5945
|
+
if (compareAt2.currency !== price2.currency) return void 0;
|
|
5946
|
+
if (compareAt2.amount <= price2.amount) return void 0;
|
|
5947
|
+
const pct = Math.round((compareAt2.amount - price2.amount) / compareAt2.amount * 100);
|
|
5948
|
+
return pct > 0 ? pct : void 0;
|
|
5949
|
+
}
|
|
5950
|
+
function useMoney(defaultLocale) {
|
|
5951
|
+
const locale = useLocale(defaultLocale);
|
|
5952
|
+
const format = useCallback(
|
|
5953
|
+
(money2, localeOverride) => formatMoney(money2, localeOverride ?? locale),
|
|
5954
|
+
[locale]
|
|
5955
|
+
);
|
|
5956
|
+
return { format };
|
|
5957
|
+
}
|
|
5958
|
+
function useLocale(override) {
|
|
5959
|
+
const shop = useShopOptional();
|
|
5960
|
+
return override ?? shop?.locale ?? shop?.market?.lang ?? (typeof navigator !== "undefined" ? navigator.language : void 0);
|
|
5961
|
+
}
|
|
5962
|
+
const ES = {
|
|
5963
|
+
"(opens {0} in a new tab)": "(abre {0} en una nueva pestaña)",
|
|
5964
|
+
"(out of stock)": "(agotado)",
|
|
5965
|
+
"14 days returns": "Devoluciones en 14 días",
|
|
5966
|
+
"Add something to your basket to carry on.": "Añade algún artículo a tu cesta para continuar.",
|
|
5967
|
+
"Add to cart": "Añadir a la cesta",
|
|
5968
|
+
"All items": "Todos los artículos",
|
|
5969
|
+
"and {0} more items": "y {0} artículos más",
|
|
5970
|
+
"Back": "Atrás",
|
|
5971
|
+
"Calculated at checkout": "Se calculará al finalizar la compra",
|
|
5972
|
+
"Cart": "Cesta",
|
|
5973
|
+
"Cart, empty": "Cesta vacía",
|
|
5974
|
+
"Cart, {0} item{1}": "Cesta, {0} artículo{1}",
|
|
5975
|
+
"Category unavailable": "Categoría no disponible",
|
|
5976
|
+
"Checkout in progress": "Finalización de la compra en curso",
|
|
5977
|
+
"Clear": "Borrar",
|
|
5978
|
+
"Clear filters": "Borrar filtros",
|
|
5979
|
+
"Close": "Cerrar",
|
|
5980
|
+
"Close size guide": "Cerrar la guía de tallas",
|
|
5981
|
+
"Color": "Color",
|
|
5982
|
+
"Color:": "Color:",
|
|
5983
|
+
"Complete the look with everyday essentials and finishing details": "Completa tu look con básicos para el día a día y detalles que marcan la diferencia",
|
|
5984
|
+
"Continue shopping": "Seguir comprando",
|
|
5985
|
+
"DAZN": "DAZN",
|
|
5986
|
+
"DAZN Shop": "Tienda DAZN",
|
|
5987
|
+
"DAZN SHOP": "TIENDA DAZN",
|
|
5988
|
+
"Decrease quantity": "Reducir cantidad",
|
|
5989
|
+
"Delivery": "Envío",
|
|
5990
|
+
"Delivery status": "Estado del envío",
|
|
5991
|
+
"Everyday essentials with sport-inspired fits and minimal branding": "Artículos básicos para el día a día con cortes de inspiración deportiva y logotipos discretos",
|
|
5992
|
+
"Explore": "Explorar",
|
|
5993
|
+
"Filters": "Filtros",
|
|
5994
|
+
"Finish signing up": "Finalizar el registro",
|
|
5995
|
+
"Free": "Gratis",
|
|
5996
|
+
"Fresh drops inspired by sport, culture, and everyday movement": "Novedades inspiradas en el deporte, la cultura y el movimiento diario",
|
|
5997
|
+
"Gallery pagination": "Paginación de la galería",
|
|
5998
|
+
"Go to image {0}": "Ir a la imagen {0}",
|
|
5999
|
+
"Heavyweight comfort built for training days and off-duty moments": "Comodidad y resistencia pensadas para los días de entrenamiento y los momentos de ocio",
|
|
6000
|
+
"Help & Support": "Ayuda y asistencia",
|
|
6001
|
+
"Hoodies": "Sudaderas con capucha",
|
|
6002
|
+
"Increase quantity": "Aumentar la cantidad",
|
|
6003
|
+
"Item unavailable": "Artículo no disponible",
|
|
6004
|
+
"Items": "Artículos",
|
|
6005
|
+
"Jackets": "Chaquetas",
|
|
6006
|
+
"Loading": "Cargando",
|
|
6007
|
+
"Manage orders": "Gestionar pedidos",
|
|
6008
|
+
"More options": "Más opciones",
|
|
6009
|
+
"No products": "Sin productos",
|
|
6010
|
+
"Not available to you": "No disponible para ti",
|
|
6011
|
+
"Nothing here yet": "Aún no hay nada aquí",
|
|
6012
|
+
"One moment": "Un momento",
|
|
6013
|
+
"One or more items just sold out. Adjust your cart to continue.": "Uno o más artículos se han agotado. Ajusta tu carrito para continuar.",
|
|
6014
|
+
"Only {0} left": "Solo quedan {0}",
|
|
6015
|
+
"Order #{0}": "Pedido n.º {0}",
|
|
6016
|
+
"Order already placed": "Pedido ya realizado",
|
|
6017
|
+
"Order not found": "Pedido no encontrado",
|
|
6018
|
+
"Order summary": "Resumen del pedido",
|
|
6019
|
+
"Order {0}, {1}": "Pedido {0}, {1}",
|
|
6020
|
+
"Out of stock": "Agotado",
|
|
6021
|
+
"Placed {0}": "Realizado {0}",
|
|
6022
|
+
"Please check the details and try again.": "Por favor, comprueba los datos e inténtalo de nuevo.",
|
|
6023
|
+
"Please select a size": "Selecciona una talla",
|
|
6024
|
+
"Please try again.": "Inténtalo de nuevo.",
|
|
6025
|
+
"Price updated": "Precio actualizado",
|
|
6026
|
+
"Proceed to checkout": "Pasar por caja",
|
|
6027
|
+
"Product details": "Detalles del producto",
|
|
6028
|
+
"Qty: {0}": "Cantidad: {0}",
|
|
6029
|
+
"Quantity {0}": "Cantidad {0}",
|
|
6030
|
+
"Reconnecting…": "Restableciendo la conexión…",
|
|
6031
|
+
"Redeem a code": "Canjear un código",
|
|
6032
|
+
"Remind me when available": "Avísame cuando esté disponible",
|
|
6033
|
+
"Remove item": "Eliminar artículo",
|
|
6034
|
+
"Restoring your session.": "Restaurando tu sesión.",
|
|
6035
|
+
"Reviews": "Opiniones",
|
|
6036
|
+
"Seasonal": "De temporada",
|
|
6037
|
+
"See all": "Ver todo",
|
|
6038
|
+
"See more": "Ver más",
|
|
6039
|
+
"Select an option": "Selecciona una opción",
|
|
6040
|
+
"Share": "Compartir",
|
|
6041
|
+
"Shipping": "Envío",
|
|
6042
|
+
"Shipping address": "Dirección de envío",
|
|
6043
|
+
"Shipping and returns": "Envíos y devoluciones",
|
|
6044
|
+
"Shop menu": "Menú de la tienda",
|
|
6045
|
+
"Shop now": "Comprar ahora",
|
|
6046
|
+
"Size": "Talla",
|
|
6047
|
+
"Size guide": "Guía de tallas",
|
|
6048
|
+
"Something looks off": "Algo no va bien",
|
|
6049
|
+
"Something went wrong": "Ha surgido un error",
|
|
6050
|
+
"Standard or express delivery": "Envío estándar o urgente",
|
|
6051
|
+
"Subtotal": "Subtotal",
|
|
6052
|
+
"Swipe down for more": "Desliza hacia abajo para ver más",
|
|
6053
|
+
"T-Shirts": "Camisetas",
|
|
6054
|
+
"Tax": "Impuestos",
|
|
6055
|
+
"That is not possible right now": "Eso no es posible en este momento",
|
|
6056
|
+
"The total changed since you started. Review the updated amount and try again.": "El total ha cambiado desde que empezaste. Revisa el importe actualizado e inténtalo de nuevo.",
|
|
6057
|
+
"This category is no longer available.": "Esta categoría ya no está disponible.",
|
|
6058
|
+
"This has already moved on. Refresh to see where it is.": "Esto ya se ha movido. Actualiza la página para ver dónde está.",
|
|
6059
|
+
"This order has already been despatched.": "Este pedido ya se ha enviado.",
|
|
6060
|
+
"This order was already confirmed.": "Este pedido ya se ha confirmado.",
|
|
6061
|
+
"This product is no longer available.": "Este producto ya no está disponible.",
|
|
6062
|
+
"Too late to change this": "Es demasiado tarde para cambiarlo",
|
|
6063
|
+
"Too many requests. Retrying shortly.": "Demasiadas solicitudes. Lo volveremos a intentar en breve.",
|
|
6064
|
+
"Total": "Total",
|
|
6065
|
+
"Try again": "Inténtalo de nuevo",
|
|
6066
|
+
"Undo": "Deshacer",
|
|
6067
|
+
"Variant": "Variante",
|
|
6068
|
+
"View cart": "Ver carrito",
|
|
6069
|
+
"View your order history and track shipments": "Consulta tu historial de pedidos y realiza el seguimiento de los envíos",
|
|
6070
|
+
"Was {0}": "Era {0}",
|
|
6071
|
+
"We could not find that order.": "No hemos podido encontrar ese pedido.",
|
|
6072
|
+
"We hit a snag. Please try again.": "Hemos tenido un problema. Inténtalo de nuevo.",
|
|
6073
|
+
"We'll remind you": "Te lo recordaremos",
|
|
6074
|
+
"Why shop with us": "¿Por qué comprar con nosotros?",
|
|
6075
|
+
"You do not have access to this.": "No tienes acceso a esto.",
|
|
6076
|
+
"You may also like": "Quizá te guste",
|
|
6077
|
+
"Your basket is empty": "Tu cesta está vacía",
|
|
6078
|
+
"Your checkout is still open. Return to it to finish or cancel your order.": "Tu proceso de pago sigue abierto. Vuelve a él para finalizar o cancelar tu pedido.",
|
|
6079
|
+
"{0} images": "{0} imágenes",
|
|
6080
|
+
"{0} left": "{0} restantes",
|
|
6081
|
+
"{0} — image {1} of {2}": "{0} — imagen {1} de {2}",
|
|
6082
|
+
/*
|
|
6083
|
+
* ── Order status badges ──────────────────────────────────────────────────────────
|
|
6084
|
+
*
|
|
6085
|
+
* **These seven are ours, not the translator's.** The workbook carries no row for any of
|
|
6086
|
+
* them: it was extracted from the rendered UAT build, and an order list only renders the
|
|
6087
|
+
* statuses its orders happened to be in that day, so a status nothing was sitting in was
|
|
6088
|
+
* never collected.
|
|
6089
|
+
*
|
|
6090
|
+
* Added on instruction rather than left in English, and grouped here so they can be
|
|
6091
|
+
* reviewed as a set when DAZN's translator next looks at this file. Two of the seven are
|
|
6092
|
+
* anchored in the translator's own vocabulary rather than chosen freely: `en curso` is how
|
|
6093
|
+
* they rendered "Checkout in progress", and `confirmado` is the stem they used for "This
|
|
6094
|
+
* order was already confirmed."
|
|
6095
|
+
*
|
|
6096
|
+
* All seven describe `el pedido`, so they are masculine singular throughout.
|
|
6097
|
+
*
|
|
6098
|
+
* `Preparado` rather than `Empaquetado` for "Packed": the fulfilment vocabulary already
|
|
6099
|
+
* translates that state to a fan as preparing the order, not as boxing it, and the
|
|
6100
|
+
* notification copy says `estamos preparando`. A fan should not meet two different words
|
|
6101
|
+
* for the same moment.
|
|
6102
|
+
*/
|
|
6103
|
+
"Confirmed": "Confirmado",
|
|
6104
|
+
"Packed": "Preparado",
|
|
6105
|
+
"Shipped": "Enviado",
|
|
6106
|
+
"Delivered": "Entregado",
|
|
6107
|
+
"Cancelled": "Cancelado",
|
|
6108
|
+
"Refunded": "Reembolsado",
|
|
6109
|
+
"In progress": "En curso"
|
|
6110
|
+
};
|
|
6111
|
+
const CATALOGUES = { es: ES };
|
|
6112
|
+
function catalogueFor(locale) {
|
|
6113
|
+
if (!locale) return null;
|
|
6114
|
+
const tag = locale.toLowerCase();
|
|
6115
|
+
return CATALOGUES[tag] ?? CATALOGUES[tag.split("-")[0]] ?? null;
|
|
6116
|
+
}
|
|
6117
|
+
function interpolate(template, args) {
|
|
6118
|
+
if (args.length === 0) return template;
|
|
6119
|
+
return template.replace(/\{(\d)\}/g, (whole, digit) => {
|
|
6120
|
+
const value2 = args[Number(digit)];
|
|
6121
|
+
return value2 === void 0 ? whole : String(value2);
|
|
6122
|
+
});
|
|
6123
|
+
}
|
|
6124
|
+
function translate(locale, source, ...args) {
|
|
6125
|
+
const catalogue = catalogueFor(locale);
|
|
6126
|
+
return interpolate(catalogue?.[source] ?? source, args);
|
|
6127
|
+
}
|
|
6128
|
+
function useT() {
|
|
6129
|
+
const locale = useLocale();
|
|
6130
|
+
return useCallback(
|
|
6131
|
+
(source, ...args) => translate(locale, source, ...args),
|
|
6132
|
+
[locale]
|
|
6133
|
+
);
|
|
6134
|
+
}
|
|
5912
6135
|
function ScreenSkeleton({ tone, shape = "media" }) {
|
|
5913
|
-
|
|
6136
|
+
const t = useT();
|
|
6137
|
+
return /* @__PURE__ */ jsx(ShopSurface, { tone, fill: true, className: styles$L.root, children: /* @__PURE__ */ jsx("div", { className: styles$L.inner, role: "status", "aria-label": t("Loading"), children: shape === "media" ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
5914
6138
|
/* @__PURE__ */ jsx(Skeleton, { className: styles$L.media }),
|
|
5915
6139
|
/* @__PURE__ */ jsxs("div", { className: styles$L.lines, children: [
|
|
5916
6140
|
/* @__PURE__ */ jsx(Skeleton, { height: 22, className: styles$L.lineWide }),
|
|
@@ -5988,6 +6212,22 @@ const TREATMENTS = {
|
|
|
5988
6212
|
body: "This category is no longer available.",
|
|
5989
6213
|
retriable: false
|
|
5990
6214
|
},
|
|
6215
|
+
/*
|
|
6216
|
+
* Contracts 2.40.0, and the fan never asked for a size chart directly: they opened a
|
|
6217
|
+
* PDP whose product points at one that has since been deleted in the console. So the
|
|
6218
|
+
* copy is about the chart rather than about the page, and it is not retriable — asking
|
|
6219
|
+
* again returns the same 404 until somebody attaches a different chart.
|
|
6220
|
+
*
|
|
6221
|
+
* `Record<ErrorCode, …>` is what caught this: adding a code to the contracts package
|
|
6222
|
+
* breaks this build until the SDK has a treatment for it, which is the point. The gap
|
|
6223
|
+
* only showed up on a machine whose contracts had moved to 2.40.0, because ours had
|
|
6224
|
+
* not.
|
|
6225
|
+
*/
|
|
6226
|
+
size_chart_not_found: {
|
|
6227
|
+
title: "Size guide unavailable",
|
|
6228
|
+
body: "We could not load the size guide for this item.",
|
|
6229
|
+
retriable: false
|
|
6230
|
+
},
|
|
5991
6231
|
amount_mismatch: {
|
|
5992
6232
|
title: "Price updated",
|
|
5993
6233
|
body: "The total changed since you started. Review the updated amount and try again.",
|
|
@@ -6090,12 +6330,13 @@ const styles$J = {
|
|
|
6090
6330
|
body: body$7
|
|
6091
6331
|
};
|
|
6092
6332
|
function ErrorState({ code, title: title2, body: body3, onRetry, retryLabel }) {
|
|
6333
|
+
const t = useT();
|
|
6093
6334
|
const treatment = treatmentFor(code);
|
|
6094
6335
|
const showRetry = Boolean(onRetry) && treatment.retriable;
|
|
6095
6336
|
return /* @__PURE__ */ jsxs("div", { className: styles$J.root, role: "alert", children: [
|
|
6096
|
-
/* @__PURE__ */ jsx("h2", { className: styles$J.title, children: title2 ?? treatment.title }),
|
|
6097
|
-
/* @__PURE__ */ jsx("p", { className: styles$J.body, children: body3 ?? treatment.body }),
|
|
6098
|
-
showRetry && /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onRetry, children: retryLabel ?? "Try again" })
|
|
6337
|
+
/* @__PURE__ */ jsx("h2", { className: styles$J.title, children: title2 ?? t(treatment.title) }),
|
|
6338
|
+
/* @__PURE__ */ jsx("p", { className: styles$J.body, children: body3 ?? t(treatment.body) }),
|
|
6339
|
+
showRetry && /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onRetry, children: retryLabel ?? t("Try again") })
|
|
6099
6340
|
] });
|
|
6100
6341
|
}
|
|
6101
6342
|
const STATUS_LABEL = {
|
|
@@ -6115,9 +6356,10 @@ const STATUS_TONE = {
|
|
|
6115
6356
|
refunded: "critical"
|
|
6116
6357
|
};
|
|
6117
6358
|
function StatusBadge({ status }) {
|
|
6359
|
+
const t = useT();
|
|
6118
6360
|
const tone = STATUS_TONE[status] ?? "neutral";
|
|
6119
6361
|
const label2 = STATUS_LABEL[status] ?? status;
|
|
6120
|
-
return /* @__PURE__ */ jsx(Badge, { tone, children: label2 });
|
|
6362
|
+
return /* @__PURE__ */ jsx(Badge, { tone, children: t(label2) });
|
|
6121
6363
|
}
|
|
6122
6364
|
const viewport = "_viewport_5aafz_14";
|
|
6123
6365
|
const anchor = "_anchor_5aafz_41";
|
|
@@ -6287,52 +6529,6 @@ function ToastProvider({ children }) {
|
|
|
6287
6529
|
}) })
|
|
6288
6530
|
] });
|
|
6289
6531
|
}
|
|
6290
|
-
const MINOR_UNIT_EXPONENT = {
|
|
6291
|
-
JPY: 0,
|
|
6292
|
-
KRW: 0,
|
|
6293
|
-
VND: 0,
|
|
6294
|
-
CLP: 0,
|
|
6295
|
-
ISK: 0,
|
|
6296
|
-
BHD: 3,
|
|
6297
|
-
KWD: 3,
|
|
6298
|
-
OMR: 3,
|
|
6299
|
-
TND: 3,
|
|
6300
|
-
JOD: 3
|
|
6301
|
-
};
|
|
6302
|
-
function minorUnitExponent(currency) {
|
|
6303
|
-
return MINOR_UNIT_EXPONENT[currency.toUpperCase()] ?? 2;
|
|
6304
|
-
}
|
|
6305
|
-
function formatMoney(money2, locale) {
|
|
6306
|
-
const exponent = minorUnitExponent(money2.currency);
|
|
6307
|
-
const major = money2.amount / 10 ** exponent;
|
|
6308
|
-
try {
|
|
6309
|
-
return new Intl.NumberFormat(locale, {
|
|
6310
|
-
style: "currency",
|
|
6311
|
-
currency: money2.currency
|
|
6312
|
-
}).format(major);
|
|
6313
|
-
} catch {
|
|
6314
|
-
return `${major.toFixed(exponent)} ${money2.currency}`;
|
|
6315
|
-
}
|
|
6316
|
-
}
|
|
6317
|
-
function discountPct(price2, compareAt2) {
|
|
6318
|
-
if (!compareAt2) return void 0;
|
|
6319
|
-
if (compareAt2.currency !== price2.currency) return void 0;
|
|
6320
|
-
if (compareAt2.amount <= price2.amount) return void 0;
|
|
6321
|
-
const pct = Math.round((compareAt2.amount - price2.amount) / compareAt2.amount * 100);
|
|
6322
|
-
return pct > 0 ? pct : void 0;
|
|
6323
|
-
}
|
|
6324
|
-
function useMoney(defaultLocale) {
|
|
6325
|
-
const locale = useLocale(defaultLocale);
|
|
6326
|
-
const format = useCallback(
|
|
6327
|
-
(money2, localeOverride) => formatMoney(money2, localeOverride ?? locale),
|
|
6328
|
-
[locale]
|
|
6329
|
-
);
|
|
6330
|
-
return { format };
|
|
6331
|
-
}
|
|
6332
|
-
function useLocale(override) {
|
|
6333
|
-
const shop = useShopOptional();
|
|
6334
|
-
return override ?? shop?.locale ?? shop?.market?.lang ?? (typeof navigator !== "undefined" ? navigator.language : void 0);
|
|
6335
|
-
}
|
|
6336
6532
|
const badge$4 = "_badge_156ya_2";
|
|
6337
6533
|
const icon$3 = "_icon_156ya_18";
|
|
6338
6534
|
const styles$H = {
|
|
@@ -6629,26 +6825,27 @@ function OrderSummary({
|
|
|
6629
6825
|
rows = CART_ROWS,
|
|
6630
6826
|
discount: discount2
|
|
6631
6827
|
}) {
|
|
6828
|
+
const t = useT();
|
|
6632
6829
|
const { format } = useMoney();
|
|
6633
6830
|
const isDeferred = (key) => deferred.includes(key);
|
|
6634
6831
|
const visible = rows.filter((row2) => !hidden.includes(row2.key)).filter((row2) => row2.key !== "discount" || discount2 !== void 0);
|
|
6635
6832
|
return /* @__PURE__ */ jsx("dl", { className: styles$E.summary, children: visible.map(({ label: label2, key }) => {
|
|
6636
6833
|
if (key === "discount" && discount2) {
|
|
6637
6834
|
return /* @__PURE__ */ jsxs("div", { className: [styles$E.row, styles$E.discount].join(" "), children: [
|
|
6638
|
-
/* @__PURE__ */ jsx("dt", { children: label2 }),
|
|
6835
|
+
/* @__PURE__ */ jsx("dt", { children: t(label2) }),
|
|
6639
6836
|
/* @__PURE__ */ jsx("dd", { children: `−${format(discount2)}` })
|
|
6640
6837
|
] }, key);
|
|
6641
6838
|
}
|
|
6642
6839
|
const pending2 = key !== "total" && isDeferred(key);
|
|
6643
6840
|
return /* @__PURE__ */ jsxs("div", { className: styles$E.row, children: [
|
|
6644
|
-
/* @__PURE__ */ jsx("dt", { children: label2 }),
|
|
6645
|
-
/* @__PURE__ */ jsx("dd", { className: pending2 ? styles$E.pending : void 0, children: pending2 ? "Calculated at checkout" : renderValue(key, pricing, format) })
|
|
6841
|
+
/* @__PURE__ */ jsx("dt", { children: t(label2) }),
|
|
6842
|
+
/* @__PURE__ */ jsx("dd", { className: pending2 ? styles$E.pending : void 0, children: pending2 ? t("Calculated at checkout") : renderValue(key, pricing, format, t) })
|
|
6646
6843
|
] }, key);
|
|
6647
6844
|
}) });
|
|
6648
6845
|
}
|
|
6649
|
-
function renderValue(key, pricing, format) {
|
|
6846
|
+
function renderValue(key, pricing, format, t) {
|
|
6650
6847
|
if (key === "shipping" && pricing.shipping.amount === 0) {
|
|
6651
|
-
return /* @__PURE__ */ jsx("span", { className: styles$E.free, children: "Free" });
|
|
6848
|
+
return /* @__PURE__ */ jsx("span", { className: styles$E.free, children: t("Free") });
|
|
6652
6849
|
}
|
|
6653
6850
|
return key === "discount" ? null : format(pricing[key]);
|
|
6654
6851
|
}
|
|
@@ -6694,9 +6891,10 @@ const SUMMARY_ROWS = [
|
|
|
6694
6891
|
];
|
|
6695
6892
|
function OrderLine({ item: item2 }) {
|
|
6696
6893
|
const { format } = useMoney();
|
|
6894
|
+
const t = useT();
|
|
6697
6895
|
const compareAt2 = item2.compare_at_unit_price;
|
|
6698
6896
|
const pct = compareAt2 ? discountPct(item2.unit_price, compareAt2) : void 0;
|
|
6699
|
-
const details2 = detailsOf(item2);
|
|
6897
|
+
const details2 = detailsOf(item2, t);
|
|
6700
6898
|
return /* @__PURE__ */ jsxs("li", { className: styles$D.line, children: [
|
|
6701
6899
|
/* @__PURE__ */ jsx("div", { className: styles$D.thumb, children: item2.image ? /* @__PURE__ */ jsx(ShopImage, { src: item2.image, alt: "", fill: true, sizes: "48px", className: styles$D.image }) : /* @__PURE__ */ jsx("div", { className: styles$D.placeholder, "aria-hidden": "true" }) }),
|
|
6702
6900
|
/* @__PURE__ */ jsxs("div", { className: styles$D.lineBody, children: [
|
|
@@ -6718,23 +6916,26 @@ function OrderLine({ item: item2 }) {
|
|
|
6718
6916
|
] });
|
|
6719
6917
|
}
|
|
6720
6918
|
function OrderLines({ order }) {
|
|
6721
|
-
|
|
6919
|
+
const t = useT();
|
|
6920
|
+
return /* @__PURE__ */ jsx("ul", { className: styles$D.lines, "aria-label": t("Items"), children: order.items.map((item2) => /* @__PURE__ */ jsx(OrderLine, { item: item2 }, item2.line_ref)) });
|
|
6722
6921
|
}
|
|
6723
6922
|
function ShippingAddressCard({ order }) {
|
|
6724
|
-
|
|
6923
|
+
const t = useT();
|
|
6924
|
+
return /* @__PURE__ */ jsxs("section", { className: styles$D.card, "aria-label": t("Shipping address"), children: [
|
|
6725
6925
|
/* @__PURE__ */ jsx("h2", { className: styles$D.cardTitle, children: "Shipping address" }),
|
|
6726
6926
|
/* @__PURE__ */ jsx("p", { className: styles$D.cardBody, children: formatAddress(order.ship_to) })
|
|
6727
6927
|
] });
|
|
6728
6928
|
}
|
|
6729
6929
|
function OrderSummaryCard({ order }) {
|
|
6730
|
-
|
|
6930
|
+
const t = useT();
|
|
6931
|
+
return /* @__PURE__ */ jsxs("section", { className: [styles$D.card, styles$D.summaryCard].join(" "), "aria-label": t("Order summary"), children: [
|
|
6731
6932
|
/* @__PURE__ */ jsx("h2", { className: styles$D.cardTitle, children: "Order summary" }),
|
|
6732
6933
|
/* @__PURE__ */ jsx(OrderSummary, { pricing: toPricing(order), rows: rowsFor(order), discount: order.totals.discount })
|
|
6733
6934
|
] });
|
|
6734
6935
|
}
|
|
6735
|
-
function detailsOf(item2) {
|
|
6736
|
-
const pairs = variantPairs(item2.attributes).map((p) => `${p.label}: ${p.value}`);
|
|
6737
|
-
return item2.qty > 1 ? [...pairs,
|
|
6936
|
+
function detailsOf(item2, t) {
|
|
6937
|
+
const pairs = variantPairs(item2.attributes).map((p) => `${t(p.label)}: ${p.value}`);
|
|
6938
|
+
return item2.qty > 1 ? [...pairs, t("Qty: {0}", item2.qty)] : pairs;
|
|
6738
6939
|
}
|
|
6739
6940
|
function rowsFor(order) {
|
|
6740
6941
|
if (order.totals.tax.amount === 0) return SUMMARY_ROWS;
|
|
@@ -6994,6 +7195,7 @@ function OrderTrackingContent({
|
|
|
6994
7195
|
onCancelled,
|
|
6995
7196
|
onReorder
|
|
6996
7197
|
}) {
|
|
7198
|
+
const t = useT();
|
|
6997
7199
|
const { api } = useShop();
|
|
6998
7200
|
const locale = useLocale(localeProp);
|
|
6999
7201
|
const [order, setOrder] = useState(null);
|
|
@@ -7037,7 +7239,7 @@ function OrderTrackingContent({
|
|
|
7037
7239
|
emit({ type: "order_cancellation_requested", orderRef, reason: reason2 });
|
|
7038
7240
|
onCancelled?.(updated);
|
|
7039
7241
|
} catch (err) {
|
|
7040
|
-
setCancelError(treatmentFor(codeOf(err)).body);
|
|
7242
|
+
setCancelError(t(treatmentFor(codeOf(err)).body));
|
|
7041
7243
|
} finally {
|
|
7042
7244
|
setCancelling(false);
|
|
7043
7245
|
}
|
|
@@ -7066,7 +7268,7 @@ function OrderTrackingContent({
|
|
|
7066
7268
|
] });
|
|
7067
7269
|
}
|
|
7068
7270
|
return /* @__PURE__ */ jsxs("div", { className: styles$A.page, children: [
|
|
7069
|
-
/* @__PURE__ */ jsxs("section", { className: styles$A.widget, "aria-label": "Delivery status", children: [
|
|
7271
|
+
/* @__PURE__ */ jsxs("section", { className: styles$A.widget, "aria-label": t("Delivery status"), children: [
|
|
7070
7272
|
/* @__PURE__ */ jsxs("div", { className: styles$A.titleRow, children: [
|
|
7071
7273
|
/* @__PURE__ */ jsx("h1", { className: styles$A.headline, children: `Order #${shortRef$1(order.order_ref)}` }),
|
|
7072
7274
|
order.tracking?.url && /* @__PURE__ */ jsxs(
|
|
@@ -7664,9 +7866,10 @@ const TONE = {
|
|
|
7664
7866
|
cancelled: "cancelled"
|
|
7665
7867
|
};
|
|
7666
7868
|
function OrderStatusBadge({ status }) {
|
|
7869
|
+
const t = useT();
|
|
7667
7870
|
const label2 = LABEL[status] ?? status.replace(/_/g, " ");
|
|
7668
7871
|
const tone = TONE[status] ?? "progress";
|
|
7669
|
-
return /* @__PURE__ */ jsx("span", { className: [styles$v.badge, styles$v[tone]].join(" "), children: label2 });
|
|
7872
|
+
return /* @__PURE__ */ jsx("span", { className: [styles$v.badge, styles$v[tone]].join(" "), children: t(label2) });
|
|
7670
7873
|
}
|
|
7671
7874
|
const page$1 = "_page_6xodo_2";
|
|
7672
7875
|
const empty = "_empty_6xodo_22";
|
|
@@ -7716,6 +7919,7 @@ function OrderListView(props) {
|
|
|
7716
7919
|
return /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, children: /* @__PURE__ */ jsx(OrderListContent, { ...props }) });
|
|
7717
7920
|
}
|
|
7718
7921
|
function OrderListContent({ onOpenOrder, onStartShopping, locale: localeProp }) {
|
|
7922
|
+
const t = useT();
|
|
7719
7923
|
const { api } = useShop();
|
|
7720
7924
|
const locale = useLocale(localeProp);
|
|
7721
7925
|
const [orders2, setOrders] = useState([]);
|
|
@@ -7749,7 +7953,7 @@ function OrderListContent({ onOpenOrder, onStartShopping, locale: localeProp })
|
|
|
7749
7953
|
return /* @__PURE__ */ jsx("div", { className: styles$u.empty, children: /* @__PURE__ */ jsx(
|
|
7750
7954
|
EmptyState,
|
|
7751
7955
|
{
|
|
7752
|
-
title: "Nothing here yet",
|
|
7956
|
+
title: t("Nothing here yet"),
|
|
7753
7957
|
body: "Your orders will show up here once you've shopped.",
|
|
7754
7958
|
...onStartShopping ? {
|
|
7755
7959
|
action: /* @__PURE__ */ jsx("button", { type: "button", className: styles$u.cta, onClick: onStartShopping, children: "Continue shopping" })
|
|
@@ -7991,8 +8195,9 @@ const styles$r = {
|
|
|
7991
8195
|
clear
|
|
7992
8196
|
};
|
|
7993
8197
|
function FilterBar({ options: options2, active, onToggle, onClear }) {
|
|
8198
|
+
const t = useT();
|
|
7994
8199
|
const hasActive = active.length > 0;
|
|
7995
|
-
return /* @__PURE__ */ jsxs("div", { className: styles$r.bar, role: "group", "aria-label": "Filters", children: [
|
|
8200
|
+
return /* @__PURE__ */ jsxs("div", { className: styles$r.bar, role: "group", "aria-label": t("Filters"), children: [
|
|
7996
8201
|
/* @__PURE__ */ jsx("div", { className: styles$r.chips, children: options2.map((opt) => {
|
|
7997
8202
|
const on2 = active.includes(opt.value);
|
|
7998
8203
|
return /* @__PURE__ */ jsx(
|
|
@@ -8022,6 +8227,7 @@ function ProductGrid({
|
|
|
8022
8227
|
initialCursor,
|
|
8023
8228
|
filters = []
|
|
8024
8229
|
}) {
|
|
8230
|
+
const t = useT();
|
|
8025
8231
|
const { api, market, emit } = useShop();
|
|
8026
8232
|
const [products, setProducts] = useState(initialProducts);
|
|
8027
8233
|
const [cursor, setCursor] = useState(initialCursor);
|
|
@@ -8070,7 +8276,7 @@ function ProductGrid({
|
|
|
8070
8276
|
visible.length === 0 ? /* @__PURE__ */ jsx(
|
|
8071
8277
|
EmptyState,
|
|
8072
8278
|
{
|
|
8073
|
-
title: "No products",
|
|
8279
|
+
title: t("No products"),
|
|
8074
8280
|
body: "Nothing matches these filters.",
|
|
8075
8281
|
action: active.length > 0 ? /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setActive([]), children: "Clear filters" }) : void 0
|
|
8076
8282
|
}
|
|
@@ -8129,6 +8335,7 @@ const styles$o = {
|
|
|
8129
8335
|
};
|
|
8130
8336
|
const DISMISS_THRESHOLD_PX = 96;
|
|
8131
8337
|
function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }) {
|
|
8338
|
+
const t = useT();
|
|
8132
8339
|
const sheetRef = useRef(null);
|
|
8133
8340
|
const dragStartY = useRef(null);
|
|
8134
8341
|
const dragDistance = useRef(0);
|
|
@@ -8182,7 +8389,7 @@ function BottomSheet({ open, onClose, title: title2, children, footer: footer2 }
|
|
|
8182
8389
|
),
|
|
8183
8390
|
/* @__PURE__ */ jsxs("div", { className: styles$o.header, children: [
|
|
8184
8391
|
/* @__PURE__ */ jsx("h2", { id: titleId, className: styles$o.title, children: title2 }),
|
|
8185
|
-
/* @__PURE__ */ jsx("button", { type: "button", className: styles$o.close, onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
|
|
8392
|
+
/* @__PURE__ */ jsx("button", { type: "button", className: styles$o.close, onClick: onClose, "aria-label": t("Close"), children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
|
|
8186
8393
|
"path",
|
|
8187
8394
|
{
|
|
8188
8395
|
d: "M6 6l12 12M18 6L6 18",
|
|
@@ -8203,9 +8410,6 @@ const LOW_STOCK_THRESHOLD = 5;
|
|
|
8203
8410
|
function isLowStock(available) {
|
|
8204
8411
|
return available !== void 0 && available > 0 && available <= LOW_STOCK_THRESHOLD;
|
|
8205
8412
|
}
|
|
8206
|
-
function lowStockLabel(available) {
|
|
8207
|
-
return `Only ${available} left`;
|
|
8208
|
-
}
|
|
8209
8413
|
let idCounter = 0;
|
|
8210
8414
|
function useStableId(prefix) {
|
|
8211
8415
|
const [id] = useState(() => `${prefix}-${idCounter += 1}`);
|
|
@@ -8263,6 +8467,7 @@ function QtyStepper({
|
|
|
8263
8467
|
disabled: disabled2,
|
|
8264
8468
|
capDescribedBy
|
|
8265
8469
|
}) {
|
|
8470
|
+
const t = useT();
|
|
8266
8471
|
const ownCapId = useStableId("qty-cap");
|
|
8267
8472
|
const atMax = max !== void 0 && qty >= max;
|
|
8268
8473
|
const capId = capDescribedBy ?? ownCapId;
|
|
@@ -8286,7 +8491,7 @@ function QtyStepper({
|
|
|
8286
8491
|
className: styles$n.button,
|
|
8287
8492
|
onClick: decrement,
|
|
8288
8493
|
disabled: disabled2,
|
|
8289
|
-
"aria-label": willDelete ? "Remove item" : "Decrease quantity",
|
|
8494
|
+
"aria-label": willDelete ? t("Remove item") : t("Decrease quantity"),
|
|
8290
8495
|
children: willDelete ? /* @__PURE__ */ jsx(TrashIcon, {}) : /* @__PURE__ */ jsx(MinusIcon, {})
|
|
8291
8496
|
}
|
|
8292
8497
|
),
|
|
@@ -8298,13 +8503,13 @@ function QtyStepper({
|
|
|
8298
8503
|
className: styles$n.button,
|
|
8299
8504
|
onClick: increment,
|
|
8300
8505
|
disabled: disabled2 || atMax,
|
|
8301
|
-
"aria-label": "Increase quantity",
|
|
8506
|
+
"aria-label": t("Increase quantity"),
|
|
8302
8507
|
"aria-describedby": atMax ? capId : void 0,
|
|
8303
8508
|
children: /* @__PURE__ */ jsx(PlusIcon, {})
|
|
8304
8509
|
}
|
|
8305
8510
|
)
|
|
8306
8511
|
] }),
|
|
8307
|
-
atMax && capDescribedBy === void 0 && /* @__PURE__ */ jsx("span", { id: ownCapId, className: styles$n.cap, role: "status", children: max === 0 ? "Out of stock" :
|
|
8512
|
+
atMax && capDescribedBy === void 0 && /* @__PURE__ */ jsx("span", { id: ownCapId, className: styles$n.cap, role: "status", children: max === 0 ? t("Out of stock") : t("Only {0} left", max) })
|
|
8308
8513
|
] });
|
|
8309
8514
|
}
|
|
8310
8515
|
const line = "_line_1s2s6_6";
|
|
@@ -8358,6 +8563,7 @@ function CartLineItem({
|
|
|
8358
8563
|
onRemove,
|
|
8359
8564
|
pending: pending2
|
|
8360
8565
|
}) {
|
|
8566
|
+
const t = useT();
|
|
8361
8567
|
const { format } = useMoney();
|
|
8362
8568
|
const displayTitle = title2 ?? item2.title ?? item2.sku;
|
|
8363
8569
|
const displayImage = image2 ?? item2.image;
|
|
@@ -8379,7 +8585,7 @@ function CartLineItem({
|
|
|
8379
8585
|
/* @__PURE__ */ jsxs("div", { className: styles$m.meta, children: [
|
|
8380
8586
|
/* @__PURE__ */ jsx("span", { className: styles$m.title, children: displayTitle }),
|
|
8381
8587
|
pairs.length > 0 && /* @__PURE__ */ jsx("div", { className: styles$m.details, children: pairs.map(({ key, label: label2, value: value2 }) => /* @__PURE__ */ jsxs("span", { className: styles$m.detail, children: [
|
|
8382
|
-
label2,
|
|
8588
|
+
t(label2),
|
|
8383
8589
|
": ",
|
|
8384
8590
|
value2
|
|
8385
8591
|
] }, key)) })
|
|
@@ -8402,7 +8608,7 @@ function CartLineItem({
|
|
|
8402
8608
|
)
|
|
8403
8609
|
] })
|
|
8404
8610
|
] }),
|
|
8405
|
-
lowStock2 && /* @__PURE__ */ jsx("div", { className: styles$m.labels, children: /* @__PURE__ */ jsx("span", { id: noticeId, className: styles$m.lowStock, role: "status", children:
|
|
8611
|
+
lowStock2 && /* @__PURE__ */ jsx("div", { className: styles$m.labels, children: /* @__PURE__ */ jsx("span", { id: noticeId, className: styles$m.lowStock, role: "status", children: t("Only {0} left", available) }) })
|
|
8406
8612
|
] });
|
|
8407
8613
|
}
|
|
8408
8614
|
const box$1 = "_box_1cf1a_1";
|
|
@@ -8418,7 +8624,8 @@ const styles$l = {
|
|
|
8418
8624
|
divider: divider$1
|
|
8419
8625
|
};
|
|
8420
8626
|
function ShippingInfo() {
|
|
8421
|
-
|
|
8627
|
+
const t = useT();
|
|
8628
|
+
return /* @__PURE__ */ jsxs("section", { className: styles$l.box, "aria-label": t("Shipping and returns"), children: [
|
|
8422
8629
|
/* @__PURE__ */ jsxs("div", { className: styles$l.row, children: [
|
|
8423
8630
|
/* @__PURE__ */ jsxs("svg", { className: styles$l.icon, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
|
|
8424
8631
|
/* @__PURE__ */ jsx(
|
|
@@ -8500,13 +8707,15 @@ const styles$j = {
|
|
|
8500
8707
|
lines
|
|
8501
8708
|
};
|
|
8502
8709
|
function CartView(props = {}) {
|
|
8503
|
-
|
|
8710
|
+
const t = useT();
|
|
8711
|
+
useSetScreenTitle(t("Cart"));
|
|
8504
8712
|
return /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, className: styles$j.surface, children: /* @__PURE__ */ jsx(CartViewContent, { ...props }) });
|
|
8505
8713
|
}
|
|
8506
8714
|
function CartViewContent({
|
|
8507
8715
|
onContinueShopping,
|
|
8508
|
-
checkoutLabel
|
|
8716
|
+
checkoutLabel
|
|
8509
8717
|
} = {}) {
|
|
8718
|
+
const t = useT();
|
|
8510
8719
|
const toast2 = useToast();
|
|
8511
8720
|
const { api, emit } = useShop();
|
|
8512
8721
|
const [cart2, setCart] = useState(null);
|
|
@@ -8556,7 +8765,7 @@ function CartViewContent({
|
|
|
8556
8765
|
} catch (err) {
|
|
8557
8766
|
if (optimistic) setCart(snapshot);
|
|
8558
8767
|
const code = codeOf(err);
|
|
8559
|
-
toast2.show(treatmentFor(code).body, code === "out_of_stock" ? "critical" : "neutral");
|
|
8768
|
+
toast2.show(t(treatmentFor(code).body), code === "out_of_stock" ? "critical" : "neutral");
|
|
8560
8769
|
return false;
|
|
8561
8770
|
} finally {
|
|
8562
8771
|
setPendingSku(null);
|
|
@@ -8582,7 +8791,7 @@ function CartViewContent({
|
|
|
8582
8791
|
description: describeLine(removed),
|
|
8583
8792
|
image: removed.image,
|
|
8584
8793
|
action: {
|
|
8585
|
-
label: "Undo",
|
|
8794
|
+
label: t("Undo"),
|
|
8586
8795
|
onAction: () => {
|
|
8587
8796
|
void mutate(sku, () => api.cart.addItem({ sku, qty: removed.qty })).then((undone) => {
|
|
8588
8797
|
if (undone) emit({ type: "add_to_cart", sku, qty: removed.qty });
|
|
@@ -8616,7 +8825,7 @@ function CartViewContent({
|
|
|
8616
8825
|
/* @__PURE__ */ jsx(
|
|
8617
8826
|
EmptyState,
|
|
8618
8827
|
{
|
|
8619
|
-
title: "Nothing here yet",
|
|
8828
|
+
title: t("Nothing here yet"),
|
|
8620
8829
|
body: "Your items will show up here once you've added to your cart.",
|
|
8621
8830
|
action: (
|
|
8622
8831
|
// One label, because the design gives one. In the sheet, "continue shopping"
|
|
@@ -8638,7 +8847,7 @@ function CartViewContent({
|
|
|
8638
8847
|
window.location.assign(checkout_url);
|
|
8639
8848
|
} catch (err) {
|
|
8640
8849
|
const code = codeOf(err);
|
|
8641
|
-
toast2.show(treatmentFor(code).body, "critical");
|
|
8850
|
+
toast2.show(t(treatmentFor(code).body), "critical");
|
|
8642
8851
|
setHandingOff(false);
|
|
8643
8852
|
}
|
|
8644
8853
|
}
|
|
@@ -8647,7 +8856,7 @@ function CartViewContent({
|
|
|
8647
8856
|
/* @__PURE__ */ jsxs("div", { className: styles$j.body, children: [
|
|
8648
8857
|
/* @__PURE__ */ jsxs("section", { className: styles$j.items, children: [
|
|
8649
8858
|
/* @__PURE__ */ jsxs("div", { className: styles$j.sectionHeader, children: [
|
|
8650
|
-
/* @__PURE__ */ jsx("h2", { className: styles$j.sectionTitle, children: "Items" }),
|
|
8859
|
+
/* @__PURE__ */ jsx("h2", { className: styles$j.sectionTitle, children: t("Items") }),
|
|
8651
8860
|
/* @__PURE__ */ jsx("span", { className: styles$j.count, children: itemCount })
|
|
8652
8861
|
] }),
|
|
8653
8862
|
/* @__PURE__ */ jsx("ul", { className: styles$j.lines, children: cart2.items.map((item2) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
|
|
@@ -8673,7 +8882,7 @@ function CartViewContent({
|
|
|
8673
8882
|
}
|
|
8674
8883
|
)
|
|
8675
8884
|
] }),
|
|
8676
|
-
/* @__PURE__ */ jsx(StickyCtaBar, { variant: "divider", children: /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: () => void handOff(cart2), disabled: handingOff, children: checkoutLabel }) })
|
|
8885
|
+
/* @__PURE__ */ jsx(StickyCtaBar, { variant: "divider", children: /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: () => void handOff(cart2), disabled: handingOff, children: checkoutLabel ?? t("Proceed to checkout") }) })
|
|
8677
8886
|
] });
|
|
8678
8887
|
}
|
|
8679
8888
|
function describeLine(item2) {
|
|
@@ -8685,13 +8894,14 @@ function useCartSheet() {
|
|
|
8685
8894
|
return useContext(CartSheetContext);
|
|
8686
8895
|
}
|
|
8687
8896
|
function CartSheetProvider({ children }) {
|
|
8897
|
+
const t = useT();
|
|
8688
8898
|
const [isOpen, setIsOpen] = useState(false);
|
|
8689
8899
|
const open = useCallback(() => setIsOpen(true), []);
|
|
8690
8900
|
const close2 = useCallback(() => setIsOpen(false), []);
|
|
8691
8901
|
const api = useMemo(() => ({ open, close: close2, isOpen }), [open, close2, isOpen]);
|
|
8692
8902
|
return /* @__PURE__ */ jsxs(CartSheetContext.Provider, { value: api, children: [
|
|
8693
8903
|
children,
|
|
8694
|
-
isOpen && /* @__PURE__ */ jsx(BottomSheet, { open: true, onClose: close2, title: "Cart", children: /* @__PURE__ */ jsx(NoScreenTitle, { children: /* @__PURE__ */ jsx(CartView, { onContinueShopping: close2 }) }) })
|
|
8904
|
+
isOpen && /* @__PURE__ */ jsx(BottomSheet, { open: true, onClose: close2, title: t("Cart"), children: /* @__PURE__ */ jsx(NoScreenTitle, { children: /* @__PURE__ */ jsx(CartView, { onContinueShopping: close2 }) }) })
|
|
8695
8905
|
] });
|
|
8696
8906
|
}
|
|
8697
8907
|
const gallery = "_gallery_10mch_1";
|
|
@@ -8715,6 +8925,7 @@ const styles$i = {
|
|
|
8715
8925
|
dotActive: dotActive$2
|
|
8716
8926
|
};
|
|
8717
8927
|
function MediaGallery({ media: media2, alt }) {
|
|
8928
|
+
const t = useT();
|
|
8718
8929
|
const trackRef = useRef(null);
|
|
8719
8930
|
const [active, setActive] = useState(0);
|
|
8720
8931
|
useEffect(() => {
|
|
@@ -8750,7 +8961,7 @@ function MediaGallery({ media: media2, alt }) {
|
|
|
8750
8961
|
}
|
|
8751
8962
|
}
|
|
8752
8963
|
return /* @__PURE__ */ jsxs("div", { className: styles$i.gallery, children: [
|
|
8753
|
-
/* @__PURE__ */ jsx("button", { type: "button", className: styles$i.share, onClick: share2, "aria-label": "Share", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
|
|
8964
|
+
/* @__PURE__ */ jsx("button", { type: "button", className: styles$i.share, onClick: share2, "aria-label": t("Share"), children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
|
|
8754
8965
|
"path",
|
|
8755
8966
|
{
|
|
8756
8967
|
d: "M12 3v12M12 3 8 7m4-4 4 4M5 12v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6",
|
|
@@ -8771,7 +8982,7 @@ function MediaGallery({ media: media2, alt }) {
|
|
|
8771
8982
|
priority: i === 0
|
|
8772
8983
|
}
|
|
8773
8984
|
) }, src)) }),
|
|
8774
|
-
media2.length > 1 && /* @__PURE__ */ jsx("div", { className: styles$i.dots, role: "tablist", "aria-label": "Gallery pagination", children: media2.map((src, i) => /* @__PURE__ */ jsx(
|
|
8985
|
+
media2.length > 1 && /* @__PURE__ */ jsx("div", { className: styles$i.dots, role: "tablist", "aria-label": t("Gallery pagination"), children: media2.map((src, i) => /* @__PURE__ */ jsx(
|
|
8775
8986
|
"button",
|
|
8776
8987
|
{
|
|
8777
8988
|
type: "button",
|
|
@@ -8849,6 +9060,7 @@ function convert(cell, from, to) {
|
|
|
8849
9060
|
return (to === "in" ? n / CM_PER_INCH : n * CM_PER_INCH).toFixed(1);
|
|
8850
9061
|
}
|
|
8851
9062
|
function SizeGuideSheet({ guide, onClose }) {
|
|
9063
|
+
const t = useT();
|
|
8852
9064
|
const sheetRef = useRef(null);
|
|
8853
9065
|
const columns = guide.columns ?? [];
|
|
8854
9066
|
const rows = useMemo(() => guide.rows ?? [], [guide.rows]);
|
|
@@ -8873,7 +9085,7 @@ function SizeGuideSheet({ guide, onClose }) {
|
|
|
8873
9085
|
"aria-labelledby": "size-guide-title",
|
|
8874
9086
|
onClick: (e) => e.stopPropagation(),
|
|
8875
9087
|
children: [
|
|
8876
|
-
/* @__PURE__ */ jsx(SheetHeader, { onClose, closeLabel: "Close size guide" }),
|
|
9088
|
+
/* @__PURE__ */ jsx(SheetHeader, { onClose, closeLabel: t("Close size guide") }),
|
|
8877
9089
|
/* @__PURE__ */ jsxs("div", { className: styles$h.body, children: [
|
|
8878
9090
|
/* @__PURE__ */ jsxs("div", { className: styles$h.titles, children: [
|
|
8879
9091
|
/* @__PURE__ */ jsx("h2", { id: "size-guide-title", className: styles$h.title, children: guide.title }),
|
|
@@ -8953,10 +9165,11 @@ function SizeSelector({
|
|
|
8953
9165
|
error: error2 = false,
|
|
8954
9166
|
guide
|
|
8955
9167
|
}) {
|
|
9168
|
+
const t = useT();
|
|
8956
9169
|
const [guideOpen, setGuideOpen] = useState(false);
|
|
8957
9170
|
return /* @__PURE__ */ jsxs("section", { className: styles$g.root, "aria-labelledby": "size-heading", children: [
|
|
8958
9171
|
/* @__PURE__ */ jsx("div", { className: styles$g.header, children: /* @__PURE__ */ jsx("h2", { id: "size-heading", className: styles$g.title, children: "Size" }) }),
|
|
8959
|
-
/* @__PURE__ */ jsx("div", { className: styles$g.chips, role: "radiogroup", "aria-label": "Size", "aria-required": "true", children: sizes.map((size) => {
|
|
9172
|
+
/* @__PURE__ */ jsx("div", { className: styles$g.chips, role: "radiogroup", "aria-label": t("Size"), "aria-required": "true", children: sizes.map((size) => {
|
|
8960
9173
|
const isSelected = size.value === selected2;
|
|
8961
9174
|
const disabled2 = !size.available;
|
|
8962
9175
|
return /* @__PURE__ */ jsxs(
|
|
@@ -9042,13 +9255,14 @@ const styles$f = {
|
|
|
9042
9255
|
stockBadge
|
|
9043
9256
|
};
|
|
9044
9257
|
function ColorSelector({ colours, selected: selected2, onSelect }) {
|
|
9258
|
+
const t = useT();
|
|
9045
9259
|
return /* @__PURE__ */ jsxs("section", { className: styles$f.root, "aria-labelledby": "colour-heading", children: [
|
|
9046
9260
|
/* @__PURE__ */ jsxs("p", { className: styles$f.header, children: [
|
|
9047
9261
|
/* @__PURE__ */ jsx("span", { id: "colour-heading", className: styles$f.title, children: "Color:" }),
|
|
9048
9262
|
" ",
|
|
9049
9263
|
/* @__PURE__ */ jsx("span", { className: styles$f.value, children: selected2 ?? "Select" })
|
|
9050
9264
|
] }),
|
|
9051
|
-
/* @__PURE__ */ jsx("div", { className: styles$f.tiles, role: "radiogroup", "aria-label": "Color", "aria-required": "true", children: colours.map((c) => {
|
|
9265
|
+
/* @__PURE__ */ jsx("div", { className: styles$f.tiles, role: "radiogroup", "aria-label": t("Color"), "aria-required": "true", children: colours.map((c) => {
|
|
9052
9266
|
const isSelected = c.value === selected2;
|
|
9053
9267
|
const soldOut = !c.available;
|
|
9054
9268
|
const lowStock2 = !soldOut && isLowStock(c.remaining);
|
|
@@ -9094,6 +9308,7 @@ function VariantSelector({
|
|
|
9094
9308
|
onSelect,
|
|
9095
9309
|
labelAttribute
|
|
9096
9310
|
}) {
|
|
9311
|
+
const t = useT();
|
|
9097
9312
|
function labelFor(variant) {
|
|
9098
9313
|
if (labelAttribute && variant.attributes[labelAttribute]) {
|
|
9099
9314
|
return variant.attributes[labelAttribute];
|
|
@@ -9103,7 +9318,7 @@ function VariantSelector({
|
|
|
9103
9318
|
}
|
|
9104
9319
|
return /* @__PURE__ */ jsxs("fieldset", { className: styles$e.fieldset, children: [
|
|
9105
9320
|
/* @__PURE__ */ jsx("legend", { className: styles$e.legend, children: "Select an option" }),
|
|
9106
|
-
/* @__PURE__ */ jsx("div", { className: styles$e.options, role: "radiogroup", "aria-label": "Variant", children: variants.map((variant) => {
|
|
9321
|
+
/* @__PURE__ */ jsx("div", { className: styles$e.options, role: "radiogroup", "aria-label": t("Variant"), children: variants.map((variant) => {
|
|
9107
9322
|
const selected2 = variant.sku === selectedSku;
|
|
9108
9323
|
const disabled2 = !variant.in_stock;
|
|
9109
9324
|
return /* @__PURE__ */ jsxs(
|
|
@@ -9266,6 +9481,7 @@ const styles$a = {
|
|
|
9266
9481
|
oos
|
|
9267
9482
|
};
|
|
9268
9483
|
function ProductDetail({ product, inventory: inventory2, recommendations = [] }) {
|
|
9484
|
+
const t = useT();
|
|
9269
9485
|
const toast2 = useToast();
|
|
9270
9486
|
const { api, emit } = useShop();
|
|
9271
9487
|
const cartSheet = useCartSheet();
|
|
@@ -9344,7 +9560,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
|
|
|
9344
9560
|
return false;
|
|
9345
9561
|
}
|
|
9346
9562
|
emit({ type: "error", code, scope: "cart.addItem" });
|
|
9347
|
-
toast2.show(treatmentFor(code).body, code === "out_of_stock" ? "critical" : "neutral");
|
|
9563
|
+
toast2.show(t(treatmentFor(code).body), code === "out_of_stock" ? "critical" : "neutral");
|
|
9348
9564
|
return false;
|
|
9349
9565
|
}
|
|
9350
9566
|
}
|
|
@@ -9367,7 +9583,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
|
|
|
9367
9583
|
return;
|
|
9368
9584
|
}
|
|
9369
9585
|
emit({ type: "error", code, scope: "stockAlerts.create" });
|
|
9370
|
-
toast2.show(treatmentFor(code).body, "neutral");
|
|
9586
|
+
toast2.show(t(treatmentFor(code).body), "neutral");
|
|
9371
9587
|
} finally {
|
|
9372
9588
|
setBusy(null);
|
|
9373
9589
|
}
|
|
@@ -9399,7 +9615,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
|
|
|
9399
9615
|
description: [product.title, size && `Size ${size}`].filter(Boolean).join(" · "),
|
|
9400
9616
|
image: variant?.image ?? product.media[0],
|
|
9401
9617
|
// Falls back to the /cart route where the sheet provider isn't mounted.
|
|
9402
|
-
action: cartSheet || navigate ? { label: "View cart", onAction: openCart } : void 0,
|
|
9618
|
+
action: cartSheet || navigate ? { label: t("View cart"), onAction: openCart } : void 0,
|
|
9403
9619
|
// Points the caret at the cart icon this just landed in.
|
|
9404
9620
|
anchor: "cart"
|
|
9405
9621
|
});
|
|
@@ -9409,7 +9625,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
|
|
|
9409
9625
|
const available = selectedVariant?.available ?? inventory2?.available ?? 0;
|
|
9410
9626
|
const lowStock2 = isLowStock(available);
|
|
9411
9627
|
const stockNotice = !purchasable || lowStock2;
|
|
9412
|
-
const availabilityLabel = !purchasable ? "Out of stock" : lowStock2 ?
|
|
9628
|
+
const availabilityLabel = !purchasable ? t("Out of stock") : lowStock2 ? t("Only {0} left", available) : "";
|
|
9413
9629
|
const cta2 = purchasable ? (
|
|
9414
9630
|
/*
|
|
9415
9631
|
* Three labels, one button (5241:71382 / 5295:75115 / 5268:72907). "Adding to cart"
|
|
@@ -9428,7 +9644,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
|
|
|
9428
9644
|
onClick: inCart ? openCart : handleAdd,
|
|
9429
9645
|
loading: busy === "add",
|
|
9430
9646
|
disabled: busy !== null,
|
|
9431
|
-
children: busy === "add" ? "Adding to cart" : inCart ? "Go to cart" : "Add to cart"
|
|
9647
|
+
children: busy === "add" ? t("Adding to cart") : inCart ? t("Go to cart") : t("Add to cart")
|
|
9432
9648
|
}
|
|
9433
9649
|
)
|
|
9434
9650
|
) : /* @__PURE__ */ jsx(
|
|
@@ -9438,7 +9654,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
|
|
|
9438
9654
|
onClick: handleRemind,
|
|
9439
9655
|
loading: busy === "remind",
|
|
9440
9656
|
disabled: alerted || busy !== null,
|
|
9441
|
-
children: alerted ? "We'll remind you" : "Remind me when available"
|
|
9657
|
+
children: alerted ? t("We'll remind you") : t("Remind me when available")
|
|
9442
9658
|
}
|
|
9443
9659
|
);
|
|
9444
9660
|
return /* @__PURE__ */ jsxs(ShopSurface, { tone: "light", fill: true, className: styles$a.page, children: [
|
|
@@ -9495,7 +9711,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
|
|
|
9495
9711
|
/* @__PURE__ */ jsx(
|
|
9496
9712
|
RailCarousel,
|
|
9497
9713
|
{
|
|
9498
|
-
title: "You may also like",
|
|
9714
|
+
title: t("You may also like"),
|
|
9499
9715
|
products: recommendations.filter((p) => p.sku !== product.sku),
|
|
9500
9716
|
inset: true
|
|
9501
9717
|
}
|
|
@@ -9623,6 +9839,7 @@ const styles$6 = {
|
|
|
9623
9839
|
disclaimer
|
|
9624
9840
|
};
|
|
9625
9841
|
function ReviewCarousel({ quotes, disclaimer: disclaimer2 }) {
|
|
9842
|
+
const t = useT();
|
|
9626
9843
|
const trackRef = useRef(null);
|
|
9627
9844
|
const [active, setActive] = useState(0);
|
|
9628
9845
|
useEffect(() => {
|
|
@@ -9632,7 +9849,7 @@ function ReviewCarousel({ quotes, disclaimer: disclaimer2 }) {
|
|
|
9632
9849
|
track2.addEventListener("scroll", onScroll, { passive: true });
|
|
9633
9850
|
return () => track2.removeEventListener("scroll", onScroll);
|
|
9634
9851
|
}, []);
|
|
9635
|
-
return /* @__PURE__ */ jsxs("section", { className: styles$6.section, "aria-label": "Reviews", children: [
|
|
9852
|
+
return /* @__PURE__ */ jsxs("section", { className: styles$6.section, "aria-label": t("Reviews"), children: [
|
|
9636
9853
|
/* @__PURE__ */ jsx("ul", { className: styles$6.track, ref: trackRef, children: quotes.map((q, i) => /* @__PURE__ */ jsxs("li", { className: styles$6.card, children: [
|
|
9637
9854
|
/* @__PURE__ */ jsxs("blockquote", { className: styles$6.quote, children: [
|
|
9638
9855
|
"“",
|
|
@@ -9656,7 +9873,8 @@ const styles$5 = {
|
|
|
9656
9873
|
body
|
|
9657
9874
|
};
|
|
9658
9875
|
function WhyUs({ items: items2 }) {
|
|
9659
|
-
|
|
9876
|
+
const t = useT();
|
|
9877
|
+
return /* @__PURE__ */ jsx("section", { className: styles$5.section, "aria-label": t("Why shop with us"), children: items2.map((it, i) => /* @__PURE__ */ jsxs("div", { className: styles$5.row, children: [
|
|
9660
9878
|
/* @__PURE__ */ jsx("p", { className: styles$5.title, children: it.title }),
|
|
9661
9879
|
/* @__PURE__ */ jsx("p", { className: styles$5.body, children: it.body })
|
|
9662
9880
|
] }, i)) });
|
|
@@ -9731,6 +9949,7 @@ function CategoryContent({ page: page2 }) {
|
|
|
9731
9949
|
] });
|
|
9732
9950
|
}
|
|
9733
9951
|
function CategoryView({ code, initialData, onNotFound }) {
|
|
9952
|
+
const t = useT();
|
|
9734
9953
|
const { api, market, emit } = useShop();
|
|
9735
9954
|
const [page2, setPage] = useState(initialData ?? null);
|
|
9736
9955
|
const [error2, setError] = useState();
|
|
@@ -9754,7 +9973,7 @@ function CategoryView({ code, initialData, onNotFound }) {
|
|
|
9754
9973
|
if (error2 === "category_not_found" && onNotFound) return /* @__PURE__ */ jsx(Fragment, { children: onNotFound() });
|
|
9755
9974
|
if (page2) return /* @__PURE__ */ jsx(CategoryContent, { page: page2 });
|
|
9756
9975
|
if (loading) return /* @__PURE__ */ jsx(ScreenSkeleton, { tone: "dark" });
|
|
9757
|
-
return /* @__PURE__ */ jsx(ShopSurface, { tone: "dark", fill: true, children: error2 ? /* @__PURE__ */ jsx(ErrorState, { code: error2 }) : /* @__PURE__ */ jsx(EmptyState, { title: "Category unavailable", body: "Check back soon." }) });
|
|
9976
|
+
return /* @__PURE__ */ jsx(ShopSurface, { tone: "dark", fill: true, children: error2 ? /* @__PURE__ */ jsx(ErrorState, { code: error2 }) : /* @__PURE__ */ jsx(EmptyState, { title: t("Category unavailable"), body: "Check back soon." }) });
|
|
9758
9977
|
}
|
|
9759
9978
|
function ProductView({
|
|
9760
9979
|
sku,
|
|
@@ -9762,6 +9981,7 @@ function ProductView({
|
|
|
9762
9981
|
showRecommendations = true,
|
|
9763
9982
|
onNotFound
|
|
9764
9983
|
}) {
|
|
9984
|
+
const t = useT();
|
|
9765
9985
|
const { api, market, emit } = useShop();
|
|
9766
9986
|
const [product, setProduct] = useState(initialData?.product ?? null);
|
|
9767
9987
|
const [inventory2, setInventory] = useState(initialData?.inventory ?? null);
|
|
@@ -9797,7 +10017,7 @@ function ProductView({
|
|
|
9797
10017
|
live = false;
|
|
9798
10018
|
};
|
|
9799
10019
|
}, [api, sku, market, emit, showRecommendations]);
|
|
9800
|
-
const unavailable = /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, children: /* @__PURE__ */ jsx(EmptyState, { title: "Item unavailable", body: "This product is no longer available." }) });
|
|
10020
|
+
const unavailable = /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, children: /* @__PURE__ */ jsx(EmptyState, { title: t("Item unavailable"), body: t("This product is no longer available.") }) });
|
|
9801
10021
|
if (error2 === "sku_not_found") {
|
|
9802
10022
|
if (onNotFound) return /* @__PURE__ */ jsx(Fragment, { children: onNotFound() });
|
|
9803
10023
|
return unavailable;
|
|
@@ -9916,15 +10136,25 @@ function CategoryPanel({ panel: panel2 }) {
|
|
|
9916
10136
|
] });
|
|
9917
10137
|
}
|
|
9918
10138
|
function useSlides() {
|
|
10139
|
+
const t = useT();
|
|
9919
10140
|
const shop = useShopOptional();
|
|
9920
|
-
const [
|
|
10141
|
+
const [fetched, setFetched] = useState(null);
|
|
10142
|
+
const fallback = useMemo(
|
|
10143
|
+
() => FALLBACK_PANELS.map((p) => ({
|
|
10144
|
+
...p,
|
|
10145
|
+
title: t(p.title),
|
|
10146
|
+
subtitle: t(p.subtitle),
|
|
10147
|
+
cta: t(p.cta)
|
|
10148
|
+
})),
|
|
10149
|
+
[t]
|
|
10150
|
+
);
|
|
9921
10151
|
useEffect(() => {
|
|
9922
10152
|
const api = shop?.api;
|
|
9923
10153
|
if (!api) return;
|
|
9924
10154
|
let live = true;
|
|
9925
10155
|
void api.content.home().then((home) => {
|
|
9926
10156
|
if (!live || home.slides.length === 0) return;
|
|
9927
|
-
|
|
10157
|
+
setFetched(
|
|
9928
10158
|
home.slides.map((s) => ({
|
|
9929
10159
|
key: s.key,
|
|
9930
10160
|
title: s.title,
|
|
@@ -9940,9 +10170,10 @@ function useSlides() {
|
|
|
9940
10170
|
live = false;
|
|
9941
10171
|
};
|
|
9942
10172
|
}, [shop]);
|
|
9943
|
-
return
|
|
10173
|
+
return fetched ?? fallback;
|
|
9944
10174
|
}
|
|
9945
10175
|
function HomeShowcase() {
|
|
10176
|
+
const t = useT();
|
|
9946
10177
|
const assetUrl = useAssetUrl();
|
|
9947
10178
|
const panels = useSlides();
|
|
9948
10179
|
const showcaseRef = useRef(null);
|
|
@@ -9955,7 +10186,7 @@ function HomeShowcase() {
|
|
|
9955
10186
|
* for the surface to fill.
|
|
9956
10187
|
*/
|
|
9957
10188
|
/* @__PURE__ */ jsx(ShopSurface, { tone: "dark", children: /* @__PURE__ */ jsxs("div", { className: styles$2.showcase, ref: showcaseRef, children: [
|
|
9958
|
-
/* @__PURE__ */ jsxs("section", { className: `${styles$2.panel} ${styles$2.hero}`, "aria-label": "DAZN Shop", children: [
|
|
10189
|
+
/* @__PURE__ */ jsxs("section", { className: `${styles$2.panel} ${styles$2.hero}`, "aria-label": t("DAZN Shop"), children: [
|
|
9959
10190
|
/* @__PURE__ */ jsx("div", { className: styles$2.heroImageBox, children: /* @__PURE__ */ jsx(
|
|
9960
10191
|
ShopImage,
|
|
9961
10192
|
{
|
|
@@ -9973,7 +10204,7 @@ function HomeShowcase() {
|
|
|
9973
10204
|
"img",
|
|
9974
10205
|
{
|
|
9975
10206
|
src: assetUrl("/figma/home/dazn-logo.svg"),
|
|
9976
|
-
alt: "DAZN",
|
|
10207
|
+
alt: t("DAZN"),
|
|
9977
10208
|
className: styles$2.logo
|
|
9978
10209
|
}
|
|
9979
10210
|
),
|
|
@@ -10017,11 +10248,12 @@ function CartTrigger({ className, children, ...rest }) {
|
|
|
10017
10248
|
);
|
|
10018
10249
|
}
|
|
10019
10250
|
function IdentityGate({ returnTo }) {
|
|
10251
|
+
const t = useT();
|
|
10020
10252
|
const emit = useShopEvent();
|
|
10021
10253
|
return /* @__PURE__ */ jsx(
|
|
10022
10254
|
EmptyState,
|
|
10023
10255
|
{
|
|
10024
|
-
title: "Finish signing up",
|
|
10256
|
+
title: t("Finish signing up"),
|
|
10025
10257
|
body: "Complete your DAZN sign-up to check out. Your cart is saved.",
|
|
10026
10258
|
action: /* @__PURE__ */ jsx(Button, { onClick: () => emit({ type: "session_required", action: `sign_in:${returnTo}` }), children: "Finish signing up" })
|
|
10027
10259
|
}
|
|
@@ -10052,22 +10284,24 @@ function useCartCount() {
|
|
|
10052
10284
|
}, [subscribe]);
|
|
10053
10285
|
return count2;
|
|
10054
10286
|
}
|
|
10055
|
-
const header$1 = "
|
|
10056
|
-
const floating = "
|
|
10057
|
-
const scrolled = "
|
|
10058
|
-
const title$1 = "
|
|
10059
|
-
const
|
|
10060
|
-
const
|
|
10061
|
-
const
|
|
10062
|
-
const
|
|
10063
|
-
const
|
|
10064
|
-
const
|
|
10065
|
-
const
|
|
10287
|
+
const header$1 = "_header_8o3d7_25";
|
|
10288
|
+
const floating = "_floating_8o3d7_44";
|
|
10289
|
+
const scrolled = "_scrolled_8o3d7_79";
|
|
10290
|
+
const title$1 = "_title_8o3d7_172";
|
|
10291
|
+
const leading = "_leading_8o3d7_199";
|
|
10292
|
+
const right = "_right_8o3d7_205";
|
|
10293
|
+
const spacer = "_spacer_8o3d7_218";
|
|
10294
|
+
const iconBtn = "_iconBtn_8o3d7_223";
|
|
10295
|
+
const menuBtn = "_menuBtn_8o3d7_250";
|
|
10296
|
+
const badge = "_badge_8o3d7_278";
|
|
10297
|
+
const closeSlot = "_closeSlot_8o3d7_305";
|
|
10298
|
+
const centred = "_centred_8o3d7_320";
|
|
10066
10299
|
const styles$1 = {
|
|
10067
10300
|
header: header$1,
|
|
10068
10301
|
floating,
|
|
10069
10302
|
scrolled,
|
|
10070
10303
|
title: title$1,
|
|
10304
|
+
leading,
|
|
10071
10305
|
right,
|
|
10072
10306
|
spacer,
|
|
10073
10307
|
iconBtn,
|
|
@@ -10140,9 +10374,10 @@ function ShopHeader(props) {
|
|
|
10140
10374
|
function CheckoutBar({
|
|
10141
10375
|
title: title2,
|
|
10142
10376
|
onClose,
|
|
10143
|
-
closeLabel
|
|
10377
|
+
closeLabel,
|
|
10144
10378
|
className
|
|
10145
10379
|
}) {
|
|
10380
|
+
const t = useT();
|
|
10146
10381
|
const classes = [styles$1.header, className ?? ""].filter(Boolean).join(" ");
|
|
10147
10382
|
return /* @__PURE__ */ jsxs("header", { className: classes, children: [
|
|
10148
10383
|
/* @__PURE__ */ jsx("span", { className: styles$1.closeSlot, "aria-hidden": "true" }),
|
|
@@ -10152,7 +10387,7 @@ function CheckoutBar({
|
|
|
10152
10387
|
{
|
|
10153
10388
|
type: "button",
|
|
10154
10389
|
className: [styles$1.iconBtn, styles$1.closeSlot].join(" "),
|
|
10155
|
-
"aria-label": closeLabel,
|
|
10390
|
+
"aria-label": closeLabel ?? t("Close"),
|
|
10156
10391
|
onClick: onClose,
|
|
10157
10392
|
children: /* @__PURE__ */ jsx(CloseMedium, {})
|
|
10158
10393
|
}
|
|
@@ -10166,16 +10401,18 @@ function ShopBar({
|
|
|
10166
10401
|
showCart = true,
|
|
10167
10402
|
floating: floating2 = false,
|
|
10168
10403
|
scrolled: scrolled2,
|
|
10169
|
-
backLabel
|
|
10170
|
-
menuLabel
|
|
10404
|
+
backLabel,
|
|
10405
|
+
menuLabel,
|
|
10171
10406
|
className
|
|
10172
10407
|
}) {
|
|
10408
|
+
const t = useT();
|
|
10173
10409
|
const cartCount = useCartCount();
|
|
10174
10410
|
const screenTitle = useScreenTitle();
|
|
10175
10411
|
const shownTitle = title2 ?? screenTitle;
|
|
10412
|
+
const hasTrailing = showCart || Boolean(onMenu);
|
|
10176
10413
|
const atTop = useScrolledUnder(floating2 && scrolled2 === void 0);
|
|
10177
10414
|
const isScrolled = scrolled2 ?? atTop;
|
|
10178
|
-
const cartLabel = cartCount === null ? "Cart" : cartCount === 0 ? "Cart, empty" :
|
|
10415
|
+
const cartLabel = cartCount === null ? t("Cart") : cartCount === 0 ? t("Cart, empty") : t("Cart, {0} item{1}", cartCount, cartCount === 1 ? "" : "s");
|
|
10179
10416
|
const classes = [
|
|
10180
10417
|
styles$1.header,
|
|
10181
10418
|
floating2 ? styles$1.floating : "",
|
|
@@ -10183,8 +10420,14 @@ function ShopBar({
|
|
|
10183
10420
|
className ?? ""
|
|
10184
10421
|
].filter(Boolean).join(" ");
|
|
10185
10422
|
return /* @__PURE__ */ jsxs("header", { className: classes, children: [
|
|
10186
|
-
onBack ? /* @__PURE__ */ jsx("button", { type: "button", className: styles$1.iconBtn, "aria-label": backLabel, onClick: onBack, children: /* @__PURE__ */ jsx(ChevronLeft, {}) }) : /* @__PURE__ */ jsx("span", { className: styles$1.spacer, "aria-hidden": "true" }),
|
|
10187
|
-
shownTitle ? /* @__PURE__ */ jsx(
|
|
10423
|
+
onBack ? /* @__PURE__ */ jsx("button", { type: "button", className: styles$1.iconBtn, "aria-label": backLabel ?? t("Back"), onClick: onBack, children: /* @__PURE__ */ jsx(ChevronLeft, {}) }) : /* @__PURE__ */ jsx("span", { className: styles$1.spacer, "aria-hidden": "true" }),
|
|
10424
|
+
shownTitle ? /* @__PURE__ */ jsx(
|
|
10425
|
+
"span",
|
|
10426
|
+
{
|
|
10427
|
+
className: hasTrailing ? styles$1.title : `${styles$1.title} ${styles$1.leading}`,
|
|
10428
|
+
children: shownTitle
|
|
10429
|
+
}
|
|
10430
|
+
) : null,
|
|
10188
10431
|
/* @__PURE__ */ jsxs("div", { className: styles$1.right, children: [
|
|
10189
10432
|
showCart ? /* @__PURE__ */ jsxs(CartTrigger, { className: styles$1.iconBtn, "aria-label": cartLabel, children: [
|
|
10190
10433
|
/* @__PURE__ */ jsx(CartIcon, {}),
|
|
@@ -10195,7 +10438,7 @@ function ShopBar({
|
|
|
10195
10438
|
{
|
|
10196
10439
|
type: "button",
|
|
10197
10440
|
className: `${styles$1.iconBtn} ${styles$1.menuBtn}`,
|
|
10198
|
-
"aria-label": menuLabel,
|
|
10441
|
+
"aria-label": menuLabel ?? t("More options"),
|
|
10199
10442
|
onClick: onMenu,
|
|
10200
10443
|
children: /* @__PURE__ */ jsx(MenuIcon, {})
|
|
10201
10444
|
}
|
|
@@ -10307,24 +10550,25 @@ function ShopMenuSheet({
|
|
|
10307
10550
|
onClose,
|
|
10308
10551
|
onManageOrders,
|
|
10309
10552
|
onHelp,
|
|
10310
|
-
closeLabel
|
|
10311
|
-
label: label2
|
|
10553
|
+
closeLabel,
|
|
10554
|
+
label: label2
|
|
10312
10555
|
}) {
|
|
10313
10556
|
const sheetRef = useRef(null);
|
|
10557
|
+
const t = useT();
|
|
10314
10558
|
useModalDialog(open, onClose, sheetRef);
|
|
10315
10559
|
if (!open) return null;
|
|
10316
10560
|
const rows = [
|
|
10317
10561
|
{
|
|
10318
10562
|
key: "orders",
|
|
10319
10563
|
icon: /* @__PURE__ */ jsx(OrderIcon, {}),
|
|
10320
|
-
title: "Manage orders",
|
|
10321
|
-
subtitle: "View your order history and track shipments",
|
|
10564
|
+
title: t("Manage orders"),
|
|
10565
|
+
subtitle: t("View your order history and track shipments"),
|
|
10322
10566
|
...onManageOrders ? { onSelect: onManageOrders } : {}
|
|
10323
10567
|
},
|
|
10324
10568
|
{
|
|
10325
10569
|
key: "help",
|
|
10326
10570
|
icon: /* @__PURE__ */ jsx(HelpIcon, {}),
|
|
10327
|
-
title: "Help & Support",
|
|
10571
|
+
title: t("Help & Support"),
|
|
10328
10572
|
...onHelp ? { onSelect: onHelp } : {}
|
|
10329
10573
|
}
|
|
10330
10574
|
];
|
|
@@ -10337,10 +10581,10 @@ function ShopMenuSheet({
|
|
|
10337
10581
|
className: styles.sheet,
|
|
10338
10582
|
role: "dialog",
|
|
10339
10583
|
"aria-modal": "true",
|
|
10340
|
-
"aria-label": label2,
|
|
10584
|
+
"aria-label": label2 ?? t("Shop menu"),
|
|
10341
10585
|
ref: sheetRef,
|
|
10342
10586
|
children: [
|
|
10343
|
-
/* @__PURE__ */ jsx("div", { className: styles.header, children: /* @__PURE__ */ jsx("button", { type: "button", className: styles.close, onClick: onClose, "aria-label": closeLabel, children: /* @__PURE__ */ jsx(CloseIcon, {}) }) }),
|
|
10587
|
+
/* @__PURE__ */ jsx("div", { className: styles.header, children: /* @__PURE__ */ jsx("button", { type: "button", className: styles.close, onClick: onClose, "aria-label": closeLabel ?? t("Close"), children: /* @__PURE__ */ jsx(CloseIcon, {}) }) }),
|
|
10344
10588
|
/* @__PURE__ */ jsx("ul", { className: styles.list, children: rows.map((row2) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
|
|
10345
10589
|
"button",
|
|
10346
10590
|
{
|