@nok-integration/storefront-react 0.19.25 → 0.19.27

package/dist/index.d.ts

@@ -3537,11 +3537,23 @@ export declare interface Market {
  * Swipeable image gallery with dot indicators. Reduced-motion aware (smooth-scroll is
  * disabled globally under prefers-reduced-motion). Keyboard: dots are real buttons.
  */
-export declare function MediaGallery({ media, alt }: MediaGalleryProps): JSX.Element;
+export declare function MediaGallery({ media, alt, focus }: MediaGalleryProps): JSX.Element;
 
 export declare interface MediaGalleryProps {
     media: string[];
     alt: string;
+    /**
+     * Jump to this slide whenever the value changes.
+     *
+     * How the PDP's colour tiles move the gallery: the set of images does not change when a
+     * colour is picked, so the gallery is not rebuilt and nothing is hidden — it simply
+     * lands on the shot of the colour that was chosen.
+     *
+     * Instant rather than animated, deliberately. Animating means scrolling THROUGH the
+     * other colourways' photographs to reach the chosen one, so picking White would sweep
+     * past the black shirts on the way. That is the very thing this is here to stop.
+     */
+    focus?: number;
 }
 
 export declare function minorUnitExponent(currency: string): number;

package/dist/index.mjs

@@ -9316,7 +9316,7 @@ const styles$i = {
   dot: dot$2,
   dotActive: dotActive$2
 };
-function MediaGallery({ media: media2, alt }) {
+function MediaGallery({ media: media2, alt, focus }) {
   const t = useT();
   const trackRef = useRef(null);
   const [active, setActive] = useState(0);
@@ -9339,6 +9339,13 @@ function MediaGallery({ media: media2, alt }) {
     track2.scrollLeft = 0;
     setActive(0);
   }, [mediaKey]);
+  useEffect(() => {
+    if (focus === void 0 || focus < 0) return;
+    const track2 = trackRef.current;
+    if (!track2) return;
+    track2.scrollLeft = focus * track2.clientWidth;
+    setActive(focus);
+  }, [focus]);
   function goTo(index) {
     const track2 = trackRef.current;
     if (!track2) return;
@@ -10037,14 +10044,15 @@ 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 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]);
+    const swatches2 = baseColours.map((c) => c.image).filter((src) => typeof src === "string" && src.length > 0);
+    return [...swatches2, ...product.media.filter((m) => !swatches2.includes(m))];
+  }, [baseColours, product.media]);
+  const focus = useMemo(() => {
+    if (!colourImage) return void 0;
+    const at = media2.indexOf(colourImage);
+    return at >= 0 ? at : void 0;
+  }, [colourImage, media2]);
   function selectSize(value2) {
     setSelectedSize(value2);
     setSizeError(false);
@@ -10191,7 +10199,10 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
     className: styles$a.page,
     children: [jsx(MediaGallery, {
       media: media2,
-      alt: product.title
+      alt: product.title,
+      ...focus !== void 0 ? {
+        focus
+      } : {}
     }), jsxs("div", {
       className: styles$a.content,
       children: [jsxs("div", {
@@ -10666,37 +10677,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 +10741,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

@@ -9316,7 +9316,7 @@ const styles$i = {
   dot: dot$2,
   dotActive: dotActive$2
 };
-function MediaGallery({ media: media2, alt }) {
+function MediaGallery({ media: media2, alt, focus }) {
   const t = useT();
   const trackRef = useRef(null);
   const [active, setActive] = useState(0);
@@ -9339,6 +9339,13 @@ function MediaGallery({ media: media2, alt }) {
     track2.scrollLeft = 0;
     setActive(0);
   }, [mediaKey]);
+  useEffect(() => {
+    if (focus === void 0 || focus < 0) return;
+    const track2 = trackRef.current;
+    if (!track2) return;
+    track2.scrollLeft = focus * track2.clientWidth;
+    setActive(focus);
+  }, [focus]);
   function goTo(index) {
     const track2 = trackRef.current;
     if (!track2) return;
@@ -10037,14 +10044,15 @@ 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 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]);
+    const swatches2 = baseColours.map((c) => c.image).filter((src) => typeof src === "string" && src.length > 0);
+    return [...swatches2, ...product.media.filter((m) => !swatches2.includes(m))];
+  }, [baseColours, product.media]);
+  const focus = useMemo(() => {
+    if (!colourImage) return void 0;
+    const at = media2.indexOf(colourImage);
+    return at >= 0 ? at : void 0;
+  }, [colourImage, media2]);
   function selectSize(value2) {
     setSelectedSize(value2);
     setSizeError(false);
@@ -10191,7 +10199,10 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
     className: styles$a.page,
     children: [jsx(MediaGallery, {
       media: media2,
-      alt: product.title
+      alt: product.title,
+      ...focus !== void 0 ? {
+        focus
+      } : {}
     }), jsxs("div", {
       className: styles$a.content,
       children: [jsxs("div", {
@@ -10666,37 +10677,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 +10741,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.27",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
   "publishConfig": {