@nok-integration/storefront-react 0.19.25 → 0.19.26

package/dist/index.mjs

@@ -10666,37 +10666,50 @@ function CategoryView({ code, initialData, onNotFound }) {
 function ProductView({ sku, initialData, showRecommendations = true, onNotFound }) {
   const t = useT();
   const { api, market, emit } = useShop();
-  const [product, setProduct] = useState(initialData?.product ?? null);
-  const [inventory2, setInventory] = useState(initialData?.inventory ?? null);
-  const [recommendations, setRecommendations] = useState([]);
-  const [error2, setError] = useState();
-  const [loading, setLoading] = useState(!initialData);
+  const [loaded, setLoaded] = useState(initialData ? {
+    sku,
+    product: initialData.product,
+    inventory: initialData.inventory ?? null,
+    recommendations: []
+  } : null);
+  const [failure, setFailure] = useState(null);
+  const current2 = loaded?.sku === sku ? loaded : null;
+  const error2 = failure?.sku === sku ? failure.code : void 0;
   useEffect(() => {
     let live = true;
-    setError(void 0);
     (async () => {
       try {
         const p = await api.catalog.getProduct(sku, market);
         if (!live) return;
-        setProduct(p);
+        setLoaded({
+          sku,
+          product: p,
+          inventory: null,
+          recommendations: []
+        });
         const hasVariants = (p.variants?.length ?? 0) > 0;
         const [inv, recs] = await Promise.allSettled([hasVariants ? Promise.resolve(null) : api.inventory.get(sku), showRecommendations ? api.catalog.getRecommendations(sku, market) : Promise.resolve({
           data: []
         })]);
         if (!live) return;
-        setInventory(inv.status === "fulfilled" ? inv.value : null);
-        setRecommendations(recs.status === "fulfilled" ? recs.value.data : []);
+        setLoaded({
+          sku,
+          product: p,
+          inventory: inv.status === "fulfilled" ? inv.value : null,
+          recommendations: recs.status === "fulfilled" ? recs.value.data : []
+        });
       } catch (err) {
         if (!live) return;
         const c = codeOf(err);
-        setError(c);
+        setFailure({
+          sku,
+          code: c
+        });
         emit({
           type: "error",
           code: c,
           scope: "product"
         });
-      } finally {
-        if (live) setLoading(false);
       }
     })();
     return () => {
@@ -10717,26 +10730,23 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
     });
     return unavailable;
   }
-  if (product) {
+  if (current2) {
     return jsx(ProductDetail, {
-      product,
-      inventory: inventory2,
-      recommendations
+      product: current2.product,
+      inventory: current2.inventory,
+      recommendations: current2.recommendations
     });
   }
-  if (loading) return jsx(ScreenSkeleton, {
+  if (!error2) return jsx(ScreenSkeleton, {
     tone: "light"
   });
-  if (error2) {
-    return jsx(ShopSurface, {
-      tone: "light",
-      fill: true,
-      children: jsx(ErrorState, {
-        code: error2
-      })
-    });
-  }
-  return unavailable;
+  return jsx(ShopSurface, {
+    tone: "light",
+    fill: true,
+    children: jsx(ErrorState, {
+      code: error2
+    })
+  });
 }
 const showcase = "_showcase_1qnt2_44";
 const panel = "_panel_1qnt2_48";

package/dist/standalone/storefront.mjs

@@ -10666,37 +10666,50 @@ function CategoryView({ code, initialData, onNotFound }) {
 function ProductView({ sku, initialData, showRecommendations = true, onNotFound }) {
   const t = useT();
   const { api, market, emit } = useShop();
-  const [product, setProduct] = useState(initialData?.product ?? null);
-  const [inventory2, setInventory] = useState(initialData?.inventory ?? null);
-  const [recommendations, setRecommendations] = useState([]);
-  const [error2, setError] = useState();
-  const [loading, setLoading] = useState(!initialData);
+  const [loaded, setLoaded] = useState(initialData ? {
+    sku,
+    product: initialData.product,
+    inventory: initialData.inventory ?? null,
+    recommendations: []
+  } : null);
+  const [failure, setFailure] = useState(null);
+  const current2 = loaded?.sku === sku ? loaded : null;
+  const error2 = failure?.sku === sku ? failure.code : void 0;
   useEffect(() => {
     let live = true;
-    setError(void 0);
     (async () => {
       try {
         const p = await api.catalog.getProduct(sku, market);
         if (!live) return;
-        setProduct(p);
+        setLoaded({
+          sku,
+          product: p,
+          inventory: null,
+          recommendations: []
+        });
         const hasVariants = (p.variants?.length ?? 0) > 0;
         const [inv, recs] = await Promise.allSettled([hasVariants ? Promise.resolve(null) : api.inventory.get(sku), showRecommendations ? api.catalog.getRecommendations(sku, market) : Promise.resolve({
           data: []
         })]);
         if (!live) return;
-        setInventory(inv.status === "fulfilled" ? inv.value : null);
-        setRecommendations(recs.status === "fulfilled" ? recs.value.data : []);
+        setLoaded({
+          sku,
+          product: p,
+          inventory: inv.status === "fulfilled" ? inv.value : null,
+          recommendations: recs.status === "fulfilled" ? recs.value.data : []
+        });
       } catch (err) {
         if (!live) return;
         const c = codeOf(err);
-        setError(c);
+        setFailure({
+          sku,
+          code: c
+        });
         emit({
           type: "error",
           code: c,
           scope: "product"
         });
-      } finally {
-        if (live) setLoading(false);
       }
     })();
     return () => {
@@ -10717,26 +10730,23 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
     });
     return unavailable;
   }
-  if (product) {
+  if (current2) {
     return jsx(ProductDetail, {
-      product,
-      inventory: inventory2,
-      recommendations
+      product: current2.product,
+      inventory: current2.inventory,
+      recommendations: current2.recommendations
     });
   }
-  if (loading) return jsx(ScreenSkeleton, {
+  if (!error2) return jsx(ScreenSkeleton, {
     tone: "light"
   });
-  if (error2) {
-    return jsx(ShopSurface, {
-      tone: "light",
-      fill: true,
-      children: jsx(ErrorState, {
-        code: error2
-      })
-    });
-  }
-  return unavailable;
+  return jsx(ShopSurface, {
+    tone: "light",
+    fill: true,
+    children: jsx(ErrorState, {
+      code: error2
+    })
+  });
 }
 const showcase = "_showcase_1qnt2_44";
 const panel = "_panel_1qnt2_48";

package/package.json

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