@nok-integration/storefront-react 0.20.7 → 0.20.9

package/dist/index.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useContext, useEffect, useState, useRef, useCallback, useMemo, createContext, forwardRef, Fragment as Fragment$1 } from "react";
+import { useContext, useEffect, useState, useRef, useCallback, useMemo, createContext, forwardRef, useLayoutEffect, Fragment as Fragment$1 } from "react";
 var client = {};
 var catalog = {};
 var zod = {};
@@ -5189,8 +5189,8 @@ function resolveAssetUrl(src, base) {
 const MAX_AGE_MS = 5 * 6e4;
 const CAPACITY = 60;
 class ProductCache {
-  constructor(now2 = () => Date.now()) {
-    this.now = now2;
+  constructor(now = () => Date.now()) {
+    this.now = now;
   }
   now;
   entries = /* @__PURE__ */ new Map();
@@ -5580,13 +5580,13 @@ function ShopVideo({ src, poster, fill: fill2 = false, className, style, priorit
   });
 }
 const badge$5 = "_badge_1bagf_1";
-const neutral$1 = "_neutral_1bagf_12";
+const neutral$2 = "_neutral_1bagf_12";
 const success$1 = "_success_1bagf_17";
 const critical$2 = "_critical_1bagf_22";
 const promo = "_promo_1bagf_27";
 const styles$R = {
   badge: badge$5,
-  neutral: neutral$1,
+  neutral: neutral$2,
   success: success$1,
   critical: critical$2,
   promo
@@ -5702,17 +5702,16 @@ function useTopOffset(ref, property, enabled = true) {
     };
   }, [ref, property, enabled]);
 }
-const HOLD_MS = 1e3;
-const TRAVERSAL_WINDOW_MS = 1e3;
-const now = () => typeof performance !== "undefined" ? performance.now() : Date.now();
-let lastTraversal = -Infinity;
-if (typeof window !== "undefined") {
-  window.addEventListener("popstate", () => {
-    lastTraversal = now();
-  });
-}
-function followsTraversal() {
-  return now() - lastTraversal < TRAVERSAL_WINDOW_MS;
+const HOLD_MS = 2500;
+function withoutRestoration() {
+  const history = typeof window !== "undefined" ? window.history : void 0;
+  if (!history || !("scrollRestoration" in history)) return () => {
+  };
+  const previous = history.scrollRestoration;
+  history.scrollRestoration = "manual";
+  return () => {
+    history.scrollRestoration = previous;
+  };
 }
 const RELEASES = ["touchstart", "wheel", "keydown", "pointerdown"];
 function anchorTop(shouldHold = () => true) {
@@ -5741,6 +5740,7 @@ function anchorTop(shouldHold = () => true) {
   });
   return release;
 }
