@nok-integration/storefront-react 0.11.3 → 0.13.0

package/dist/index.d.ts

@@ -293,8 +293,9 @@ export declare interface CartViewProps {
      *
      * DAZN's checkout is the next step and DAZN name it; a host whose own wording is
      * "Continue" or "Go to checkout" should not have to accept ours. The locked-cart label
-     * is deliberately NOT configurable — it states a condition rather than an action, and a
-     * host renaming it could imply the button still works.
+     * is deliberately NOT configurable — it takes the fan back to a checkout that already
+     * exists, which is a different action from starting one, and a host renaming it could
+     * imply a second checkout is being created.
      */
     checkoutLabel?: string;
 }

package/dist/index.mjs

@@ -5564,7 +5564,9 @@ const TREATMENTS = {
   },
   cart_locked: {
     title: "Checkout in progress",
-    body: "Your basket is locked while checkout completes. Finish or cancel checkout to make changes.",
+    // Says what to do, not what we have done to their basket. "Locked" is our word for
+    // our mechanism; the fan only needs the next step, which is the CTA on this screen.
+    body: "Your checkout is still open. Return to it to finish or cancel your order.",
     // Not retriable: repeating the same edit fails identically until the lock clears,
     // and a "try again" affordance here would teach the fan to hammer a button that
     // cannot work. The lock lifts on its own or on DAZN's signal, not on a retry.
@@ -6952,15 +6954,14 @@ function StickyCtaBar({ children, info: info2, variant = "floating" }) {
     /* @__PURE__ */ jsx("div", { className: styles$j.actions, children })
   ] });
 }
-const surface = "_surface_1t90m_15";
-const screen = "_screen_1t90m_20";
-const body$2 = "_body_1t90m_12";
-const items = "_items_1t90m_34";
-const sectionHeader = "_sectionHeader_1t90m_40";
-const sectionTitle = "_sectionTitle_1t90m_46";
-const count = "_count_1t90m_53";
-const lines = "_lines_1t90m_73";
-const lockNotice = "_lockNotice_1t90m_82";
+const surface = "_surface_1wfue_15";
+const screen = "_screen_1wfue_20";
+const body$2 = "_body_1wfue_12";
+const items = "_items_1wfue_34";
+const sectionHeader = "_sectionHeader_1wfue_40";
+const sectionTitle = "_sectionTitle_1wfue_46";
+const count = "_count_1wfue_53";
+const lines = "_lines_1wfue_73";
 const styles$i = {
   surface,
   screen,
@@ -6969,8 +6970,7 @@ const styles$i = {
   sectionHeader,
   sectionTitle,
   count,
-  lines,
-  lockNotice
+  lines
 };
 function CartView(props = {}) {
   return /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, className: styles$i.surface, children: /* @__PURE__ */ jsx(CartViewContent, { ...props }) });
