@nok-integration/storefront-react 0.18.1 → 0.18.2

package/dist/index.d.ts

@@ -3580,9 +3580,14 @@ export declare interface OrderConfirmationViewProps {
     /**
      * The frame's "Done". Omit it and no button renders.
      *
-     * Where it goes is the host's: in the embed this is the end of a checkout DAZN own, so
-     * only they know whether it closes the webview, returns to the shop, or goes somewhere
-     * else entirely.
+     * **It leaves the shop.** DAZN settled this on 21 Aug 2026: "Done = DAZN home, X = DAZN
+     * Shop home". The two are not the same destination and wiring both to the shop home —
+     * which is what the first integration did — loses the only way out of the shop at the
+     * end of a purchase.
+     *
+     * We cannot make that trip ourselves: the DAZN app's own home is not a route on our
+     * `/v1` surface and not something a `navigate('/')` can reach. So this stays the host's
+     * callback, and the header's `onClose` is the one that goes to the shop home.
      */
     onDone?: () => void;
 }

package/dist/index.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useRef, useCallback, useMemo, useEffect, useContext, createContext, forwardRef, useState } from "react";
+import { useContext, useEffect, useState, useRef, useCallback, useMemo, createContext, forwardRef } from "react";
 var client = {};
 var catalog = {};
 var zod = {};
@@ -5542,6 +5542,38 @@ function withAuthorization(init, token) {
   headers.set("authorization", `Bearer ${token}`);
   return { ...init, headers };
 }
+const ScreenTitleContext = createContext({ title: void 0, claim: () => () => {
+} });
+const SuppressedContext = createContext(false);
+function ScreenTitleProvider({ children }) {
+  const [title2, setTitle] = useState(void 0);
+  const held = useRef(void 0);
+  const claim = useCallback((next) => {
+    held.current = next;
+    setTitle(next);
+    return () => {
+      if (held.current !== next) return;
+      held.current = void 0;
+      setTitle(void 0);
+    };
+  }, []);
+  const value2 = useMemo(() => ({ title: title2, claim }), [title2, claim]);
+  return /* @__PURE__ */ jsx(ScreenTitleContext.Provider, { value: value2, children });
+}
+function useScreenTitle() {
+  return useContext(ScreenTitleContext).title;
+}
+function useSetScreenTitle(title2) {
+  const { claim } = useContext(ScreenTitleContext);
+  const suppressed = useContext(SuppressedContext);
+  useEffect(() => {
+    if (suppressed || title2 === void 0) return;
+    return claim(title2);
+  }, [claim, title2, suppressed]);
+}
+function NoScreenTitle({ children }) {
+  return /* @__PURE__ */ jsx(SuppressedContext.Provider, { value: true, children });
+}
 const ShopContext = createContext(null);
 function DaznShopProvider({
   children,
@@ -5631,7 +5663,7 @@ function DaznShopProvider({
     }),
     [api, market, theme, notifications, locale, assetBaseUrl, emit, subscribe, navigate]
   );
-  return /* @__PURE__ */ jsx(ShopContext.Provider, { value: value2, children });
+  return /* @__PURE__ */ jsx(ShopContext.Provider, { value: value2, children: /* @__PURE__ */ jsx(ScreenTitleProvider, { children }) });
 }
 function useShopOptional() {
   return useContext(ShopContext);
@@ -7542,6 +7574,19 @@ const styles$w = {
 function OrderConfirmationView(props) {
   return /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, children: /* @__PURE__ */ jsx(OrderConfirmationContent, { ...props }) });
 }
+const CONFIRMATION_LABELS = {
+  packing: "Order placed",
+  on_its_way: "On the way"
+};
+function confirmationProgress(progress2) {
+  return progress2.map((entry) => {
+    if (entry.step === "delivered" && !entry.at) {
+      return { ...entry, label: "Estimated delivery" };
+    }
+    const relabelled = CONFIRMATION_LABELS[entry.step];
+    return relabelled ? { ...entry, label: relabelled } : { ...entry };
+  });
+}
 function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
   const { api } = useShop();
   const locale = useLocale(localeProp);
