@shopgate/engage 7.31.6 → 7.32.0-beta.10

package/product/components/ProductImage/ProductImage.d.ts

@@ -0,0 +1,42 @@
+import type { ImageProps } from '@shopgate/pwa-common/components/Image';
+import type { ImageResolution, ProductImageContext } from '@shopgate/engage/settings/types/appSettings';
+/**
+ * Everything the underlying Image accepts is forwarded, minus the two this component owns:
+ * `backgroundColor`, derived from `noBackground`, and `placeholder`.
+ */
+export interface ProductImageProps extends Omit<ImageProps, 'backgroundColor' | 'placeholder'> {
+    /**
+     * The surface this image is rendered on. Determines the resolutions and aspect ratio, which are
+     * configured app wide. Ignored when an explicit `resolutions` prop is passed.
+     */
+    context?: ProductImageContext | null;
+    /**
+     * Drops the background behind the image.
+     */
+    noBackground?: boolean;
+    /**
+     * Image to show instead of the placeholder icon. The shop wide setting wins over this.
+     */
+    placeholderSrc?: string | null;
+    /**
+     * @deprecated Pass a `context` instead, so the image follows the configured aspect ratio.
+     */
+    ratio?: number[] | null;
+    /**
+     * @deprecated Pass a `context` instead, so the image follows the configured aspect ratio.
+     * Still honored, and still takes precedence over `context`.
+     */
+    resolutions?: ImageResolution[];
+}
+/**
+ * The product image component.
+ *
+ * Behaves like the core Image component, with a product placeholder for a missing or failed image.
+ * @param props The component props.
+ * @returns The rendered component.
+ */
+declare const ProductImage: (props: ProductImageProps) => import("react").JSX.Element;
+export { ProductImage as UnwrappedProductImage };
+declare const _default: import("react").MemoExoticComponent<(props: ProductImageProps) => import("react").JSX.Element>;
+export default _default;
+//# sourceMappingURL=ProductImage.d.ts.map

package/product/components/ProductImage/ProductImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductImage.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductImage/ProductImage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAMxE,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACpB,MAAM,6CAA6C,CAAC;AA0BrD;;;GAGG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,UAAU,EAAE,iBAAiB,GAAG,aAAa,CAAC;IAC5F;;;OAGG;IACH,OAAO,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;CACjC;AAuCD;;;;;;GAMG;AACH,QAAA,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCA4E7C,CAAC;AAEF,OAAO,EAAE,YAAY,IAAI,qBAAqB,EAAE,CAAC;oEAOX,iBAAiB;AAOvD,wBAA2C"}

package/product/components/ProductImage/ProductImage.js

