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

package/product/components/Media/MediaImage.js

@@ -14,6 +14,7 @@ import { innerShadow } from "./style";
  * The featured image component.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const MediaImage = ({
   url,
   altText,
@@ -29,27 +30,29 @@ const MediaImage = ({
     [innerShadow]: showInnerShadow
   });
   if (placeholder) {
-    return /*#__PURE__*/React.createElement(SurroundPortals, {
-      portalName: PORTAL_PRODUCT_IMAGE
-    }, /*#__PURE__*/React.createElement(MediaPlaceholder, {
-      className: classes
-    }));
+    return /*#__PURE__*/_jsx(SurroundPortals, {
+      portalName: PORTAL_PRODUCT_IMAGE,
+      children: /*#__PURE__*/_jsx(MediaPlaceholder, {
+        className: classes
+      })
+    });
   }
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
+  return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PORTAL_PRODUCT_IMAGE,
     portalProps: {
       src: url,
       resolutions
-    }
-  }, /*#__PURE__*/React.createElement(Image, {
-    src: url,
-    resolutions: resolutions,
-    alt: altText,
-    className: classes,
-    backgroundColor: "transparent",
-    onError: () => setPlaceholderEnabled(true),
-    animating: true
-  }));
+    },
+    children: /*#__PURE__*/_jsx(Image, {
+      src: url,
+      resolutions: resolutions,
+      alt: altText,
+      className: classes,
+      backgroundColor: "transparent",
+      onError: () => setPlaceholderEnabled(true),
+      animating: true
+    })
+  });
 };
 MediaImage.defaultProps = {
   url: defaultProps.url,

package/product/components/Media/MediaPlaceholder.js

@@ -8,16 +8,19 @@ import { placeholderContainer, placeholderContent, placeholderIcon } from "./sty
  * The media placeholder component.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const MediaPlaceholder = ({
   className
-}) => /*#__PURE__*/React.createElement("div", {
-  className: classnames(placeholderContainer, className)
-}, /*#__PURE__*/React.createElement("div", {
-  className: placeholderContent,
-  "data-test-id": "placeHolder"
-}, /*#__PURE__*/React.createElement(PlaceholderIcon, {
-  className: placeholderIcon
-})));
+}) => /*#__PURE__*/_jsx("div", {
+  className: classnames(placeholderContainer, className),
+  children: /*#__PURE__*/_jsx("div", {
+    className: placeholderContent,
+    "data-test-id": "placeHolder",
+    children: /*#__PURE__*/_jsx(PlaceholderIcon, {
+      className: placeholderIcon
+    })
+  })
+});
 MediaPlaceholder.defaultProps = {
   className: defaultProps.className
 };

package/product/components/MediaSlider/components/MediaImage/index.js

@@ -8,19 +8,21 @@ import { PRODUCT_SLIDER_IMAGE_FORMATS } from "../../constants";
  * The product media video slide component.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const MediaImage = ({
   media,
   onClick
-}) => /*#__PURE__*/React.createElement("div", {
+}) => /*#__PURE__*/_jsx("div", {
   onClick: onClick,
   onKeyDown: onClick,
   role: "button",
   tabIndex: "0",
-  className: full
-}, /*#__PURE__*/React.createElement(Image, {
-  url: media.url,
-  altText: media.altText,
-  resolutions: PRODUCT_SLIDER_IMAGE_FORMATS
-}));
+  className: full,
+  children: /*#__PURE__*/_jsx(Image, {
+    url: media.url,
+    altText: media.altText,
+    resolutions: PRODUCT_SLIDER_IMAGE_FORMATS
+  })
+});
 MediaImage.displayName = 'MediaSliderImage';
 export default MediaImage;

package/product/components/MediaSlider/components/MediaVideo/index.js