@@ -7581,7 +7626,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
       /* @__PURE__ */ jsx(
         OrderTimeline,
         {
-          progress: order.progress,
+          progress: confirmationProgress(order.progress),
           ...order.estimated_delivery ? { estimatedDelivery: order.estimated_delivery } : {},
           locale
         }
@@ -8454,6 +8499,7 @@ const styles$j = {
   lines
 };
 function CartView(props = {}) {
+  useSetScreenTitle("Cart");
   return /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, className: styles$j.surface, children: /* @__PURE__ */ jsx(CartViewContent, { ...props }) });
 }
 function CartViewContent({
@@ -8644,7 +8690,7 @@ function CartSheetProvider({ children }) {
   const api = useMemo(() => ({ open, close: close2, isOpen }), [open, close2, isOpen]);
   return /* @__PURE__ */ jsxs(CartSheetContext.Provider, { value: api, children: [
     children,
-    isOpen && /* @__PURE__ */ jsx(BottomSheet, { open: true, onClose: close2, title: "Cart", children: /* @__PURE__ */ jsx(CartView, { onContinueShopping: close2 }) })
+    isOpen && /* @__PURE__ */ jsx(BottomSheet, { open: true, onClose: close2, title: "Cart", children: /* @__PURE__ */ jsx(NoScreenTitle, { children: /* @__PURE__ */ jsx(CartView, { onContinueShopping: close2 }) }) })
   ] });
 }
 const gallery = "_gallery_10mch_1";
@@ -10124,6 +10170,8 @@ function ShopBar({
   className
 }) {
   const cartCount = useCartCount();
+  const screenTitle = useScreenTitle();
+  const shownTitle = title2 ?? screenTitle;
   const atTop = useScrolledUnder(floating2 && scrolled2 === void 0);
   const isScrolled = scrolled2 ?? atTop;
   const cartLabel = cartCount === null ? "Cart" : cartCount === 0 ? "Cart, empty" : `Cart, ${cartCount} item${cartCount === 1 ? "" : "s"}`;
@@ -10135,7 +10183,7 @@ function ShopBar({
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("header", { className: classes, children: [
     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" }),
-    title2 ? /* @__PURE__ */ jsx("span", { className: styles$1.title, children: title2 }) : null,
+    shownTitle ? /* @__PURE__ */ jsx("span", { className: styles$1.title, children: shownTitle }) : null,
     /* @__PURE__ */ jsxs("div", { className: styles$1.right, children: [
       showCart ? /* @__PURE__ */ jsxs(CartTrigger, { className: styles$1.iconBtn, "aria-label": cartLabel, children: [
         /* @__PURE__ */ jsx(CartIcon, {}),

package/dist/standalone/storefront.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useRef, useCallback, useMemo, useEffect, useContext, createContext, forwardRef, useState } from "react";
+import { useContext, useEffect, useState, useRef, useCallback, useMemo, createContext, forwardRef } from "react";
 var client = {};
 var catalog = {};
 var zod = {};
@@ -5542,6 +5542,38 @@ function withAuthorization(init, token) {
   headers.set("authorization", `Bearer ${token}`);
   return { ...init, headers };
 }
+const ScreenTitleContext = createContext({ title: void 0, claim: () => () => {
+} });
+const SuppressedContext = createContext(false);
+function ScreenTitleProvider({ children }) {
+  const [title2, setTitle] = useState(void 0);
+  const held = useRef(void 0);
+  const claim = useCallback((next) => {
+    held.current = next;
+    setTitle(next);
+    return () => {
+      if (held.current !== next) return;
+      held.current = void 0;
+      setTitle(void 0);
+    };
+  }, []);
+  const value2 = useMemo(() => ({ title: title2, claim }), [title2, claim]);
+  return /* @__PURE__ */ jsx(ScreenTitleContext.Provider, { value: value2, children });
+}
+function useScreenTitle() {
+  return useContext(ScreenTitleContext).title;
+}
+function useSetScreenTitle(title2) {
+  const { claim } = useContext(ScreenTitleContext);
+  const suppressed = useContext(SuppressedContext);
+  useEffect(() => {
+    if (suppressed || title2 === void 0) return;
+    return claim(title2);
+  }, [claim, title2, suppressed]);
+}
+function NoScreenTitle({ children }) {
+  return /* @__PURE__ */ jsx(SuppressedContext.Provider, { value: true, children });
+}
 const ShopContext = createContext(null);
 function DaznShopProvider({
   children,
@@ -5631,7 +5663,7 @@ function DaznShopProvider({
     }),
     [api, market, theme, notifications, locale, assetBaseUrl, emit, subscribe, navigate]
   );
-  return /* @__PURE__ */ jsx(ShopContext.Provider, { value: value2, children });
+  return /* @__PURE__ */ jsx(ShopContext.Provider, { value: value2, children: /* @__PURE__ */ jsx(ScreenTitleProvider, { children }) });
 }
 function useShopOptional() {
   return useContext(ShopContext);
@@ -7542,6 +7574,19 @@ const styles$w = {
 function OrderConfirmationView(props) {
   return /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, children: /* @__PURE__ */ jsx(OrderConfirmationContent, { ...props }) });
 }
+const CONFIRMATION_LABELS = {
+  packing: "Order placed",
+  on_its_way: "On the way"
+};
+function confirmationProgress(progress2) {
+  return progress2.map((entry) => {
+    if (entry.step === "delivered" && !entry.at) {
+      return { ...entry, label: "Estimated delivery" };
+    }
+    const relabelled = CONFIRMATION_LABELS[entry.step];
+    return relabelled ? { ...entry, label: relabelled } : { ...entry };
+  });
+}
 function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
   const { api } = useShop();
   const locale = useLocale(localeProp);
@@ -7581,7 +7626,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
       /* @__PURE__ */ jsx(
         OrderTimeline,
         {
-          progress: order.progress,
+          progress: confirmationProgress(order.progress),
           ...order.estimated_delivery ? { estimatedDelivery: order.estimated_delivery } : {},
           locale
         }
@@ -8454,6 +8499,7 @@ const styles$j = {
   lines
 };
 function CartView(props = {}) {
+  useSetScreenTitle("Cart");
   return /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, className: styles$j.surface, children: /* @__PURE__ */ jsx(CartViewContent, { ...props }) });
 }
 function CartViewContent({
@@ -8644,7 +8690,7 @@ function CartSheetProvider({ children }) {
   const api = useMemo(() => ({ open, close: close2, isOpen }), [open, close2, isOpen]);
   return /* @__PURE__ */ jsxs(CartSheetContext.Provider, { value: api, children: [
     children,
-    isOpen && /* @__PURE__ */ jsx(BottomSheet, { open: true, onClose: close2, title: "Cart", children: /* @__PURE__ */ jsx(CartView, { onContinueShopping: close2 }) })
+    isOpen && /* @__PURE__ */ jsx(BottomSheet, { open: true, onClose: close2, title: "Cart", children: /* @__PURE__ */ jsx(NoScreenTitle, { children: /* @__PURE__ */ jsx(CartView, { onContinueShopping: close2 }) }) })
   ] });
 }
 const gallery = "_gallery_10mch_1";
@@ -10124,6 +10170,8 @@ function ShopBar({
   className
 }) {
   const cartCount = useCartCount();
+  const screenTitle = useScreenTitle();
+  const shownTitle = title2 ?? screenTitle;
   const atTop = useScrolledUnder(floating2 && scrolled2 === void 0);
   const isScrolled = scrolled2 ?? atTop;
   const cartLabel = cartCount === null ? "Cart" : cartCount === 0 ? "Cart, empty" : `Cart, ${cartCount} item${cartCount === 1 ? "" : "s"}`;
@@ -10135,7 +10183,7 @@ function ShopBar({
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("header", { className: classes, children: [
     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" }),
-    title2 ? /* @__PURE__ */ jsx("span", { className: styles$1.title, children: title2 }) : null,
+    shownTitle ? /* @__PURE__ */ jsx("span", { className: styles$1.title, children: shownTitle }) : null,
     /* @__PURE__ */ jsxs("div", { className: styles$1.right, children: [
       showCart ? /* @__PURE__ */ jsxs(CartTrigger, { className: styles$1.iconBtn, "aria-label": cartLabel, children: [
         /* @__PURE__ */ jsx(CartIcon, {}),

package/package.json

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