@@ -0,0 +1,158 @@
+import { useLayoutEffect, useMemo, memo } from 'react';
+import { useSelector } from 'react-redux';
+import { logger } from '@shopgate/pwa-core';
+import Image from '@shopgate/pwa-common/components/Image';
+import PlaceholderIcon from '@shopgate/pwa-ui-shared/icons/PlaceholderIcon';
+import SurroundPortals from '@shopgate/pwa-common/components/SurroundPortals';
+import { makeStyles, useTheme } from '@shopgate/engage/styles';
+import { useProductImageSettings } from '@shopgate/engage/settings/hooks';
+import { getProductImagePlaceholder } from '@shopgate/engage/settings/selectors/shopSettings';
+import { PORTAL_PRODUCT_IMAGE } from "../../../components/constants";
+import ProductImagePlaceholder from "./ProductImagePlaceholder";
+import { useProductImageShadow } from "./hooks";
+import { jsx as _jsx } from "react/jsx-runtime";
+const placeholderIconScale = 0.65;
+
+/**
+ * The context applied when a caller passes neither a context nor explicit resolutions.
+ */
+const DEFAULT_PRODUCT_IMAGE_CONTEXT = 'list';
+
+/**
+ * The resolutions and aspect ratio the image is rendered with.
+ */
+
+/**
+ * Everything the underlying Image accepts is forwarded, minus the two this component owns:
+ * `backgroundColor`, derived from `noBackground`, and `placeholder`.
+ */
+
+const useStyles = makeStyles()(theme => ({
+  rounded: {
+    borderRadius: theme.components.productImage.borderRadius,
+    overflow: 'hidden'
+  },
+  placeholderContent: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    top: 0,
+    textAlign: 'center'
+  },
+  placeholder: {
+    position: 'absolute',
+    width: `${placeholderIconScale * 100}% !important`,
+    height: `${placeholderIconScale * 100}% !important`,
+    top: `${(1.0 - placeholderIconScale) * 50}%`,
+    left: `${(1.0 - placeholderIconScale) * 50}%`,
+    color: theme.palette.background.emphasized
+  },
+  innerShadow: {
+    position: 'relative',
+    overflow: 'hidden',
+    ':after': {
+      display: 'block',
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      boxShadow: 'inset 0 0 20px rgba(0, 0, 0, .05)',
+      pointerEvents: 'none'
+    }
+  }
+}));
+
+/**
+ * The product image component.
+ *
+ * Behaves like the core Image component, with a product placeholder for a missing or failed image.
+ * @param props The component props.
+ * @returns The rendered component.
+ */
+const ProductImage = props => {
+  const {
+    alt = null,
+    className = null,
+    context = null,
+    noBackground = false,
+    placeholderSrc = null,
+    ratio = null,
+    resolutions = null,
+    src = null
+  } = props;
+  const productImageSettings = useProductImageSettings();
+
+  // An explicit resolutions prop wins over the context, which is only consulted without one.
+  const resolved = useMemo(() => {
+    if (resolutions) {
+      return {
+        resolutions,
+        ratio
+      };
+    }
+    return productImageSettings[context || DEFAULT_PRODUCT_IMAGE_CONTEXT] ?? productImageSettings[DEFAULT_PRODUCT_IMAGE_CONTEXT];
+  }, [context, productImageSettings, ratio, resolutions]);
+  useLayoutEffect(() => {
+    logger.assert(!(resolutions && context), 'ProductImage received both "resolutions" and "context". The explicit resolutions win - drop one of them.');
+    /* eslint-disable-next-line react-hooks/exhaustive-deps -- legacy: assert once at mount */
+  }, []);
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const theme = useTheme();
+  const showInnerShadow = useProductImageShadow();
+  const isRounded = (context || DEFAULT_PRODUCT_IMAGE_CONTEXT) === 'list';
+
+  // Image decides when to show this.
+  const placeholder = placeholderSrc ? /*#__PURE__*/_jsx(ProductImagePlaceholder, {
+    src: placeholderSrc,
+    showInnerShadow: showInnerShadow,
+    noBackground: noBackground
+  }) : /*#__PURE__*/_jsx("div", {
+    "aria-hidden": true,
+    className: classes.placeholderContent,
+    "data-test-id": "placeHolder",
+    children: /*#__PURE__*/_jsx(PlaceholderIcon, {
+      className: classes.placeholder
+    })
+  });
+  return /*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: PORTAL_PRODUCT_IMAGE,
+    portalProps: src ? {
+      src,
+      resolutions: resolved.resolutions,
+      ratio: resolved.ratio
+    } : undefined,
+    children: /*#__PURE__*/_jsx("div", {
+      className: cx(isRounded && classes.rounded, className, 'engage__product__product-image'),
+      children: /*#__PURE__*/_jsx(Image, {
+        ...props,
+        resolutions: resolved.resolutions,
+        ratio: resolved.ratio,
+        placeholder: placeholder,
+        className: showInnerShadow ? classes.innerShadow : '',
+        backgroundColor: noBackground ? 'transparent' : theme.palette.common.white,
+        "aria-hidden": !alt
+      })
+    })
+  });
+};
+export { ProductImage as UnwrappedProductImage };
+
+/**
+ * Supplies the shop wide placeholder image.
+ * @param props The component props.
+ * @returns The rendered component.
+ */
+const ConnectedProductImage = props => {
+  // The shop wide placeholder takes precedence over a passed one.
+  const placeholderSrc = useSelector(getProductImagePlaceholder) ?? props.placeholderSrc ?? null;
+  return /*#__PURE__*/_jsx(ProductImage, {
+    ...props,
+    placeholderSrc: placeholderSrc
+  });
+};
+export default /*#__PURE__*/memo(ConnectedProductImage);

