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

package/product/components/ProductImage/index.js

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
@@ -13,6 +13,7 @@ import { PORTAL_PRODUCT_IMAGE } from "../../../components/constants";
 import ProductImagePlaceholder from "./ProductImagePlaceholder";
 import styles from "./style";
 import connect from "./connector";
+import { jsx as _jsx } from "react/jsx-runtime";
 const {
   colors
 } = themeConfig;
@@ -23,18 +24,19 @@ const {
  * feature of showing a placeholder in case no src property has been passed
  * or the given source image cannot be loaded.
  */
-class ProductImage extends Component {
+let ProductImage = /*#__PURE__*/function (_Component) {
   /**
    * Component constructor
    * @param {Object} props The component properties
    */
-  constructor(props) {
-    super(props);
+  function ProductImage(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Triggered when the image could not be loaded for some reason.
      */
-    this.imageLoadingFailed = () => {
-      this.setState({
+    _this.imageLoadingFailed = () => {
+      _this.setState({
         showPlaceholder: true,
         imageLoadingFailed: true
       });
@@ -43,30 +45,33 @@ class ProductImage extends Component {
      * Sets the image ratio based on width and height.
      * @return {number} The image ratio.
      */
-    this.getImageRatio = () => {
-      if (this.props.ratio) {
-        const [x, y] = this.props.ratio;
+    _this.getImageRatio = () => {
+      if (_this.props.ratio) {
+        const [x, y] = _this.props.ratio;
         return (y / x).toFixed(3);
       }
       const {
         width,
         height
-      } = this.props.resolutions[this.props.resolutions.length - 1];
+      } = _this.props.resolutions[_this.props.resolutions.length - 1];
       return (height / width).toFixed(3);
     };
     logger.assert(!props.srcmap, 'Use of srcmap prop is deprecated. Use resolutions instead');
     const showPlaceholder = !props.src && (props.srcmap === null || props.srcmap.length === 0);
-    this.state = {
+    _this.state = {
       showPlaceholder,
       imageLoadingFailed: false
     };
+    return _this;
   }
 
   /**
    * Called when the component props change.
    * @param {Object} nextProps The new component properties
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  _inheritsLoose(ProductImage, _Component);
+  var _proto = ProductImage.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     // Disable the placeholder to give the real image a new chance to load.
     // If we do not have a src property set then just show the placeholder instead.
     const showPlaceholder = !nextProps.src && (!nextProps.srcmap || nextProps.srcmap.length === 0);
@@ -80,15 +85,15 @@ class ProductImage extends Component {
    * @param {Object} nextProps The next component props.
    * @param {Object} nextState The next state.
    * @return {boolean} Update or not.
-   */
-  shouldComponentUpdate(nextProps, nextState) {
+   */;
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
     return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState);
-  }
+  };
   /**
    * Renders the component.
    * @returns {JSX.Element}
    */
-  render() {
+  _proto.render = function render() {
     const {
       noBackground,
       className,
@@ -102,43 +107,50 @@ class ProductImage extends Component {
     }
     if (this.state.imageLoadingFailed || this.state.showPlaceholder) {
       // Image is not present or could not be loaded, show a placeholder.
-      return /*#__PURE__*/React.createElement(SurroundPortals, {
-        portalName: PORTAL_PRODUCT_IMAGE
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classnames(styles.placeholderContainer(this.getImageRatio()), {
-          [styles.innerShadow]: showInnerShadow,
-          [className]: !!className
+      return /*#__PURE__*/_jsx(SurroundPortals, {
+        portalName: PORTAL_PRODUCT_IMAGE,
+        children: /*#__PURE__*/_jsx("div", {
+          className: classnames(styles.placeholderContainer(this.getImageRatio()), {
+            [styles.innerShadow]: showInnerShadow,
+            [className]: !!className
+          }),
+          children: placeholderSrc ? /*#__PURE__*/_jsx(ProductImagePlaceholder, {
+            src: placeholderSrc,
+            showInnerShadow: showInnerShadow,
+            noBackground: noBackground
+          }) : /*#__PURE__*/_jsx("div", {
+            "aria-hidden": true,
+            className: styles.placeholderContent,
+            "data-test-id": "placeHolder",
+            children: /*#__PURE__*/_jsx(PlaceholderIcon, {
+              className: styles.placeholder
+            })
+          })
         })
-      }, placeholderSrc ? /*#__PURE__*/React.createElement(ProductImagePlaceholder, {
-        src: placeholderSrc,
-        showInnerShadow: showInnerShadow,
-        noBackground: noBackground
-      }) : /*#__PURE__*/React.createElement("div", {
-        "aria-hidden": true,
-        className: styles.placeholderContent,
-        "data-test-id": "placeHolder"
-      }, /*#__PURE__*/React.createElement(PlaceholderIcon, {
-        className: styles.placeholder
-      }))));
+      });
     }
 
     // Return the actual image.
-    return /*#__PURE__*/React.createElement(SurroundPortals, {
+    return /*#__PURE__*/_jsx(SurroundPortals, {
       portalName: PORTAL_PRODUCT_IMAGE,
       portalProps: {
         src: this.props.src,
         resolutions: this.props.resolutions
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${className} engage__product__product-image`
-    }, /*#__PURE__*/React.createElement(Image, _extends({}, this.props, {
-      className: showInnerShadow ? styles.innerShadow : '',
-      backgroundColor: noBackground ? 'transparent' : colors.light,
-      onError: this.imageLoadingFailed,
-      "aria-hidden": !this.props.alt
-    }))));
-  }
-}
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        className: `${className} engage__product__product-image`,
+        children: /*#__PURE__*/_jsx(Image, {
+          ...this.props,
+          className: showInnerShadow ? styles.innerShadow : '',
+          backgroundColor: noBackground ? 'transparent' : colors.light,
+          onError: this.imageLoadingFailed,
+          "aria-hidden": !this.props.alt
+        })
+      })
+    });
+  };
+  return ProductImage;
+}(Component);
 /**
  * See Image component manual for detailed description about the component property types.
  */

package/product/components/ProductImage/spec.js

@@ -5,6 +5,7 @@ import appConfig from '@shopgate/pwa-common/helpers/config';
 import PlaceholderIcon from '@shopgate/pwa-ui-shared/icons/PlaceholderIcon';
 import styles from "./style";
 import ProductImage from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.unmock('@shopgate/pwa-core');
 jest.mock("../../../core/hocs/withWidgetSettings");
 jest.mock('@shopgate/pwa-common/helpers/config');
@@ -14,13 +15,13 @@ jest.mock('@shopgate/engage/components', () => ({
 }));
 describe('<ProductImage />', () => {
   it('should render a placeholder if no src prop is provided', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ProductImage, null)).dive();
+    const wrapper = shallow(/*#__PURE__*/_jsx(ProductImage, {})).dive();
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(Image).length).toBe(0);
     expect(wrapper.find(PlaceholderIcon).length).toBe(1);
   });
   it('should render the image without a placeholder', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ProductImage, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(ProductImage, {
       src: "http://placehold.it/300x300"
     })).dive();
     expect(wrapper).toMatchSnapshot();
@@ -29,20 +30,20 @@ describe('<ProductImage />', () => {
   });
   it('should not apply an inner shadow to the placeholder if turned off via the app config', () => {
     jest.spyOn(appConfig, 'hideProductImageShadow', 'get').mockReturnValue(true);
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ProductImage, null)).dive();
+    const wrapper = shallow(/*#__PURE__*/_jsx(ProductImage, {})).dive();
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(`.${styles.innerShadow}`).length).toBe(0);
   });
   it('should not apply an inner shadow to the image if turned off via the app config', () => {
     jest.spyOn(appConfig, 'hideProductImageShadow', 'get').mockReturnValue(true);
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ProductImage, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(ProductImage, {
       src: "http://placehold.it/300x300"
     })).dive();
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(`.${styles.innerShadow}`).length).toBe(0);
   });
   it('should not apply an inner shadow to the placeholder if turned off via the widget settings', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ProductImage, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(ProductImage, {
       widgetSettings: {
         showInnerShadow: false
       }
@@ -51,7 +52,7 @@ describe('<ProductImage />', () => {
     expect(wrapper.find(`.${styles.innerShadow}`).length).toBe(0);
   });
   it('should not apply an inner shadow to the image if turned off via the widget settings', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ProductImage, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(ProductImage, {
       src: "http://placehold.it/300x300",
       widgetSettings: {
         showInnerShadow: false
@@ -61,7 +62,7 @@ describe('<ProductImage />', () => {
     expect(wrapper.find(`.${styles.innerShadow}`).length).toBe(0);
   });
   it('should apply an inner shadow to the placeholder if turned off via the widget settings', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ProductImage, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(ProductImage, {
       widgetSettings: {
         showInnerShadow: true
       }
@@ -70,7 +71,7 @@ describe('<ProductImage />', () => {
     expect(wrapper.find(`.${styles.innerShadow}`).length).toBe(1);
   });
   it('should apply an inner shadow to the image if turned off via the widget settings', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ProductImage, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(ProductImage, {
       src: "http://placehold.it/300x300",
       widgetSettings: {
         showInnerShadow: true

package/product/components/ProductList/components/Item/index.js

@@ -21,166 +21,186 @@ 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 Item = ({
   display,
   product
-}) => /*#__PURE__*/React.createElement(Link, {
+}) => /*#__PURE__*/_jsx(Link, {
   tagName: "a",
   href: `${ITEM_PATH}/${bin2hex(product.id)}`,
   className: `${styles.container} engage__product__product-list__item`,
   itemProp: "item",
   itemScope: true,
-  itemType: "http://schema.org/Product"
-}, /*#__PURE__*/React.createElement(Grid, {
-  className: styles.listItemContainer
-}, /*#__PURE__*/React.createElement(Grid.Item, {
-  shrink: 0,
-  className: styles.imageContainer
-}, /*#__PURE__*/React.createElement(Portal, {
-  name: portals.PRODUCT_ITEM_IMAGE_BEFORE,
-  props: {
-    productId: product.id
-  }
-}), /*#__PURE__*/React.createElement(Portal, {
-  name: portals.PRODUCT_ITEM_IMAGE,
-  props: {
-    productId: product.id
-  }
-}, /*#__PURE__*/React.createElement(Image, {
-  itemProp: "image",
-  src: product.featuredImageBaseUrl,
-  alt: product.name
-})), /*#__PURE__*/React.createElement(Portal, {
-  name: portals.PRODUCT_ITEM_IMAGE_AFTER,
-  props: {
-    productId: product.id
-  }
-}), /*#__PURE__*/React.createElement(ProductBadges, {
-  location: "productList",
-  productId: product.id
-}, !!product.price.discount && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Portal, {
-  name: portals.PRODUCT_ITEM_DISCOUNT_BEFORE,
-  props: {
-    productId: product.id
-  }
-}), /*#__PURE__*/React.createElement(Portal, {
-  name: portals.PRODUCT_ITEM_DISCOUNT,
-  props: {
-    productId: product.id
-  }
-}, /*#__PURE__*/React.createElement(DiscountBadge, {
-  className: styles.discount,
-  text: `-${product.price.discount}%`
-})), /*#__PURE__*/React.createElement(Portal, {
-  name: portals.PRODUCT_ITEM_DISCOUNT_AFTER,
-  props: {
-    productId: product.id
-  }
-})))), /*#__PURE__*/React.createElement(Grid.Item, {
-  grow: 4,
-  className: styles.titleContainer
-}, /*#__PURE__*/React.createElement(ProductName, {
-  name: product.name,
-  portalName: portals.PRODUCT_ITEM_NAME,
-  portalProps: {
-    productId: product.id
-  },
-  itemProp: "name",
-  testId: `Productname: ${product.name}`
-}), (!display || display.manufacturer && product.manufacturer) && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Portal, {
-  name: portals.PRODUCT_ITEM_MANUFACTURER_BEFORE,
-  props: {
-    productId: product.id
-  }
-}), /*#__PURE__*/React.createElement(Portal, {
-  name: portals.PRODUCT_ITEM_MANUFACTURER,
-  props: {
-    productId: product.id
-  }
-}, /*#__PURE__*/React.createElement(Manufacturer, {
-  text: product.manufacturer,
-  className: styles.manufacturer
-})), /*#__PURE__*/React.createElement(Portal, {
-  name: portals.PRODUCT_ITEM_MANUFACTURER_AFTER,
-  props: {
-    productId: product.id
-  }
-})), product.availability && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Portal, {
-  name: portals.PRODUCT_ITEM_AVAILABILITY_BEFORE,
-  props: {
-    productId: product.id
-  }
-}), /*#__PURE__*/React.createElement(Portal, {
-  name: portals.PRODUCT_ITEM_AVAILABILITY,
-  props: {
-    productId: product.id
-  }
-}, /*#__PURE__*/React.createElement(Availability, {
-  className: styles.availability,
-  text: product.availability.text,
-  state: product.availability.state
-})), /*#__PURE__*/React.createElement(Portal, {
-  name: portals.PRODUCT_ITEM_AVAILABILITY_AFTER,
-  props: {
-    productId: product.id
-  }
-})), (!product.availability || product.availability.state === AVAILABILITY_STATE_OK) && /*#__PURE__*/React.createElement(Availability, {
-  state: !product.stock || product.stock.orderable ? AVAILABILITY_STATE_OK : AVAILABILITY_STATE_ALERT,
-  text: i18n.text('product.available.not'),
-  showWhenAvailable: false
-})), (!display || display.price) && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Portal, {
-  name: portals.PRODUCT_ITEM_PRICE_BEFORE,
-  props: {
-    productId: product.id,
-    location: 'productList'
-  }
-}), /*#__PURE__*/React.createElement(Portal, {
-  name: portals.PRODUCT_ITEM_PRICE,
-  props: {
-    productId: product.id,
-    location: 'productList'
-  }
-}, /*#__PURE__*/React.createElement(Grid.Item, {
-  grow: 1,
-  className: styles.priceContainer
-}, /*#__PURE__*/React.createElement(Portal, {
-  name: portals.PRODUCT_ITEM_PRICE_INSIDE_BEFORE,
-  props: {
-    productId: product.id
-  }
-}), /*#__PURE__*/React.createElement(Price, {
-  className: styles.price,
-  currency: product.price.currency,
-  discounted: !!product.price.discount,
-  unitPrice: product.price.unitPrice,
-  unitPriceMin: product.price.unitPriceMin,
-  unitPriceMax: product.price.unitPriceMax
-}), product.price.msrp > 0 && product.price.unitPrice !== product.price.msrp && /*#__PURE__*/React.createElement(PriceStriked, {
-  value: product.price.msrp,
-  currency: product.price.currency,
-  className: styles.priceStriked
-}), !product.price.msrp && product.price.unitPriceStriked > 0 && /*#__PURE__*/React.createElement(PriceStriked, {
-  value: product.price.unitPriceStriked,
-  currency: product.price.currency,
-  className: styles.priceStriked
-}), /*#__PURE__*/React.createElement(PriceInfo, {
-  product: product,
-  className: styles.priceInfo
-}), /*#__PURE__*/React.createElement(Portal, {
-  name: portals.PRODUCT_ITEM_PRICE_INSIDE_AFTER,
-  props: {
-    productId: product.id
-  }
-}))), /*#__PURE__*/React.createElement(Portal, {
-  name: portals.PRODUCT_ITEM_PRICE_AFTER,
-  props: {
-    productId: product.id,
-    location: 'productList'
-  }
-})), /*#__PURE__*/React.createElement(Grid.Item, {
-  shrink: 0,
-  className: styles.favouriteContainer
-})));
+  itemType: "http://schema.org/Product",
+  children: /*#__PURE__*/_jsxs(Grid, {
+    className: styles.listItemContainer,
+    children: [/*#__PURE__*/_jsxs(Grid.Item, {
+      shrink: 0,
+      className: styles.imageContainer,
+      children: [/*#__PURE__*/_jsx(Portal, {
+        name: portals.PRODUCT_ITEM_IMAGE_BEFORE,
+        props: {
+          productId: product.id
+        }
+      }), /*#__PURE__*/_jsx(Portal, {
+        name: portals.PRODUCT_ITEM_IMAGE,
+        props: {
+          productId: product.id
+        },
+        children: /*#__PURE__*/_jsx(Image, {
+          itemProp: "image",
+          src: product.featuredImageBaseUrl,
+          alt: product.name
+        })
+      }), /*#__PURE__*/_jsx(Portal, {
+        name: portals.PRODUCT_ITEM_IMAGE_AFTER,
+        props: {
+          productId: product.id
+        }
+      }), /*#__PURE__*/_jsx(ProductBadges, {
+        location: "productList",
+        productId: product.id,
+        children: !!product.price.discount && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Portal, {
+            name: portals.PRODUCT_ITEM_DISCOUNT_BEFORE,
+            props: {
+              productId: product.id
+            }
+          }), /*#__PURE__*/_jsx(Portal, {
+            name: portals.PRODUCT_ITEM_DISCOUNT,
+            props: {
+              productId: product.id
+            },
+            children: /*#__PURE__*/_jsx(DiscountBadge, {
+              className: styles.discount,
+              text: `-${product.price.discount}%`
+            })
+          }), /*#__PURE__*/_jsx(Portal, {
+            name: portals.PRODUCT_ITEM_DISCOUNT_AFTER,
+            props: {
+              productId: product.id
+            }
+          })]
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Grid.Item, {
+      grow: 4,
+      className: styles.titleContainer,
+      children: [/*#__PURE__*/_jsx(ProductName, {
+        name: product.name,
+        portalName: portals.PRODUCT_ITEM_NAME,
+        portalProps: {
+          productId: product.id
+        },
+        itemProp: "name",
+        testId: `Productname: ${product.name}`
+      }), (!display || display.manufacturer && product.manufacturer) && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Portal, {
+          name: portals.PRODUCT_ITEM_MANUFACTURER_BEFORE,
+          props: {
+            productId: product.id
+          }
+        }), /*#__PURE__*/_jsx(Portal, {
+          name: portals.PRODUCT_ITEM_MANUFACTURER,
+          props: {
+            productId: product.id
+          },
+          children: /*#__PURE__*/_jsx(Manufacturer, {
+            text: product.manufacturer,
+            className: styles.manufacturer
+          })
+        }), /*#__PURE__*/_jsx(Portal, {
+          name: portals.PRODUCT_ITEM_MANUFACTURER_AFTER,
+          props: {
+            productId: product.id
+          }
+        })]
+      }), product.availability && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Portal, {
+          name: portals.PRODUCT_ITEM_AVAILABILITY_BEFORE,
+          props: {
+            productId: product.id
+          }
+        }), /*#__PURE__*/_jsx(Portal, {
+          name: portals.PRODUCT_ITEM_AVAILABILITY,
+          props: {
+            productId: product.id
+          },
+          children: /*#__PURE__*/_jsx(Availability, {
+            className: styles.availability,
+            text: product.availability.text,
+            state: product.availability.state
+          })
+        }), /*#__PURE__*/_jsx(Portal, {
+          name: portals.PRODUCT_ITEM_AVAILABILITY_AFTER,
+          props: {
+            productId: product.id
+          }
+        })]
+      }), (!product.availability || product.availability.state === AVAILABILITY_STATE_OK) && /*#__PURE__*/_jsx(Availability, {
+        state: !product.stock || product.stock.orderable ? AVAILABILITY_STATE_OK : AVAILABILITY_STATE_ALERT,
+        text: i18n.text('product.available.not'),
+        showWhenAvailable: false
+      })]
+    }), (!display || display.price) && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Portal, {
+        name: portals.PRODUCT_ITEM_PRICE_BEFORE,
+        props: {
+          productId: product.id,
+          location: 'productList'
+        }
+      }), /*#__PURE__*/_jsx(Portal, {
+        name: portals.PRODUCT_ITEM_PRICE,
+        props: {
+          productId: product.id,
+          location: 'productList'
+        },
+        children: /*#__PURE__*/_jsxs(Grid.Item, {
+          grow: 1,
+          className: styles.priceContainer,
+          children: [/*#__PURE__*/_jsx(Portal, {
+            name: portals.PRODUCT_ITEM_PRICE_INSIDE_BEFORE,
+            props: {
+              productId: product.id
+            }
+          }), /*#__PURE__*/_jsx(Price, {
+            className: styles.price,
+            currency: product.price.currency,
+            discounted: !!product.price.discount,
+            unitPrice: product.price.unitPrice,
+            unitPriceMin: product.price.unitPriceMin,
+            unitPriceMax: product.price.unitPriceMax
+          }), product.price.msrp > 0 && product.price.unitPrice !== product.price.msrp && /*#__PURE__*/_jsx(PriceStriked, {
+            value: product.price.msrp,
+            currency: product.price.currency,
+            className: styles.priceStriked
+          }), !product.price.msrp && product.price.unitPriceStriked > 0 && /*#__PURE__*/_jsx(PriceStriked, {
+            value: product.price.unitPriceStriked,
+            currency: product.price.currency,
+            className: styles.priceStriked
+          }), /*#__PURE__*/_jsx(PriceInfo, {
+            product: product,
+            className: styles.priceInfo
+          }), /*#__PURE__*/_jsx(Portal, {
+            name: portals.PRODUCT_ITEM_PRICE_INSIDE_AFTER,
+            props: {
+              productId: product.id
+            }
+          })]
+        })
+      }), /*#__PURE__*/_jsx(Portal, {
+        name: portals.PRODUCT_ITEM_PRICE_AFTER,
+        props: {
+          productId: product.id,
+          location: 'productList'
+        }
+      })]
+    }), /*#__PURE__*/_jsx(Grid.Item, {
+      shrink: 0,
+      className: styles.favouriteContainer
+    })]
+  })
+});
 Item.defaultProps = {
   display: null
 };

package/product/components/ProductList/components/Iterator/index.js

@@ -12,33 +12,36 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @return {JSX}
  */
-const Iterator = props => /*#__PURE__*/React.createElement(List.Item, {
-  key: props.id,
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Iterator = props => /*#__PURE__*/_jsx(List.Item, {
   itemProp: "itemListElement",
   itemScope: true,
   itemType: "http://schema.org/ListItem",
-  className: styles.item
-}, /*#__PURE__*/React.createElement(ProductListEntryProvider, {
-  productId: props.id
-}, /*#__PURE__*/React.createElement(Portal, {
-  name: portals.PRODUCT_ITEM_BEFORE,
-  props: {
-    productId: props.id
-  }
-}), /*#__PURE__*/React.createElement(Portal, {
-  name: portals.PRODUCT_ITEM,
-  props: {
-    productId: props.id
-  }
-}, /*#__PURE__*/React.createElement(Item, {
-  product: props,
-  display: props.display
-})), /*#__PURE__*/React.createElement(Portal, {
-  name: portals.PRODUCT_ITEM_AFTER,
-  props: {
-    productId: props.id
-  }
-})));
+  className: styles.item,
+  children: /*#__PURE__*/_jsxs(ProductListEntryProvider, {
+    productId: props.id,
+    children: [/*#__PURE__*/_jsx(Portal, {
+      name: portals.PRODUCT_ITEM_BEFORE,
+      props: {
+        productId: props.id
+      }
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: portals.PRODUCT_ITEM,
+      props: {
+        productId: props.id
+      },
+      children: /*#__PURE__*/_jsx(Item, {
+        product: props,
+        display: props.display
+      })
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: portals.PRODUCT_ITEM_AFTER,
+      props: {
+        productId: props.id
+      }
+    })]
+  })
+}, props.id);
 Iterator.defaultProps = {
   display: null
 };