@shopgate/engage 7.31.6 → 7.32.0-beta.10

package/product/components/Options/components/TextOption/index.js

@@ -4,33 +4,29 @@ import Transition from 'react-transition-group/Transition';
 import debounce from 'lodash/debounce';
 import { TextField, InfoIcon } from '@shopgate/engage/components';
 import { withShowModal } from '@shopgate/engage/core/hocs';
-import { makeStyles } from '@shopgate/engage/styles';
+import { makeStyles, useTheme } from '@shopgate/engage/styles';
 import { broadcastLiveMessage } from '@shopgate/engage/a11y';
 import { ProductContext } from '@shopgate/engage/product/contexts';
 import transition from '@shopgate/engage/product/components/Characteristics/transition';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import OptionInformation from "./components/OptionInfo";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   row: {
     marginBottom: theme.spacing(1)
   },
   wrapper: {
-    backgroundColor: 'var(--color-background-accent)',
+    backgroundColor: theme.palette.background.emphasized,
     padding: theme.spacing(1, 2),
     minHeight: 56
   },
   element: {
     paddingBottom: 0,
     '& label': {
-      fontWeight: 400,
-      color: 'var(--color-text-high-emphasis, inherit)'
+      fontWeight: theme.typography.fontWeightRegular,
+      color: `${theme.palette.text.primary}, inherit`
     },
     '& input': {
-      fontWeight: 500,
+      fontWeight: theme.typography.fontWeightMedium,
       color: theme.palette.text.primary
     },
     '& .placeholder': {
@@ -38,7 +34,7 @@ const useStyles = makeStyles()(theme => ({
     }
   },
   infoIcon: {
-    color: colors.shade9
+    color: theme.palette.grey.medium
   }
 }));
 
