@shopgate/pwa-common 7.30.0-alpha.9 → 7.30.0-beta.2

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,10 +1,10 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jest-environment jsdom */
 
 import React from 'react';
 import { mount } from 'enzyme';
 import { embeddedMedia } from '@shopgate/pwa-common/collections';
 import HtmlSanitizer from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock("../EmbeddedMedia", () => ({
   children
 }) => children);
@@ -15,9 +15,11 @@ jest.mock("./connector", () => Cmp => Cmp);
  * @param {Object} props Component props.
  * @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;
@@ -130,13 +132,14 @@ describe('<HtmlSanitizer />', () => {
       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), {
+        navigate: () => {},
+        children: html
+      }), {
         attachTo: attachNode
       });
       const aTag = attachNode.getElementsByTagName('a')[0];
@@ -145,7 +148,7 @@ describe('<HtmlSanitizer />', () => {
         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();
@@ -155,13 +158,14 @@ describe('<HtmlSanitizer />', () => {
       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), {
+        navigate: () => {},
+        children: html
+      }), {
         attachTo: attachNode
       });
       const aTag = attachNode.getElementsByTagName('a')[0];
@@ -171,7 +175,7 @@ describe('<HtmlSanitizer />', () => {
         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,

package/components/I18n/components/FormatPrice/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('<FormatPrice />', () => {
   const locales = {
@@ -18,20 +19,27 @@ describe('<FormatPrice />', () => {
   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-price"
-      }, /*#__PURE__*/React.createElement(I18n.Price, {
-        price: price,
-        currency: currency
-      })), /*#__PURE__*/React.createElement("span", {
-        className: "text-with-price"
-      }, /*#__PURE__*/React.createElement(I18n.Text, {
-        string: "greeting"
-      }, /*#__PURE__*/React.createElement(I18n.Price, {
-        forKey: "price",
-        price: price,
-        currency: currency
-      }))))));
+      renderedElement = mount(/*#__PURE__*/_jsx(I18n.Provider, {
+        children: /*#__PURE__*/_jsxs("div", {
+          children: [/*#__PURE__*/_jsx("span", {
+            className: "only-price",
+            children: /*#__PURE__*/_jsx(I18n.Price, {
+              price: price,
+              currency: currency
+            })
+          }), /*#__PURE__*/_jsx("span", {
+            className: "text-with-price",
+            children: /*#__PURE__*/_jsx(I18n.Text, {
+              string: "greeting",
+              children: /*#__PURE__*/_jsx(I18n.Price, {
+                forKey: "price",
+                price: price,
+                currency: currency
+              })
+            })
+          })]
+        })
+      }));
       expect(renderedElement).toMatchSnapshot();
     });
     it('should render formatted price', () => {

package/components/I18n/components/FormatTime/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 FormatTime = ({
   timestamp,
   format
-}) => /*#__PURE__*/React.createElement(Fragment, null, FormatTime.format({
-  timestamp,
-  format
-}));
+}) => /*#__PURE__*/_jsx(_Fragment, {
+  children: FormatTime.format({
+    timestamp,
+    format
+  })
+});
 FormatTime.format = ({
   timestamp,
   format
@@ -23,6 +26,10 @@ FormatTime.format = ({
   }
   return i18n.time(timestamp, format);
 };
+FormatTime.propTypes = {
+  timestamp: PropTypes.number.isRequired,
+  format: PropTypes.string
+};
 FormatTime.defaultProps = {
   format: 'medium'
 };

package/components/I18n/components/FormatTime/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('<FormatTime />', () => {
   const locales = {
@@ -17,20 +18,27 @@ describe('<FormatTime />', () => {
   });
   describe('Given the component was mounted to the DOM', () => {
     // TODO: Handle snapshot test.
-    const renderedElement = mount(/*#__PURE__*/React.createElement(I18n.Provider, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
-      className: "only-time"
-    }, /*#__PURE__*/React.createElement(I18n.Time, {
-      timestamp: timestamp,
-      format: format
-    })), /*#__PURE__*/React.createElement("span", {
-      className: "text-with-time"
-    }, /*#__PURE__*/React.createElement(I18n.Text, {
-      string: "greeting"
-    }, /*#__PURE__*/React.createElement(I18n.Time, {
-      forKey: "time",
-      timestamp: timestamp,
-      format: format
-    }))))));
+    const renderedElement = mount(/*#__PURE__*/_jsx(I18n.Provider, {
+      children: /*#__PURE__*/_jsxs("div", {
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "only-time",
+          children: /*#__PURE__*/_jsx(I18n.Time, {
+            timestamp: timestamp,
+            format: format
+          })
+        }), /*#__PURE__*/_jsx("span", {
+          className: "text-with-time",
+          children: /*#__PURE__*/_jsx(I18n.Text, {
+            string: "greeting",
+            children: /*#__PURE__*/_jsx(I18n.Time, {
+              forKey: "time",
+              timestamp: timestamp,
+              format: format
+            })
+          })
+        })]
+      })
+    }));
     it('should render formatted time', () => {
       const text = renderedElement.find('.only-time').text();
       expect(text).toBe(formattedTime);

package/components/I18n/components/I18nProvider/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { i18n } from '@shopgate/engage/core/helpers/i18n';
@@ -7,53 +8,59 @@ import { logger } from '@shopgate/pwa-core/helpers';
  * A React component that provides child components with i18n features.
  * @returns {React.Component}
  */
-export default class I18nProvider extends Component {
+let I18nProvider = /*#__PURE__*/function (_Component) {
   /**
    * @inheritDoc
    */
-  constructor(props) {
-    super(props);
+  function I18nProvider(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     // eslint-disable-next-line react/prop-types
     /**
      * Gets a shortcut to i18n functionality with preset language.
      * @returns {Object}
      */
-    this.getI18nInstance = () => ({
+    _this.getI18nInstance = () => ({
       __: i18n.text,
       _p: i18n.price,
       _d: i18n.date,
       _t: i18n.time,
       _n: i18n.number
     });
-    if (this.props.lang || this.props.locales) {
+    if (_this.props.lang || _this.props.locales) {
       logger.warn(`===== I18nProvider deprecated =====\nI18nProvider and it's related components (@shopgate/pwa-common/component/I18n) or context types are deprecated and will be removed in @shopgate/engage v7.0.0.\nPlease use { i18n } from @shopgate/engage/core.\n===================================
       `);
     }
+    return _this;
   }
 
   /**
    * Provides context for child components.
    * @returns {Object}
    */
-  getChildContext() {
+  _inheritsLoose(I18nProvider, _Component);
+  var _proto = I18nProvider.prototype;
+  _proto.getChildContext = function getChildContext() {
     return {
       i18n: this.getI18nInstance
     };
-  }
+  };
   /**
    * Renders the component.
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       children
     } = this.props;
     return children ? /*#__PURE__*/React.cloneElement(children) : null;
-  }
-}
+  };
+  return I18nProvider;
+}(Component);
 I18nProvider.childContextTypes = {
   i18n: PropTypes.func.isRequired
 };
 I18nProvider.defaultProps = {
   children: null
-};
+};
+export { I18nProvider as default };

package/components/I18n/components/I18nProvider/spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { i18n as i18nHelper } from '@shopgate/engage/core';
 import I18nProvider from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.unmock('@shopgate/engage/core/helpers/i18n');
 describe('<I18nProvider />', () => {
   const locales = {
@@ -16,7 +17,7 @@ describe('<I18nProvider />', () => {
     let renderedElement;
     let renderedInstance;
     it('should match snapshot', () => {
-      renderedElement = shallow(/*#__PURE__*/React.createElement(I18nProvider, null));
+      renderedElement = shallow(/*#__PURE__*/_jsx(I18nProvider, {}));
       renderedInstance = renderedElement.instance();
       expect(renderedElement).toMatchSnapshot();
     });