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

package/page/hooks/index.d.ts

@@ -1,60 +1,61 @@
-import type { WidgetContextType } from '../components/Widgets/WidgetContext';
-
+import { type WidgetContextType } from '@shopgate/engage/page/components/Widgets';
 /**
  * The useWidget hook provides access to the context that is wrapped around a widget.
  * @returns The widget context.
  */
-export declare function useWidget<C = Record<string, any>>(): WidgetContextType<C>
-
-
-export type UseWidgetProductsOptions = {
-  /**
-   * The search value to use for the product search
-   */
-  value: string;
-  /**
-   * The type of product search to perform.
-   */
-  type: 'searchTerm' | 'productIds' | 'brand' | 'category' | 'highlights';
-  /**
-   * The number of products to return per page.
-   * @default 32
-   */
-  limit?: number;
-  /**
-   * Sort order for the products
-   * @default 'relevance'
-   */
-  sort?: 'relevance' | 'priceAsc' | 'priceDesc' | 'nameAsc' | 'nameDesc';
-};
-
-export type UseWidgetProductsResult = {
-  /**
-   * Function to fetch the next page of products.
-   */
-  fetchNext: () => void;
-  /**
-   * Whether there are more products to fetch.
-   */
-  hasNext: boolean;
-  /**
-   * Whether the products are currently being fetched.
-   */
-  isFetching: boolean;
-  /**
-   * Number of products available in the current result set.
-   */
-  totalResultCount: number;
-  /**
-   * Array of product results.
-   */
-  results: Object[];
+export declare const useWidget: <C = Record<string, unknown>>() => WidgetContextType<C>;
+/**
+ * Options for the {@link useWidgetProducts} hook.
+ */
+export interface UseWidgetProductsOptions {
+    /**
+     * The search value to use for the product search.
+     */
+    value: string;
+    /**
+     * The type of product search to perform.
+     */
+    type: 'searchTerm' | 'productIds' | 'brand' | 'category' | 'highlights';
+    /**
+     * The number of products to return per page.
+     * @default 32
+     */
+    limit?: number;
+    /**
+     * Sort order for the products.
+     * @default 'relevance'
+     */
+    sort?: 'relevance' | 'priceAsc' | 'priceDesc' | 'nameAsc' | 'nameDesc';
+}
+/**
+ * Result of the {@link useWidgetProducts} hook.
+ */
+export interface UseWidgetProductsResult {
+    /**
+     * Function to fetch the next page of products.
+     */
+    fetchNext: () => void;
+    /**
+     * Whether there are more products to fetch.
+     */
+    hasNext: boolean;
+    /**
+     * Whether the products are currently being fetched.
+     */
+    isFetching: boolean;
+    /**
+     * Number of products available in the current result set.
+     */
+    totalResultCount: number;
+    /**
+     * Array of product results.
+     */
+    results: unknown[];
 }
-
 /**
- * The useWidgetProducts hook provides an easy way to retrieve products based on a search term or
- * other criteria.
+ * Retrieves the products for the current widget.
+ * @param options Hook options.
+ * @returns The products and a function to fetch more products.
  */
-export declare function useWidgetProducts(
-  options: UseWidgetProductsOptions
-): UseWidgetProductsResult;
+export declare const useWidgetProducts: (options?: UseWidgetProductsOptions) => UseWidgetProductsResult;
+//# sourceMappingURL=index.d.ts.map

package/page/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../page/hooks/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAMjG;;;GAGG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,OAAK,iBAAiB,CAAC,CAAC,CAC1B,CAAC;AA2CpD;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,YAAY,GAAG,YAAY,GAAG,OAAO,GAAG,UAAU,GAAG,YAAY,CAAC;IACxE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;CACxE;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,EAAE,OAAO,EAAE,CAAC;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAC5B,UAAS,wBAAyD,KACjE,uBAyIF,CAAC"}

package/page/hooks/index.js

@@ -6,21 +6,9 @@ import { transformDisplayOptions } from '@shopgate/engage/core/helpers';
 import { fetchProductsByQuery } from '@shopgate/engage/product';
 import { makeGetWidgetProducts } from "../selectors";
 
-/**
- * @typedef {import('../components/Widgets/WidgetContext').WidgetContextType WidgetContextType}
- */
-
-/**
- * @typedef {import('./index').UseWidgetProductsOptions} UseWidgetProductsOptions
- */
-
-/**
- * @typedef {import('./index').UseWidgetProductsResult} UseWidgetProductsResult
- */
-
 /**
  * The useWidget hook provides access to the context that is wrapped around a widget.
- * @returns {WidgetContextType} The widget context.
+ * @returns The widget context.
  */
 export const useWidget = () => useContext(WidgetContext);
 const REQUEST_TYPE_MAPPING = {
@@ -31,10 +19,27 @@ const REQUEST_TYPE_MAPPING = {
   category: 5
 };
 
+/**
+ * Shape of the memoized widget products selector result. The underlying selector and its
+ * dependencies live in untyped JS, so the shape is described here at the consumption boundary.
+ */
+
+/**
+ * Shape of the result returned by the (untyped) `fetchProductsByQuery` thunk.
+ */
+
+/**
+ * Options for the {@link useWidgetProducts} hook.
+ */
+
+/**
+ * Result of the {@link useWidgetProducts} hook.
+ */
+
 /**
  * Retrieves the products for the current widget.
- * @param {UseWidgetProductsOptions} options Hook options
- * @returns {UseWidgetProductsResult} The products and a function to fetch more products.
+ * @param options Hook options.
+ * @returns The products and a function to fetch more products.
  */
 export const useWidgetProducts = (options = {}) => {
   const {

package/page/selectors/index.d.ts

@@ -0,0 +1,32 @@
+export * from "@shopgate/pwa-common/selectors/page";
+export function makeGetPrivacyPolicyLink(): string | null;
+export function makeGetPage({ type, slug, }: {
+    type?: PageType | undefined;
+    slug?: string | null | undefined;
+}): Function;
+export function makeGetWidgetsFromPage({ type, slug, dropzone, }: {
+    type?: PageType | undefined;
+    dropzone?: "cmsWidgetList" | undefined;
+    slug?: string | null | undefined;
+}): Function;
+/**
+ * Determines whether the new CMS version 2 is enabled.
+ */
+export const getIsCms2Enabled: ((state: any, ...params: any) => boolean) & import("reselect").OutputSelectorFields<(args_0: boolean, args_1: boolean) => boolean, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+export function makeGetUnifiedCMSPageData({ slug }: {
+    slug: string;
+}): Function;
+export function makeGetWidgetProducts(type: "searchTerm" | "productIds" | "brand" | "category" | "highlights", options: Object, id: string): Function;
+/**
+ * List of available page types.
+ */
+export type PageType = "cms" | "category";
+/**
+ * List of available dropzone types.
+ */
+export type DropzoneType = "cmsWidgetList";
+//# sourceMappingURL=index.d.ts.map

package/page/selectors/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../page/selectors/index.js"],"names":[],"mappings":";AAmCO,4CAFM,MAAM,GAAC,IAAI,CAuBvB;AAyBM,6CAJJ;IAA0B,IAAI;IACD,IAAI;CACjC,YAcF;AAYM,kEANJ;IAA0B,IAAI;IACA,QAAQ;IAET,IAAI;CACjC,YAqBF;AAED;;GAEG;AACH;;;;EAIE;AASK,oDAHJ;IAAuB,IAAI,EAAnB,MAAM;CACd,YAwCF;AA2FM,4CANI,YAAY,GAAG,YAAY,GAAG,OAAO,GAAG,UAAU,GAAE,YAAY,WAEhE,MAAM,MACN,MAAM,YAkBhB;;;;uBA5NY,KAAK,GAAG,UAAU;;;;2BAKlB,eAAe"}

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/page/widgets/Video/Video.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The VideoWidget is used to display a video.
+ */
+declare const Video: () => import("react").JSX.Element;
+export default Video;
+//# sourceMappingURL=Video.d.ts.map

package/page/widgets/Video/Video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Video.d.ts","sourceRoot":"","sources":["../../../../page/widgets/Video/Video.tsx"],"names":[],"mappings":"AAGA;;GAEG;AACH,QAAA,MAAM,KAAK,mCAgBV,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/page/widgets/Video/Video.js

@@ -1,10 +1,8 @@
-import React from 'react';
 import { useVideoWidget } from "./hooks";
 import WidgetVideo from "../../components/WidgetVideo";
 
 /**
  * The VideoWidget is used to display a video.
- * @returns {JSX.Element}
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 const Video = () => {

package/page/widgets/Video/hooks.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Configuration of the Video widget.
+ */
+export interface VideoWidgetConfig {
+    /**
+     * The video URL.
+     */
+    url: string;
+    /**
+     * Whether the video should be muted.
+     */
+    muted?: boolean;
+    /**
+     * Whether the video should loop.
+     */
+    loop?: boolean;
+    /**
+     * Whether the video should display controls.
+     */
+    controls?: boolean;
+    /**
+     * Whether the video should autoplay.
+     */
+    autoplay?: boolean;
+    /**
+     * The border radius option.
+     */
+    borderRadius: 'default' | 'none' | 'rounded' | 'custom';
+    /**
+     * The custom border radius value.
+     */
+    borderRadiusCustom?: number;
+    /**
+     * The link URL.
+     */
+    link?: string;
+}
+/**
+ * Resolved data returned by {@link useVideoWidget}. Reuses the field docs from
+ * {@link VideoWidgetConfig} for the pass-through fields via `Pick`.
+ */
+export interface UseVideoWidgetResult extends Pick<VideoWidgetConfig, 'url' | 'muted' | 'loop' | 'controls' | 'autoplay' | 'link'> {
+    /**
+     * The resolved border radius value in pixels.
+     */
+    borderRadius: number;
+}
+/**
+ * Hook to access the Video widget configuration and data.
+ * @returns The resolved Video widget data.
+ */
+export declare const useVideoWidget: () => UseVideoWidgetResult;
+//# sourceMappingURL=hooks.d.ts.map

package/page/widgets/Video/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../page/widgets/Video/hooks.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;IACxD;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,iBAAiB,EACjB,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAC5D;IACC;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,QAAO,oBAoBjC,CAAC"}

package/page/widgets/Video/hooks.js

@@ -2,27 +2,19 @@ import { useWidget } from '@shopgate/engage/page/hooks';
 import { resolveBorderRadiusFromWidgetConfig } from "../../helpers";
 
 /**
- * @typedef {Object} VideoWidgetConfig
- * @property {string} url The video URL.
- * @property {boolean} [muted] Whether the video should be muted.
- * @property {boolean} [loop] Whether the video should loop.
- * @property {boolean} [controls] Whether the video should display controls.
- * @property {boolean} [autoplay] Whether the video should autoplay.
- * @property {number} [borderRadius] The border radius preset.
- * @property {string} [link] The link URL.
+ * Configuration of the Video widget.
  */
 
 /**
- * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
- *   .useWidget<VideoWidgetConfig> >} UseWidgetReturnType
+ * Resolved data returned by {@link useVideoWidget}. Reuses the field docs from
+ * {@link VideoWidgetConfig} for the pass-through fields via `Pick`.
  */
 
-// eslint-disable-next-line valid-jsdoc
 /**
  * Hook to access the Video widget configuration and data.
+ * @returns The resolved Video widget data.
  */
 export const useVideoWidget = () => {
-  /** @type {UseWidgetReturnType}  */
   const {
     config
   } = useWidget();

package/page/widgets/Video/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Video';
+//# sourceMappingURL=index.d.ts.map

package/page/widgets/Video/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../page/widgets/Video/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

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, {

package/product/components/ProductGrid/components/Item/components/ItemImage/index.js

@@ -2,12 +2,9 @@ import React, { useMemo, memo } from 'react';
 import PropTypes from 'prop-types';
 import { SurroundPortals } from '@shopgate/engage/components';
 import { PRODUCT_ITEM_IMAGE } from '@shopgate/engage/category/constants';
-import { getProductImageSettings, ProductImage } from '@shopgate/engage/product';
+import { ProductImage } from '@shopgate/engage/product';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  ListImage: gridResolutions
-} = getProductImageSettings();
 const useStyles = makeStyles()(theme => ({
   image: {
     background: theme.palette.background.surface
@@ -37,7 +34,7 @@ const ItemImage = ({
       className: classes.image,
       alt: name,
       src: imageUrl,
-      resolutions: gridResolutions,
+      context: "list",
       itemProp: "image"
     })
   });

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductGrid/constants.js"],"names":[],"mappings":"AAAA,wBAAyB,sCAAsC,CAAC"}

package/product/components/ProductGrid/constants.js

@@ -0,0 +1 @@
+export const WIDGET_ID = '@shopgate/engage/product/ProductGrid';

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

@@ -0,0 +1,11 @@
+/**
+ * Resolves the number of product columns for the ProductGrid, keyed by the
+ * active breakpoint.
+ *
+ * Precedence:
+ * - Once the app settings are hydrated from a source (admin sync / jsonp), they
+ *   are authoritative everywhere.
+ * @returns The resolved number of columns for the active breakpoint.
+ */
+export declare const useProductGridColumns: () => number;
+//# sourceMappingURL=hooks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductGrid/hooks.ts"],"names":[],"mappings":"AAiBA;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,QAAO,MAmCxC,CAAC"}