package/product/components/ProductImage/ProductImagePlaceholder.d.ts

@@ -0,0 +1,23 @@
+export interface ProductImagePlaceholderProps {
+    /**
+     * Drops the background behind the placeholder.
+     */
+    noBackground?: boolean;
+    /**
+     * Whether the placeholder gets an inset shadow, matching the image it stands in for.
+     */
+    showInnerShadow?: boolean;
+    /**
+     * The merchant configured placeholder image. While it loads, and when it is absent, the
+     * built-in icon is shown instead.
+     */
+    src?: string | null;
+}
+/**
+ * The ProductImagePlaceholder component.
+ * @param props The components props.
+ * @returns The rendered component.
+ */
+declare const ProductImagePlaceholder: (props: ProductImagePlaceholderProps) => import("react").JSX.Element;
+export default ProductImagePlaceholder;
+//# sourceMappingURL=ProductImagePlaceholder.d.ts.map

package/product/components/ProductImage/ProductImagePlaceholder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductImagePlaceholder.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductImage/ProductImagePlaceholder.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,4BAA4B;IAC3C;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACrB;AAqCD;;;;GAIG;AACH,QAAA,MAAM,uBAAuB,GAAI,OAAO,4BAA4B,gCAwCnE,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/product/components/ProductImage/ProductImagePlaceholder.js

@@ -1,15 +1,10 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import PropTypes from 'prop-types';
+import { useEffect, useMemo, useState } from 'react';
 import PlaceholderIcon from '@shopgate/pwa-ui-shared/icons/PlaceholderIcon';
-import { themeConfig, themeShadows, themeColors } from '@shopgate/pwa-common/helpers/config';
-import { makeStyles } from '@shopgate/engage/styles';
+import { makeStyles, useTheme } from '@shopgate/engage/styles';
 import { useLoadImage } from '@shopgate/engage/core';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const placeholderIconScale = 0.65;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   placeholderContent: {
     position: 'absolute',
     width: '100%',
@@ -23,7 +18,7 @@ const useStyles = makeStyles()({
     height: `${placeholderIconScale * 100}% !important`,
     top: `${(1.0 - placeholderIconScale) * 50}%`,
     left: `${(1.0 - placeholderIconScale) * 50}%`,
-    color: themeColors.placeholder
+    color: theme.palette.background.emphasized
   },
   innerShadow: {
     position: 'relative',
@@ -36,26 +31,28 @@ const useStyles = makeStyles()({
       right: 0,
       bottom: 0,
       left: 0,
-      boxShadow: themeShadows.productImage,
+      boxShadow: 'inset 0 0 20px rgba(0, 0, 0, .05)',
       pointerEvents: 'none'
     }
   }
-});
+}));
 
 /**
  * The ProductImagePlaceholder component.
- * @param {Object} props The components props.
- * @returns {JSX}
+ * @param props The components props.
+ * @returns The rendered component.
  */
