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

package/back-in-stock/components/Subscriptions/components/Subscription/index.js

@@ -4,7 +4,7 @@ import { makeStyles } from '@shopgate/engage/styles';
 import { getProductRoute, ProductImage } from '@shopgate/engage/product';
 import PropTypes from 'prop-types';
 import { BackInStockButton } from '@shopgate/engage/back-in-stock/components';
-import { getThemeSettings, i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core';
 import { useBackInStockSubscriptions } from '@shopgate/engage/back-in-stock/hooks';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
@@ -77,9 +77,6 @@ const Subscription = ({
   const {
     removeBackInStockSubscription
   } = useBackInStockSubscriptions();
-  const {
-    ListImage: gridResolutions
-  } = getThemeSettings('AppImages') || {};
   const currency = product.price?.currency || 'EUR';
   const defaultPrice = product.price?.unitPrice || 0;
   const specialPrice = product.price?.unitPriceStriked;
@@ -94,7 +91,7 @@ const Subscription = ({
       "aria-hidden": true,
       children: /*#__PURE__*/_jsx(ProductImage, {
         src: product.featuredImageBaseUrl,
-        resolutions: gridResolutions
+        context: "list"
       })
     }), /*#__PURE__*/_jsxs("div", {
       className: classes.infoContainer,

package/cart/components/CartItem/CartItemProductLayout.js

@@ -27,7 +27,6 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
   image: {
     background: theme.palette.background.emphasized,
     marginBottom: theme.spacing(1.25),
-    height: leftColumnWidth,
     width: leftColumnWidth
   },
   content: {
@@ -218,6 +217,7 @@ export function CartItemProductLayout() {
               portalName: CART_ITEM_IMAGE,
               portalProps: portalProps,
               children: /*#__PURE__*/_jsx(ProductImage, {
+                context: "list",
                 src: product.featuredImageBaseUrl || product.featuredImageUrl
               })
             })

package/cart/components/CartItem/CartItemProductLayoutWide.js

@@ -22,7 +22,6 @@ const useStyles = makeStyles()((theme, _params, classes) => ({
   },
   imageColumn: {
     width: 120,
-    height: 120,
     marginRight: theme.spacing(1),
     flexShrink: 0,
     flexGrow: 0
@@ -163,7 +162,8 @@ const CartItemProductLayoutWide = () => {
       children: [/*#__PURE__*/_jsx("div", {
         className: classes.imageColumn,
         children: /*#__PURE__*/_jsx(ProductImage, {
-          src: product.featuredImageBaseUrl || product.featuredImageUrl
+          src: product.featuredImageBaseUrl || product.featuredImageUrl,
+          context: "list"
         })
       }), /*#__PURE__*/_jsxs("div", {
         className: classes.detailsColumn,

package/category/components/CategoryImage/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Image } from '@shopgate/engage/components';
 import connect from "./connector";
@@ -14,24 +14,20 @@ const CategoryImage = ({
   src,
   placeholderSrc
 }) => {
-  const [showPlaceholder, setShowPlaceholder] = useState(!src);
-  const onImageError = useCallback(() => {
-    setShowPlaceholder(true);
-  }, [setShowPlaceholder]);
-  if (!showPlaceholder) {
-    return /*#__PURE__*/_jsx(Image, {
-      className: className,
-      src: src,
-      onError: onImageError
-    });
-  }
-  if (!placeholderSrc) {
+  if (!src && !placeholderSrc) {
     return null;
   }
   return /*#__PURE__*/_jsx(Image, {
     className: className,
-    src: placeholderSrc
-  }, "placeholder");
+    src: src
+    // Unwrapped, so the fallback renders into the container the outer Image already provides
+    // rather than nesting a second aspect ratio box inside it.
+    ,
+    placeholder: placeholderSrc ? /*#__PURE__*/_jsx(Image, {
+      unwrapped: true,
+      src: placeholderSrc
+    }) : null
+  });
 };
 CategoryImage.defaultProps = {
   src: null,

package/components/constants.d.ts

@@ -0,0 +1,6 @@
+export const PORTAL_PRODUCT_IMAGE: "component.product-image";
+export const PORTAL_PRODUCT_MEDIA: "component.product-media";
+export const PORTAL_PRODUCT_MEDIA_SECTION: "component.product-media-section";
+export const PORTAL_PRODUCT_BADGES: "component.product-badges";
+export const PORTAL_PRODUCT_IMAGE_SLIDER: "component.product-image-slider";
+//# sourceMappingURL=constants.d.ts.map

package/components/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../components/constants.js"],"names":[],"mappings":"AAAA,mCAAoC,yBAAyB,CAAC;AAC9D,mCAAoC,yBAAyB,CAAC;AAC9D,2CAA4C,iCAAiC,CAAC;AAC9E,oCAAqC,0BAA0B,CAAC;AAChE,0CAA2C,gCAAgC,CAAC"}

package/core/helpers/getFullImageSource.d.ts

@@ -1,5 +1,9 @@
-export function getFullImageSource(src: string, { width, height }?: {
+export function getFullImageSource(src: string | null, { width, height }?: {
     width: number;
     height: number;
+}, settings?: {
+    quality?: number | undefined;
+    fillColor?: string | undefined;
+    fillTransparent?: boolean | undefined;
 }): string;
 //# sourceMappingURL=getFullImageSource.d.ts.map

package/core/helpers/getFullImageSource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getFullImageSource.d.ts","sourceRoot":"","sources":["../../../core/helpers/getFullImageSource.js"],"names":[],"mappings":"AA+CO,wCANI,MAAM,sBAEd;IAA0B,KAAK,EAAvB,MAAM;IACY,MAAM,EAAxB,MAAM;CACd,GAAU,MAAM,CAgDlB"}
+{"version":3,"file":"getFullImageSource.d.ts","sourceRoot":"","sources":["../../../core/helpers/getFullImageSource.js"],"names":[],"mappings":"AAiEO,wCAVI,MAAM,GAAC,IAAI,sBAEnB;IAA0B,KAAK,EAAvB,MAAM;IACY,MAAM,EAAxB,MAAM;CACd,aACA;IAA0B,OAAO;IACP,SAAS;IACR,eAAe;CAC1C,GAAU,MAAM,CAyDlB"}

package/core/helpers/getFullImageSource.js

@@ -5,9 +5,18 @@ import "core-js/modules/web.url.to-json.js";
 import "core-js/modules/web.url-search-params.js";
 import { CONFIGURATION_COLLECTION_CREATE_EXTERNAL_IMAGE_URL } from '@shopgate/engage/core/constants';
 import { configuration } from '@shopgate/engage/core/collections';
-import { getProductImageSettings } from "../../product/helpers";
+import { DEFAULT_IMAGE_FILL_COLOR, DEFAULT_IMAGE_FILL_TRANSPARENT, DEFAULT_IMAGE_QUALITY } from '@shopgate/engage/settings/constants/imageSettings';
 import { getImageFormat } from "./getImageFormat";
 
+/**
+ * The settings applied when the caller passes none.
+ */
+const defaultSettings = {
+  quality: DEFAULT_IMAGE_QUALITY,
+  fillColor: DEFAULT_IMAGE_FILL_COLOR,
+  fillTransparent: DEFAULT_IMAGE_FILL_TRANSPARENT
+};
+
 /**
  * Regex to detect the "fill" query parameter
  */
@@ -43,29 +52,38 @@ const buildUrl = (baseUrl, params = {}) => {
 };
 
 /**
- * Returns the actual url to the image, by adding url parameters with the dimensions for img-cdn
- * @param {string} src Source to the image.
+ * Builds the url that requests an image at a given size. A src that no known image source
+ * recognizes is returned untouched.
+ * @param {string|null} src Source to the image.
  * @param {Object} dimension Dimension of the requested image.
  * @param {number} dimension.width Width in pixels.
  * @param {number} dimension.height Height in pixels.
+ * @param {Object} [settings] Image service settings, as resolved by useImageServiceSettings.
+ * @param {number} [settings.quality] Compression quality.
+ * @param {string} [settings.fillColor] Fill color as a hash free hex, not a CSS color.
+ * @param {boolean} [settings.fillTransparent] Whether transparent areas are filled too.
  * @returns {string}
  */
 export const getFullImageSource = (src, {
   width,
   height
-} = {}) => {
+} = {}, settings = {}) => {
+  const {
+    quality,
+    fillColor,
+    fillTransparent
+  } = {
+    ...defaultSettings,
+    ...settings
+  };
   if (src && src.includes('images.shopgate.services')) {
-    const {
-      fillColor,
-      quality
-    } = getProductImageSettings();
     const format = getImageFormat();
     return buildUrl(src, {
       format,
       width,
       height,
       quality,
-      fill: fillColor.replace('#', '')
+      fill: fillTransparent ? `${fillColor},1` : fillColor
     });
   }
   if (src && src.startsWith('https://img-cdn.shopgate.com') && !src.includes('?')) {
@@ -74,17 +92,14 @@ export const getFullImageSource = (src, {
       h: height,
       q: 70,
       zd: 'resize',
-      fillc: 'FFFFFF'
+      // No transparency flag here - the legacy cdn only understands a plain color.
+      fillc: fillColor
     });
   }
 
   // Check if an extension registered an external image url handler within the config collection.
   const createUrlFn = configuration.get(CONFIGURATION_COLLECTION_CREATE_EXTERNAL_IMAGE_URL);
   if (typeof createUrlFn === 'function') {
-    const {
-      fillColor,
-      quality
-    } = getProductImageSettings();
     const format = getImageFormat();
 
     // Invoke the handler with all relevant parameters.
@@ -92,6 +107,7 @@ export const getFullImageSource = (src, {
       width,
       height,
       fillColor,
+      fillTransparent,
       quality,
       format
     });

package/core/helpers/i18n.d.ts

@@ -40,6 +40,10 @@ export type I18nHelpers = {
      * - Get locale data by path
      */
     getPath: Function;
+    /**
+     * - Check whether a translation key resolves to a value
+     */
+    has: Function;
     /**
      * - Get locale lang code, eg de-DE
      */

package/core/helpers/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../core/helpers/i18n.js"],"names":[],"mappings":"AAyEA;;GAEG;AACH,mBAFU,WAAW,CAEM;AAMpB,oCAFM,MAAM,EAAE,CAQpB"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../core/helpers/i18n.js"],"names":[],"mappings":"AA4EA;;GAEG;AACH,mBAFU,WAAW,CAEM;AAMpB,oCAFM,MAAM,EAAE,CAQpB"}

package/core/helpers/i18n.js

@@ -13,6 +13,7 @@ import { logger } from '@shopgate/pwa-core/helpers';
  * @property {Function} number - Number translator
  * @property {Function} getSupplementalData - Get Supplemental Data
  * @property {Function} getPath - Get locale data by path
+ * @property {Function} has - Check whether a translation key resolves to a value
  * @property {Function} getLang - Get locale lang code, eg de-DE
  */
 
@@ -50,6 +51,7 @@ const I18n = () => {
       this.number = getNumberFormatter(lang);
       this.getSupplementalData = () => locales.supplementalData || {};
       this.getPath = path => get(locales, path);
+      this.has = path => this.getPath(path) !== undefined;
       this.getLang = () => lang;
       // If component decides to act accordingly this information should be exposed.
       this.ready = true;
@@ -62,6 +64,7 @@ const I18n = () => {
     number: notReadyCb,
     getSupplementalData: notReadyCb,
     getPath: notReadyCb,
+    has: notReadyCb,
     getLang: notReadyCb,
     ready: false
   };

package/core/hooks/html/useLoadImage.d.ts

@@ -1,7 +1,7 @@
 /**
  * Load image hook
- * @param {string} src .
- * @returns {boolean}
+ * @param {string|null} src The image to preload. A falsy src is a no-op.
+ * @returns {boolean} Whether the image has finished loading.
  */
-export function useLoadImage(src: string): boolean;
+export function useLoadImage(src: string | null): boolean;
 //# sourceMappingURL=useLoadImage.d.ts.map

package/core/hooks/html/useLoadImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLoadImage.d.ts","sourceRoot":"","sources":["../../../../core/hooks/html/useLoadImage.js"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,kCAHW,MAAM,GACJ,OAAO,CAUnB"}
+{"version":3,"file":"useLoadImage.d.ts","sourceRoot":"","sources":["../../../../core/hooks/html/useLoadImage.js"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,kCAHW,MAAM,GAAC,IAAI,GACT,OAAO,CAUnB"}

package/core/hooks/html/useLoadImage.js

@@ -3,8 +3,8 @@ import { loadImage } from '@shopgate/pwa-common/helpers/html/handleDOM';
 
 /**
  * Load image hook
- * @param {string} src .
- * @returns {boolean}
+ * @param {string|null} src The image to preload. A falsy src is a no-op.
+ * @returns {boolean} Whether the image has finished loading.
  */
 export function useLoadImage(src) {
   const [loaded, setIsLoaded] = useState(false);

package/favorites/components/Item/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../favorites/components/Item/Item.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;QA2KY,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAnKD,YAAY"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../favorites/components/Item/Item.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;QA0KY,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAlKD,YAAY"}

package/favorites/components/Item/Item.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { MODAL_VARIANT_SELECT } from '@shopgate/pwa-ui-shared/Dialog/constants';
 import { ProductImage, ITEM_PATH, PriceInfo, isBaseProduct as isBaseProductSelector, isProductOrderable, hasProductVariants, ProductListEntryProvider } from '@shopgate/engage/product';
-import { bin2hex, showModal as showModalAction, historyPush as historyPushAction, getThemeSettings, i18n } from '@shopgate/engage/core';
+import { bin2hex, showModal as showModalAction, historyPush as historyPushAction, i18n } from '@shopgate/engage/core';
 import { hasNewServices } from '@shopgate/engage/core/helpers';
 import { Link, TextLink, SurroundPortals, Typography } from '@shopgate/engage/components';
 import { makeIsRopeProductOrderable, getPreferredLocation, StockInfoLists } from '@shopgate/engage/locations';
@@ -153,9 +153,6 @@ const FavoriteItem = ({
     classes,
     cx
   } = useStyles();
-  const {
-    ListImage: gridResolutions
-  } = getThemeSettings('AppImages') || {};
   const [isDisabled, setIsDisabled] = useState(!isOrderable && !hasVariants);
   const currency = product.price?.currency || 'EUR';
   const defaultPrice = product.price?.unitPrice || 0;
@@ -267,7 +264,7 @@ const FavoriteItem = ({
           children: /*#__PURE__*/_jsx(ProductImage, {
             className: cx('engage__favorites__item__image'),
             src: product.featuredImageBaseUrl,
-            resolutions: gridResolutions
+            context: "list"
           })
         }), /*#__PURE__*/_jsxs("div", {
           className: cx(classes.infoContainer, 'engage__favorites__item__info-container'),

package/favorites/components/List/List.d.ts

@@ -26,8 +26,8 @@ declare const _default: import("react-redux").ConnectedComponent<{
         useGetFavoriteIdsPipeline: boolean;
     };
 }, {
-    id: string;
     name: string;
+    id: string;
     remove: (...args: any[]) => any;
     addToCart: (...args: any[]) => any;
     removeItem: (...args: any[]) => any;

package/locations/components/StoreList/StoreListProduct.js

@@ -18,10 +18,9 @@ const useStyles = makeStyles()(theme => ({
   },
   productImage: {
     flex: '0 0 auto',
-    width: '2.5rem',
-    height: '2.5rem',
+    width: 70,
     background: theme.palette.background.emphasized,
-    marginRight: theme.spacing(2.5)
+    marginRight: theme.spacing(2)
   },
   productContent: {
     flexGrow: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.32.0-beta.5",
+  "version": "7.32.0-beta.6",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,13 +17,13 @@
   "scripts": {},
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@shopgate/native-modules": "1.0.0-beta.32",
-    "@shopgate/pwa-common": "7.32.0-beta.5",
-    "@shopgate/pwa-common-commerce": "7.32.0-beta.5",
-    "@shopgate/pwa-core": "7.32.0-beta.5",
-    "@shopgate/pwa-ui-ios": "7.32.0-beta.5",
-    "@shopgate/pwa-ui-material": "7.32.0-beta.5",
-    "@shopgate/pwa-ui-shared": "7.32.0-beta.5",
+    "@shopgate/native-modules": "1.0.0-beta.34",
+    "@shopgate/pwa-common": "7.32.0-beta.6",
+    "@shopgate/pwa-common-commerce": "7.32.0-beta.6",
+    "@shopgate/pwa-core": "7.32.0-beta.6",
+    "@shopgate/pwa-ui-ios": "7.32.0-beta.6",
+    "@shopgate/pwa-ui-material": "7.32.0-beta.6",
+    "@shopgate/pwa-ui-shared": "7.32.0-beta.6",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.44.1",
     "@virtuous/conductor": "~2.5.0",

package/page/widgets/ProductSlider/ProductSlider.js

@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import { ProductSlider } from '@shopgate/engage/product/components';
 import { useWidgetProducts } from '@shopgate/engage/page/hooks';
-import { useTheme } from '@shopgate/engage/styles';
 import { useProductSliderWidget } from "./hooks";
 import WidgetHeadline from "../../components/WidgetHeadline";
 
@@ -30,7 +29,6 @@ const ProductSliderWidget = () => {
     limit: productCount,
     sort
   });
-  const theme = useTheme();
   const productIds = useMemo(() => results?.map(result => result.id), [results]);
   if (!productIds || !productIds.length) {
     return null;
@@ -41,24 +39,12 @@ const ProductSliderWidget = () => {
     }) : null, /*#__PURE__*/_jsx(ProductSlider, {
       productIds: productIds,
       scope: "widgets",
-      productItemProps: productItemProps,
-      slidesPerView: 2.3
+      productItemProps: productItemProps
       // Improves interaction with the slider in the CMS preview iframe
       ,
       ...(isPreview ? {
         touchStartPreventDefault: true
       } : {}),
-      breakpoints: {
-        [theme.breakpoints.values.sm]: {
-          slidesPerView: 3.3
-        },
-        [theme.breakpoints.values.md]: {
-          slidesPerView: 4.3
-        },
-        [theme.breakpoints.values.lg]: {
-          slidesPerView: 5.3
-        }
-      },
       ...swiperProps
     })]
   });

package/product/components/Media/FeaturedMedia.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { SurroundPortals } from '@shopgate/engage/components';
 import { MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from '@shopgate/engage/product';
+import { useProductImageSettings } from '@shopgate/engage/settings/hooks';
 import { PORTAL_PRODUCT_MEDIA } from "../../../components/constants";
 import MediaImage from "./MediaImage";
 import FeaturedVideo from "./FeaturedVideo";
@@ -21,11 +22,16 @@ const FeaturedMedia = ({
   altText
 }) => {
   const TypeRenderer = types[type] || MediaImage;
+  const {
+    list
+  } = useProductImageSettings();
   return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PORTAL_PRODUCT_MEDIA,
     children: /*#__PURE__*/_jsx(TypeRenderer, {
       url: url,
-      altText: altText
+      altText: altText,
+      resolutions: list.resolutions,
+      ratio: list.ratio
     })
   });
 };

package/product/components/Media/MediaImage.js

@@ -1,14 +1,18 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Image from '@shopgate/pwa-common/components/Image';
-import appConfig from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import { SurroundPortals } from "../../../components";
 import { PORTAL_PRODUCT_IMAGE } from "../../../components/constants";
-import { useWidgetSettings } from "../../../core";
+import { useProductImageShadow } from "../ProductImage/hooks";
 import { defaultProps, propTypes } from "./props";
 import MediaPlaceholder from "./MediaPlaceholder";
+
+/**
+ * The widget id the legacy inner shadow setting is configured under for this component.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+const WIDGET_ID = '@shopgate/engage/product/MediaImage';
 const useStyles = makeStyles()({
   innerShadow: {
     ':after': {
@@ -33,41 +37,37 @@ const MediaImage = ({
   url,
   altText,
   className,
-  resolutions
+  resolutions,
+  ratio
 }) => {
   const {
     classes,
     cx
   } = useStyles();
-  const [placeholder, setPlaceholderEnabled] = useState(!url);
-  const {
-    showInnerShadow = !appConfig.hideProductImageShadow
-  } = useWidgetSettings('@shopgate/engage/product/MediaImage');
-  useEffect(() => setPlaceholderEnabled(!url), [url]);
+  const showInnerShadow = useProductImageShadow(WIDGET_ID);
   const mergedClassName = cx(className, {
     [classes.innerShadow]: showInnerShadow
   });
-  if (placeholder) {
-    return /*#__PURE__*/_jsx(SurroundPortals, {
-      portalName: PORTAL_PRODUCT_IMAGE,
-      children: /*#__PURE__*/_jsx(MediaPlaceholder, {
-        className: mergedClassName
-      })
-    });
-  }
   return /*#__PURE__*/_jsx(SurroundPortals, {
-    portalName: PORTAL_PRODUCT_IMAGE,
-    portalProps: {
+    portalName: PORTAL_PRODUCT_IMAGE
+    // Nothing is passed on without a url, so portals keep seeing what they saw before the
+    // placeholder moved into the Image component.
+    ,
+    portalProps: url ? {
       src: url,
-      resolutions
-    },
+      resolutions,
+      ratio
+    } : undefined,
     children: /*#__PURE__*/_jsx(Image, {
       src: url,
       resolutions: resolutions,
+      ratio: ratio,
       alt: altText,
       className: mergedClassName,
-      backgroundColor: "transparent",
-      onError: () => setPlaceholderEnabled(true),
+      backgroundColor: "transparent"
+      // Without the merged class name - it is already on the container this renders into.
+      ,
+      placeholder: /*#__PURE__*/_jsx(MediaPlaceholder, {}),
       animating: true
     })
   });
@@ -76,6 +76,7 @@ MediaImage.defaultProps = {
   url: defaultProps.url,
   altText: defaultProps.altText,
   className: defaultProps.className,
+  ratio: null,
   resolutions: undefined
 };
 export default MediaImage;

package/product/components/Media/MediaPlaceholder.js

@@ -5,15 +5,12 @@ import { defaultProps, propTypes } from "./props";
 import { jsx as _jsx } from "react/jsx-runtime";
 const placeholderIconScale = 0.65;
 const useStyles = makeStyles()(theme => ({
+  // Fills the box its parent reserves rather than reserving one of its own.
   placeholderContainer: {
-    position: 'relative',
+    position: 'absolute',
     width: '100%',
-    ':before': {
-      display: 'block',
-      content: '""',
-      width: '100%',
-      paddingTop: '100%'
-    }
+    height: '100%',
+    top: 0
   },
   placeholderContent: {
     position: 'absolute',

package/product/components/MediaSlider/components/MediaImage/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
+import { useProductImageSettings } from '@shopgate/engage/settings/hooks';
 import { MediaImage as Image } from "../../../Media";
-import { PRODUCT_SLIDER_IMAGE_FORMATS } from "../../constants";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   full: {
@@ -23,6 +23,9 @@ const MediaImage = ({
   const {
     classes
   } = useStyles();
+  const {
+    pdp
+  } = useProductImageSettings();
   return /*#__PURE__*/_jsx("div", {
     onClick: onClick,
     onKeyDown: onClick,
@@ -32,7 +35,8 @@ const MediaImage = ({
     children: /*#__PURE__*/_jsx(Image, {
       url: media.url,
       altText: media.altText,
-      resolutions: PRODUCT_SLIDER_IMAGE_FORMATS
+      resolutions: pdp.resolutions,
+      ratio: pdp.ratio
     })
   });
 };

package/product/components/MediaSlider/constants.js

@@ -1,15 +1,4 @@
 /**
  * key in the product image collection
  */
-export const PRODUCT_SLIDER_IMAGE_COLLECTION_KEY = 'PRODUCT_SLIDER_IMAGES';
-
-/**
- * themes value for the product slider image formats
- */
-export const PRODUCT_SLIDER_IMAGE_FORMATS = [{
-  width: 440,
-  height: 440
-}, {
-  width: 1024,
-  height: 1024
-}];
+export const PRODUCT_SLIDER_IMAGE_COLLECTION_KEY = 'PRODUCT_SLIDER_IMAGES';

package/product/components/ProductCard/index.js

@@ -1,12 +1,10 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { isBeta } from '@shopgate/engage/core/helpers';
-import { useWidgetSettings } from '@shopgate/engage/core/hooks';
-import { useProductListType } from '@shopgate/engage/product/hooks';
+import { useProductListType, useShowEmptyRatingStars } from '@shopgate/engage/product/hooks';
 import { Link, RatingStars, DiscountBadge, SurroundPortals } from '@shopgate/engage/components';
 import { getProductRoute } from '@shopgate/engage/product';
 import { MapPriceHint, ProductImage, OrderQuantityHint, FeaturedMedia, Swatches, ProductName, ProductBadges } from '@shopgate/engage/product/components';
-import { getProductImageSettings } from '@shopgate/engage/product/helpers';
 import { PRODUCT_ITEM_DISCOUNT, PRODUCT_ITEM_PRICE } from '@shopgate/engage/category';
 import { makeStyles } from '@shopgate/engage/styles';
 import ProductGridPrice from "../ProductGridPrice";
@@ -54,12 +52,7 @@ function ProductCard(props) {
   const {
     meta
   } = useProductListType();
-  const {
-    ListImage: gridResolutions
-  } = getProductImageSettings();
-  const {
-    showEmptyRatingStars = false
-  } = useWidgetSettings('@shopgate/engage/rating');
+  const showEmptyRatingStars = useShowEmptyRatingStars();
   const showRatings = useMemo(() => {
     if (!hideRating && product?.rating?.average > 0) {
       return true;
@@ -85,7 +78,7 @@ function ProductCard(props) {
       altText: product.featuredMedia.altText
     }) : /*#__PURE__*/_jsx(ProductImage, {
       src: product.featuredImageBaseUrl,
-      resolutions: gridResolutions,
+      context: "list",
       alt: product.name,
       itemProp: "image"
     }), /*#__PURE__*/_jsx(ProductBadges, {