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

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/PriceSlider/components/Label/index.js

@@ -10,6 +10,9 @@ const {
   currency
 } = appConfig;
 const useStyles = makeStyles()(theme => ({
+  priceRange: {
+    whiteSpace: 'nowrap'
+  },
   editableField: {
     color: theme.palette.text.primary,
     fontWeight: theme.typography.fontWeightMedium,
@@ -20,6 +23,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
     },
@@ -124,6 +137,7 @@ 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', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.32.0-beta.16",
+  "version": "7.32.0-beta.17",
   "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.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",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.44.1",
     "@virtuous/conductor": "~2.5.0",

package/product/components/Rating/index.js

@@ -1,12 +1,13 @@
 import React, { memo, useMemo } 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
@@ -37,11 +38,14 @@ 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) {
@@ -69,6 +73,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
-});