@shopgate/engage 7.32.0-beta.5 → 7.32.0-beta.7

package/product/components/ProductImage/spec.js

@@ -1,87 +1,142 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Image from '@shopgate/pwa-common/components/Image';
-import appConfig from '@shopgate/pwa-common/helpers/config';
 import PlaceholderIcon from '@shopgate/pwa-ui-shared/icons/PlaceholderIcon';
 import ProductImagePlaceholder from "./ProductImagePlaceholder";
 import ProductImage from "./index";
+import { useProductImageShadow } from "./hooks";
 import { jsx as _jsx } from "react/jsx-runtime";
 jest.unmock('@shopgate/pwa-core');
 jest.mock("../../../core/hocs/withWidgetSettings");
 jest.mock('@shopgate/pwa-common/helpers/config');
-jest.mock("./connector", () => Component => Component);
+// Shallow renders have no store; the component only reads the shop wide placeholder from it.
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: () => null
+}));
 jest.mock('@shopgate/engage/components', () => ({
   Image: () => null
 }));
+
+// These are shallow renders, so there is no Provider for the hook to read the store from. The
+// mock returns what the resolver produces before the app settings are hydrated: the built-in
+// resolutions, and no ratio, so the Image derives it from the largest resolution as before.
+jest.mock("./hooks", () => ({
+  useProductImageShadow: jest.fn(() => false)
+}));
+jest.mock('@shopgate/engage/settings/hooks', () => ({
+  useProductImageSettings: () => ({
+    pdp: {
+      resolutions: [{
+        width: 440,
+        height: 440
+      }, {
+        width: 1024,
+        height: 1024
+      }],
+      ratio: null
+    },
+    gallery: {
+      resolutions: [{
+        width: 1024,
+        height: 1024
+      }, {
+        width: 2048,
+        height: 2048
+      }],
+      ratio: null
+    },
+    list: {
+      resolutions: [{
+        width: 440,
+        height: 440
+      }],
+      ratio: null
+    }
+  }),
+  // Mocking the barrel replaces every export, and the Image component pulls this one from it.
+  useImageServiceSettings: () => ({
+    quality: 75,
+    fillColor: 'FFFFFF',
+    fillTransparent: true
+  })
+}));
+
+/**
+ * Reads the placeholder element the component hands to the Image. Image decides when to render it,
+ * so the placeholder is a prop here rather than part of this component's tree.
+ * @param {Object} wrapper The rendered ProductImage.
+ * @returns {JSX.Element} The placeholder element.
+ */
+const getPlaceholder = wrapper => wrapper.find(Image).prop('placeholder');
+
+/**
+ * Renders down to the component's own output, past the wrapper that supplies the shop wide
+ * placeholder and past the portals.
+ * @param {JSX.Element} element The element to render.
+ * @returns {Object} The rendered component.
+ */
+const renderProductImage = element => shallow(element).dive().dive();
 describe('<ProductImage />', () => {
   it('should render a placeholder if no src prop is provided', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(ProductImage, {})).dive();
+    const wrapper = renderProductImage(/*#__PURE__*/_jsx(ProductImage, {}));
     expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(Image).length).toBe(0);
-    expect(wrapper.find(PlaceholderIcon).length).toBe(1);
+    expect(shallow(getPlaceholder(wrapper)).find(PlaceholderIcon).length).toBe(1);
   });
   it('should render the image without a placeholder', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(ProductImage, {
+    const wrapper = renderProductImage(/*#__PURE__*/_jsx(ProductImage, {
       src: "http://placehold.it/300x300"
-    })).dive();
-    expect(wrapper).toMatchSnapshot();
+    }));
     expect(wrapper.find(Image).length).toBe(1);
     expect(wrapper.find(PlaceholderIcon).length).toBe(0);
