@shopgate/engage 7.30.0-alpha.8 → 7.30.0-beta.1

package/reviews/components/Reviews/components/List/components/Text/index.js

@@ -7,15 +7,17 @@ import styles from "./style";
  * @param {string} review The review text
  * @returns {JSX|null}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Text = ({
   review
 }) => {
   if (!review) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles
-  }, `"${review}"`);
+  return /*#__PURE__*/_jsx("div", {
+    className: styles,
+    children: `"${review}"`
+  });
 };
 Text.defaultProps = {
   review: null

package/reviews/components/Reviews/components/List/components/Title/index.js

@@ -7,11 +7,13 @@ import styles from "./style";
  * @param {string} title The title of the review.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Title = ({
   title
-}) => /*#__PURE__*/React.createElement("div", {
-  className: styles
-}, title);
+}) => /*#__PURE__*/_jsx("div", {
+  className: styles,
+  children: title
+});
 Title.defaultProps = {
   title: null
 };

package/reviews/components/Reviews/components/List/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { SurroundPortals } from '@shopgate/engage/components';
@@ -11,39 +12,48 @@ import styles from "./style";
 /**
  * Review List Component.
  */
-class List extends PureComponent {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let List = /*#__PURE__*/function (_PureComponent) {
+  function List() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+  _inheritsLoose(List, _PureComponent);
+  var _proto = List.prototype;
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       reviews
     } = this.props;
     if (!reviews || reviews.length === 0) {
       return null;
     }
-    return /*#__PURE__*/React.createElement("ul", {
-      className: "engage__reviews__list"
-    }, reviews.map(review => /*#__PURE__*/React.createElement("li", {
-      key: review.id,
-      className: styles,
-      "data-test-id": `reviewTitle: ${review.title}`
-    }, /*#__PURE__*/React.createElement(SurroundPortals, {
-      portalName: PRODUCT_REVIEWS_ENTRY,
-      portalProps: {
-        review
-      }
-    }, /*#__PURE__*/React.createElement(Title, {
-      title: review.title
-    }), /*#__PURE__*/React.createElement(Rating, {
-      rate: review.rate
-    }), /*#__PURE__*/React.createElement(Text, {
-      review: review.review
-    }), /*#__PURE__*/React.createElement(Info, {
-      review: review
-    })))));
-  }
-}
+    return /*#__PURE__*/_jsx("ul", {
+      className: "engage__reviews__list",
+      children: reviews.map(review => /*#__PURE__*/_jsx("li", {
+        className: styles,
+        "data-test-id": `reviewTitle: ${review.title}`,
+        children: /*#__PURE__*/_jsxs(SurroundPortals, {
+          portalName: PRODUCT_REVIEWS_ENTRY,
+          portalProps: {
+            review
+          },
+          children: [/*#__PURE__*/_jsx(Title, {
+            title: review.title
+          }), /*#__PURE__*/_jsx(Rating, {
+            rate: review.rate
+          }), /*#__PURE__*/_jsx(Text, {
+            review: review.review
+          }), /*#__PURE__*/_jsx(Info, {
+            review: review
+          })]
+        })
+      }, review.id))
+    });
+  };
+  return List;
+}(PureComponent);
 List.defaultProps = {
   reviews: null
 };

