@shopgate/engage 7.30.0-alpha.10 → 7.30.0-alpha.11

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: {}

package/product/components/FilterBar/components/Content/components/FilterButton/index.js

@@ -8,28 +8,35 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @return {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function FilterButton({
   openFilters
 }) {
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/_jsx("button", {
     className: `${styles.button} theme__filter-bar__filter-button`,
     onClick: openFilters,
     "data-test-id": "filterButton",
-    type: "button"
-  }, /*#__PURE__*/React.createElement(Ripple, {
-    className: styles.filterButtonRipple,
-    fill: true
-  }, /*#__PURE__*/React.createElement(Grid, {
-    component: "div"
-  }, /*#__PURE__*/React.createElement(Grid.Item, {
-    className: styles.filterButton,
-    component: "div"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles.filterButtonLabel
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "titles.filter"
-  }))), /*#__PURE__*/React.createElement(Grid.Item, {
-    component: "div"
-  }, /*#__PURE__*/React.createElement(FilterIcon, null)))));
+    type: "button",
+    children: /*#__PURE__*/_jsx(Ripple, {
+      className: styles.filterButtonRipple,
+      fill: true,
+      children: /*#__PURE__*/_jsxs(Grid, {
+        component: "div",
+        children: [/*#__PURE__*/_jsx(Grid.Item, {
+          className: styles.filterButton,
+          component: "div",
+          children: /*#__PURE__*/_jsx("span", {
+            className: styles.filterButtonLabel,
+            children: /*#__PURE__*/_jsx(I18n.Text, {
+              string: "titles.filter"
+            })
+          })
+        }), /*#__PURE__*/_jsx(Grid.Item, {
+          component: "div",
+          children: /*#__PURE__*/_jsx(FilterIcon, {})
+        })]
+      })
+    })
+  });
 }
 export default FilterButton;

package/product/components/FilterBar/components/Content/components/FilterChips/index.js

@@ -13,6 +13,7 @@ import { container, label } from "./style";
  * The FilterChips component.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const FilterChips = ({
   filters,
   routeId,
@@ -91,16 +92,17 @@ const FilterChips = ({
             const editLabel = i18n.text('filter.edit', {
               filter: labelValue
             });
-            entries.push(/*#__PURE__*/React.createElement(Chip, {
+            entries.push(/*#__PURE__*/_jsx(Chip, {
               id: key,
-              key: `filter-${key}`,
               onRemove: handleRemove,
               onClick: openFilters,
               removeLabel: removeLabel,
-              editLabel: editLabel
-            }, /*#__PURE__*/React.createElement("span", {
-              className: label
-            }, pricesFormatted)));
+              editLabel: editLabel,
+              children: /*#__PURE__*/_jsx("span", {
+                className: label,
+                children: pricesFormatted
+              })
+            }, `filter-${key}`));
             break;
           }
         default:
@@ -115,16 +117,17 @@ const FilterChips = ({
             const editLabel = i18n.text('filter.edit', {
               filter: filterFormatted
             });
-            entries.push(/*#__PURE__*/React.createElement(Chip, {
+            entries.push(/*#__PURE__*/_jsx(Chip, {
               id: value.id,
-              key: `filter-${value.id}`,
               onRemove: () => handleRemove(filter.id, value.id),
               onClick: openFilters,
               removeLabel: removeLabel,
-              editLabel: editLabel
-            }, /*#__PURE__*/React.createElement("span", {
-              className: label
-            }, filterFormatted)));
+              editLabel: editLabel,
+              children: /*#__PURE__*/_jsx("span", {
+                className: label,
+                children: filterFormatted
+              })
+            }, `filter-${value.id}`));
           });
           break;
       }
@@ -137,13 +140,15 @@ const FilterChips = ({
   if (chips.length === 0) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${container} theme__filter-bar__filter-chips`
-  }, /*#__PURE__*/React.createElement(ChipLayout, {
-    moreLabel: "filter.more",
-    handleMoreButton: openFilters,
-    pathname: currentPathname
-  }, chips));
+  return /*#__PURE__*/_jsx("div", {
+    className: `${container} theme__filter-bar__filter-chips`,
+    children: /*#__PURE__*/_jsx(ChipLayout, {
+      moreLabel: "filter.more",
+      handleMoreButton: openFilters,
+      pathname: currentPathname,
+      children: chips
+    })
+  });
 };
 FilterChips.defaultProps = {
   currentPathname: '',

package/product/components/FilterBar/components/Content/components/Sort/components/Item/index.js

@@ -8,12 +8,14 @@ import styles from "./style";
  * @param {Object} props The components props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Item = ({
   children
-}) => /*#__PURE__*/React.createElement(Ripple, {
+}) => /*#__PURE__*/_jsx(Ripple, {
   fill: true,
-  className: styles
-}, children);
+  className: styles,
+  children: children
+});
 Item.defaultProps = {
   children: null
 };

package/product/components/FilterBar/components/Content/components/Sort/index.js

@@ -9,26 +9,28 @@ import styles from "./style";
  * @param {Object} props The component props
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Sort = () => {
   const {
     activeOption,
     options,
     updateRoute
   } = useSort();
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
+  return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PORTAL_FILTER_SORT_OPTIONS,
     portalProps: {
       items: options
-    }
-  }, /*#__PURE__*/React.createElement(SelectBox, {
-    handleSelectionUpdate: updateRoute,
-    items: options,
-    initialValue: activeOption,
-    icon: ArrowDropIcon,
-    item: Item,
-    className: `${styles.selectBox} theme__filter-bar__sort`,
-    classNames: styles,
-    testId: "sorting"
-  }));
+    },
+    children: /*#__PURE__*/_jsx(SelectBox, {
+      handleSelectionUpdate: updateRoute,
+      items: options,
+      initialValue: activeOption,
+      icon: ArrowDropIcon,
+      item: Item,
+      className: `${styles.selectBox} theme__filter-bar__sort`,
+      classNames: styles,
+      testId: "sorting"
+    })
+  });
 };
 export default Sort;

package/product/components/FilterBar/components/Content/index.js

@@ -13,6 +13,7 @@ import styles from "./style";
  * The filter bar content component.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function FilterBarContent({
   onChipCountUpdate
 }) {
@@ -29,17 +30,20 @@ function FilterBarContent({
   const {
     filters
   } = state;
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: styles
-  }, /*#__PURE__*/React.createElement(Sort, null), /*#__PURE__*/React.createElement(FilterButton, {
-    openFilters: openFilters
-  })), /*#__PURE__*/React.createElement(FilterChips, {
-    openFilters: openFilters,
-    filters: filters,
-    routeId: routeId,
-    scrollTop: scrollTop,
-    onChipCountUpdate: onChipCountUpdate
-  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: styles,
+      children: [/*#__PURE__*/_jsx(Sort, {}), /*#__PURE__*/_jsx(FilterButton, {
+        openFilters: openFilters
+      })]
+    }), /*#__PURE__*/_jsx(FilterChips, {
+      openFilters: openFilters,
+      filters: filters,
+      routeId: routeId,
+      scrollTop: scrollTop,
+      onChipCountUpdate: onChipCountUpdate
+    })]
+  });
 }
 FilterBarContent.defaultProps = {
   onChipCountUpdate: noop