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

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();
     });

package/components/I18n/components/Placeholder/index.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
@@ -7,6 +7,13 @@ import PropTypes from 'prop-types';
  * @param {Object} context The component context.
  * @returns {JSX}
  */
-const Placeholder = props => /*#__PURE__*/React.createElement(Fragment, null, props.children);
-Placeholder.format = props => /*#__PURE__*/React.createElement(Placeholder, props);
+import { jsx as _jsx } from "react/jsx-runtime";
+const Placeholder = props => props.children;
+Placeholder.format = props => /*#__PURE__*/_jsx(Placeholder, {
+  ...props
+});
+Placeholder.propTypes = {
+  children: PropTypes.node.isRequired,
+  forKey: PropTypes.string.isRequired
+};
 export default Placeholder;

package/components/I18n/components/Placeholder/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('<Placeholder />', () => {
   const locales = {
@@ -15,11 +16,17 @@ describe('<Placeholder />', () => {
   describe('Given the component was mounted to the DOM', () => {
     let renderedElement;
     it('should render', () => {
-      renderedElement = mount(/*#__PURE__*/React.createElement(I18n.Provider, null, /*#__PURE__*/React.createElement(I18n.Text, {
-        string: "greeting"
-      }, /*#__PURE__*/React.createElement(I18n.Placeholder, {
-        forKey: "world"
-      }, /*#__PURE__*/React.createElement("strong", null, "WORLD")), "/")));
+      renderedElement = mount(/*#__PURE__*/_jsx(I18n.Provider, {
+        children: /*#__PURE__*/_jsxs(I18n.Text, {
+          string: "greeting",
+          children: [/*#__PURE__*/_jsx(I18n.Placeholder, {
+            forKey: "world",
+            children: /*#__PURE__*/_jsx("strong", {
+              children: "WORLD"
+            })
+          }), "/"]
+        })
+      }));
       expect(renderedElement).toMatchSnapshot();
     });
     it('should render with a placeholder text', () => {

package/components/I18n/components/Translate/index.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.array.reduce.js";
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -24,6 +23,7 @@ import { i18n } from '@shopgate/engage/core/helpers/i18n';
  * also handle human readable texts that contain text replacement placeholders.
  * @returns {JSX.Element} The translated string as JSX component.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Translate = ({
   string,
   children,
@@ -38,10 +38,12 @@ const Translate = ({
     return string;
   }
   if (!i18n.ready) {
-    return /*#__PURE__*/React.createElement("span", _extends({
+    return /*#__PURE__*/_jsx("span", {
       className: className,
-      role: role
-    }, rest), string);
+      role: role,
+      ...rest,
+      children: string
+    });
   }
 
   // When the input string is malformed, return the original string rather than raising an error.
@@ -64,14 +66,16 @@ const Translate = ({
 
     // Create a new array containing the separated chunks of the text and merge the substitutions.
     // The result can be an array with multiple strings and will be joined together.
-    formatted = stringParts.reduce((result, text, index) => [...result, text, childrenArray[index]], []);
+    formatted = stringParts.reduce((result, text, index) => [].concat(result, [text, childrenArray[index]]), []);
   } catch (e) {
     logger.error('i18n error for string %s', string, e);
   }
-  return /*#__PURE__*/React.createElement("span", _extends({
+  return /*#__PURE__*/_jsx("span", {
     className: className,
-    role: role
-  }, rest), !transform ? formatted : transform(renderToString(formatted)));
+    role: role,
+    ...rest,
+    children: !transform ? formatted : transform(renderToString(formatted))
+  });
 };
 Translate.defaultProps = {
   children: null,

package/components/I18n/components/Translate/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 } from "react/jsx-runtime";
 jest.unmock('@shopgate/engage/core/helpers/i18n');
 describe('<Translate />', () => {
   const locales = {
@@ -14,12 +15,14 @@ describe('<Translate />', () => {
   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(I18n.Text, {
-        string: "greeting",
-        params: {
-          name: 'Test'
-        }
-      })));
+      renderedElement = mount(/*#__PURE__*/_jsx(I18n.Provider, {
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "greeting",
+          params: {
+            name: 'Test'
+          }
+        })
+      }));
       expect(renderedElement).toMatchSnapshot();
     });
     it('should render translated text', () => {

package/components/Icon/index.js

@@ -11,7 +11,8 @@ import styles from "./style";
  * @param {number} [props.size=24] The icon size
  * @returns {JSX.Element}
  */
-const Icon = props => /*#__PURE__*/React.createElement("svg", {
+import { jsx as _jsx } from "react/jsx-runtime";
+const Icon = props => /*#__PURE__*/_jsx("svg", {
   className: `${styles} ${props.className} common__icon`,
   viewBox: props.viewBox,
   xmlns: "http://www.w3.org/2000/svg",

package/components/Image/Image.js

@@ -6,6 +6,7 @@ import { themeConfig } from '@shopgate/engage';
 import { getFullImageSource } from '@shopgate/engage/core/helpers';
 import styles from "./style";
 import ImageInner from "./ImageInner";
+import { jsx as _jsx } from "react/jsx-runtime";
 const {
   colors: themeColors
 } = themeConfig;
@@ -134,7 +135,7 @@ const Image = ({
   }, [ratio, resolutions]);
   if (unwrapped) {
     if (!(src && !parentRendersPlaceholder)) return null;
-    return /*#__PURE__*/React.createElement(ImageInner, {
+    return /*#__PURE__*/_jsx(ImageInner, {
       ref: imgRef,
       src: sources.main,
       className: classNames(classNameImg),
@@ -154,26 +155,27 @@ const Image = ({
     });
   }
   const containerStyle = styles.container(backgroundColor, paddingHackRatio);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(containerStyle, className, 'common__image__container')
-  }, src && !parentRendersPlaceholder && /*#__PURE__*/React.createElement(ImageInner, {
-    ref: imgRef,
-    src: sources.main,
-    className: classNames(classNameImg),
-    style: {
-      aspectRatio,
-      ...(isInView && sources.preview && {
-        backgroundImage: `url(${sources.preview})`,
-        backgroundSize: 'contain',
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center'
-      })
-    },
-    alt: alt,
-    lazy: lazy,
-    onLoad: handleOnLoad,
-    onError: handleOnError
-  }));
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames(containerStyle, className, 'common__image__container'),
+    children: src && !parentRendersPlaceholder && /*#__PURE__*/_jsx(ImageInner, {
+      ref: imgRef,
+      src: sources.main,
+      className: classNames(classNameImg),
+      style: {
+        aspectRatio,
+        ...(isInView && sources.preview && {
+          backgroundImage: `url(${sources.preview})`,
+          backgroundSize: 'contain',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center'
+        })
+      },
+      alt: alt,
+      lazy: lazy,
+      onLoad: handleOnLoad,
+      onError: handleOnError
+    })
+  });
 };
 const defaultResolutions = [{
   width: 440,

package/components/Image/ImageInner.js

@@ -10,6 +10,7 @@ import styles from "./style";
  * @param {Function} ref The component reference
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const ImageInner = /*#__PURE__*/forwardRef(({
   src,
   className,
@@ -18,7 +19,7 @@ const ImageInner = /*#__PURE__*/forwardRef(({
   onLoad,
   onError,
   style
-}, ref) => /*#__PURE__*/React.createElement("img", {
+}, ref) => /*#__PURE__*/_jsx("img", {
   ref: ref,
   loading: lazy ? 'lazy' : 'eager',
   src: src,