@nok-integration/storefront-react 0.19.24 → 0.19.26

package/dist/index.mjs

@@ -5689,7 +5689,6 @@ const ES = {
   "See all": "Ver todo",
   "See more": "Ver más",
   "Select an option": "Selecciona una opción",
-  Share: "Compartir",
   Shipping: "Envío",
   "Shipping address": "Dirección de envío",
   "Shipping and returns": "Envíos y devoluciones",
@@ -9299,22 +9298,20 @@ function CartSheetProvider({ children }) {
     })]
   });
 }
-const gallery = "_gallery_9e68b_1";
-const track$2 = "_track_9e68b_8";
-const slide$1 = "_slide_9e68b_32";
-const image$4 = "_image_9e68b_39";
-const placeholder$1 = "_placeholder_9e68b_43";
-const share = "_share_9e68b_50";
-const dots$2 = "_dots_9e68b_83";
-const dot$2 = "_dot_9e68b_83";
-const dotActive$2 = "_dotActive_9e68b_134";
+const gallery = "_gallery_nv2a9_1";
+const track$2 = "_track_nv2a9_8";
+const slide$1 = "_slide_nv2a9_32";
+const image$4 = "_image_nv2a9_39";
+const placeholder$1 = "_placeholder_nv2a9_43";
+const dots$2 = "_dots_nv2a9_49";
+const dot$2 = "_dot_nv2a9_49";
+const dotActive$2 = "_dotActive_nv2a9_88";
 const styles$i = {
   gallery,
   track: track$2,
   slide: slide$1,
   image: image$4,
   placeholder: placeholder$1,
-  share,
   dots: dots$2,
   dot: dot$2,
   dotActive: dotActive$2
@@ -9357,37 +9354,9 @@ function MediaGallery({ media: media2, alt }) {
       "aria-hidden": "true"
     });
   }
