@shopgate/engage 6.18.7-beta.1 → 6.18.7-beta.5

package/components/constants.js

@@ -1 +1 @@
-export var PORTAL_PRODUCT_IMAGE='component.product-image';export var PORTAL_PRODUCT_MEDIA='component.product-media';export var PORTAL_PRODUCT_MEDIA_SECTION='component.product-media-section';
+export var PORTAL_PRODUCT_IMAGE='component.product-image';export var PORTAL_PRODUCT_MEDIA='component.product-media';export var PORTAL_PRODUCT_MEDIA_SECTION='component.product-media-section';export var PORTAL_PRODUCT_BADGES='component.product-badges';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "6.18.7-beta.1",
+  "version": "6.18.7-beta.5",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -15,12 +15,12 @@
     "connect"
   ],
   "dependencies": {
-    "@shopgate/pwa-common": "6.18.7-beta.1",
-    "@shopgate/pwa-common-commerce": "6.18.7-beta.1",
-    "@shopgate/pwa-core": "6.18.7-beta.1",
-    "@shopgate/pwa-ui-ios": "6.18.7-beta.1",
-    "@shopgate/pwa-ui-material": "6.18.7-beta.1",
-    "@shopgate/pwa-ui-shared": "6.18.7-beta.1",
+    "@shopgate/pwa-common": "6.18.7-beta.5",
+    "@shopgate/pwa-common-commerce": "6.18.7-beta.5",
+    "@shopgate/pwa-core": "6.18.7-beta.5",
+    "@shopgate/pwa-ui-ios": "6.18.7-beta.5",
+    "@shopgate/pwa-ui-material": "6.18.7-beta.5",
+    "@shopgate/pwa-ui-shared": "6.18.7-beta.5",
     "@virtuous/conductor": "~2.4.0",
     "babel-plugin-transform-es3-member-expression-literals": "^6.8.0",
     "babel-plugin-transform-es3-property-literals": "^6.8.0",

package/product/components/ProductBadges/index.js

@@ -0,0 +1,5 @@
+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,{useMemo}from'react';import PropTypes from'prop-types';import{css}from'glamor';import classNames from'classnames';import kebabCase from'lodash/kebabCase';import{SurroundPortals}from"../../../components";import{PORTAL_PRODUCT_BADGES}from"../../../components/constants";var styles={root:css({position:'absolute',left:10,top:8,zIndex:5,transform:'translate3d(0, 0, 0)',display:'flex',pointerEvents:'none',width:'100%',' > *:empty':{display:'none'}}).toString()};/**
+ * The ProductBadges component
+ * @param {Object} props The component props
+ * @returns {JSX}
+ */var ProductBadges=function ProductBadges(_ref){var children=_ref.children,location=_ref.location,productId=_ref.productId,portalProps=_ref.portalProps,className=_ref.className;var props=useMemo(function(){return _extends({},portalProps,{location:location,productId:productId});},[location,portalProps,productId]);var locationClass=useMemo(function(){if(!location){return'';}return"product_badges__".concat(kebabCase(location));},[location]);return React.createElement("div",{className:classNames(styles.root,className,'product_badges',locationClass)},React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_BADGES,portalProps:props},children));};ProductBadges.defaultProps={portalProps:null,children:PropTypes.node,className:''};export default ProductBadges;

package/product/components/ProductCard/index.js