@@ -58,6 +54,7 @@ const TextOption = ({
   info,
   value
 }) => {
+  const theme = useTheme();
   const {
     classes
   } = useStyles();
@@ -128,7 +125,7 @@ const TextOption = ({
       children: state => /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx("div", {
           className: classes.wrapper,
-          style: transition[state],
+          style: transition(theme)[state],
           children: /*#__PURE__*/_jsx(TextField, {
             setRef: setRef,
             name: `text_${id}`,

package/product/components/OrderQuantityHint/index.js

@@ -1,18 +1,17 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { I18n, SurroundPortals } from '@shopgate/engage/components';
+import { I18n, SurroundPortals, Typography } from '@shopgate/engage/components';
 import { i18n, hasNewServices, isBeta } from '@shopgate/engage/core/helpers';
 import { useWidgetSettings } from '@shopgate/engage/core/hooks';
 import { PRODUCT_ORDER_QUANTITY } from '@shopgate/engage/product';
-import { makeStyles } from '@shopgate/engage/styles';
 import { formatFloat } from '@shopgate/engage/components/QuantityInput/helper';
+import { makeStyles } from '@shopgate/engage/styles';
 import withProductStock from "../../hocs/withProductStock";
 import withProduct from "../../hocs/withProduct";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   hint: {
-    fontSize: '0.75rem',
-    color: 'var(--color-text-medium-emphasis)'
+    lineHeight: 1.3
   }
 });
 
@@ -56,8 +55,13 @@ const OrderQuantityHint = ({
       portalProps: {
         stock
       },
-      children: [showContent && stock && !!stock.minOrderQuantity && /*#__PURE__*/_jsx("div", {
-        className: classes.hint,
+      children: [showContent && stock && !!stock.minOrderQuantity && /*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        component: "div",
+        color: "textSecondary",
+        classes: {
+          caption: classes.hint
+        },
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "product.minOrderQuantity",
           params: {
@@ -65,8 +69,13 @@ const OrderQuantityHint = ({
             unit
           }
         })
-      }), showContent && stock && !!stock.maxOrderQuantity && /*#__PURE__*/_jsx("div", {
-        className: classes.hint,
+      }), showContent && stock && !!stock.maxOrderQuantity && /*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        component: "div",
+        color: "textSecondary",
+        classes: {
+          caption: classes.hint
+        },
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "product.maxOrderQuantity",
           params: {

package/product/components/PriceDifference/index.js

@@ -1,23 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import Price from '@shopgate/pwa-ui-shared/Price';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   positive: {
-    color: colors.shade4,
+    color: theme.palette.grey.medium,
     ':before': {
       content: '"+"'
     }
   },
   negative: {
-    color: 'var(--color-primary)'
+    color: theme.palette.primary.main
   }
-});
+}));
 
 /**
  * The price difference component

package/product/components/PriceInfo/PriceInfo.connector.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
-import { makeGetShopSettingByKey } from "../../../core/selectors/shopSettings";
-import { SHOP_SETTING_DISPLAY_PRICE_PER_MEASURE_UNIT } from "../../../core/constants";
+import { makeGetShopSettingByKey } from '@shopgate/engage/settings/selectors/shopSettings';
+import { SHOP_SETTING_DISPLAY_PRICE_PER_MEASURE_UNIT } from '@shopgate/engage/settings/constants/shopSettings';
 
 /**
  * Creates the mapStateToProps connector function.

package/product/components/PriceInfo/PriceInfo.js

@@ -3,17 +3,16 @@ import PropTypes from 'prop-types';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { ConditionalWrapper } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import connect from "./PriceInfo.connector";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
-    color: themeConfig.colors.shade3
+    color: theme.palette.grey.medium
   },
   noWrap: {
     whiteSpace: 'nowrap'
   }
-});
+}));
 
 /**
  * The price info component

package/product/components/ProductCard/index.js

@@ -1,30 +1,42 @@
 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 { useSelector } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
+import { getProductCardNameMaxLines } from '@shopgate/engage/settings/selectors/appSettings';
 import ProductGridPrice from "../ProductGridPrice";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
+  root: {
+    padding: theme.components.productCard.padding
+  },
+  image: {
+    padding: theme.components.productCard.imagePadding
+  },
   details: {
-    padding: '12px 16px',
-    lineHeight: 1.35
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+    padding: theme.components.productCard.textPadding,
+    '& div:empty': {
+      display: 'none'
+    }
   },
   title: {
-    fontWeight: '500',
+    fontSize: theme.typography.body2.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
     lineHeight: 1.15,
     marginTop: 1
   },
   badgeWrapper: {
     minWidth: 40
   }
-});
+}));
 const location = 'productCard';
 
 /**
@@ -34,7 +46,8 @@ const location = 'productCard';
  * @param {boolean} props.hidePrice Whether the price should be hidden.
  * @param {boolean} props.hideRating Whether the rating should be hidden.
  * @param {boolean} props.hideName Whether the name should be hidden.
- * @param {number} props.titleRows The max number of rows for the product title.
+ * @param {number} props.titleRows Optional override for the max number of rows for the product
+ * title
  * @param {string} props.url Optional alternative url for the product link
  * @return {JSX.Element}
  */
@@ -54,12 +67,8 @@ function ProductCard(props) {
   const {
     meta
   } = useProductListType();
-  const {
-    ListImage: gridResolutions
-  } = getProductImageSettings();
-  const {
-    showEmptyRatingStars = false
-  } = useWidgetSettings('@shopgate/engage/rating');
+  const productNameLines = useSelector(getProductCardNameMaxLines);
+  const showEmptyRatingStars = useShowEmptyRatingStars();
   const showRatings = useMemo(() => {
     if (!hideRating && product?.rating?.average > 0) {
       return true;
@@ -70,7 +79,7 @@ function ProductCard(props) {
     return false;
   }, [hideRating, product, showEmptyRatingStars]);
   return /*#__PURE__*/_jsxs(Link, {
-    className: "engage__product-card",
+    className: cx(classes.root, 'engage__product-card'),
     href: url || getProductRoute(product.id),
     itemProp: "item",
     itemScope: true,
@@ -79,15 +88,18 @@ function ProductCard(props) {
     state: {
       ...meta
     },
-    children: [isBeta() && product.featuredMedia ? /*#__PURE__*/_jsx(FeaturedMedia, {
-      type: product.featuredMedia.type,
-      url: product.featuredMedia.url,
-      altText: product.featuredMedia.altText
-    }) : /*#__PURE__*/_jsx(ProductImage, {
-      src: product.featuredImageBaseUrl,
-      resolutions: gridResolutions,
-      alt: product.name,
-      itemProp: "image"
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classes.image,
+      children: isBeta() && product.featuredMedia ? /*#__PURE__*/_jsx(FeaturedMedia, {
+        type: product.featuredMedia.type,
+        url: product.featuredMedia.url,
+        altText: product.featuredMedia.altText
+      }) : /*#__PURE__*/_jsx(ProductImage, {
+        src: product.featuredImageBaseUrl,
+        context: "list",
+        alt: product.name,
+        itemProp: "image"
+      })
     }), /*#__PURE__*/_jsx(ProductBadges, {
       location: location,
       productId: product.id,
@@ -114,7 +126,7 @@ function ProductCard(props) {
         className: classes.title,
         testId: `Productname: ${product.name}`,
         itemProp: "name",
-        rows: titleRows || 3
+        rows: titleRows || productNameLines
       }), /*#__PURE__*/_jsx(MapPriceHint, {
         productId: product.id
       }), /*#__PURE__*/_jsx(OrderQuantityHint, {
@@ -150,7 +162,7 @@ ProductCard.defaultProps = {
   hideName: false,
   hidePrice: false,
   hideRating: false,
-  titleRows: 3,
+  titleRows: null,
   url: null
 };
 export default ProductCard;

package/product/components/ProductDiscountBadge/index.js

@@ -8,7 +8,7 @@ import { useWidgetSettings } from '@shopgate/engage/core';
 import ProductBadges from "../ProductBadges";
 import connect from "./connector";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   portal: {
     top: 12,
     [responsiveMediaQuery('>xs', {
@@ -28,11 +28,11 @@ const useStyles = makeStyles()(() => ({
     }
   },
   badge: {
-    fontSize: '1.15rem',
+    fontSize: theme.typography.h4.fontSize,
     [responsiveMediaQuery('>xs', {
       webOnly: true
     })]: {
-      fontSize: 14
+      fontSize: theme.typography.body2.fontSize
     }
   }
 }));

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

@@ -8,17 +8,25 @@ import { makeStyles } from '@shopgate/engage/styles';
 import ItemName from "../ItemName";
 import ItemPrice from "../ItemPrice";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
     lineHeight: 1.2,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(0.5),
     ':not(:empty)': {
-      padding: '12px 0 16px'
+      padding: theme.components.tiles.textPadding,
+      // Floored at the favorites button overhang so a small configured inner padding
+      // can't let the button overlap the product name.
+      paddingTop: theme.components.tiles.textPaddingTop
     }
   },
   quantityHint: {
-    paddingTop: 8
+    ':empty': {
+      display: 'none'
+    }
   }
-});
+}));
 
 /**
  * The Product Grid Item Detail component.

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

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import { SurroundPortals, FavoritesButton } from '@shopgate/engage/components';
 import { PRODUCT_ITEM_FAVORITES_BUTTON } from '@shopgate/engage/category';
 import { isRelativeProductOnList } from '@shopgate/engage/favorites';
-import { getLoadWishlistOnAppStartEnabled } from '@shopgate/engage/core';
+import { getLoadWishlistOnAppStartEnabled } from '@shopgate/engage/settings/selectors/shopSettings';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({

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

@@ -2,17 +2,14 @@ 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 { jsx as _jsx } from "react/jsx-runtime";
-const {
-  ListImage: gridResolutions
-} = getProductImageSettings();
+import { ProductImage } from '@shopgate/engage/product';
 
 /**
  * The item image component.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const ItemImage = ({
   productId,
   name,
@@ -27,7 +24,7 @@ const ItemImage = ({
     children: /*#__PURE__*/_jsx(ProductImage, {
       alt: name,
       src: imageUrl,
-      resolutions: gridResolutions,
+      context: "list",
       itemProp: "image"
     })
   });

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

@@ -1,19 +1,21 @@
 import React, { memo, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { PRODUCT_ITEM_NAME, PRODUCT_ITEM_NAME_BEFORE, PRODUCT_ITEM_NAME_AFTER } from '@shopgate/engage/category/constants';
+import { useSelector } from 'react-redux';
 import { Portal } from '@shopgate/engage/components';
 import { ProductName, ProductRatingStars } from '@shopgate/engage/product';
 import { makeStyles } from '@shopgate/engage/styles';
+import { getProductTileNameMaxLines } from '@shopgate/engage/settings/selectors/appSettings';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
-    fontWeight: '500',
-    lineHeight: 1.15,
+    fontSize: theme.typography.body2.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
     marginTop: 1,
     wordBreak: ['keep-all', 'break-word'],
     hyphens: 'auto'
   }
-});
+}));
 
 /**
  * The item name component.
@@ -29,6 +31,7 @@ const ItemName = ({
     classes,
     cx
   } = useStyles();
+  const productNameLines = useSelector(getProductTileNameMaxLines);
   const portalProps = useMemo(() => ({
     productId,
     display
@@ -54,7 +57,8 @@ const ItemName = ({
       className: cx(classes.root, 'theme__product-grid__item__item-name'),
       portalName: PRODUCT_ITEM_NAME,
       portalProps: portalProps,
-      testId: `Productname: ${name}`
+      testId: `Productname: ${name}`,
+      rows: productNameLines
     })]
   });
 };

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

@@ -4,16 +4,12 @@ import { isBeta } from '@shopgate/engage/core';
 import { getProductRoute, FeaturedMedia, ProductBadges } from '@shopgate/engage/product';
 import { Link } from '@shopgate/engage/components';
 import { useProductListType } from '@shopgate/engage/product/hooks';
-import { themeConfig } from '@shopgate/engage';
 import { makeStyles } from '@shopgate/engage/styles';
 import ItemImage from "./components/ItemImage";
 import ItemDiscount from "./components/ItemDiscount";
 import ItemFavoritesButton from "./components/ItemFavoritesButton";
 import ItemDetails from "./components/ItemDetails";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()((theme, {
   display
 }) => ({
@@ -21,8 +17,15 @@ const useStyles = makeStyles()((theme, {
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
-    background: colors.light,
-    height: '100%'
+    height: '100%',
+    padding: theme.components.tiles.padding,
+    background: theme.components.tiles.backgroundColor,
+    border: theme.components.tiles.border,
+    borderRadius: theme.components.tiles.borderRadius
+  },
+  image: {
+    display: 'block',
+    padding: theme.components.tiles.imagePadding
   },
   itemDetails: {
     position: 'relative',
@@ -55,6 +58,7 @@ const Item = ({
   return /*#__PURE__*/_jsxs("div", {
     className: cx(classes.root, 'theme__product-grid__item'),
     children: [/*#__PURE__*/_jsx(Link, {
+      className: classes.image,
       role: "none",
       href: getProductRoute(product.id),
       state: {

package/product/components/ProductGrid/components/Layout/index.js

@@ -9,11 +9,26 @@ const useStyles = makeStyles()((theme, {
   root: {
     padding: '0 16px',
     ':not(:empty)': {
-      marginTop: 16
+      marginTop: 16,
+      marginBottom: 16
     },
-    display: 'grid',
-    gridGap: '0 16px',
-    gridTemplateColumns: `repeat(${columns}, 1fr)`
+    ...(columns <= 2 ? {
+      rowGap: 16,
+      '& > *': {
+        padding: '0px 8px',
+        width: `${100 / columns}%`,
+        [`&:nth-of-type(${columns}n)`]: {
+          paddingRight: 0
+        },
+        [`&:nth-of-type(${columns}n+1)`]: {
+          paddingLeft: 0
+        }
+      }
+    } : {
+      display: 'grid',
+      gridGap: 16,
+      gridTemplateColumns: `repeat(${columns}, 1fr)`
+    })
   }
 }));
 

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"}

package/product/components/ProductGrid/hooks.js

@@ -0,0 +1,48 @@
+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, getProductGridColumns } from '@shopgate/engage/settings/selectors/appSettings';
+import { SCREEN_SIZE_BREAKPOINTS } from '@shopgate/engage/settings/constants/appSettings';
+import { WIDGET_ID } from "./constants";
+
+/**
+ * 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 const useProductGridColumns = () => {
+  // Widget-scope detection: the WidgetContext carries a `code` only when the
+  // grid renders inside a page-builder widget (WidgetProvider).
+  const {
+    code: widgetCode
+  } = useContext(WidgetContext);
+  const isInsideWidget = Boolean(widgetCode);
+  const areAppSettingsHydrated = useSelector(getAreAppSettingsHydrated);
+  // The built-in default { small: 2, large: 4 } until hydrated, the source value after.
+  const appSettingsColumns = useSelector(getProductGridColumns);
+  const {
+    columns: legacyColumns
+  } = useWidgetSettings(WIDGET_ID) || {};
+  const sizes = useMemo(() => {
+    // Only special case: pre-hydration, outside a widget, honor the legacy
+    // scalar flat across every breakpoint.
+    if (!areAppSettingsHydrated && !isInsideWidget && typeof legacyColumns === 'number') {
+      return {
+        small: legacyColumns
+      };
+    }
+    return appSettingsColumns;
+  }, [areAppSettingsHydrated, isInsideWidget, legacyColumns, appSettingsColumns]);
+  const breakpoints = useMemo(() => Object.entries(sizes).reduce((acc, [size, value]) => {
+    acc[SCREEN_SIZE_BREAKPOINTS[size]] = value;
+    return acc;
+  }, {}), [sizes]);
+  return useResponsiveValue(breakpoints);
+};

package/product/components/ProductGrid/index.js

@@ -4,11 +4,11 @@ import PropTypes from 'prop-types';
 import { ViewContext, InfiniteContainer, LoadingIndicator } from '@shopgate/engage/components';
 import { ProductListTypeProvider } from '@shopgate/engage/product';
 import { ITEMS_PER_LOAD } from '@shopgate/engage/core/constants';
-import { useResponsiveValue } from '@shopgate/engage/styles';
 import Iterator from "./components/Iterator";
 import Layout from "./components/Layout";
+import { useProductGridColumns } from "./hooks";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const WIDGET_ID = '@shopgate/engage/product/ProductGrid';
+export { WIDGET_ID } from "./constants";
 
 /**
  * The Product Grid component.
@@ -46,10 +46,7 @@ const ProductGrid = ({
   const {
     getContentRef
   } = useContext(ViewContext);
-  const columns = useResponsiveValue({
-    xs: 2,
-    md: 4
-  });
+  const columns = useProductGridColumns();
   if (!infiniteLoad) {
     return /*#__PURE__*/_jsx(Layout, {
       columns: columns,

package/product/components/ProductGridPrice/index.js

@@ -1,28 +1,21 @@
-import "core-js/modules/es.array.includes.js";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Grid, Price, PriceStriked } from '@shopgate/engage/components';
 import { PriceInfo } from '@shopgate/engage/product/components';
 import { withPriceCalculation } from '@shopgate/engage/product/hocs';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeName } from '@shopgate/pwa-common/helpers/config';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const isIOS = themeName.includes('ios');
-const useStyles = makeStyles()({
-  priceWrapper: isIOS ? {
-    lineHeight: 1.75,
-    marginTop: 2,
+const useStyles = makeStyles()(theme => ({
+  priceWrapper: {
     alignItems: 'center'
-  } : {
-    lineHeight: 1.75
   },
-  basicPrice: {
-    fontSize: '0.875rem'
+  strikedPrice: {
+    fontSize: theme.typography.caption.fontSize
   },
-  strikedPrice: isIOS ? {
-    fontSize: '0.75rem'
-  } : {}
-});
+  basicPrice: {
+    fontSize: theme.typography.body2.fontSize
+  }
+}));
 
 /**
  * The ProductGridPrice component is supposed to be used to display prices at product grids. It