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

package/product/components/ProductGrid/components/Item/components/ItemDiscount/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { SurroundPortals, DiscountBadge } from '@shopgate/engage/components';
 import { PRODUCT_ITEM_DISCOUNT } from '@shopgate/engage/category';
 import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   root: {
     minWidth: 40
@@ -28,14 +29,16 @@ const ItemDiscount = ({
   if (!discount) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: cx(classes.root, 'theme__product-grid__item__item-discount')
-  }, /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: PRODUCT_ITEM_DISCOUNT,
-    portalProps: portalProps
-  }, /*#__PURE__*/React.createElement(DiscountBadge, {
-    text: `-${discount}%`
-  })));
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(classes.root, 'theme__product-grid__item__item-discount'),
+    children: /*#__PURE__*/_jsx(SurroundPortals, {
+      portalName: PRODUCT_ITEM_DISCOUNT,
+      portalProps: portalProps,
+      children: /*#__PURE__*/_jsx(DiscountBadge, {
+        text: `-${discount}%`
+      })
+    })
+  });
 };
 ItemDiscount.defaultProps = {
   discount: null

package/product/components/ProductGrid/components/Item/components/ItemFavoritesButton/index.js

@@ -6,6 +6,7 @@ import { PRODUCT_ITEM_FAVORITES_BUTTON } from '@shopgate/engage/category';
 import { isRelativeProductOnList } from '@shopgate/engage/favorites';
 import { getLoadWishlistOnAppStartEnabled } from '@shopgate/engage/core';
 import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   root: {
     position: 'absolute',
@@ -35,17 +36,19 @@ const ItemFavoritesButton = ({
   const portalProps = useMemo(() => ({
     productId
   }), [productId]);
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
+  return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PRODUCT_ITEM_FAVORITES_BUTTON,
-    portalProps: portalProps
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.root,
-    "data-test-id": "favorites"
-  }, /*#__PURE__*/React.createElement(FavoritesButton, {
-    active: isFavorite,
-    productId: productId,
-    noShadow: true,
-    removeWithRelatives: true
-  })));
+    portalProps: portalProps,
+    children: /*#__PURE__*/_jsx("div", {
+      className: classes.root,
+      "data-test-id": "favorites",
+      children: /*#__PURE__*/_jsx(FavoritesButton, {
+        active: isFavorite,
+        productId: productId,
+        noShadow: true,
+        removeWithRelatives: true
+      })
+    })
+  });
 };
 export default /*#__PURE__*/memo(ItemFavoritesButton);

package/product/components/ProductGrid/components/Item/components/ItemFavoritesButton/spec.js

@@ -5,26 +5,29 @@ import { Provider } from 'react-redux';
 import { createMockStore } from '@shopgate/pwa-common/store';
 import favorites from '@shopgate/pwa-common-commerce/favorites/reducers';
 import ItemFavoritesButton from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/components');
 const store = createMockStore(combineReducers({
   favorites
 }));
 describe('<ItemFavoritesButton />', () => {
   it('should not render when its not a favorite', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Provider, {
-      store: store
-    }, /*#__PURE__*/React.createElement(ItemFavoritesButton, {
-      productId: "1234"
-    })));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Provider, {
+      store: store,
+      children: /*#__PURE__*/_jsx(ItemFavoritesButton, {
+        productId: "1234"
+      })
+    }));
     expect(wrapper).toMatchSnapshot();
   });
   it('should render if its a favorite', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Provider, {
-      store: store
-    }, /*#__PURE__*/React.createElement(ItemFavoritesButton, {
-      productId: "1234",
-      isFavorite: true
-    })));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Provider, {
+      store: store,
+      children: /*#__PURE__*/_jsx(ItemFavoritesButton, {
+        productId: "1234",
+        isFavorite: true
+      })
+    }));
     expect(wrapper).toMatchSnapshot();
   });
 });

package/product/components/ProductGrid/components/Item/components/ItemImage/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { SurroundPortals } from '@shopgate/engage/components';
 import { PRODUCT_ITEM_IMAGE } from '@shopgate/engage/category/constants';
 import { getProductImageSettings, ProductImage } from '@shopgate/engage/product';
+import { jsx as _jsx } from "react/jsx-runtime";
 const {
   ListImage: gridResolutions
 } = getProductImageSettings();
