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

package/filter/components/FilterPageContent/components/ApplyButton/index.js

@@ -12,6 +12,7 @@ import styles from "./style";
  * @param {Function} props.onClick Click handler for the button
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const FilterApplyButton = ({
   disabled,
   onClick,
@@ -22,28 +23,31 @@ const FilterApplyButton = ({
     buttonTextColorDisabled
   } = widgetSettings;
   const buttonColor = !disabled ? buttonTextColor : buttonTextColorDisabled;
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
+  return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PORTAL_FILTER_APPLY_BUTTON,
     portalProps: {
       disabled,
       onClick,
       widgetSettings
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.wrapper
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: styles.button,
-    flat: true,
-    type: "primary",
-    onClick: onClick,
-    disabled: disabled,
-    testId: "applyFilterButton"
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "filter.apply",
-    style: {
-      color: buttonColor
-    }
-  }))));
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      className: styles.wrapper,
+      children: /*#__PURE__*/_jsx(Button, {
+        className: styles.button,
+        flat: true,
+        type: "primary",
+        onClick: onClick,
+        disabled: disabled,
+        testId: "applyFilterButton",
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "filter.apply",
+          style: {
+            color: buttonColor
+          }
+        })
+      })
+    })
+  });
 };
 FilterApplyButton.defaultProps = {
   disabled: false

package/filter/components/FilterPageContent/components/ApplyButton/spec.js

@@ -1,14 +1,15 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { shallow } from 'enzyme';
 import ApplyButton from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 const clickMock = jest.fn();
 jest.mock('@shopgate/engage/components');
 jest.mock('@shopgate/engage/core', () => ({
   withWidgetSettings: function withWidgetSettings(Comp) {
-    return props => /*#__PURE__*/React.createElement(Comp, _extends({
-      widgetSettings: {}
-    }, props));
+    return props => /*#__PURE__*/_jsx(Comp, {
+      widgetSettings: {},
+      ...props
+    });
   }
 }));
 jest.mock('@shopgate/engage/components', () => ({
@@ -22,20 +23,20 @@ jest.mock('@shopgate/engage/components', () => ({
 }));
 describe('Filter: <ApplyButton />', () => {
   it('should render as activated', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ApplyButton, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(ApplyButton, {
       onClick: () => {}
     })).dive();
     expect(wrapper).toMatchSnapshot();
   });
   it('should render as deactivated', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ApplyButton, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(ApplyButton, {
       disabled: true,
       onClick: () => {}
     })).dive();
     expect(wrapper).toMatchSnapshot();
   });
   it('should handle clicks', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ApplyButton, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(ApplyButton, {
       onClick: clickMock
     })).dive();
     expect(wrapper).toMatchSnapshot();

package/filter/components/FilterPageContent/components/ResetButton/index.js

@@ -11,26 +11,30 @@ import styles from "./style";
  * @param {Function} props.onClick Click handler for the button
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const FilterResetButton = ({
   disabled,
   onClick
-}) => /*#__PURE__*/React.createElement(SurroundPortals, {
+}) => /*#__PURE__*/_jsx(SurroundPortals, {
   portalName: PORTAL_FILTER_RESET_BUTTON,
   portalProps: {
     disabled,
     onClick
-  }
-}, /*#__PURE__*/React.createElement("div", {
-  className: styles
-}, /*#__PURE__*/React.createElement(Button, {
-  flat: true,
-  type: "primary",
-  onClick: onClick,
-  disabled: disabled,
-  testId: "clearAllButton"
-}, /*#__PURE__*/React.createElement(I18n.Text, {
-  string: "filter.reset"
-}))));
+  },
+  children: /*#__PURE__*/_jsx("div", {
+    className: styles,
+    children: /*#__PURE__*/_jsx(Button, {
+      flat: true,
+      type: "primary",
+      onClick: onClick,
+      disabled: disabled,
+      testId: "clearAllButton",
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "filter.reset"
+      })
+    })
+  })
+});
 FilterResetButton.defaultProps = {
   disabled: false
 };

package/filter/components/FilterPageContent/components/ResetButton/spec.js

