@shopgate/engage 7.30.0-alpha.8 → 7.30.0-beta.1

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

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