@shopgate/engage 7.32.0-beta.2 → 7.32.0-beta.20

package/product/components/ProductImage/index.js

@@ -1,201 +1 @@
-import React, { useState, useEffect, useLayoutEffect, useCallback, memo } from 'react';
-import PropTypes from 'prop-types';
-import { logger } from '@shopgate/pwa-core';
-import appConfig 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, useTheme } 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 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: 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.
- * 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 theme = useTheme();
-  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' : theme.palette.background.surface,
-        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,6 +12,7 @@ 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 ProductImage from "../../../ProductImage";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   listItemContainer: {
@@ -92,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,

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

@@ -1,34 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import List from '@shopgate/pwa-common/components/List';
-import { makeStyles } from '@shopgate/engage/styles';
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  list: {
-    background: theme.palette.background.surface
-  }
-}));
 
 /**
  * The Product List Layout component.
  * @param {Object} props The component props.
  * @return {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Layout = ({
   children
-}) => {
-  const {
-    classes,
-    cx
-  } = useStyles();
-  return /*#__PURE__*/_jsx(List, {
-    className: cx(classes.list, 'engage__product__product-list'),
-    itemScope: true,
-    itemType: "http://schema.org/ItemList",
-    "data-test-id": "productList",
-    children: children
-  });
-};
+}) => /*#__PURE__*/_jsx(List, {
+  className: "engage__product__product-list",
+  itemScope: true,
+  itemType: "http://schema.org/ItemList",
+  "data-test-id": "productList",
+  children: children
+});
 Layout.defaultProps = {
   children: null
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ProductRatingStars.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductRatingStars/ProductRatingStars.tsx"],"names":[],"mappings":"AAiBA,UAAU,WAAW;IACnB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,OAAO,CAAC;CAClC;mFAQE,WAAW;AA4Bd,wBAAwC"}
+{"version":3,"file":"ProductRatingStars.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductRatingStars/ProductRatingStars.tsx"],"names":[],"mappings":"AAeA,UAAU,WAAW;IACnB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,OAAO,CAAC;CAClC;mFAQE,WAAW;AAmBd,wBAAwC"}

package/product/components/ProductRatingStars/ProductRatingStars.js

@@ -1,13 +1,10 @@
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { useSelector } from 'react-redux';
 import appConfig from '@shopgate/pwa-common/helpers/config';
 import { getProductRating } from '@shopgate/pwa-common-commerce/product/selectors/product';
 import { RatingStars } from '@shopgate/engage/components';
-import { useWidgetSettings } from '@shopgate/engage/core/hooks';
+import useShowEmptyRatingStars from "../../hooks/useShowEmptyRatingStars";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  hasReviews
-} = appConfig;
 /**
  * The product RatingStars component.
  */
@@ -20,18 +17,8 @@ const ProductRatingStars = ({
   getProductRating(state, {
     productId
   }));
-  const {
-    showEmptyRatingStars = false
-  } = useWidgetSettings('@shopgate/engage/rating');
-  const showRatings = useMemo(() => {
-    if (hasReviews && (rating?.average ?? 0) > 0) {
-      return true;
-    }
-    if (hasReviews && showEmptyRatingStars && rating) {
-      return true;
-    }
-    return false;
-  }, [rating, showEmptyRatingStars]);
+  const showEmptyRatingStars = useShowEmptyRatingStars();
+  const showRatings = appConfig.hasReviews && ((rating?.average ?? 0) > 0 || showEmptyRatingStars && Boolean(rating));
   if (!showRatings) {
     return null;
   }

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

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

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

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

package/product/components/ProductSlider/constants.js

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

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

@@ -0,0 +1,7 @@
+/**
+ * Resolves the number of slides the ProductSlider shows side by side for the active breakpoint.
+ * @param slidesPerViewProp The explicit prop value, if the caller passed one.
+ * @returns The resolved number of slides for the active breakpoint.
+ */
+export declare const useSlidesPerView: (slidesPerViewProp?: number) => number;
+//# sourceMappingURL=hooks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductSlider/hooks.ts"],"names":[],"mappings":"AAiBA;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,oBAAoB,MAAM,KAAG,MAgC7D,CAAC"}

package/product/components/ProductSlider/hooks.js

@@ -0,0 +1,40 @@
+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, 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 ProductSlider shows side by side for the active breakpoint.
+ * @param slidesPerViewProp The explicit prop value, if the caller passed one.
+ * @returns The resolved number of slides for the active breakpoint.
+ */
+export const useSlidesPerView = slidesPerViewProp => {
+  const {
+    code: widgetCode
+  } = useContext(WidgetContext);
+  const isInsideWidget = Boolean(widgetCode);
+  const areAppSettingsHydrated = useSelector(getAreAppSettingsHydrated);
+  const appSettingsSlidesPerView = useSelector(getProductSliderSlidesPerView);
+  const {
+    slidesPerView: legacySlidesPerView
+  } = useWidgetSettings(WIDGET_ID) || {};
+  const sizes = useMemo(() => {
+    if (!areAppSettingsHydrated && !isInsideWidget && typeof legacySlidesPerView === 'number') {
+      return {
+        small: legacySlidesPerView
+      };
+    }
+    return appSettingsSlidesPerView;
+  }, [areAppSettingsHydrated, isInsideWidget, 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 slidesPerViewProp || resolved || DEFAULT_SLIDES_PER_VIEW;
+};

package/product/components/ProductSlider/index.js

@@ -1,21 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useWidgetSettings } from '@shopgate/engage/core';
 import { useThemeComponents } from '@shopgate/engage/core/hooks';
 import { Swiper } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { ProductListTypeProvider, ProductListEntryProvider } from '@shopgate/engage/product/providers';
+import { useSlidesPerView } from "./hooks";
+import { WIDGET_ID } from "./constants";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   container: {
-    paddingBottom: 10
+    padding: '8px 0 16px !important'
   }
 });
 const items = {
   margin: '0 8px',
   height: '100%'
 };
