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

package/components/BrandingColorBanner/BrandingColorBanner.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ResponsiveContainer from '@shopgate/engage/components/ResponsiveContainer';
 import { css } from 'glamor';
+import { jsx as _jsx } from "react/jsx-runtime";
 const brandingColorBanner = css({
   position: 'fixed',
   backgroundColor: 'var(--color-background-gutter-header, var(--color-primary))',
@@ -14,10 +15,11 @@ const brandingColorBanner = css({
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-const BrandingColorBanner = () => /*#__PURE__*/React.createElement(ResponsiveContainer, {
+const BrandingColorBanner = () => /*#__PURE__*/_jsx(ResponsiveContainer, {
   breakpoint: ">xs",
-  webOnly: true
-}, /*#__PURE__*/React.createElement("div", {
-  className: brandingColorBanner
-}));
+  webOnly: true,
+  children: /*#__PURE__*/_jsx("div", {
+    className: brandingColorBanner
+  })
+});
 export default BrandingColorBanner;

package/components/ChipLayout/index.js

@@ -1,3 +1,5 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash/debounce';
@@ -5,6 +7,7 @@ import I18n from '@shopgate/pwa-common/components/I18n';
 import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   variables
 } = themeConfig;
@@ -24,18 +27,22 @@ export const CHIP_MINIMUM_WIDTH = 60;
 /**
  * The ChipLayout component.
  */
-class ChipLayout extends Component {
-  constructor(...args) {
-    super(...args);
+let ChipLayout = /*#__PURE__*/function (_Component) {
+  function ChipLayout(...args) {
+    var _this;
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
     /**
      * Debounced, eg. layout effect
      */
-    this.processHiddenElementsDebounced = debounce(this.processHiddenElements, 50);
+    _this.processHiddenElementsDebounced = debounce(_this.processHiddenElements, 50);
+    return _this;
   }
+  _inheritsLoose(ChipLayout, _Component);
+  var _proto = ChipLayout.prototype;
   /**
    * When the component mounts we need to initially process all children.
    */
-  componentDidMount() {
+  _proto.componentDidMount = function componentDidMount() {
     this.processHiddenElementsDebounced();
   }
 
@@ -47,35 +54,19 @@ class ChipLayout extends Component {
    * It must be done on every prop change, including the pathname.
    * Sometimes this component is rendered invisible, then since `.processHiddenElements` uses
    * refs.clientHeight it would always be zero.
-   */
-  componentDidUpdate() {
+   */;
+  _proto.componentDidUpdate = function componentDidUpdate() {
     this.processHiddenElementsDebounced();
   }
 
   /**
    * Returns the maximum height the container should have.
    * @returns {number}
-   */
-  get maxContentHeight() {
-    // 8 -> container padding.
-    return CHIP_ROW_HEIGHT * this.props.maxRows + 8;
-  }
-
-  /**
-   * Returns the more button styles.
-   * @return {string} The store button class name.
-   */
-  get moreButtonStyles() {
-    if (this.props.invertMoreButton) {
-      return styles.moreButtonInverted;
-    }
-    return styles.moreButton;
-  }
-
+   */;
   /**
    * Loops through all children to make sure the more button appears if there is too much content.
    */
-  processHiddenElements() {
+  _proto.processHiddenElements = function processHiddenElements() {
     if (!this.containerRef) {
       return;
     }
@@ -128,37 +119,61 @@ class ChipLayout extends Component {
       element.setAttribute('style', 'display: none');
       return true;
     });
-  }
+  };
   /**
    * Renders the component.
    * @returns {JSX}
    */
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsxs("div", {
       ref: element => {
         this.containerRef = element;
       },
-      className: `${styles.container(this.maxContentHeight)} engage__chip-layout`
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: element => {
-        this.layoutRef = element;
-      },
-      className: styles.layout
-    }, this.props.children), /*#__PURE__*/React.createElement("div", {
-      ref: element => {
-        this.moreButtonRef = element;
-      },
-      className: styles.moreButtonWrapper
-    }, /*#__PURE__*/React.createElement(RippleButton, {
-      fill: true,
-      type: "plain",
-      className: this.moreButtonStyles,
-      onClick: this.props.handleMoreButton
-    }, /*#__PURE__*/React.createElement(I18n.Text, {
-      string: this.props.moreLabel
-    }))));
-  }
-}
+      className: `${styles.container(this.maxContentHeight)} engage__chip-layout`,
+      children: [/*#__PURE__*/_jsx("div", {
+        ref: element => {
+          this.layoutRef = element;
+        },
+        className: styles.layout,
+        children: this.props.children
+      }), /*#__PURE__*/_jsx("div", {
+        ref: element => {
+          this.moreButtonRef = element;
+        },
+        className: styles.moreButtonWrapper,
+        children: /*#__PURE__*/_jsx(RippleButton, {
+          fill: true,
+          type: "plain",
+          className: this.moreButtonStyles,
+          onClick: this.props.handleMoreButton,
+          children: /*#__PURE__*/_jsx(I18n.Text, {
+            string: this.props.moreLabel
+          })
+        })
+      })]
+    });
+  };
+  return _createClass(ChipLayout, [{
+    key: "maxContentHeight",
+    get: function () {
+      // 8 -> container padding.
+      return CHIP_ROW_HEIGHT * this.props.maxRows + 8;
+    }
+
+    /**
+     * Returns the more button styles.
+     * @return {string} The store button class name.
+     */
+  }, {
+    key: "moreButtonStyles",
+    get: function () {
+      if (this.props.invertMoreButton) {
+        return styles.moreButtonInverted;
+      }
+      return styles.moreButton;
+    }
+  }]);
+}(Component);
 ChipLayout.defaultProps = {
   children: null,
   handleMoreButton: () => {},

package/components/ChipLayout/spec.js

@@ -8,22 +8,30 @@ import ChipsLayout from "./index";
  * browser to be tested as it needs a full browser that supports styling and
  * width/height calculation.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 describe('<ChipsLayout />', () => {
   it('should render with one chip', () => {
-    const Component = /*#__PURE__*/React.createElement(ChipsLayout, null, /*#__PURE__*/React.createElement(Chip, {
-      id: "some-id"
-    }, "foo"));
+    const Component = /*#__PURE__*/_jsx(ChipsLayout, {
+      children: /*#__PURE__*/_jsx(Chip, {
+        id: "some-id",
+        children: "foo"
+      })
+    });
     const wrapper = mount(Component);
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(Chip).length).toEqual(1);
     expect(wrapper.find(Chip).at(0).find('button').at(1).text()).toEqual('foo');
   });
   it('should render with two chips', () => {
-    const Component = /*#__PURE__*/React.createElement(ChipsLayout, null, /*#__PURE__*/React.createElement(Chip, {
-      id: "some-id"
-    }, "foo"), /*#__PURE__*/React.createElement(Chip, {
-      id: "some-other-id"
-    }, "bar"));
+    const Component = /*#__PURE__*/_jsxs(ChipsLayout, {
+      children: [/*#__PURE__*/_jsx(Chip, {
+        id: "some-id",
+        children: "foo"
+      }), /*#__PURE__*/_jsx(Chip, {
+        id: "some-other-id",
+        children: "bar"
+      })]
+    });
     const wrapper = mount(Component);
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(Chip).length).toEqual(2);

package/components/ConnectedReactPortal/index.js

@@ -1,30 +1,28 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import { Provider, ReactReduxContext } from 'react-redux';
-import Portal from 'react-portal';
+import { createPortal } from 'react-dom';
+const node = document.getElementById('portals');
 
 /**
- * @typedef {import('@types/react-portal')} ReactPortal
- */
-
-// eslint-disable-next-line valid-jsdoc
-/**
- * ConnectedReactPortal is a wrapper around "react-portal" v3 that ensures
- * children rendered in the portal have access to the Redux store.
- *
- * This addresses the limitation introduced by the switch to the new Context API in react-redux v6,
- * where the Redux store is only accessible to components within the StoreProvider. Since the Portal
- * component renders its children outside the React component tree, this wrapper bridges the gap.
- *
- * @type {ReactPortal}
+ * The connected react portal component rendering its children into a react portal node.
+ * @param {Object} props The component props
+ * @param {boolean} props.isOpened Whether the portal is open
+ * @param {React.ReactNode} props.children The children to render inside the portal
+ * @private
+ * @returns {React.ReactPortal|null}
  */
 const ConnectedReactPortal = ({
   children,
-  ...props
-}) => /*#__PURE__*/React.createElement(ReactReduxContext.Consumer, null, ctx => /*#__PURE__*/React.createElement(Portal, props, /*#__PURE__*/React.createElement(Provider, {
-  store: ctx.store
-}, children)));
+  isOpened
+}) => {
+  if (!isOpened) return null;
+  return /*#__PURE__*/createPortal(children, node);
+};
+ConnectedReactPortal.propTypes = {
+  children: PropTypes.node,
+  isOpened: PropTypes.bool
+};
 ConnectedReactPortal.defaultProps = {
-  children: null
+  children: null,
+  isOpened: false
 };
 export default ConnectedReactPortal;

package/components/Footer/Footer.js

@@ -13,6 +13,7 @@ import { APP_FOOTER_ID, DATA_IGNORED } from "./constants";
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Footer = ({
   children
 }) => {
@@ -53,12 +54,14 @@ const Footer = ({
       observer.disconnect();
     };
   }, [performFooterUpdate]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(classes.footer, 'engage__footer')
-  }, /*#__PURE__*/React.createElement("div", {
-    id: APP_FOOTER_ID,
-    ref: footerRef
-  }, children));
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames(classes.footer, 'engage__footer'),
+    children: /*#__PURE__*/_jsx("div", {
+      id: APP_FOOTER_ID,
+      ref: footerRef,
+      children: children
+    })
+  });
 };
 Footer.defaultProps = {
   children: null

package/components/Form/Builder/Builder.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import _camelCase from "lodash/camelCase";
 var _Builder;
 import React, { Component, Fragment } from 'react';
@@ -26,6 +27,7 @@ import { sanitizePortalName } from "./helpers/common";
  * Optional select element
  * @type {Object}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const emptySelectOption = {
   '': ''
 };
@@ -34,13 +36,14 @@ const emptySelectOption = {
  * Takes a form configuration and handles rendering and updates of the form fields.
  * Note: Only one country and one province element is supported per FormBuilder instance.
  */
-class Builder extends Component {
+let Builder = /*#__PURE__*/function (_Component) {
   /**
    * Initializes the component.
    * @param {Object} props The components props.
    */
-  constructor(props) {
-    super(props);
+  function Builder(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
 
     // Prepare internal state
     /**
@@ -48,7 +51,7 @@ class Builder extends Component {
      * @param {string} type The type value of the element to return.
      * @returns {*|ElementText|ElementSelect|ElementCheckbox|ElementRadio|null}
      */
-    this.getFormElementComponent = type => this.props.elements[type] || Builder.defaultElements[type] || null;
+    _this.getFormElementComponent = type => _this.props.elements[type] || Builder.defaultElements[type] || null;
     /**
      * Sorts the elements by "sortOrder" property
      *
@@ -59,7 +62,7 @@ class Builder extends Component {
      * @param {FormElement} element2 Second element
      * @returns {number}
      */
-    this.elementSortFunc = (element1, element2) => {
+    _this.elementSortFunc = (element1, element2) => {
       // Keep current sort order when no specific sort order was set for both
       if (element1.sortOrder === undefined || element2.sortOrder === undefined) {
         return 0;
@@ -74,18 +77,18 @@ class Builder extends Component {
      * @param {string} elementId Element to create the handler for
      * @param {string} value Element value
      */
-    this.elementChangeHandler = (elementId, value) => {
+    _this.elementChangeHandler = (elementId, value) => {
       // "newState" is the state changes before any form actions have been applied
       const newState = {
-        ...this.state,
+        ..._this.state,
         formData: {
-          ...this.state.formData,
+          ..._this.state.formData,
           [elementId]: value
         }
       };
 
       // Handle context sensitive functionality by via "action" listener and use the "new" state
-      const updatedNewState = this.actionListener.notify(elementId, this.state, newState);
+      const updatedNewState = _this.actionListener.notify(elementId, _this.state, newState);
 
       // Form actions can append validation errors by adding that field to the new state
       // Split out validation errors from final state and
@@ -98,7 +101,7 @@ class Builder extends Component {
       let hasErrors = Object.keys(validationErrors).length > 0;
 
       // Check "required" fields for all visible elements and enable rendering on changes
-      this.formElements.forEach(formElement => {
+      _this.formElements.forEach(formElement => {
         if (!finalState.elementVisibility[formElement.id] || !formElement.required) {
           return;
         }
@@ -108,11 +111,11 @@ class Builder extends Component {
       });
 
       // Handle state internally and send an "onChange" event to parent if this finished
-      this.setState(finalState);
+      _this.setState(finalState);
 
       // Transform to external structure (unavailable ones will be set undefined)
       const updateData = {};
-      this.formElements.forEach(el => {
+      _this.formElements.forEach(el => {
         if (el.custom) {
           if (updateData.customAttributes === undefined) {
             updateData.customAttributes = {};
@@ -124,7 +127,7 @@ class Builder extends Component {
       });
 
       // Trigger the given update action of the parent and provide all new validation errors to it
-      this.props.handleUpdate(updateData, hasErrors,
+      _this.props.handleUpdate(updateData, hasErrors,
       // Output validation errors in the same structure (array) as the component takes them
       hasErrors ? Object.keys(validationErrors).map(k => ({
         path: k,
@@ -139,16 +142,16 @@ class Builder extends Component {
      * @param {string} elementErrorText The error text to be shown for this specific element
      * @returns {JSX.Element}
      */
-    this.renderElement = (formName, element, elementErrorText) => {
+    _this.renderElement = (formName, element, elementErrorText) => {
       const {
         formData
-      } = this.state;
-      const elementName = `${this.props.name}_${element.id}`;
+      } = _this.state;
+      const elementName = `${_this.props.name}_${element.id}`;
       const elementValue = formData[element.id];
-      const elementVisible = this.state.elementVisibility[element.id] || false;
+      const elementVisible = _this.state.elementVisibility[element.id] || false;
 
       // Take a dynamic REACT element based on its type
-      const Element = this.getFormElementComponent(element.type);
+      const Element = _this.getFormElementComponent(element.type);
       if (!Element) {
         logger.error(`Unknown form element type: ${element.type}`);
         return null;
@@ -159,13 +162,13 @@ class Builder extends Component {
       switch (element.type) {
         case ELEMENT_TYPE_COUNTRY:
           {
-            elementData.options = element.options || this.countryList;
+            elementData.options = element.options || _this.countryList;
             break;
           }
         case ELEMENT_TYPE_PROVINCE:
           {
             // Province selection only makes sense with a country being selected, or from custom options
-            const countryElement = this.formElements.find(el => el.type === ELEMENT_TYPE_COUNTRY);
+            const countryElement = _this.formElements.find(el => el.type === ELEMENT_TYPE_COUNTRY);
             elementData.options = countryElement && formData[countryElement.id] ? buildProvinceList(formData[countryElement.id],
             // Auto-select with "empty" when not required
             element.required ? null : emptySelectOption) : {};
@@ -174,7 +177,7 @@ class Builder extends Component {
         default:
           break;
       }
-      return /*#__PURE__*/React.createElement(Element, {
+      return /*#__PURE__*/_jsx(Element, {
         name: elementName,
         element: elementData,
         errorText: elementErrorText,
@@ -183,55 +186,58 @@ class Builder extends Component {
         formName: formName
       });
     };
-    this.state = {
+    _this.state = {
       elementVisibility: {},
       formData: {}
     };
 
     // Reorganize form elements into a structure that can be easily rendered
-    const formElements = buildFormElements(props.config, this.elementChangeHandler);
+    const formElements = buildFormElements(props.config, _this.elementChangeHandler);
     // Compute defaults
     const formDefaults = buildFormDefaults(formElements, props.defaults);
     // Assign defaults to state
-    this.state.formData = formDefaults;
+    _this.state.formData = formDefaults;
 
     // Handle fixed visibilities
     formElements.forEach(element => {
       // Assume as visible except it's explicitly set to "false"
-      this.state.elementVisibility[element.id] = element.visible !== false;
+      _this.state.elementVisibility[element.id] = element.visible !== false;
     });
-    this.actionListener = new ActionListener(buildProvinceList, formDefaults);
-    this.actionListener.attachAll(formElements);
+    _this.actionListener = new ActionListener(buildProvinceList, formDefaults);
+    _this.actionListener.attachAll(formElements);
 
     // Sort the elements after attaching action listeners to keep action hierarchy same as creation
-    this.formElements = formElements.sort(this.elementSortFunc);
+    _this.formElements = formElements.sort(_this.elementSortFunc);
 
     // Assemble combined country/province list based on the config element
-    const _countryElement = this.formElements.find(el => el.type === ELEMENT_TYPE_COUNTRY);
+    const _countryElement = _this.formElements.find(el => el.type === ELEMENT_TYPE_COUNTRY);
     if (_countryElement) {
-      this.countryList = buildCountryList(_countryElement, emptySelectOption);
-      const provinceElement = this.formElements.find(el => el.type === ELEMENT_TYPE_PROVINCE);
+      _this.countryList = buildCountryList(_countryElement, emptySelectOption);
+      const provinceElement = _this.formElements.find(el => el.type === ELEMENT_TYPE_PROVINCE);
       if (provinceElement && provinceElement.required && !!formDefaults[_countryElement.id] && !formDefaults[provinceElement.id]) {
         // Set default for province field for given country
         const [first] = Object.keys(buildProvinceList(formDefaults[_countryElement.id]));
         if (first) {
-          this.state.formData[provinceElement.id] = first;
+          _this.state.formData[provinceElement.id] = first;
         }
       }
     }
 
     // Final form initialization, by triggering actionListeners and enable rendering for elements
-    let _newState = this.state;
-    this.formElements.forEach(element => {
-      _newState = this.actionListener.notify(element.id, this.state, _newState);
+    let _newState = _this.state;
+    _this.formElements.forEach(element => {
+      _newState = _this.actionListener.notify(element.id, _this.state, _newState);
     });
-    this.state = _newState;
+    _this.state = _newState;
+    return _this;
   }
+  _inheritsLoose(Builder, _Component);
+  var _proto = Builder.prototype;
   /**
    * Renders the component based on the given config
    * @return {JSX.Element}
    */
-  render() {
+  _proto.render = function render() {
     const {
       name,
       className,
@@ -240,44 +246,49 @@ class Builder extends Component {
     // Convert validation errors for easier handling
     const validationErrors = buildValidationErrorList(this.props.validationErrors);
     const validationErrorsAmount = Object.entries(validationErrors).length;
-    return /*#__PURE__*/React.createElement(Form, {
+    return /*#__PURE__*/_jsxs(Form, {
       className: _camelCase(name),
-      onSubmit: onSubmit
-    }, validationErrorsAmount > 0 && /*#__PURE__*/React.createElement("div", {
-      className: "sr-only"
-    }, /*#__PURE__*/React.createElement(I18n.Text, {
-      string: "login.errorAmount",
-      params: {
-        amount: validationErrorsAmount
-      }
-    })), /*#__PURE__*/React.createElement("div", {
-      className: className
-    }, this.formElements.map(element => /*#__PURE__*/React.createElement(Fragment, {
-      key: `${name}_${element.id}`
-    }, /*#__PURE__*/React.createElement(Portal, {
-      name: `${sanitizePortalName(name)}.${sanitizePortalName(element.id)}.${BEFORE}`,
-      props: {
-        formName: name,
-        errorText: validationErrors[element.id] || '',
-        element
-      }
-    }), /*#__PURE__*/React.createElement(Portal, {
-      name: `${sanitizePortalName(name)}.${sanitizePortalName(element.id)}`,
-      props: {
-        formName: name,
-        errorText: validationErrors[element.id] || '',
-        element
-      }
-    }, this.renderElement(name, element, validationErrors[element.id] || '')), /*#__PURE__*/React.createElement(Portal, {
-      name: `${sanitizePortalName(name)}.${sanitizePortalName(element.id)}.${AFTER}`,
-      props: {
-        formName: name,
-        errorText: validationErrors[element.id] || '',
-        element
-      }
-    })))));
-  }
-}
+      onSubmit: onSubmit,
+      children: [validationErrorsAmount > 0 && /*#__PURE__*/_jsx("div", {
+        className: "sr-only",
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "login.errorAmount",
+          params: {
+            amount: validationErrorsAmount
+          }
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: className,
+        children: this.formElements.map(element => /*#__PURE__*/_jsxs(Fragment, {
+          children: [/*#__PURE__*/_jsx(Portal, {
+            name: `${sanitizePortalName(name)}.${sanitizePortalName(element.id)}.${BEFORE}`,
+            props: {
+              formName: name,
+              errorText: validationErrors[element.id] || '',
+              element
+            }
+          }), /*#__PURE__*/_jsx(Portal, {
+            name: `${sanitizePortalName(name)}.${sanitizePortalName(element.id)}`,
+            props: {
+              formName: name,
+              errorText: validationErrors[element.id] || '',
+              element
+            },
+            children: this.renderElement(name, element, validationErrors[element.id] || '')
+          }), /*#__PURE__*/_jsx(Portal, {
+            name: `${sanitizePortalName(name)}.${sanitizePortalName(element.id)}.${AFTER}`,
+            props: {
+              formName: name,
+              errorText: validationErrors[element.id] || '',
+              element
+            }
+          })]
+        }, `${name}_${element.id}`))
+      })]
+    });
+  };
+  return Builder;
+}(Component);
 _Builder = Builder;
 Builder.defaultElements = {
   [ELEMENT_TYPE_EMAIL]: ElementText,