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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../page/helpers/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B;;OAEG;IACH,mBAAmB,EAAE,MAAM,EAAE,CAAC;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,wDAAwD;IACvE;;OAEG;IACH,kBAAkB,EAAE,YAAY,GAAG,OAAO,GAAG,UAAU,GAAG,YAAY,CAAC;IACvE;;;OAGG;IACH,mBAAmB,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACxC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,6CAA6C,GACxD,WAAU,OAAO,CAAC,yBAAyB,CAAM,KAChD,wDAyBF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,EAAE,aAAa,OAAO,KAAG,MAQjE,CAAC;AAEF;;GAEG;AACH,UAAU,kBAAkB;IAC1B;;OAEG;IACH,YAAY,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;IACxD;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,mCAAmC,GAC9C,sCAAsC,kBAAkB,KACvD,MAKF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,MAAM,KAAK,MAAM,KAAG,OAAkC,CAAC;AAEjG;;;;GAIG;AACH,eAAO,MAAM,UAAU,QAP8B,MAAM,KAAG,OAOgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../page/helpers/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B;;OAEG;IACH,mBAAmB,EAAE,MAAM,EAAE,CAAC;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,wDAAwD;IACvE;;OAEG;IACH,kBAAkB,EAAE,YAAY,GAAG,OAAO,GAAG,UAAU,GAAG,YAAY,CAAC;IACvE;;;OAGG;IACH,mBAAmB,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACxC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,6CAA6C,GACxD,WAAU,OAAO,CAAC,yBAAyB,CAAM,KAChD,wDAyBF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,EAAE,aAAa,OAAO,KAAG,MAQjE,CAAC;AAEF;;GAEG;AACH,UAAU,kBAAkB;IAC1B;;OAEG;IACH,YAAY,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;IACxD;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,mCAAmC,GAC9C,sCAAsC,kBAAkB,KACvD,MAKF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,MAAM,KAAK,MAAM,KAAG,OAAkC,CAAC;AAEjG;;;;GAIG;AACH,eAAO,MAAM,UAAU,QAP8B,MAAM,KAAG,OAOgB,CAAC"}

package/page/helpers/index.js