@@ -1,4 +1,4 @@
-import React,{Fragment}from'react';import PropTypes from'prop-types';import{isBeta}from'@shopgate/engage/core';import{Link,Ellipsis,Portal,RatingStars,DiscountBadge}from'@shopgate/engage/components';import{getProductRoute,MapPriceHint,ProductImage,OrderQuantityHint,FeaturedMedia,Swatches}from'@shopgate/engage/product';import*as portals from'@shopgate/pwa-common-commerce/category';import ProductGridPrice from"../ProductGridPrice";import{getProductImageSettings}from"../../helpers";import styles from"./style";var location='productCard';/**
+import React,{Fragment}from'react';import PropTypes from'prop-types';import{isBeta}from'@shopgate/engage/core';import{Link,Ellipsis,Portal,RatingStars,DiscountBadge}from'@shopgate/engage/components';import{getProductRoute,MapPriceHint,ProductImage,OrderQuantityHint,FeaturedMedia,Swatches,ProductBadges}from'@shopgate/engage/product';import*as portals from'@shopgate/pwa-common-commerce/category';import ProductGridPrice from"../ProductGridPrice";import{getProductImageSettings}from"../../helpers";import styles from"./style";var location='productCard';/**
  * The ProductCard component.
  * @param {Object} props The component props.
  * @param {Object} props.product The product data.
@@ -7,4 +7,4 @@ import React,{Fragment}from'react';import PropTypes from'prop-types';import{isBe
  * @param {boolean} props.hideName Whether the name should be hidden.
  * @param {number} props.titleRows The max number of rows for the product title.
  * @return {JSX}
- */function ProductCard(props){var product=props.product,hidePrice=props.hidePrice,hideRating=props.hideRating,hideName=props.hideName,titleRows=props.titleRows;var _getProductImageSetti=getProductImageSettings(),gridResolutions=_getProductImageSetti.ListImage;return React.createElement(Link,{className:"engage__product-card",tagName:"a",href:getProductRoute(product.id),itemProp:"item",itemScope:true,itemType:"http://schema.org/Product"},isBeta()&&product.featuredMedia?React.createElement(FeaturedMedia,{type:product.featuredMedia.type,url:product.featuredMedia.url,altText:product.featuredMedia.altText}):React.createElement(ProductImage,{src:product.featuredImageBaseUrl,resolutions:gridResolutions,alt:product.name,itemProp:"image"}),!!(!hidePrice&&product.price.discount)&&React.createElement("div",{className:styles.badgeWrapper},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,{text:"-".concat(product.price.discount,"%")})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT_AFTER,props:{productId:product.id}})),!(hidePrice&&hideRating)&&React.createElement("div",{className:styles.details},!hideRating&&product.rating&&product.rating.average>0&&React.createElement(RatingStars,{value:product.rating.average}),React.createElement(Swatches,{productId:product.id}),!hideName&&React.createElement("div",{itemProp:"name",className:styles.title,"data-test-id":"Productname: ".concat(product.name)},React.createElement(Ellipsis,{rows:titleRows||3},product.name)),React.createElement(MapPriceHint,{productId:product.id}),React.createElement(OrderQuantityHint,{productId:product.id}),!hidePrice&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_BEFORE,props:{productId:product.id,location:location}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE,props:{productId:product.id,location:location}},React.createElement(ProductGridPrice,{price:product.price})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_AFTER,props:{productId:product.id,location:location}}))));}export default ProductCard;
+ */function ProductCard(props){var product=props.product,hidePrice=props.hidePrice,hideRating=props.hideRating,hideName=props.hideName,titleRows=props.titleRows;var _getProductImageSetti=getProductImageSettings(),gridResolutions=_getProductImageSetti.ListImage;return React.createElement(Link,{className:"engage__product-card",tagName:"a",href:getProductRoute(product.id),itemProp:"item",itemScope:true,itemType:"http://schema.org/Product"},isBeta()&&product.featuredMedia?React.createElement(FeaturedMedia,{type:product.featuredMedia.type,url:product.featuredMedia.url,altText:product.featuredMedia.altText}):React.createElement(ProductImage,{src:product.featuredImageBaseUrl,resolutions:gridResolutions,alt:product.name,itemProp:"image"}),React.createElement(ProductBadges,{location:location,productId:product.id},!!(!hidePrice&&product.price.discount)&&React.createElement("div",{className:styles.badgeWrapper},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,{text:"-".concat(product.price.discount,"%")})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT_AFTER,props:{productId:product.id}}))),!(hidePrice&&hideRating)&&React.createElement("div",{className:styles.details},!hideRating&&product.rating&&product.rating.average>0&&React.createElement(RatingStars,{value:product.rating.average}),React.createElement(Swatches,{productId:product.id}),!hideName&&React.createElement("div",{itemProp:"name",className:styles.title,"data-test-id":"Productname: ".concat(product.name)},React.createElement(Ellipsis,{rows:titleRows||3},product.name)),React.createElement(MapPriceHint,{productId:product.id}),React.createElement(OrderQuantityHint,{productId:product.id}),!hidePrice&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_BEFORE,props:{productId:product.id,location:location}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE,props:{productId:product.id,location:location}},React.createElement(ProductGridPrice,{price:product.price})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_AFTER,props:{productId:product.id,location:location}}))));}export default ProductCard;