@@ -20,15 +21,16 @@ const ItemImage = ({
   const portalProps = useMemo(() => ({
     productId
   }), [productId]);
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
+  return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PRODUCT_ITEM_IMAGE,
-    portalProps: portalProps
-  }, /*#__PURE__*/React.createElement(ProductImage, {
-    alt: name,
-    src: imageUrl,
-    resolutions: gridResolutions,
-    itemProp: "image"
-  }));
+    portalProps: portalProps,
+    children: /*#__PURE__*/_jsx(ProductImage, {
+      alt: name,
+      src: imageUrl,
+      resolutions: gridResolutions,
+      itemProp: "image"
+    })
+  });
 };
 ItemImage.defaultProps = {
   imageUrl: null,

package/product/components/ProductGrid/components/Item/components/ItemImage/spec.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import ItemImage from "./index";
-jest.mock('@shopgate/engage/components', () => ({
-  ProductImage: () => null
-}));
+import { jsx as _jsx } from "react/jsx-runtime";
+jest.mock('@shopgate/engage/components');
+jest.mock('@shopgate/engage/product');
 describe('<ItemImage />', () => {
   it('should render', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ItemImage, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(ItemImage, {
       productId: "1234",
       imageUrl: "http://www.google.com",
       name: "FooBar"

package/product/components/ProductGrid/components/Item/components/ItemName/index.js

@@ -4,6 +4,7 @@ import { PRODUCT_ITEM_NAME, PRODUCT_ITEM_NAME_BEFORE, PRODUCT_ITEM_NAME_AFTER }
 import { Portal } from '@shopgate/engage/components';
 import { ProductName } from '@shopgate/engage/product';
 import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   root: {
     fontWeight: '500',
@@ -33,15 +34,17 @@ const ItemName = ({
     display
   }), [display, productId]);
   if (display && !display.name) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Portal, {
-      name: PRODUCT_ITEM_NAME_BEFORE,
-      props: portalProps
-    }), /*#__PURE__*/React.createElement(Portal, {
-      name: PRODUCT_ITEM_NAME_AFTER,
-      props: portalProps
-    }));
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Portal, {
+        name: PRODUCT_ITEM_NAME_BEFORE,
+        props: portalProps
+      }), /*#__PURE__*/_jsx(Portal, {
+        name: PRODUCT_ITEM_NAME_AFTER,
+        props: portalProps
+      })]
+    });
   }
-  return /*#__PURE__*/React.createElement(ProductName, {
+  return /*#__PURE__*/_jsx(ProductName, {
     name: name,
     className: cx(classes.root, 'theme__product-grid__item__item-name'),
     portalName: PRODUCT_ITEM_NAME,

package/product/components/ProductGrid/components/Item/components/ItemName/spec.js

@@ -1,16 +1,20 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import ItemName from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/product', () => ({
   ProductName: () => null
 }));
+jest.mock('@shopgate/engage/components');
 const props = {
   productId: '1234',
   name: 'Foo'
 };
 describe('<ItemName />', () => {
   it('should render with minimal props', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ItemName, props));
+    const wrapper = shallow(/*#__PURE__*/_jsx(ItemName, {
+      ...props
+    }));
     expect(wrapper).toMatchSnapshot();
   });
 });

package/product/components/ProductGrid/components/Item/components/ItemPrice/index.js

@@ -9,6 +9,7 @@ import { ProductGridPrice } from '@shopgate/engage/product';
  * @param {Object} props The component props.
  * @returns {JSX.Element|null}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const ItemPrice = ({
   display,
   product
@@ -23,12 +24,13 @@ const ItemPrice = ({
   if (display && !display.price) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
+  return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PRODUCT_ITEM_PRICE,
-    portalProps: portalProps
-  }, /*#__PURE__*/React.createElement(ProductGridPrice, {
-    product: product
-  }));
+    portalProps: portalProps,
+    children: /*#__PURE__*/_jsx(ProductGridPrice, {
+      product: product
+    })
+  });
 };
 ItemPrice.defaultProps = {
   display: null

package/product/components/ProductGrid/components/Item/components/ItemPrice/spec.js

@@ -1,15 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { shallow } from 'enzyme';
 import ItemPrice from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/product', () => ({
   ProductGridPrice: () => null
 }));