@@ -9,30 +9,35 @@ import { videoWrapper, videoResponsive, video } from "../../style";
  * The media video component.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const MediaVideo = ({
   connectivityType,
   media
 }) => {
   const settings = useWidgetSettings('@shopgate/engage/product/MediaSlider');
   const autoPlay = settings.videos.autoPlay[connectivityType] || false;
-  return /*#__PURE__*/React.createElement(IntersectionVisibility, null, ({
-    visible,
-    ratio,
-    setRef
-  }) => /*#__PURE__*/React.createElement("div", {
-    ref: setRef,
-    className: videoWrapper
-  }, /*#__PURE__*/React.createElement("div", {
-    className: videoResponsive
-  }, /*#__PURE__*/React.createElement(VideoPlayer, {
-    url: media.url,
-    playing: autoPlay && visible && ratio > 0.8,
-    width: "100%",
-    height: "100%",
-    controls: settings.videos.controls,
-    muted: settings.videos.muted,
-    loop: settings.videos.loop,
-    className: video
-  }))));
+  return /*#__PURE__*/_jsx(IntersectionVisibility, {
+    children: ({
+      visible,
+      ratio,
+      setRef
+    }) => /*#__PURE__*/_jsx("div", {
+      ref: setRef,
+      className: videoWrapper,
+      children: /*#__PURE__*/_jsx("div", {
+        className: videoResponsive,
+        children: /*#__PURE__*/_jsx(VideoPlayer, {
+          url: media.url,
+          playing: autoPlay && visible && ratio > 0.8,
+          width: "100%",
+          height: "100%",
+          controls: settings.videos.controls,
+          muted: settings.videos.muted,
+          loop: settings.videos.loop,
+          className: video
+        })
+      })
+    })
+  });
 };
 export default connect(MediaVideo);

package/product/components/MediaSlider/index.js

