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

package/product/components/Characteristics/Characteristic/index.js

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -11,59 +11,60 @@ import transition from "../transition";
 /**
  * A single characteristic.
  */
-class Characteristic extends PureComponent {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      highlight: false,
-      sheet: false
-    };
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+let Characteristic = /*#__PURE__*/function (_PureComponent) {
+  /**
+   * @param {Object} props The component props
+   */
+  function Characteristic(props) {
+    var _this;
+    _this = _PureComponent.call(this, props) || this;
     /**
      * @param {string} defaultLabel The default button label.
      * @return {string}
      */
-    this.getButtonLabel = defaultLabel => {
-      if (!this.props.selected) {
+    _this.getButtonLabel = defaultLabel => {
+      if (!_this.props.selected) {
         return defaultLabel;
       }
-      const value = this.props.values.find(val => val.id === this.props.selected);
+      const value = _this.props.values.find(val => val.id === _this.props.selected);
       return value.label;
     };
     /**
      * @param {Object} event The event object.
      */
-    this.handleButtonClick = event => {
+    _this.handleButtonClick = event => {
       event.preventDefault();
-      if (this.props.disabled) {
+      if (_this.props.disabled) {
         return;
       }
-      this.setState({
+      _this.setState({
         sheet: true
       });
     };
     /**
      * @param {string} valueId The ID of the selected value.
      */
-    this.handleItemSelection = valueId => {
-      this.props.select({
-        id: this.props.id,
+    _this.handleItemSelection = valueId => {
+      _this.props.select({
+        id: _this.props.id,
         value: valueId
       });
-      this.closeSheet();
+      _this.closeSheet();
     };
-    this.closeSheet = () => {
-      this.setState({
+    _this.closeSheet = () => {
+      _this.setState({
         sheet: false
       });
     };
-    this.sheetDidClose = () => {
-      if (this.props.charRef && this.props.charRef.current) {
+    _this.sheetDidClose = () => {
+      if (_this.props.charRef && _this.props.charRef.current) {
         // Focus the element that triggered the CharacteristicsSheet after it closes
-        this.props.charRef.current.focus();
+        _this.props.charRef.current.focus();
       }
     };
-    this.removeHighlight = () => {
-      this.setState({
+    _this.removeHighlight = () => {
+      _this.setState({
         highlight: false
       });
     };
@@ -72,58 +73,72 @@ class Characteristic extends PureComponent {
      * @param {string} state The current transition state.
      * @returns {JSX}
      */
-    this.transitionRenderer = state => {
+    _this.transitionRenderer = state => {
       const {
         __
-      } = this.context.i18n();
+      } = _this.context.i18n();
       const {
         disabled,
         selected,
         charRef,
         label
-      } = this.props;
+      } = _this.props;
       const translatedLabel = __('product.pick_an_attribute', [label]);
-      const buttonLabel = this.getButtonLabel(translatedLabel);
+      const buttonLabel = _this.getButtonLabel(translatedLabel);
       const classes = classNames(styles.button, {
         [styles.buttonDisabled]: disabled
       }, 'theme__product__characteristic');
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/_jsxs("div", {
         role: "button",
         "aria-disabled": disabled,
         "aria-haspopup": !disabled,
         tabIndex: 0,
         className: classes,
-        onClick: this.handleButtonClick,
+        onClick: _this.handleButtonClick,
         onKeyDown: () => {},
         ref: charRef,
         style: transition[state],
-        "data-test-id": label
-      }, selected && /*#__PURE__*/React.createElement("div", {
-        className: `${styles.label} theme__product__characteristic__label`
-      }, label), /*#__PURE__*/React.createElement("div", _extends({
-        className: `${styles.selection} theme__product__characteristic__selection`
-      }, selected && {
-        'data-selected': true
-      }), buttonLabel), /*#__PURE__*/React.createElement(ResponsiveContainer, {
-        breakpoint: ">xs",
-        webOnly: true
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.arrow
-      }, /*#__PURE__*/React.createElement(ArrowDropIcon, null))));
+        "data-test-id": label,
+        children: [selected && /*#__PURE__*/_jsx("div", {
+          className: `${styles.label} theme__product__characteristic__label`,
+          children: label
+        }), /*#__PURE__*/_jsx("div", {
+          className: `${styles.selection} theme__product__characteristic__selection`,
+          ...(selected && {
+            'data-selected': true
+          }),
+          children: buttonLabel
+        }), /*#__PURE__*/_jsx(ResponsiveContainer, {
+          breakpoint: ">xs",
+          webOnly: true,
+          children: /*#__PURE__*/_jsx("div", {
+            className: styles.arrow,
+            children: /*#__PURE__*/_jsx(ArrowDropIcon, {})
+          })
+        })]
+      });
     };
+    _this.state = {
+      highlight: false,
+      sheet: false
+    };
+    return _this;
   }
+
   /**
    * @param {Object} nextProps The next component props.
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  _inheritsLoose(Characteristic, _PureComponent);
+  var _proto = Characteristic.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({
       highlight: nextProps.highlight
     });
-  }
+  };
   /**
    * @return {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       __
     } = this.context.i18n();
@@ -135,23 +150,27 @@ class Characteristic extends PureComponent {
     } = this.props;
     const displayLabel = this.props.label;
     const translatedLabel = __('product.pick_an_attribute', [displayLabel]);
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Transition, {
-      in: this.state.highlight,
-      timeout: 500,
-      onEntered: this.removeHighlight
-    }, this.transitionRenderer), /*#__PURE__*/React.createElement(Sheet, {
-      charId: id,
-      contextRef: charRef,
-      items: values,
-      label: translatedLabel,
-      onClose: this.closeSheet,
-      onDidClose: this.sheetDidClose,
-      onSelect: this.handleItemSelection,
-      open: this.state.sheet,
-      selectedValue: selected
-    }));
-  }
-}
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Transition, {
+        in: this.state.highlight,
+        timeout: 500,
+        onEntered: this.removeHighlight,
+        children: this.transitionRenderer
+      }), /*#__PURE__*/_jsx(Sheet, {
+        charId: id,
+        contextRef: charRef,
+        items: values,
+        label: translatedLabel,
+        onClose: this.closeSheet,
+        onDidClose: this.sheetDidClose,
+        onSelect: this.handleItemSelection,
+        open: this.state.sheet,
+        selectedValue: selected
+      })]
+    });
+  };
+  return Characteristic;
+}(PureComponent);
 Characteristic.contextTypes = {
   i18n: PropTypes.func
 };

package/product/components/Characteristics/Swatch/index.js

@@ -1,4 +1,5 @@
-import React, { PureComponent, Fragment } from 'react';
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Transition from 'react-transition-group/Transition';
@@ -9,50 +10,59 @@ import transition from "../transition";
 /**
  * A single characteristic swatch type.
  */
-class Swatch extends PureComponent {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      highlight: false
-    };
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+let Swatch = /*#__PURE__*/function (_PureComponent) {
+  /**
+   * @param {Object} props The component props
+   */
+  function Swatch(props) {
+    var _this;
+    _this = _PureComponent.call(this, props) || this;
     /**
      * @param {string} charLabel The default button label.
      * @return {string}
      */
-    this.getLabel = charLabel => {
-      if (!this.props.selected) {
+    _this.getLabel = charLabel => {
+      if (!_this.props.selected) {
         return charLabel;
       }
-      const value = this.props.values.find(val => val.id === this.props.selected);
+      const value = _this.props.values.find(val => val.id === _this.props.selected);
       return `${charLabel} - ${value.label}`;
     };
     /**
      * @param {string} valueId The ID of the selected value.
      */
-    this.handleItemSelection = valueId => {
-      this.props.select({
-        id: this.props.id,
+    _this.handleItemSelection = valueId => {
+      _this.props.select({
+        id: _this.props.id,
         value: valueId
       });
     };
-    this.removeHighlight = () => {
-      this.setState({
+    _this.removeHighlight = () => {
+      _this.setState({
         highlight: false
       });
     };
+    _this.state = {
+      highlight: false
+    };
+    return _this;
   }
+
   /**
    * @param {Object} nextProps The next component props.
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  _inheritsLoose(Swatch, _PureComponent);
+  var _proto = Swatch.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({
       highlight: nextProps.highlight
     });
-  }
+  };
   /**
    * @return {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       id,
       disabled,
@@ -65,26 +75,32 @@ class Swatch extends PureComponent {
       label,
       values
     };
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Transition, {
-      in: this.state.highlight,
-      timeout: 500,
-      onEntered: this.removeHighlight
-    }, state => /*#__PURE__*/React.createElement("div", {
-      "aria-hidden": true,
-      className: classNames(styles.label, {
-        [styles.labelDisabled]: disabled
-      }),
-      ref: charRef,
-      style: transition[state],
-      "data-test-id": label
-    }, this.getLabel(label))), /*#__PURE__*/React.createElement("div", {
-      className: styles.items
-    }, /*#__PURE__*/React.createElement(VariantSwatch, {
-      swatch: swatch,
-      onClick: this.handleItemSelection
-    })));
-  }
-}
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Transition, {
+        in: this.state.highlight,
+        timeout: 500,
+        onEntered: this.removeHighlight,
+        children: state => /*#__PURE__*/_jsx("div", {
+          "aria-hidden": true,
+          className: classNames(styles.label, {
+            [styles.labelDisabled]: disabled
+          }),
+          ref: charRef,
+          style: transition[state],
+          "data-test-id": label,
+          children: this.getLabel(label)
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.items,
+        children: /*#__PURE__*/_jsx(VariantSwatch, {
+          swatch: swatch,
+          onClick: this.handleItemSelection
+        })
+      })]
+    });
+  };
+  return Swatch;
+}(PureComponent);
 Swatch.defaultProps = {
   selected: null
 };

package/product/components/Characteristics/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { isBeta } from '@shopgate/engage/core';
@@ -11,14 +12,16 @@ import Swatch from "./Swatch";
 /**
  * The Characteristics component.
  */
-class Characteristics extends PureComponent {
-  constructor(...args) {
-    super(...args);
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+let Characteristics = /*#__PURE__*/function (_PureComponent) {
+  function Characteristics(...args) {
+    var _this;
+    _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;
     /**
      * @param {Object} props The consumer props.
      * @returns {JSX}
      */
-    this.consumeRenderer = ({
+    _this.consumeRenderer = ({
       conditioner,
       setCharacteristics,
       characteristics
@@ -26,11 +29,11 @@ class Characteristics extends PureComponent {
       const {
         productId,
         variantId
-      } = this.props;
-      return /*#__PURE__*/React.createElement(ProductCharacteristics, {
+      } = _this.props;
+      return /*#__PURE__*/_jsx(ProductCharacteristics, {
         productId: productId,
         variantId: variantId,
-        render: this.renderer,
+        render: _this.renderer,
         conditioner: conditioner,
         finishTimeout: 200,
         setCharacteristics: setCharacteristics,
@@ -42,26 +45,39 @@ class Characteristics extends PureComponent {
      * @param {Object} props The renderer props.
      * @returns {JSX}
      */
-    this.renderer = props => {
+    _this.renderer = props => {
       if (isBeta() && !!props.swatch) {
-        return /*#__PURE__*/React.createElement(Swatch, props);
+        return /*#__PURE__*/_jsx(Swatch, {
+          ...props
+        });
       }
-      return /*#__PURE__*/React.createElement(Characteristic, props);
+      return /*#__PURE__*/_jsx(Characteristic, {
+        ...props
+      });
     };
+    return _this;
   }
+  _inheritsLoose(Characteristics, _PureComponent);
+  var _proto = Characteristics.prototype;
   /**
    * @returns {JSX}
    */
-  render() {
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Portal, {
-      name: PRODUCT_VARIANT_SELECT_BEFORE
-    }), /*#__PURE__*/React.createElement(Portal, {
-      name: PRODUCT_VARIANT_SELECT
-    }, /*#__PURE__*/React.createElement(ProductContext.Consumer, null, this.consumeRenderer)), /*#__PURE__*/React.createElement(Portal, {
-      name: PRODUCT_VARIANT_SELECT_AFTER
-    }));
-  }
-}
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Portal, {
+        name: PRODUCT_VARIANT_SELECT_BEFORE
+      }), /*#__PURE__*/_jsx(Portal, {
+        name: PRODUCT_VARIANT_SELECT,
+        children: /*#__PURE__*/_jsx(ProductContext.Consumer, {
+          children: this.consumeRenderer
+        })
+      }), /*#__PURE__*/_jsx(Portal, {
+        name: PRODUCT_VARIANT_SELECT_AFTER
+      })]
+    });
+  };
+  return Characteristics;
+}(PureComponent);
 Characteristics.defaultProps = {
   productId: null,
   variantId: null

package/product/components/Description/index.js

@@ -13,36 +13,43 @@ import connect from "./connector";
  * @param {Function} props.navigate where to navigate on click
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Description({
   html,
   navigate,
   ...props
 }) {
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
+  return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PRODUCT_DESCRIPTION,
     portalProps: {
       html,
       navigate,
       ...props
-    }
-  }, html !== '' && /*#__PURE__*/React.createElement("div", {
-    className: `${container} engage__product__description`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(title, 'theme__description_heading')
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "product.description_heading"
-  })), /*#__PURE__*/React.createElement(PlaceholderParagraph, {
-    className: placeholder,
-    ready: !!html
-  }, /*#__PURE__*/React.createElement("div", {
-    className: content,
-    "data-test-id": "description"
-  }, /*#__PURE__*/React.createElement(HtmlSanitizer, {
-    settings: {
-      html,
-      handleClick: navigate
-    }
-  }, html)))));
+    },
+    children: html !== '' && /*#__PURE__*/_jsxs("div", {
+      className: `${container} engage__product__description`,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: classNames(title, 'theme__description_heading'),
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "product.description_heading"
+        })
+      }), /*#__PURE__*/_jsx(PlaceholderParagraph, {
+        className: placeholder,
+        ready: !!html,
+        children: /*#__PURE__*/_jsx("div", {
+          className: content,
+          "data-test-id": "description",
+          children: /*#__PURE__*/_jsx(HtmlSanitizer, {
+            settings: {
+              html,
+              handleClick: navigate
+            },
+            children: html
+          })
+        })
+      })]
+    })
+  });
 }
 Description.defaultProps = {
   html: null,

package/product/components/EffectivityDates/index.js

@@ -13,6 +13,7 @@ import connect from "./connector";
  * The Product Effectivity Dates component.
  * @return {JSX}
  */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const EffectivityDates = ({
   dates,
   children,
@@ -27,48 +28,52 @@ const EffectivityDates = ({
   const startDate = dates.startDate ? new Date(dates.startDate) : null;
   const endDate = dates.endDate ? new Date(dates.endDate) : null;
   const hintAddClass = styles && styles.hint ? css(styles.hint).toString() : null;
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
+  return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PRODUCT_EFFECTIVITY_DATES,
     portalProps: {
       dates,
       productNotAvailable,
       productId
-    }
-  }, /*#__PURE__*/React.createElement(TimeBoundary, {
-    start: startDate,
-    end: endDate
-  }, ({
-    before,
-    between,
-    after
-  }) => {
-    if (before) {
-      return showScheduledLabel(startDate, settings) ? /*#__PURE__*/React.createElement(I18n.Text, {
-        string: "product.available.at",
-        params: {
-          startDate
-        },
-        className: classNames(hint, hintAddClass)
-      }) : children;
-    }
-    if (between) {
-      return /*#__PURE__*/React.createElement(Fragment, null, children, showExpiringLabel(endDate, settings) && /*#__PURE__*/React.createElement(I18n.Text, {
-        string: "product.available.until",
-        params: {
-          endDate
-        },
-        className: classNames(hint, hintAddClass)
-      }));
-    }
-    if (after) {
-      productNotAvailable();
-      return showExpiringLabel(endDate, settings) ? /*#__PURE__*/React.createElement(I18n.Text, {
-        string: "product.available.not",
-        className: classNames(hint, hintAddClass, notAvailable)
-      }) : children;
-    }
-    return children;
-  }));
+    },
+    children: /*#__PURE__*/_jsx(TimeBoundary, {
+      start: startDate,
+      end: endDate,
+      children: ({
+        before,
+        between,
+        after
+      }) => {
+        if (before) {
+          return showScheduledLabel(startDate, settings) ? /*#__PURE__*/_jsx(I18n.Text, {
+            string: "product.available.at",
+            params: {
+              startDate
+            },
+            className: classNames(hint, hintAddClass)
+          }) : children;
+        }
+        if (between) {
+          return /*#__PURE__*/_jsxs(_Fragment, {
+            children: [children, showExpiringLabel(endDate, settings) && /*#__PURE__*/_jsx(I18n.Text, {
+              string: "product.available.until",
+              params: {
+                endDate
+              },
+              className: classNames(hint, hintAddClass)
+            })]
+          });
+        }
+        if (after) {
+          productNotAvailable();
+          return showExpiringLabel(endDate, settings) ? /*#__PURE__*/_jsx(I18n.Text, {
+            string: "product.available.not",
+            className: classNames(hint, hintAddClass, notAvailable)
+          }) : children;
+        }
+        return children;
+      }
+    })
+  });
 };
 EffectivityDates.defaultProps = {
   children: null,

package/product/components/FilterBar/FilterBarProvider.js

@@ -9,6 +9,7 @@ import connect from "./FilterBarProvider.connector";
  * @param {Object} props React props.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const FilterBarProvider = ({
   children,
   navigate,
@@ -34,9 +35,10 @@ const FilterBarProvider = ({
     filterModalOpen,
     setFilterModalOpen
   }), [filterModalOpen, navigate, routeFilterState, updateFilters]);
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: contextValue
-  }, children);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: contextValue,
+    children: children
+  });
 };
 FilterBarProvider.defaultProps = {
   routeFilterState: {}