-jest.mock('@shopgate/engage/components', () => ({
-  Portal: ({
-    children
-  }) => children
-}));
+jest.mock('@shopgate/engage/components');
 jest.mock('@shopgate/engage/category', () => ({
   PRODUCT_ITEM_PRICE: 'PRODUCT_ITEM_PRICE',
   PRODUCT_ITEM_PRICE_AFTER: 'PRODUCT_ITEM_PRICE_AFTER',
@@ -26,13 +22,16 @@ const display = {
 };
 describe('<ItemPrice />', () => {
   it('should render with minimal props', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ItemPrice, props));
+    const wrapper = shallow(/*#__PURE__*/_jsx(ItemPrice, {
+      ...props
+    }));
     expect(wrapper).toMatchSnapshot();
   });
   it('should not render with display props set', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ItemPrice, _extends({}, props, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(ItemPrice, {
+      ...props,
       display: display
-    })));
+    }));
     expect(wrapper).toBeEmptyRender();
   });
 });

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

@@ -10,6 +10,7 @@ import ItemImage from "./components/ItemImage";
 import ItemDiscount from "./components/ItemDiscount";
 import ItemFavoritesButton from "./components/ItemFavoritesButton";
 import ItemDetails from "./components/ItemDetails";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   colors
 } = themeConfig;