package/product/components/ProductCard/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig,themeName}from'@shopgate/pwa-common/helpers/config';var isIOS=themeName.includes('ios');var colors=themeConfig.colors;var container=css(isIOS?{fontSize:14}:{position:'relative',display:'block',background:colors.light,fontSize:14,height:'100%'}).toString();var details=css({padding:'12px 16px',lineHeight:1.35}).toString();var title=css({fontWeight:'500',lineHeight:1.15,marginTop:1}).toString();var badgeWrapper=css({lineHeight:1,position:'absolute',left:10,top:10,width:40}).toString();var wishlist=css({display:'none',position:'absolute',right:16,left:'auto',transform:'translate3d(0, -50%, 0)'}).toString();export default{badgeWrapper:badgeWrapper,container:container,details:details,title:title,wishlist:wishlist};
+import{css}from'glamor';import{themeConfig,themeName}from'@shopgate/pwa-common/helpers/config';var isIOS=themeName.includes('ios');var colors=themeConfig.colors;var container=css(isIOS?{fontSize:14}:{position:'relative',display:'block',background:colors.light,fontSize:14,height:'100%'}).toString();var details=css({padding:'12px 16px',lineHeight:1.35}).toString();var title=css({fontWeight:'500',lineHeight:1.15,marginTop:1}).toString();var badgeWrapper=css({minWidth:40}).toString();var wishlist=css({display:'none',position:'absolute',right:16,left:'auto',transform:'translate3d(0, -50%, 0)'}).toString();export default{badgeWrapper:badgeWrapper,container:container,details:details,title:title,wishlist:wishlist};

package/product/components/ProductCharacteristics/index.js

