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

package/product/components/ProductImage/spec.js

@@ -1 +1,83 @@
-import React from'react';import{shallow}from'enzyme';import Image from'@shopgate/pwa-common/components/Image';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";jest.unmock('@shopgate/pwa-core');jest.mock("../../../core/hocs/withWidgetSettings");jest.mock('@shopgate/pwa-common/helpers/config');jest.mock("./connector",function(){return function(Component){return Component;};});jest.mock('@shopgate/engage/components',function(){return{Image:function Image(){return null;}};});describe('<ProductImage />',function(){it('should render a placeholder if no src prop is provided',function(){var wrapper=shallow(React.createElement(ProductImage,null)).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',function(){var wrapper=shallow(React.createElement(ProductImage,{src:"http://placehold.it/300x300"})).dive();expect(wrapper).toMatchSnapshot();expect(wrapper.find(Image).length).toBe(1);expect(wrapper.find(PlaceholderIcon).length).toBe(0);});it('should not apply an inner shadow to the placeholder if turned off via the app config',function(){jest.spyOn(appConfig,'hideProductImageShadow','get').mockReturnValue(true);var wrapper=shallow(React.createElement(ProductImage,null)).dive();expect(wrapper).toMatchSnapshot();expect(wrapper.find(".".concat(styles.innerShadow)).length).toBe(0);});it('should not apply an inner shadow to the image if turned off via the app config',function(){jest.spyOn(appConfig,'hideProductImageShadow','get').mockReturnValue(true);var wrapper=shallow(React.createElement(ProductImage,{src:"http://placehold.it/300x300"})).dive();expect(wrapper).toMatchSnapshot();expect(wrapper.find(".".concat(styles.innerShadow)).length).toBe(0);});it('should not apply an inner shadow to the placeholder if turned off via the widget settings',function(){var wrapper=shallow(React.createElement(ProductImage,{widgetSettings:{showInnerShadow:false}})).dive();expect(wrapper).toMatchSnapshot();expect(wrapper.find(".".concat(styles.innerShadow)).length).toBe(0);});it('should not apply an inner shadow to the image if turned off via the widget settings',function(){var wrapper=shallow(React.createElement(ProductImage,{src:"http://placehold.it/300x300",widgetSettings:{showInnerShadow:false}}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(".".concat(styles.innerShadow)).length).toBe(0);});it('should apply an inner shadow to the placeholder if turned off via the widget settings',function(){var wrapper=shallow(React.createElement(ProductImage,{widgetSettings:{showInnerShadow:true}})).dive();expect(wrapper).toMatchSnapshot();expect(wrapper.find(".".concat(styles.innerShadow)).length).toBe(1);});it('should apply an inner shadow to the image if turned off via the widget settings',function(){var wrapper=shallow(React.createElement(ProductImage,{src:"http://placehold.it/300x300",widgetSettings:{showInnerShadow:true}})).dive();expect(wrapper).toMatchSnapshot();expect(wrapper.find(".".concat(styles.innerShadow)).length).toBe(1);});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import Image from '@shopgate/pwa-common/components/Image';
+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');
+jest.mock("./connector", () => Component => Component);
+jest.mock('@shopgate/engage/components', () => ({
+  Image: () => null
+}));
+describe('<ProductImage />', () => {
+  it('should render a placeholder if no src prop is provided', () => {
+    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__*/_jsx(ProductImage, {
+      src: "http://placehold.it/300x300"
+    })).dive();
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(Image).length).toBe(1);
+    expect(wrapper.find(PlaceholderIcon).length).toBe(0);
+  });
+  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__*/_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__*/_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__*/_jsx(ProductImage, {
+      widgetSettings: {
+        showInnerShadow: false
+      }
+    })).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 widget settings', () => {
+    const wrapper = shallow(/*#__PURE__*/_jsx(ProductImage, {
+      src: "http://placehold.it/300x300",
+      widgetSettings: {
+        showInnerShadow: false
+      }
+    }));
+    expect(wrapper).toMatchSnapshot();
+    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__*/_jsx(ProductImage, {
+      widgetSettings: {
+        showInnerShadow: true
+      }
+    })).dive();
+    expect(wrapper).toMatchSnapshot();
+    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__*/_jsx(ProductImage, {
+      src: "http://placehold.it/300x300",
+      widgetSettings: {
+        showInnerShadow: true
+      }
+    })).dive();
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(`.${styles.innerShadow}`).length).toBe(1);
+  });
+});

package/product/components/ProductImage/style.js

