@nok-integration/storefront-react 0.20.13 → 0.20.15

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;
         }>;
     };

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",
@@ -6123,7 +6163,18 @@ const ES = {
   "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"
+  "On the way": "En camino",
+  "Adding to cart": "Añadiendo a la cesta",
+  "Go to cart": "Ir a la cesta",
+  "Track your return": "Seguir tu devolución",
+  "Track return {0}": "Seguir la devolución {0}",
+  "Return requested": "Devolución solicitada",
+  "Package received": "Paquete recibido",
+  "Return complete": "Devolución completada",
+  Less: "Menos",
+  more: "más",
+  "Close reasons": "Cerrar motivos",
+  Select: "Seleccionar"
 };
 const CATALOGUES = {
   es: ES
@@ -10554,7 +10605,7 @@ function ProductDetails({ description: description2 }) {
       className: styles$d.toggle,
       "aria-expanded": expanded,
       onClick: () => setExpanded((v) => !v),
-      children: expanded ? "Less" : "more"
+      children: expanded ? t("Less") : t("more")
     }) : null]
   });
 }

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",
@@ -6123,7 +6163,18 @@ const ES = {
   "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"
+  "On the way": "En camino",
+  "Adding to cart": "Añadiendo a la cesta",
+  "Go to cart": "Ir a la cesta",
+  "Track your return": "Seguir tu devolución",
+  "Track return {0}": "Seguir la devolución {0}",
+  "Return requested": "Devolución solicitada",
+  "Package received": "Paquete recibido",
+  "Return complete": "Devolución completada",
+  Less: "Menos",
+  more: "más",
+  "Close reasons": "Cerrar motivos",
+  Select: "Seleccionar"
 };
 const CATALOGUES = {
   es: ES
@@ -10554,7 +10605,7 @@ function ProductDetails({ description: description2 }) {
       className: styles$d.toggle,
       "aria-expanded": expanded,
       onClick: () => setExpanded((v) => !v),
-      children: expanded ? "Less" : "more"
+      children: expanded ? t("Less") : t("more")
     }) : null]
   });
 }

package/package.json

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