@nok-integration/storefront-react 0.20.5 → 0.20.6

package/dist/index.d.ts

@@ -4272,8 +4272,8 @@ declare type OrderDetail = z.infer<typeof OrderDetail>;
 /**
  * The fan's orders (Figma `mobile/order/list`).
  *
- * Read-only, like the detail screen it links to. The design's return states have no data
- * behind them — see {@link OrderStatusBadge}.
+ * Read-only, like the detail screen it links to. A return is a row of its own beside the
+ * order it came from, and opens its own progress — see {@link ReturnStatusBadge}.
  *
  * Scoped to the session at the engine: `GET /v1/orders` takes no customer parameter, so
  * there is no identifier a caller could supply to read somebody else's history.
@@ -4284,11 +4284,13 @@ export declare interface OrderListViewProps {
     /** Opens one order. Without it the rows render as static cards rather than dead links. */
     onOpenOrder?: (orderRef: string) => void;
     /**
-     * Opens one return, which is its own screen rather than the order's.
+     * Open one return on a route of your own.
      *
-     * Without it a return row renders as a static card. It is deliberately not defaulted to
-     * `onOpenOrder`: a fan tapping a return is asking about the return, and landing them on
-     * the order is a different answer to the question they asked.
+     * Optional, and optional in the way every handler here is: it customises where the row
+     * goes, it does not decide whether the row opens. Omit it and the return's progress opens
+     * in place of the list, the way the order screen opens one. It is deliberately not
+     * defaulted to `onOpenOrder`: a fan tapping a return is asking about the return, and
+     * landing them on the order is a different answer to the question they asked.
      */
     onOpenReturn?: (returnRef: string) => void;
     /** The empty state's call to action — the design's "Continue shopping" button. */

package/dist/index.mjs

@@ -5189,8 +5189,8 @@ function resolveAssetUrl(src, base) {
 const MAX_AGE_MS = 5 * 6e4;
 const CAPACITY = 60;
 class ProductCache {
-  constructor(now = () => Date.now()) {
-    this.now = now;
+  constructor(now2 = () => Date.now()) {
+    this.now = now2;
   }
   now;
   entries = /* @__PURE__ */ new Map();
@@ -5702,8 +5702,63 @@ function useTopOffset(ref, property, enabled = true) {
     };
   }, [ref, property, enabled]);
 }