@@ -1,5 +1,55 @@
-import{css}from'glamor';import{themeShadows,themeColors}from'@shopgate/pwa-common/helpers/config';/**
+import { css } from 'glamor';
+import { themeShadows, themeColors } from '@shopgate/pwa-common/helpers/config';
+
+/**
  * Returns the correct styling for the given ratio
  * @param {number} imageRatio imageRatio
  * @return {string}
- */var placeholderContainer=function placeholderContainer(imageRatio){return css({position:'relative',width:'100%',':before':{display:'block',content:'""',width:'100%',paddingTop:"".concat(100*imageRatio,"%")}}).toString();};var placeholderContent=css({position:'absolute',width:'100%',height:'100%',top:0,textAlign:'center'}).toString();var placeholderIconScale=0.65;var placeholder=css({position:'absolute',width:"".concat(placeholderIconScale*100,"% !important"),height:"".concat(placeholderIconScale*100,"% !important"),top:"".concat((1.0-placeholderIconScale)*50,"%"),left:"".concat((1.0-placeholderIconScale)*50,"%"),color:themeColors.placeholder}).toString();var innerShadow=css({position:'relative',overflow:'hidden',':after':{display:'block',content:'""',position:'absolute',top:0,right:0,bottom:0,left:0,boxShadow:themeShadows.productImage,pointerEvents:'none'}}).toString();export default{placeholderContainer:placeholderContainer,placeholderContent:placeholderContent,placeholder:placeholder,innerShadow:innerShadow};
+ */
+const placeholderContainer = imageRatio => css({
+  position: 'relative',
+  width: '100%',
+  ':before': {
+    display: 'block',
+    content: '""',
+    width: '100%',
+    paddingTop: `${100 * imageRatio}%`
+  }
+}).toString();
+const placeholderContent = css({
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  top: 0,
+  textAlign: 'center'
+}).toString();
+const placeholderIconScale = 0.65;
+const placeholder = css({
+  position: 'absolute',
+  width: `${placeholderIconScale * 100}% !important`,
+  height: `${placeholderIconScale * 100}% !important`,
+  top: `${(1.0 - placeholderIconScale) * 50}%`,
+  left: `${(1.0 - placeholderIconScale) * 50}%`,
+  color: themeColors.placeholder
+}).toString();
+const innerShadow = css({
+  position: 'relative',
+  overflow: 'hidden',
+  ':after': {
+    display: 'block',
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    boxShadow: themeShadows.productImage,
+    pointerEvents: 'none'
+  }
+}).toString();
+export default {
+  placeholderContainer,
+  placeholderContent,
+  placeholder,
+  innerShadow
+};

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

