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

package/cart/components/CartItem/CartItemQuantityPicker.js

@@ -7,8 +7,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   inputStyle: {
     border: 'none',
-    background: theme.palette.background.emphasized,
-    color: theme.contrastColor(theme.palette.background.emphasized),
+    background: theme.components.input.background,
+    color: theme.components.input.text,
     display: 'block',
     fontSize: theme.typography.caption.fontSize,
     textAlign: 'center',

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

@@ -10,6 +10,13 @@ const {
   currency
 } = appConfig;
 const useStyles = makeStyles()(theme => ({
+  priceRange: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    columnGap: theme.spacing(0.5),
+    rowGap: theme.spacing(1)
+  },
   editableField: {
     color: theme.palette.text.primary,
     fontWeight: theme.typography.fontWeightMedium,
@@ -20,6 +27,16 @@ const useStyles = makeStyles()(theme => ({
     margin: theme.spacing(0, 0.5),
     border: `1px solid ${theme.components.input.border}`,
     borderRadius: 3,
+    appearance: 'textfield',
+    WebkitAppearance: 'textfield',
+    '&::-webkit-outer-spin-button': {
+      WebkitAppearance: 'none',
+      margin: 0
+    },
+    '&::-webkit-inner-spin-button': {
+      WebkitAppearance: 'none',
+      margin: 0
+    },
     ':focus': {
       borderColor: theme.components.border.medium
     },
@@ -58,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.
@@ -133,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.16",
+  "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.16",
-    "@shopgate/pwa-common-commerce": "7.32.0-beta.16",
-    "@shopgate/pwa-core": "7.32.0-beta.16",
-    "@shopgate/pwa-ui-ios": "7.32.0-beta.16",
-    "@shopgate/pwa-ui-material": "7.32.0-beta.16",
-    "@shopgate/pwa-ui-shared": "7.32.0-beta.16",
+    "@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,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 { 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,21 +35,16 @@ const scrollToRating = () => {
  * @return {JSX.Element}
  */
 const Rating = ({
-  rating
+  productId
 }) => {
   const {
     classes
   } = useStyles();
+  const rating = useSelector(state => getProductRating(state, {
+    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", {
@@ -69,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/Rating/connector.js

@@ -1,26 +0,0 @@
-import { connect } from 'react-redux';
-import { getProductRating } from '@shopgate/pwa-common-commerce/product/selectors/product';
-
-/**
- * @param {Object} state The current application state.
- * @param {Object} props The component props.
- * @return {Object} The extended component props.
- */
-const mapStateToProps = (state, props) => ({
-  rating: getProductRating(state, props)
-});
-
-/**
- * @param {Object} next The next component props.
- * @param {Object} prev The previous component props.
- * @return {boolean}
- */
-const areStatePropsEqual = (next, prev) => {
-  if (!prev.rating && next.rating) {
-    return false;
-  }
-  return true;
-};
-export default connect(mapStateToProps, null, null, {
-  areStatePropsEqual
-});