@@ -4,7 +4,7 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
 ref.current.focus();var option=ref.current.innerText;broadcastLiveMessage('product.pick_option_first',{params:{option:option}});ref.current.scrollIntoView({behavior:'smooth'});_this.setState({highlight:firstUnselected.id});}}return selected;});_defineProperty(_assertThisInitialized(_this),"checkSelectedCharacteristics",function(){var characteristics=_this.state.characteristics;var _this$props2=_this.props,variantId=_this$props2.variantId,variants=_this$props2.variants,finishTimeout=_this$props2.finishTimeout;if(!variants){return;}var filteredValues=Object.keys(characteristics).filter(function(key){return!!characteristics[key];});if(filteredValues.length!==variants.characteristics.length){return;}var products=variants.products.filter(function(product){return isMatch(product.characteristics,characteristics);});if(!products.length){return;}if(products[0].id===variantId){return;}setTimeout(function(){_this.props.navigate(products[0].id);},finishTimeout);});_defineProperty(_assertThisInitialized(_this),"handleSelection",function(selection){var _this$props3=_this.props,variants=_this$props3.variants,setCharacteristics=_this$props3.setCharacteristics;var id=selection.id,value=selection.value;_this.setState(function(_ref){var characteristics=_ref.characteristics;var state=prepareState(id,value,characteristics,variants.characteristics,variants.products);setCharacteristics(state);return{characteristics:_extends({},state),highlight:null};},_this.checkSelectedCharacteristics);});_defineProperty(_assertThisInitialized(_this),"buildValues",function(selections,charId,values,charIndex,selectedValue){// If this is the first characteristic then all values are selectable.
 if(charIndex===0){return values.map(function(value){return _extends({},value,{selectable:true,selected:selectedValue===value.id});});}var variants=_this.props.variants;var subset={};Object.keys(selections).forEach(function(item,index){if(index<charIndex){subset[item]=selections[item];}});// Filter products that match or partially match the current characteristic selection.
 var products=variants.products.filter(function(_ref2){var characteristics=_ref2.characteristics;return isMatch(characteristics,subset);});// Check if any of the values are present inside any of the matching products.
-return values.map(function(value){var selectable=products.some(function(_ref3){var characteristics=_ref3.characteristics;return isMatch(characteristics,_defineProperty({},charId,value.id));});return _extends({},value,{selectable:selectable,selected:selectedValue===value.id});});});_this.refsStore={};_this.state={highlight:null,characteristics:selectCharacteristics(_props)};_this.setRefs(_props);_props.conditioner.addConditioner('product-variants',_this.checkSelection);return _this;}/** @inheritDoc */_createClass(ProductCharacteristics,[{key:"componentDidMount",value:function componentDidMount(){this.checkSelectedCharacteristics();}/**
+return values.map(function(value){var selectable=products.some(function(_ref3){var characteristics=_ref3.characteristics;return isMatch(characteristics,_defineProperty({},charId,value.id));});return _extends({},value,{selectable:selectable,selected:selectedValue===value.id});});});_defineProperty(_assertThisInitialized(_this),"resetHighlight",function(){_this.setState({highlight:null});});_this.refsStore={};_this.state={highlight:null,characteristics:selectCharacteristics(_props)};_this.setRefs(_props);_props.conditioner.addConditioner('product-variants',_this.checkSelection);return _this;}/** @inheritDoc */_createClass(ProductCharacteristics,[{key:"componentDidMount",value:function componentDidMount(){this.checkSelectedCharacteristics();}/**
    * @param {Object} nextProps The next component props.
    */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(!this.props.variants&&nextProps.variants){// Initialize refs and characteristics when the variants prop was updated with a valid value.
 this.setRefs(nextProps);this.setState({characteristics:selectCharacteristics(nextProps)},this.checkSelectedCharacteristics);}}/**
@@ -14,8 +14,10 @@ this.setRefs(nextProps);this.setState({characteristics:selectCharacteristics(nex
    * Finds the first unselected characteristic.
    * @return {Object|null}
    */value:function findUnselectedCharacteristic(){var characteristics=this.state.characteristics;var unselected=this.props.variants.characteristics.filter(function(_char2){return!characteristics.hasOwnProperty(_char2.id);});if(unselected.length){return unselected[0];}return null;}/**
+   * Resets the highlight state
+   */},{key:"render",/**
    * @return {JSX}
-   */},{key:"render",value:function render(){var _this2=this;var characteristics=this.state.characteristics;var variants=this.props.variants;if(!variants){return null;}return React.createElement(VariantsContext.Provider,{value:this.state},variants.characteristics.map(function(_char3,index){var disabled=!isCharacteristicEnabled(characteristics,index);var selected=getSelectedValue(_char3.id,characteristics);var values=_this2.buildValues(characteristics,_char3.id,_char3.values,index,selected);return _this2.props.render({charRef:_this2.refsStore[_char3.id],disabled:disabled,highlight:_this2.state.highlight===_char3.id,id:_char3.id,key:_char3.id,label:_char3.label,swatch:!!_char3.swatch,// BETA
-select:_this2.handleSelection,selected:selected,values:values});}));}}]);return ProductCharacteristics;}(Component);_defineProperty(ProductCharacteristics,"defaultProps",{finishTimeout:0,variantId:null,variants:null/**
+   */value:function render(){var _this2=this;var characteristics=this.state.characteristics;var variants=this.props.variants;if(!variants){return null;}return React.createElement(VariantsContext.Provider,{value:this.state},variants.characteristics.map(function(_char3,index){var disabled=!isCharacteristicEnabled(characteristics,index);var selected=getSelectedValue(_char3.id,characteristics);var values=_this2.buildValues(characteristics,_char3.id,_char3.values,index,selected);return _this2.props.render({charRef:_this2.refsStore[_char3.id],disabled:disabled,highlight:_this2.state.highlight===_char3.id,id:_char3.id,key:_char3.id,label:_char3.label,swatch:!!_char3.swatch,// BETA
+select:_this2.handleSelection,selected:selected,values:values,resetHighlight:_this2.resetHighlight});}));}}]);return ProductCharacteristics;}(Component);_defineProperty(ProductCharacteristics,"defaultProps",{finishTimeout:0,variantId:null,variants:null/**
    * @param {Object} props The component props.
    */});export default connect(ProductCharacteristics);