@@ -1,24 +1,25 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import ResetButton from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 const clickMock = jest.fn();
 jest.mock('@shopgate/engage/components');
 describe('Filter: <ResetButton />', () => {
   it('should render as activated', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ResetButton, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(ResetButton, {
       onClick: () => {}
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('should render as deactivated', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ResetButton, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(ResetButton, {
       disabled: true,
       onClick: () => {}
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('should handle clicks', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ResetButton, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(ResetButton, {
       onClick: clickMock
     }));
     expect(wrapper).toMatchSnapshot();

package/filter/components/FilterPageContent/components/Selector/components/Selected/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import "core-js/modules/es.array.reduce.js";
 import React, { Fragment, PureComponent } from 'react';
 import PropTypes from 'prop-types';
@@ -6,11 +7,17 @@ import * as styles from "./style";
 /**
  * The filter selected component.
  */
-class Selected extends PureComponent {
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+let Selected = /*#__PURE__*/function (_PureComponent) {
+  function Selected() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+  _inheritsLoose(Selected, _PureComponent);
+  var _proto = Selected.prototype;
   /**
    * @returns {Array}
    */
-  getItems() {
+  _proto.getItems = function getItems() {
     const {
       selected,
       values
@@ -25,21 +32,26 @@ class Selected extends PureComponent {
 
   /**
    * @returns {JSX}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     if (!this.props.selected || this.props.selected.length === 0) {
       return null;
     }
     const items = this.getItems();
-    return /*#__PURE__*/React.createElement(Fragment, null, items.map((item, index) => /*#__PURE__*/React.createElement(Fragment, {
-      key: item
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.elipsed
-    }, item), index < items.length - 1 ? /*#__PURE__*/React.createElement("span", {
-      className: styles.comma
-    }, ", ") : '')));
-  }
-}
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: items.map((item, index) => /*#__PURE__*/_jsxs(Fragment, {
+        children: [/*#__PURE__*/_jsx("span", {
+          className: styles.elipsed,
+          children: item
+        }), index < items.length - 1 ? /*#__PURE__*/_jsx("span", {
+          className: styles.comma,
+          children: ", "
+        }) : '']
+      }, item))
+    });
+  };
+  return Selected;
+}(PureComponent);
 Selected.defaultProps = {
   selected: null
 };

package/filter/components/FilterPageContent/components/Selector/components/Selected/spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Selected from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 const values = [{
   id: 'foo',
   label: 'fooLabel'
@@ -10,13 +11,13 @@ const values = [{
 }];
 describe('Filter: <Selected />', () => {
   it('should not render without selected', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Selected, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Selected, {
       values: values
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('should render with selected', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Selected, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Selected, {
       values: values,
       selected: ['foo']
     }));

package/filter/components/FilterPageContent/components/Selector/components/Toggle/index.js

@@ -1,3 +1,5 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -6,38 +8,50 @@ import * as styles from "./style";
 /**
  * The toggle component.
  */
-class Toggle extends PureComponent {
-  /**
-   * @returns {string}
-   */
-  get className() {
-    const {
-      open
-    } = this.props;
-    return classNames({
-      [styles.label]: true,
-      [styles.open]: open,
-      [styles.closed]: !open
-    });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let Toggle = /*#__PURE__*/function (_PureComponent) {
+  function Toggle() {
+    return _PureComponent.apply(this, arguments) || this;
   }
-
+  _inheritsLoose(Toggle, _PureComponent);
+  var _proto = Toggle.prototype;
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       label,
       selected
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.toggle
-    }, /*#__PURE__*/React.createElement("span", {
-      className: this.className
-    }, label), selected && /*#__PURE__*/React.createElement("span", {
-      className: styles.selected
-    }, selected));
-  }
-}
+    return /*#__PURE__*/_jsxs("div", {
+      className: styles.toggle,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: this.className,
+        children: label
+      }), selected && /*#__PURE__*/_jsx("span", {
+        className: styles.selected,
+        children: selected
+      })]
+    });
+  };
+  return _createClass(Toggle, [{
+    key: "className",
+    get:
+    /**
+     * @returns {string}
+     */
+    function () {
+      const {
+        open
+      } = this.props;
+      return classNames({
+        [styles.label]: true,
+        [styles.open]: open,
+        [styles.closed]: !open
+      });
+    }
+  }]);
+}(PureComponent);
 Toggle.defaultProps = {
   open: false,
   selected: null

package/filter/components/FilterPageContent/components/Selector/components/Toggle/spec.js

@@ -1,29 +1,30 @@
 import React from 'react';
 import { render } from 'enzyme';
 import Toggle from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Toggle />', () => {
   it('should render without selected', () => {
-    const wrapper = render(/*#__PURE__*/React.createElement(Toggle, {
+    const wrapper = render(/*#__PURE__*/_jsx(Toggle, {
       label: "somelabel"
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('should render without selected as open', () => {
-    const wrapper = render(/*#__PURE__*/React.createElement(Toggle, {
+    const wrapper = render(/*#__PURE__*/_jsx(Toggle, {
       label: "somelabel",
       open: true
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('should render with selected', () => {
-    const wrapper = render(/*#__PURE__*/React.createElement(Toggle, {
+    const wrapper = render(/*#__PURE__*/_jsx(Toggle, {
       label: "somelabel",
       selected: "Some, Thing, Selected"
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('should render with selected as open', () => {
-    const wrapper = render(/*#__PURE__*/React.createElement(Toggle, {
+    const wrapper = render(/*#__PURE__*/_jsx(Toggle, {
       label: "somelabel",
       selected: "Some, Thing, Selected",
       open: true

package/filter/components/FilterPageContent/components/Selector/components/ValueButton/index.js

@@ -1,3 +1,5 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -6,41 +8,51 @@ import * as styles from "./style";
 /**
  * The value button component.
  */
-class ValueButton extends PureComponent {
-  /**
-   * @returns {string}
-   */
-  get className() {
-    const {
-      isActive
-    } = this.props;
-    return classNames({
-      [styles.inactive]: !isActive,
-      [styles.active]: isActive
-    });
+import { jsx as _jsx } from "react/jsx-runtime";
+let ValueButton = /*#__PURE__*/function (_PureComponent) {
+  function ValueButton() {
+    return _PureComponent.apply(this, arguments) || this;
   }
-
+  _inheritsLoose(ValueButton, _PureComponent);
+  var _proto = ValueButton.prototype;
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       label,
       id,
       onClick,
       isActive
     } = this.props;
-    return /*#__PURE__*/React.createElement("button", {
+    return /*#__PURE__*/_jsx("button", {
       className: this.className,
       value: id,
       onClick: onClick,
       "data-test-id": id,
       type: "button",
       role: "checkbox",
-      "aria-checked": isActive
-    }, label);
-  }
-}
+      "aria-checked": isActive,
+      children: label
+    });
+  };
+  return _createClass(ValueButton, [{
+    key: "className",
+    get:
+    /**
+     * @returns {string}
+     */
+    function () {
+      const {
+        isActive
+      } = this.props;
+      return classNames({
+        [styles.inactive]: !isActive,
+        [styles.active]: isActive
+      });
+    }
+  }]);
+}(PureComponent);
 ValueButton.defaultProps = {
   id: null,
   label: null,

package/filter/components/FilterPageContent/components/Selector/components/ValueButton/spec.js

@@ -1,17 +1,18 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import ValueButton from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 const onClick = jest.fn();
 describe('<ValueButton />', () => {
   it('should render as inactive', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ValueButton, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(ValueButton, {
       id: "someid",
       label: "somelabel"
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('should render as active', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ValueButton, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(ValueButton, {
       id: "someid",
       label: "somelabel",
       isActive: true
@@ -19,7 +20,7 @@ describe('<ValueButton />', () => {
     expect(wrapper).toMatchSnapshot();
   });
   it('should handle click event', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ValueButton, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(ValueButton, {
       id: "someid",
       label: "somelabel",
       onClick: onClick

package/filter/components/FilterPageContent/components/Selector/index.js

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { Accordion, SurroundPortals } from '@shopgate/engage/components';
@@ -13,28 +13,30 @@ import * as styles from "./style";
 /**
  * The selector component.
  */
-class Selector extends PureComponent {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      selected: this.props.selected || []
-    };
+import { jsx as _jsx } from "react/jsx-runtime";
+let Selector = /*#__PURE__*/function (_PureComponent) {
+  /**
+   * @param {Object} props The component props
+   */
+  function Selector(_props) {
+    var _this;
+    _this = _PureComponent.call(this, _props) || this;
     /**
      * @param {SyntheticEvent} event The button click event.
      */
-    this.handleClick = event => {
+    _this.handleClick = event => {
       const {
         value
       } = event.target;
       const {
         selected
-      } = this.state;
+      } = _this.state;
       const {
         id,
         multi,
         onChange
-      } = this.props;
-      let newSelected = [...selected, value];
+      } = _this.props;
+      let newSelected = [].concat(selected, [value]);
 
       // If in single select mode, only allow one selected value.
       if (!multi && selected.length === 1) {
@@ -47,7 +49,7 @@ class Selector extends PureComponent {
       }
 
       // Set it if it wasn't selected already.
-      this.setState({
+      _this.setState({
         selected: newSelected
       });
       onChange(id, newSelected);
@@ -57,8 +59,8 @@ class Selector extends PureComponent {
      * click event
      * @param {string} updatedId Id of the updated filter value
      */
-    this.handlePortalChange = updatedId => {
-      this.handleClick({
+    _this.handlePortalChange = updatedId => {
+      _this.handleClick({
         target: {
           value: updatedId
         }
@@ -68,27 +70,35 @@ class Selector extends PureComponent {
      * @param {Object} props The send render props.
      * @return {JSX}
      */
-    this.renderLabel = props => {
+    _this.renderLabel = props => {
       const {
         label,
         values
-      } = this.props;
+      } = _this.props;
       const {
         selected
-      } = this.state;
-      return /*#__PURE__*/React.createElement(Toggle, _extends({}, props, {
+      } = _this.state;
+      return /*#__PURE__*/_jsx(Toggle, {
+        ...props,
         label: label,
-        selected: /*#__PURE__*/React.createElement(Selected, {
+        selected: /*#__PURE__*/_jsx(Selected, {
           values: values,
           selected: selected
         })
-      }));
+      });
+    };
+    _this.state = {
+      selected: _props.selected || []
     };
+    return _this;
   }
+
   /**
    * @param {Object} nextProps The new incoming props.
    */
-  UNSAFE_componentWillReceiveProps({
+  _inheritsLoose(Selector, _PureComponent);
+  var _proto = Selector.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps({
     selected
   }) {
     if (selected !== this.state.selected) {
@@ -96,11 +106,11 @@ class Selector extends PureComponent {
         selected
       });
     }
-  }
+  };
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       values,
       id,
@@ -110,7 +120,7 @@ class Selector extends PureComponent {
     const {
       selected
     } = this.state;
-    return /*#__PURE__*/React.createElement(SurroundPortals, {
+    return /*#__PURE__*/_jsx(SurroundPortals, {
       portalName: PORTAL_FILTER_SELECTOR,
       portalProps: {
         filter: {
@@ -121,25 +131,30 @@ class Selector extends PureComponent {
         },
         selectedValueIds: selected,
         onChange: this.handlePortalChange
-      }
-    }, /*#__PURE__*/React.createElement(FilterItem, null, /*#__PURE__*/React.createElement(Accordion, {
-      renderLabel: this.renderLabel,
-      testId: id,
-      handleLabel: i18n.text('filter.filter_by', {
-        label
-      }),
-      className: styles.accordion
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles.content
-    }, values.map(value => /*#__PURE__*/React.createElement(ValueButton, {
-      key: value.id,
-      id: value.id,
-      label: value.label,
-      isActive: selected && selected.includes(value.id),
-      onClick: this.handleClick
-    }))))));
-  }
-}
+      },
+      children: /*#__PURE__*/_jsx(FilterItem, {
+        children: /*#__PURE__*/_jsx(Accordion, {
+          renderLabel: this.renderLabel,
+          testId: id,
+          handleLabel: i18n.text('filter.filter_by', {
+            label
+          }),
+          className: styles.accordion,
+          children: /*#__PURE__*/_jsx("div", {
+            className: styles.content,
+            children: values.map(value => /*#__PURE__*/_jsx(ValueButton, {
+              id: value.id,
+              label: value.label,
+              isActive: selected && selected.includes(value.id),
+              onClick: this.handleClick
+            }, value.id))
+          })
+        })
+      })
+    });
+  };
+  return Selector;
+}(PureComponent);
 Selector.defaultProps = {
   multi: false,
   onChange() {},