-const ProductImagePlaceholder = ({
-  src,
-  showInnerShadow,
-  noBackground
-}) => {
+const ProductImagePlaceholder = props => {
+  const {
+    src = null,
+    showInnerShadow = false,
+    noBackground = false
+  } = props;
   const {
     classes,
     cx
   } = useStyles();
+  const theme = useTheme();
   const [showPlaceholder, setShowPlaceholder] = useState(true);
   const srcLoaded = useLoadImage(src);
   useEffect(() => {
@@ -68,14 +65,14 @@ const ProductImagePlaceholder = ({
         backgroundSize: 'contain',
         backgroundRepeat: 'no-repeat',
         backgroundPosition: 'center',
-        backgroundColor: noBackground ? 'transparent' : colors.light,
+        backgroundColor: noBackground ? 'transparent' : theme.palette.common.white,
         position: 'absolute'
       };
     }
     return {
-      backgroundColor: noBackground ? 'transparent' : colors.light
+      backgroundColor: noBackground ? 'transparent' : theme.palette.common.white
     };
-  }, [src, noBackground, srcLoaded]);
+  }, [srcLoaded, noBackground, theme.palette.common.white, src]);
   const contentClasses = cx(classes.placeholderContent, {
     [classes.innerShadow]: showInnerShadow
   });
@@ -88,9 +85,4 @@ const ProductImagePlaceholder = ({
     }), !showPlaceholder && ' ']
   });
 };
-ProductImagePlaceholder.defaultProps = {
-  src: null,
-  noBackground: false,
-  showInnerShadow: false
-};
 export default ProductImagePlaceholder;

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

@@ -0,0 +1,7 @@
+/**
+ * The widget id the legacy inner shadow setting is configured under.
+ *
+ * Extracted so the resolution hook can read it without importing the component.
+ */
+export declare const WIDGET_ID = "@shopgate/engage/product/ProductImage";
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductImage/constants.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,SAAS,0CAA0C,CAAC"}

package/product/components/ProductImage/constants.js

@@ -0,0 +1,6 @@
+/**
+ * The widget id the legacy inner shadow setting is configured under.
+ *
+ * Extracted so the resolution hook can read it without importing the component.
+ */
+export const WIDGET_ID = '@shopgate/engage/product/ProductImage';

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

@@ -0,0 +1,8 @@
+/**
+ * Resolves whether product images render with an inset shadow.
+ * @param widgetId The widget id the legacy setting is configured under, for the product image
+ * components that have their own.
+ * @returns Whether to render the shadow.
+ */
+export declare const useProductImageShadow: (widgetId?: string) => boolean;
+//# sourceMappingURL=hooks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductImage/hooks.ts"],"names":[],"mappings":"AAYA;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,WAAU,MAAkB,KAAG,OAiBpE,CAAC"}

package/product/components/ProductImage/hooks.js

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+// Imported via its module path rather than the "core/hooks" barrel, to keep this out of the
+// import cycle the barrel pulls in.
+import { useWidgetSettings } from '@shopgate/engage/core/hooks/useWidgetSettings';
+import { getAreAppSettingsHydrated, getImageSettings } from '@shopgate/engage/settings/selectors/appSettings';
+import { DEFAULT_SHOW_INNER_SHADOW } from '@shopgate/engage/settings/constants/imageSettings';
+import { WIDGET_ID } from "./constants";
+
+/**
+ * Resolves whether product images render with an inset shadow.
+ * @param widgetId The widget id the legacy setting is configured under, for the product image
+ * components that have their own.
+ * @returns Whether to render the shadow.
+ */
+export const useProductImageShadow = (widgetId = WIDGET_ID) => {
+  const areAppSettingsHydrated = useSelector(getAreAppSettingsHydrated);
+  const configured = useSelector(getImageSettings)?.product?.showInnerShadow;
+  const {
+    showInnerShadow: legacy
+  } = useWidgetSettings(widgetId) || {};
+  return useMemo(() => {
+    if (areAppSettingsHydrated) {
+      return configured ?? DEFAULT_SHOW_INNER_SHADOW;
+    }
+
+    // Until a source hydrates the app settings the legacy widget configuration wins, and failing
+    // that the built-in default, which is derived from the legacy app config flag so that each
+    // theme keeps its own behavior.
+    return legacy ?? DEFAULT_SHOW_INNER_SHADOW;
+  }, [areAppSettingsHydrated, configured, legacy]);
+};

package/product/components/ProductImage/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './ProductImage';
+export type { ProductImageProps } from './ProductImage';
+//# sourceMappingURL=index.d.ts.map

