@shopgate/engage 7.30.0-alpha.9 → 7.30.0-beta.2

package/components/Form/Form.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -5,53 +6,60 @@ import classNames from 'classnames';
 /**
  * Form component that handles keyboard submit, next buttons, ...
  */
-class Form extends PureComponent {
+import { jsx as _jsx } from "react/jsx-runtime";
+let Form = /*#__PURE__*/function (_PureComponent) {
   /**
    * Initializes the form component.
    * @param {Object} props The components props.
    */
-  constructor(props) {
-    super(props);
+  function Form(props) {
+    var _this;
+    _this = _PureComponent.call(this, props) || this;
     /**
      * Handles the form submit.
      * @param {Object} event The event that caused the submit.
      */
-    this.handleSubmit = event => {
+    _this.handleSubmit = event => {
       event.preventDefault();
-      const inputFocused = [...this.formElement.current.querySelectorAll('input')].some(input => document.activeElement === input);
+      const inputFocused = [].concat(_this.formElement.current.querySelectorAll('input')).some(input => document.activeElement === input);
       if (inputFocused) {
         document.activeElement.blur();
       }
-      this.props.onSubmit();
+      _this.props.onSubmit();
     };
     /**
      * Handles form submits by key.
      * @param {Object} event The event that caused the keypress.
      */
-    this.handleKeyPress = event => {
+    _this.handleKeyPress = event => {
       // Enter key and on iOS also the "Done" button.
       if (event.which === 13) {
-        this.handleSubmit(event);
+        _this.handleSubmit(event);
       }
     };
-    this.formElement = /*#__PURE__*/React.createRef();
+    _this.formElement = /*#__PURE__*/React.createRef();
+    return _this;
   }
+  _inheritsLoose(Form, _PureComponent);
+  var _proto = Form.prototype;
   /**
    * Renders the component.
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-    return /*#__PURE__*/React.createElement("form", {
+    return /*#__PURE__*/_jsx("form", {
       action: "#",
       className: classNames(this.props.className, 'form', 'engage__form'),
       onSubmit: this.handleSubmit,
       onKeyPress: this.handleKeyPress,
-      ref: this.formElement
-    }, this.props.children);
+      ref: this.formElement,
+      children: this.props.children
+    });
     /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
-  }
-}
+  };
+  return Form;
+}(PureComponent);
 Form.defaultProps = {
   className: null,
   onSubmit: () => {}

package/components/IntersectionVisibility/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 var _IntersectionVisibility;
 import { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -12,10 +13,11 @@ import 'intersection-observer';
         )}
  *     </IntersectionVisibility>
  */
-class IntersectionVisibility extends Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
+let IntersectionVisibility = /*#__PURE__*/function (_Component) {
+  function IntersectionVisibility(...args) {
+    var _this;
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+    _this.state = {
       visible: true,
       ratio: 1,
       entries: null
@@ -23,33 +25,36 @@ class IntersectionVisibility extends Component {
     /**
      * @param {Object} ref ref
      */
-    this.setRef = ref => {
+    _this.setRef = ref => {
       if (!ref) {
         return;
       }
-      this.node = ref;
-      if (this.io) {
-        this.io.observe(this.node);
+      _this.node = ref;
+      if (_this.io) {
+        _this.io.observe(_this.node);
       }
     };
     /**
      * @param {IntersectionObserverEntry[]} entries first entry
      */
-    this.handleIntersectionEvent = entries => {
+    _this.handleIntersectionEvent = entries => {
       const [{
         intersectionRatio
       }] = entries;
-      this.setState({
+      _this.setState({
         visible: intersectionRatio > 0,
         ratio: intersectionRatio,
         entries
       });
     };
+    return _this;
   }
+  _inheritsLoose(IntersectionVisibility, _Component);
+  var _proto = IntersectionVisibility.prototype;
   /**
    * Start the observer when the component is mounted
    */
-  componentDidMount() {
+  _proto.componentDidMount = function componentDidMount() {
     this.io = new IntersectionObserver(this.handleIntersectionEvent, {
       threshold: this.props.thresholds
     });
@@ -60,22 +65,23 @@ class IntersectionVisibility extends Component {
 
   /**
    * @inheritDoc
-   */
-  componentWillUnmount() {
+   */;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     if (this.io) {
       this.io.disconnect();
     }
-  }
+  };
   /**
    * @returns {JSX.Element}
    */
-  render() {
+  _proto.render = function render() {
     return this.props.children({
       ...this.state,
       setRef: this.setRef
     });
-  }
-}
+  };
+  return IntersectionVisibility;
+}(Component);
 _IntersectionVisibility = IntersectionVisibility;
 /**
  * Calculate threshold by number of steps

package/components/Logo/index.js

@@ -10,6 +10,7 @@ import connect from "./connector";
  * The Logo component.
  * @return {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Logo = ({
   className,
   onClick,
@@ -18,14 +19,15 @@ const Logo = ({
   if (!showLogo) {
     return null;
   }
-  return /*#__PURE__*/ /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */React.createElement("div", {
+  return /*#__PURE__*/ /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */_jsx("div", {
     onClick: onClick,
-    className: classNames(styles.container, className, 'engage__logo')
-  }, /*#__PURE__*/React.createElement("img", {
-    className: styles.image,
-    src: appConfig.logo || appConfig.logoFallback,
-    alt: appConfig.shopName
-  }))
+    className: classNames(styles.container, className, 'engage__logo'),
+    children: /*#__PURE__*/_jsx("img", {
+      className: styles.image,
+      src: appConfig.logo || appConfig.logoFallback,
+      alt: appConfig.shopName
+    })
+  })
   /* eslint-enable jsx-a11y/no-static-element-interactions */
   /* eslint-enable jsx-a11y/click-events-have-key-events */;
 };

package/components/Logo/spec.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Logo from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock("./connector", () => Component => Component);
 describe('<Logo />', () => {
   it('should render an image', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Logo, null));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Logo, {}));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('img').exists()).toBe(true);
   });

package/components/Menu/components/Item/index.js

@@ -8,6 +8,7 @@ import { getItemClass } from "./style";
  * A delay in ms after that the closeMenu callback gets triggered.
  * @type {number}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CLOSE_DELAY = 250;
 
 /**
@@ -27,14 +28,17 @@ const Item = ({
       handleClick(event);
     }
   }, [handleClick]);
-  return /*#__PURE__*/React.createElement(Glow, null, /*#__PURE__*/React.createElement("div", {
-    className: getItemClass(),
-    onClick: handleClick,
-    role: "button",
-    "data-test-id": "contextMenuButton",
-    onKeyDown: handleKeyPress,
-    tabIndex: 0
-  }, children));
+  return /*#__PURE__*/_jsx(Glow, {
+    children: /*#__PURE__*/_jsx("div", {
+      className: getItemClass(),
+      onClick: handleClick,
+      role: "button",
+      "data-test-id": "contextMenuButton",
+      onKeyDown: handleKeyPress,
+      tabIndex: 0,
+      children: children
+    })
+  });
 };
 Item.defaultProps = {
   children: null,

package/components/Menu/components/Position/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import clamp from 'lodash/clamp';
@@ -6,20 +7,25 @@ import styles from "./style";
 /**
  * The Context Menu Position component.
  */
-class Position extends Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let Position = /*#__PURE__*/function (_Component) {
   /**
    * The Constructor.
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
-    this.elementRef = null;
+  function Position(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
+    _this.elementRef = null;
+    return _this;
   }
 
   /**
    * Calculate and apply the correct menu position after mounting.
    */
-  componentDidMount() {
+  _inheritsLoose(Position, _Component);
+  var _proto = Position.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     const {
       offset
     } = this.props;
@@ -47,16 +53,18 @@ class Position extends Component {
   /**
    * Renders the component.
    * @returns {JSX}
-   */
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
+   */;
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsx("div", {
       ref: ref => {
         this.elementRef = ref;
       },
-      className: styles.container
-    }, this.props.children);
-  }
-}
+      className: styles.container,
+      children: this.props.children
+    });
+  };
+  return Position;
+}(Component);
 Position.defaultProps = {
   children: null,
   offset: {

package/components/Menu/index.js

@@ -1,3 +1,5 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component, Children } from 'react';
 import PropTypes from 'prop-types';
 import { ConnectedReactPortal } from '@shopgate/engage/components';
@@ -9,77 +11,75 @@ import styles from "./style";
 /**
  * The Menu component.
  */
-class Menu extends Component {
-  constructor(...args) {
-    super(...args);
-    /**
-     * Handles any menu toggling interactions.
-     * @param {Object} [e] Event
-     */
-    this.handleMenuToggle = e => {
-      if (e) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-      if (this.props.contextRef?.current) {
-        this.props.onClose();
-      }
-    };
-  }
-  /**
-   * Gets the offset of the DOM element.
-   * @returns {Object}
-   */
-  get offset() {
-    if (this.props.contextRef?.current) {
-      const bounds = this.props.contextRef.current.getBoundingClientRect();
-      return {
-        height: bounds.height,
-        width: bounds.width,
-        left: bounds.left,
-        right: bounds.right,
-        bottom: bounds.bottom,
-        top: bounds.top + bounds.height
-      };
-    }
-    return {
-      top: 0,
-      left: 0
-    };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let Menu = /*#__PURE__*/function (_Component) {
+  function Menu() {
+    return _Component.apply(this, arguments) || this;
   }
+  _inheritsLoose(Menu, _Component);
+  var _proto = Menu.prototype;
   /**
    * Renders the component.
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       children,
       isOpen,
       onClose
     } = this.props;
-    return /*#__PURE__*/React.createElement(ConnectedReactPortal, {
-      isOpened: isOpen
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles.overlay
-    }, /*#__PURE__*/React.createElement(Backdrop, {
-      isVisible: true,
-      level: 0,
-      opacity: 0,
-      onClick: onClose
-    }), /*#__PURE__*/React.createElement(Position, {
-      offset: this.offset
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles.menu
-    }, Children.map(children, child => {
-      if (!child) {
-        return null;
+    return /*#__PURE__*/_jsx(ConnectedReactPortal, {
+      isOpened: isOpen,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: styles.overlay,
+        children: [/*#__PURE__*/_jsx(Backdrop, {
+          isVisible: true,
+          level: 0,
+          opacity: 0,
+          onClick: onClose
+        }), /*#__PURE__*/_jsx(Position, {
+          offset: this.offset,
+          children: /*#__PURE__*/_jsx("div", {
+            className: styles.menu,
+            children: Children.map(children, child => {
+              if (!child) {
+                return null;
+              }
+              return /*#__PURE__*/React.cloneElement(child, {
+                closeMenu: onClose
+              });
+            })
+          })
+        })]
+      })
+    });
+  };
+  return _createClass(Menu, [{
+    key: "offset",
+    get:
+    /**
+     * Gets the offset of the DOM element.
+     * @returns {Object}
+     */
+    function () {
+      if (this.props.contextRef?.current) {
+        const bounds = this.props.contextRef.current.getBoundingClientRect();
+        return {
+          height: bounds.height,
+          width: bounds.width,
+          left: bounds.left,
+          right: bounds.right,
+          bottom: bounds.bottom,
+          top: bounds.top + bounds.height
+        };
       }
-      return /*#__PURE__*/React.cloneElement(child, {
-        closeMenu: onClose
-      });
-    })))));
-  }
-}
+      return {
+        top: 0,
+        left: 0
+      };
+    }
+  }]);
+}(Component);
 Menu.Item = Item;
 Menu.defaultProps = {
   children: null,

package/components/MessageBar/MessageBar.js

@@ -6,6 +6,7 @@ import StopIcon from '@shopgate/pwa-ui-shared/icons/StopIcon';
 import InfoIcon from '@shopgate/pwa-ui-shared/icons/InfoIcon';
 import WarningIcon from '@shopgate/pwa-ui-shared/icons/WarningIcon';
 import * as styles from "./MessageBar.style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const iconMapping = {
   info: InfoIcon,
   warning: WarningIcon,
@@ -33,38 +34,41 @@ const MessageBar = ({
     }
     return classnames(styles.container, classNames.container);
   }, [classNames.container, classNames.containerRaised, raised]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: containerClass,
-    role: messages.length > 0 ? 'alert' : null
-  }, messages.map(item => {
-    const {
-      type = 'info',
-      message,
-      messageParams = null,
-      additionalParams = null,
-      translated = false
-    } = item;
-    let {
-      icon: Icon = null
-    } = item;
-    if (Icon === null && showIcons) {
-      Icon = iconMapping[type];
-    }
-    const messageOutput = !translated ? errorBehavior.getErrorMessage(message, messageParams || additionalParams) : message;
-    return /*#__PURE__*/React.createElement("div", {
-      key: `${type}-${message}`,
-      className: classnames(styles[type] ? styles[type]() : null, classNames.message, Icon ? styles.withIcon : null),
-      "aria-live": "assertive",
-      "aria-atomic": "true"
-    }, Icon && /*#__PURE__*/React.createElement(Icon, {
-      className: classnames(classNames.icon, styles.icon)
-    }), /*#__PURE__*/React.createElement("span", {
-      className: "sr-only"
-    }, `${i18n.text(`cart.message_type_${type}`)}: ${messageOutput}`), /*#__PURE__*/React.createElement("span", {
-      "aria-hidden": true,
-      className: Icon ? styles.messageToIcon : null
-    }, messageOutput));
-  }));
+    role: messages.length > 0 ? 'alert' : null,
+    children: messages.map(item => {
+      const {
+        type = 'info',
+        message,
+        messageParams = null,
+        additionalParams = null,
+        translated = false
+      } = item;
+      let {
+        icon: Icon = null
+      } = item;
+      if (Icon === null && showIcons) {
+        Icon = iconMapping[type];
+      }
+      const messageOutput = !translated ? errorBehavior.getErrorMessage(message, messageParams || additionalParams) : message;
+      return /*#__PURE__*/_jsxs("div", {
+        className: classnames(styles[type] ? styles[type]() : null, classNames.message, Icon ? styles.withIcon : null),
+        "aria-live": "assertive",
+        "aria-atomic": "true",
+        children: [Icon && /*#__PURE__*/_jsx(Icon, {
+          className: classnames(classNames.icon, styles.icon)
+        }), /*#__PURE__*/_jsx("span", {
+          className: "sr-only",
+          children: `${i18n.text(`cart.message_type_${type}`)}: ${messageOutput}`
+        }), /*#__PURE__*/_jsx("span", {
+          "aria-hidden": true,
+          className: Icon ? styles.messageToIcon : null,
+          children: messageOutput
+        })]
+      }, `${type}-${message}`);
+    })
+  });
 };
 MessageBar.defaultProps = {
   classNames: {

package/components/NavigationHandler/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import "core-js/modules/es.string.replace.js";
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -8,22 +9,26 @@ import connect from "./connector";
 /**
  * Handles
  */
-class NavigationHandler extends React.PureComponent {
+let NavigationHandler = /*#__PURE__*/function (_React$PureComponent) {
   /**
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
+  function NavigationHandler(props) {
+    var _this;
+    _this = _React$PureComponent.call(this, props) || this;
     UIEvents.addListener(NAVIGATION_PUSH, props.push);
     UIEvents.addListener(NAVIGATION_POP, props.pop);
     UIEvents.addListener(NAVIGATION_REPLACE, props.replace);
     UIEvents.addListener(NAVIGATION_RESET, props.reset);
+    return _this;
   }
 
   /**
    * Removes the event listeners.
    */
-  componentWillUnmount() {
+  _inheritsLoose(NavigationHandler, _React$PureComponent);
+  var _proto = NavigationHandler.prototype;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     UIEvents.removeListener(NAVIGATION_PUSH, this.props.push);
     UIEvents.removeListener(NAVIGATION_POP, this.props.pop);
     UIEvents.removeListener(NAVIGATION_REPLACE, this.props.replace);
@@ -32,11 +37,12 @@ class NavigationHandler extends React.PureComponent {
 
   /**
    * @returns {null}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     return this.props.children;
-  }
-}
+  };
+  return NavigationHandler;
+}(React.PureComponent);
 NavigationHandler.defaultProps = {
   pop: () => {},
   push: () => {},

package/components/NavigationHandler/spec.js

@@ -6,6 +6,7 @@ import { UIEvents } from '@shopgate/pwa-core';
 import { createMockStore } from '@shopgate/pwa-common/store';
 import NavigationHandler from "./index";
 import { NAVIGATION_PUSH, NAVIGATION_POP, NAVIGATION_REPLACE, NAVIGATION_RESET, push, pop, replace, reset } from "../../core/router/helpers";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/pwa-core', () => {
   const map = {};
   return {
@@ -22,9 +23,14 @@ jest.mock('@shopgate/pwa-core', () => {
 });
 describe('<NavigationHandler />', () => {
   const store = createMockStore();
-  const wrapper = mount(/*#__PURE__*/React.createElement(Provider, {
-    store: store
-  }, /*#__PURE__*/React.createElement(NavigationHandler, null, /*#__PURE__*/React.createElement("div", null, "Some content"))));
+  const wrapper = mount(/*#__PURE__*/_jsx(Provider, {
+    store: store,
+    children: /*#__PURE__*/_jsx(NavigationHandler, {
+      children: /*#__PURE__*/_jsx("div", {
+        children: "Some content"
+      })
+    })
+  }));
   it('should render as expected', () => {
     expect(wrapper).toMatchSnapshot();
   });

package/components/Picker/components/Button/index.js

@@ -7,19 +7,23 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @returns {JSX} The button component.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PickerButton = ({
   value,
   label,
   openList
-}) => /*#__PURE__*/React.createElement("button", {
+}) => /*#__PURE__*/_jsxs("button", {
   className: `${styles.button} engage__picker__button`,
   onClick: openList,
-  type: "button"
-}, /*#__PURE__*/React.createElement("span", {
-  className: styles.label
-}, label), value !== null && /*#__PURE__*/React.createElement("span", {
-  className: styles.value
-}, value));
+  type: "button",
+  children: [/*#__PURE__*/_jsx("span", {
+    className: styles.label,
+    children: label
+  }), value !== null && /*#__PURE__*/_jsx("span", {
+    className: styles.value,
+    children: value
+  })]
+});
 PickerButton.defaultProps = {
   value: null
 };