@shopgate/engage 7.32.0-beta.17 → 7.32.0-beta.18

package/filter/components/FilterItem/index.js

@@ -13,6 +13,9 @@ const useStyles = makeStyles()(theme => ({
       left: theme.spacing(2),
       right: theme.spacing(2),
       borderTop: `1px solid ${theme.components.separatorLine.borderColor}`
+    },
+    '&:first-child::before': {
+      display: 'none'
     }
   }
 }));

package/filter/components/PriceSlider/components/Label/index.js

@@ -11,7 +11,11 @@ const {
 } = appConfig;
 const useStyles = makeStyles()(theme => ({
   priceRange: {
-    whiteSpace: 'nowrap'
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    columnGap: theme.spacing(0.5),
+    rowGap: theme.spacing(1)
   },
   editableField: {
     color: theme.palette.text.primary,
@@ -71,7 +75,7 @@ const useStyles = makeStyles()(theme => ({
  * @param {number} length Amount of characters the field has to fit.
  * @returns {string}
  */
-const fieldWidth = length => `${length + 2}ch`;
+const fieldWidth = length => `${length + 1}ch`;
 
 /**
  * The filter price range slider label component.
@@ -137,7 +141,6 @@ function Label(props) {
     currency
   }).format('0').replace('0.00', '');
   return /*#__PURE__*/_jsxs("div", {
-    className: classes.priceRange,
     children: [/*#__PURE__*/_jsx("span", {
       className: classes.srOnly,
       children: i18n.text('price.range', {
@@ -147,6 +150,7 @@ function Label(props) {
     }), /*#__PURE__*/_jsxs(I18n.Text, {
       string: "price.range",
       "aria-hidden": true,
+      className: classes.priceRange,
       children: [/*#__PURE__*/_jsx(I18n.Placeholder, {
         forKey: "fromPrice",
         children: /*#__PURE__*/_jsxs("span", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.32.0-beta.17",
+  "version": "7.32.0-beta.18",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -18,12 +18,12 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@shopgate/native-modules": "1.0.0-beta.34",
-    "@shopgate/pwa-common": "7.32.0-beta.17",
-    "@shopgate/pwa-common-commerce": "7.32.0-beta.17",
-    "@shopgate/pwa-core": "7.32.0-beta.17",
-    "@shopgate/pwa-ui-ios": "7.32.0-beta.17",
-    "@shopgate/pwa-ui-material": "7.32.0-beta.17",
-    "@shopgate/pwa-ui-shared": "7.32.0-beta.17",
+    "@shopgate/pwa-common": "7.32.0-beta.18",
+    "@shopgate/pwa-common-commerce": "7.32.0-beta.18",
+    "@shopgate/pwa-core": "7.32.0-beta.18",
+    "@shopgate/pwa-ui-ios": "7.32.0-beta.18",
+    "@shopgate/pwa-ui-material": "7.32.0-beta.18",
+    "@shopgate/pwa-ui-shared": "7.32.0-beta.18",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.44.1",
     "@virtuous/conductor": "~2.5.0",

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 useShowEmptyRatingStars from "../../hooks/useShowEmptyRatingStars";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  hasReviews
-} = appConfig;
 /**
  * The product RatingStars component.
  */
@@ -21,15 +18,7 @@ const ProductRatingStars = ({
     productId
   }));
   const showEmptyRatingStars = useShowEmptyRatingStars();
-  const showRatings = useMemo(() => {
-    if (hasReviews && (rating?.average ?? 0) > 0) {
-      return true;
-    }
-    if (hasReviews && showEmptyRatingStars && rating) {
-      return true;
-    }
-    return false;
-  }, [rating, showEmptyRatingStars]);
+  const showRatings = appConfig.hasReviews && ((rating?.average ?? 0) > 0 || showEmptyRatingStars && Boolean(rating));
   if (!showRatings) {
     return null;
   }

package/product/components/Rating/index.js

@@ -1,4 +1,4 @@
-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';
@@ -9,9 +9,6 @@ import RatingCount from '@shopgate/engage/reviews/components/Reviews/components/
 import { useShowEmptyRatingStars } from '@shopgate/engage/product/hooks';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  hasReviews
-} = appConfig;
 const useStyles = makeStyles()(theme => ({
   container: {
     display: 'flex',
@@ -47,15 +44,7 @@ const Rating = ({
     productId
   }));
   const showEmptyRatingStars = useShowEmptyRatingStars();
-  const showRatings = useMemo(() => {
-    if (hasReviews && (rating?.average ?? 0) > 0) {
-      return true;
-    }
-    if (hasReviews && showEmptyRatingStars && rating) {
-      return true;
-    }
-    return false;
-  }, [rating, showEmptyRatingStars]);
+  const showRatings = appConfig.hasReviews && ((rating?.average ?? 0) > 0 || showEmptyRatingStars && Boolean(rating));
   return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PRODUCT_RATING,
     children: showRatings && /*#__PURE__*/_jsxs("div", {