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

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

@@ -8,6 +8,7 @@ import GridIcon from '@shopgate/pwa-ui-shared/icons/GridIcon';
 import ListIcon from '@shopgate/pwa-ui-shared/icons/ListIcon';
 // eslint-disable-next-line import/named
 import { UnwrappedContent as FilterBarContent } from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 const activeFilters = {
   Size: {
     label: 'Size',
@@ -19,7 +20,7 @@ const activeFilters = {
 describe.skip('<FilterBarContent />', () => {
   it('should execute handleToggleViewMode callback when left button is clicked', () => {
     const spy = jest.fn();
-    const wrapper = mount(/*#__PURE__*/React.createElement(FilterBarContent, {
+    const wrapper = mount(/*#__PURE__*/_jsx(FilterBarContent, {
       handleToggleViewMode: spy,
       handleSortChange: () => {},
       handleOpenFiltersView: () => {},
@@ -33,7 +34,7 @@ describe.skip('<FilterBarContent />', () => {
   });
   it('should execute handleOpenFiltersView callback when right button is clicked', () => {
     const spy = jest.fn();
-    const wrapper = mount(/*#__PURE__*/React.createElement(FilterBarContent, {
+    const wrapper = mount(/*#__PURE__*/_jsx(FilterBarContent, {
       handleToggleViewMode: () => {},
       handleSortChange: () => {},
       handleOpenFiltersView: spy,
@@ -46,7 +47,7 @@ describe.skip('<FilterBarContent />', () => {
     expect(spy).toHaveBeenCalledTimes(1);
   });
   it('should render in grid view mode', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(FilterBarContent, {
+    const wrapper = mount(/*#__PURE__*/_jsx(FilterBarContent, {
       handleToggleViewMode: () => {},
       handleSortChange: () => {},
       handleOpenFiltersView: () => {},
@@ -58,7 +59,7 @@ describe.skip('<FilterBarContent />', () => {
     expect(wrapper.find(ListIcon).length).toEqual(1);
   });
   it('should render in list view mode', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(FilterBarContent, {
+    const wrapper = mount(/*#__PURE__*/_jsx(FilterBarContent, {
       handleToggleViewMode: () => {},
       handleSortChange: () => {},
       handleOpenFiltersView: () => {},
@@ -75,7 +76,7 @@ describe.skip('<FilterBarContent />', () => {
     let filterBarInstance = null;
     beforeEach(() => {
       getFiltersSpy = jest.fn();
-      filterBarWrapper = shallow(/*#__PURE__*/React.createElement(FilterBarContent, {
+      filterBarWrapper = shallow(/*#__PURE__*/_jsx(FilterBarContent, {
         handleToggleViewMode: () => {},
         handleSortChange: () => {},
         getFilters: getFiltersSpy,
@@ -97,7 +98,7 @@ describe.skip('<FilterBarContent />', () => {
   describe('Given activeFilters are handled correctly', () => {
     let filterBarWrapper = null;
     beforeEach(() => {
-      filterBarWrapper = mount(/*#__PURE__*/React.createElement(FilterBarContent, {
+      filterBarWrapper = mount(/*#__PURE__*/_jsx(FilterBarContent, {
         handleToggleViewMode: () => {},
         handleSortChange: () => {},
         getFilters: () => {},

package/product/components/FilterBar/components/FilterModal/FilterModal.js

@@ -5,6 +5,7 @@ import { RouteContext } from '@shopgate/pwa-common/context';
 import { FilterPageProvider } from '@shopgate/engage/filter/providers';
 import { useFilterBarContext } from "../../FilterBarProvider.context";
 import Content from "./FilterModalContent";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   root: css({
     display: 'flex',
@@ -45,21 +46,25 @@ const FilterModal = () => {
   if (!filterModalOpen) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, /*#__PURE__*/React.createElement(Backdrop, {
-    isVisible: true,
-    level: 0,
-    opacity: 38,
-    onClick: () => setFilterModalOpen(false)
-  }), /*#__PURE__*/React.createElement(FilterPageProvider, {
-    parentRouteId: id,
-    activeFilters: filters,
-    categoryId: categoryId,
-    searchPhrase: searchPhrase,
-    onApply: handleApply
-  }, /*#__PURE__*/React.createElement(Content, {
-    onClose: handleClose
-  }))));
+  return /*#__PURE__*/_jsx(Modal, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: styles.root,
+      children: [/*#__PURE__*/_jsx(Backdrop, {
+        isVisible: true,
+        level: 0,
+        opacity: 38,
+        onClick: () => setFilterModalOpen(false)
+      }), /*#__PURE__*/_jsx(FilterPageProvider, {
+        parentRouteId: id,
+        activeFilters: filters,
+        categoryId: categoryId,
+        searchPhrase: searchPhrase,
+        onApply: handleApply,
+        children: /*#__PURE__*/_jsx(Content, {
+          onClose: handleClose
+        })
+      })]
+    })
+  });
 };
 export default FilterModal;

package/product/components/FilterBar/components/FilterModal/FilterModalContent.js

@@ -6,6 +6,7 @@ import { responsiveMediaQuery } from '@shopgate/engage/styles';
 import { useFilterPage } from '@shopgate/engage/filter/hooks';
 import FilterPageContent from '@shopgate/engage/filter/components/FilterPageContent';
 import Title from "./FilterModalTitle";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   colors
 } = themeConfig;
@@ -42,15 +43,17 @@ const FilterModalContent = ({
     applyFilters,
     resetAllFilters
   } = useFilterPage();
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.root
-  }, /*#__PURE__*/React.createElement(Title, {
-    apply: applyFilters,
-    reset: resetAllFilters,
-    close: onClose
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles.scrollable
-  }, /*#__PURE__*/React.createElement(FilterPageContent, null)));
+  return /*#__PURE__*/_jsxs("div", {
+    className: styles.root,
+    children: [/*#__PURE__*/_jsx(Title, {
+      apply: applyFilters,
+      reset: resetAllFilters,
+      close: onClose
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.scrollable,
+      children: /*#__PURE__*/_jsx(FilterPageContent, {})
+    })]
+  });
 };
 FilterModalContent.defaultProps = {};
 export default FilterModalContent;

package/product/components/FilterBar/components/FilterModal/FilterModalTitle.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { css } from 'glamor';
 import { i18n } from '@shopgate/engage/core';
 import { Ripple, CrossIcon } from '@shopgate/engage/components';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   root: css({
     display: 'flex',
@@ -48,20 +49,25 @@ const FilterModalTitle = ({
   apply,
   reset,
   close
-}) => /*#__PURE__*/React.createElement("div", {
-  className: styles.root
-}, /*#__PURE__*/React.createElement(Ripple, {
-  onClick: close,
-  className: styles.closeButton
-}, /*#__PURE__*/React.createElement(CrossIcon, null)), /*#__PURE__*/React.createElement("span", {
-  className: styles.title
-}, i18n.text('titles.filter')), /*#__PURE__*/React.createElement(Ripple, {
-  fill: true,
-  className: styles.actionButtonSecondary,
-  onClick: reset
-}, i18n.text('filter.reset')), /*#__PURE__*/React.createElement(Ripple, {
-  fill: true,
-  className: styles.actionButton,
-  onClick: apply
-}, i18n.text('filter.apply')));
+}) => /*#__PURE__*/_jsxs("div", {
+  className: styles.root,
+  children: [/*#__PURE__*/_jsx(Ripple, {
+    onClick: close,
+    className: styles.closeButton,
+    children: /*#__PURE__*/_jsx(CrossIcon, {})
+  }), /*#__PURE__*/_jsx("span", {
+    className: styles.title,
+    children: i18n.text('titles.filter')
+  }), /*#__PURE__*/_jsx(Ripple, {
+    fill: true,
+    className: styles.actionButtonSecondary,
+    onClick: reset,
+    children: i18n.text('filter.reset')
+  }), /*#__PURE__*/_jsx(Ripple, {
+    fill: true,
+    className: styles.actionButton,
+    onClick: apply,
+    children: i18n.text('filter.apply')
+  })]
+});
 export default FilterModalTitle;

package/product/components/FilterBar/index.js

@@ -8,6 +8,7 @@ import Provider from "./FilterBarProvider";
 import Content from "./components/Content";
 import Modal from "./components/FilterModal";
 import styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   colors
 } = themeConfig;
@@ -33,18 +34,23 @@ function FilterBar({
     color: active ? 'var(--color-secondary-contrast)' : colors.dark
   }, [active]);
   const sortScope = useMemo(() => categoryId ? SORT_SCOPE_CATEGORY : SORT_SCOPE_SEARCH, [categoryId]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: `${styles} theme__filter-bar`,
     "data-test-id": "filterBar",
-    style: style
-  }, /*#__PURE__*/React.createElement(SortProvider, {
-    scope: sortScope
-  }, /*#__PURE__*/React.createElement(Provider, null, /*#__PURE__*/React.createElement(Content, {
-    onChipCountUpdate: handleChipCountUpdate
-  }), /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    breakpoint: ">xs",
-    webOnly: true
-  }, /*#__PURE__*/React.createElement(Modal, null)))));
+    style: style,
+    children: /*#__PURE__*/_jsx(SortProvider, {
+      scope: sortScope,
+      children: /*#__PURE__*/_jsxs(Provider, {
+        children: [/*#__PURE__*/_jsx(Content, {
+          onChipCountUpdate: handleChipCountUpdate
+        }), /*#__PURE__*/_jsx(ResponsiveContainer, {
+          breakpoint: ">xs",
+          webOnly: true,
+          children: /*#__PURE__*/_jsx(Modal, {})
+        })]
+      })
+    })
+  });
 }
 FilterBar.defaultProps = {
   filters: null,

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

@@ -12,6 +12,7 @@ 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 PriceStriked = ({
   price
 }) => {
@@ -19,29 +20,37 @@ const PriceStriked = ({
     msrpLabel = 'price.msrp',
     unitPriceStrikedLabel
   } = useWidgetSettings('@shopgate/engage/product/components/Header/PriceStriked');
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Portal, {
-    name: PRODUCT_PRICE_STRIKED_BEFORE
-  }), /*#__PURE__*/React.createElement(Portal, {
-    name: PRODUCT_PRICE_STRIKED
-  }, /*#__PURE__*/React.createElement(PlaceholderLabel, {
-    className: styles.placeholder,
-    ready: price !== null
-  }, price && price.msrp > 0 && price.unitPrice !== price.msrp && /*#__PURE__*/React.createElement(Fragment, null, !!msrpLabel && /*#__PURE__*/React.createElement(I18n.Text, {
-    string: msrpLabel,
-    className: styles.msrp
-  }), /*#__PURE__*/React.createElement(StrikePrice, {
-    className: styles.msrpStriked,
-    value: price.msrp,
-    currency: price.currency
-  })), price && !price.msrp && price.unitPriceStriked > 0 && price.unitPrice !== price.unitPriceStriked && /*#__PURE__*/React.createElement(React.Fragment, null, !!unitPriceStrikedLabel && /*#__PURE__*/React.createElement(I18n.Text, {
-    string: unitPriceStrikedLabel,
-    className: styles.msrp
-  }), /*#__PURE__*/React.createElement(StrikePrice, {
-    value: price.unitPriceStriked,
-    currency: price.currency
-  })))), /*#__PURE__*/React.createElement(Portal, {
-    name: PRODUCT_PRICE_STRIKED_AFTER
-  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Portal, {
+      name: PRODUCT_PRICE_STRIKED_BEFORE
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: PRODUCT_PRICE_STRIKED,
+      children: /*#__PURE__*/_jsxs(PlaceholderLabel, {
+        className: styles.placeholder,
+        ready: price !== null,
+        children: [price && price.msrp > 0 && price.unitPrice !== price.msrp && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [!!msrpLabel && /*#__PURE__*/_jsx(I18n.Text, {
+            string: msrpLabel,
+            className: styles.msrp
+          }), /*#__PURE__*/_jsx(StrikePrice, {
+            className: styles.msrpStriked,
+            value: price.msrp,
+            currency: price.currency
+          })]
+        }), price && !price.msrp && price.unitPriceStriked > 0 && price.unitPrice !== price.unitPriceStriked && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [!!unitPriceStrikedLabel && /*#__PURE__*/_jsx(I18n.Text, {
+            string: unitPriceStrikedLabel,
+            className: styles.msrp
+          }), /*#__PURE__*/_jsx(StrikePrice, {
+            value: price.unitPriceStriked,
+            currency: price.currency
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: PRODUCT_PRICE_STRIKED_AFTER
+    })]
+  });
 };
 PriceStriked.defaultProps = {
   price: null

package/product/components/Header/Shipping/components/Label/index.js

@@ -8,6 +8,7 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Label = ({
   className,
   price,
@@ -15,18 +16,20 @@ const Label = ({
 }) =>
 /*#__PURE__*/
 // eslint-disable-next-line jsx-a11y/aria-role
-React.createElement("div", {
+_jsx("div", {
   role: "text",
-  className: `${className} ${styles.text}`
-}, price > 0 ? /*#__PURE__*/React.createElement(I18n.Text, {
-  string: "shipping.cost"
-}, /*#__PURE__*/React.createElement(I18n.Price, {
-  forKey: "price",
-  price: price,
-  currency: currency
-})) : /*#__PURE__*/React.createElement(I18n.Text, {
-  string: "shipping.free"
-}));
+  className: `${className} ${styles.text}`,
+  children: price > 0 ? /*#__PURE__*/_jsx(I18n.Text, {
+    string: "shipping.cost",
+    children: /*#__PURE__*/_jsx(I18n.Price, {
+      forKey: "price",
+      price: price,
+      currency: currency
+    })
+  }) : /*#__PURE__*/_jsx(I18n.Text, {
+    string: "shipping.free"
+  })
+});
 Label.defaultProps = {
   className: ''
 };

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

@@ -12,22 +12,27 @@ 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 Shipping = ({
   shipping
-}) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Portal, {
-  name: PRODUCT_SHIPPING_BEFORE
-}), /*#__PURE__*/React.createElement(Portal, {
-  name: PRODUCT_SHIPPING
-}, /*#__PURE__*/React.createElement(PlaceholderLabel, {
-  className: styles.placeholder,
-  ready: shipping !== null
-}, shipping && typeof shipping.price !== 'undefined' && shipping.price !== null && /*#__PURE__*/React.createElement(Label, {
-  className: `${styles.shipping} engage__product__header__shipping`,
-  price: shipping.price,
-  currency: shipping.currency
-}))), /*#__PURE__*/React.createElement(Portal, {
-  name: PRODUCT_SHIPPING_AFTER
-}));
+}) => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(Portal, {
+    name: PRODUCT_SHIPPING_BEFORE
+  }), /*#__PURE__*/_jsx(Portal, {
+    name: PRODUCT_SHIPPING,
+    children: /*#__PURE__*/_jsx(PlaceholderLabel, {
+      className: styles.placeholder,
+      ready: shipping !== null,
+      children: shipping && typeof shipping.price !== 'undefined' && shipping.price !== null && /*#__PURE__*/_jsx(Label, {
+        className: `${styles.shipping} engage__product__header__shipping`,
+        price: shipping.price,
+        currency: shipping.currency
+      })
+    })
+  }), /*#__PURE__*/_jsx(Portal, {
+    name: PRODUCT_SHIPPING_AFTER
+  })]
+});
 Shipping.defaultProps = {
   shipping: null
 };

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;