@@ -1,5 +1,207 @@
-import React,{Fragment}from'react';import PropTypes from'prop-types';import Grid from'@shopgate/pwa-common/components/Grid';import Image from'@shopgate/pwa-common/components/Image';import Link from'@shopgate/pwa-common/components/Link';import{bin2hex}from'@shopgate/pwa-common/helpers/data';import Portal from'@shopgate/pwa-common/components/Portal';import*as portals from'@shopgate/pwa-common-commerce/category/constants/Portals';import{ITEM_PATH,AVAILABILITY_STATE_OK,AVAILABILITY_STATE_ALERT}from'@shopgate/pwa-common-commerce/product/constants/index';import DiscountBadge from'@shopgate/pwa-ui-shared/DiscountBadge';import Price from'@shopgate/pwa-ui-shared/Price';import PriceStriked from'@shopgate/pwa-ui-shared/PriceStriked';import Manufacturer from'@shopgate/pwa-ui-shared/Manufacturer';import{Availability}from'@shopgate/engage/components';import{PriceInfo,ProductName,ProductBadges}from'@shopgate/engage/product';import{i18n}from'@shopgate/engage/core';import styles from"./style";/**
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import Grid from '@shopgate/pwa-common/components/Grid';
+import Image from '@shopgate/pwa-common/components/Image';
+import Link from '@shopgate/pwa-common/components/Link';
+import { bin2hex } from '@shopgate/pwa-common/helpers/data';
+import Portal from '@shopgate/pwa-common/components/Portal';
+import * as portals from '@shopgate/pwa-common-commerce/category/constants/Portals';
+import { ITEM_PATH, AVAILABILITY_STATE_OK, AVAILABILITY_STATE_ALERT } from '@shopgate/pwa-common-commerce/product/constants/index';
+import DiscountBadge from '@shopgate/pwa-ui-shared/DiscountBadge';
+import Price from '@shopgate/pwa-ui-shared/Price';
+import PriceStriked from '@shopgate/pwa-ui-shared/PriceStriked';
+import Manufacturer from '@shopgate/pwa-ui-shared/Manufacturer';
+import { Availability } from '@shopgate/engage/components';
+import { PriceInfo, ProductName, ProductBadges } from '@shopgate/engage/product';
+import { i18n } from '@shopgate/engage/core';
+import styles from "./style";
+
+/**
  * The Product List Item component.
  * @param {Object} props The component props.
  * @return {JSX}
- */var Item=function Item(_ref){var display=_ref.display,product=_ref.product;return React.createElement(Link,{tagName:"a",href:"".concat(ITEM_PATH,"/").concat(bin2hex(product.id)),className:"".concat(styles.container," engage__product__product-list__item"),itemProp:"item",itemScope:true,itemType:"http://schema.org/Product"},React.createElement(Grid,{className:styles.listItemContainer},React.createElement(Grid.Item,{shrink:0,className:styles.imageContainer},React.createElement(Portal,{name:portals.PRODUCT_ITEM_IMAGE_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_IMAGE,props:{productId:product.id}},React.createElement(Image,{itemProp:"image",src:product.featuredImageBaseUrl,alt:product.name})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_IMAGE_AFTER,props:{productId:product.id}}),React.createElement(ProductBadges,{location:"productList",productId:product.id},!!product.price.discount&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT,props:{productId:product.id}},React.createElement(DiscountBadge,{className:styles.discount,text:"-".concat(product.price.discount,"%")})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT_AFTER,props:{productId:product.id}})))),React.createElement(Grid.Item,{grow:4,className:styles.titleContainer},React.createElement(ProductName,{name:product.name,portalName:portals.PRODUCT_ITEM_NAME,portalProps:{productId:product.id},itemProp:"name",testId:"Productname: ".concat(product.name)}),(!display||display.manufacturer&&product.manufacturer)&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_MANUFACTURER_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_MANUFACTURER,props:{productId:product.id}},React.createElement(Manufacturer,{text:product.manufacturer,className:styles.manufacturer})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_MANUFACTURER_AFTER,props:{productId:product.id}})),product.availability&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_AVAILABILITY_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_AVAILABILITY,props:{productId:product.id}},React.createElement(Availability,{className:styles.availability,text:product.availability.text,state:product.availability.state})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_AVAILABILITY_AFTER,props:{productId:product.id}})),(!product.availability||product.availability.state===AVAILABILITY_STATE_OK)&&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)&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_BEFORE,props:{productId:product.id,location:'productList'}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE,props:{productId:product.id,location:'productList'}},React.createElement(Grid.Item,{grow:1,className:styles.priceContainer},React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_INSIDE_BEFORE,props:{productId:product.id}}),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&&React.createElement(PriceStriked,{value:product.price.msrp,currency:product.price.currency,className:styles.priceStriked}),!product.price.msrp&&product.price.unitPriceStriked>0&&React.createElement(PriceStriked,{value:product.price.unitPriceStriked,currency:product.price.currency,className:styles.priceStriked}),React.createElement(PriceInfo,{product:product,className:styles.priceInfo}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_INSIDE_AFTER,props:{productId:product.id}}))),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_AFTER,props:{productId:product.id,location:'productList'}})),React.createElement(Grid.Item,{shrink:0,className:styles.favouriteContainer})));};Item.defaultProps={display:null};export default Item;
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const Item = ({
+  display,
+  product
+}) => /*#__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",
+  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
+};
+export default Item;

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

@@ -1,2 +1,66 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables;var elementPadding=variables.gap.big/2;var containerPaddingSidewards={padding:elementPadding};var listItemContainer=css({padding:elementPadding,background:colors.light}).toString();var imageContainer=css(_extends({},containerPaddingSidewards,{width:40,minHeight:40,boxSizing:'content-box'})).toString();var titleContainer=css(_extends({},containerPaddingSidewards,{lineHeight:1.35,width:'50%'})).toString();var priceContainer=css(_extends({},containerPaddingSidewards,{lineHeight:1.35,textAlign:'right'})).toString();var favouriteContainer=css({display:'none',// Hidden for now
-width:40}).toString();var availability=css({fontSize:'0.75rem'}).toString();var manufacturer=css({fontSize:'0.875rem'}).toString();var price=css({justifyContent:'flex-end'}).toString();var priceStriked=css({fontSize:'0.875rem'}).toString();var priceInfo=css({fontSize:'0.75rem'}).toString();var discount=css({minWidth:40}).toString();export default{listItemContainer:listItemContainer,imageContainer:imageContainer,titleContainer:titleContainer,priceContainer:priceContainer,favouriteContainer:favouriteContainer,manufacturer:manufacturer,availability:availability,price:price,priceStriked:priceStriked,priceInfo:priceInfo,discount:discount};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors,
+  variables
+} = themeConfig;
+const elementPadding = variables.gap.big / 2;
+const containerPaddingSidewards = {
+  padding: elementPadding
+};
+const listItemContainer = css({
+  padding: elementPadding,
+  background: colors.light
+}).toString();
+const imageContainer = css({
+  ...containerPaddingSidewards,
+  width: 40,
+  minHeight: 40,
+  boxSizing: 'content-box'
+}).toString();
+const titleContainer = css({
+  ...containerPaddingSidewards,
+  lineHeight: 1.35,
+  width: '50%'
+}).toString();
+const priceContainer = css({
+  ...containerPaddingSidewards,
+  lineHeight: 1.35,
+  textAlign: 'right'
+}).toString();
+const favouriteContainer = css({
+  display: 'none',
+  // Hidden for now
+  width: 40
+}).toString();
+const availability = css({
+  fontSize: '0.75rem'
+}).toString();
+const manufacturer = css({
+  fontSize: '0.875rem'
+}).toString();
+const price = css({
+  justifyContent: 'flex-end'
+}).toString();
+const priceStriked = css({
+  fontSize: '0.875rem'
+}).toString();
+const priceInfo = css({
+  fontSize: '0.75rem'
+}).toString();
+const discount = css({
+  minWidth: 40
+}).toString();
+export default {
+  listItemContainer,
+  imageContainer,
+  titleContainer,
+  priceContainer,
+  favouriteContainer,
+  manufacturer,
+  availability,
+  price,
+  priceStriked,
+  priceInfo,
+  discount
+};

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

@@ -1,5 +1,48 @@
-import React from'react';import PropTypes from'prop-types';import List from'@shopgate/pwa-common/components/List';import Portal from'@shopgate/pwa-common/components/Portal';import*as portals from'@shopgate/pwa-common-commerce/category/constants/Portals';import{ProductListEntryProvider}from'@shopgate/engage/product';import Item from"../Item";import styles from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import List from '@shopgate/pwa-common/components/List';
+import Portal from '@shopgate/pwa-common/components/Portal';
+import * as portals from '@shopgate/pwa-common-commerce/category/constants/Portals';
+import { ProductListEntryProvider } from '@shopgate/engage/product';
+import Item from "../Item";
+import styles from "./style";
+
+/**
  * The Product List Iterator component.
  * @param {Object} props The component props.
  * @return {JSX}
- */var Iterator=function Iterator(props){return React.createElement(List.Item,{key:props.id,itemProp:"itemListElement",itemScope:true,itemType:"http://schema.org/ListItem",className:styles.item},React.createElement(ProductListEntryProvider,{productId:props.id},React.createElement(Portal,{name:portals.PRODUCT_ITEM_BEFORE,props:{productId:props.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM,props:{productId:props.id}},React.createElement(Item,{product:props,display:props.display})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_AFTER,props:{productId:props.id}})));};Iterator.defaultProps={display:null};export default Iterator;
+ */
+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,
+  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
+};
+export default Iterator;

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

