@shopgate/engage 7.31.1-alpha.2 → 7.31.2

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/development/components/ClientInformation/ClientInformation.js

@@ -3,6 +3,7 @@ import { useSelector } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useLongPress } from '@shopgate/engage/core/hooks';
 import { getClientInformation } from '@shopgate/engage/core/selectors';
+import { pckVersion } from '@shopgate/pwa-common/helpers/config';
 import DevelopmentSettings from "../DevelopmentSettings";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
@@ -62,7 +63,7 @@ const ClientInformation = () => {
     "aria-hidden": true,
     children: [/*#__PURE__*/_jsxs("p", {
       className: classes.unselectable,
-      children: [`App Version: ${appVersion} (${codebaseVersion})`, /*#__PURE__*/_jsx("br", {}), `Lib Version: ${libVersion}`]
+      children: [`App Version: ${appVersion} (${codebaseVersion})`, /*#__PURE__*/_jsx("br", {}), `Theme Version: ${pckVersion}`, /*#__PURE__*/_jsx("br", {}), `Lib Version: ${libVersion}`]
     }), deviceIdVisible && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("p", {
         className: classes.deviceId,

package/package.json

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

package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.js

@@ -2,6 +2,7 @@ import React, { useMemo, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles, useResponsiveValue } from '@shopgate/engage/styles';
 import { useParallax } from 'react-scroll-parallax';
+import { IS_PAGE_PREVIEW_ACTIVE } from "../../constants";
 import { parseImageUrl } from "../../helpers";
 
 /**
@@ -32,7 +33,9 @@ const useStyles = makeStyles()({
     pointerEvents: 'none'
   },
   image: {
-    width: '100%'
+    width: '100%',
+    height: 'auto',
+    display: 'block'
   },
   container: {
     width: '100%',
@@ -134,8 +137,13 @@ const ResponsiveWidgetImage = ({
     children: /*#__PURE__*/_jsx("img", {
       src: imgSrc,
       ref: parallax.ref,
-      alt: alt,
-      loading: "lazy",
+      alt: alt
+      // In the CMS page-preview iframe, native lazy loading defers the image load after the admin
+      // re-posts an updated page config and never triggers it again, so widget images stay at
+      // height 0 until a resize forces the browser to re-evaluate. Load eagerly there; keep lazy
+      // loading for the live app.
+      ,
+      loading: IS_PAGE_PREVIEW_ACTIVE ? 'eager' : 'lazy',
       className: cx(classes.preventSave, classes.image, {
         [classes.banner]: isBanner
       }, className),

package/page/components/Widgets/Widgets.js

@@ -4,6 +4,7 @@ import { makeStyles } from '@shopgate/engage/styles';
 import { useRoute, useThemeWidgets } from '@shopgate/engage/core/hooks';
 import { PAGE_PREVIEW_PATTERN } from '@shopgate/engage/page/constants';
 import { ConditionalWrapper } from '@shopgate/engage/components';
+import { isDev } from '@shopgate/engage/core/helpers';
 import WidgetsPreviewProvider from "./WidgetsPreviewProvider";
 import Widget from "./Widget";
 import Overlay from "./Overlay";
@@ -73,7 +74,7 @@ const Widgets = ({
       }),
       ref: widgetsRef,
       children: widgets.map(widget => {
-        const component = widgetComponents[widget.widgetConfigDefinitionCode] || widgetComponents[PLACEHOLDER_COMPONENT];
+        const component = widgetComponents[widget.widgetConfigDefinitionCode] || (isDev ? widgetComponents[PLACEHOLDER_COMPONENT] : null);
         return /*#__PURE__*/_jsx(Widget, {
           definition: widget,
           isPreview: isPreview,

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, RatingStars } 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,7 +38,7 @@ const ItemName = ({
       children: [/*#__PURE__*/_jsx(Portal, {
         name: PRODUCT_ITEM_NAME_BEFORE,
         props: portalProps
-      }), /*#__PURE__*/_jsx(RatingStars, {
+      }), /*#__PURE__*/_jsx(ProductRatingStars, {
         productId: productId
       }), /*#__PURE__*/_jsx(Portal, {
         name: PRODUCT_ITEM_NAME_AFTER,
@@ -47,7 +47,7 @@ const ItemName = ({
     });
   }
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(RatingStars, {
+    children: [/*#__PURE__*/_jsx(ProductRatingStars, {
       productId: productId
     }), /*#__PURE__*/_jsx(ProductName, {
       name: name,

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/{RatingStars/RatingStars.d.ts → ProductRatingStars/ProductRatingStars.d.ts}

@@ -11,4 +11,4 @@ interface RatingProps {
 }
 declare const _default: import("react").MemoExoticComponent<({ productId, size, }: RatingProps) => import("react/jsx-runtime").JSX.Element | null>;
 export default _default;
-//# sourceMappingURL=RatingStars.d.ts.map
+//# 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/{RatingStars/RatingStars.js → ProductRatingStars/ProductRatingStars.js}

@@ -36,7 +36,7 @@ const ProductRatingStars = ({
     return null;
   }
   return /*#__PURE__*/_jsx(RatingStars, {
-    value: rating?.average || 0,
+    value: rating?.average ?? 0,
     display: size
   });
 };

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,7 +24,7 @@ export { default as ProductSlider } from "./ProductSlider";
 export * from "./ProductVariants";
 export { default as QuantityPicker } from "./QuantityPicker";
 export { default as Rating } from "./Rating";
-export { RatingStars } from "./RatingStars";
+export { ProductRatingStars } from "./ProductRatingStars";
 export * from "./RelationsSlider";
 export * from "./Swatch";
 export * from "./Swatches";

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

@@ -1 +0,0 @@
-{"version":3,"file":"RatingStars.d.ts","sourceRoot":"","sources":["../../../../product/components/RatingStars/RatingStars.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/RatingStars/index.d.ts

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

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

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

package/product/components/RatingStars/index.js

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