package/product/components/ProductDiscountBadge/index.js

@@ -1,4 +1,4 @@
-import React from'react';import PropTypes from'prop-types';import{SurroundPortals}from'@shopgate/engage/components';import DiscountBadge from'@shopgate/pwa-ui-shared/DiscountBadge';import{PRODUCT_DISCOUNT}from'@shopgate/pwa-common-commerce/product/constants/Portals';import{useWidgetSettings}from'@shopgate/engage/core';import{css}from'glamor';import styles from"./style";import connect from"./connector";/**
+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{css}from'glamor';import{SurroundPortals}from'@shopgate/engage/components';import DiscountBadge from'@shopgate/pwa-ui-shared/DiscountBadge';import{PRODUCT_DISCOUNT}from'@shopgate/pwa-common-commerce/product/constants/Portals';import{useWidgetSettings}from'@shopgate/engage/core';import ProductBadges from"../ProductBadges";import styles from"./style";import connect from"./connector";/**
  * ProductDiscountBadge
  * @return {JSX}
- */var ProductDiscountBadge=function ProductDiscountBadge(_ref){var productId=_ref.productId,discount=_ref.discount;var _ref2=useWidgetSettings('@shopgate/engage/product/components/ProductDiscountBadge')||{},_ref2$pdp=_ref2.pdp,pdp=_ref2$pdp===void 0?{show:false,style:{}}:_ref2$pdp;if(!pdp.show){return null;}if(!discount){return null;}return React.createElement("div",{className:"".concat(styles.container," ").concat(css(pdp.style)," theme__product__product-discount"),"aria-hidden":true},React.createElement(SurroundPortals,{portalName:PRODUCT_DISCOUNT,portalProps:{productId:productId,discount:discount}},React.createElement(DiscountBadge,{className:styles.badge,text:"-".concat(discount,"%")})));};ProductDiscountBadge.defaultProps={discount:null};export default connect(ProductDiscountBadge);
+ */var ProductDiscountBadge=function ProductDiscountBadge(_ref){var productId=_ref.productId,discount=_ref.discount;var _ref2=useWidgetSettings('@shopgate/engage/product/components/ProductDiscountBadge')||{},_ref2$pdp=_ref2.pdp,pdp=_ref2$pdp===void 0?{show:false,style:{}}:_ref2$pdp;return React.createElement(ProductBadges,{className:styles.portal,location:"productDiscountBadge",productId:productId,portalProps:_extends({},pdp)},pdp.show&&discount?React.createElement("div",{className:"".concat(styles.container," ").concat(css(pdp.style)," theme__product__product-discount"),"aria-hidden":true},React.createElement(SurroundPortals,{portalName:PRODUCT_DISCOUNT,portalProps:{productId:productId,discount:discount}},React.createElement(DiscountBadge,{className:styles.badge,text:"-".concat(discount,"%")}))):null);};ProductDiscountBadge.defaultProps={discount:null};export default connect(ProductDiscountBadge);

package/product/components/ProductDiscountBadge/style.js

@@ -1 +1 @@
-import{css}from'glamor';var styles={container:css({lineHeight:1,position:'absolute',left:22,top:17,width:65,zIndex:10}),badge:css({fontSize:'1.15rem'}).toString()};export default styles;
+import{css}from'glamor';var styles={portal:css({top:12}).toString(),container:css({minWidth:65,zIndex:10}),badge:css({fontSize:'1.15rem'}).toString()};export default styles;

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