-  });
-  it('should not apply an inner shadow to the placeholder if turned off via the app config', () => {
-    jest.spyOn(appConfig, 'hideProductImageShadow', 'get').mockReturnValue(true);
-    const wrapper = shallow(/*#__PURE__*/_jsx(ProductImage, {
-      placeholderSrc: "http://placehold.it/300x300"
-    })).dive();
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(ProductImagePlaceholder).prop('showInnerShadow')).toBe(false);
-  });
-  it('should not apply an inner shadow to the image if turned off via the app config', () => {
-    jest.spyOn(appConfig, 'hideProductImageShadow', 'get').mockReturnValue(true);
-    const wrapper = shallow(/*#__PURE__*/_jsx(ProductImage, {
-      src: "http://placehold.it/300x300"
-    })).dive();
     expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(Image).prop('className')).toBe('');
   });
-  it('should not apply an inner shadow to the placeholder if turned off via the widget settings', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(ProductImage, {
-      placeholderSrc: "http://placehold.it/300x300",
-      widgetSettings: {
-        showInnerShadow: false
-      }
-    })).dive();
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(ProductImagePlaceholder).prop('showInnerShadow')).toBe(false);
-  });
-  it('should not apply an inner shadow to the image if turned off via the widget settings', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(ProductImage, {
+
+  // Most callers are untyped .jsx, and extensions are not type checked at all.
+  it('should fall back to the default context for an unknown one', () => {
+    const wrapper = renderProductImage(/*#__PURE__*/_jsx(ProductImage, {
       src: "http://placehold.it/300x300",
-      widgetSettings: {
-        showInnerShadow: false
-      }
-    })).dive();
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(Image).prop('className')).toBe('');
+      context: "somethingElse"
+    }));
+    expect(wrapper.find(Image).prop('resolutions')).toEqual([{
+      width: 440,
+      height: 440
+    }]);
   });
-  it('should apply an inner shadow to the placeholder if turned off via the widget settings', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(ProductImage, {
-      widgetSettings: {
-        showInnerShadow: true
-      },
-      placeholderSrc: "http://placehold.it/300x300"
-    })).dive();
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(ProductImagePlaceholder).prop('showInnerShadow')).toBe(true);
-  });
-  it('should apply an inner shadow to the image if turned off via the widget settings', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(ProductImage, {
-      src: "http://placehold.it/300x300",
-      widgetSettings: {
-        showInnerShadow: true
-      }
-    })).dive();
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(Image).prop('className')).toBeTruthy();
+  describe('inner shadow', () => {
+    it('should not apply it to the placeholder when the hook says no', () => {
+      useProductImageShadow.mockReturnValue(false);
+      const wrapper = renderProductImage(/*#__PURE__*/_jsx(ProductImage, {
+        placeholderSrc: "http://placehold.it/300x300"
+      }));
+      expect(getPlaceholder(wrapper).type).toBe(ProductImagePlaceholder);
+      expect(getPlaceholder(wrapper).props.showInnerShadow).toBe(false);
+      expect(wrapper).toMatchSnapshot();
+    });
+    it('should not apply it to the image when the hook says no', () => {
+      useProductImageShadow.mockReturnValue(false);
+      const wrapper = renderProductImage(/*#__PURE__*/_jsx(ProductImage, {
+        src: "http://placehold.it/300x300"
+      }));
+      expect(wrapper.find(Image).prop('className')).not.toContain('innerShadow');
+      expect(wrapper).toMatchSnapshot();
+    });
+    it('should apply it to the placeholder when the hook says yes', () => {
+      useProductImageShadow.mockReturnValue(true);
+      const wrapper = renderProductImage(/*#__PURE__*/_jsx(ProductImage, {
+        placeholderSrc: "http://placehold.it/300x300"
+      }));
+      expect(getPlaceholder(wrapper).type).toBe(ProductImagePlaceholder);
+      expect(getPlaceholder(wrapper).props.showInnerShadow).toBe(true);
+      expect(wrapper).toMatchSnapshot();
+    });
+    it('should apply it to the image when the hook says yes', () => {
+      useProductImageShadow.mockReturnValue(true);
+      const wrapper = renderProductImage(/*#__PURE__*/_jsx(ProductImage, {
+        src: "http://placehold.it/300x300"
+      }));
+      expect(wrapper.find(Image).prop('className')).toContain('innerShadow');
+      expect(wrapper).toMatchSnapshot();
+    });
   });
 });