-  function share2() {
-    if (typeof navigator !== "undefined" && navigator.share) {
-      void navigator.share({
-        title: alt,
-        url: window.location.href
-      }).catch(() => {
-      });
-    }
-  }
   return jsxs("div", {
     className: styles$i.gallery,
-    children: [jsx("button", {
-      type: "button",
-      className: styles$i.share,
-      onClick: share2,
-      "aria-label": t("Share"),
-      children: jsx("svg", {
-        width: "20",
-        height: "20",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        "aria-hidden": "true",
-        children: jsx("path", {
-          d: "M12 3v12M12 3 8 7m4-4 4 4M5 12v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6",
-          stroke: "currentColor",
-          strokeWidth: "1.6",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        })
-      })
-    }), jsx("div", {
+    children: [jsx("div", {
       className: styles$i.track,
       ref: trackRef,
       role: "group",
@@ -10068,7 +10037,14 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
   const colourSoldOut = hasColours && selectedColour ? !colours.find((c) => c.value === selectedColour)?.available : false;
   const purchasable = anyInStock && !colourSoldOut;
   const colourImage = useMemo(() => selectedColour ? baseColours.find((c) => c.value === selectedColour)?.image : void 0, [baseColours, selectedColour]);
-  const media2 = useMemo(() => colourImage ? [colourImage, ...product.media.filter((m) => m !== colourImage)] : product.media, [colourImage, product.media]);
+  const shootColour = baseColours[0]?.value;
+  const media2 = useMemo(() => {
+    if (!colourImage) return product.media;
+    if (selectedColour === shootColour) {
+      return [colourImage, ...product.media.filter((m) => m !== colourImage)];
+    }
+    return [colourImage];
+  }, [colourImage, product.media, selectedColour, shootColour]);
   function selectSize(value2) {
     setSelectedSize(value2);
     setSizeError(false);
@@ -10690,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 () => {
@@ -10741,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

@@ -5689,7 +5689,6 @@ const ES = {
   "See all": "Ver todo",
   "See more": "Ver más",
   "Select an option": "Selecciona una opción",
-  Share: "Compartir",
   Shipping: "Envío",
   "Shipping address": "Dirección de envío",
   "Shipping and returns": "Envíos y devoluciones",
@@ -9299,22 +9298,20 @@ function CartSheetProvider({ children }) {
     })]
   });
 }
-const gallery = "_gallery_9e68b_1";
-const track$2 = "_track_9e68b_8";
-const slide$1 = "_slide_9e68b_32";
-const image$4 = "_image_9e68b_39";
-const placeholder$1 = "_placeholder_9e68b_43";
-const share = "_share_9e68b_50";
-const dots$2 = "_dots_9e68b_83";
-const dot$2 = "_dot_9e68b_83";
-const dotActive$2 = "_dotActive_9e68b_134";
+const gallery = "_gallery_nv2a9_1";
+const track$2 = "_track_nv2a9_8";
+const slide$1 = "_slide_nv2a9_32";
+const image$4 = "_image_nv2a9_39";
+const placeholder$1 = "_placeholder_nv2a9_43";
+const dots$2 = "_dots_nv2a9_49";
+const dot$2 = "_dot_nv2a9_49";
+const dotActive$2 = "_dotActive_nv2a9_88";
 const styles$i = {
   gallery,
   track: track$2,
   slide: slide$1,
   image: image$4,
   placeholder: placeholder$1,
-  share,
   dots: dots$2,
   dot: dot$2,
   dotActive: dotActive$2
@@ -9357,37 +9354,9 @@ function MediaGallery({ media: media2, alt }) {
       "aria-hidden": "true"
     });
   }
-  function share2() {
-    if (typeof navigator !== "undefined" && navigator.share) {
-      void navigator.share({
-        title: alt,
-        url: window.location.href
-      }).catch(() => {
-      });
-    }
-  }
   return jsxs("div", {
     className: styles$i.gallery,
-    children: [jsx("button", {
-      type: "button",
-      className: styles$i.share,
-      onClick: share2,
-      "aria-label": t("Share"),
-      children: jsx("svg", {
-        width: "20",
-        height: "20",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        "aria-hidden": "true",
-        children: jsx("path", {
-          d: "M12 3v12M12 3 8 7m4-4 4 4M5 12v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6",
-          stroke: "currentColor",
-          strokeWidth: "1.6",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        })
-      })
-    }), jsx("div", {
+    children: [jsx("div", {
       className: styles$i.track,
       ref: trackRef,
       role: "group",
@@ -10068,7 +10037,14 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
   const colourSoldOut = hasColours && selectedColour ? !colours.find((c) => c.value === selectedColour)?.available : false;
   const purchasable = anyInStock && !colourSoldOut;
   const colourImage = useMemo(() => selectedColour ? baseColours.find((c) => c.value === selectedColour)?.image : void 0, [baseColours, selectedColour]);
-  const media2 = useMemo(() => colourImage ? [colourImage, ...product.media.filter((m) => m !== colourImage)] : product.media, [colourImage, product.media]);
+  const shootColour = baseColours[0]?.value;
+  const media2 = useMemo(() => {
+    if (!colourImage) return product.media;
+    if (selectedColour === shootColour) {
+      return [colourImage, ...product.media.filter((m) => m !== colourImage)];
+    }
+    return [colourImage];
+  }, [colourImage, product.media, selectedColour, shootColour]);
   function selectSize(value2) {
     setSelectedSize(value2);
     setSizeError(false);
@@ -10690,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 () => {
@@ -10741,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/styles.css

@@ -2429,13 +2429,13 @@
   flex-direction: column;
   gap: var(--space-20);
 }
-._gallery_9e68b_1 {
+._gallery_nv2a9_1 {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
 }
-._track_9e68b_8 {
+._track_nv2a9_8 {
   display: flex;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
@@ -2444,51 +2444,29 @@
   background: var(--color-surface-soft);
   scrollbar-width: none;
 }
-._track_9e68b_8::-webkit-scrollbar {
+._track_nv2a9_8::-webkit-scrollbar {
   display: none;
 }
-._slide_9e68b_32 {
+._slide_nv2a9_32 {
   position: relative;
   flex: 0 0 100%;
   scroll-snap-align: center;
   aspect-ratio: 375 / 475;
 }
-._image_9e68b_39 {
+._image_nv2a9_39 {
   object-fit: cover;
 }
-._placeholder_9e68b_43 {
+._placeholder_nv2a9_43 {
   width: 100%;
   aspect-ratio: 375 / 475;
   background: var(--color-surface-soft);
 }
-._share_9e68b_50 {
-  position: absolute;
-  z-index: 1;
-  top: var(--space-16);
-  right: var(--space-16);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  border: none;
-  border-radius: var(--radius-8);
-  background: var(--color-surface-soft);
-  color: var(--color-text-default);
-  cursor: pointer;
-}
-._dots_9e68b_83 {
+._dots_nv2a9_49 {
   display: flex;
   justify-content: center;
   gap: var(--space-6);
 }
-._share_9e68b_50::after {
-  content: "";
-  position: absolute;
-  inset: -6px;
-}
-._dot_9e68b_83 {
+._dot_nv2a9_49 {
   width: 8px;
   height: 8px;
   padding: 0;
@@ -2498,12 +2476,12 @@
   cursor: pointer;
   position: relative;
 }
-._dot_9e68b_83::after {
+._dot_nv2a9_49::after {
   content: "";
   position: absolute;
   inset: -18px -3px;
 }
-._dotActive_9e68b_134 {
+._dotActive_nv2a9_88 {
   background: var(--color-surface-max);
 }
 ._scrim_ddqa4_8 {

package/dist/styles.css

@@ -2429,13 +2429,13 @@
   flex-direction: column;
   gap: var(--space-20);
 }
-._gallery_9e68b_1 {
+._gallery_nv2a9_1 {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
 }
-._track_9e68b_8 {
+._track_nv2a9_8 {
   display: flex;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
@@ -2444,51 +2444,29 @@
   background: var(--color-surface-soft);
   scrollbar-width: none;
 }
-._track_9e68b_8::-webkit-scrollbar {
+._track_nv2a9_8::-webkit-scrollbar {
   display: none;
 }
-._slide_9e68b_32 {
+._slide_nv2a9_32 {
   position: relative;
   flex: 0 0 100%;
   scroll-snap-align: center;
   aspect-ratio: 375 / 475;
 }
-._image_9e68b_39 {
+._image_nv2a9_39 {
   object-fit: cover;
 }
-._placeholder_9e68b_43 {
+._placeholder_nv2a9_43 {
   width: 100%;
   aspect-ratio: 375 / 475;
   background: var(--color-surface-soft);
 }
-._share_9e68b_50 {
-  position: absolute;
-  z-index: 1;
-  top: var(--space-16);
-  right: var(--space-16);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  border: none;
-  border-radius: var(--radius-8);
-  background: var(--color-surface-soft);
-  color: var(--color-text-default);
-  cursor: pointer;
-}
-._dots_9e68b_83 {
+._dots_nv2a9_49 {
   display: flex;
   justify-content: center;
   gap: var(--space-6);
 }
-._share_9e68b_50::after {
-  content: "";
-  position: absolute;
-  inset: -6px;
-}
-._dot_9e68b_83 {
+._dot_nv2a9_49 {
   width: 8px;
   height: 8px;
   padding: 0;
@@ -2498,12 +2476,12 @@
   cursor: pointer;
   position: relative;
 }
-._dot_9e68b_83::after {
+._dot_nv2a9_49::after {
   content: "";
   position: absolute;
   inset: -18px -3px;
 }
-._dotActive_9e68b_134 {
+._dotActive_nv2a9_88 {
   background: var(--color-surface-max);
 }
 ._scrim_ddqa4_8 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nok-integration/storefront-react",
-  "version": "0.19.24",
+  "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": {