+const useMountEffect$1 = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function documentTop(el) {
   let top2 = 0;
   for (let node = el; node; node = node.offsetParent) {
@@ -5752,11 +5752,15 @@ function beginsOnTheFirstViewport(el) {
   return documentTop(el) < window.innerHeight;
 }
 function useScreenAnchor(ref, enabled = true) {
-  useEffect(() => {
+  useMountEffect$1(() => {
     const el = ref.current;
     if (!el || !enabled) return;
-    if (followsTraversal()) return;
-    return anchorTop(() => beginsOnTheFirstViewport(el));
+    const restore = withoutRestoration();
+    const release = anchorTop(() => beginsOnTheFirstViewport(el));
+    return () => {
+      release();
+      restore();
+    };
   }, [ref, enabled]);
 }
 const ShopSurface = forwardRef(function ShopSurface2({ tone, fill: fill2 = false, children, className, ...rest }, ref) {
@@ -5968,7 +5972,7 @@ const ES = {
   Refunded: "Reembolsado",
   "In progress": "En curso",
   Return: "Devolución",
-  Initiated: "Iniciada",
+  Reported: "Notificada",
   Received: "Recibida",
   Completed: "Completada",
   item: "artículo",
@@ -6247,7 +6251,7 @@ const toast = "_toast_oz4st_82";
 const text$4 = "_text_oz4st_111";
 const message$1 = "_message_oz4st_120";
 const action = "_action_oz4st_133";
-const neutral = "_neutral_oz4st_158";
+const neutral$1 = "_neutral_oz4st_158";
 const success = "_success_oz4st_163";
 const critical$1 = "_critical_oz4st_168";
 const rich = "_rich_oz4st_183";
@@ -6262,7 +6266,7 @@ const styles$K = {
   text: text$4,
   message: message$1,
   action,
-  neutral,
+  neutral: neutral$1,
   success,
   critical: critical$1,
   rich,
@@ -8249,14 +8253,16 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
     })]
   });
 }
-const badge$2 = "_badge_1w0zn_6";
-const progress = "_progress_1w0zn_22";
-const delivered = "_delivered_1w0zn_27";
-const critical = "_critical_1w0zn_36";
+const badge$2 = "_badge_u46qd_6";
+const progress = "_progress_u46qd_22";
+const delivered = "_delivered_u46qd_27";
+const neutral = "_neutral_u46qd_34";
+const critical = "_critical_u46qd_43";
 const styles$w = {
   badge: badge$2,
   progress,
   delivered,
+  neutral,
   critical
 };
 const LABEL = {
@@ -8276,26 +8282,26 @@ const TONE = {
 function OrderStatusBadge({ status }) {
   const t = useT();
   const label2 = LABEL[status] ?? status.replace(/_/g, " ");
-  const tone = TONE[status] ?? "progress";
+  const tone = TONE[status] ?? "neutral";
   return jsx("span", {
     className: [styles$w.badge, styles$w[tone]].join(" "),
     children: t(label2)
   });
 }
 const RETURN_LABEL = {
-  reported: "Initiated",
+  reported: "Reported",
   package_received: "Received",
   completed: "Completed"
 };
 const RETURN_TONE = {
-  reported: "progress",
-  package_received: "progress",
-  completed: "delivered"
+  reported: "neutral",
+  package_received: "neutral",
+  completed: "neutral"
 };
 function ReturnStatusBadge({ status }) {
   const t = useT();
   const label2 = RETURN_LABEL[status] ?? status.replace(/_/g, " ");
-  const tone = RETURN_TONE[status] ?? "progress";
+  const tone = RETURN_TONE[status] ?? "neutral";
   return jsx("span", {
     className: [styles$w.badge, styles$w[tone]].join(" "),
     children: t(label2)
@@ -10361,14 +10367,14 @@ function formatRemaining(ms) {
   return `${hh}:${mm}:${ss}`;
 }
 function PromoBanner({ promo: promo2 }) {
-  const [now2, setNow] = useState(null);
+  const [now, setNow] = useState(null);
   useEffect(() => {
     if (!promo2.ends_at) return;
     setNow(Date.now());
     const id = setInterval(() => setNow(Date.now()), 1e3);
     return () => clearInterval(id);
   }, [promo2.ends_at]);
-  const remaining = promo2.ends_at && now2 !== null ? new Date(promo2.ends_at).getTime() - now2 : null;
+  const remaining = promo2.ends_at && now !== null ? new Date(promo2.ends_at).getTime() - now : null;
   const showTimer = remaining !== null && remaining > 0;
   return jsxs("div", {
     className: styles$b.banner,
@@ -11277,8 +11283,9 @@ const styles$2 = {
   cta,
   mosaic
 };
+const useMountEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function useDocumentSnap(ref, enabled = true) {
-  useEffect(() => {
+  useMountEffect(() => {
     const el = ref.current;
     if (!el || !enabled || typeof document === "undefined") return;
     const root2 = document.documentElement;
@@ -11287,11 +11294,9 @@ function useDocumentSnap(ref, enabled = true) {
     root2.style.scrollSnapType = "y mandatory";
     root2.style.scrollPaddingTop = "0px";
     const top2 = () => window.scrollTo(0, 0);
-    const entered = !followsTraversal();
-    if (entered) top2();
-    const frame2 = entered && typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame(top2) : null;
-    const release = entered ? anchorTop() : () => {
-    };
+    top2();
+    const frame2 = typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame(top2) : null;
+    const release = anchorTop();
     const history = window.history;
     const previousRestoration = history && "scrollRestoration" in history ? history.scrollRestoration : null;
     if (previousRestoration !== null) history.scrollRestoration = "manual";

package/dist/standalone/storefront.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useContext, useEffect, useState, useRef, useCallback, useMemo, createContext, forwardRef, Fragment as Fragment$1 } from "react";
+import { useContext, useEffect, useState, useRef, useCallback, useMemo, createContext, forwardRef, useLayoutEffect, Fragment as Fragment$1 } from "react";
 var client = {};
 var catalog = {};
 var zod = {};
@@ -5189,8 +5189,8 @@ function resolveAssetUrl(src, base) {
 const MAX_AGE_MS = 5 * 6e4;
 const CAPACITY = 60;
 class ProductCache {
-  constructor(now2 = () => Date.now()) {
-    this.now = now2;
+  constructor(now = () => Date.now()) {
+    this.now = now;
   }
   now;
   entries = /* @__PURE__ */ new Map();
@@ -5580,13 +5580,13 @@ function ShopVideo({ src, poster, fill: fill2 = false, className, style, priorit
   });
 }
 const badge$5 = "_badge_1bagf_1";
-const neutral$1 = "_neutral_1bagf_12";
+const neutral$2 = "_neutral_1bagf_12";
 const success$1 = "_success_1bagf_17";
 const critical$2 = "_critical_1bagf_22";
 const promo = "_promo_1bagf_27";
 const styles$R = {
   badge: badge$5,
-  neutral: neutral$1,
+  neutral: neutral$2,
   success: success$1,
   critical: critical$2,
   promo
@@ -5702,17 +5702,16 @@ function useTopOffset(ref, property, enabled = true) {
     };
   }, [ref, property, enabled]);
 }
-const HOLD_MS = 1e3;
-const TRAVERSAL_WINDOW_MS = 1e3;
-const now = () => typeof performance !== "undefined" ? performance.now() : Date.now();
-let lastTraversal = -Infinity;
-if (typeof window !== "undefined") {
-  window.addEventListener("popstate", () => {
-    lastTraversal = now();
-  });
-}
-function followsTraversal() {
-  return now() - lastTraversal < TRAVERSAL_WINDOW_MS;
+const HOLD_MS = 2500;
+function withoutRestoration() {
+  const history = typeof window !== "undefined" ? window.history : void 0;
+  if (!history || !("scrollRestoration" in history)) return () => {
+  };
+  const previous = history.scrollRestoration;
+  history.scrollRestoration = "manual";
+  return () => {
+    history.scrollRestoration = previous;
+  };
 }
 const RELEASES = ["touchstart", "wheel", "keydown", "pointerdown"];
 function anchorTop(shouldHold = () => true) {
@@ -5741,6 +5740,7 @@ function anchorTop(shouldHold = () => true) {
   });
   return release;
 }
+const useMountEffect$1 = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function documentTop(el) {
   let top2 = 0;
   for (let node = el; node; node = node.offsetParent) {
@@ -5752,11 +5752,15 @@ function beginsOnTheFirstViewport(el) {
   return documentTop(el) < window.innerHeight;
 }
 function useScreenAnchor(ref, enabled = true) {
-  useEffect(() => {
+  useMountEffect$1(() => {
     const el = ref.current;
     if (!el || !enabled) return;
-    if (followsTraversal()) return;
-    return anchorTop(() => beginsOnTheFirstViewport(el));
+    const restore = withoutRestoration();
+    const release = anchorTop(() => beginsOnTheFirstViewport(el));
+    return () => {
+      release();
+      restore();
+    };
   }, [ref, enabled]);
 }
 const ShopSurface = forwardRef(function ShopSurface2({ tone, fill: fill2 = false, children, className, ...rest }, ref) {
@@ -5968,7 +5972,7 @@ const ES = {
   Refunded: "Reembolsado",
   "In progress": "En curso",
   Return: "Devolución",
-  Initiated: "Iniciada",
+  Reported: "Notificada",
   Received: "Recibida",
   Completed: "Completada",
   item: "artículo",
@@ -6247,7 +6251,7 @@ const toast = "_toast_oz4st_82";
 const text$4 = "_text_oz4st_111";
 const message$1 = "_message_oz4st_120";
 const action = "_action_oz4st_133";
-const neutral = "_neutral_oz4st_158";
+const neutral$1 = "_neutral_oz4st_158";
 const success = "_success_oz4st_163";
 const critical$1 = "_critical_oz4st_168";
 const rich = "_rich_oz4st_183";
@@ -6262,7 +6266,7 @@ const styles$K = {
   text: text$4,
   message: message$1,
   action,
-  neutral,
+  neutral: neutral$1,
   success,
   critical: critical$1,
   rich,
@@ -8249,14 +8253,16 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
     })]
   });
 }
-const badge$2 = "_badge_1w0zn_6";
-const progress = "_progress_1w0zn_22";
-const delivered = "_delivered_1w0zn_27";
-const critical = "_critical_1w0zn_36";
+const badge$2 = "_badge_u46qd_6";
+const progress = "_progress_u46qd_22";
+const delivered = "_delivered_u46qd_27";
+const neutral = "_neutral_u46qd_34";
+const critical = "_critical_u46qd_43";
 const styles$w = {
   badge: badge$2,
   progress,
   delivered,
+  neutral,
   critical
 };
 const LABEL = {
@@ -8276,26 +8282,26 @@ const TONE = {
 function OrderStatusBadge({ status }) {
   const t = useT();
   const label2 = LABEL[status] ?? status.replace(/_/g, " ");
-  const tone = TONE[status] ?? "progress";
+  const tone = TONE[status] ?? "neutral";
   return jsx("span", {
     className: [styles$w.badge, styles$w[tone]].join(" "),
     children: t(label2)
   });
 }
 const RETURN_LABEL = {
-  reported: "Initiated",
+  reported: "Reported",
   package_received: "Received",
   completed: "Completed"
 };
 const RETURN_TONE = {
-  reported: "progress",
-  package_received: "progress",
-  completed: "delivered"
+  reported: "neutral",
+  package_received: "neutral",
+  completed: "neutral"
 };
 function ReturnStatusBadge({ status }) {
   const t = useT();
   const label2 = RETURN_LABEL[status] ?? status.replace(/_/g, " ");
-  const tone = RETURN_TONE[status] ?? "progress";
+  const tone = RETURN_TONE[status] ?? "neutral";
   return jsx("span", {
     className: [styles$w.badge, styles$w[tone]].join(" "),
     children: t(label2)
@@ -10361,14 +10367,14 @@ function formatRemaining(ms) {
   return `${hh}:${mm}:${ss}`;
 }
 function PromoBanner({ promo: promo2 }) {
-  const [now2, setNow] = useState(null);
+  const [now, setNow] = useState(null);
   useEffect(() => {
     if (!promo2.ends_at) return;
     setNow(Date.now());
     const id = setInterval(() => setNow(Date.now()), 1e3);
     return () => clearInterval(id);
   }, [promo2.ends_at]);
-  const remaining = promo2.ends_at && now2 !== null ? new Date(promo2.ends_at).getTime() - now2 : null;
+  const remaining = promo2.ends_at && now !== null ? new Date(promo2.ends_at).getTime() - now : null;
   const showTimer = remaining !== null && remaining > 0;
   return jsxs("div", {
     className: styles$b.banner,
@@ -11277,8 +11283,9 @@ const styles$2 = {
   cta,
   mosaic
 };
+const useMountEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function useDocumentSnap(ref, enabled = true) {
-  useEffect(() => {
+  useMountEffect(() => {
     const el = ref.current;
     if (!el || !enabled || typeof document === "undefined") return;
     const root2 = document.documentElement;
@@ -11287,11 +11294,9 @@ function useDocumentSnap(ref, enabled = true) {
     root2.style.scrollSnapType = "y mandatory";
     root2.style.scrollPaddingTop = "0px";
     const top2 = () => window.scrollTo(0, 0);
-    const entered = !followsTraversal();
-    if (entered) top2();
-    const frame2 = entered && typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame(top2) : null;
-    const release = entered ? anchorTop() : () => {
-    };
+    top2();
+    const frame2 = typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame(top2) : null;
+    const release = anchorTop();
     const history = window.history;
     const previousRestoration = history && "scrollRestoration" in history ? history.scrollRestoration : null;
     if (previousRestoration !== null) history.scrollRestoration = "manual";

package/dist/standalone/styles.css

@@ -1619,7 +1619,7 @@
 ._done_vqbqs_94 {
   border-color: var(--color-surface-max);
 }
-._badge_1w0zn_6 {
+._badge_u46qd_6 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1634,15 +1634,19 @@
   text-transform: uppercase;
   white-space: nowrap;
 }
-._progress_1w0zn_22 {
+._progress_u46qd_22 {
   background: var(--color-state-surface-warning-soft);
   color: var(--color-state-text-warning);
 }
-._delivered_1w0zn_27 {
+._delivered_u46qd_27 {
   background: var(--color-state-surface-success-soft);
   color: var(--color-state-text-success);
 }
-._critical_1w0zn_36 {
+._neutral_u46qd_34 {
+  background: var(--color-surface-subtle);
+  color: var(--color-text-default);
+}
+._critical_u46qd_43 {
   background: var(--color-state-surface-critical-soft);
   color: var(--color-state-text-critical);
 }

package/dist/styles.css

@@ -1619,7 +1619,7 @@
 ._done_vqbqs_94 {
   border-color: var(--color-surface-max);
 }
-._badge_1w0zn_6 {
+._badge_u46qd_6 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1634,15 +1634,19 @@
   text-transform: uppercase;
   white-space: nowrap;
 }
-._progress_1w0zn_22 {
+._progress_u46qd_22 {
   background: var(--color-state-surface-warning-soft);
   color: var(--color-state-text-warning);
 }
-._delivered_1w0zn_27 {
+._delivered_u46qd_27 {
   background: var(--color-state-surface-success-soft);
   color: var(--color-state-text-success);
 }
-._critical_1w0zn_36 {
+._neutral_u46qd_34 {
+  background: var(--color-surface-subtle);
+  color: var(--color-text-default);
+}
+._critical_u46qd_43 {
   background: var(--color-state-surface-critical-soft);
   color: var(--color-state-text-critical);
 }

package/package.json

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