@nok-integration/storefront-react 0.20.12 → 0.20.14

package/dist/index.d.ts

@@ -8,7 +8,6 @@ import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { z } from 'zod';
 
-/** `POST /v1/cart/items` — add an item. */
 declare const AddCartItemRequest: z.ZodObject<{
     sku: z.ZodString;
     qty: z.ZodNumber;
@@ -268,6 +267,37 @@ export declare interface CartLineItemProps {
     pending?: boolean;
 }
 
+/**
+ * Market context for a cart call. Extends {@link MarketQuery}, so `country` and `lang`
+ * mean exactly what they mean on a catalogue read.
+ *
+ * A cart is priced for one market, and it has to be the same market the fan browsed in.
+ * Without this the engine can only price a basket for the deployment's default market,
+ * so an instance serving more than one prices every basket in the default's currency
+ * while the product pages beside it render another — the fan reads euros on the product
+ * and sterling at the till.
+ *
+ * Both fields stay optional, so this is additive: a caller that sends neither gets the
+ * configured default exactly as before. A caller that sends `country` on catalogue reads
+ * should send it here too — the pair is what keeps the two surfaces agreeing.
+ *
+ * The market belongs on the validated shopping session rather than on the query string,
+ * and moves there when that contract exists. This is the interim source,
+ * not the intended one.
+ */
+declare const CartMarketQuery: z.ZodObject<{
+    country: z.ZodOptional<z.ZodString>;
+    lang: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    country?: string | undefined;
+    lang?: string | undefined;
+}, {
+    country?: string | undefined;
+    lang?: string | undefined;
+}>;
+
+declare type CartMarketQuery = z.infer<typeof CartMarketQuery>;
+
 declare interface CartSheetApi {
     open: () => void;
     close: () => void;
@@ -2130,6 +2160,17 @@ declare interface ClientOptions {
     defaultHeaders?: Record<string, string>;
     /** Credentials mode (browser); defaults to `include` so the session cookie is sent. */
     credentials?: RequestCredentials;
+    /**
+     * The market every cart call is made for, when the call does not name one itself.
+     *
+     * Set it to whatever is sent on catalogue reads. A cart is priced for one market, and a
+     * client that prices its catalogue for Spain while its basket resolves the engine's
+     * default market shows euros on the product and sterling at the till.
+     *
+     * Catalogue reads are unaffected — they already take the market per call, because a
+     * consumer may legitimately read one market's catalogue while shopping in another.
+     */
+    market?: CartMarketQuery;
 }
 
 /** Extract the API error `code` from a thrown value, if present. */
@@ -2591,8 +2632,13 @@ declare function createClient(options: ClientOptions): {
             available: number;
         }>;
     };
+    /**
+     * The session cart. Every call takes the same optional market context as a catalogue
+     * read — send the country you are browsing in, or the basket is priced for the
+     * deployment's default market while the product pages render another.
+     */
     cart: {
-        create: () => Promise<{
+        create: (query?: CartMarketQuery) => Promise<{
             currency: string;
             items: {
                 sku: string;
@@ -2648,7 +2694,7 @@ declare function createClient(options: ClientOptions): {
             } | undefined;
             hidden_lines?: ("shipping" | "tax")[] | undefined;
         }>;
-        get: () => Promise<{
+        get: (query?: CartMarketQuery) => Promise<{
             currency: string;
             items: {
                 sku: string;
@@ -2704,7 +2750,7 @@ declare function createClient(options: ClientOptions): {
             } | undefined;
             hidden_lines?: ("shipping" | "tax")[] | undefined;
         }>;
-        addItem: (body: AddCartItemRequest) => Promise<{
+        addItem: (body: AddCartItemRequest, query?: CartMarketQuery) => Promise<{
             currency: string;
             items: {
                 sku: string;
@@ -2760,7 +2806,7 @@ declare function createClient(options: ClientOptions): {
             } | undefined;
             hidden_lines?: ("shipping" | "tax")[] | undefined;
         }>;
-        updateItem: (sku: string, body: UpdateCartItemRequest) => Promise<{
+        updateItem: (sku: string, body: UpdateCartItemRequest, query?: CartMarketQuery) => Promise<{
             currency: string;
             items: {
                 sku: string;
@@ -2816,7 +2862,7 @@ declare function createClient(options: ClientOptions): {
             } | undefined;
             hidden_lines?: ("shipping" | "tax")[] | undefined;
         }>;
-        removeItem: (sku: string) => Promise<{
+        removeItem: (sku: string, query?: CartMarketQuery) => Promise<{
             currency: string;
             items: {
                 sku: string;
@@ -2878,7 +2924,7 @@ declare function createClient(options: ClientOptions): {
          * The URL is opaque — redirect to it, never parse it. This is the last call in our
          * journey; payment, order and confirmation all happen on DAZN.
          */
-        handoff: () => Promise<{
+        handoff: (query?: CartMarketQuery) => Promise<{
             checkout_url: string;
         }>;
     };
@@ -4386,16 +4432,6 @@ export declare interface OrderSummaryProps {
     discount?: Money;
 }
 
-/**
- * The order progress timeline (Figma `mobile/order/timeline-row`, 3879:13868).
- *
- * The steps come from the engine rather than being enumerated here, so the screen renders
- * what the order can actually evidence — three rows for a normal delivery, four when a
- * carrier reports the parcel out for delivery, and a cancelled tail when it applies.
- *
- * An ordered list, because it is one: the rows have a sequence and a screen reader should
- * announce it as such.
- */
 export declare function OrderTimeline({ progress, estimatedDelivery, locale: localeProp, }: OrderTimelineProps): JSX.Element;
 
 export declare interface OrderTimelineProps {

package/dist/index.mjs

@@ -4499,7 +4499,7 @@ function requireCart() {
     Object.defineProperty(exports, "__esModule", {
       value: true
     });
-    exports.PartnerCart = exports.PartnerCartItem = exports.CartHandoffResponse = exports.UpdateCartItemRequest = exports.AddCartItemRequest = exports.Cart = exports.HiddenSummaryLine = exports.CartHold = exports.CartLock = exports.CartLockReason = exports.CartTotals = exports.CartItem = void 0;
+    exports.PartnerCart = exports.PartnerCartItem = exports.CartHandoffResponse = exports.UpdateCartItemRequest = exports.AddCartItemRequest = exports.CartMarketQuery = exports.Cart = exports.HiddenSummaryLine = exports.CartHold = exports.CartLock = exports.CartLockReason = exports.CartTotals = exports.CartItem = void 0;
     const zod_1 = requireZod();
     const money_1 = requireMoney();
     const ids_1 = requireIds();
@@ -4539,6 +4539,7 @@ function requireCart() {
       hold: exports.CartHold.optional(),
       hidden_lines: zod_1.z.array(exports.HiddenSummaryLine).optional()
     });
+    exports.CartMarketQuery = common_1.MarketQuery;
     exports.AddCartItemRequest = zod_1.z.object({
       sku: common_1.Sku,
       qty: zod_1.z.number().int().positive()
@@ -4970,6 +4971,12 @@ function requireClient() {
       throw new Error("No fetch implementation available; pass options.fetch");
     }
     const base = options2.baseUrl.replace(/\/$/, "");
+    function market(query) {
+      return {
+        ...options2.market,
+        ...query
+      };
+    }
     async function request(config) {
       const token = await options2.getToken?.();
       const headers = {
@@ -5075,34 +5082,40 @@ function requireClient() {
         })
       },
       cart: {
-        create: () => request({
+        create: (query = {}) => request({
           method: "POST",
           path: "/cart",
+          query: market(query),
           schema: cart_1.Cart
         }),
-        get: () => request({
+        get: (query = {}) => request({
           method: "GET",
           path: "/cart",
+          query: market(query),
           schema: cart_1.Cart
         }),
-        addItem: (body3) => request({
+        addItem: (body3, query = {}) => request({
           method: "POST",
           path: "/cart/items",
           body: body3,
+          query: market(query),
           schema: cart_1.Cart
         }),
-        updateItem: (sku, body3) => request({
+        updateItem: (sku, body3, query = {}) => request({
           method: "PATCH",
           path: `/cart/items/${encodeURIComponent(sku)}`,
           body: body3,
+          query: market(query),
           schema: cart_1.Cart
         }),
-        removeItem: (sku) => request({
+        removeItem: (sku, query = {}) => request({
           method: "DELETE",
           path: `/cart/items/${encodeURIComponent(sku)}`,
+          query: market(query),
           schema: cart_1.Cart
         }),
-        handoff: () => request({
+        handoff: (query = {}) => request({
+          query: market(query),
           method: "POST",
           path: "/cart/handoff",
           schema: cart_1.CartHandoffResponse
@@ -5211,14 +5224,17 @@ function movesThePage(event) {
   if (event.type === "pointerdown") return event.pointerType !== "touch";
   return true;
 }
+const TOUCH_DOWN = ["touchstart", "pointerdown"];
+const TOUCH_UP = ["touchend", "touchcancel", "pointerup", "pointercancel"];
 const holds = /* @__PURE__ */ new Set();
 function releaseHolds() {
   for (const end2 of Array.from(holds)) end2();
 }
 function anchorTop(onMoved = () => true, onEnd, box2 = null) {
   let released = false;
+  let touching = false;
   const top2 = () => {
-    if (released) return;
+    if (released || touching) return;
     const document_ = window.scrollY || document.documentElement.scrollTop || 0;
     const pane = box2 ? box2.scrollTop : 0;
     if (document_ <= 0 && pane <= 0) return;
@@ -5226,6 +5242,15 @@ function anchorTop(onMoved = () => true, onEnd, box2 = null) {
     if (document_ > 0) scrollToTop();
     if (box2 && pane > 0) scrollToTop(box2);
   };
+  const down = (event) => {
+    if (event.type !== "pointerdown" || event.pointerType === "touch") {
+      touching = true;
+    }
+  };
+  const up = () => {
+    touching = false;
+    top2();
+  };
   const end2 = (how2) => {
     if (released) return;
     released = true;
@@ -5235,6 +5260,8 @@ function anchorTop(onMoved = () => true, onEnd, box2 = null) {
     window.removeEventListener("scroll", top2);
     box2?.removeEventListener("scroll", top2);
     for (const type of RELEASES) window.removeEventListener(type, release);
+    for (const type of TOUCH_DOWN) window.removeEventListener(type, down);
+    for (const type of TOUCH_UP) window.removeEventListener(type, up);
     onEnd?.(how2);
   };
   const release = (event) => {
@@ -5243,7 +5270,13 @@ function anchorTop(onMoved = () => true, onEnd, box2 = null) {
   const moved = () => end2("moved");
   top2();
   const frame2 = typeof requestAnimationFrame === "function" ? requestAnimationFrame(top2) : null;
-  const timer2 = setTimeout(() => end2("lapsed"), HOLD_MS);
+  let timer2 = setTimeout(function lapse() {
+    if (touching) {
+      timer2 = setTimeout(lapse, 100);
+      return;
+    }
+    end2("lapsed");
+  }, HOLD_MS);
   window.addEventListener("scroll", top2, {
     passive: true
   });
@@ -5253,6 +5286,12 @@ function anchorTop(onMoved = () => true, onEnd, box2 = null) {
   for (const type of RELEASES) window.addEventListener(type, release, {
     passive: true
   });
+  for (const type of TOUCH_DOWN) window.addEventListener(type, down, {
+    passive: true
+  });
+  for (const type of TOUCH_UP) window.addEventListener(type, up, {
+    passive: true
+  });
   holds.add(moved);
   return () => end2("released");
 }
@@ -5470,8 +5509,9 @@ function DaznShopProvider({ children, ...config }) {
       onEvent: emit,
       sessionTransport
     }),
-    credentials: sessionTransport === "cookie" ? "include" : "omit"
-  }), [apiBaseUrl, stableGetToken, emit, sessionTransport]);
+    credentials: sessionTransport === "cookie" ? "include" : "omit",
+    market
+  }), [apiBaseUrl, stableGetToken, emit, sessionTransport, market]);
   const navigate = useCallback((to) => {
     emit({
       type: "navigate",
@@ -6110,7 +6150,20 @@ const ES = {
   "You’ll receive a shipping label PDF to your email as well.": "Recibirá un PDF de la etiqueta de envío en su correo electrónico.",
   "{0} photographs": "{0} fotografías",
   "{0}, opens in a new tab": "{0}, se abre en una pestaña nueva",
-  "Zip Ups": "Sudaderas con cremalleras"
+  "Zip Ups": "Sudaderas con cremalleras",
+  "Added to cart": "Añadido a la cesta",
+  "Order placed": "Pedido realizado",
+  "On its way": "En camino",
+  "Out for delivery": "En reparto",
+  "Estimated delivery": "Entrega estimada",
+  "Nothing matches these filters.": "Nada coincide con estos filtros.",
+  "Your items will show up here once you've added to your cart.": "Sus artículos aparecerán aquí cuando los añada a la cesta.",
+  "Complete your DAZN sign-up to check out. Your cart is saved.": "Complete su registro en DAZN para finalizar la compra. Su cesta está guardada.",
+  "Your orders will show up here once you've shopped.": "Sus pedidos aparecerán aquí cuando haya comprado.",
+  "We'll let you know": "Le avisaremos",
+  "{0} — as soon as it is back": "{0} — en cuanto vuelva a estar disponible",
+  "Size {0}": "Talla {0}",
+  "On the way": "En camino"
 };
 const CATALOGUES = {
   es: ES
@@ -6710,8 +6763,23 @@ const styles$H = {
   future,
   date: date$1
 };
+const STEP_LABELS = {
+  packing: "Order placed",
+  on_its_way: "On its way",
+  out_for_delivery: "Out for delivery",
+  delivered: "Delivered",
+  cancelled: "Order cancelled"
+};
+const PENDING_LABELS = {
+  delivered: "Estimated delivery"
+};
+function labelFor(entry) {
+  if (entry.label) return entry.label;
+  return (entry.at ? void 0 : PENDING_LABELS[entry.step]) ?? STEP_LABELS[entry.step] ?? "";
+}
 function OrderTimeline({ progress: progress2, estimatedDelivery, locale: localeProp }) {
   const locale = useLocale(localeProp);
+  const t = useT();
   const currentIndex = progress2.findIndex((e) => e.current);
   return jsx("ol", {
     className: styles$H.timeline,
@@ -6735,7 +6803,7 @@ function OrderTimeline({ progress: progress2, estimatedDelivery, locale: localeP
             className: styles$H.text,
             children: [jsx("span", {
               className: [styles$H.label, styles$H[state]].join(" "),
-              children: entry.label
+              children: t(labelFor(entry))
             }), entry.at ? jsx("time", {
               className: styles$H.date,
               dateTime: entry.at,
@@ -7100,7 +7168,7 @@ function OrderItemsCard({ order }) {
       className: styles$F.itemsHeader,
       children: [jsx("h2", {
         className: styles$F.itemsTitle,
-        children: "Items"
+        children: t("Items")
       }), jsx("span", {
         className: styles$F.itemsCount,
         children: itemCount
@@ -7120,7 +7188,7 @@ function ShippingAddressCard({ order }) {
     "aria-label": t("Shipping address"),
     children: [jsx("h2", {
       className: styles$F.cardTitle,
-      children: "Shipping address"
+      children: t("Shipping address")
     }), jsx("p", {
       className: styles$F.cardBody,
       children: formatAddress(order.ship_to)
@@ -8620,13 +8688,13 @@ function OrderListContent({ onOpenOrder, onOpenReturn, onStartShopping, locale:
       className: styles$v.empty,
       children: jsx(EmptyState, {
         title: t("Nothing here yet"),
-        body: "Your orders will show up here once you've shopped.",
+        body: t("Your orders will show up here once you've shopped."),
         ...onStartShopping ? {
           action: jsx("button", {
             type: "button",
             className: styles$v.cta,
             onClick: onStartShopping,
-            children: "Continue shopping"
+            children: t("Continue shopping")
           })
         } : {}
       })
@@ -8891,6 +8959,7 @@ function ProductTile({ product, priority, size = "default" }) {
   const anyInStock = product.variants.length === 0 ? true : product.variants.some((v) => v.in_stock);
   const topBadge2 = product.badges?.[0];
   const pct = discountPct(product.price, product.compare_at);
+  const t = useT();
   return jsxs(ShopLink, {
     to: `/product/${encodeURIComponent(product.sku)}`,
     className: [styles$t.tile, size === "large" ? styles$t.large : ""].join(" "),
@@ -8916,7 +8985,7 @@ function ProductTile({ product, priority, size = "default" }) {
         })
       }), !anyInStock && jsx("span", {
         className: styles$t.oos,
-        children: "Out of stock"
+        children: t("Out of stock")
       })]
     }), jsxs("div", {
       className: styles$t.bottom,
@@ -9011,7 +9080,7 @@ function ProductGallery({ title: title2, product }) {
             })
           }), i === 0 && !inStock && jsx("span", {
             className: styles$s.oos,
-            children: "Out of stock"
+            children: t("Out of stock")
           })]
         }, src ?? i))
       }), jsxs("div", {
@@ -9077,7 +9146,7 @@ function FilterBar({ options: options2, active, onToggle, onClear }) {
       type: "button",
       className: styles$r.clear,
       onClick: onClear,
-      children: "Clear"
+      children: t("Clear")
     })]
   });
 }
@@ -9137,11 +9206,11 @@ function ProductGrid({ category, initialProducts, initialCursor, filters = [] })
       onClear: () => setActive([])
     }), visible.length === 0 ? jsx(EmptyState, {
       title: t("No products"),
-      body: "Nothing matches these filters.",
+      body: t("Nothing matches these filters."),
       action: active.length > 0 ? jsx(Button, {
         variant: "secondary",
         onClick: () => setActive([]),
-        children: "Clear filters"
+        children: t("Clear filters")
       }) : void 0
     }) : jsx("ul", {
       className: styles$q.grid,
@@ -9181,6 +9250,7 @@ const styles$p = {
   inset
 };
 function RailCarousel({ title: title2, products, seeAllTo, inset: inset2 }) {
+  const t = useT();
   if (products.length === 0) return null;
   return jsxs("section", {
     className: [styles$p.rail, inset2 ? styles$p.inset : ""].join(" "),
@@ -9193,7 +9263,7 @@ function RailCarousel({ title: title2, products, seeAllTo, inset: inset2 }) {
       }), seeAllTo && jsx(ShopLink, {
         className: styles$p.seeAll,
         to: seeAllTo,
-        children: "See all"
+        children: t("See all")
       })]
     }), jsx("ul", {
       className: styles$p.track,
@@ -9515,7 +9585,7 @@ function CartLineItem({ item: item2, title: title2, image: image2, compareAt: co
         }), soldOut ? jsx("span", {
           className: styles$m.oos,
           id: noticeId,
-          children: "Out of stock"
+          children: t("Out of stock")
         }) : pct !== void 0 && jsx("span", {
           className: styles$m.saleBadge,
           children: jsx(SaleBadge, {
@@ -9614,7 +9684,7 @@ function ShippingInfo() {
         })]
       }), jsx("p", {
         className: styles$l.label,
-        children: "Standard or express delivery"
+        children: t("Standard or express delivery")
       })]
     }), jsx("div", {
       className: styles$l.divider,
@@ -9643,7 +9713,7 @@ function ShippingInfo() {
         })]
       }), jsx("p", {
         className: styles$l.label,
-        children: "14 days returns"
+        children: t("14 days returns")
       })]
     })]
   });
@@ -9826,16 +9896,16 @@ function CartViewContent({ onContinueShopping, checkoutLabel } = {}) {
   if (state === "empty" || !cart2) {
     return jsx(EmptyState, {
       title: t("Nothing here yet"),
-      body: "Your items will show up here once you've added to your cart.",
+      body: t("Your items will show up here once you've added to your cart."),
       action: onContinueShopping ? jsx(Button, {
         variant: "primary",
         onClick: onContinueShopping,
-        children: "Continue shopping"
+        children: t("Continue shopping")
       }) : jsx(ShopLink, {
         to: "/",
         children: jsx(Button, {
           variant: "primary",
-          children: "Continue shopping"
+          children: t("Continue shopping")
         })
       })
     });
@@ -10254,14 +10324,14 @@ function SizeSelector({ sizes, selected: selected2, onSelect, error: error2 = fa
       children: [jsx("h2", {
         id: "size-heading",
         className: styles$g.title,
-        children: "Size"
+        children: t("Size")
       }), showGuide && jsxs("button", {
         type: "button",
         className: styles$g.sizeGuide,
         onClick: () => setGuideOpen(true),
         "aria-haspopup": "dialog",
         "aria-expanded": guideOpen,
-        children: ["Size guide", jsxs("svg", {
+        children: [t("Size guide"), jsxs("svg", {
           className: styles$g.info,
           width: "12",
           height: "12",
@@ -10312,7 +10382,7 @@ function SizeSelector({ sizes, selected: selected2, onSelect, error: error2 = fa
     }), error2 && jsx("p", {
       className: styles$g.error,
       role: "alert",
-      children: "Please select a size"
+      children: t("Please select a size")
     }), lowStock2 && !error2 && jsx("p", {
       className: styles$g.lowStock,
       role: "status",
@@ -10394,7 +10464,7 @@ function ColorSelector({ colours, selected: selected2, onSelect }) {
             }), soldOut && jsx("span", {
               className: styles$f.scrim,
               "aria-hidden": "true",
-              children: "Out of stock"
+              children: t("Out of stock")
             })]
           }), lowStock2 && jsx("span", {
             className: styles$f.stockBadge,
@@ -10422,7 +10492,7 @@ const styles$e = {
 };
 function VariantSelector({ variants, selectedSku, onSelect, labelAttribute }) {
   const t = useT();
-  function labelFor(variant) {
+  function labelFor2(variant) {
     if (labelAttribute && variant.attributes[labelAttribute]) {
       return variant.attributes[labelAttribute];
     }
@@ -10433,7 +10503,7 @@ function VariantSelector({ variants, selectedSku, onSelect, labelAttribute }) {
     className: styles$e.fieldset,
     children: [jsx("legend", {
       className: styles$e.legend,
-      children: "Select an option"
+      children: t("Select an option")
     }), jsx("div", {
       className: styles$e.options,
       role: "radiogroup",
@@ -10449,7 +10519,7 @@ function VariantSelector({ variants, selectedSku, onSelect, labelAttribute }) {
           disabled: disabled2,
           className: [styles$e.option, selected2 ? styles$e.selected : "", disabled2 ? styles$e.disabled : ""].filter(Boolean).join(" "),
           onClick: () => !disabled2 && onSelect(variant.sku),
-          children: [labelFor(variant), disabled2 && jsx("span", {
+          children: [labelFor2(variant), disabled2 && jsx("span", {
             className: "visually-hidden",
             children: " (out of stock)"
           })]
@@ -10500,6 +10570,7 @@ function ProductDetails({ description: description2 }) {
       observer?.disconnect();
     };
   }, [expanded, description2]);
+  const t = useT();
   if (paragraphs.length === 0) return null;
   return jsxs("section", {
     className: styles$d.root,
@@ -10509,7 +10580,7 @@ function ProductDetails({ description: description2 }) {
       children: [jsx("h2", {
         id: "details-heading",
         className: styles$d.title,
-        children: "Product details"
+        children: t("Product details")
       }), jsx("div", {
         ref: bodyRef,
         className: [styles$d.body, expanded ? "" : styles$d.clamped].join(" "),
@@ -10758,8 +10829,8 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
         type: "stock_alert_requested",
         sku: alertSku
       });
-      toast2.show("We'll let you know", {
-        description: `${product.title} — as soon as it is back`,
+      toast2.show(t("We'll let you know"), {
+        description: t("{0} — as soon as it is back", product.title),
         image: product.media[0]
       });
     } catch (err) {
@@ -10812,8 +10883,8 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
     const variant = variants.find((v) => v.sku === sku);
     const size = variant?.attributes.size ?? selectedSize;
     setAdded((current2) => current2.includes(sku) ? current2 : [...current2, sku]);
-    toast2.show("Added to cart", {
-      description: [product.title, size && `Size ${size}`].filter(Boolean).join(" · "),
+    toast2.show(t("Added to cart"), {
+      description: [product.title, size && t("Size {0}", size)].filter(Boolean).join(" · "),
       image: variant?.image ?? product.media[0],
       action: cartSheet || navigate ? {
         label: t("View cart"),
@@ -10940,6 +11011,7 @@ const styles$9 = {
 function PcpHero({ hero: hero2 }) {
   const heroRef = useRef(null);
   useTopOffset(heroRef, "--hero-top");
+  const t = useT();
   return jsxs("section", {
     ref: heroRef,
     className: [styles$9.hero, hero2.image ? "" : styles$9.noImage].join(" "),
@@ -10964,10 +11036,10 @@ function PcpHero({ hero: hero2 }) {
       className: styles$9.text,
       children: [jsx("h1", {
         className: styles$9.title,
-        children: hero2.title
+        children: t(hero2.title)
       }), hero2.subtitle && jsx("p", {
         className: styles$9.subtitle,
-        children: hero2.subtitle
+        children: t(hero2.subtitle)
       })]
     })]
   });
@@ -11147,6 +11219,7 @@ const styles$4 = {
   row: row$1
 };
 function ExploreList({ title: title2, links }) {
+  const t = useT();
   return jsxs("section", {
     className: styles$4.section,
     "aria-label": title2,
@@ -11160,7 +11233,7 @@ function ExploreList({ title: title2, links }) {
           to: `/category/${encodeURIComponent(l.code)}`,
           className: styles$4.row,
           children: [jsx("span", {
-            children: l.label
+            children: t(l.label)
           }), jsx("svg", {
             width: "16",
             height: "16",
@@ -11195,10 +11268,11 @@ const styles$3 = {
   grid
 };
 function Block({ block }) {
+  const t = useT();
   switch (block.kind) {
     case "rail":
       return jsx(RailCarousel, {
-        title: block.title,
+        title: t(block.title),
         products: block.products
       });
     case "lifestyle_text":
@@ -11211,7 +11285,7 @@ function Block({ block }) {
         className: styles$3.featured,
         children: [block.title && jsx("h2", {
           className: styles$3.blockTitle,
-          children: block.title
+          children: t(block.title)
         }), jsx(ProductTile, {
           product: block.product,
           priority: true,
@@ -11220,7 +11294,7 @@ function Block({ block }) {
       });
     case "product_gallery":
       return jsx(ProductGallery, {
-        title: block.title,
+        title: t(block.title),
         product: block.product
       });
     case "lifestyle_image":
@@ -11233,7 +11307,7 @@ function Block({ block }) {
         className: styles$3.gridBlock,
         children: [block.title && jsx("h2", {
           className: styles$3.blockTitle,
-          children: block.title
+          children: t(block.title)
         }), jsx("ul", {
           className: styles$3.grid,
           children: block.products.map((p) => jsx("li", {
@@ -11253,7 +11327,7 @@ function Block({ block }) {
       });
     case "explore":
       return jsx(ExploreList, {
-        title: block.title,
+        title: t(block.title),
         links: block.links
       });
     default:
@@ -11583,9 +11657,10 @@ const FALLBACK_PANELS = [{
   image: "/figma/home/tshirts-poster.jpg"
 }];
 function CategoryPanel({ panel: panel2 }) {
+  const t = useT();
   return jsxs("section", {
     className: styles$2.panel,
-    "aria-label": panel2.title,
+    "aria-label": t(panel2.title),
     ...panel2.focalY === void 0 ? {} : {
       style: {
         "--slide-focal-y": `${panel2.focalY}%`
@@ -11608,16 +11683,16 @@ function CategoryPanel({ panel: panel2 }) {
         className: styles$2.copy,
         children: [jsx("h2", {
           className: styles$2.title,
-          children: panel2.title
+          children: t(panel2.title)
         }), jsx("p", {
           className: styles$2.subtitle,
-          children: panel2.subtitle
+          children: t(panel2.subtitle)
         })]
       }), jsx(ShopLink, {
         to: panel2.to,
         className: styles$2.cta,
-        "aria-label": `${panel2.title} — ${panel2.cta}`,
-        children: panel2.cta
+        "aria-label": `${t(panel2.title)} — ${t(panel2.cta)}`,
+        children: t(panel2.cta)
       })]
     })]
   });
@@ -11713,16 +11788,16 @@ function HomeShowcase() {
               className: styles$2.logo
             }), jsx("h1", {
               className: styles$2.heroTitle,
-              children: "DAZN SHOP"
+              children: t("DAZN SHOP")
             }), jsx("p", {
               className: styles$2.heroSub,
-              children: "Fresh drops inspired by sport, culture, and everyday movement"
+              children: t("Fresh drops inspired by sport, culture, and everyday movement")
             })]
           }), jsxs("div", {
             className: styles$2.swipe,
             children: [jsx("p", {
               className: styles$2.swipeLabel,
-              children: "Swipe down for more"
+              children: t("Swipe down for more")
             }), jsx("svg", {
               className: styles$2.chevron,
               viewBox: "0 0 24 24",
@@ -11771,13 +11846,13 @@ function IdentityGate({ returnTo }) {
   const emit = useShopEvent();
   return jsx(EmptyState, {
     title: t("Finish signing up"),
-    body: "Complete your DAZN sign-up to check out. Your cart is saved.",
+    body: t("Complete your DAZN sign-up to check out. Your cart is saved."),
     action: jsx(Button, {
       onClick: () => emit({
         type: "session_required",
         action: `sign_in:${returnTo}`
       }),
-      children: "Finish signing up"
+      children: t("Finish signing up")
     })
   });
 }

package/dist/standalone/storefront.mjs

@@ -4499,7 +4499,7 @@ function requireCart() {
     Object.defineProperty(exports, "__esModule", {
       value: true
     });
-    exports.PartnerCart = exports.PartnerCartItem = exports.CartHandoffResponse = exports.UpdateCartItemRequest = exports.AddCartItemRequest = exports.Cart = exports.HiddenSummaryLine = exports.CartHold = exports.CartLock = exports.CartLockReason = exports.CartTotals = exports.CartItem = void 0;
+    exports.PartnerCart = exports.PartnerCartItem = exports.CartHandoffResponse = exports.UpdateCartItemRequest = exports.AddCartItemRequest = exports.CartMarketQuery = exports.Cart = exports.HiddenSummaryLine = exports.CartHold = exports.CartLock = exports.CartLockReason = exports.CartTotals = exports.CartItem = void 0;
     const zod_1 = requireZod();
     const money_1 = requireMoney();
     const ids_1 = requireIds();
@@ -4539,6 +4539,7 @@ function requireCart() {
       hold: exports.CartHold.optional(),
       hidden_lines: zod_1.z.array(exports.HiddenSummaryLine).optional()
     });
+    exports.CartMarketQuery = common_1.MarketQuery;
     exports.AddCartItemRequest = zod_1.z.object({
       sku: common_1.Sku,
       qty: zod_1.z.number().int().positive()
@@ -4970,6 +4971,12 @@ function requireClient() {
       throw new Error("No fetch implementation available; pass options.fetch");
     }
     const base = options2.baseUrl.replace(/\/$/, "");
+    function market(query) {
+      return {
+        ...options2.market,
+        ...query
+      };
+    }
     async function request(config) {
       const token = await options2.getToken?.();
       const headers = {
@@ -5075,34 +5082,40 @@ function requireClient() {
         })
       },
       cart: {
-        create: () => request({
+        create: (query = {}) => request({
           method: "POST",
           path: "/cart",
+          query: market(query),
           schema: cart_1.Cart
         }),
-        get: () => request({
+        get: (query = {}) => request({
           method: "GET",
           path: "/cart",
+          query: market(query),
           schema: cart_1.Cart
         }),
-        addItem: (body3) => request({
+        addItem: (body3, query = {}) => request({
           method: "POST",
           path: "/cart/items",
           body: body3,
+          query: market(query),
           schema: cart_1.Cart
         }),
-        updateItem: (sku, body3) => request({
+        updateItem: (sku, body3, query = {}) => request({
           method: "PATCH",
           path: `/cart/items/${encodeURIComponent(sku)}`,
           body: body3,
+          query: market(query),
           schema: cart_1.Cart
         }),
-        removeItem: (sku) => request({
+        removeItem: (sku, query = {}) => request({
           method: "DELETE",
           path: `/cart/items/${encodeURIComponent(sku)}`,
+          query: market(query),
           schema: cart_1.Cart
         }),
-        handoff: () => request({
+        handoff: (query = {}) => request({
+          query: market(query),
           method: "POST",
           path: "/cart/handoff",
           schema: cart_1.CartHandoffResponse
@@ -5211,14 +5224,17 @@ function movesThePage(event) {
   if (event.type === "pointerdown") return event.pointerType !== "touch";
   return true;
 }
+const TOUCH_DOWN = ["touchstart", "pointerdown"];
+const TOUCH_UP = ["touchend", "touchcancel", "pointerup", "pointercancel"];
 const holds = /* @__PURE__ */ new Set();
 function releaseHolds() {
   for (const end2 of Array.from(holds)) end2();
 }
 function anchorTop(onMoved = () => true, onEnd, box2 = null) {
   let released = false;
+  let touching = false;
   const top2 = () => {
-    if (released) return;
+    if (released || touching) return;
     const document_ = window.scrollY || document.documentElement.scrollTop || 0;
     const pane = box2 ? box2.scrollTop : 0;
     if (document_ <= 0 && pane <= 0) return;
@@ -5226,6 +5242,15 @@ function anchorTop(onMoved = () => true, onEnd, box2 = null) {
     if (document_ > 0) scrollToTop();
     if (box2 && pane > 0) scrollToTop(box2);
   };
+  const down = (event) => {
+    if (event.type !== "pointerdown" || event.pointerType === "touch") {
+      touching = true;
+    }
+  };
+  const up = () => {
+    touching = false;
+    top2();
+  };
   const end2 = (how2) => {
     if (released) return;
     released = true;
@@ -5235,6 +5260,8 @@ function anchorTop(onMoved = () => true, onEnd, box2 = null) {
     window.removeEventListener("scroll", top2);
     box2?.removeEventListener("scroll", top2);
     for (const type of RELEASES) window.removeEventListener(type, release);
+    for (const type of TOUCH_DOWN) window.removeEventListener(type, down);
+    for (const type of TOUCH_UP) window.removeEventListener(type, up);
     onEnd?.(how2);
   };
   const release = (event) => {
@@ -5243,7 +5270,13 @@ function anchorTop(onMoved = () => true, onEnd, box2 = null) {
   const moved = () => end2("moved");
   top2();
   const frame2 = typeof requestAnimationFrame === "function" ? requestAnimationFrame(top2) : null;
-  const timer2 = setTimeout(() => end2("lapsed"), HOLD_MS);
+  let timer2 = setTimeout(function lapse() {
+    if (touching) {
+      timer2 = setTimeout(lapse, 100);
+      return;
+    }
+    end2("lapsed");
+  }, HOLD_MS);
   window.addEventListener("scroll", top2, {
     passive: true
   });
@@ -5253,6 +5286,12 @@ function anchorTop(onMoved = () => true, onEnd, box2 = null) {
   for (const type of RELEASES) window.addEventListener(type, release, {
     passive: true
   });
+  for (const type of TOUCH_DOWN) window.addEventListener(type, down, {
+    passive: true
+  });
+  for (const type of TOUCH_UP) window.addEventListener(type, up, {
+    passive: true
+  });
   holds.add(moved);
   return () => end2("released");
 }
@@ -5470,8 +5509,9 @@ function DaznShopProvider({ children, ...config }) {
       onEvent: emit,
       sessionTransport
     }),
-    credentials: sessionTransport === "cookie" ? "include" : "omit"
-  }), [apiBaseUrl, stableGetToken, emit, sessionTransport]);
+    credentials: sessionTransport === "cookie" ? "include" : "omit",
+    market
+  }), [apiBaseUrl, stableGetToken, emit, sessionTransport, market]);
   const navigate = useCallback((to) => {
     emit({
       type: "navigate",
@@ -6110,7 +6150,20 @@ const ES = {
   "You’ll receive a shipping label PDF to your email as well.": "Recibirá un PDF de la etiqueta de envío en su correo electrónico.",
   "{0} photographs": "{0} fotografías",
   "{0}, opens in a new tab": "{0}, se abre en una pestaña nueva",
-  "Zip Ups": "Sudaderas con cremalleras"
+  "Zip Ups": "Sudaderas con cremalleras",
+  "Added to cart": "Añadido a la cesta",
+  "Order placed": "Pedido realizado",
+  "On its way": "En camino",
+  "Out for delivery": "En reparto",
+  "Estimated delivery": "Entrega estimada",
+  "Nothing matches these filters.": "Nada coincide con estos filtros.",
+  "Your items will show up here once you've added to your cart.": "Sus artículos aparecerán aquí cuando los añada a la cesta.",
+  "Complete your DAZN sign-up to check out. Your cart is saved.": "Complete su registro en DAZN para finalizar la compra. Su cesta está guardada.",
+  "Your orders will show up here once you've shopped.": "Sus pedidos aparecerán aquí cuando haya comprado.",
+  "We'll let you know": "Le avisaremos",
+  "{0} — as soon as it is back": "{0} — en cuanto vuelva a estar disponible",
+  "Size {0}": "Talla {0}",
+  "On the way": "En camino"
 };
 const CATALOGUES = {
   es: ES
@@ -6710,8 +6763,23 @@ const styles$H = {
   future,
   date: date$1
 };
+const STEP_LABELS = {
+  packing: "Order placed",
+  on_its_way: "On its way",
+  out_for_delivery: "Out for delivery",
+  delivered: "Delivered",
+  cancelled: "Order cancelled"
+};
+const PENDING_LABELS = {
+  delivered: "Estimated delivery"
+};
+function labelFor(entry) {
+  if (entry.label) return entry.label;
+  return (entry.at ? void 0 : PENDING_LABELS[entry.step]) ?? STEP_LABELS[entry.step] ?? "";
+}
 function OrderTimeline({ progress: progress2, estimatedDelivery, locale: localeProp }) {
   const locale = useLocale(localeProp);
+  const t = useT();
   const currentIndex = progress2.findIndex((e) => e.current);
   return jsx("ol", {
     className: styles$H.timeline,
@@ -6735,7 +6803,7 @@ function OrderTimeline({ progress: progress2, estimatedDelivery, locale: localeP
             className: styles$H.text,
             children: [jsx("span", {
               className: [styles$H.label, styles$H[state]].join(" "),
-              children: entry.label
+              children: t(labelFor(entry))
             }), entry.at ? jsx("time", {
               className: styles$H.date,
               dateTime: entry.at,
@@ -7100,7 +7168,7 @@ function OrderItemsCard({ order }) {
       className: styles$F.itemsHeader,
       children: [jsx("h2", {
         className: styles$F.itemsTitle,
-        children: "Items"
+        children: t("Items")
       }), jsx("span", {
         className: styles$F.itemsCount,
         children: itemCount
@@ -7120,7 +7188,7 @@ function ShippingAddressCard({ order }) {
     "aria-label": t("Shipping address"),
     children: [jsx("h2", {
       className: styles$F.cardTitle,
-      children: "Shipping address"
+      children: t("Shipping address")
     }), jsx("p", {
       className: styles$F.cardBody,
       children: formatAddress(order.ship_to)
@@ -8620,13 +8688,13 @@ function OrderListContent({ onOpenOrder, onOpenReturn, onStartShopping, locale:
       className: styles$v.empty,
       children: jsx(EmptyState, {
         title: t("Nothing here yet"),
-        body: "Your orders will show up here once you've shopped.",
+        body: t("Your orders will show up here once you've shopped."),
         ...onStartShopping ? {
           action: jsx("button", {
             type: "button",
             className: styles$v.cta,
             onClick: onStartShopping,
-            children: "Continue shopping"
+            children: t("Continue shopping")
           })
         } : {}
       })
@@ -8891,6 +8959,7 @@ function ProductTile({ product, priority, size = "default" }) {
   const anyInStock = product.variants.length === 0 ? true : product.variants.some((v) => v.in_stock);
   const topBadge2 = product.badges?.[0];
   const pct = discountPct(product.price, product.compare_at);
+  const t = useT();
   return jsxs(ShopLink, {
     to: `/product/${encodeURIComponent(product.sku)}`,
     className: [styles$t.tile, size === "large" ? styles$t.large : ""].join(" "),
@@ -8916,7 +8985,7 @@ function ProductTile({ product, priority, size = "default" }) {
         })
       }), !anyInStock && jsx("span", {
         className: styles$t.oos,
-        children: "Out of stock"
+        children: t("Out of stock")
       })]
     }), jsxs("div", {
       className: styles$t.bottom,
@@ -9011,7 +9080,7 @@ function ProductGallery({ title: title2, product }) {
             })
           }), i === 0 && !inStock && jsx("span", {
             className: styles$s.oos,
-            children: "Out of stock"
+            children: t("Out of stock")
           })]
         }, src ?? i))
       }), jsxs("div", {
@@ -9077,7 +9146,7 @@ function FilterBar({ options: options2, active, onToggle, onClear }) {
       type: "button",
       className: styles$r.clear,
       onClick: onClear,
-      children: "Clear"
+      children: t("Clear")
     })]
   });
 }
@@ -9137,11 +9206,11 @@ function ProductGrid({ category, initialProducts, initialCursor, filters = [] })
       onClear: () => setActive([])
     }), visible.length === 0 ? jsx(EmptyState, {
       title: t("No products"),
-      body: "Nothing matches these filters.",
+      body: t("Nothing matches these filters."),
       action: active.length > 0 ? jsx(Button, {
         variant: "secondary",
         onClick: () => setActive([]),
-        children: "Clear filters"
+        children: t("Clear filters")
       }) : void 0
     }) : jsx("ul", {
       className: styles$q.grid,
@@ -9181,6 +9250,7 @@ const styles$p = {
   inset
 };
 function RailCarousel({ title: title2, products, seeAllTo, inset: inset2 }) {
+  const t = useT();
   if (products.length === 0) return null;
   return jsxs("section", {
     className: [styles$p.rail, inset2 ? styles$p.inset : ""].join(" "),
@@ -9193,7 +9263,7 @@ function RailCarousel({ title: title2, products, seeAllTo, inset: inset2 }) {
       }), seeAllTo && jsx(ShopLink, {
         className: styles$p.seeAll,
         to: seeAllTo,
-        children: "See all"
+        children: t("See all")
       })]
     }), jsx("ul", {
       className: styles$p.track,
@@ -9515,7 +9585,7 @@ function CartLineItem({ item: item2, title: title2, image: image2, compareAt: co
         }), soldOut ? jsx("span", {
           className: styles$m.oos,
           id: noticeId,
-          children: "Out of stock"
+          children: t("Out of stock")
         }) : pct !== void 0 && jsx("span", {
           className: styles$m.saleBadge,
           children: jsx(SaleBadge, {
@@ -9614,7 +9684,7 @@ function ShippingInfo() {
         })]
       }), jsx("p", {
         className: styles$l.label,
-        children: "Standard or express delivery"
+        children: t("Standard or express delivery")
       })]
     }), jsx("div", {
       className: styles$l.divider,
@@ -9643,7 +9713,7 @@ function ShippingInfo() {
         })]
       }), jsx("p", {
         className: styles$l.label,
-        children: "14 days returns"
+        children: t("14 days returns")
       })]
     })]
   });
@@ -9826,16 +9896,16 @@ function CartViewContent({ onContinueShopping, checkoutLabel } = {}) {
   if (state === "empty" || !cart2) {
     return jsx(EmptyState, {
       title: t("Nothing here yet"),
-      body: "Your items will show up here once you've added to your cart.",
+      body: t("Your items will show up here once you've added to your cart."),
       action: onContinueShopping ? jsx(Button, {
         variant: "primary",
         onClick: onContinueShopping,
-        children: "Continue shopping"
+        children: t("Continue shopping")
       }) : jsx(ShopLink, {
         to: "/",
         children: jsx(Button, {
           variant: "primary",
-          children: "Continue shopping"
+          children: t("Continue shopping")
         })
       })
     });
@@ -10254,14 +10324,14 @@ function SizeSelector({ sizes, selected: selected2, onSelect, error: error2 = fa
       children: [jsx("h2", {
         id: "size-heading",
         className: styles$g.title,
-        children: "Size"
+        children: t("Size")
       }), showGuide && jsxs("button", {
         type: "button",
         className: styles$g.sizeGuide,
         onClick: () => setGuideOpen(true),
         "aria-haspopup": "dialog",
         "aria-expanded": guideOpen,
-        children: ["Size guide", jsxs("svg", {
+        children: [t("Size guide"), jsxs("svg", {
           className: styles$g.info,
           width: "12",
           height: "12",
@@ -10312,7 +10382,7 @@ function SizeSelector({ sizes, selected: selected2, onSelect, error: error2 = fa
     }), error2 && jsx("p", {
       className: styles$g.error,
       role: "alert",
-      children: "Please select a size"
+      children: t("Please select a size")
     }), lowStock2 && !error2 && jsx("p", {
       className: styles$g.lowStock,
       role: "status",
@@ -10394,7 +10464,7 @@ function ColorSelector({ colours, selected: selected2, onSelect }) {
             }), soldOut && jsx("span", {
               className: styles$f.scrim,
               "aria-hidden": "true",
-              children: "Out of stock"
+              children: t("Out of stock")
             })]
           }), lowStock2 && jsx("span", {
             className: styles$f.stockBadge,
@@ -10422,7 +10492,7 @@ const styles$e = {
 };
 function VariantSelector({ variants, selectedSku, onSelect, labelAttribute }) {
   const t = useT();
-  function labelFor(variant) {
+  function labelFor2(variant) {
     if (labelAttribute && variant.attributes[labelAttribute]) {
       return variant.attributes[labelAttribute];
     }
@@ -10433,7 +10503,7 @@ function VariantSelector({ variants, selectedSku, onSelect, labelAttribute }) {
     className: styles$e.fieldset,
     children: [jsx("legend", {
       className: styles$e.legend,
-      children: "Select an option"
+      children: t("Select an option")
     }), jsx("div", {
       className: styles$e.options,
       role: "radiogroup",
@@ -10449,7 +10519,7 @@ function VariantSelector({ variants, selectedSku, onSelect, labelAttribute }) {
           disabled: disabled2,
           className: [styles$e.option, selected2 ? styles$e.selected : "", disabled2 ? styles$e.disabled : ""].filter(Boolean).join(" "),
           onClick: () => !disabled2 && onSelect(variant.sku),
-          children: [labelFor(variant), disabled2 && jsx("span", {
+          children: [labelFor2(variant), disabled2 && jsx("span", {
             className: "visually-hidden",
             children: " (out of stock)"
           })]
@@ -10500,6 +10570,7 @@ function ProductDetails({ description: description2 }) {
       observer?.disconnect();
     };
   }, [expanded, description2]);
+  const t = useT();
   if (paragraphs.length === 0) return null;
   return jsxs("section", {
     className: styles$d.root,
@@ -10509,7 +10580,7 @@ function ProductDetails({ description: description2 }) {
       children: [jsx("h2", {
         id: "details-heading",
         className: styles$d.title,
-        children: "Product details"
+        children: t("Product details")
       }), jsx("div", {
         ref: bodyRef,
         className: [styles$d.body, expanded ? "" : styles$d.clamped].join(" "),
@@ -10758,8 +10829,8 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
         type: "stock_alert_requested",
         sku: alertSku
       });
-      toast2.show("We'll let you know", {
-        description: `${product.title} — as soon as it is back`,
+      toast2.show(t("We'll let you know"), {
+        description: t("{0} — as soon as it is back", product.title),
         image: product.media[0]
       });
     } catch (err) {
@@ -10812,8 +10883,8 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
     const variant = variants.find((v) => v.sku === sku);
     const size = variant?.attributes.size ?? selectedSize;
     setAdded((current2) => current2.includes(sku) ? current2 : [...current2, sku]);
-    toast2.show("Added to cart", {
-      description: [product.title, size && `Size ${size}`].filter(Boolean).join(" · "),
+    toast2.show(t("Added to cart"), {
+      description: [product.title, size && t("Size {0}", size)].filter(Boolean).join(" · "),
       image: variant?.image ?? product.media[0],
       action: cartSheet || navigate ? {
         label: t("View cart"),
@@ -10940,6 +11011,7 @@ const styles$9 = {
 function PcpHero({ hero: hero2 }) {
   const heroRef = useRef(null);
   useTopOffset(heroRef, "--hero-top");
+  const t = useT();
   return jsxs("section", {
     ref: heroRef,
     className: [styles$9.hero, hero2.image ? "" : styles$9.noImage].join(" "),
@@ -10964,10 +11036,10 @@ function PcpHero({ hero: hero2 }) {
       className: styles$9.text,
       children: [jsx("h1", {
         className: styles$9.title,
-        children: hero2.title
+        children: t(hero2.title)
       }), hero2.subtitle && jsx("p", {
         className: styles$9.subtitle,
-        children: hero2.subtitle
+        children: t(hero2.subtitle)
       })]
     })]
   });
@@ -11147,6 +11219,7 @@ const styles$4 = {
   row: row$1
 };
 function ExploreList({ title: title2, links }) {
+  const t = useT();
   return jsxs("section", {
     className: styles$4.section,
     "aria-label": title2,
@@ -11160,7 +11233,7 @@ function ExploreList({ title: title2, links }) {
           to: `/category/${encodeURIComponent(l.code)}`,
           className: styles$4.row,
           children: [jsx("span", {
-            children: l.label
+            children: t(l.label)
           }), jsx("svg", {
             width: "16",
             height: "16",
@@ -11195,10 +11268,11 @@ const styles$3 = {
   grid
 };
 function Block({ block }) {
+  const t = useT();
   switch (block.kind) {
     case "rail":
       return jsx(RailCarousel, {
-        title: block.title,
+        title: t(block.title),
         products: block.products
       });
     case "lifestyle_text":
@@ -11211,7 +11285,7 @@ function Block({ block }) {
         className: styles$3.featured,
         children: [block.title && jsx("h2", {
           className: styles$3.blockTitle,
-          children: block.title
+          children: t(block.title)
         }), jsx(ProductTile, {
           product: block.product,
           priority: true,
@@ -11220,7 +11294,7 @@ function Block({ block }) {
       });
     case "product_gallery":
       return jsx(ProductGallery, {
-        title: block.title,
+        title: t(block.title),
         product: block.product
       });
     case "lifestyle_image":
@@ -11233,7 +11307,7 @@ function Block({ block }) {
         className: styles$3.gridBlock,
         children: [block.title && jsx("h2", {
           className: styles$3.blockTitle,
-          children: block.title
+          children: t(block.title)
         }), jsx("ul", {
           className: styles$3.grid,
           children: block.products.map((p) => jsx("li", {
@@ -11253,7 +11327,7 @@ function Block({ block }) {
       });
     case "explore":
       return jsx(ExploreList, {
-        title: block.title,
+        title: t(block.title),
         links: block.links
       });
     default:
@@ -11583,9 +11657,10 @@ const FALLBACK_PANELS = [{
   image: "/figma/home/tshirts-poster.jpg"
 }];
 function CategoryPanel({ panel: panel2 }) {
+  const t = useT();
   return jsxs("section", {
     className: styles$2.panel,
-    "aria-label": panel2.title,
+    "aria-label": t(panel2.title),
     ...panel2.focalY === void 0 ? {} : {
       style: {
         "--slide-focal-y": `${panel2.focalY}%`
@@ -11608,16 +11683,16 @@ function CategoryPanel({ panel: panel2 }) {
         className: styles$2.copy,
         children: [jsx("h2", {
           className: styles$2.title,
-          children: panel2.title
+          children: t(panel2.title)
         }), jsx("p", {
           className: styles$2.subtitle,
-          children: panel2.subtitle
+          children: t(panel2.subtitle)
         })]
       }), jsx(ShopLink, {
         to: panel2.to,
         className: styles$2.cta,
-        "aria-label": `${panel2.title} — ${panel2.cta}`,
-        children: panel2.cta
+        "aria-label": `${t(panel2.title)} — ${t(panel2.cta)}`,
+        children: t(panel2.cta)
       })]
     })]
   });
@@ -11713,16 +11788,16 @@ function HomeShowcase() {
               className: styles$2.logo
             }), jsx("h1", {
               className: styles$2.heroTitle,
-              children: "DAZN SHOP"
+              children: t("DAZN SHOP")
             }), jsx("p", {
               className: styles$2.heroSub,
-              children: "Fresh drops inspired by sport, culture, and everyday movement"
+              children: t("Fresh drops inspired by sport, culture, and everyday movement")
             })]
           }), jsxs("div", {
             className: styles$2.swipe,
             children: [jsx("p", {
               className: styles$2.swipeLabel,
-              children: "Swipe down for more"
+              children: t("Swipe down for more")
             }), jsx("svg", {
               className: styles$2.chevron,
               viewBox: "0 0 24 24",
@@ -11771,13 +11846,13 @@ function IdentityGate({ returnTo }) {
   const emit = useShopEvent();
   return jsx(EmptyState, {
     title: t("Finish signing up"),
-    body: "Complete your DAZN sign-up to check out. Your cart is saved.",
+    body: t("Complete your DAZN sign-up to check out. Your cart is saved."),
     action: jsx(Button, {
       onClick: () => emit({
         type: "session_required",
         action: `sign_in:${returnTo}`
       }),
-      children: "Finish signing up"
+      children: t("Finish signing up")
     })
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nok-integration/storefront-react",
-  "version": "0.20.12",
+  "version": "0.20.14",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
   "type": "module",