@nok-integration/storefront-react 0.20.10 → 0.20.11

package/dist/index.mjs

@@ -6581,6 +6581,50 @@ function PriceBlock({ price: price2, compareAt: compareAt2, discountPct: discoun
     })]
   });
 }
+const STATE_KEY = "__daznShop";
+function current$1(name2) {
+  if (typeof window === "undefined") return null;
+  const state = window.history.state;
+  const ours = state?.[STATE_KEY];
+  if (!ours || ours.href !== window.location.href) return null;
+  const value2 = ours[name2];
+  return typeof value2 === "string" ? value2 : null;
+}
+function useInPlaceScreen(name2) {
+  const [value2, setValue] = useState(() => current$1(name2));
+  useEffect(() => {
+    const onPop = () => setValue(current$1(name2));
+    window.addEventListener("popstate", onPop);
+    return () => window.removeEventListener("popstate", onPop);
+  }, [name2]);
+  const open = useCallback((next) => {
+    const history = window.history;
+    const state = history.state ?? {};
+    const href = window.location.href;
+    const ours = state[STATE_KEY]?.href === href ? state[STATE_KEY] : {};
+    history.pushState({
+      ...state,
+      [STATE_KEY]: {
+        ...ours,
+        href,
+        [name2]: next
+      }
+    }, "", href);
+    setValue(next);
+  }, [name2]);
+  const close2 = useCallback(() => {
+    if (current$1(name2) !== null) {
+      window.history.back();
+      return;
+    }
+    setValue(null);
+  }, [name2]);
+  return {
+    value: value2,
+    open,
+    close: close2
+  };
+}
 const timeline = "_timeline_1cum7_7";
 const row$8 = "_row_1cum7_15";
 const line$3 = "_line_1cum7_20";
