@shopgate/engage 7.31.0-beta.1 → 7.31.0-beta.3

package/components/ScrollHeader/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/ScrollHeader/index.jsx"],"names":[],"mappings":";AAsGA;;;;;;;;;;;cArDW,KAAK,CAAC,SAAS;yCAqDwB;kBAtGK,OAAO"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/ScrollHeader/index.jsx"],"names":[],"mappings":";AA6GA;;;;;;;;;;;cA5DW,KAAK,CAAC,SAAS;yCA4DwB;kBA7GK,OAAO"}

package/components/ScrollHeader/index.js

@@ -1,7 +1,7 @@
 import React, { useState, forwardRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import { useScrollDirectionChange } from '@shopgate/engage/core/hooks';
+import { useScrollDirectionChange, useRoute } from '@shopgate/engage/core/hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   root: {
@@ -68,8 +68,15 @@ function ScrollHeaderBase({
     cx
   } = useStyles();
   const [shouldHideHeader, setShouldHideHeader] = useState(false);
+
+  // The `viewScroll$` stream is shared across all mounted views. Cached routes (e.g. a product
+  // list) stay mounted in the background while another route is active, so without this guard the
+  // header would react to scroll events emitted by a different, currently visible view and end up
+  // hidden when the user navigates back. `visible` is true only for the active route.
+  const route = useRoute();
+  const visible = route ? route.visible !== false : true;
   useScrollDirectionChange({
-    enabled: hideOnScroll,
+    enabled: hideOnScroll && visible,
     offset: scrollOffset,
     onlyFireOnScrollUpAtTop: onlyShowAtTop,
     onlyFireOnScrollUpAtTopOffset: onlyShowAtTopOffset,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.31.0-beta.1",
+  "version": "7.31.0-beta.3",
   "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.25",
-    "@shopgate/pwa-common": "7.31.0-beta.1",
-    "@shopgate/pwa-common-commerce": "7.31.0-beta.1",
-    "@shopgate/pwa-core": "7.31.0-beta.1",
-    "@shopgate/pwa-ui-ios": "7.31.0-beta.1",
-    "@shopgate/pwa-ui-material": "7.31.0-beta.1",
-    "@shopgate/pwa-ui-shared": "7.31.0-beta.1",
+    "@shopgate/pwa-common": "7.31.0-beta.3",
+    "@shopgate/pwa-common-commerce": "7.31.0-beta.3",
+    "@shopgate/pwa-core": "7.31.0-beta.3",
+    "@shopgate/pwa-ui-ios": "7.31.0-beta.3",
+    "@shopgate/pwa-ui-material": "7.31.0-beta.3",
+    "@shopgate/pwa-ui-shared": "7.31.0-beta.3",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.44.1",
     "@virtuous/conductor": "~2.5.0",

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

@@ -2,7 +2,7 @@ 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 { Portal } from '@shopgate/engage/components';
-import { ProductName } from '@shopgate/engage/product';
+import { ProductName, ProductRatingStars } from '@shopgate/engage/product';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()({
@@ -38,18 +38,24 @@ const ItemName = ({
       children: [/*#__PURE__*/_jsx(Portal, {
         name: PRODUCT_ITEM_NAME_BEFORE,
         props: portalProps
+      }), /*#__PURE__*/_jsx(ProductRatingStars, {
+        productId: productId
       }), /*#__PURE__*/_jsx(Portal, {
         name: PRODUCT_ITEM_NAME_AFTER,
         props: portalProps
       })]
     });
   }
-  return /*#__PURE__*/_jsx(ProductName, {
-    name: name,
-    className: cx(classes.root, 'theme__product-grid__item__item-name'),
-    portalName: PRODUCT_ITEM_NAME,
-    portalProps: portalProps,
-    testId: `Productname: ${name}`
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ProductRatingStars, {
+      productId: productId
+    }), /*#__PURE__*/_jsx(ProductName, {
+      name: name,
+      className: cx(classes.root, 'theme__product-grid__item__item-name'),
+      portalName: PRODUCT_ITEM_NAME,
+      portalProps: portalProps,
+      testId: `Productname: ${name}`
+    })]
   });
 };
 ItemName.defaultProps = {

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

@@ -3,7 +3,8 @@ import { shallow } from 'enzyme';
 import ItemName from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/product', () => ({
-  ProductName: () => null
+  ProductName: () => null,
+  ProductRatingStars: () => null
 }));
 jest.mock('@shopgate/engage/components');
 const props = {

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

@@ -0,0 +1,14 @@
+interface RatingProps {
+    /**
+     * Id of the product to show the rating for.
+     */
+    productId: string;
+    /**
+     * Size of the rating stars.
+     * @default 'small'
+     */
+    size?: 'big' | 'small' | 'large';
+}
+declare const _default: import("react").MemoExoticComponent<({ productId, size, }: RatingProps) => import("react/jsx-runtime").JSX.Element | null>;
+export default _default;
+//# sourceMappingURL=ProductRatingStars.d.ts.map

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

@@ -0,0 +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"}

package/product/components/ProductRatingStars/ProductRatingStars.js

@@ -0,0 +1,43 @@
+import { memo, useMemo } 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 { jsx as _jsx } from "react/jsx-runtime";
+const {
+  hasReviews
+} = appConfig;
+/**
+ * The product RatingStars component.
+ */
+const ProductRatingStars = ({
+  productId,
+  size = 'small'
+}) => {
+  const rating = useSelector(state =>
+  // @ts-expect-error - getProductRating is not typed yet
+  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]);
+  if (!showRatings) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(RatingStars, {
+    value: rating?.average ?? 0,
+    display: size
+  });
+};
+export default /*#__PURE__*/memo(ProductRatingStars);

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

@@ -0,0 +1,2 @@
+export { default as ProductRatingStars } from './ProductRatingStars';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductRatingStars/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}

package/product/components/ProductRatingStars/index.js

@@ -0,0 +1 @@
+export { default as ProductRatingStars } from "./ProductRatingStars";

package/product/components/Rating/index.js

@@ -46,7 +46,7 @@ const Rating = ({
     showEmptyRatingStars = false
   } = useWidgetSettings('@shopgate/engage/rating');
   const showRatings = useMemo(() => {
-    if (hasReviews && rating?.average > 0) {
+    if (hasReviews && (rating?.average ?? 0) > 0) {
       return true;
     }
     if (hasReviews && showEmptyRatingStars && rating) {

package/product/components/index.js

@@ -24,6 +24,7 @@ export { default as ProductSlider } from "./ProductSlider";
 export * from "./ProductVariants";
 export { default as QuantityPicker } from "./QuantityPicker";
 export { default as Rating } from "./Rating";
+export { ProductRatingStars } from "./ProductRatingStars";
 export * from "./RelationsSlider";
 export * from "./Swatch";
 export * from "./Swatches";