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

package/product/components/Header/Shipping/spec.js

@@ -5,6 +5,7 @@ import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOpti
 import { mount } from 'enzyme';
 import Shipping from "./index";
 import { mockedStoreWithShippingPrice, mockedStoreWithFreeShipping, mockedStoreWithUnknownShipping } from "./mock";
+import { jsx as _jsx } from "react/jsx-runtime";
 const mockedStore = configureStore();
 describe('Shipping label', () => {
   /**
@@ -12,11 +13,12 @@ describe('Shipping label', () => {
    * @param {Object} state The mocked redux state
    * @return {ReactWrapper}
    */
-  const createComponent = state => mount(/*#__PURE__*/React.createElement(Provider, {
-    store: mockedStore(state)
-  }, /*#__PURE__*/React.createElement(Shipping, {
-    productId: "fakeId"
-  })), mockRenderOptions);
+  const createComponent = state => mount(/*#__PURE__*/_jsx(Provider, {
+    store: mockedStore(state),
+    children: /*#__PURE__*/_jsx(Shipping, {
+      productId: "fakeId"
+    })
+  }), mockRenderOptions);
   it('should render shipping price', () => {
     const component = createComponent(mockedStoreWithShippingPrice);
     expect(component).toMatchSnapshot();

package/product/components/Header/Tiers/components/Tier/index.js

@@ -7,6 +7,7 @@ import styles from "../../style";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Tier = ({
   tier,
   price
@@ -22,18 +23,18 @@ const Tier = ({
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/aria-role
-    React.createElement(I18n.Text, {
+    _jsx(I18n.Text, {
       string: i18nKey,
       params: params,
-      key: tier.from,
       className: styles.tier,
-      role: "text"
-    }, /*#__PURE__*/React.createElement(I18n.Price, {
-      forKey: "price",
-      price: tier.unitPrice,
-      currency: price.currency,
-      className: styles.price
-    }))
+      role: "text",
+      children: /*#__PURE__*/_jsx(I18n.Price, {
+        forKey: "price",
+        price: tier.unitPrice,
+        currency: price.currency,
+        className: styles.price
+      })
+    }, tier.from)
   );
 };
 export default /*#__PURE__*/memo(Tier);

package/product/components/Header/Tiers/components/Tier/spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Tier from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Tier />', () => {
   describe('Rendering with data', () => {
     it('should render tier prices when tier prices are available', () => {
@@ -25,7 +26,7 @@ describe('<Tier />', () => {
         to: 5,
         unitPrice: 77.5
       };
-      const wrapper = shallow(/*#__PURE__*/React.createElement(Tier, {
+      const wrapper = shallow(/*#__PURE__*/_jsx(Tier, {
         price: price,
         tier: tier
       }));
@@ -37,7 +38,7 @@ describe('<Tier />', () => {
       const tier = {
         from: 1
       };
-      const wrapper = shallow(/*#__PURE__*/React.createElement(Tier, {
+      const wrapper = shallow(/*#__PURE__*/_jsx(Tier, {
         tier: tier,
         price: {}
       }));

package/product/components/Header/Tiers/index.js

@@ -11,25 +11,29 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @return {JSX}
  */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const Tiers = ({
   price
 }) => {
   if (!(price && price.tiers && price.tiers.length > 0)) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Portal, {
-    name: PRODUCT_TIERS_BEFORE
-  }), /*#__PURE__*/React.createElement(Portal, {
-    name: PRODUCT_TIERS
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${styles.wrapper} engage__product__header__tiers`
-  }, price.tiers.map(tier => /*#__PURE__*/React.createElement(Tier, {
-    tier: tier,
-    price: price,
-    key: `${Object.values(tier).join('_')}`
-  })))), /*#__PURE__*/React.createElement(Portal, {
-    name: PRODUCT_TIERS_AFTER
-  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Portal, {
+      name: PRODUCT_TIERS_BEFORE
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: PRODUCT_TIERS,
+      children: /*#__PURE__*/_jsx("div", {
+        className: `${styles.wrapper} engage__product__header__tiers`,
+        children: price.tiers.map(tier => /*#__PURE__*/_jsx(Tier, {
+          tier: tier,
+          price: price
+        }, `${Object.values(tier).join('_')}`))
+      })
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: PRODUCT_TIERS_AFTER
+    })]
+  });
 };
 Tiers.defaultProps = {
   price: null

package/product/components/Header/Tiers/spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Tiers from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock("./connector", () => cmp => cmp);
 describe('<Tiers />', () => {
   describe('Rendering with data', () => {
@@ -21,7 +22,7 @@ describe('<Tiers />', () => {
         }],
         currency: 'USD'
       };
-      const wrapper = shallow(/*#__PURE__*/React.createElement(Tiers, {
+      const wrapper = shallow(/*#__PURE__*/_jsx(Tiers, {
         price: price
       }));
       expect(wrapper).toMatchSnapshot();
@@ -29,13 +30,13 @@ describe('<Tiers />', () => {
   });
   describe('Rendering without data', () => {
     it('should render nothing when price data are not available ({})', () => {
-      const wrapper = shallow(/*#__PURE__*/React.createElement(Tiers, {
+      const wrapper = shallow(/*#__PURE__*/_jsx(Tiers, {
         price: {}
       }));
       expect(wrapper).toBeEmptyRender();
     });
     it('should render nothing when price data are not available (null)', () => {
-      const wrapper = shallow(/*#__PURE__*/React.createElement(Tiers, {
+      const wrapper = shallow(/*#__PURE__*/_jsx(Tiers, {
         price: null
       }));
       expect(wrapper).toBeEmptyRender();
@@ -45,7 +46,7 @@ describe('<Tiers />', () => {
         tiers: [],
         currency: 'USD'
       };
-      const wrapper = shallow(/*#__PURE__*/React.createElement(Tiers, {
+      const wrapper = shallow(/*#__PURE__*/_jsx(Tiers, {
         price: price
       }));
       expect(wrapper).toBeEmptyRender();
@@ -54,7 +55,7 @@ describe('<Tiers />', () => {
       const price = {
         currency: 'USD'
       };
-      const wrapper = shallow(/*#__PURE__*/React.createElement(Tiers, {
+      const wrapper = shallow(/*#__PURE__*/_jsx(Tiers, {
         price: price
       }));
       expect(wrapper).toBeEmptyRender();

package/product/components/MapPriceHint/index.js

@@ -7,6 +7,7 @@ import { isBeta, useWidgetSettings, useWidgetStyles } from '@shopgate/engage/cor
 import { PRODUCT_MAP_PRICE } from '@shopgate/engage/product';
 import { showHint } from "./helpers";
 import connect from "./connector";
+import { jsx as _jsx } from "react/jsx-runtime";
 const defaultStyle = css({
   fontSize: '0.75rem'
 }).toString();
@@ -27,17 +28,19 @@ const MapPriceHint = ({
     return null;
   }
   const styles = useWidgetStyles('@shopgate/engage/product/MapPrice');
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: PRODUCT_MAP_PRICE
-  }, showHint(price, mapPrice) && /*#__PURE__*/React.createElement(TimeBoundary, {
-    start: new Date(mapPrice.startDate),
-    end: new Date(mapPrice.endDate)
-  }, ({
-    between
-  }) => between && /*#__PURE__*/React.createElement(I18n.Text, {
-    string: settings.hint,
-    className: classNames('engage__product__map-price-hint', defaultStyle, css(styles.hint).toString())
-  })));
+  return /*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: PRODUCT_MAP_PRICE,
+    children: showHint(price, mapPrice) && /*#__PURE__*/_jsx(TimeBoundary, {
+      start: new Date(mapPrice.startDate),
+      end: new Date(mapPrice.endDate),
+      children: ({
+        between
+      }) => between && /*#__PURE__*/_jsx(I18n.Text, {
+        string: settings.hint,
+        className: classNames('engage__product__map-price-hint', defaultStyle, css(styles.hint).toString())
+      })
+    })
+  });
 };
 MapPriceHint.defaultProps = {
   mapPrice: null,

package/product/components/Media/FeaturedMedia.js

@@ -5,6 +5,7 @@ import { PORTAL_PRODUCT_MEDIA } from "../../../components/constants";
 import MediaImage from "./MediaImage";
 import FeaturedVideo from "./FeaturedVideo";
 import { defaultProps, propTypes } from "./props";
+import { jsx as _jsx } from "react/jsx-runtime";
 const types = {
   [MEDIA_TYPE_IMAGE]: MediaImage,
   [MEDIA_TYPE_VIDEO]: FeaturedVideo
@@ -20,12 +21,13 @@ const FeaturedMedia = ({
   altText
 }) => {
   const TypeRenderer = types[type] || MediaImage;
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: PORTAL_PRODUCT_MEDIA
-  }, /*#__PURE__*/React.createElement(TypeRenderer, {
-    url: url,
-    altText: altText
-  }));
+  return /*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: PORTAL_PRODUCT_MEDIA,
+    children: /*#__PURE__*/_jsx(TypeRenderer, {
+      url: url,
+      altText: altText
+    })
+  });
 };
 FeaturedMedia.defaultProps = defaultProps;
 export default FeaturedMedia;

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);