@@ -7,6 +7,7 @@ import MediaImage from "./components/MediaImage";
 import MediaVideo from "./components/MediaVideo";
 import connect from "./connector";
 import { container } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
 const typeRenders = {
   [MEDIA_TYPE_IMAGE]: MediaImage,
   [MEDIA_TYPE_VIDEO]: MediaVideo
@@ -44,28 +45,31 @@ const MediaSlider = ({
   if (!Array.isArray(media) || media.length === 0) {
     return renderPlaceholder(featuredMedia);
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: container
-  }, /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: PRODUCT_MEDIA
-  }, media && /*#__PURE__*/React.createElement(Swiper, {
-    paginationType: paginationType,
-    loop: media.length > 1,
-    indicators: true,
-    onSlideChange: setCurrentSlide,
-    disabled: media.length === 1,
-    controls: media.some(m => m.type === MEDIA_TYPE_VIDEO),
-    className: className,
-    "aria-hidden": ariaHidden
-  }, media.map(singleMedia => {
-    const Type = typeRenders[singleMedia.type];
-    return /*#__PURE__*/React.createElement(Swiper.Item, {
-      key: Object.values(singleMedia).join('_')
-    }, /*#__PURE__*/React.createElement(Type, {
-      media: singleMedia,
-      onClick: handleSlideClick
-    }));
-  }))));
+  return /*#__PURE__*/_jsx("div", {
+    className: container,
+    children: /*#__PURE__*/_jsx(SurroundPortals, {
+      portalName: PRODUCT_MEDIA,
+      children: media && /*#__PURE__*/_jsx(Swiper, {
+        paginationType: paginationType,
+        loop: media.length > 1,
+        indicators: true,
+        onSlideChange: setCurrentSlide,
+        disabled: media.length === 1,
+        controls: media.some(m => m.type === MEDIA_TYPE_VIDEO),
+        className: className,
+        "aria-hidden": ariaHidden,
+        children: media.map(singleMedia => {
+          const Type = typeRenders[singleMedia.type];
+          return /*#__PURE__*/_jsx(Swiper.Item, {
+            children: /*#__PURE__*/_jsx(Type, {
+              media: singleMedia,
+              onClick: handleSlideClick
+            })
+          }, Object.values(singleMedia).join('_'));
+        })
+      })
+    })
+  });
 };
 MediaSlider.defaultProps = {
   'aria-hidden': null,
@@ -73,6 +77,8 @@ MediaSlider.defaultProps = {
   featuredMedia: null,
   paginationType: null,
   media: null,
-  renderPlaceholder: featuredMedia => /*#__PURE__*/React.createElement(MediaImage, featuredMedia)
+  renderPlaceholder: featuredMedia => /*#__PURE__*/_jsx(MediaImage, {
+    ...featuredMedia
+  })
 };
 export default connect(MediaSlider);

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

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { ProductContext } from '@shopgate/engage/product/contexts';
@@ -8,26 +9,31 @@ import connect from "./connector";
 /**
  * The Product Options component.
  */
-class Options extends PureComponent {
-  constructor(...args) {
-    super(...args);
+import { jsx as _jsx } from "react/jsx-runtime";
+let Options = /*#__PURE__*/function (_PureComponent) {
+  function Options(...args) {
+    var _this;
+    _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;
     /**
      * @param {Object} props The component props.
      */
-    this.handleStoreSelection = props => {
+    _this.handleStoreSelection = props => {
       props.options.forEach(option => {
         // Only options of type 'select' have a default value. Type 'text' has no default.
         if (option.type !== 'select') {
           return;
         }
-        this.context.setOption(option.id, option.items[0].value, option.items[0].price);
+        _this.context.setOption(option.id, option.items[0].value, option.items[0].price);
       });
     };
+    return _this;
   }
+  _inheritsLoose(Options, _PureComponent);
+  var _proto = Options.prototype;
   /**
    * Triggers storeSelections when the component is mounted and has options set.
    */
-  componentDidMount() {
+  _proto.componentDidMount = function componentDidMount() {
     if (!this.context || !this.context.setOption || !this.props.options) {
       return;
     }
@@ -38,17 +44,17 @@ class Options extends PureComponent {
    * When the component receives the product options
    * it will set the first value of each option as active
    * @param {Object} nextProps The incoming props.
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+   */;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     if (!this.props.options && nextProps.options) {
       this.handleStoreSelection(nextProps);
     }
-  }
+  };
   /**
    * Renders the component
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       options,
       currentOptions
@@ -56,40 +62,42 @@ class Options extends PureComponent {
     if (!options) {
       return null;
     }
-    return /*#__PURE__*/React.createElement(ProductContext.Consumer, null, ({
-      setOption
-    }) => /*#__PURE__*/React.createElement("div", {
-      "data-test-id": "optionsPicker",
-      className: "engage__product__options"
-    }, options.map(option => {
-      switch (option.type) {
-        case 'text':
-          return /*#__PURE__*/React.createElement(TextOption, {
-            key: option.id,
-            id: option.id,
-            label: option.label,
-            value: currentOptions[option.id],
-            info: option.info,
-            onChange: setOption,
-            required: option.required,
-            price: option.price
-          });
-        case 'select':
-          return /*#__PURE__*/React.createElement(Option, {
-            key: option.id,
-            label: option.label,
-            id: option.id,
-            items: option.items,
-            value: currentOptions[option.id],
-            onChange: setOption
-          });
-        default:
-          // unknown type
-          return null;
-      }
-    })));
-  }
-}
+    return /*#__PURE__*/_jsx(ProductContext.Consumer, {
+      children: ({
+        setOption
+      }) => /*#__PURE__*/_jsx("div", {
+        "data-test-id": "optionsPicker",
+        className: "engage__product__options",
+        children: options.map(option => {
+          switch (option.type) {
+            case 'text':
+              return /*#__PURE__*/_jsx(TextOption, {
+                id: option.id,
+                label: option.label,
+                value: currentOptions[option.id],
+                info: option.info,
+                onChange: setOption,
+                required: option.required,
+                price: option.price
+              }, option.id);
+            case 'select':
+              return /*#__PURE__*/_jsx(Option, {
+                label: option.label,
+                id: option.id,
+                items: option.items,
+                value: currentOptions[option.id],
+                onChange: setOption
+              }, option.id);
+            default:
+              // unknown type
+              return null;
+          }
+        })
+      })
+    });
+  };
+  return Options;
+}(PureComponent);
 Options.contextType = ProductContext;
 Options.defaultProps = {
   currentOptions: {},

package/product/components/Options/components/Content/spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { mount, shallow } from 'enzyme';
 import { PickerUtilize as Picker } from '@shopgate/engage/components';
 import Options from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/components');
 jest.mock('@shopgate/engage/product/components', () => ({
   PriceDifference: () => null
@@ -56,13 +57,13 @@ describe('<Options />', () => {
   }];
   describe('Given the component was mounted to the DOM', () => {
     it('should match snapshot', () => {
-      const wrapper = shallow(/*#__PURE__*/React.createElement(Options, {
+      const wrapper = shallow(/*#__PURE__*/_jsx(Options, {
         currentOptions: {}
       })).dive();
       expect(wrapper).toMatchSnapshot();
     });
     it('should render correct number of options', () => {
-      const wrapper = mount(/*#__PURE__*/React.createElement(Options, {
+      const wrapper = mount(/*#__PURE__*/_jsx(Options, {
         options: mockOptions
       }));
       const picker = wrapper.find(Picker);

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,