@@ -7921,15 +7965,16 @@ function ChevronRight$1() {
     })
   });
 }
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function OrderTrackingView(props) {
-  const [flow, setFlow] = useState(null);
-  if (flow !== null) {
+  const flow = useInPlaceScreen("returnFlow");
+  if (flow.value !== null) {
     return jsx(ReturnFlowView, {
       orderRef: props.orderRef,
-      ...flow ? {
-        returnRef: flow
+      ...flow.value ? {
+        returnRef: flow.value
       } : {},
-      onDone: () => setFlow(null)
+      onDone: flow.close
     });
   }
   return jsx(ShopSurface, {
@@ -7937,8 +7982,8 @@ function OrderTrackingView(props) {
     fill: true,
     children: jsx(OrderTrackingContent, {
       ...props,
-      onStartReturn: props.onStartReturn ?? (() => setFlow("")),
-      onOpenReturn: props.onOpenReturn ?? ((returnRef) => setFlow(returnRef))
+      onStartReturn: props.onStartReturn ?? (() => flow.open("")),
+      onOpenReturn: props.onOpenReturn ?? flow.open
     })
   });
 }
@@ -7969,6 +8014,11 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
   useEffect(() => {
     void load();
   }, [load]);
+  const cancelled = order?.status === "cancelled";
+  useBrowserLayoutEffect(() => {
+    if (!cancelled) return;
+    return anchorTop();
+  }, [cancelled]);
   if (state === "loading") {
     return jsxs("div", {
       className: styles$y.page,
@@ -8446,11 +8496,11 @@ function Chevron() {
   });
 }
 function OrderListView(props) {
-  const [opened, setOpened] = useState(null);
-  if (opened !== null) {
+  const opened = useInPlaceScreen("return");
+  if (opened.value !== null) {
     return jsx(ReturnFlowView, {
-      returnRef: opened,
-      onDone: () => setOpened(null)
+      returnRef: opened.value,
+      onDone: opened.close
     });
   }
   return jsx(ShopSurface, {
@@ -8458,7 +8508,7 @@ function OrderListView(props) {
     fill: true,
     children: jsx(OrderListContent, {
       ...props,
-      onOpenReturn: props.onOpenReturn ?? setOpened
+      onOpenReturn: props.onOpenReturn ?? opened.open
     })
   });
 }

package/dist/standalone/storefront.mjs

@@ -6581,6 +6581,50 @@ function PriceBlock({ price: price2, compareAt: compareAt2, discountPct: discoun
     })]
   });
 }
+const STATE_KEY = "__daznShop";
+function current$1(name2) {
+  if (typeof window === "undefined") return null;
+  const state = window.history.state;
+  const ours = state?.[STATE_KEY];
+  if (!ours || ours.href !== window.location.href) return null;
+  const value2 = ours[name2];
+  return typeof value2 === "string" ? value2 : null;
+}
+function useInPlaceScreen(name2) {
+  const [value2, setValue] = useState(() => current$1(name2));
+  useEffect(() => {
+    const onPop = () => setValue(current$1(name2));
+    window.addEventListener("popstate", onPop);
+    return () => window.removeEventListener("popstate", onPop);
+  }, [name2]);
+  const open = useCallback((next) => {
+    const history = window.history;
+    const state = history.state ?? {};
+    const href = window.location.href;
+    const ours = state[STATE_KEY]?.href === href ? state[STATE_KEY] : {};
+    history.pushState({
+      ...state,
+      [STATE_KEY]: {
+        ...ours,
+        href,
+        [name2]: next
+      }
+    }, "", href);
+    setValue(next);
+  }, [name2]);
+  const close2 = useCallback(() => {
+    if (current$1(name2) !== null) {
+      window.history.back();
+      return;
+    }
+    setValue(null);
+  }, [name2]);
+  return {
+    value: value2,
+    open,
+    close: close2
+  };
+}
 const timeline = "_timeline_1cum7_7";
 const row$8 = "_row_1cum7_15";
 const line$3 = "_line_1cum7_20";
@@ -7921,15 +7965,16 @@ function ChevronRight$1() {
     })
   });
 }
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function OrderTrackingView(props) {
-  const [flow, setFlow] = useState(null);
-  if (flow !== null) {
+  const flow = useInPlaceScreen("returnFlow");
+  if (flow.value !== null) {
     return jsx(ReturnFlowView, {
       orderRef: props.orderRef,
-      ...flow ? {
-        returnRef: flow
+      ...flow.value ? {
+        returnRef: flow.value
       } : {},
-      onDone: () => setFlow(null)
+      onDone: flow.close
     });
   }
   return jsx(ShopSurface, {
@@ -7937,8 +7982,8 @@ function OrderTrackingView(props) {
     fill: true,
     children: jsx(OrderTrackingContent, {
       ...props,
-      onStartReturn: props.onStartReturn ?? (() => setFlow("")),
-      onOpenReturn: props.onOpenReturn ?? ((returnRef) => setFlow(returnRef))
+      onStartReturn: props.onStartReturn ?? (() => flow.open("")),
+      onOpenReturn: props.onOpenReturn ?? flow.open
     })
   });
 }
@@ -7969,6 +8014,11 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
   useEffect(() => {
     void load();
   }, [load]);
+  const cancelled = order?.status === "cancelled";
+  useBrowserLayoutEffect(() => {
+    if (!cancelled) return;
+    return anchorTop();
+  }, [cancelled]);
   if (state === "loading") {
     return jsxs("div", {
       className: styles$y.page,
@@ -8446,11 +8496,11 @@ function Chevron() {
   });
 }
 function OrderListView(props) {
-  const [opened, setOpened] = useState(null);
-  if (opened !== null) {
+  const opened = useInPlaceScreen("return");
+  if (opened.value !== null) {
     return jsx(ReturnFlowView, {
-      returnRef: opened,
-      onDone: () => setOpened(null)
+      returnRef: opened.value,
+      onDone: opened.close
     });
   }
   return jsx(ShopSurface, {
@@ -8458,7 +8508,7 @@ function OrderListView(props) {
     fill: true,
     children: jsx(OrderListContent, {
       ...props,
-      onOpenReturn: props.onOpenReturn ?? setOpened
+      onOpenReturn: props.onOpenReturn ?? opened.open
     })
   });
 }

package/package.json

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