@@ -1,5 +1,5 @@
-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 Ellipsis from'@shopgate/pwa-common/components/Ellipsis';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}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 PriceInfo from'@shopgate/pwa-ui-shared/PriceInfo';import Manufacturer from'@shopgate/pwa-ui-shared/Manufacturer';import Availability from'@shopgate/pwa-ui-shared/Availability';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 Ellipsis from'@shopgate/pwa-common/components/Ellipsis';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}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 PriceInfo from'@shopgate/pwa-ui-shared/PriceInfo';import Manufacturer from'@shopgate/pwa-ui-shared/Manufacturer';import Availability from'@shopgate/pwa-ui-shared/Availability';import ProductBadges from"../../../ProductBadges";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}}),!!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,{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(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_NAME_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_NAME,props:{productId:product.id}},React.createElement("div",{itemProp:"name","data-test-id":"Productname: ".concat(product.name)},React.createElement(Ellipsis,null,product.name))),React.createElement(Portal,{name:portals.PRODUCT_ITEM_NAME_AFTER,props:{productId:product.id}})),(!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}}))),(!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}),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}),product.price.info&&React.createElement(PriceInfo,{text:product.price.info,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;
+ */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(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_NAME_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_NAME,props:{productId:product.id}},React.createElement("div",{itemProp:"name","data-test-id":"Productname: ".concat(product.name)},React.createElement(Ellipsis,null,product.name))),React.createElement(Portal,{name:portals.PRODUCT_ITEM_NAME_AFTER,props:{productId:product.id}})),(!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}}))),(!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}),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}),product.price.info&&React.createElement(PriceInfo,{text:product.price.info,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;

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

@@ -1,2 +1,2 @@
 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();export default{listItemContainer:listItemContainer,imageContainer:imageContainer,titleContainer:titleContainer,priceContainer:priceContainer,favouriteContainer:favouriteContainer,manufacturer:manufacturer,availability:availability,price:price,priceStriked:priceStriked,priceInfo:priceInfo};
+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};

package/product/components/QuantityPicker/index.js

@@ -14,5 +14,5 @@ function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimi
 setPromiseResolve(function(){return resolve;});// Open sheet
 setOpened(true);});};// Mount effect
 useEffect(function(){// Add most late conditioner
-conditioner.addConditioner('product-quantity',checkQuantity,100);},[]);// Update resolveValue effect
-useEffect(function(){if(resolveValue===null){return;}if(promiseResolve){promiseResolve(resolveValue);}setResolveValue(null);},[resolveValue]);var _getQuantityRange=getQuantityRange(stock),min=_getQuantityRange.min,max=_getQuantityRange.max;var items=Array(max-min+1).fill(min).map(function(v,index){return String(v+index);});var styles=useWidgetStyles('@shopgate/engage/product/QuantityPicker');return React.createElement(SheetDrawer,{title:React.createElement(I18n.Text,{string:"product.quantity"}),isOpen:opened,onClose:handleCloseSheet,contentClassName:css(styles.sheet).toString()},React.createElement(SheetList,null,items.map(function(item){return React.createElement(SheetList.Item,{title:item,key:item,onClick:function onClick(){return handleSelectQuantity(parseInt(item,10));}});})));};QuantityPicker.defaultProps={stock:null};export default QuantityPicker;
+conditioner.addConditioner('product-quantity',checkQuantity,100);},[conditioner]);// Update resolveValue effect
+useEffect(function(){if(resolveValue===null){return;}if(promiseResolve){promiseResolve(resolveValue);}setResolveValue(null);},[promiseResolve,resolveValue]);var _getQuantityRange=getQuantityRange(stock),min=_getQuantityRange.min,max=_getQuantityRange.max;var items=Array(max-min+1).fill(min).map(function(v,index){return String(v+index);});var styles=useWidgetStyles('@shopgate/engage/product/QuantityPicker');return React.createElement(SheetDrawer,{title:React.createElement(I18n.Text,{string:"product.quantity"}),isOpen:opened,onClose:handleCloseSheet,contentClassName:css(styles.sheet).toString()},React.createElement(SheetList,null,items.map(function(item){return React.createElement(SheetList.Item,{title:item,key:item,onClick:function onClick(){return handleSelectQuantity(parseInt(item,10));}});})));};QuantityPicker.defaultProps={stock:null};export default QuantityPicker;

package/product/index.js

