@shopgate/pwa-common 7.30.0-alpha.8 → 7.30.0-beta.1

package/components/ErrorBoundary/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import connector from "./connector";
@@ -5,27 +6,35 @@ import connector from "./connector";
 /**
  * The App error boundary component.
  */
-class ErrorBoundary extends PureComponent {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      hasError: false
-    };
-  }
+let ErrorBoundary = /*#__PURE__*/function (_PureComponent) {
   /**
-   * @returns {{hasError: boolean}}
+   * Constructor for the ErrorBoundary component.
+   * @param {Object} props - The component props.
    */
-  static getDerivedStateFromError() {
-    return {
-      hasError: true
+  function ErrorBoundary(props) {
+    var _this;
+    _this = _PureComponent.call(this, props) || this;
+    _this.state = {
+      hasError: false
     };
+    return _this;
   }
 
   /**
    * @param {Object} error The error object.
    * @param {Object} errorInfo The error information.
    */
-  componentDidCatch(error, errorInfo) {
+  _inheritsLoose(ErrorBoundary, _PureComponent);
+  /**
+   * @returns {{hasError: boolean}}
+   */
+  ErrorBoundary.getDerivedStateFromError = function getDerivedStateFromError() {
+    return {
+      hasError: true
+    };
+  };
+  var _proto = ErrorBoundary.prototype;
+  _proto.componentDidCatch = function componentDidCatch(error, errorInfo) {
     // eslint-disable-next-line no-param-reassign
     error.stack = errorInfo.componentStack;
     this.props.appError(error);
@@ -33,14 +42,15 @@ class ErrorBoundary extends PureComponent {
 
   /**
    * @returns {JSX}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     if (this.state.hasError) {
       return this.props.fallbackUi;
     }
     return this.props.children;
-  }
-}
+  };
+  return ErrorBoundary;
+}(PureComponent);
 ErrorBoundary.defaultProps = {
   fallbackUi: null
 };

package/components/Grid/components/Item/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { objectWithoutProps } from "../../../../helpers/data";
@@ -6,12 +7,17 @@ import styles from "./style";
 /**
  * The grid item component.
  */
-class GridItem extends Component {
+let GridItem = /*#__PURE__*/function (_Component) {
+  function GridItem() {
+    return _Component.apply(this, arguments) || this;
+  }
+  _inheritsLoose(GridItem, _Component);
+  var _proto = GridItem.prototype;
   /**
    * Composes the props.
    * @returns {Object} The composed props.
    */
-  getProps() {
+  _proto.getProps = function getProps() {
     let {
       className
     } = this.props;
@@ -31,11 +37,12 @@ class GridItem extends Component {
   /**
    * Renders the component.
    * @returns {JSX}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     return /*#__PURE__*/React.createElement(this.props.component, this.getProps());
-  }
-}
+  };
+  return GridItem;
+}(Component);
 GridItem.defaultProps = {
   className: '',
   component: 'li',

package/components/Grid/components/Item/spec.js

@@ -1,20 +1,21 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import GridItem from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<GridItem />', () => {
   it('should render without any further props', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(GridItem, null));
+    const wrapper = shallow(/*#__PURE__*/_jsx(GridItem, {}));
     expect(wrapper).toMatchSnapshot();
   });
   it('should be able to render a custom tag', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(GridItem, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(GridItem, {
       component: "section"
     }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.type()).toEqual('section');
   });
   it('should add custom classes on demand', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(GridItem, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(GridItem, {
       className: "custom-class-name"
     }));
     expect(wrapper).toMatchSnapshot();

package/components/Grid/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { objectWithoutProps } from "../../helpers/data";
@@ -7,12 +8,17 @@ import styles, { wrap } from "./style";
 /**
  * The grid component.
  */
-class Grid extends Component {
+let Grid = /*#__PURE__*/function (_Component) {
+  function Grid() {
+    return _Component.apply(this, arguments) || this;
+  }
+  _inheritsLoose(Grid, _Component);
+  var _proto = Grid.prototype;
   /**
    * Composes the props.
    * @returns {Object} The composed props.
    */
-  getProps() {
+  _proto.getProps = function getProps() {
     let className = `${this.props.className} ${styles} common__grid`;
     if (this.props.wrap) {
       className += ` ${wrap(this.props.wrap)}`;
@@ -27,11 +33,12 @@ class Grid extends Component {
   /**
    * Renders the component.
    * @returns {JSX}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     return /*#__PURE__*/React.createElement(this.props.component, this.getProps());
-  }
-}
+  };
+  return Grid;
+}(Component);
 Grid.Item = GridItem;
 Grid.defaultProps = {
   className: '',

package/components/Grid/spec.js

@@ -1,20 +1,21 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Grid from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Grid />', () => {
   it('should render without any further props', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Grid, null));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Grid, {}));
     expect(wrapper).toMatchSnapshot();
   });
   it('should be able to render a custom tag', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Grid, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Grid, {
       component: "article"
     }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.type()).toEqual('article');
   });
   it('should add custom classes on demand', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Grid, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Grid, {
       className: "custom-class-name"
     }));
     expect(wrapper).toMatchSnapshot();

package/components/HtmlSanitizer/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -9,47 +10,41 @@ import connect from "./connector";
 /**
  * HtmlSanitizer component.
  */
-class HtmlSanitizer extends Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let HtmlSanitizer = /*#__PURE__*/function (_Component) {
   /**
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
+  function HtmlSanitizer(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * If the user tapped a link element, prevent the default behavior.
      * @param {Object} event The touchstart event.
      */
-    this.handleTap = event => {
+    _this.handleClick = event => {
       const linkTag = event.target.closest('a');
-      if (linkTag) {
-        const {
-          attributes: {
-            href: {
-              value: href = ''
-            } = {},
-            target: {
-              value: target = ''
-            } = {}
-          } = {}
-        } = linkTag;
-        if (href) {
-          event.preventDefault();
-          if (this.props.settings.handleClick) {
-            this.props.settings.handleClick(href, target);
-          } else {
-            this.props.navigate(href, target);
-          }
-        }
+      if (!linkTag) return;
+      const href = linkTag.getAttribute('href');
+      const target = linkTag.getAttribute('target') || '';
+      if (!href) return;
+      event.preventDefault();
+      if (_this.props.settings.handleClick) {
+        _this.props.settings.handleClick(href, target);
+      } else {
+        _this.props.navigate(href, target);
       }
     };
-    this.htmlContainer = /*#__PURE__*/React.createRef();
+    _this.htmlContainer = /*#__PURE__*/React.createRef();
+    return _this;
   }
 
   /**
    * Registers the event handler for when the user taps inside the html content.
    */
-  componentDidMount() {
-    this.htmlContainer.current.addEventListener('click', this.handleTap, true);
+  _inheritsLoose(HtmlSanitizer, _Component);
+  var _proto = HtmlSanitizer.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     embeddedMedia.add(this.htmlContainer.current);
   }
 
@@ -57,30 +52,29 @@ class HtmlSanitizer extends Component {
    * Only update if the HTML changed.
    * @param {Object} nextProps The next props for the component.
    * @return {boolean}
-   */
-  shouldComponentUpdate(nextProps) {
+   */;
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
     return nextProps.children !== this.props.children || nextProps.comfortCookiesAccepted !== this.props.comfortCookiesAccepted || nextProps.statisticsCookiesAccepted !== this.props.statisticsCookiesAccepted;
   }
 
   /**
    * Updates embedded media within the html container.
-   */
-  componentDidUpdate() {
+   */;
+  _proto.componentDidUpdate = function componentDidUpdate() {
     embeddedMedia.add(this.htmlContainer.current);
   }
 
   /**
    * Removes the event handler.
-   */
-  componentWillUnmount() {
-    this.htmlContainer.current.removeEventListener('click', this.handleTap, true);
+   */;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     embeddedMedia.remove(this.htmlContainer.current);
-  }
+  };
   /**
    * Renders the component.
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const cookieConsentSettings = {
       comfortCookiesAccepted: this.props.comfortCookiesAccepted,
       statisticsCookiesAccepted: this.props.statisticsCookiesAccepted
@@ -91,16 +85,19 @@ class HtmlSanitizer extends Component {
     const {
       wrapper: Wrapper
     } = this.props;
-    return /*#__PURE__*/React.createElement(Wrapper, {
-      cookieConsentSettings: cookieConsentSettings
-    }, /*#__PURE__*/React.createElement("div", {
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML: innerHTML,
-      ref: this.htmlContainer,
-      className: classNames(this.props.className, 'common__html-sanitizer')
-    }));
-  }
-}
+    return /*#__PURE__*/_jsx(Wrapper, {
+      cookieConsentSettings: cookieConsentSettings,
+      children: /*#__PURE__*/_jsx("div", {
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: innerHTML,
+        ref: this.htmlContainer,
+        className: classNames(this.props.className, 'common__html-sanitizer'),
+        onClickCapture: this.handleClick
+      })
+    });
+  };
+  return HtmlSanitizer;
+}(Component);
 HtmlSanitizer.defaultProps = {
   children: '',
   className: '',

package/components/HtmlSanitizer/spec.js

@@ -1,9 +1,10 @@
-import _extends from "@babel/runtime/helpers/extends";
+/** @jest-environment jsdom */
+
 import React from 'react';
 import { mount } from 'enzyme';
-import { JSDOM } from 'jsdom';
 import { embeddedMedia } from '@shopgate/pwa-common/collections';
 import HtmlSanitizer from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock("../EmbeddedMedia", () => ({
   children
 }) => children);
@@ -12,11 +13,13 @@ jest.mock("./connector", () => Cmp => Cmp);
 /**
  * @param {string} html HTML markup.
  * @param {Object} props Component props.
- * @returns {JSX}
+ * @returns {JSX.Element}
  */
-const createWrapper = (html, props = {}) => mount(/*#__PURE__*/React.createElement(HtmlSanitizer, _extends({
-  navigate: () => {}
-}, props), html));
+const createWrapper = (html, props = {}) => mount(/*#__PURE__*/_jsx(HtmlSanitizer, {
+  navigate: () => {},
+  ...props,
+  children: html
+}));
 describe('<HtmlSanitizer />', () => {
   let embeddedMediaAddSpy;
   let embeddedMediaRemoveSpy;
@@ -125,47 +128,54 @@ describe('<HtmlSanitizer />', () => {
       mockedHandleClick.mockClear();
     });
     it('follows a link from a plain <a>', () => {
-      const doc = new JSDOM('<!doctype html><html><body><div>/<div></body></html>').window.document;
+      // Create a real container element in the current document
+      const attachNode = document.createElement('div');
+      document.body.appendChild(attachNode);
       const html = '&lt;a id=&quot;link&quot; href=&quot;#follow-me-and-everything-is-alright&quot;&gt;Plain Link&lt;/a&gt;';
-      const wrapper = mount(/*#__PURE__*/React.createElement(HtmlSanitizer, {
+      const wrapper = mount(/*#__PURE__*/_jsx(HtmlSanitizer, {
         decode: true,
         settings: {
           handleClick: mockedHandleClick
         },
-        navigate: () => {}
-      }, html), {
-        attachTo: doc.getElementsByTagName('div')[0]
+        navigate: () => {},
+        children: html
+      }), {
+        attachTo: attachNode
       });
-      const aTag = doc.getElementsByTagName('a')[0];
+      const aTag = attachNode.getElementsByTagName('a')[0];
       aTag.closest = () => aTag;
       const event = {
         target: aTag,
         preventDefault: () => {}
       };
-      wrapper.instance().handleTap(event);
+      wrapper.instance().handleClick(event);
       expect(mockedHandleClick).toHaveBeenCalledTimes(1);
       expect(mockedHandleClick).toHaveBeenCalledWith('#follow-me-and-everything-is-alright', '');
+      wrapper.unmount();
+      attachNode.remove();
     });
     it('follows a link from a <a> with other HTML inside', () => {
-      const doc = new JSDOM('<!doctype html><html><body><div>/<div></body></html>').window.document;
+      const attachNode = document.createElement('div');
+      document.body.appendChild(attachNode);
       const html = '&lt;a id=&quot;link&quot; target=&quot;_blank&quot; href=&quot;#I-ll-be-the-one-to-tuck-you-in-at-night&quot;&gt;&lt;span&gt;Span Link&lt;/span&gt;&lt;/a&gt;';
-      const wrapper = mount(/*#__PURE__*/React.createElement(HtmlSanitizer, {
+      const wrapper = mount(/*#__PURE__*/_jsx(HtmlSanitizer, {
         decode: true,
         settings: {
           handleClick: mockedHandleClick
         },
-        navigate: () => {}
-      }, html), {
-        attachTo: doc.getElementsByTagName('div')[0]
+        navigate: () => {},
+        children: html
+      }), {
+        attachTo: attachNode
       });
-      const aTag = doc.getElementsByTagName('a')[0];
-      const spanTag = doc.getElementsByTagName('span')[0];
+      const aTag = attachNode.getElementsByTagName('a')[0];
+      const spanTag = attachNode.getElementsByTagName('span')[0];
       spanTag.closest = () => aTag;
       const event = {
         target: spanTag,
         preventDefault: () => {}
       };
-      wrapper.instance().handleTap(event);
+      wrapper.instance().handleClick(event);
       expect(mockedHandleClick).toHaveBeenCalledTimes(1);
       expect(mockedHandleClick).toHaveBeenCalledWith('#I-ll-be-the-one-to-tuck-you-in-at-night', '_blank');
     });

package/components/I18n/components/FormatDate/index.js

@@ -7,13 +7,16 @@ import { i18n } from '@shopgate/engage/core/helpers/i18n';
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 const FormatDate = ({
   timestamp,
   format
-}) => /*#__PURE__*/React.createElement(Fragment, null, FormatDate.format({
-  timestamp,
-  format
-}));
+}) => /*#__PURE__*/_jsx(_Fragment, {
+  children: FormatDate.format({
+    timestamp,
+    format
+  })
+});
 FormatDate.format = ({
   timestamp,
   format
@@ -23,6 +26,10 @@ FormatDate.format = ({
   }
   return i18n.date(timestamp, format);
 };
+FormatDate.propTypes = {
+  timestamp: PropTypes.number.isRequired,
+  format: PropTypes.string
+};
 FormatDate.defaultProps = {
   format: 'medium'
 };

package/components/I18n/components/FormatDate/spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { i18n } from '@shopgate/engage/core';
 import I18n from "../../index";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 jest.unmock('@shopgate/engage/core/helpers/i18n');
 describe('<FormatDate />', () => {
   const locales = {
@@ -18,20 +19,27 @@ describe('<FormatDate />', () => {
   describe('Given the component was mounted to the DOM', () => {
     let renderedElement;
     it('should match snapshot', () => {
-      renderedElement = mount(/*#__PURE__*/React.createElement(I18n.Provider, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
-        className: "only-date"
-      }, /*#__PURE__*/React.createElement(I18n.Date, {
-        timestamp: timestamp,
-        format: format
-      })), /*#__PURE__*/React.createElement("span", {
-        className: "text-with-date"
-      }, /*#__PURE__*/React.createElement(I18n.Text, {
-        string: "greeting"
-      }, /*#__PURE__*/React.createElement(I18n.Date, {
-        forKey: "date",
-        timestamp: timestamp,
-        format: format
-      }))))));
+      renderedElement = mount(/*#__PURE__*/_jsx(I18n.Provider, {
+        children: /*#__PURE__*/_jsxs("div", {
+          children: [/*#__PURE__*/_jsx("span", {
+            className: "only-date",
+            children: /*#__PURE__*/_jsx(I18n.Date, {
+              timestamp: timestamp,
+              format: format
+            })
+          }), /*#__PURE__*/_jsx("span", {
+            className: "text-with-date",
+            children: /*#__PURE__*/_jsx(I18n.Text, {
+              string: "greeting",
+              children: /*#__PURE__*/_jsx(I18n.Date, {
+                forKey: "date",
+                timestamp: timestamp,
+                format: format
+              })
+            })
+          })]
+        })
+      }));
       expect(renderedElement).toMatchSnapshot();
     });
     it('should render formatted date', () => {

package/components/I18n/components/FormatNumber/index.js

@@ -6,6 +6,7 @@ import { i18n } from '@shopgate/engage/core/helpers/i18n';
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const FormatNumber = ({
   className,
   number,
@@ -17,12 +18,13 @@ const FormatNumber = ({
       fractions
     });
   }
-  return /*#__PURE__*/React.createElement("span", {
-    className: className
-  }, FormatNumber.format({
-    number,
-    fractions
-  }));
+  return /*#__PURE__*/_jsx("span", {
+    className: className,
+    children: FormatNumber.format({
+      number,
+      fractions
+    })
+  });
 };
 FormatNumber.format = props => {
   if (!i18n.ready) {

package/components/I18n/components/FormatNumber/spec.js

@@ -3,11 +3,12 @@ import { mount } from 'enzyme';
 import { i18n } from '@shopgate/engage/core';
 import I18n from "../../index";
 import FormatNumber from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.unmock('@shopgate/engage/core/helpers/i18n');
 describe('<FormatNumber>', () => {
   describe('i18n not ready', () => {
     it('should return same number and className when i18n is not ready', () => {
-      const component = mount(/*#__PURE__*/React.createElement(FormatNumber, {
+      const component = mount(/*#__PURE__*/_jsx(FormatNumber, {
         number: 1,
         fractions: 2,
         className: "some-class"
@@ -30,10 +31,14 @@ describe('<FormatNumber>', () => {
      * @param {number} fractions Decimal points.
      * @returns {Object}
      */
-    const makeComponent = (number, fractions) => mount(/*#__PURE__*/React.createElement(I18n.Provider, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FormatNumber, {
-      number: number,
-      fractions: fractions
-    }))));
+    const makeComponent = (number, fractions) => mount(/*#__PURE__*/_jsx(I18n.Provider, {
+      children: /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx(FormatNumber, {
+          number: number,
+          fractions: fractions
+        })
+      })
+    }));
     pairs.forEach(([input, expexted, fractions]) => {
       it(`should format ${input} into ${expexted}`, () => {
         const component = makeComponent(input, fractions);

package/components/I18n/components/FormatPrice/index.js

@@ -6,6 +6,7 @@ import { i18n } from '@shopgate/engage/core/helpers/i18n';
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const FormatPrice = props => {
   const {
     className,
@@ -14,9 +15,10 @@ const FormatPrice = props => {
   if (!className) {
     return FormatPrice.format(formatProps);
   }
-  return /*#__PURE__*/React.createElement("span", {
-    className: className
-  }, FormatPrice.format(formatProps));
+  return /*#__PURE__*/_jsx("span", {
+    className: className,
+    children: FormatPrice.format(formatProps)
+  });
 };
 FormatPrice.format = ({
   price,