@@ -7000,6 +7000,16 @@ function CartViewContent({
   useEffect(() => {
     void load();
   }, [load]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const onPageShow = (event) => {
+      if (!event.persisted) return;
+      setHandingOff(false);
+      void load();
+    };
+    window.addEventListener("pageshow", onPageShow);
+    return () => window.removeEventListener("pageshow", onPageShow);
+  }, [load]);
   async function mutate(sku, action2, optimistic) {
     if (!cart2) return false;
     const snapshot = cart2;
@@ -7103,7 +7113,6 @@ function CartViewContent({
   const locked = cart2.locked !== void 0;
   const itemCount = cart2.items.reduce((n, i) => n + i.qty, 0);
   return /* @__PURE__ */ jsxs("div", { className: styles$i.screen, children: [
-    locked && /* @__PURE__ */ jsx("p", { role: "status", className: styles$i.lockNotice, children: "Checkout is in progress, so your basket is locked. Finish or cancel checkout to make changes." }),
     /* @__PURE__ */ jsxs("div", { className: styles$i.body, children: [
       /* @__PURE__ */ jsxs("section", { className: styles$i.items, children: [
         /* @__PURE__ */ jsxs("div", { className: styles$i.sectionHeader, children: [
@@ -7124,7 +7133,15 @@ function CartViewContent({
       /* @__PURE__ */ jsx(ShippingInfo, {}),
       /* @__PURE__ */ jsx(OrderSummary, { pricing: cart2.totals, deferred: ["shipping", "tax"] })
     ] }),
-    /* @__PURE__ */ jsx(StickyCtaBar, { variant: "divider", children: /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: () => void handOff(cart2), disabled: locked || handingOff, children: locked ? "Checkout in progress" : checkoutLabel }) })
+    /* @__PURE__ */ jsx(StickyCtaBar, { variant: "divider", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "primary",
+        onClick: () => void handOff(cart2),
+        disabled: handingOff,
+        children: locked ? "Return to checkout" : checkoutLabel
+      }
+    ) })
   ] });
 }
 const CartSheetContext = createContext(null);

package/dist/standalone/storefront.mjs

@@ -5564,7 +5564,9 @@ const TREATMENTS = {
   },
   cart_locked: {
     title: "Checkout in progress",
-    body: "Your basket is locked while checkout completes. Finish or cancel checkout to make changes.",
+    // Says what to do, not what we have done to their basket. "Locked" is our word for
+    // our mechanism; the fan only needs the next step, which is the CTA on this screen.
+    body: "Your checkout is still open. Return to it to finish or cancel your order.",
     // Not retriable: repeating the same edit fails identically until the lock clears,
     // and a "try again" affordance here would teach the fan to hammer a button that
     // cannot work. The lock lifts on its own or on DAZN's signal, not on a retry.
@@ -6952,15 +6954,14 @@ function StickyCtaBar({ children, info: info2, variant = "floating" }) {
     /* @__PURE__ */ jsx("div", { className: styles$j.actions, children })
   ] });
 }
-const surface = "_surface_1t90m_15";
-const screen = "_screen_1t90m_20";
-const body$2 = "_body_1t90m_12";
-const items = "_items_1t90m_34";
-const sectionHeader = "_sectionHeader_1t90m_40";
-const sectionTitle = "_sectionTitle_1t90m_46";
-const count = "_count_1t90m_53";
-const lines = "_lines_1t90m_73";
-const lockNotice = "_lockNotice_1t90m_82";
+const surface = "_surface_1wfue_15";
+const screen = "_screen_1wfue_20";
+const body$2 = "_body_1wfue_12";
+const items = "_items_1wfue_34";
+const sectionHeader = "_sectionHeader_1wfue_40";
+const sectionTitle = "_sectionTitle_1wfue_46";
+const count = "_count_1wfue_53";
+const lines = "_lines_1wfue_73";
 const styles$i = {
   surface,
   screen,
@@ -6969,8 +6970,7 @@ const styles$i = {
   sectionHeader,
   sectionTitle,
   count,
-  lines,
-  lockNotice
+  lines
 };
 function CartView(props = {}) {
   return /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, className: styles$i.surface, children: /* @__PURE__ */ jsx(CartViewContent, { ...props }) });
@@ -7000,6 +7000,16 @@ function CartViewContent({
   useEffect(() => {
     void load();
   }, [load]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const onPageShow = (event) => {
+      if (!event.persisted) return;
+      setHandingOff(false);
+      void load();
+    };
+    window.addEventListener("pageshow", onPageShow);
+    return () => window.removeEventListener("pageshow", onPageShow);
+  }, [load]);
   async function mutate(sku, action2, optimistic) {
     if (!cart2) return false;
     const snapshot = cart2;
@@ -7103,7 +7113,6 @@ function CartViewContent({
   const locked = cart2.locked !== void 0;
   const itemCount = cart2.items.reduce((n, i) => n + i.qty, 0);
   return /* @__PURE__ */ jsxs("div", { className: styles$i.screen, children: [
-    locked && /* @__PURE__ */ jsx("p", { role: "status", className: styles$i.lockNotice, children: "Checkout is in progress, so your basket is locked. Finish or cancel checkout to make changes." }),
     /* @__PURE__ */ jsxs("div", { className: styles$i.body, children: [
       /* @__PURE__ */ jsxs("section", { className: styles$i.items, children: [
         /* @__PURE__ */ jsxs("div", { className: styles$i.sectionHeader, children: [
@@ -7124,7 +7133,15 @@ function CartViewContent({
       /* @__PURE__ */ jsx(ShippingInfo, {}),
       /* @__PURE__ */ jsx(OrderSummary, { pricing: cart2.totals, deferred: ["shipping", "tax"] })
     ] }),
-    /* @__PURE__ */ jsx(StickyCtaBar, { variant: "divider", children: /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: () => void handOff(cart2), disabled: locked || handingOff, children: locked ? "Checkout in progress" : checkoutLabel }) })
+    /* @__PURE__ */ jsx(StickyCtaBar, { variant: "divider", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "primary",
+        onClick: () => void handOff(cart2),
+        disabled: handingOff,
+        children: locked ? "Return to checkout" : checkoutLabel
+      }
+    ) })
   ] });
 }
 const CartSheetContext = createContext(null);

package/dist/standalone/styles.css

@@ -1830,18 +1830,18 @@
  * left, and `.body` absorbs the slack so the bar is pushed onto the bottom edge on a short
  * cart and still sticks on a long one.
  */
-._surface_1t90m_15 {
+._surface_1wfue_15 {
   display: flex;
   flex-direction: column;
 }
 
-._screen_1t90m_20 {
+._screen_1wfue_20 {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
 }
 
-._body_1t90m_12 {
+._body_1wfue_12 {
   display: flex;
   flex-direction: column;
   gap: var(--space-20);
@@ -1849,26 +1849,26 @@
   flex: 1 1 auto;
 }
 
-._items_1t90m_34 {
+._items_1wfue_34 {
   display: flex;
   flex-direction: column;
   gap: var(--space-20);
 }
 
-._sectionHeader_1t90m_40 {
+._sectionHeader_1wfue_40 {
   display: flex;
   align-items: center;
   gap: var(--space-12);
 }
 
-._sectionTitle_1t90m_46 {
+._sectionTitle_1wfue_46 {
   margin: 0;
   font-size: var(--type-heading-md-size);
   line-height: 1.38;
   font-weight: var(--font-weight-bold);
 }
 
-._count_1t90m_53 {
+._count_1wfue_53 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1888,7 +1888,7 @@
  * every line, so the space under "Items" and the space between two lines are the same
  * measurement — 148 → 268 → 388, on 100px lines.
  */
-._lines_1t90m_73 {
+._lines_1wfue_73 {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -1897,15 +1897,6 @@
   gap: var(--space-20);
 }
 
-._lockNotice_1t90m_82 {
-  margin: 0;
-  padding: var(--space-12) var(--space-16);
-  background: var(--color-state-surface-warning-soft);
-  color: var(--color-text-default);
-  border-bottom: 1px solid var(--color-border-subtle);
-  font-size: 14px;
-  line-height: 1.4;
-}
 ._gallery_h8m00_1 {
   position: relative;
   display: flex;

package/dist/styles.css

@@ -1830,18 +1830,18 @@
  * left, and `.body` absorbs the slack so the bar is pushed onto the bottom edge on a short
  * cart and still sticks on a long one.
  */
-._surface_1t90m_15 {
+._surface_1wfue_15 {
   display: flex;
   flex-direction: column;
 }
 
-._screen_1t90m_20 {
+._screen_1wfue_20 {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
 }
 
-._body_1t90m_12 {
+._body_1wfue_12 {
   display: flex;
   flex-direction: column;
   gap: var(--space-20);
@@ -1849,26 +1849,26 @@
   flex: 1 1 auto;
 }
 
-._items_1t90m_34 {
+._items_1wfue_34 {
   display: flex;
   flex-direction: column;
   gap: var(--space-20);
 }
 
-._sectionHeader_1t90m_40 {
+._sectionHeader_1wfue_40 {
   display: flex;
   align-items: center;
   gap: var(--space-12);
 }
 
-._sectionTitle_1t90m_46 {
+._sectionTitle_1wfue_46 {
   margin: 0;
   font-size: var(--type-heading-md-size);
   line-height: 1.38;
   font-weight: var(--font-weight-bold);
 }
 
-._count_1t90m_53 {
+._count_1wfue_53 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1888,7 +1888,7 @@
  * every line, so the space under "Items" and the space between two lines are the same
  * measurement — 148 → 268 → 388, on 100px lines.
  */
-._lines_1t90m_73 {
+._lines_1wfue_73 {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -1897,15 +1897,6 @@
   gap: var(--space-20);
 }
 
-._lockNotice_1t90m_82 {
-  margin: 0;
-  padding: var(--space-12) var(--space-16);
-  background: var(--color-state-surface-warning-soft);
-  color: var(--color-text-default);
-  border-bottom: 1px solid var(--color-border-subtle);
-  font-size: 14px;
-  line-height: 1.4;
-}
 ._gallery_h8m00_1 {
   position: relative;
   display: flex;

package/package.json

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