package/product/components/ProductList/components/Item/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Image, Link, Grid, Availability } from '@shopgate/engage/components';
+import { Link, Grid, Availability } from '@shopgate/engage/components';
 import { bin2hex } from '@shopgate/pwa-common/helpers/data';
 import Portal from '@shopgate/pwa-common/components/Portal';
 import * as portals from '@shopgate/pwa-common-commerce/category/constants/Portals';
@@ -12,6 +12,7 @@ import Manufacturer from '@shopgate/pwa-ui-shared/Manufacturer';
 import { PriceInfo, ProductName, ProductBadges } from '@shopgate/engage/product';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
+import ProductImage from "../../../ProductImage";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   listItemContainer: {
@@ -92,10 +93,11 @@ const Item = ({
           props: {
             productId: product.id
           },
-          children: /*#__PURE__*/_jsx(Image, {
+          children: /*#__PURE__*/_jsx(ProductImage, {
             itemProp: "image",
             src: product.featuredImageBaseUrl,
-            alt: product.name
+            alt: product.name,
+            context: "list"
           })
         }), /*#__PURE__*/_jsx(Portal, {
           name: portals.PRODUCT_ITEM_IMAGE_AFTER,

package/product/components/ProductRatingStars/ProductRatingStars.js

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import appConfig from '@shopgate/pwa-common/helpers/config';
 import { getProductRating } from '@shopgate/pwa-common-commerce/product/selectors/product';
 import { RatingStars } from '@shopgate/engage/components';
-import { useWidgetSettings } from '@shopgate/engage/core/hooks';
+import useShowEmptyRatingStars from "../../hooks/useShowEmptyRatingStars";
 import { jsx as _jsx } from "react/jsx-runtime";
 const {
   hasReviews
@@ -20,9 +20,7 @@ const ProductRatingStars = ({
   getProductRating(state, {
     productId
   }));
-  const {
-    showEmptyRatingStars = false
-  } = useWidgetSettings('@shopgate/engage/rating');
+  const showEmptyRatingStars = useShowEmptyRatingStars();
   const showRatings = useMemo(() => {
     if (hasReviews && (rating?.average ?? 0) > 0) {
       return true;

package/product/components/ProductSlider/constants.d.ts

@@ -0,0 +1,3 @@
+export const WIDGET_ID: "@shopgate/engage/product/ProductSlider";
+export const DEFAULT_SLIDES_PER_VIEW: 2.3;
+//# sourceMappingURL=constants.d.ts.map

package/product/components/ProductSlider/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductSlider/constants.js"],"names":[],"mappings":"AAAA,wBAAyB,wCAAwC,CAAC;AAElE,sCAAuC,GAAG,CAAC"}

package/product/components/ProductSlider/constants.js

@@ -0,0 +1,2 @@
+export const WIDGET_ID = '@shopgate/engage/product/ProductSlider';
+export const DEFAULT_SLIDES_PER_VIEW = 2.3;

package/product/components/ProductSlider/hooks.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Resolves the number of slides the ProductSlider shows side by side for the active breakpoint.
+ * @param slidesPerViewProp The explicit prop value, if the caller passed one.
+ * @returns The resolved number of slides for the active breakpoint.
+ */
+export declare const useSlidesPerView: (slidesPerViewProp?: number) => number;
+//# sourceMappingURL=hooks.d.ts.map

package/product/components/ProductSlider/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductSlider/hooks.ts"],"names":[],"mappings":"AAiBA;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,oBAAoB,MAAM,KAAG,MAgC7D,CAAC"}

package/product/components/ProductSlider/hooks.js

@@ -0,0 +1,40 @@
+import "core-js/modules/es.array.reduce.js";
+import { useContext, useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { WidgetContext } from '@shopgate/engage/page/components/Widgets/WidgetContext';
+import { useWidgetSettings } from '@shopgate/engage/core/hooks';
+import { useResponsiveValue } from '@shopgate/engage/styles';
+import { getAreAppSettingsHydrated, getProductSliderSlidesPerView } from '@shopgate/engage/settings/selectors/appSettings';
+import { SCREEN_SIZE_BREAKPOINTS } from '@shopgate/engage/settings/constants/appSettings';
+import { WIDGET_ID, DEFAULT_SLIDES_PER_VIEW } from "./constants";
+
+/**
+ * Resolves the number of slides the ProductSlider shows side by side for the active breakpoint.
+ * @param slidesPerViewProp The explicit prop value, if the caller passed one.
+ * @returns The resolved number of slides for the active breakpoint.
+ */
+export const useSlidesPerView = slidesPerViewProp => {
+  const {
+    code: widgetCode
+  } = useContext(WidgetContext);
+  const isInsideWidget = Boolean(widgetCode);
+  const areAppSettingsHydrated = useSelector(getAreAppSettingsHydrated);
+  const appSettingsSlidesPerView = useSelector(getProductSliderSlidesPerView);
+  const {
+    slidesPerView: legacySlidesPerView
+  } = useWidgetSettings(WIDGET_ID) || {};
+  const sizes = useMemo(() => {
+    if (!areAppSettingsHydrated && !isInsideWidget && typeof legacySlidesPerView === 'number') {
+      return {
+        small: legacySlidesPerView
+      };
+    }
+    return appSettingsSlidesPerView;
+  }, [areAppSettingsHydrated, isInsideWidget, legacySlidesPerView, appSettingsSlidesPerView]);
+  const breakpoints = useMemo(() => Object.entries(sizes).reduce((acc, [size, value]) => {
+    acc[SCREEN_SIZE_BREAKPOINTS[size]] = value;
+    return acc;
+  }, {}), [sizes]);
+  const resolved = useResponsiveValue(breakpoints);
+  return slidesPerViewProp || resolved || DEFAULT_SLIDES_PER_VIEW;
+};

package/product/components/ProductSlider/index.js

@@ -1,21 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useWidgetSettings } from '@shopgate/engage/core';
 import { useThemeComponents } from '@shopgate/engage/core/hooks';
 import { Swiper } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { ProductListTypeProvider, ProductListEntryProvider } from '@shopgate/engage/product/providers';
+import { useSlidesPerView } from "./hooks";
+import { WIDGET_ID } from "./constants";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   container: {
-    paddingBottom: 10
+    padding: '8px 9px 16px !important'
   }
 });
 const items = {
   margin: '0 8px',
   height: '100%'
 };
-export const WIDGET_ID = '@shopgate/engage/product/ProductSlider';
 
 /**
  * @param {Object} props The component props.
@@ -36,12 +36,10 @@ function ProductSlider(props) {
     meta,
     productItemProps,
     item,
+    slidesPerView: slidesPerViewProp,
     ...swiperProps
   } = props;
-  const widgetSettings = useWidgetSettings(WIDGET_ID) || {};
-  const {
-    slidesPerView = 2.3
-  } = props.slidesPerView ? props : widgetSettings;
+  const slidesPerView = useSlidesPerView(slidesPerViewProp);
   // ProductSlider items are rendered with the ProductCard component provided by the theme.
   const {
     ProductCard
@@ -63,8 +61,10 @@ function ProductSlider(props) {
       freeMode: !snap,
       ...swiperProps,
       slidesPerView: slidesPerView,
+      classNames: {
+        container: classes.container
+      },
       children: productIds.map(id => /*#__PURE__*/_jsx(Swiper.Item, {
-        className: classes.container,
         children: /*#__PURE__*/_jsx(ProductListEntryProvider, {
           productId: id,
           children: /*#__PURE__*/_jsx(Item, {

package/product/components/ProductSlider/spec.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import ProductSlider from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
-jest.mock('@shopgate/engage/core', () => ({
-  useWidgetSettings: jest.fn()
+jest.mock("./hooks", () => ({
+  useSlidesPerView: jest.fn(() => 2.3)
 }));
 jest.mock('@shopgate/engage/components', () => {
   const Swiper = ({

package/product/components/Rating/index.js

@@ -4,7 +4,7 @@ import appConfig from '@shopgate/pwa-common/helpers/config';
 import { RatingStars, SurroundPortals } from '@shopgate/engage/components';
 import { PRODUCT_RATING } from '@shopgate/engage/product/constants';
 import RatingCount from '@shopgate/engage/reviews/components/Reviews/components/RatingCount';
-import { useWidgetSettings } from '@shopgate/engage/core/hooks';
+import { useShowEmptyRatingStars } from '@shopgate/engage/product/hooks';
 import { makeStyles } from '@shopgate/engage/styles';
 import connect from "./connector";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -42,9 +42,7 @@ const Rating = ({
   const {
     classes
   } = useStyles();
-  const {
-    showEmptyRatingStars = false
-  } = useWidgetSettings('@shopgate/engage/rating');
+  const showEmptyRatingStars = useShowEmptyRatingStars();
   const showRatings = useMemo(() => {
     if (hasReviews && (rating?.average ?? 0) > 0) {
       return true;

package/product/components/RelationsSlider/RelationsSliderContent.js

@@ -6,6 +6,7 @@ import ProductCard from "../ProductCard";
 import RelationsSheet from "./RelationsSheet";
 import { useWidgetSettings, useCurrentProduct } from "../../../core";
 import connect from "./RelationsSlider.connector";
+import { useSlidesPerView } from "./hooks";
 import { WIDGET_ID } from "./constants";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
@@ -51,12 +52,12 @@ const RelationsSliderContent = /*#__PURE__*/memo(({
     hideRating,
     titleRows,
     showMoreButton,
-    type,
-    slidesPerView = 2.3
+    type
   } = useWidgetSettings(WIDGET_ID);
   const {
     productId
   } = useCurrentProduct();
+  const slidesPerView = useSlidesPerView();
   useEffect(() => {
     getRelations();
   }, [getRelations]);

package/product/components/RelationsSlider/constants.d.ts

@@ -0,0 +1,3 @@
+export const WIDGET_ID: "@shopgate/engage/product/RelationsSlider";
+export const DEFAULT_SLIDES_PER_VIEW: 2.3;
+//# sourceMappingURL=constants.d.ts.map

package/product/components/RelationsSlider/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../product/components/RelationsSlider/constants.js"],"names":[],"mappings":"AAAA,wBAAyB,0CAA0C,CAAC;AAEpE,sCAAuC,GAAG,CAAC"}

package/product/components/RelationsSlider/constants.js

@@ -1 +1,2 @@
-export const WIDGET_ID = '@shopgate/engage/product/RelationsSlider';
+export const WIDGET_ID = '@shopgate/engage/product/RelationsSlider';
+export const DEFAULT_SLIDES_PER_VIEW = 2.3;

package/product/components/RelationsSlider/hooks.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Resolves the number of slides the RelationsSlider shows side by side for the active breakpoint.
+ * @returns The resolved number of slides for the active breakpoint.
+ */
+export declare const useSlidesPerView: () => number;
+//# sourceMappingURL=hooks.d.ts.map

package/product/components/RelationsSlider/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../product/components/RelationsSlider/hooks.ts"],"names":[],"mappings":"AAgBA;;;GAGG;AACH,eAAO,MAAM,gBAAgB,QAAO,MA6BnC,CAAC"}

package/product/components/RelationsSlider/hooks.js

@@ -0,0 +1,34 @@
+import "core-js/modules/es.array.reduce.js";
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { useWidgetSettings } from '@shopgate/engage/core/hooks';
+import { useResponsiveValue } from '@shopgate/engage/styles';
+import { getAreAppSettingsHydrated, getProductSliderSlidesPerView } from '@shopgate/engage/settings/selectors/appSettings';
+import { SCREEN_SIZE_BREAKPOINTS } from '@shopgate/engage/settings/constants/appSettings';
+import { WIDGET_ID, DEFAULT_SLIDES_PER_VIEW } from "./constants";
+
+/**
+ * Resolves the number of slides the RelationsSlider shows side by side for the active breakpoint.
+ * @returns The resolved number of slides for the active breakpoint.
+ */
+export const useSlidesPerView = () => {
+  const areAppSettingsHydrated = useSelector(getAreAppSettingsHydrated);
+  const appSettingsSlidesPerView = useSelector(getProductSliderSlidesPerView);
+  const {
+    slidesPerView: legacySlidesPerView
+  } = useWidgetSettings(WIDGET_ID) || {};
+  const sizes = useMemo(() => {
+    if (!areAppSettingsHydrated && typeof legacySlidesPerView === 'number') {
+      return {
+        small: legacySlidesPerView
+      };
+    }
+    return appSettingsSlidesPerView;
+  }, [areAppSettingsHydrated, legacySlidesPerView, appSettingsSlidesPerView]);
+  const breakpoints = useMemo(() => Object.entries(sizes).reduce((acc, [size, value]) => {
+    acc[SCREEN_SIZE_BREAKPOINTS[size]] = value;
+    return acc;
+  }, {}), [sizes]);
+  const resolved = useResponsiveValue(breakpoints);
+  return resolved || DEFAULT_SLIDES_PER_VIEW;
+};

package/product/helpers/index.js

@@ -1,7 +1,9 @@
 import configuration from '@shopgate/pwa-common/collections/Configuration';
+import { logger } from '@shopgate/pwa-core/helpers';
 import { DEFAULT_PRODUCTS_FETCH_PARAMS } from '@shopgate/pwa-common/constants/Configuration';
 import { getFullImageSource, isBeta, loadImage } from '@shopgate/engage/core/helpers';
 import { getThemeSettings } from '@shopgate/engage/core/config';
+import { PRODUCT_IMAGE_BASE_WIDTHS } from '@shopgate/engage/settings/constants/imageSettings';
 import { buildShowScheduledParams } from "../components/EffectivityDates/helpers";
 export * from '@shopgate/pwa-common-commerce/product/helpers';
 export * from "../components/Media/helpers";
@@ -47,11 +49,23 @@ export const setDefaultProductFetchParams = () => {
   });
 };
 
+/**
+ * Whether the deprecation warning for getProductImageSettings has already been logged. Nulled
+ * after the first log, so a single warning is emitted per session rather than one per render.
+ */
+let productImageSettingsWarning = 'getProductImageSettings() is deprecated. Use the "context" prop of ProductImage, or the useProductImageSettings hook from @shopgate/engage/settings/hooks, so that images follow the configured aspect ratio.';
+
 /**
  * Provides the settings for ProductImages
+ * @deprecated Use the "context" prop of ProductImage, or useProductImageSettings. This accessor
+ * only reads the legacy theme configuration, so it does not pick up admin configured ratios.
  * @return {Object}
  */
 export const getProductImageSettings = () => {
+  if (productImageSettingsWarning) {
+    logger.warn(productImageSettingsWarning);
+    productImageSettingsWarning = null;
+  }
   const appImages = getThemeSettings('AppImages');
   return {
     quality: 75,
@@ -79,18 +93,22 @@ export const getProductImageSettings = () => {
 };
 
 /**
- * Load product image with given resolution
+ * Load product image with given resolution.
+ *
+ * A preload only pays off when it requests the same url the rendered image does, so pass the
+ * resolution and settings that image resolves. Anything omitted falls back to the built-in
+ * defaults.
  * @param {string} src .
- * @param {Object} resolution .
+ * @param {Object} [resolution] The resolution to preload. Falls back to the smallest built-in pdp
+ * resolution at a 1:1 ratio.
+ * @param {Object} [settings] The image service settings, as resolved by useImageServiceSettings.
  * @returns {Promise}
  */
-export const loadProductImage = (src, resolution = null) => {
-  let res = resolution;
-  if (!res) {
-    const {
-      HeroImage: resolutions
-    } = getProductImageSettings();
-    [res] = resolutions;
-  }
-  return loadImage(getFullImageSource(src, res));
+export const loadProductImage = (src, resolution = null, settings = undefined) => {
+  const [baseWidth] = PRODUCT_IMAGE_BASE_WIDTHS.pdp;
+  const res = resolution ?? {
+    width: baseWidth,
+    height: baseWidth
+  };
+  return loadImage(getFullImageSource(src, res, settings));
 };

package/product/hooks/index.js

@@ -1,3 +1,5 @@
 export { useLoadProductImage } from "./useLoadProductImage";
 export { default as useProductListEntry } from "./useProductListEntry";
-export { default as useProductListType } from "./useProductListType";
+export { default as useProductListType } from "./useProductListType";
+export { default as useShowEmptyRatingStars } from "./useShowEmptyRatingStars";
+export { useSlidesPerView } from "../components/ProductSlider/hooks";

package/product/hooks/useLoadProductImage.js

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useImageServiceSettings } from '@shopgate/engage/settings/hooks';
 import { loadProductImage } from "../helpers/index";
 
 /**
@@ -9,6 +10,7 @@ import { loadProductImage } from "../helpers/index";
  */
 export function useLoadProductImage(src, resolution = null) {
   const [loadedImage, setLoadedImage] = useState(null);
+  const imageServiceSettings = useImageServiceSettings();
   useEffect(() => {
     if (src) {
       setLoadedImage(null);
@@ -16,8 +18,8 @@ export function useLoadProductImage(src, resolution = null) {
   }, [src]);
   useEffect(() => {
     if (src && !loadedImage) {
-      loadProductImage(src, resolution).then(imageSrc => setLoadedImage(imageSrc));
+      loadProductImage(src, resolution, imageServiceSettings).then(imageSrc => setLoadedImage(imageSrc));
     }
-  }, [loadedImage, resolution, src]);
+  }, [imageServiceSettings, loadedImage, resolution, src]);
   return loadedImage;
 }

package/product/hooks/useShowEmptyRatingStars.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Resolves whether rating stars are also rendered for products without a rating.
+ * @returns Whether empty rating stars are shown.
+ */
+declare const useShowEmptyRatingStars: () => boolean;
+export default useShowEmptyRatingStars;
+//# sourceMappingURL=useShowEmptyRatingStars.d.ts.map

package/product/hooks/useShowEmptyRatingStars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShowEmptyRatingStars.d.ts","sourceRoot":"","sources":["../../../product/hooks/useShowEmptyRatingStars.ts"],"names":[],"mappings":"AASA;;;GAGG;AACH,QAAA,MAAM,uBAAuB,QAAO,OAYnC,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/product/hooks/useShowEmptyRatingStars.js

@@ -0,0 +1,21 @@
+import { useSelector } from 'react-redux';
+import { useWidgetSettings } from '@shopgate/engage/core/hooks';
+import { getAreAppSettingsHydrated, getShowEmptyRatingStars } from '@shopgate/engage/settings/selectors/appSettings';
+const RATING_WIDGET_ID = '@shopgate/engage/rating';
+
+/**
+ * Resolves whether rating stars are also rendered for products without a rating.
+ * @returns Whether empty rating stars are shown.
+ */
+const useShowEmptyRatingStars = () => {
+  const areAppSettingsHydrated = useSelector(getAreAppSettingsHydrated);
+  const showEmptyStars = useSelector(getShowEmptyRatingStars);
+  const {
+    showEmptyRatingStars: legacyShowEmptyRatingStars = false
+  } = useWidgetSettings(RATING_WIDGET_ID) || {};
+  if (!areAppSettingsHydrated) {
+    return legacyShowEmptyRatingStars;
+  }
+  return showEmptyStars;
+};
+export default useShowEmptyRatingStars;

package/product/index.js

@@ -37,7 +37,6 @@ export * from "./selectors/relations";
 export { ProductContext, VariantContext } from "./components/context";
 export { default as ProductListTypeContext } from "./providers/ProductListType/context";
 export { default as ProductListEntryContext } from "./providers/ProductListEntry/context";
-export * from "./collections";
 export * from "./constants";
 export * from "./helpers";
 export * from "./components";