@@ -51,19 +51,22 @@ export const parseImageUrl = (url, useHighRes) => {
 
 /**
  * Retrieves the border radius based on the widget config.
+ *
+ * `default` follows the app wide corner style, so it is returned as a reference to the theme's
+ * shape variable rather than a resolved length.
  * @param params The helper parameters.
  * @param params.borderRadius The border radius option.
  * @param params.borderRadiusCustom The custom border radius value.
- * @returns The resolved border radius.
+ * @returns The resolved border radius as a CSS length.
  */
 export const resolveBorderRadiusFromWidgetConfig = ({
   borderRadius,
   borderRadiusCustom
 }) => {
-  if (borderRadius === 'none') return 0;
-  if (borderRadius === 'rounded') return 16;
-  if (borderRadius === 'custom' && typeof borderRadiusCustom === 'number') return borderRadiusCustom;
-  return 0;
+  if (borderRadius === 'none') return '0';
+  if (borderRadius === 'rounded') return '16px';
+  if (borderRadius === 'custom' && typeof borderRadiusCustom === 'number') return `${borderRadiusCustom}px`;
+  return 'var(--sg-shape-borderRadius)';
 };
 
 /**

package/page/widgets/Button/Button.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { Button } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { useWidget } from '@shopgate/engage/page/hooks';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useNavigation } from '@shopgate/engage/core';
@@ -46,9 +46,8 @@ const ButtonWidget = () => {
   return /*#__PURE__*/_jsx("div", {
     className: classes.root,
     children: /*#__PURE__*/_jsx(Button, {
-      type: "secondary",
+      color: "primary",
       onClick: handleClick,
-      wrapContent: false,
       children: /*#__PURE__*/_jsx("span", {
         className: classes.text,
         children: text

package/page/widgets/NestedCategoryFilter/NestedCategoryFilter.js

@@ -1,8 +1,9 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { I18n, ButtonLink } from '@shopgate/engage/components';
+import { I18n } from '@shopgate/engage/components';
 import { bin2hex } from '@shopgate/engage/core/helpers';
 import { CATEGORY_PATH } from '@shopgate/engage/category';
 import { makeStyles } from '@shopgate/engage/styles';
+import { Button } from '@shopgate/engage/components/v2';
 import { useRoute, usePrevious, useLocalStorage } from '@shopgate/engage/core/hooks';
 import { router } from '@virtuous/conductor';
 import CategoryPicker from "./components/Picker";
@@ -16,10 +17,8 @@ const useStyles = makeStyles()(theme => ({
     paddingBottom: theme.spacing(2)
   },
   buttonContainer: {
-    padding: theme.spacing(0, 2)
-  },
-  button: {
-    width: '100%'
+    padding: theme.spacing(0, 2),
+    margin: theme.spacing(1, 0)
   }
 }));
 
@@ -142,11 +141,12 @@ const NestedCategoryFilter = () => {
       className: "widget__nested-category-filter__headline"
     }) : null, categoryPickers, /*#__PURE__*/_jsx("div", {
       className: cx(classes.buttonContainer, 'widget__nested-category-filter__button-container'),
-      children: /*#__PURE__*/_jsx(ButtonLink, {
-        className: cx(classes.button, 'widget__nested-category-filter__CTA-button'),
+      children: /*#__PURE__*/_jsx(Button, {
         href: `${CATEGORY_PATH}/${bin2hex(state.buttonCategoryId)}`,
+        color: "primary",
+        fullWidth: true,
+        className: "widget__nested-category-filter__CTA-button",
         disabled: !state.buttonCategoryId,
-        flat: false,
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "common.show_products",
           className: "widget__nested-category-filter__CTA-button__text"

package/page/widgets/ProductList/ProductList.js

@@ -1,23 +1,27 @@
 import "core-js/modules/es.regexp.flags.js";
 import React, { useCallback } from 'react';
-import { ActionButton, I18n } from '@shopgate/engage/components';
+import { I18n } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { ProductGrid } from '@shopgate/engage/product/components';
 import { useWidgetProducts } from '@shopgate/engage/page/hooks';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useProductListWidget } from "./hooks";
 import WidgetHeadline from "../../components/WidgetHeadline";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
-    // Prevent that the ActionButton margin messes with the layout of the sibling widgets
     overflow: 'hidden'
   },
+  loadMore: {
+    textAlign: 'center',
+    margin: theme.spacing(1, 0)
+  },
   grid: {
     '&&': {
       marginTop: 0
     }
   }
-});
+}));
 
 /**
  * The ProductListWidget is used to display product lists.
@@ -66,16 +70,16 @@ const ProductListWidget = () => {
       scope: "widgets",
       infiniteLoad: false,
       className: classes.grid
-    }), hasNext && showLoadMore && /*#__PURE__*/_jsx(ActionButton, {
-      loading: isFetching,
-      onClick: handleFetchNext
-      // Disable click delay in preview mode to enable stopping of propagation.
-      ,
-      ...(isPreview && {
-        disableClickDelay: true
-      }),
-      children: /*#__PURE__*/_jsx(I18n.Text, {
-        string: "common.load_more"
+    }), hasNext && showLoadMore && /*#__PURE__*/_jsx("div", {
+      className: classes.loadMore,
+      children: /*#__PURE__*/_jsx(Button, {
+        variant: "text",
+        color: "secondary",
+        loading: isFetching,
+        onClick: handleFetchNext,
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "common.load_more"
+        })
       })
     })]
   });

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

@@ -41,9 +41,9 @@ export interface VideoWidgetConfig {
  */
 export interface UseVideoWidgetResult extends Pick<VideoWidgetConfig, 'url' | 'muted' | 'loop' | 'controls' | 'autoplay' | 'link'> {
     /**
-     * The resolved border radius value in pixels.
+     * The resolved border radius as a CSS length.
      */
-    borderRadius: number;
+    borderRadius: string;
 }
 /**
  * Hook to access the Video widget configuration and data.

package/product/components/ProductCard/index.js

@@ -6,12 +6,20 @@ import { Link, RatingStars, DiscountBadge, SurroundPortals } from '@shopgate/eng
 import { getProductRoute } from '@shopgate/engage/product';
 import { MapPriceHint, ProductImage, OrderQuantityHint, FeaturedMedia, Swatches, ProductName, ProductBadges } from '@shopgate/engage/product/components';
 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()(theme => ({
+  root: {
+    padding: theme.components.productCard.padding
+  },
+  image: {
+    padding: theme.components.productCard.imagePadding
+  },
   details: {
-    padding: '12px 16px'
+    padding: theme.components.productCard.textPadding
   },
   title: {
     fontSize: theme.typography.body2.fontSize,
@@ -32,7 +40,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}
  */
@@ -52,6 +61,7 @@ function ProductCard(props) {
   const {
     meta
   } = useProductListType();
+  const productNameLines = useSelector(getProductCardNameMaxLines);
   const showEmptyRatingStars = useShowEmptyRatingStars();
   const showRatings = useMemo(() => {
     if (!hideRating && product?.rating?.average > 0) {
@@ -63,7 +73,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,
@@ -72,15 +82,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,
-      context: "list",
-      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,
@@ -107,7 +120,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, {
@@ -143,7 +156,7 @@ ProductCard.defaultProps = {
   hideName: false,
   hidePrice: false,
   hideRating: false,
-  titleRows: 3,
+  titleRows: null,
   url: null
 };
 export default ProductCard;

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

@@ -8,17 +8,20 @@ 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,
     ':not(:empty)': {
-      padding: '16px 8px 8px'
+      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
   }
-});
+}));
 
 /**
  * The Product Grid Item Detail component.

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

@@ -3,27 +3,18 @@ import PropTypes from 'prop-types';
 import { SurroundPortals } from '@shopgate/engage/components';
 import { PRODUCT_ITEM_IMAGE } from '@shopgate/engage/category/constants';
 import { ProductImage } from '@shopgate/engage/product';
-import { makeStyles } from '@shopgate/engage/styles';
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  image: {
-    background: theme.palette.background.surface
-  }
-}));
 
 /**
  * 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,
   imageUrl
 }) => {
-  const {
-    classes
-  } = useStyles();
   const portalProps = useMemo(() => ({
     productId
   }), [productId]);
@@ -31,7 +22,6 @@ const ItemImage = ({
     portalName: PRODUCT_ITEM_IMAGE,
     portalProps: portalProps,
     children: /*#__PURE__*/_jsx(ProductImage, {
-      className: classes.image,
       alt: name,
       src: imageUrl,
       context: "list",

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

@@ -1,9 +1,11 @@
 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()(theme => ({
   root: {
@@ -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/components/ItemName/spec.js

@@ -1,9 +1,16 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import { ProductName } from '@shopgate/engage/product';
 import ItemName from "./index";
+
+// Resolve selectors against an empty state so they fall back to the built-in appSettings defaults.
 import { jsx as _jsx } from "react/jsx-runtime";
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: selector => selector(undefined)
+}));
 jest.mock('@shopgate/engage/product', () => ({
-  ProductName: () => null,
+  ProductName: jest.fn(() => null),
   ProductRatingStars: () => null
 }));
 jest.mock('@shopgate/engage/components');
@@ -12,10 +19,21 @@ const props = {
   name: 'Foo'
 };
 describe('<ItemName />', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
   it('should render with minimal props', () => {
     const wrapper = render(/*#__PURE__*/_jsx(ItemName, {
       ...props
     }));
     expect(wrapper.asFragment()).toMatchSnapshot();
   });
+  it('should clamp the name to the configured tile line count', () => {
+    render(/*#__PURE__*/_jsx(ItemName, {
+      ...props
+    }));
+
+    // The tile name line count comes from the appSettings channel; 3 is the built-in default.
+    expect(ProductName.mock.calls[0][0].rows).toBe(3);
+  });
 });

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

@@ -17,7 +17,15 @@ const useStyles = makeStyles()((theme, {
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
-    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',
@@ -50,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/ProductImage/ProductImage.d.ts.map

@@ -1 +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;AAmCD;;;;;;GAMG;AACH,QAAA,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCA0E7C,CAAC;AAEF,OAAO,EAAE,YAAY,IAAI,qBAAqB,EAAE,CAAC;oEAOX,iBAAiB;AAOvD,wBAA2C"}
+{"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

@@ -28,6 +28,10 @@ const DEFAULT_PRODUCT_IMAGE_CONTEXT = 'list';
  */
 
 const useStyles = makeStyles()(theme => ({
+  rounded: {
+    borderRadius: theme.components.productImage.borderRadius,
+    overflow: 'hidden'
+  },
   placeholderContent: {
     position: 'absolute',
     width: '100%',
@@ -100,6 +104,7 @@ const ProductImage = props => {
   } = 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, {
@@ -122,14 +127,14 @@ const ProductImage = props => {
       ratio: resolved.ratio
     } : undefined,
     children: /*#__PURE__*/_jsx("div", {
-      className: cx(className, 'engage__product__product-image'),
+      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.background.surface,
+        backgroundColor: noBackground ? 'transparent' : theme.palette.common.white,
         "aria-hidden": !alt
       })
     })

package/product/components/ProductImage/ProductImagePlaceholder.js

@@ -65,14 +65,14 @@ const ProductImagePlaceholder = props => {
         backgroundSize: 'contain',
         backgroundRepeat: 'no-repeat',
         backgroundPosition: 'center',
-        backgroundColor: noBackground ? 'transparent' : theme.palette.background.surface,
+        backgroundColor: noBackground ? 'transparent' : theme.palette.common.white,
         position: 'absolute'
       };
     }
     return {
-      backgroundColor: noBackground ? 'transparent' : theme.palette.background.surface
+      backgroundColor: noBackground ? 'transparent' : theme.palette.common.white
     };
-  }, [srcLoaded, noBackground, theme.palette.background.surface, src]);
+  }, [srcLoaded, noBackground, theme.palette.common.white, src]);
   const contentClasses = cx(classes.placeholderContent, {
     [classes.innerShadow]: showInnerShadow
   });

package/product/components/ProductSlider/index.js

@@ -9,7 +9,7 @@ import { WIDGET_ID } from "./constants";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   container: {
-    paddingBottom: 10
+    padding: '8px 9px 16px !important'
   }
 });
 const items = {
@@ -61,8 +61,10 @@ function ProductSlider(props) {
       freeMode: !snap,
       ...swiperProps,
       slidesPerView: slidesPerView,
+      classNames: {
+        container: classes.container
+      },
       children: productIds.map(id => /*#__PURE__*/_jsx(Swiper.Item, {
-        className: classes.container,
         children: /*#__PURE__*/_jsx(ProductListEntryProvider, {
           productId: id,
           children: /*#__PURE__*/_jsx(Item, {

package/product/components/RelationsSlider/RelationsSliderContent.js

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

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

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

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

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

package/product/components/RelationsSlider/constants.js

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

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

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

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

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

package/product/components/RelationsSlider/hooks.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"UnitQuantityPicker.d.ts","sourceRoot":"","sources":["../../../../product/components/UnitQuantityPicker/UnitQuantityPicker.jsx"],"names":[],"mappings":";AA0GA;;;GAGG;AACH;;;;;;;;;;;;;;;;;IAFa,GAAG,CAAC,OAAO,CAmNvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA5TqB,YAAY"}
+{"version":3,"file":"UnitQuantityPicker.d.ts","sourceRoot":"","sources":["../../../../product/components/UnitQuantityPicker/UnitQuantityPicker.jsx"],"names":[],"mappings":";AA6FA;;;GAGG;AACH;;;;;;;;;;;;;;;;;IAFa,GAAG,CAAC,OAAO,CAqMvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAjSqB,YAAY"}