@@ -51,37 +52,41 @@ const Item = ({
   const {
     meta
   } = useProductListType();
-  return /*#__PURE__*/React.createElement("div", {
-    className: cx(classes.root, 'theme__product-grid__item')
-  }, /*#__PURE__*/React.createElement(Link, {
-    role: "none",
-    href: getProductRoute(product.id),
-    state: {
-      title: product.name,
-      ...meta
-    }
-  }, isBeta() && product.featuredMedia ? /*#__PURE__*/React.createElement(FeaturedMedia, {
-    type: product.featuredMedia.type,
-    url: product.featuredMedia.url
-  }) : /*#__PURE__*/React.createElement(ItemImage, {
-    productId: product.id,
-    name: product.name,
-    imageUrl: product.featuredImageBaseUrl
-  })), /*#__PURE__*/React.createElement(ProductBadges, {
-    location: "productGrid",
-    productId: product.id
-  }, /*#__PURE__*/React.createElement(ItemDiscount, {
-    productId: product.id,
-    discount: product.price.discount || null
-  })), /*#__PURE__*/React.createElement("div", {
-    className: classes.itemDetails
-  }, /*#__PURE__*/React.createElement(ItemDetails, {
-    product: product,
-    display: display,
-    productListTypeMeta: meta
-  }), /*#__PURE__*/React.createElement(ItemFavoritesButton, {
-    productId: product.id
-  })));
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(classes.root, 'theme__product-grid__item'),
+    children: [/*#__PURE__*/_jsx(Link, {
+      role: "none",
+      href: getProductRoute(product.id),
+      state: {
+        title: product.name,
+        ...meta
+      },
+      children: isBeta() && product.featuredMedia ? /*#__PURE__*/_jsx(FeaturedMedia, {
+        type: product.featuredMedia.type,
+        url: product.featuredMedia.url
+      }) : /*#__PURE__*/_jsx(ItemImage, {
+        productId: product.id,
+        name: product.name,
+        imageUrl: product.featuredImageBaseUrl
+      })
+    }), /*#__PURE__*/_jsx(ProductBadges, {
+      location: "productGrid",
+      productId: product.id,
+      children: /*#__PURE__*/_jsx(ItemDiscount, {
+        productId: product.id,
+        discount: product.price.discount || null
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: classes.itemDetails,
+      children: [/*#__PURE__*/_jsx(ItemDetails, {
+        product: product,
+        display: display,
+        productListTypeMeta: meta
+      }), /*#__PURE__*/_jsx(ItemFavoritesButton, {
+        productId: product.id
+      })]
+    })]
+  });
 };
 Item.defaultProps = {
   display: null

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

@@ -10,6 +10,7 @@ import Item from "../Item";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Iterator = props => {
   const portalProps = {
     productId: props.id
@@ -18,19 +19,21 @@ const Iterator = props => {
     id,
     display
   } = props;
-  return /*#__PURE__*/React.createElement(Grid.Item, {
-    key: id,
+  return /*#__PURE__*/_jsx(Grid.Item, {
     "data-test-id": props.name,
-    className: "theme__product-grid__item__container"
-  }, /*#__PURE__*/React.createElement(ProductListEntryProvider, {
-    productId: props.id
-  }, /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: PRODUCT_ITEM,
-    portalProps: portalProps
-  }, /*#__PURE__*/React.createElement(Item, {
-    product: props,
-    display: display
-  }))));
+    className: "theme__product-grid__item__container",
+    children: /*#__PURE__*/_jsx(ProductListEntryProvider, {
+      productId: props.id,
+      children: /*#__PURE__*/_jsx(SurroundPortals, {
+        portalName: PRODUCT_ITEM,
+        portalProps: portalProps,
+        children: /*#__PURE__*/_jsx(Item, {
+          product: props,
+          display: display
+        })
+      })
+    })
+  }, id);
 };
 Iterator.defaultProps = {
   display: null,

package/product/components/ProductGrid/components/Layout/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Grid } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()((theme, {
   columns
 }) => ({
@@ -32,11 +33,12 @@ const Layout = ({
   } = useStyles({
     columns
   });
-  return /*#__PURE__*/React.createElement(Grid, {
+  return /*#__PURE__*/_jsx(Grid, {
     wrap: true,
     className: cx(classes.root, className, 'theme__product-grid'),
-    "data-test-id": "productGrid"
-  }, children);
+    "data-test-id": "productGrid",
+    children: children
+  });
 };
 Layout.defaultProps = {
   className: null,

package/product/components/ProductGrid/index.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.regexp.flags.js";
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
@@ -8,6 +7,7 @@ import { ITEMS_PER_LOAD } from '@shopgate/engage/core/constants';
 import { useResponsiveValue } from '@shopgate/engage/styles';
 import Iterator from "./components/Iterator";
 import Layout from "./components/Layout";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const WIDGET_ID = '@shopgate/engage/product/ProductGrid';
 
 /**
@@ -51,40 +51,44 @@ const ProductGrid = ({
     md: 4
   });
   if (!infiniteLoad) {
-    return /*#__PURE__*/React.createElement(Layout, {
+    return /*#__PURE__*/_jsx(Layout, {
       columns: columns,
-      className: className
-    }, /*#__PURE__*/React.createElement(ProductListTypeProvider, {
-      type: "productGrid",
-      subType: scope,
-      meta: meta
-    }, products.map(product => /*#__PURE__*/React.createElement(Iterator, _extends({
-      display: flags,
-      id: product.id,
-      key: product.id
-    }, product)))));
+      className: className,
+      children: /*#__PURE__*/_jsx(ProductListTypeProvider, {
+        type: "productGrid",
+        subType: scope,
+        meta: meta,
+        children: products.map(product => /*#__PURE__*/_jsx(Iterator, {
+          display: flags,
+          id: product.id,
+          ...product
+        }, product.id))
+      })
+    });
   }
-  return /*#__PURE__*/React.createElement(ProductListTypeProvider, {
+  return /*#__PURE__*/_jsx(ProductListTypeProvider, {
     type: "productGrid",
     subType: scope,
-    meta: meta
-  }, /*#__PURE__*/React.createElement(InfiniteContainer, {
-    containerRef: getContentRef(),
-    wrapper: props => /*#__PURE__*/React.createElement(Layout, _extends({
+    meta: meta,
+    children: /*#__PURE__*/_jsx(InfiniteContainer, {
+      containerRef: getContentRef(),
+      wrapper: props => /*#__PURE__*/_jsx(Layout, {
+        columns: columns,
+        className: className,
+        ...props
+      }),
+      iterator: Iterator,
+      loader: handleGetProducts,
+      items: products,
       columns: columns,
-      className: className
-    }, props)),
-    iterator: Iterator,
-    loader: handleGetProducts,
-    items: products,
-    columns: columns,
-    loadingIndicator: /*#__PURE__*/React.createElement(LoadingIndicator, null),
-    totalItems: totalProductCount,
-    initialLimit: ITEMS_PER_LOAD,
-    limit: ITEMS_PER_LOAD,
-    requestHash: requestHash,
-    enablePromiseBasedLoading: true
-  }));
+      loadingIndicator: /*#__PURE__*/_jsx(LoadingIndicator, {}),
+      totalItems: totalProductCount,
+      initialLimit: ITEMS_PER_LOAD,
+      limit: ITEMS_PER_LOAD,
+      requestHash: requestHash,
+      enablePromiseBasedLoading: true
+    })
+  });
 };
 ProductGrid.defaultProps = {
   flags: null,

package/product/components/ProductGrid/spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import ProductGrid from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
 global.console.error = jest.fn();
 jest.mock('@shopgate/engage/core', () => ({
   hasWebBridge: jest.fn(() => false),
@@ -32,7 +33,7 @@ jest.mock('@shopgate/engage/product', () => ({
 }));
 describe('<ProductGrid />', () => {
   it('should render with the InfiniteContainer', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(ProductGrid, {
+    const wrapper = mount(/*#__PURE__*/_jsx(ProductGrid, {
       products: []
     }));
     expect(wrapper).toMatchSnapshot();
@@ -40,7 +41,7 @@ describe('<ProductGrid />', () => {
     expect(wrapper.find('Layout').exists()).toBe(false);
   });
   it('should render the original layout', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(ProductGrid, {
+    const wrapper = mount(/*#__PURE__*/_jsx(ProductGrid, {
       infiniteLoad: false,
       products: []
     }));

package/product/components/ProductGridPrice/index.js

@@ -11,35 +11,48 @@ import styles from "./style";
  * @param {Object} product A product entity.
  * @return {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ProductGridPrice = ({
   product
 }) => {
   const {
     price
   } = product;
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Grid, {
-    className: `${styles.priceWrapper} engage__product__product-grid-price`,
-    wrap: true
-  }, /*#__PURE__*/React.createElement(Grid.Item, {
-    grow: 1
-  }, /*#__PURE__*/React.createElement(Price, {
-    currency: price.currency,
-    discounted: !!price.discount,
-    unitPrice: price.unitPrice,
-    unitPriceMin: price.unitPriceMin,
-    unitPriceMax: price.unitPriceMax
-  })), price.msrp > 0 && price.unitPrice !== price.msrp && /*#__PURE__*/React.createElement(Grid.Item, null, /*#__PURE__*/React.createElement(PriceStriked, {
-    className: styles.strikedPrice,
-    value: price.msrp,
-    currency: price.currency
-  })), !price.msrp && price.unitPriceStriked > 0 && price.unitPrice !== price.unitPriceStriked && /*#__PURE__*/React.createElement(Grid.Item, null, /*#__PURE__*/React.createElement(PriceStriked, {
-    className: styles.strikedPrice,
-    value: price.unitPriceStriked,
-    currency: price.currency
-  }))), /*#__PURE__*/React.createElement(PriceInfo, {
-    product: product,
-    className: styles.basicPrice,
-    wrapper: children => /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Item, null, children))
-  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Grid, {
+      className: `${styles.priceWrapper} engage__product__product-grid-price`,
+      wrap: true,
+      children: [/*#__PURE__*/_jsx(Grid.Item, {
+        grow: 1,
+        children: /*#__PURE__*/_jsx(Price, {
+          currency: price.currency,
+          discounted: !!price.discount,
+          unitPrice: price.unitPrice,
+          unitPriceMin: price.unitPriceMin,
+          unitPriceMax: price.unitPriceMax
+        })
+      }), price.msrp > 0 && price.unitPrice !== price.msrp && /*#__PURE__*/_jsx(Grid.Item, {
+        children: /*#__PURE__*/_jsx(PriceStriked, {
+          className: styles.strikedPrice,
+          value: price.msrp,
+          currency: price.currency
+        })
+      }), !price.msrp && price.unitPriceStriked > 0 && price.unitPrice !== price.unitPriceStriked && /*#__PURE__*/_jsx(Grid.Item, {
+        children: /*#__PURE__*/_jsx(PriceStriked, {
+          className: styles.strikedPrice,
+          value: price.unitPriceStriked,
+          currency: price.currency
+        })
+      })]
+    }), /*#__PURE__*/_jsx(PriceInfo, {
+      product: product,
+      className: styles.basicPrice,
+      wrapper: children => /*#__PURE__*/_jsx(Grid, {
+        children: /*#__PURE__*/_jsx(Grid.Item, {
+          children: children
+        })
+      })
+    })]
+  });
 };
 export default withPriceCalculation(ProductGridPrice);

package/product/components/ProductImage/ProductImagePlaceholder.js

@@ -5,6 +5,7 @@ import PlaceholderIcon from '@shopgate/pwa-ui-shared/icons/PlaceholderIcon';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { useLoadImage } from '@shopgate/engage/core';
 import styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   colors
 } = themeConfig;
@@ -42,13 +43,14 @@ const ProductImagePlaceholder = ({
   const contentClasses = classnames(styles.placeholderContent, {
     [styles.innerShadow]: showInnerShadow
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: contentClasses,
     style: contentStyles,
-    "data-test-id": "placeHolder"
-  }, showPlaceholder && /*#__PURE__*/React.createElement(PlaceholderIcon, {
-    className: styles.placeholder
-  }), !showPlaceholder && ' ');
+    "data-test-id": "placeHolder",
+    children: [showPlaceholder && /*#__PURE__*/_jsx(PlaceholderIcon, {
+      className: styles.placeholder
+    }), !showPlaceholder && ' ']
+  });
 };
 ProductImagePlaceholder.defaultProps = {
   src: null,