@@ -6,7 +6,7 @@ export*from'@shopgate/pwa-common-commerce/product/constants/index';export*from'@
 export*from'@shopgate/pwa-common-commerce/product/helpers';export*from"./helpers/index";export*from"./helpers/redirects";export*from"./components/Media/helpers";// SELECTORS
 export*from'@shopgate/pwa-common-commerce/product/selectors/options';export*from'@shopgate/pwa-common-commerce/product/selectors/page';export*from'@shopgate/pwa-common-commerce/product/selectors/price';export*from'@shopgate/pwa-common-commerce/product/selectors/product';export*from'@shopgate/pwa-common-commerce/product/selectors/relations';export*from'@shopgate/pwa-common-commerce/product/selectors/variants';export*from"./selectors/media";export{makeGetProductProperties,makeGetProductEffectivityDates,makeGetProductCharacteristics,makeGetProductFeaturedMedia,makeIsProductActive,makeIsBaseProductActive}from"./selectors/product";export*from"./selectors/price";export*from"./selectors/variants";export*from"./selectors/relations";// STREAMS
 export*from'@shopgate/pwa-common-commerce/product/streams';// COMPONENTS
-export{default as ProductProperties}from"./components/ProductProperties/ProductProperties";export{default as MapPriceHint}from"./components/MapPriceHint";export{default as OrderQuantityHint}from"./components/OrderQuantityHint";export{default as ProductImage}from"./components/ProductImage";export{default as MediaSlider}from"./components/MediaSlider";export{default as QuantityPicker}from"./components/QuantityPicker";export{default as EffectivityDates}from"./components/EffectivityDates";export{default as PriceDifference}from"./components/PriceDifference";export{FeaturedMedia,MediaImage}from"./components/Media";export{VariantSwatch}from"./components/Swatch";export{Swatches}from"./components/Swatches";export{RelationsSlider}from"./components/RelationsSlider";export{default as ProductCard}from"./components/ProductCard";export{default as ProductGridPrice}from"./components/ProductGridPrice";export{default as ProductCharacteristics}from"./components/ProductCharacteristics";export{default as Description}from"./components/Description";export{default as ProductList}from"./components/ProductList";export{default as ProductSlider}from"./components/ProductSlider";export{default as Options}from"./components/Options";export{default as Characteristics}from"./components/Characteristics";export{default as Rating}from"./components/Rating";export{default as ProductProvider}from"./components/ProductProvider";// HOCs
+export{default as ProductProperties}from"./components/ProductProperties/ProductProperties";export{default as MapPriceHint}from"./components/MapPriceHint";export{default as OrderQuantityHint}from"./components/OrderQuantityHint";export{default as ProductImage}from"./components/ProductImage";export{default as MediaSlider}from"./components/MediaSlider";export{default as QuantityPicker}from"./components/QuantityPicker";export{default as EffectivityDates}from"./components/EffectivityDates";export{default as PriceDifference}from"./components/PriceDifference";export{FeaturedMedia,MediaImage}from"./components/Media";export{VariantSwatch}from"./components/Swatch";export{Swatches}from"./components/Swatches";export{RelationsSlider}from"./components/RelationsSlider";export{default as ProductCard}from"./components/ProductCard";export{default as ProductGridPrice}from"./components/ProductGridPrice";export{default as ProductCharacteristics}from"./components/ProductCharacteristics";export{default as Description}from"./components/Description";export{default as ProductList}from"./components/ProductList";export{default as ProductSlider}from"./components/ProductSlider";export{default as Options}from"./components/Options";export{default as Characteristics}from"./components/Characteristics";export{default as Rating}from"./components/Rating";export{default as ProductProvider}from"./components/ProductProvider";export{default as ProductBadges}from"./components/ProductBadges";// HOCs
 export{default as withPriceCalculation}from"./hocs/withPriceCalculation";export{default as withProductStock}from"./hocs/withProductStock";// HOOKs
 export{useLoadProductImage}from"./hooks/useLoadProductImage";// CONTEXTS
 export{default as VariantContext}from"./components/ProductCharacteristics/context";export{ProductContext}from"./components/context";export{ProductUnitQuantityPicker,UnitQuantityPicker}from"./components/UnitQuantityPicker";