@@ -1 +1,15 @@
-import{css}from'glamor';var item=css({':first-child':{paddingTop:0},':last-child':{paddingBottom:4},paddingTop:2,paddingBottom:2,position:'relative'}).toString();export default{item:item};
+import { css } from 'glamor';
+const item = css({
+  ':first-child': {
+    paddingTop: 0
+  },
+  ':last-child': {
+    paddingBottom: 4
+  },
+  paddingTop: 2,
+  paddingBottom: 2,
+  position: 'relative'
+}).toString();
+export default {
+  item
+};

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

@@ -1,5 +1,24 @@
-import React from'react';import PropTypes from'prop-types';import List from'@shopgate/pwa-common/components/List';import styles from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import List from '@shopgate/pwa-common/components/List';
+import styles from "./style";
+
+/**
  * The Product List Layout component.
  * @param {Object} props The component props.
  * @return {JSX}
- */var Layout=function Layout(_ref){var children=_ref.children;return React.createElement(List,{className:"".concat(styles.list," engage__product__product-list"),itemScope:true,itemType:"http://schema.org/ItemList","data-test-id":"productList"},children);};Layout.defaultProps={children:null};export default Layout;
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const Layout = ({
+  children
+}) => /*#__PURE__*/_jsx(List, {
+  className: `${styles.list} engage__product__product-list`,
+  itemScope: true,
+  itemType: "http://schema.org/ItemList",
+  "data-test-id": "productList",
+  children: children
+});
+Layout.defaultProps = {
+  children: null
+};
+export default Layout;