-export const WIDGET_ID = '@shopgate/engage/product/ProductSlider';
 
 /**
  * @param {Object} props The component props.
@@ -36,12 +36,10 @@ function ProductSlider(props) {
     meta,
     productItemProps,
     item,
+    slidesPerView: slidesPerViewProp,
     ...swiperProps
   } = props;
-  const widgetSettings = useWidgetSettings(WIDGET_ID) || {};
-  const {
-    slidesPerView = 2.3
-  } = props.slidesPerView ? props : widgetSettings;
+  const slidesPerView = useSlidesPerView(slidesPerViewProp);
   // ProductSlider items are rendered with the ProductCard component provided by the theme.
   const {
     ProductCard
@@ -63,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/Rating/index.js

@@ -1,16 +1,14 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 import appConfig from '@shopgate/pwa-common/helpers/config';
+import { getProductRating } from '@shopgate/pwa-common-commerce/product/selectors/product';
 import { RatingStars, SurroundPortals } from '@shopgate/engage/components';
 import { PRODUCT_RATING } from '@shopgate/engage/product/constants';
 import RatingCount from '@shopgate/engage/reviews/components/Reviews/components/RatingCount';
-import { useWidgetSettings } from '@shopgate/engage/core/hooks';
+import { useShowEmptyRatingStars } from '@shopgate/engage/product/hooks';
 import { makeStyles } from '@shopgate/engage/styles';
-import connect from "./connector";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  hasReviews
-} = appConfig;
 const useStyles = makeStyles()(theme => ({
   container: {
     display: 'flex',
@@ -37,23 +35,16 @@ const scrollToRating = () => {
  * @return {JSX.Element}
  */
 const Rating = ({
-  rating
+  productId
 }) => {
   const {
     classes
   } = useStyles();
-  const {
-    showEmptyRatingStars = false
-  } = useWidgetSettings('@shopgate/engage/rating');
-  const showRatings = useMemo(() => {
-    if (hasReviews && (rating?.average ?? 0) > 0) {
-      return true;
-    }
-    if (hasReviews && showEmptyRatingStars && rating) {
-      return true;
-    }
-    return false;
-  }, [rating, showEmptyRatingStars]);
+  const rating = useSelector(state => getProductRating(state, {
+    productId
+  }));
+  const showEmptyRatingStars = useShowEmptyRatingStars();
+  const showRatings = appConfig.hasReviews && ((rating?.average ?? 0) > 0 || showEmptyRatingStars && Boolean(rating));
   return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PRODUCT_RATING,
     children: showRatings && /*#__PURE__*/_jsxs("div", {
@@ -71,6 +62,6 @@ const Rating = ({
   });
 };
 Rating.defaultProps = {
-  rating: null
+  productId: null
 };
-export default connect(/*#__PURE__*/memo(Rating));
+export default /*#__PURE__*/memo(Rating);

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":";AA8FA;;;GAGG;AACH;;;;;;;;;;;;;;;;;IAFa,GAAG,CAAC,OAAO,CAqMvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAlSqB,YAAY"}