package/reviews/components/Reviews/components/List/spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOptions';
 import List from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/components');
 describe('<List />', () => {
   let list = null;
@@ -35,7 +36,7 @@ describe('<List />', () => {
     review: ''
   }];
   beforeEach(() => {
-    list = mount(/*#__PURE__*/React.createElement(List, {
+    list = mount(/*#__PURE__*/_jsx(List, {
       reviews: []
     }), mockRenderOptions);
   });

package/reviews/components/Reviews/components/RatingCount/index.js

@@ -8,11 +8,12 @@ import { greyStyle, prominentStyle } from "./style";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const RatingCount = props => {
   if (!props.count) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(I18n.Text, {
+  return /*#__PURE__*/_jsx(I18n.Text, {
     string: "reviews.review_count",
     params: props,
     className: classNames({

package/reviews/components/Reviews/components/RatingCount/spec.js

@@ -1,15 +1,16 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import RatingCount from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<RatingCount>', () => {
   it('should render nothing when count is 0', () => {
-    const rating = mount(/*#__PURE__*/React.createElement(RatingCount, {
+    const rating = mount(/*#__PURE__*/_jsx(RatingCount, {
       count: 0
     }));
     expect(rating.find('span').exists()).toBe(false);
   });
   it('should render text when count is more than 0', () => {
-    const rating = mount(/*#__PURE__*/React.createElement(RatingCount, {
+    const rating = mount(/*#__PURE__*/_jsx(RatingCount, {
       count: 1
     }));
     expect(rating.find('span').exists()).toBe(true);

package/reviews/components/Reviews/components/ReviewsInfo/index.js

@@ -3,6 +3,7 @@ import { css } from 'glamor';
 import classNames from 'classnames';
 import appConfig from '@shopgate/pwa-common/helpers/config';
 import { Link } from '@shopgate/engage/components';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   root: css({
     textAlign: 'center',
@@ -34,11 +35,15 @@ const ReviewsInfo = () => {
   if (!text) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.root, 'engage__reviews__review_info_text')
-  }, /*#__PURE__*/React.createElement("div", null, text, linkText && linkUrl && /*#__PURE__*/React.createElement(Link, {
-    href: linkUrl,
-    className: styles.link
-  }, linkText)));
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames(styles.root, 'engage__reviews__review_info_text'),
+    children: /*#__PURE__*/_jsxs("div", {
+      children: [text, linkText && linkUrl && /*#__PURE__*/_jsx(Link, {
+        href: linkUrl,
+        className: styles.link,
+        children: linkText
+      })]
+    })
+  });
 };
 export default ReviewsInfo;

package/reviews/components/Reviews/index.js

@@ -16,27 +16,30 @@ import connect from "./connector";
  * @param {Array} props.reviews Reviews which should be shown in the product page.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Reviews({
   productId,
   productActive,
   reviews
 }) {
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
+  return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PRODUCT_REVIEWS,
     portalProps: {
       productId
-    }
-  }, appConfig.hasReviews && productActive && /*#__PURE__*/React.createElement("div", {
-    className: `${styles.container} engage__reviews__reviews`,
-    "data-test-id": "reviewSection"
-  }, /*#__PURE__*/React.createElement(Header, {
-    productId: productId
-  }), /*#__PURE__*/React.createElement(List, {
-    productId: productId,
-    reviews: reviews
-  }), /*#__PURE__*/React.createElement(AllReviewsLink, {
-    productId: productId
-  }), /*#__PURE__*/React.createElement(ReviewsInfo, null)));
+    },
+    children: appConfig.hasReviews && productActive && /*#__PURE__*/_jsxs("div", {
+      className: `${styles.container} engage__reviews__reviews`,
+      "data-test-id": "reviewSection",
+      children: [/*#__PURE__*/_jsx(Header, {
+        productId: productId
+      }), /*#__PURE__*/_jsx(List, {
+        productId: productId,
+        reviews: reviews
+      }), /*#__PURE__*/_jsx(AllReviewsLink, {
+        productId: productId
+      }), /*#__PURE__*/_jsx(ReviewsInfo, {})]
+    })
+  });
 }
 Reviews.defaultProps = {
   productId: null,

package/reviews/components/Reviews/spec.js

@@ -6,13 +6,14 @@ import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOpti
 import { mockedStateWithAll, mockedStateWithoutReview, mockedStateWithTwoReviews } from '@shopgate/pwa-common-commerce/reviews/mock';
 import appConfig from '@shopgate/pwa-common/helpers/config';
 import Reviews from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 const mockedStore = configureStore();
 
 /**
  * @returns {JSX}
  */
 jest.mock("./components/Header", () => function Header() {
-  return /*#__PURE__*/React.createElement("div", null);
+  return /*#__PURE__*/_jsx("div", {});
 });
 jest.mock('@shopgate/engage/product', () => ({
   PRODUCT_REVIEWS: 'product.reviews',
@@ -32,11 +33,12 @@ Object.defineProperty(appConfig, 'hasReviews', {
  * @param {Object} mockedState Mocked stage.
  * @return {ReactWrapper}
  */
-const createComponent = mockedState => mount(/*#__PURE__*/React.createElement(Provider, {
-  store: mockedStore(mockedState)
-}, /*#__PURE__*/React.createElement(Reviews, {
-  productId: "foo"
-})), mockRenderOptions);
+const createComponent = mockedState => mount(/*#__PURE__*/_jsx(Provider, {
+  store: mockedStore(mockedState),
+  children: /*#__PURE__*/_jsx(Reviews, {
+    productId: "foo"
+  })
+}), mockRenderOptions);
 describe('<Reviews />', () => {
   let component = null;
   it('should render when no reviews and rating given', () => {

package/styles/theme/createTheme/createBreakpoints.js

@@ -40,7 +40,7 @@ const step = 5;
  * Creates a set of media query functions based on the provided breakpoints.
  */
 const createBreakpoints = () => {
-  /** @type {import('./createBreakpoints').Breakpoints['values]} */
+  /** @type {import('./createBreakpoints').Breakpoints['values']} */
   const values = {
     // Extra small – all mobile phones
     xs: 0,

package/styles/theme/hooks/useResponsiveValue.js

@@ -8,7 +8,7 @@ const useResponsiveValue = values => {
   if (!active) return undefined;
 
   // Get the keys of the breakpoints in the theme
-  const breakpoints = [...theme.breakpoints.keys];
+  const breakpoints = [].concat(theme.breakpoints.keys);
   const activeIndex = breakpoints.indexOf(active);
 
   // Walk from the active breakpoint down to smallest

package/styles/theme/providers/ActiveBreakpointProvider.js

@@ -8,6 +8,7 @@ import { useTheme } from '@shopgate/engage/styles';
  */
 
 /** @type {import('react').Context<Breakpoint>} */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const ActiveBreakpointContext = /*#__PURE__*/createContext(undefined);
 
 /**
@@ -21,7 +22,7 @@ const ActiveBreakpointProvider = ({
   const theme = useTheme();
 
   // ['xl', 'lg', ..., 'xs']
-  const breakpoints = [...theme.breakpoints.keys].reverse();
+  const breakpoints = [].concat(theme.breakpoints.keys).reverse();
 
   /**
    * Retrieve the initial breakpoint based on the current window size.
@@ -57,8 +58,9 @@ const ActiveBreakpointProvider = ({
       mql
     }) => mql.removeEventListener('change', update));
   }, [breakpoints, theme]);
-  return /*#__PURE__*/React.createElement(ActiveBreakpointContext.Provider, {
-    value: active
-  }, children);
+  return /*#__PURE__*/_jsx(ActiveBreakpointContext.Provider, {
+    value: active,
+    children: children
+  });
 };
 export default ActiveBreakpointProvider;

package/styles/theme/providers/ThemeProvider.js

@@ -5,6 +5,7 @@ import ActiveBreakpointProvider from "./ActiveBreakpointProvider";
 /** @typedef {import('../index').Theme} Theme */
 
 /** @type {import('react').Context<Theme>} */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const ThemeContext = /*#__PURE__*/createContext();
 
 /**
@@ -17,7 +18,10 @@ export const ThemeContext = /*#__PURE__*/createContext();
 const ThemeProvider = ({
   children,
   theme
-}) => /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-  value: theme
-}, /*#__PURE__*/React.createElement(ActiveBreakpointProvider, null, children));
+}) => /*#__PURE__*/_jsx(ThemeContext.Provider, {
+  value: theme,
+  children: /*#__PURE__*/_jsx(ActiveBreakpointProvider, {
+    children: children
+  })
+});
 export default /*#__PURE__*/memo(ThemeProvider);

package/tracking/components/CookieConsentModal/index.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import throttle from 'lodash/throttle';
 import { Grid, I18n, Button, Modal, Link, ConditionalWrapper } from '@shopgate/engage/components';
@@ -14,6 +14,7 @@ import { svgToDataUrl } from "../../../core";
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CookieConsentModal = ({
   isCookieConsentModalVisible,
   acceptAllCookies,
@@ -44,83 +45,99 @@ const CookieConsentModal = ({
   }, [modalImageSVG, modalImageURL]);
 
   // Button event handlers are throttled to prevent multiple clicks
-  const handleAcceptAllCookies = useCallback(throttle(acceptAllCookies, 1000, {
+  const handleAcceptAllCookies = useMemo(() => throttle(acceptAllCookies, 1000, {
     leading: true,
     trailing: false
-  }), []);
-  const handleAcceptRequiredCookies = useCallback(throttle(acceptRequiredCookies, 1000, {
+  }), [acceptAllCookies]);
+  const handleAcceptRequiredCookies = useMemo(() => throttle(acceptRequiredCookies, 1000, {
     leading: true,
     trailing: false
-  }), []);
-  const handleOpenPrivacySettings = useCallback(throttle(openPrivacySettings, 1000, {
+  }), [acceptRequiredCookies]);
+  const handleOpenPrivacySettings = useMemo(() => throttle(openPrivacySettings, 1000, {
     leading: true,
     trailing: false
-  }), []);
+  }), [openPrivacySettings]);
+  useEffect(() => () => {
+    handleAcceptAllCookies.cancel();
+    handleAcceptRequiredCookies.cancel();
+    handleOpenPrivacySettings.cancel();
+  }, [handleAcceptAllCookies, handleAcceptRequiredCookies, handleOpenPrivacySettings]);
   if (!isCookieConsentModalVisible) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Modal, {
+  return /*#__PURE__*/_jsx(Modal, {
     classes: {
       content: styles.modalContent,
       layout: styles.modalLayout
-    }
-  }, /*#__PURE__*/React.createElement(Grid, {
-    component: "div",
-    className: classNames(styles.container, 'cookie-consent-modal__container'),
-    role: "alertdialog",
-    "aria-modal": true,
-    "aria-labelledby": "cookieConsentDialogTitle",
-    "aria-describedby": "cookieConsentDialogMessage"
-  }, /*#__PURE__*/React.createElement(Grid.Item, {
-    component: "div",
-    className: styles.item
-  }, /*#__PURE__*/React.createElement("img", {
-    src: imageSRC,
-    className: classNames(styles.image, 'cookie-consent-modal__image'),
-    alt: "",
-    "aria-hidden": "true"
-  }), /*#__PURE__*/React.createElement(I18n.Text, {
-    className: classNames(styles.title, 'cookie-consent-modal__title'),
-    string: modalTitle || 'cookieConsentModal.title',
-    id: "cookieConsentDialogTitle"
-  }), /*#__PURE__*/React.createElement(I18n.Text, {
-    string: modalMessage || 'cookieConsentModal.message',
-    className: classNames('cookie-consent-modal__message'),
-    acceptPlainTextWithPlaceholders: true,
-    id: "cookieConsentDialogMessage"
-  }, /*#__PURE__*/React.createElement(I18n.Placeholder, {
-    forKey: "privacyLink"
-  }, /*#__PURE__*/React.createElement(ConditionalWrapper, {
-    condition: !!privacyPolicyLink,
-    wrapper: children => /*#__PURE__*/React.createElement(Link, {
-      href: privacyPolicyLink,
-      tag: "span"
-    }, children)
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "cookieConsentModal.privacyText",
-    className: styles.link
-  })))), /*#__PURE__*/React.createElement(Grid.Item, {
-    component: "div",
-    className: styles.buttonWrapper
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: handleAcceptAllCookies,
-    type: "primary",
-    className: classNames(styles.button, 'cookie-consent-modal__button-accept-all')
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: modalButtonAcceptAll || 'cookieConsentModal.buttonAcceptAll'
-  })), showRequiredCookiesButton ? /*#__PURE__*/React.createElement(Button, {
-    onClick: handleAcceptRequiredCookies,
-    type: "simple",
-    className: classNames(styles.button, 'cookie-consent-modal__button-accept-required')
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: modalButtonOnlyRequired || 'cookieConsentModal.modalButtonOnlyRequired'
-  })) : null, /*#__PURE__*/React.createElement(Button, {
-    onClick: handleOpenPrivacySettings,
-    type: "simple",
-    className: classNames(styles.button, 'cookie-consent-modal__button-open-settings')
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: modalButtonConfigureSettings || 'cookieConsentModal.buttonConfigure'
-  }))))));
+    },
+    children: /*#__PURE__*/_jsx(Grid, {
+      component: "div",
+      className: classNames(styles.container, 'cookie-consent-modal__container'),
+      role: "alertdialog",
+      "aria-modal": true,
+      "aria-labelledby": "cookieConsentDialogTitle",
+      "aria-describedby": "cookieConsentDialogMessage",
+      children: /*#__PURE__*/_jsxs(Grid.Item, {
+        component: "div",
+        className: styles.item,
+        children: [/*#__PURE__*/_jsx("img", {
+          src: imageSRC,
+          className: classNames(styles.image, 'cookie-consent-modal__image'),
+          alt: "",
+          "aria-hidden": "true"
+        }), /*#__PURE__*/_jsx(I18n.Text, {
+          className: classNames(styles.title, 'cookie-consent-modal__title'),
+          string: modalTitle || 'cookieConsentModal.title',
+          id: "cookieConsentDialogTitle"
+        }), /*#__PURE__*/_jsx(I18n.Text, {
+          string: modalMessage || 'cookieConsentModal.message',
+          className: classNames('cookie-consent-modal__message'),
+          acceptPlainTextWithPlaceholders: true,
+          id: "cookieConsentDialogMessage",
+          children: /*#__PURE__*/_jsx(I18n.Placeholder, {
+            forKey: "privacyLink",
+            children: /*#__PURE__*/_jsx(ConditionalWrapper, {
+              condition: !!privacyPolicyLink,
+              wrapper: children => /*#__PURE__*/_jsx(Link, {
+                href: privacyPolicyLink,
+                tag: "span",
+                children: children
+              }),
+              children: /*#__PURE__*/_jsx(I18n.Text, {
+                string: "cookieConsentModal.privacyText",
+                className: styles.link
+              })
+            })
+          })
+        }), /*#__PURE__*/_jsxs(Grid.Item, {
+          component: "div",
+          className: styles.buttonWrapper,
+          children: [/*#__PURE__*/_jsx(Button, {
+            onClick: handleAcceptAllCookies,
+            type: "primary",
+            className: classNames(styles.button, 'cookie-consent-modal__button-accept-all'),
+            children: /*#__PURE__*/_jsx(I18n.Text, {
+              string: modalButtonAcceptAll || 'cookieConsentModal.buttonAcceptAll'
+            })
+          }), showRequiredCookiesButton ? /*#__PURE__*/_jsx(Button, {
+            onClick: handleAcceptRequiredCookies,
+            type: "simple",
+            className: classNames(styles.button, 'cookie-consent-modal__button-accept-required'),
+            children: /*#__PURE__*/_jsx(I18n.Text, {
+              string: modalButtonOnlyRequired || 'cookieConsentModal.modalButtonOnlyRequired'
+            })
+          }) : null, /*#__PURE__*/_jsx(Button, {
+            onClick: handleOpenPrivacySettings,
+            type: "simple",
+            className: classNames(styles.button, 'cookie-consent-modal__button-open-settings'),
+            children: /*#__PURE__*/_jsx(I18n.Text, {
+              string: modalButtonConfigureSettings || 'cookieConsentModal.buttonConfigure'
+            })
+          })]
+        })]
+      })
+    })
+  });
 };
 CookieConsentModal.defaultProps = {
   privacyPolicyLink: null