+const HOLD_MS = 1e3;
+const RELEASES = ["touchstart", "wheel", "keydown", "pointerdown"];
+function anchorTop(shouldHold = () => true) {
+  let released = false;
+  const top2 = () => {
+    if (released) return;
+    const scrolled2 = window.scrollY || document.documentElement.scrollTop || 0;
+    if (scrolled2 > 0 && shouldHold()) window.scrollTo(0, 0);
+  };
+  const release = () => {
+    if (released) return;
+    released = true;
+    if (frame2 !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame2);
+    clearTimeout(timer2);
+    window.removeEventListener("scroll", top2);
+    for (const type of RELEASES) window.removeEventListener(type, release);
+  };
+  top2();
+  const frame2 = typeof requestAnimationFrame === "function" ? requestAnimationFrame(top2) : null;
+  const timer2 = setTimeout(release, HOLD_MS);
+  window.addEventListener("scroll", top2, {
+    passive: true
+  });
+  for (const type of RELEASES) window.addEventListener(type, release, {
+    passive: true
+  });
+  return release;
+}
+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 documentTop(el) {
+  let top2 = 0;
+  for (let node = el; node; node = node.offsetParent) {
+    top2 += node.offsetTop;
+  }
+  return top2;
+}
+function beginsOnTheFirstViewport(el) {
+  return documentTop(el) < window.innerHeight;
+}
+function useScreenAnchor(ref, enabled = true) {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !enabled) return;
+    if (now() - lastTraversal < TRAVERSAL_WINDOW_MS) return;
+    return anchorTop(() => beginsOnTheFirstViewport(el));
+  }, [ref, enabled]);
+}
 const ShopSurface = forwardRef(function ShopSurface2({ tone, fill: fill2 = false, children, className, ...rest }, ref) {
   const own = useRef(null);
+  useScreenAnchor(own, fill2);
   useTopOffset(own, "--surface-top", fill2);
   const attach = useCallback((node) => {
     own.current = node;
@@ -8297,11 +8352,19 @@ function Chevron() {
   });
 }
 function OrderListView(props) {
+  const [opened, setOpened] = useState(null);
+  if (opened !== null) {
+    return jsx(ReturnFlowView, {
+      returnRef: opened,
+      onDone: () => setOpened(null)
+    });
+  }
   return jsx(ShopSurface, {
     tone: "light",
     fill: true,
     children: jsx(OrderListContent, {
-      ...props
+      ...props,
+      onOpenReturn: props.onOpenReturn ?? setOpened
     })
   });
 }
@@ -10295,14 +10358,14 @@ function formatRemaining(ms) {
   return `${hh}:${mm}:${ss}`;
 }
 function PromoBanner({ promo: promo2 }) {
-  const [now, setNow] = useState(null);
+  const [now2, 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 && now !== null ? new Date(promo2.ends_at).getTime() - now : null;
+  const remaining = promo2.ends_at && now2 !== null ? new Date(promo2.ends_at).getTime() - now2 : null;
   const showTimer = remaining !== null && remaining > 0;
   return jsxs("div", {
     className: styles$b.banner,
@@ -11223,6 +11286,7 @@ function useDocumentSnap(ref, enabled = true) {
     const top2 = () => window.scrollTo(0, 0);
     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";
@@ -11231,6 +11295,7 @@ function useDocumentSnap(ref, enabled = true) {
     };
     window.addEventListener("pageshow", onPageShow);
     return () => {
+      release();
       if (frame2 !== null && typeof window.cancelAnimationFrame === "function") {
         window.cancelAnimationFrame(frame2);
       }

package/dist/standalone/storefront.mjs

@@ -5189,8 +5189,8 @@ function resolveAssetUrl(src, base) {
 const MAX_AGE_MS = 5 * 6e4;
 const CAPACITY = 60;
 class ProductCache {
-  constructor(now = () => Date.now()) {
-    this.now = now;
+  constructor(now2 = () => Date.now()) {
+    this.now = now2;
   }
   now;
   entries = /* @__PURE__ */ new Map();
@@ -5702,8 +5702,63 @@ function useTopOffset(ref, property, enabled = true) {
     };
   }, [ref, property, enabled]);
 }
+const HOLD_MS = 1e3;
+const RELEASES = ["touchstart", "wheel", "keydown", "pointerdown"];
+function anchorTop(shouldHold = () => true) {
+  let released = false;
+  const top2 = () => {
+    if (released) return;
+    const scrolled2 = window.scrollY || document.documentElement.scrollTop || 0;
+    if (scrolled2 > 0 && shouldHold()) window.scrollTo(0, 0);
+  };
+  const release = () => {
+    if (released) return;
+    released = true;
+    if (frame2 !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame2);
+    clearTimeout(timer2);
+    window.removeEventListener("scroll", top2);
+    for (const type of RELEASES) window.removeEventListener(type, release);
+  };
+  top2();
+  const frame2 = typeof requestAnimationFrame === "function" ? requestAnimationFrame(top2) : null;
+  const timer2 = setTimeout(release, HOLD_MS);
+  window.addEventListener("scroll", top2, {
+    passive: true
+  });
+  for (const type of RELEASES) window.addEventListener(type, release, {
+    passive: true
+  });
+  return release;
+}
+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 documentTop(el) {
+  let top2 = 0;
+  for (let node = el; node; node = node.offsetParent) {
+    top2 += node.offsetTop;
+  }
+  return top2;
+}
+function beginsOnTheFirstViewport(el) {
+  return documentTop(el) < window.innerHeight;
+}
+function useScreenAnchor(ref, enabled = true) {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !enabled) return;
+    if (now() - lastTraversal < TRAVERSAL_WINDOW_MS) return;
+    return anchorTop(() => beginsOnTheFirstViewport(el));
+  }, [ref, enabled]);
+}
 const ShopSurface = forwardRef(function ShopSurface2({ tone, fill: fill2 = false, children, className, ...rest }, ref) {
   const own = useRef(null);
+  useScreenAnchor(own, fill2);
   useTopOffset(own, "--surface-top", fill2);
   const attach = useCallback((node) => {
     own.current = node;
@@ -8297,11 +8352,19 @@ function Chevron() {
   });
 }
 function OrderListView(props) {
+  const [opened, setOpened] = useState(null);
+  if (opened !== null) {
+    return jsx(ReturnFlowView, {
+      returnRef: opened,
+      onDone: () => setOpened(null)
+    });
+  }
   return jsx(ShopSurface, {
     tone: "light",
     fill: true,
     children: jsx(OrderListContent, {
-      ...props
+      ...props,
+      onOpenReturn: props.onOpenReturn ?? setOpened
     })
   });
 }
@@ -10295,14 +10358,14 @@ function formatRemaining(ms) {
   return `${hh}:${mm}:${ss}`;
 }
 function PromoBanner({ promo: promo2 }) {
-  const [now, setNow] = useState(null);
+  const [now2, 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 && now !== null ? new Date(promo2.ends_at).getTime() - now : null;
+  const remaining = promo2.ends_at && now2 !== null ? new Date(promo2.ends_at).getTime() - now2 : null;
   const showTimer = remaining !== null && remaining > 0;
   return jsxs("div", {
     className: styles$b.banner,
@@ -11223,6 +11286,7 @@ function useDocumentSnap(ref, enabled = true) {
     const top2 = () => window.scrollTo(0, 0);
     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";
@@ -11231,6 +11295,7 @@ function useDocumentSnap(ref, enabled = true) {
     };
     window.addEventListener("pageshow", onPageShow);
     return () => {
+      release();
       if (frame2 !== null && typeof window.cancelAnimationFrame === "function") {
         window.cancelAnimationFrame(frame2);
       }

package/package.json

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