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

package/product/components/Options/components/Option/index.js

@@ -8,33 +8,36 @@ import { ProductContext } from '@shopgate/engage/product/contexts';
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Option = ({
   id,
   label,
   items,
   value,
   onChange
-}) => /*#__PURE__*/React.createElement(ProductContext.Consumer, null, ({
-  currency
-}) => /*#__PURE__*/React.createElement("div", {
-  key: id,
-  "data-test-id": label
-}, /*#__PURE__*/React.createElement(Picker, {
-  label: label,
-  items: items.map(item => ({
-    ...item,
-    rightComponent: /*#__PURE__*/React.createElement(PriceDifference, {
-      currency: currency,
-      difference: item.priceDifference
+}) => /*#__PURE__*/_jsx(ProductContext.Consumer, {
+  children: ({
+    currency
+  }) => /*#__PURE__*/_jsx("div", {
+    "data-test-id": label,
+    children: /*#__PURE__*/_jsx(Picker, {
+      label: label,
+      items: items.map(item => ({
+        ...item,
+        rightComponent: /*#__PURE__*/_jsx(PriceDifference, {
+          currency: currency,
+          difference: item.priceDifference
+        })
+      })),
+      placeholder: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "product.pick_an_attribute",
+        params: [label]
+      }),
+      value: value,
+      onChange: val => onChange(id, val, items.find(item => item.value === val).price)
     })
-  })),
-  placeholder: /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "product.pick_an_attribute",
-    params: [label]
-  }),
-  value: value,
-  onChange: val => onChange(id, val, items.find(item => item.value === val).price)
-})));
+  }, id)
+});
 Option.defaultProps = {
   value: null
 };