package/product/components/ProductImage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductImage/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/product/components/ProductImage/index.js

@@ -1,203 +1 @@
-import React, { useState, useEffect, useLayoutEffect, useCallback, memo } from 'react';
-import PropTypes from 'prop-types';
-import { logger } from '@shopgate/pwa-core';
-import appConfig, { themeConfig, themeShadows, themeColors } from '@shopgate/pwa-common/helpers/config';
-import Image from '@shopgate/pwa-common/components/Image';
-import PlaceholderIcon from '@shopgate/pwa-ui-shared/icons/PlaceholderIcon';
-import SurroundPortals from '@shopgate/pwa-common/components/SurroundPortals';
-import { makeStyles } from '@shopgate/engage/styles';
-import { withWidgetSettings } from "../../../core/hocs/withWidgetSettings";
-import { PORTAL_PRODUCT_IMAGE } from "../../../components/constants";
-import ProductImagePlaceholder from "./ProductImagePlaceholder";
-import connect from "./connector";
-import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
-const placeholderIconScale = 0.65;
-
-/**
- * Derives the image aspect ratio from explicit ratio props or the largest resolution.
- * @param {Object} props The component props.
- * @param {number[]} [props.ratio] Optional width/height ratio tuple.
- * @param {Array<{ width: number, height: number }>} props.resolutions Available image resolutions.
- * @returns {string} The computed ratio as a fixed decimal string.
- */
-const getImageRatio = ({
-  ratio,
-  resolutions
-} = {}) => {
-  if (Array.isArray(ratio) && ratio.length === 2 && ratio[0]) {
-    const [x, y] = ratio;
-    return (y / x).toFixed(3);
-  }
-  if (Array.isArray(resolutions) && resolutions.length > 0) {
-    const {
-      width,
-      height
-    } = resolutions[resolutions.length - 1];
-    if (width && height) {
-      return (height / width).toFixed(3);
-    }
-  }
-  return '1.000';
-};
-const useStyles = makeStyles()((theme, {
-  ratio
-}) => ({
-  placeholderContainer: {
-    position: 'relative',
-    width: '100%',
-    ':before': {
-      display: 'block',
-      content: '""',
-      width: '100%',
-      paddingTop: `${100 * ratio}%`
-    }
-  },
-  placeholderContent: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    top: 0,
-    textAlign: 'center'
-  },
-  placeholder: {
-    position: 'absolute',
-    width: `${placeholderIconScale * 100}% !important`,
-    height: `${placeholderIconScale * 100}% !important`,
-    top: `${(1.0 - placeholderIconScale) * 50}%`,
-    left: `${(1.0 - placeholderIconScale) * 50}%`,
-    color: themeColors.placeholder
-  },
-  innerShadow: {
-    position: 'relative',
-    overflow: 'hidden',
-    ':after': {
-      display: 'block',
-      content: '""',
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      boxShadow: themeShadows.productImage,
-      pointerEvents: 'none'
-    }
-  }
-}));
-
-/**
- * The product image component.
- * This component will behave like the core Image component with the additional
- * feature of showing a placeholder in case no src property has been passed
- * or the given source image cannot be loaded.
- * @param {Object} props Props.
- * @returns {JSX.Element}
- */
-const ProductImage = props => {
-  const {
-    alt,
-    className,
-    noBackground,
-    placeholderSrc,
-    ratio,
-    resolutions,
-    src,
-    srcmap,
-    widgetSettings
-  } = props;
-  const ratioValue = Number.parseFloat(getImageRatio({
-    ratio,
-    resolutions
-  })) || 1;
-  const {
-    classes,
-    cx
-  } = useStyles({
-    ratio: ratioValue
-  });
-  const [showPlaceholder, setShowPlaceholder] = useState(!src && (srcmap === null || srcmap.length === 0));
-  const [imageLoadingFailed, setImageLoadingFailed] = useState(false);
-  useLayoutEffect(() => {
-    logger.assert(!srcmap, 'Use of srcmap prop is deprecated. Use resolutions instead');
-    /* eslint-disable-next-line react-hooks/exhaustive-deps -- legacy: assert once at mount */
-  }, []);
-  useEffect(() => {
-    const nextShowPlaceholder = !src && (!srcmap || srcmap.length === 0);
-    setShowPlaceholder(nextShowPlaceholder);
-  }, [src, srcmap]);
-  const imageLoadingFailedHandler = useCallback(() => {
-    setShowPlaceholder(true);
-    setImageLoadingFailed(true);
-  }, []);
-  let {
-    showInnerShadow
-  } = widgetSettings;
-  if (typeof showInnerShadow === 'undefined') {
-    showInnerShadow = !appConfig.hideProductImageShadow;
-  }
-  if (imageLoadingFailed || showPlaceholder) {
-    return /*#__PURE__*/_jsx(SurroundPortals, {
-      portalName: PORTAL_PRODUCT_IMAGE,
-      children: /*#__PURE__*/_jsx("div", {
-        className: cx(classes.placeholderContainer, {
-          [classes.innerShadow]: showInnerShadow,
-          [className]: !!className
-        }),
-        children: placeholderSrc ? /*#__PURE__*/_jsx(ProductImagePlaceholder, {
-          src: placeholderSrc,
-          showInnerShadow: showInnerShadow,
-          noBackground: noBackground
-        }) : /*#__PURE__*/_jsx("div", {
-          "aria-hidden": true,
-          className: classes.placeholderContent,
-          "data-test-id": "placeHolder",
-          children: /*#__PURE__*/_jsx(PlaceholderIcon, {
-            className: classes.placeholder
-          })
-        })
-      })
-    });
-  }
-  return /*#__PURE__*/_jsx(SurroundPortals, {
-    portalName: PORTAL_PRODUCT_IMAGE,
-    portalProps: {
-      src,
-      resolutions
-    },
-    children: /*#__PURE__*/_jsx("div", {
-      className: cx(className, 'engage__product__product-image'),
-      children: /*#__PURE__*/_jsx(Image, {
-        ...props,
-        className: showInnerShadow ? classes.innerShadow : '',
-        backgroundColor: noBackground ? 'transparent' : colors.light,
-        onError: imageLoadingFailedHandler,
-        "aria-hidden": !alt
-      })
-    })
-  });
-};
-ProductImage.defaultProps = {
-  alt: null,
-  animating: true,
-  className: null,
-  forcePlaceholder: false,
-  highestResolutionLoaded: () => {},
-  noBackground: false,
-  ratio: null,
-  resolutions: [{
-    width: 50,
-    height: 50,
-    blur: 2
-  }, {
-    width: 440,
-    height: 440
-  }],
-  src: null,
-  srcmap: null,
-  placeholderSrc: null,
-  widgetSettings: {}
-};
-export { ProductImage as UnwrappedProductImage };
-export default connect(withWidgetSettings(/*#__PURE__*/memo(ProductImage), '@shopgate/engage/product/ProductImage'));
+export { default } from "./ProductImage";

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,15 +12,12 @@ 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 { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import ProductImage from "../../../ProductImage";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   listItemContainer: {
     padding: theme.spacing(1),
-    background: colors.light
+    background: theme.palette.background.surface
   },
   imageContainer: {
     padding: theme.spacing(1),
@@ -43,19 +40,19 @@ const useStyles = makeStyles()(theme => ({
     width: 40
   },
   availability: {
-    fontSize: '0.75rem'
+    fontSize: theme.typography.caption.fontSize
   },
   manufacturer: {
-    fontSize: '0.875rem'
+    fontSize: theme.typography.body2.fontSize
   },
   price: {
     justifyContent: 'flex-end'
   },
   priceStriked: {
-    fontSize: '0.875rem'
+    fontSize: theme.typography.body2.fontSize
   },
   priceInfo: {
-    fontSize: '0.75rem'
+    fontSize: theme.typography.caption.fontSize
   },
   discount: {
     minWidth: 40
@@ -96,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,