package/product/components/ProductList/components/Layout/style.js

@@ -1 +1,11 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;var list=css({background:colors.background}).toString();export default{list:list};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors
+} = themeConfig;
+const list = css({
+  background: colors.background
+}).toString();
+export default {
+  list
+};

package/product/components/ProductList/index.js

@@ -1,5 +1,71 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import PropTypes from'prop-types';import{ITEMS_PER_LOAD}from'@shopgate/pwa-common/constants/DisplayOptions';import InfiniteContainer from'@shopgate/pwa-common/components/InfiniteContainer';import LoadingIndicator from'@shopgate/pwa-ui-shared/LoadingIndicator';import{ViewContext}from'@shopgate/engage/components/View';import{ProductListTypeProvider}from'@shopgate/engage/product';import Iterator from"./components/Iterator";import Layout from"./components/Layout";/**
+import "core-js/modules/es.regexp.flags.js";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ITEMS_PER_LOAD } from '@shopgate/pwa-common/constants/DisplayOptions';
+import InfiniteContainer from '@shopgate/pwa-common/components/InfiniteContainer';
+import LoadingIndicator from '@shopgate/pwa-ui-shared/LoadingIndicator';
+import { ViewContext } from '@shopgate/engage/components/View';
+import { ProductListTypeProvider } from '@shopgate/engage/product';
+import Iterator from "./components/Iterator";
+import Layout from "./components/Layout";
+
+/**
  * The Product List component.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var ProductList=function ProductList(_ref){var flags=_ref.flags,infiniteLoad=_ref.infiniteLoad,handleGetProducts=_ref.handleGetProducts,products=_ref.products,totalProductCount=_ref.totalProductCount,requestHash=_ref.requestHash,scope=_ref.scope;if(!infiniteLoad){return React.createElement(Layout,null,React.createElement(ProductListTypeProvider,{type:"productList",subType:scope},products.map(function(product){return React.createElement(Iterator,_extends({display:flags,id:product.id,key:product.id},product));})));}return React.createElement(ViewContext.Consumer,null,function(_ref2){var getContentRef=_ref2.getContentRef;return React.createElement(ProductListTypeProvider,{type:"productList",subType:scope},React.createElement(InfiniteContainer,{containerRef:getContentRef(),wrapper:Layout,iterator:Iterator,loader:handleGetProducts,items:products,loadingIndicator:React.createElement(LoadingIndicator,null),totalItems:totalProductCount,initialLimit:10,limit:ITEMS_PER_LOAD,requestHash:requestHash,enablePromiseBasedLoading:true}));});};ProductList.defaultProps={flags:null,handleGetProducts:function handleGetProducts(){},infiniteLoad:true,products:null,requestHash:null,totalProductCount:null,scope:null};export default ProductList;
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const ProductList = ({
+  flags,
+  infiniteLoad,
+  handleGetProducts,
+  products,
+  totalProductCount,
+  requestHash,
+  scope
+}) => {
+  if (!infiniteLoad) {
+    return /*#__PURE__*/_jsx(Layout, {
+      children: /*#__PURE__*/_jsx(ProductListTypeProvider, {
+        type: "productList",
+        subType: scope,
+        children: products.map(product => /*#__PURE__*/_jsx(Iterator, {
+          display: flags,
+          id: product.id,
+          ...product
+        }, product.id))
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(ViewContext.Consumer, {
+    children: ({
+      getContentRef
+    }) => /*#__PURE__*/_jsx(ProductListTypeProvider, {
+      type: "productList",
+      subType: scope,
+      children: /*#__PURE__*/_jsx(InfiniteContainer, {
+        containerRef: getContentRef(),
+        wrapper: Layout,
+        iterator: Iterator,
+        loader: handleGetProducts,
+        items: products,
+        loadingIndicator: /*#__PURE__*/_jsx(LoadingIndicator, {}),
+        totalItems: totalProductCount,
+        initialLimit: 10,
+        limit: ITEMS_PER_LOAD,
+        requestHash: requestHash,
+        enablePromiseBasedLoading: true
+      })
+    })
+  });
+};
+ProductList.defaultProps = {
+  flags: null,
+  handleGetProducts: () => {},
+  infiniteLoad: true,
+  products: null,
+  requestHash: null,
+  totalProductCount: null,
+  scope: null
+};
+export default ProductList;