package/product/components/Options/components/TextOption/components/OptionInfo/index.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.string.replace.js";
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
@@ -12,6 +11,7 @@ import styles from "./style";
  * @param {Object} context The component context
  * @return {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const OptionInfo = ({
   required,
   label,
@@ -37,24 +37,28 @@ const OptionInfo = ({
   if (required) {
     ariaRequired = __('common.required');
   }
-  return /*#__PURE__*/React.createElement(Grid, {
-    className: styles.info
-  }, required && /*#__PURE__*/React.createElement(Grid.Item, {
-    className: styles.required,
-    "aria-hidden": true
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "common.required"
-  })), !!price && /*#__PURE__*/React.createElement(Grid.Item, {
-    grow: 1,
-    className: styles.price,
-    "aria-hidden": true
-  }, `${label}: `, /*#__PURE__*/React.createElement(I18n.Price, {
-    currency: currency,
-    price: price
-  })), /*#__PURE__*/React.createElement("div", {
-    hidden: true,
-    id: optionInfoId
-  }, ariaRequired, ariaPrice, info));
+  return /*#__PURE__*/_jsxs(Grid, {
+    className: styles.info,
+    children: [required && /*#__PURE__*/_jsx(Grid.Item, {
+      className: styles.required,
+      "aria-hidden": true,
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "common.required"
+      })
+    }), !!price && /*#__PURE__*/_jsxs(Grid.Item, {
+      grow: 1,
+      className: styles.price,
+      "aria-hidden": true,
+      children: [`${label}: `, /*#__PURE__*/_jsx(I18n.Price, {
+        currency: currency,
+        price: price
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      hidden: true,
+      id: optionInfoId,
+      children: [ariaRequired, ariaPrice, info]
+    })]
+  });
 };
 OptionInfo.contextTypes = {
   i18n: PropTypes.func
@@ -64,10 +68,13 @@ OptionInfo.contextTypes = {
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-const OptionInfoWithProductContext = props => /*#__PURE__*/React.createElement(ProductContext.Consumer, null, ({
-  currency
-}) => /*#__PURE__*/React.createElement(OptionInfo, _extends({
-  currency: currency
-}, props)));
+const OptionInfoWithProductContext = props => /*#__PURE__*/_jsx(ProductContext.Consumer, {
+  children: ({
+    currency
+  }) => /*#__PURE__*/_jsx(OptionInfo, {
+    currency: currency,
+    ...props
+  })
+});
 export default /*#__PURE__*/memo(OptionInfoWithProductContext);
 export { OptionInfo };

package/product/components/Options/components/TextOption/components/OptionInfo/spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOptions';
 import { OptionInfo } from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 const optionInfoText = 'Some Text';
 const optionInfoId = 'some-id';
 jest.mock('@shopgate/engage/components', () => {
@@ -27,7 +28,7 @@ jest.mock('@shopgate/engage/product/contexts', () => ({
 }));
 describe('<OptionInfo />', () => {
   it('should not render when not required and no price', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(OptionInfo, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(OptionInfo, {
       required: false,
       label: "",
       price: 0,
@@ -38,7 +39,7 @@ describe('<OptionInfo />', () => {
     expect(wrapper).toBeEmptyRender();
   });
   it('should render required element', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(OptionInfo, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(OptionInfo, {
       required: true,
       label: "",
       price: 0,
@@ -49,7 +50,7 @@ describe('<OptionInfo />', () => {
     expect(wrapper).toMatchSnapshot();
   });
   it('should render price element', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(OptionInfo, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(OptionInfo, {
       required: false,
       label: "Label",
       price: 10,

package/product/components/Options/components/TextOption/index.js

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Fragment, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Transition from 'react-transition-group/Transition';
@@ -14,23 +14,25 @@ import styles from "./style";
 /**
  * The TextOption component
  */
-class TextOption extends PureComponent {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+let TextOption = /*#__PURE__*/function (_PureComponent) {
   /**
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
+  function TextOption(props) {
+    var _this;
+    _this = _PureComponent.call(this, props) || this;
     /**
      * @param {Object} ref ref
      */
-    this.setRef = ref => {
-      this.ref = ref;
+    _this.setRef = ref => {
+      _this.ref = ref;
     };
     /**
      * Remove highlight state
      */
-    this.removeHighlight = () => {
-      this.setState({
+    _this.removeHighlight = () => {
+      _this.setState({
         highlight: false
       });
     };
@@ -38,18 +40,18 @@ class TextOption extends PureComponent {
      * Checks if required input is done.
      * @return {boolean}
      */
-    this.checkInput = () => {
-      if (!this.props.required) {
+    _this.checkInput = () => {
+      if (!_this.props.required) {
         return true;
       }
-      if (this.props.value) {
+      if (_this.props.value) {
         return true;
       }
       broadcastLiveMessage('product.fill_out_required_input_first');
-      this.ref.scrollIntoView({
+      _this.ref.scrollIntoView({
         behavior: 'smooth'
       });
-      this.setState({
+      _this.setState({
         highlight: true
       });
       return false;
@@ -57,53 +59,57 @@ class TextOption extends PureComponent {
     /**
      * @returns {JSX}
      */
-    this.infoIcon = () => {
-      if (!this.props.info) {
+    _this.infoIcon = () => {
+      if (!_this.props.info) {
         return null;
       }
       const {
         label,
         info,
         showModal
-      } = this.props;
-      return /*#__PURE__*/React.createElement("div", {
+      } = _this.props;
+      return /*#__PURE__*/_jsx("div", {
         onClick: () => showModal({
           title: label,
           message: info
         }),
-        "aria-hidden": true
-      }, /*#__PURE__*/React.createElement(InfoIcon, {
-        size: 24,
-        className: styles.infoIcon
-      }));
+        "aria-hidden": true,
+        children: /*#__PURE__*/_jsx(InfoIcon, {
+          size: 24,
+          className: styles.infoIcon
+        })
+      });
     };
     /**
      * 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.ref.blur();
+        _this.ref.blur();
       }
     };
     /**
      * @param {string} val value.
      */
-    this.handleChange = val => {
-      this.props.onChange(this.props.id, val, this.props.price);
+    _this.handleChange = val => {
+      _this.props.onChange(_this.props.id, val, _this.props.price);
     };
-    this.handleDebounced = debounce(this.handleChange, 300);
-    this.state = {
+    _this.handleDebounced = debounce(_this.handleChange, 300);
+    _this.state = {
       highlight: false
     };
-    this.ref = null;
-    props.conditioner.addConditioner(`text-option-${props.id}`, this.checkInput);
+    _this.ref = null;
+    props.conditioner.addConditioner(`text-option-${props.id}`, _this.checkInput);
+    return _this;
   }
+  _inheritsLoose(TextOption, _PureComponent);
+  var _proto = TextOption.prototype;
   /**
    * @return {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       id,
       label,
@@ -113,45 +119,54 @@ class TextOption extends PureComponent {
       info
     } = this.props;
     const optionInfoId = id;
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.row
-    }, /*#__PURE__*/React.createElement(Transition, {
-      in: this.state.highlight,
-      timeout: 700,
-      onEntered: this.removeHighlight
-    }, state => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: styles.wrapper,
-      style: transition[state]
-    }, /*#__PURE__*/React.createElement(TextField, {
-      setRef: this.setRef,
-      name: `text_${id}`,
-      value: value,
-      onChange: this.handleDebounced,
-      onKeyPress: this.handleKeyPress,
-      placeholder: label,
-      label: label,
-      rightElement: this.infoIcon(),
-      "data-test-id": label,
-      hasUnderline: false,
-      className: styles.element,
-      attributes: {
-        'aria-describedby': optionInfoId
-      }
-    })), /*#__PURE__*/React.createElement(OptionInformation, {
-      label: label,
-      required: required,
-      price: price,
-      info: info,
-      optionInfoId: optionInfoId
-    }))));
-  }
-}
+    return /*#__PURE__*/_jsx("div", {
+      className: styles.row,
+      children: /*#__PURE__*/_jsx(Transition, {
+        in: this.state.highlight,
+        timeout: 700,
+        onEntered: this.removeHighlight,
+        children: state => /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("div", {
+            className: styles.wrapper,
+            style: transition[state],
+            children: /*#__PURE__*/_jsx(TextField, {
+              setRef: this.setRef,
+              name: `text_${id}`,
+              value: value,
+              onChange: this.handleDebounced,
+              onKeyPress: this.handleKeyPress,
+              placeholder: label,
+              label: label,
+              rightElement: this.infoIcon(),
+              "data-test-id": label,
+              hasUnderline: false,
+              className: styles.element,
+              attributes: {
+                'aria-describedby': optionInfoId
+              }
+            })
+          }), /*#__PURE__*/_jsx(OptionInformation, {
+            label: label,
+            required: required,
+            price: price,
+            info: info,
+            optionInfoId: optionInfoId
+          })]
+        })
+      })
+    });
+  };
+  return TextOption;
+}(PureComponent);
 TextOption.defaultProps = {
   info: null,
   value: null
 };
-export default withShowModal(props => /*#__PURE__*/React.createElement(ProductContext.Consumer, null, ({
-  conditioner
-}) => /*#__PURE__*/React.createElement(TextOption, _extends({
-  conditioner: conditioner
-}, props))));
+export default withShowModal(props => /*#__PURE__*/_jsx(ProductContext.Consumer, {
+  children: ({
+    conditioner
+  }) => /*#__PURE__*/_jsx(TextOption, {
+    conditioner: conditioner,
+    ...props
+  })
+}));

package/product/components/Options/index.js

@@ -7,23 +7,27 @@ import Option from "./components/Option";
 import TextOption from "./components/TextOption";
 
 // Export for theme api
+import { jsx as _jsx } from "react/jsx-runtime";
 export { TextOption, Option as SelectOption };
 
 /**
  * The Product Options component.
  * @returns {JSX}
  */
-const Options = () => /*#__PURE__*/React.createElement(ProductContext.Consumer, null, ({
-  productId,
-  variantId,
-  options
-}) => /*#__PURE__*/React.createElement(SurroundPortals, {
-  portalName: PRODUCT_OPTIONS,
-  portalProps: {
-    productId: variantId || productId
-  }
-}, /*#__PURE__*/React.createElement(Content /* props needed in connector */, {
-  productId: variantId || productId,
-  currentOptions: options
-})));
+const Options = () => /*#__PURE__*/_jsx(ProductContext.Consumer, {
+  children: ({
+    productId,
+    variantId,
+    options
+  }) => /*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: PRODUCT_OPTIONS,
+    portalProps: {
+      productId: variantId || productId
+    },
+    children: /*#__PURE__*/_jsx(Content /* props needed in connector */, {
+      productId: variantId || productId,
+      currentOptions: options
+    })
+  })
+});
 export default Options;

package/product/components/OrderQuantityHint/index.js

@@ -13,6 +13,7 @@ import { hint } from "./style";
  * The Product Order Quantity Hint component.
  * @return {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const OrderQuantityHint = ({
   stock,
   product,
@@ -39,30 +40,34 @@ const OrderQuantityHint = ({
     return '';
   }, [hasCatchWeight, productUnit]);
   const maxDecimals = useMemo(() => hasCatchWeight && productUnit ? 2 : 0, [hasCatchWeight, productUnit]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: PRODUCT_ORDER_QUANTITY,
-    portalProps: {
-      stock
-    }
-  }, showContent && stock && !!stock.minOrderQuantity && /*#__PURE__*/React.createElement("div", {
-    className: hint
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "product.minOrderQuantity",
-    params: {
-      quantity: formatFloat(stock.minOrderQuantity, maxDecimals),
-      unit
-    }
-  })), showContent && stock && !!stock.maxOrderQuantity && /*#__PURE__*/React.createElement("div", {
-    className: hint
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "product.maxOrderQuantity",
-    params: {
-      quantity: formatFloat(stock.maxOrderQuantity, maxDecimals),
-      unit
-    }
-  }))));
+  return /*#__PURE__*/_jsx("div", {
+    className: className,
+    children: /*#__PURE__*/_jsxs(SurroundPortals, {
+      portalName: PRODUCT_ORDER_QUANTITY,
+      portalProps: {
+        stock
+      },
+      children: [showContent && stock && !!stock.minOrderQuantity && /*#__PURE__*/_jsx("div", {
+        className: hint,
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "product.minOrderQuantity",
+          params: {
+            quantity: formatFloat(stock.minOrderQuantity, maxDecimals),
+            unit
+          }
+        })
+      }), showContent && stock && !!stock.maxOrderQuantity && /*#__PURE__*/_jsx("div", {
+        className: hint,
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "product.maxOrderQuantity",
+          params: {
+            quantity: formatFloat(stock.maxOrderQuantity, maxDecimals),
+            unit
+          }
+        })
+      })]
+    })
+  });
 };
 OrderQuantityHint.defaultProps = {
   className: null,

package/product/components/PriceDifference/index.js

@@ -12,6 +12,7 @@ import styles from "./style";
  * @param {number} props.difference The price difference.
  * @return {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const PriceDifference = ({
   className,
   currency,
@@ -24,7 +25,7 @@ const PriceDifference = ({
     [styles.positive]: difference > 0,
     [styles.negative]: difference < 0
   });
-  return /*#__PURE__*/React.createElement(Price, {
+  return /*#__PURE__*/_jsx(Price, {
     className: priceClassName,
     currency: currency,
     unitPrice: difference

package/product/components/PriceInfo/PriceInfo.js

@@ -6,6 +6,7 @@ import { i18n } from '@shopgate/engage/core';
 import { ConditionalWrapper } from '@shopgate/engage/components';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import connect from "./PriceInfo.connector";
+import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   container: css({
     color: themeConfig.colors.shade3
@@ -58,18 +59,19 @@ const PriceInfo = ({
   if (!content) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(ConditionalWrapper, {
+  return /*#__PURE__*/_jsx(ConditionalWrapper, {
     condition: !!wrapper,
-    wrapper: wrapper
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.container, className, 'engage__product__price-info', {
-      [styles.noWrap]: content !== info
-    }),
-    dangerouslySetInnerHTML: {
-      __html: content
-    },
-    "data-test-id": `priceInfo: ${content}`
-  }));
+    wrapper: wrapper,
+    children: /*#__PURE__*/_jsx("div", {
+      className: classNames(styles.container, className, 'engage__product__price-info', {
+        [styles.noWrap]: content !== info
+      }),
+      dangerouslySetInnerHTML: {
+        __html: content
+      },
+      "data-test-id": `priceInfo: ${content}`
+    })
+  });
 };
 PriceInfo.defaultProps = {
   product: null,

package/product/components/ProductBadges/index.js

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import kebabCase from 'lodash/kebabCase';
 import { SurroundPortals } from "../../../components";
 import { PORTAL_PRODUCT_BADGES } from "../../../components/constants";
+import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   root: css({
     position: 'absolute',
@@ -45,12 +46,14 @@ const ProductBadges = ({
     }
     return `product_badges__${kebabCase(location)}`;
   }, [location]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.root, className, 'product_badges', locationClass)
-  }, /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: PORTAL_PRODUCT_BADGES,
-    portalProps: props
-  }, children));
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames(styles.root, className, 'product_badges', locationClass),
+    children: /*#__PURE__*/_jsx(SurroundPortals, {
+      portalName: PORTAL_PRODUCT_BADGES,
+      portalProps: props,
+      children: children
+    })
+  });
 };
 ProductBadges.defaultProps = {
   portalProps: null,