@shopgate/engage 7.27.3-alpha.17 → 7.27.3-alpha.19

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

@@ -0,0 +1,5 @@
+import React,{memo,useMemo}from'react';import PropTypes from'prop-types';import{PRODUCT_ITEM_NAME,PRODUCT_ITEM_NAME_BEFORE,PRODUCT_ITEM_NAME_AFTER}from'@shopgate/engage/category/constants';import{Portal}from'@shopgate/engage/components';import{ProductName}from'@shopgate/engage/product';import{makeStyles}from'@shopgate/engage/styles';var useStyles=makeStyles()({root:{fontWeight:'500',lineHeight:1.15,marginTop:1,wordBreak:['keep-all','break-word'],hyphens:'auto'}});/**
+ * The item name component.
+ * @param {Object} props The component props.
+ * @returns {JSX.Element|null}
+ */var ItemName=function ItemName(_ref){var display=_ref.display,productId=_ref.productId,name=_ref.name;var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var portalProps=useMemo(function(){return{productId:productId,display:display};},[display,productId]);if(display&&!display.name){return React.createElement(React.Fragment,null,React.createElement(Portal,{name:PRODUCT_ITEM_NAME_BEFORE,props:portalProps}),React.createElement(Portal,{name:PRODUCT_ITEM_NAME_AFTER,props:portalProps}));}return React.createElement(ProductName,{name:name,className:cx(classes.root,'theme__product-grid__item__item-name'),portalName:PRODUCT_ITEM_NAME,portalProps:portalProps,testId:"Productname: ".concat(name)});};ItemName.defaultProps={display:null,name:null};export default memo(ItemName);

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

@@ -0,0 +1 @@
+import React from'react';import{shallow}from'enzyme';import ItemName from"./index";jest.mock('@shopgate/engage/product',function(){return{ProductName:function ProductName(){return null;}};});var props={productId:'1234',name:'Foo'};describe('<ItemName />',function(){it('should render with minimal props',function(){var wrapper=shallow(React.createElement(ItemName,props));expect(wrapper).toMatchSnapshot();});});

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

@@ -0,0 +1,5 @@
+import React,{memo,useMemo}from'react';import PropTypes from'prop-types';import{SurroundPortals}from'@shopgate/engage/components';import{PRODUCT_ITEM_PRICE}from'@shopgate/engage/category';import{ProductGridPrice}from'@shopgate/engage/product';/**
+ * The item price component.
+ * @param {Object} props The component props.
+ * @returns {JSX.Element|null}
+ */var ItemPrice=function ItemPrice(_ref){var display=_ref.display,product=_ref.product;var productId=product.id;var portalProps=useMemo(function(){return{productId:productId,location:'productGrid'};},[productId]);if(display&&!display.price){return null;}return React.createElement(SurroundPortals,{portalName:PRODUCT_ITEM_PRICE,portalProps:portalProps},React.createElement(ProductGridPrice,{product:product}));};ItemPrice.defaultProps={display:null};export default memo(ItemPrice);

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

@@ -0,0 +1 @@
+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{shallow}from'enzyme';import ItemPrice from"./index";jest.mock('@shopgate/engage/product',function(){return{ProductGridPrice:function ProductGridPrice(){return null;}};});jest.mock('@shopgate/engage/components',function(){return{Portal:function Portal(_ref){var children=_ref.children;return children;}};});jest.mock('@shopgate/engage/category',function(){return{PRODUCT_ITEM_PRICE:'PRODUCT_ITEM_PRICE',PRODUCT_ITEM_PRICE_AFTER:'PRODUCT_ITEM_PRICE_AFTER',PRODUCT_ITEM_PRICE_BEFORE:'PRODUCT_ITEM_PRICE_BEFORE'};});var props={product:{id:'1234',price:{}}};var display={price:false};describe('<ItemPrice />',function(){it('should render with minimal props',function(){var wrapper=shallow(React.createElement(ItemPrice,props));expect(wrapper).toMatchSnapshot();});it('should not render with display props set',function(){var wrapper=shallow(React.createElement(ItemPrice,_extends({},props,{display:display})));expect(wrapper).toBeEmptyRender();});});

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

@@ -0,0 +1,7 @@
+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,{memo}from'react';import PropTypes from'prop-types';import{isBeta}from'@shopgate/engage/core';import{getProductRoute,FeaturedMedia,ProductBadges}from'@shopgate/engage/product';import{Link}from'@shopgate/engage/components';import{useProductListType}from'@shopgate/engage/product/hooks';import{themeConfig}from'@shopgate/engage';import{makeStyles}from'@shopgate/engage/styles';import ItemImage from"./components/ItemImage";import ItemDiscount from"./components/ItemDiscount";import ItemFavoritesButton from"./components/ItemFavoritesButton";import ItemDetails from"./components/ItemDetails";var colors=themeConfig.colors;var useStyles=makeStyles()(function(theme,_ref){var display=_ref.display;return{root:{position:'relative',display:'flex',flexDirection:'column',background:colors.light,height:'100%'},itemDetails:_extends({position:'relative'},display&&!display.name&&!display.price&&!display.reviews&&{paddingBottom:30})};});/**
+ * The Product Grid Item component.
+ * @param {Object} props The component props.
+ * @param {Object} props.product The product.
+ * @param {Object} props.display The display object.
+ * @return {JSX.Element}
+ */var Item=function Item(_ref2){var product=_ref2.product,display=_ref2.display;var _useStyles=useStyles({display:display}),classes=_useStyles.classes,cx=_useStyles.cx;var _useProductListType=useProductListType(),meta=_useProductListType.meta;return React.createElement("div",{className:cx(classes.root,'theme__product-grid__item')},React.createElement(Link,{role:"none",href:getProductRoute(product.id),state:_extends({title:product.name},meta)},isBeta()&&product.featuredMedia?React.createElement(FeaturedMedia,{type:product.featuredMedia.type,url:product.featuredMedia.url}):React.createElement(ItemImage,{productId:product.id,name:product.name,imageUrl:product.featuredImageBaseUrl})),React.createElement(ProductBadges,{location:"productGrid",productId:product.id},React.createElement(ItemDiscount,{productId:product.id,discount:product.price.discount||null})),React.createElement("div",{className:classes.itemDetails},React.createElement(ItemDetails,{product:product,display:display,productListTypeMeta:meta}),React.createElement(ItemFavoritesButton,{productId:product.id})));};Item.defaultProps={display:null};export default memo(Item);

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

@@ -0,0 +1,5 @@
+import React from'react';import PropTypes from'prop-types';import{Grid,SurroundPortals}from'@shopgate/engage/components';import{PRODUCT_ITEM}from'@shopgate/engage/category';import{ProductListEntryProvider}from'@shopgate/engage/product';import Item from"../Item";/**
+ * The Product Grid Iterator component.
+ * @param {Object} props The component props.
+ * @returns {JSX}
+ */var Iterator=function Iterator(props){var portalProps={productId:props.id};var id=props.id,display=props.display;return React.createElement(Grid.Item,{key:id,"data-test-id":props.name,className:"theme__product-grid__item__container"},React.createElement(ProductListEntryProvider,{productId:props.id},React.createElement(SurroundPortals,{portalName:PRODUCT_ITEM,portalProps:portalProps},React.createElement(Item,{product:props,display:display}))));};Iterator.defaultProps={display:null,name:null};export default Iterator;

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

@@ -0,0 +1,5 @@
+import React from'react';import PropTypes from'prop-types';import{Grid}from'@shopgate/engage/components';import{makeStyles}from'@shopgate/engage/styles';var useStyles=makeStyles()(function(theme,_ref){var columns=_ref.columns;return{root:{padding:'0 16px',':not(:empty)':{marginTop:16},display:'grid',gridGap:'0 16px',gridTemplateColumns:"repeat(".concat(columns,", 1fr)")}};});/**
+ * The product grid layout component.
+ * @param {Object} props The component props.
+ * @returns {JSX}
+ */var Layout=function Layout(_ref2){var children=_ref2.children,columns=_ref2.columns,className=_ref2.className;var _useStyles=useStyles({columns:columns}),classes=_useStyles.classes,cx=_useStyles.cx;return React.createElement(Grid,{wrap:true,className:cx(classes.root,className,'theme__product-grid'),"data-test-id":"productGrid"},children);};Layout.defaultProps={className:null,children:null};export default Layout;

package/product/components/ProductGrid/index.js

@@ -0,0 +1,22 @@
+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,{useContext}from'react';import PropTypes from'prop-types';import{ViewContext,InfiniteContainer,LoadingIndicator}from'@shopgate/engage/components';import{ProductListTypeProvider}from'@shopgate/engage/product';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";export var WIDGET_ID='@shopgate/engage/product/ProductGrid';/**
+ * The Product Grid component.
+ * @param {Object} props The component props.
+ * @param {Array} props.products The list of products to display.
+ * @param {string} props.scope Optional scope of the component. Will be used as subType property of
+ * the ProductListTypeContext and is intended as a description in which "context" the component is
+ * used.
+ * @param {Object} props.meta Optional metadata for the product list type context.
+ * @param {Object} props.flags The flags object.
+ * @param {boolean} props.flags.name Whether to display product names.
+ * @param {boolean} props.flags.price Whether to display product prices.
+ * @param {boolean} props.flags.reviews Whether to display rating stars.
+ * @param {boolean} props.infiniteLoad Whether the grid should support infinite loading.
+ * @param {Function} props.handleGetProducts Callback function that's invoked to load more products
+ * when infinite loading is enabled.
+ * @param {number} props.totalProductCount The total number of products. Needed when infinite
+ * loading is enabled.
+ * @param {string} props.requestHash The hash for the current request. Needed when infinite loading
+ * is enabled
+ * @param {string} props.className Optional class name for the grid container
+ * @returns {JSX.Element}
+ */var ProductGrid=function ProductGrid(_ref){var flags=_ref.flags,infiniteLoad=_ref.infiniteLoad,handleGetProducts=_ref.handleGetProducts,products=_ref.products,totalProductCount=_ref.totalProductCount,requestHash=_ref.requestHash,scope=_ref.scope,meta=_ref.meta,className=_ref.className;var _useContext=useContext(ViewContext),getContentRef=_useContext.getContentRef;var columns=useResponsiveValue({xs:2,md:4});if(!infiniteLoad){return React.createElement(Layout,{columns:columns,className:className},React.createElement(ProductListTypeProvider,{type:"productGrid",subType:scope,meta:meta},products.map(function(product){return React.createElement(Iterator,_extends({display:flags,id:product.id,key:product.id},product));})));}return React.createElement(ProductListTypeProvider,{type:"productGrid",subType:scope,meta:meta},React.createElement(InfiniteContainer,{containerRef:getContentRef(),wrapper:function wrapper(props){return React.createElement(Layout,_extends({columns:columns,className:className},props));},iterator:Iterator,loader:handleGetProducts,items:products,columns:columns,loadingIndicator:React.createElement(LoadingIndicator,null),totalItems:totalProductCount,initialLimit:ITEMS_PER_LOAD,limit:ITEMS_PER_LOAD,requestHash:requestHash,enablePromiseBasedLoading:true}));};ProductGrid.defaultProps={flags:null,handleGetProducts:function handleGetProducts(){},infiniteLoad:true,products:null,requestHash:null,totalProductCount:null,scope:null,meta:null,className:null};export default ProductGrid;

package/product/components/ProductGrid/spec.js

@@ -0,0 +1 @@
+import React from'react';import{mount}from'enzyme';import ProductGrid from'.';global.console.error=jest.fn();jest.mock('@shopgate/engage/core',function(){return{hasWebBridge:jest.fn(function(){return false;}),isIOSTheme:jest.fn(function(){return false;}),withForwardedRef:jest.fn(),withCurrentProduct:jest.fn(),useWidgetSettings:jest.fn().mockReturnValue({})};});jest.mock('@shopgate/engage/components',function(){var _jest$requireActual=jest.requireActual('@shopgate/engage/components/View/context'),ViewContext=_jest$requireActual.ViewContext;return{ViewContext:ViewContext,InfiniteContainer:function InfiniteContainer(){return null;},Grid:function Grid(){return null;}};});jest.mock("./components/Iterator",function(){return function Iterator(){return null;};});jest.mock('@shopgate/engage/product',function(){return{ProductListTypeProvider:function ProductListTypeProvider(_ref){var children=_ref.children;return children;},ProductListEntryProvider:function ProductListEntryProvider(_ref2){var children=_ref2.children;return children;}};});describe('<ProductGrid />',function(){it('should render with the InfiniteContainer',function(){var wrapper=mount(React.createElement(ProductGrid,{products:[]}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('InfiniteContainer').exists()).toBe(true);expect(wrapper.find('Layout').exists()).toBe(false);});it('should render the original layout',function(){var wrapper=mount(React.createElement(ProductGrid,{infiniteLoad:false,products:[]}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('InfiniteContainer').exists()).toBe(false);expect(wrapper.find('Layout').exists()).toBe(true);});});

package/product/components/ProductGridPrice/index.js

@@ -1,6 +1,6 @@
-import React,{Fragment}from'react';import PropTypes from'prop-types';import{Grid,Price,PriceStriked,PriceInfo}from'@shopgate/engage/components';import withPriceCalculation from"../../hocs/withPriceCalculation";import styles from"./style";/**
+import React,{Fragment}from'react';import PropTypes from'prop-types';import{Grid,Price,PriceStriked}from'@shopgate/engage/components';import{PriceInfo}from'@shopgate/engage/product/components';import{withPriceCalculation}from'@shopgate/engage/product/hocs';import styles from"./style";/**
  * The ProductGridPrice component is supposed to be used to display prices at product grids. It
  * renders a row with the current price and a strike price when present. As same as the price info.
- * @param {Object} price The price object of a product entity.
- * @return {JSX}
- */var ProductGridPrice=function ProductGridPrice(_ref){var price=_ref.price;return/*#__PURE__*/React.createElement(Fragment,null,/*#__PURE__*/React.createElement(Grid,{className:"".concat(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})),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&&/*#__PURE__*/React.createElement(Grid.Item,null,/*#__PURE__*/React.createElement(PriceStriked,{className:styles.strikedPrice,value:price.unitPriceStriked,currency:price.currency}))),price.info&&/*#__PURE__*/React.createElement(Grid,null,/*#__PURE__*/React.createElement(Grid.Item,null,/*#__PURE__*/React.createElement(PriceInfo,{className:styles.basicPrice,text:price.info}))));};export default withPriceCalculation(ProductGridPrice);
+ * @param {Object} product A product entity.
+ * @return {JSX.Element}
+ */var ProductGridPrice=function ProductGridPrice(_ref){var product=_ref.product;var price=product.price;return React.createElement(Fragment,null,React.createElement(Grid,{className:"".concat(styles.priceWrapper," engage__product__product-grid-price"),wrap:true},React.createElement(Grid.Item,{grow:1},React.createElement(Price,{currency:price.currency,discounted:!!price.discount,unitPrice:price.unitPrice,unitPriceMin:price.unitPriceMin})),price.msrp>0&&price.unitPrice!==price.msrp&&React.createElement(Grid.Item,null,React.createElement(PriceStriked,{className:styles.strikedPrice,value:price.msrp,currency:price.currency})),!price.msrp&&price.unitPriceStriked>0&&price.unitPrice!==price.unitPriceStriked&&React.createElement(Grid.Item,null,React.createElement(PriceStriked,{className:styles.strikedPrice,value:price.unitPriceStriked,currency:price.currency}))),React.createElement(PriceInfo,{product:product,className:styles.basicPrice,wrapper:function wrapper(children){return React.createElement(Grid,null,React.createElement(Grid.Item,null,children));}}));};export default withPriceCalculation(ProductGridPrice);

package/product/components/ProductGridPrice/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeName}from'@shopgate/pwa-common/helpers/config';var isIOS=themeName.includes('ios');var priceWrapper=css(isIOS?{lineHeight:1.75,marginTop:2,alignItems:'center'}:{lineHeight:1.75}).toString();var basicPrice=css({fontSize:'0.85em',marginTop:-1}).toString();var strikedPrice=css(isIOS?{fontSize:'0.75rem'}:{}).toString();export default{basicPrice:basicPrice,priceWrapper:priceWrapper,strikedPrice:strikedPrice};
+import{css}from'glamor';import{themeName}from'@shopgate/pwa-common/helpers/config';var isIOS=themeName.includes('ios');var priceWrapper=css(isIOS?{lineHeight:1.75,marginTop:2,alignItems:'center'}:{lineHeight:1.75}).toString();var basicPrice=css({fontSize:'0.875rem'}).toString();var strikedPrice=css(isIOS?{fontSize:'0.75rem'}:{}).toString();export default{basicPrice:basicPrice,priceWrapper:priceWrapper,strikedPrice:strikedPrice};

package/product/components/ProductImage/ProductImagePlaceholder.js

@@ -0,0 +1,5 @@
+function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useEffect,useMemo,useState}from'react';import PropTypes from'prop-types';import classnames from'classnames';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";var colors=themeConfig.colors;/**
+ * The ProductImagePlaceholder component.
+ * @param {Object} props The components props.
+ * @returns {JSX}
+ */var ProductImagePlaceholder=function ProductImagePlaceholder(_ref){var src=_ref.src,showInnerShadow=_ref.showInnerShadow,noBackground=_ref.noBackground;var _useState=useState(true),_useState2=_slicedToArray(_useState,2),showPlaceholder=_useState2[0],setShowPlaceholder=_useState2[1];var srcLoaded=useLoadImage(src);useEffect(function(){setShowPlaceholder(false);},[srcLoaded]);var contentStyles=useMemo(function(){if(srcLoaded){return{backgroundImage:"url(".concat(src,")"),backgroundSize:'contain',backgroundRepeat:'no-repeat',backgroundPosition:'center',backgroundColor:noBackground?'transparent':colors.light,position:'absolute'};}return{backgroundColor:noBackground?'transparent':colors.light};},[src,noBackground,srcLoaded]);var contentClasses=classnames(styles.placeholderContent,_defineProperty({},styles.innerShadow,showInnerShadow));return React.createElement("div",{className:contentClasses,style:contentStyles,"data-test-id":"placeHolder"},showPlaceholder&&React.createElement(PlaceholderIcon,{className:styles.placeholder}),!showPlaceholder&&' ');};ProductImagePlaceholder.defaultProps={src:null,noBackground:false,showInnerShadow:false};export default ProductImagePlaceholder;

package/product/components/ProductImage/connector.js

@@ -0,0 +1,5 @@
+import{connect}from'react-redux';import{getProductImagePlaceholder}from"../../../core";/**
+ * Maps the current application state to the component props.
+ * @param {Object} state The current application state.
+ * @return {Object} The populated component props.
+ */var mapStateToProps=function mapStateToProps(state){return{placeholderSrc:getProductImagePlaceholder(state)};};export default connect(mapStateToProps);

package/product/components/ProductImage/index.js

@@ -1,27 +1,31 @@
-function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_typeof(obj);}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);}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen);}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++){arr2[i]=arr[i];}return arr2;}function _iterableToArrayLimit(arr,i){var _i=arr==null?null:typeof Symbol!=="undefined"&&arr[Symbol.iterator]||arr["@@iterator"];if(_i==null)return;var _arr=[];var _n=true;var _d=false;var _s,_e;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import isEqual from'lodash/isEqual';import classnames from'classnames';import{logger}from'@shopgate/pwa-core';import appConfig,{themeConfig}from'@shopgate/pwa-common/helpers/config';import Image from'@shopgate/pwa-common/components/Image';import PlaceholderIcon from'@shopgate/pwa-ui-shared/icons/PlaceholderIcon';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import{withWidgetSettings}from"../../../core/hocs/withWidgetSettings";import{PORTAL_PRODUCT_IMAGE}from"../../../components/constants";import styles from"./style";var colors=themeConfig.colors;/**
+function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}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);}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import isEqual from'lodash/isEqual';import classnames from'classnames';import{logger}from'@shopgate/pwa-core';import appConfig,{themeConfig}from'@shopgate/pwa-common/helpers/config';import Image from'@shopgate/pwa-common/components/Image';import PlaceholderIcon from'@shopgate/pwa-ui-shared/icons/PlaceholderIcon';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import{withWidgetSettings}from"../../../core/hocs/withWidgetSettings";import{PORTAL_PRODUCT_IMAGE}from"../../../components/constants";import ProductImagePlaceholder from"./ProductImagePlaceholder";import styles from"./style";import connect from"./connector";var colors=themeConfig.colors;/**
  * The product image component.
  * This component will behave like the core Image component with the additional
  * feature of showing a placeholder in case no src property has been passed
  * or the given source image cannot be loaded.
- */var ProductImage=/*#__PURE__*/function(_Component){_inherits(ProductImage,_Component);var _super=_createSuper(ProductImage);/**
-   * See Image component manual for detailed description about the component property types.
-   */ /**
+ */var ProductImage=/*#__PURE__*/function(_Component){/**
    * Component constructor
    * @param {Object} props The component properties
-   */function ProductImage(props){var _this;_classCallCheck(this,ProductImage);_this=_super.call(this,props);_defineProperty(_assertThisInitialized(_this),"imageLoadingFailed",function(){_this.setState({showPlaceholder:true});});_defineProperty(_assertThisInitialized(_this),"getImageRatio",function(){if(_this.props.ratio){var _this$props$ratio=_slicedToArray(_this.props.ratio,2),x=_this$props$ratio[0],y=_this$props$ratio[1];return(y/x).toFixed(3);}var _this$props$resolutio=_this.props.resolutions[_this.props.resolutions.length-1],width=_this$props$resolutio.width,height=_this$props$resolutio.height;return(height/width).toFixed(3);});logger.assert(!props.srcmap,'Use of srcmap prop is deprecated. Use resolutions instead');var showPlaceholder=!props.src&&(props.srcmap===null||props.srcmap.length===0);_this.state={showPlaceholder:showPlaceholder};return _this;}/**
+   */function ProductImage(props){var _this2;_classCallCheck(this,ProductImage);_this2=_callSuper(this,ProductImage,[props]);/**
+   * Triggered when the image could not be loaded for some reason.
+   */_defineProperty(_this2,"imageLoadingFailed",function(){_this2.setState({showPlaceholder:true,imageLoadingFailed:true});});/**
+   * Sets the image ratio based on width and height.
+   * @return {number} The image ratio.
+   */_defineProperty(_this2,"getImageRatio",function(){if(_this2.props.ratio){var _this2$props$ratio2=_slicedToArray(_this2.props.ratio,2),x=_this2$props$ratio2[0],y=_this2$props$ratio2[1];return(y/x).toFixed(3);}var _this2$props$resoluti=_this2.props.resolutions[_this2.props.resolutions.length-1],width=_this2$props$resoluti.width,height=_this2$props$resoluti.height;return(height/width).toFixed(3);});logger.assert(!props.srcmap,'Use of srcmap prop is deprecated. Use resolutions instead');var showPlaceholder=!props.src&&(props.srcmap===null||props.srcmap.length===0);_this2.state={showPlaceholder:showPlaceholder,imageLoadingFailed:false};return _this2;}/**
    * Called when the component props change.
    * @param {Object} nextProps The new component properties
-   */_createClass(ProductImage,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){// Disable the placeholder to give the real image a new chance to load.
+   */_inherits(ProductImage,_Component);return _createClass(ProductImage,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){// Disable the placeholder to give the real image a new chance to load.
 // If we do not have a src property set then just show the placeholder instead.
 var showPlaceholder=!nextProps.src&&(!nextProps.srcmap||nextProps.srcmap.length===0);this.setState({showPlaceholder:showPlaceholder});}/**
    * Should component update given the new props?
    * @param {Object} nextProps The next component props.
+   * @param {Object} nextState The next state.
    * @return {boolean} Update or not.
-   */},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps){return!isEqual(this.props,nextProps);}/**
-   * Triggered when the image could not be loaded for some reason.
-   */},{key:"render",value:/**
+   */},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps,nextState){return!isEqual(this.props,nextProps)||!isEqual(this.state,nextState);}},{key:"render",value:/**
    * Renders the component.
-   * @returns {JSX}
-   */function render(){var _this$props=this.props,noBackground=_this$props.noBackground,className=_this$props.className;var showInnerShadow=this.props.widgetSettings.showInnerShadow;if(typeof showInnerShadow==='undefined'){showInnerShadow=!appConfig.hideProductImageShadow;}if(this.state.showPlaceholder){var _classnames;// Image is not present or could not be loaded, show a placeholder.
-return/*#__PURE__*/React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_IMAGE},/*#__PURE__*/React.createElement("div",{className:classnames(styles.placeholderContainer(this.getImageRatio()),(_classnames={},_defineProperty(_classnames,styles.innerShadow,showInnerShadow),_defineProperty(_classnames,className,!!className),_classnames)),"aria-hidden":this.props['aria-hidden']},/*#__PURE__*/React.createElement("div",{className:styles.placeholderContent,"data-test-id":"placeHolder"},/*#__PURE__*/React.createElement(PlaceholderIcon,{className:styles.placeholder}))));}// Return the actual image.
-return/*#__PURE__*/React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_IMAGE},/*#__PURE__*/React.createElement("div",{"aria-hidden":this.props['aria-hidden'],className:"".concat(className," engage__product__product-image")},/*#__PURE__*/React.createElement(Image,_extends({},this.props,{className:showInnerShadow?styles.innerShadow:'',backgroundColor:noBackground?'transparent':colors.light,onError:this.imageLoadingFailed}))));}}]);return ProductImage;}(Component);_defineProperty(ProductImage,"defaultProps",{alt:null,animating:true,'aria-hidden':null,className:null,forcePlaceholder:false,highestResolutionLoaded:function highestResolutionLoaded(){},noBackground:false,ratio:null,resolutions:[{width:50,height:50,blur:2},{width:440,height:440}],src:null,srcmap:null,widgetSettings:{}});export{ProductImage as UnwrappedProductImage};export default withWidgetSettings(ProductImage,'@shopgate/engage/product/ProductImage');
+   * @returns {JSX.Element}
+   */function render(){var _this$props=this.props,noBackground=_this$props.noBackground,className=_this$props.className,placeholderSrc=_this$props.placeholderSrc;var showInnerShadow=this.props.widgetSettings.showInnerShadow;if(typeof showInnerShadow==='undefined'){showInnerShadow=!appConfig.hideProductImageShadow;}if(this.state.imageLoadingFailed||this.state.showPlaceholder){// Image is not present or could not be loaded, show a placeholder.
+return React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_IMAGE},React.createElement("div",{className:classnames(styles.placeholderContainer(this.getImageRatio()),_defineProperty(_defineProperty({},styles.innerShadow,showInnerShadow),className,!!className))},placeholderSrc?React.createElement(ProductImagePlaceholder,{src:placeholderSrc,showInnerShadow:showInnerShadow,noBackground:noBackground}):React.createElement("div",{"aria-hidden":true,className:styles.placeholderContent,"data-test-id":"placeHolder"},React.createElement(PlaceholderIcon,{className:styles.placeholder}))));}// Return the actual image.
+return React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_IMAGE,portalProps:{src:this.props.src,resolutions:this.props.resolutions}},React.createElement("div",{className:"".concat(className," engage__product__product-image")},React.createElement(Image,_extends({},this.props,{className:showInnerShadow?styles.innerShadow:'',backgroundColor:noBackground?'transparent':colors.light,onError:this.imageLoadingFailed,"aria-hidden":!this.props.alt}))));}}]);}(Component);/**
+   * See Image component manual for detailed description about the component property types.
+   */_defineProperty(ProductImage,"defaultProps",{alt:null,animating:true,className:null,forcePlaceholder:false,highestResolutionLoaded:function highestResolutionLoaded(){},noBackground:false,ratio:null,resolutions:[{width:50,height:50,blur:2},{width:440,height:440}],src:null,srcmap:null,placeholderSrc:null,widgetSettings:{}});export{ProductImage as UnwrappedProductImage};export default connect(withWidgetSettings(ProductImage,'@shopgate/engage/product/ProductImage'));

package/product/components/ProductImage/spec.js

@@ -1 +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";jest.unmock('@shopgate/pwa-core');jest.mock("../../../core/hocs/withWidgetSettings");jest.mock('@shopgate/pwa-common/helpers/config');describe('<ProductImage />',function(){it('should render a placeholder if no src prop is provided',function(){var wrapper=shallow(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/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(/*#__PURE__*/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";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);});});

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 ProductBadges from"../../../ProductBadges";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/*#__PURE__*/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"},/*#__PURE__*/React.createElement(Grid,{className:styles.listItemContainer},/*#__PURE__*/React.createElement(Grid.Item,{shrink:0,className:styles.imageContainer},/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_IMAGE_BEFORE,props:{productId:product.id}}),/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_IMAGE,props:{productId:product.id}},/*#__PURE__*/React.createElement(Image,{itemProp:"image",src:product.featuredImageBaseUrl,alt:product.name})),/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_IMAGE_AFTER,props:{productId:product.id}}),/*#__PURE__*/React.createElement(ProductBadges,{location:"productList",productId:product.id},!!product.price.discount&&/*#__PURE__*/React.createElement(Fragment,null,/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT_BEFORE,props:{productId:product.id}}),/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT,props:{productId:product.id}},/*#__PURE__*/React.createElement(DiscountBadge,{className:styles.discount,text:"-".concat(product.price.discount,"%")})),/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT_AFTER,props:{productId:product.id}})))),/*#__PURE__*/React.createElement(Grid.Item,{grow:4,className:styles.titleContainer},/*#__PURE__*/React.createElement(Fragment,null,/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_NAME_BEFORE,props:{productId:product.id}}),/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_NAME,props:{productId:product.id}},/*#__PURE__*/React.createElement("div",{itemProp:"name","data-test-id":"Productname: ".concat(product.name)},/*#__PURE__*/React.createElement(Ellipsis,null,product.name))),/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_NAME_AFTER,props:{productId:product.id}})),(!display||display.manufacturer&&product.manufacturer)&&/*#__PURE__*/React.createElement(Fragment,null,/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_MANUFACTURER_BEFORE,props:{productId:product.id}}),/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_MANUFACTURER,props:{productId:product.id}},/*#__PURE__*/React.createElement(Manufacturer,{text:product.manufacturer,className:styles.manufacturer})),/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_MANUFACTURER_AFTER,props:{productId:product.id}})),product.availability&&/*#__PURE__*/React.createElement(Fragment,null,/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_AVAILABILITY_BEFORE,props:{productId:product.id}}),/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_AVAILABILITY,props:{productId:product.id}},/*#__PURE__*/React.createElement(Availability,{className:styles.availability,text:product.availability.text,state:product.availability.state})),/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_AVAILABILITY_AFTER,props:{productId:product.id}}))),(!display||display.price)&&/*#__PURE__*/React.createElement(Fragment,null,/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_BEFORE,props:{productId:product.id,location:'productList'}}),/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE,props:{productId:product.id,location:'productList'}},/*#__PURE__*/React.createElement(Grid.Item,{grow:1,className:styles.priceContainer},/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_INSIDE_BEFORE,props:{productId:product.id}}),/*#__PURE__*/React.createElement(Price,{className:styles.price,currency:product.price.currency,discounted:!!product.price.discount,unitPrice:product.price.unitPrice,unitPriceMin:product.price.unitPriceMin}),product.price.msrp>0&&product.price.unitPrice!==product.price.msrp&&/*#__PURE__*/React.createElement(PriceStriked,{value:product.price.msrp,currency:product.price.currency,className:styles.priceStriked}),!product.price.msrp&&product.price.unitPriceStriked>0&&/*#__PURE__*/React.createElement(PriceStriked,{value:product.price.unitPriceStriked,currency:product.price.currency,className:styles.priceStriked}),product.price.info&&/*#__PURE__*/React.createElement(PriceInfo,{text:product.price.info,className:styles.priceInfo}),/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_INSIDE_AFTER,props:{productId:product.id}}))),/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_AFTER,props:{productId:product.id,location:'productList'}})),/*#__PURE__*/React.createElement(Grid.Item,{shrink:0,className:styles.favouriteContainer})));};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(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}),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;

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

@@ -2,4 +2,4 @@ import React from'react';import PropTypes from'prop-types';import List from'@sho
  * The Product List Iterator component.
  * @param {Object} props The component props.
  * @return {JSX}
- */var Iterator=function Iterator(props){return/*#__PURE__*/React.createElement(List.Item,{key:props.id,itemProp:"itemListElement",itemScope:true,itemType:"http://schema.org/ListItem",className:styles.item},/*#__PURE__*/React.createElement(ProductListEntryProvider,{productId:props.id},/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_BEFORE,props:{productId:props.id}}),/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM,props:{productId:props.id}},/*#__PURE__*/React.createElement(Item,{product:props,display:props.display})),/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_AFTER,props:{productId:props.id}})));};Iterator.defaultProps={display:null};export default Iterator;
+ */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;

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

@@ -2,4 +2,4 @@ import React from'react';import PropTypes from'prop-types';import List from'@sho
  * The Product List Layout component.
  * @param {Object} props The component props.
  * @return {JSX}
- */var Layout=function Layout(_ref){var children=_ref.children;return/*#__PURE__*/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;
+ */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;

package/product/components/ProductList/index.js

@@ -1,5 +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 from'react';import PropTypes from'prop-types';import{ProductListTypeProvider}from'@shopgate/engage/product';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 Iterator from"./components/Iterator";import Layout from"./components/Layout";/**
+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";/**
  * 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/*#__PURE__*/React.createElement(Layout,null,/*#__PURE__*/React.createElement(ProductListTypeProvider,{type:"productList",subType:scope},products.map(function(product){return/*#__PURE__*/React.createElement(Iterator,_extends({display:flags,id:product.id,key:product.id},product));})));}return/*#__PURE__*/React.createElement(ViewContext.Consumer,null,function(_ref2){var getContentRef=_ref2.getContentRef;return/*#__PURE__*/React.createElement(ProductListTypeProvider,{type:"productList",subType:scope},/*#__PURE__*/React.createElement(InfiniteContainer,{containerRef:getContentRef(),wrapper:Layout,iterator:Iterator,loader:handleGetProducts,items:products,loadingIndicator:/*#__PURE__*/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;
+ */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;

package/product/components/ProductName/ProductName.js

@@ -0,0 +1,4 @@
+function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React from'react';import PropTypes from'prop-types';import{css}from'glamor';import classNames from'classnames';import{responsiveMediaQuery}from'@shopgate/engage/styles';import{ConditionalWrapper,SurroundPortals}from'@shopgate/engage/components';import ProductNameContent from"./ProductNameContent";var styles={wrapper:css(_defineProperty({},responsiveMediaQuery('>xs',{webOnly:true}),{wordBreak:'keep-all !important',hyphens:'none !important'})).toString()};/**
+ * @param {Object} props The component props
+ * @returns {JSX.Element}
+ */var ProductName=function ProductName(_ref){var name=_ref.name,className=_ref.className,testId=_ref.testId,ellipsis=_ref.ellipsis,portalName=_ref.portalName,portalProps=_ref.portalProps,itemProp=_ref.itemProp,rows=_ref.rows,style=_ref.style;return React.createElement(ConditionalWrapper,{condition:!!portalName,wrapper:function wrapper(children){return React.createElement(SurroundPortals,{portalName:portalName,portalProps:portalProps},children);}},React.createElement("div",{className:classNames(styles.wrapper,className,'engage__product__product-name'),style:style,itemProp:itemProp,"data-test-id":testId,"aria-label":"".concat(name,".")},React.createElement(ProductNameContent,{name:name,ellipsis:ellipsis,rows:rows})));};ProductName.defaultProps={name:null,className:null,ellipsis:true,itemProp:null,portalName:null,portalProps:null,style:null,rows:null,testId:null};export default ProductName;

package/product/components/ProductName/ProductNameContent.js

@@ -0,0 +1,4 @@
+import React from'react';import PropTypes from'prop-types';import{Ellipsis,ConditionalWrapper}from'@shopgate/engage/components';/**
+ * @param {Object} props The component props
+ * @returns {JSX}
+ */var ProductNameContent=function ProductNameContent(_ref){var name=_ref.name,ellipsis=_ref.ellipsis,rows=_ref.rows;return React.createElement(ConditionalWrapper,{condition:ellipsis,wrapper:function wrapper(children){return React.createElement(Ellipsis,{rows:rows!==null?rows:undefined},React.createElement("span",null,children));}},React.createElement("span",{dangerouslySetInnerHTML:{__html:name}}));};ProductNameContent.defaultProps={name:null,ellipsis:true,rows:null};export default ProductNameContent;

package/product/components/ProductName/index.js

@@ -0,0 +1 @@
+export{default as ProductName}from"./ProductName";

package/product/components/ProductProperties/Content.js

@@ -1,8 +1,8 @@
-import React from'react';import PropTypes from'prop-types';import{isBeta}from"../../../core";import{getGroupsFromProperties}from"./helpers/getGroupsFromProperties";import GroupedProperties from"./GroupedProperties";import Wrapper from"./Wrapper";import Rows from"./Rows";import{groupsContainer}from"./style";/**
+import React,{useMemo}from'react';import PropTypes from'prop-types';import{isBeta}from'@shopgate/engage/core/helpers';import{getGroupsFromProperties}from"./helpers/getGroupsFromProperties";import GroupedProperties from"./GroupedProperties";import Wrapper from"./Wrapper";import Rows from"./Rows";import{groupsContainer}from"./style";/**
  * @param {Object} props The component props.
  * @returns {JSX}
- */var Content=function Content(_ref){var properties=_ref.properties;if(!properties){return null;}var groups=getGroupsFromProperties(properties);// Display the simple properties if no groups exist or if not in beta mode.
-if(!isBeta()||!groups||groups.length===0){return/*#__PURE__*/React.createElement(Wrapper,null,/*#__PURE__*/React.createElement(Rows,{properties:properties}));}/*
+ */var Content=function Content(_ref){var properties=_ref.properties;var groups=useMemo(function(){return getGroupsFromProperties(properties);},[properties]);if(!properties){return null;}// Display the simple properties if no groups exist or if not in beta mode.
+if(!isBeta()||!groups||groups.length===0){return React.createElement(Wrapper,null,React.createElement(Rows,{properties:properties}));}/*
     This feature is currently in BETA testing.
     It should only be used for approved BETA Client Projects
-  */return/*#__PURE__*/React.createElement("div",{className:"".concat(groupsContainer," engage__product__product-properties")},/*#__PURE__*/React.createElement(GroupedProperties,{properties:properties,groups:groups}));};Content.defaultProps={properties:null};export default Content;
+  */return React.createElement("div",{className:"".concat(groupsContainer," engage__product__product-properties")},React.createElement(GroupedProperties,{groups:groups}));};Content.defaultProps={properties:null};export default Content;

package/product/components/ProductProperties/Group.js

@@ -2,4 +2,4 @@ import React from'react';import PropTypes from'prop-types';import{subgroup}from"
  * Renders a product properties group header.
  * @param {Object} props The component props.
  * @return {JSX}
- */var Group=function Group(_ref){var group=_ref.group;return/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",{colSpan:"2",className:subgroup},group));};export default/*#__PURE__*/React.memo(Group);
+ */var Group=function Group(_ref){var group=_ref.group;return React.createElement("tr",null,React.createElement("td",{colSpan:"2",className:subgroup},React.createElement("span",{dangerouslySetInnerHTML:{__html:group}})));};export default React.memo(Group);

package/product/components/ProductProperties/GroupedProperties.js

@@ -1,5 +1,5 @@
-import React from'react';import PropTypes from'prop-types';import{Accordion}from'@shopgate/pwa-ui-material';import{i18n}from'@shopgate/engage/core';import Lists from"./Lists";import Wrapper from"./Wrapper";import{accordion}from"./style";/**
+import React from'react';import PropTypes from'prop-types';import{Accordion}from'@shopgate/pwa-ui-material';import{i18n}from'@shopgate/engage/core/helpers';import Lists from"./Lists";import ListsHTML from"./ListsHTML";import Wrapper from"./Wrapper";import{accordion}from"./style";/**
  * Renders the properties as groups.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var GroupedProperties=function GroupedProperties(_ref){var properties=_ref.properties,groups=_ref.groups;return groups.map(function(group){return/*#__PURE__*/React.createElement("div",{key:group,className:accordion},/*#__PURE__*/React.createElement(Accordion,{renderLabel:function renderLabel(){return i18n.text("product.displayGroups.".concat(group));},testId:"product-properties-group-".concat(group)},/*#__PURE__*/React.createElement(Wrapper,{dense:true},/*#__PURE__*/React.createElement(Lists,{properties:properties.filter(function(property){return property.displayGroup===group;})}))));});};export default GroupedProperties;
+ */var GroupedProperties=function GroupedProperties(_ref){var groups=_ref.groups;return groups.map(function(group){return React.createElement("div",{key:group.key,className:accordion},React.createElement(Accordion,{renderLabel:function renderLabel(){return group.label||i18n.text("product.displayGroups.".concat(group.key));},testId:"product-properties-group-".concat(!group.label?group.key:"".concat(group.key,"-").concat(group.label))},React.createElement(Wrapper,{dense:true,groupName:group.label||group.key,htmlOnly:group.htmlOnly},group.htmlOnly?React.createElement(ListsHTML,{properties:group.properties}):React.createElement(Lists,{properties:group.properties}))));});};export default GroupedProperties;

package/product/components/ProductProperties/Lists.js

@@ -2,4 +2,4 @@ import React from'react';import PropTypes from'prop-types';import{getSubgroupsFr
  * Renders lists of properties that are eventually grouped.
  * @param {Object} props The component props.
  * @return {JSX}
- */var Lists=function Lists(_ref){var properties=_ref.properties;return/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement(Rows,{properties:getPropertiesWithoutSubgroup(properties)}),getSubgroupsFromProperties(properties).map(function(group){return/*#__PURE__*/React.createElement(React.Fragment,{key:group},/*#__PURE__*/React.createElement(Group,{group:group}),/*#__PURE__*/React.createElement(Rows,{properties:getPropertiesBySubgroup(properties,group)}));}));};export default Lists;
+ */var Lists=function Lists(_ref){var properties=_ref.properties;return React.createElement(React.Fragment,null,React.createElement(Rows,{properties:getPropertiesWithoutSubgroup(properties)}),getSubgroupsFromProperties(properties).map(function(group){return React.createElement(React.Fragment,{key:group},React.createElement(Group,{group:group}),React.createElement(Rows,{properties:getPropertiesBySubgroup(properties,group)}));}));};export default Lists;

package/product/components/ProductProperties/ListsHTML.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,{useCallback}from'react';import PropTypes from'prop-types';import{useNavigation}from'@shopgate/engage/core/hooks';import{HtmlSanitizer}from'@shopgate/engage/components';/**
+ * Renders a single properties row with HTML content.
+ * @param {Object} props The component props.
+ * @return {JSX.Element}
+ */var ListsHTML=function ListsHTML(_ref){var properties=_ref.properties;var _useNavigation=useNavigation(),push=_useNavigation.push;var handleClick=useCallback(function(pathname,target){push(_extends({pathname:pathname},target&&{state:{target:target}}));},[push]);return properties.map(function(_ref2){var label=_ref2.label,value=_ref2.value,type=_ref2.type;return React.createElement("div",{key:label,className:"engage__product__product-property","data-type":type,"data-label":label},React.createElement(HtmlSanitizer,{settings:{handleClick:handleClick,html:value}},value));});};export default React.memo(ListsHTML);

package/product/components/ProductProperties/ProductProperties.js

@@ -1,5 +1,5 @@
-import React from'react';import PropTypes from'prop-types';import{PRODUCT_PROPERTIES}from'@shopgate/pwa-common-commerce/product/constants/Portals';import{SurroundPortals}from"../../../components";import Content from"./Content";import connect from"./connector";/**
+import React from'react';import PropTypes from'prop-types';import{PRODUCT_PROPERTIES}from'@shopgate/engage/product/constants';import{SurroundPortals}from'@shopgate/engage/components';import Content from"./Content";import connect from"./connector";/**
  * Renders the product properties.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
- */var ProductProperties=function ProductProperties(_ref){var properties=_ref.properties;return/*#__PURE__*/React.createElement(SurroundPortals,{portalName:PRODUCT_PROPERTIES,portalProps:{properties:properties}},/*#__PURE__*/React.createElement(Content,{properties:properties}));};ProductProperties.defaultProps={properties:null};export default connect(ProductProperties);
+ */var ProductProperties=function ProductProperties(_ref){var properties=_ref.properties;return React.createElement(SurroundPortals,{portalName:PRODUCT_PROPERTIES,portalProps:{properties:properties}},React.createElement(Content,{properties:properties}));};ProductProperties.defaultProps={properties:null};export default connect(ProductProperties);

package/product/components/ProductProperties/Row.js

@@ -2,4 +2,4 @@ import React from'react';import PropTypes from'prop-types';import{tableCell}from
  * Renders a single properties row.
  * @param {Object} props The component props.
  * @return {JSX.Element}
- */var Row=function Row(_ref){var label=_ref.label,value=_ref.value;return/*#__PURE__*/React.createElement("tr",{key:"".concat(label).concat(value)},/*#__PURE__*/React.createElement("td",{className:tableCell},label),/*#__PURE__*/React.createElement("td",{className:tableCell,"data-test-id":"property: ".concat(value)},value));};export default/*#__PURE__*/React.memo(Row);
+ */var Row=function Row(_ref){var label=_ref.label,value=_ref.value,type=_ref.type;return React.createElement("tr",{className:"engage__product__product-property","data-type":type,"data-label":label,"aria-label":"".concat(typeof label==='string'?label:'',": ").concat(typeof value==='string'?value:''),tabIndex:0},React.createElement("td",{className:tableCell,"aria-hidden":true},React.createElement("span",{dangerouslySetInnerHTML:{__html:label}})),React.createElement("td",{className:tableCell,"data-test-id":"property: ".concat(value),"aria-hidden":true},React.createElement("span",{dangerouslySetInnerHTML:{__html:value}})));};Row.defaultProps={type:null};export default React.memo(Row);

package/product/components/ProductProperties/RowHTML.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,{useCallback}from'react';import PropTypes from'prop-types';import{useNavigation}from'@shopgate/engage/core/hooks';import{HtmlSanitizer}from'@shopgate/engage/components';/**
+ * Renders a single properties row with HTML content.
+ * @param {Object} props The component props.
+ * @return {JSX.Element}
+ */var RowHTML=function RowHTML(_ref){var value=_ref.value,label=_ref.label;var _useNavigation=useNavigation(),push=_useNavigation.push;var handleClick=useCallback(function(pathname,target){push(_extends({pathname:pathname},target&&{state:{target:target}}));},[push]);return React.createElement("tr",{className:"engage__product__product-property","data-type":"html","data-label":label},React.createElement("td",{colSpan:2},React.createElement(HtmlSanitizer,{settings:{handleClick:handleClick,html:value}},value)));};export default React.memo(RowHTML);

package/product/components/ProductProperties/Rows.js

@@ -1,5 +1,5 @@
-import React from'react';import PropTypes from'prop-types';import Row from"./Row";/**
+import React from'react';import PropTypes from'prop-types';import Row from"./Row";import RowHTML from"./RowHTML";/**
  * Renders rows of product properties.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
- */var Rows=function Rows(_ref){var properties=_ref.properties;return properties.map(function(_ref2){var value=_ref2.value,label=_ref2.label;return/*#__PURE__*/React.createElement(Row,{key:"".concat(label,"-").concat(value),label:label,value:value});});};export default/*#__PURE__*/React.memo(Rows);
+ */var Rows=function Rows(_ref){var properties=_ref.properties;return properties.map(function(_ref2){var value=_ref2.value,label=_ref2.label,type=_ref2.type;if(type==='html'){return React.createElement(RowHTML,{key:label,value:value,label:label});}return React.createElement(Row,{key:"".concat(label,"-").concat(value),label:label,value:value,type:type});});};export default React.memo(Rows);

package/product/components/ProductProperties/Wrapper.js

@@ -2,4 +2,4 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
  * Renders the general properties wrapper table.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
- */var Wrapper=function Wrapper(_ref){var _cxs;var children=_ref.children,dense=_ref.dense;return/*#__PURE__*/React.createElement("div",{className:cxs('engage__product__product-properties',(_cxs={},_defineProperty(_cxs,container,!dense),_defineProperty(_cxs,containerDense,dense),_cxs))},/*#__PURE__*/React.createElement("table",null,/*#__PURE__*/React.createElement("thead",null),/*#__PURE__*/React.createElement("tbody",null,children)));};Wrapper.defaultProps={dense:false};export default/*#__PURE__*/React.memo(Wrapper);
+ */var Wrapper=function Wrapper(_ref){var children=_ref.children,dense=_ref.dense,groupName=_ref.groupName,htmlOnly=_ref.htmlOnly;return React.createElement("div",{className:cxs('engage__product__product-property-group',_defineProperty(_defineProperty({},container,!dense),containerDense,dense)),"data-group-name":groupName.toLowerCase()},htmlOnly?children:React.createElement("table",null,React.createElement("thead",null),React.createElement("tbody",null,children)));};Wrapper.defaultProps={dense:false,htmlOnly:false,groupName:''};export default React.memo(Wrapper);

package/product/components/ProductProperties/helpers/getGroupsFromProperties.js

@@ -1,5 +1,10 @@
-/**
+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);}/**
  * Collects all display groups from the properties.
  * @param {Array} [properties=null] The properties to parse.
  * @returns {Array}
- */export function getGroupsFromProperties(){var properties=arguments.length>0&&arguments[0]!==undefined?arguments[0]:null;var groups=[];if(properties===null){return groups;}properties.forEach(function(property){if(property.displayGroup&&!groups.includes(property.displayGroup)){groups.push(property.displayGroup);}});return groups;}
+ */export function getGroupsFromProperties(){var properties=arguments.length>0&&arguments[0]!==undefined?arguments[0]:null;var groups=[];if(properties===null){return groups;}properties.forEach(function(property){if(!property.displayGroup){// Do not proceed when not displayGroup is available
+return;}var key=property.displayGroup;var label=null;if(property.displayGroup==='custom'){key="".concat(property.displayGroup,"-").concat(property.customDisplayGroupName);if(property.customDisplayGroupName){label=property.customDisplayGroupName;}}// Check if the groups array already contains a group with the key
+var existingGroup=groups.find(function(group){return group.key===key;});if(!existingGroup){// Add a new group storage when there isn't one already
+existingGroup={key:key,label:label,properties:[]};groups.push(existingGroup);}// Add current property to the storage
+existingGroup.properties.push(property);});return groups.map(function(group){return _extends({},group,{// Check if the current group just contains html properties to allow special handling
+htmlOnly:group.properties.length?group.properties.every(function(_ref){var type=_ref.type;return type==='html';}):false});});}

package/product/components/ProductProperties/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var _themeConfig$variable=themeConfig.variables;_themeConfig$variable=_themeConfig$variable===void 0?{}:_themeConfig$variable;var gap=_themeConfig$variable.gap,_themeConfig$colors=themeConfig.colors,colors=_themeConfig$colors===void 0?{}:_themeConfig$colors;export var container=css({fontSize:'0.875rem',padding:"0 ".concat(gap.big,"px ").concat(gap.big,"px"),marginBottom:gap.small*1.5});export var containerDense=css(container,{padding:0,marginBottom:0});export var groupsContainer=css({borderBottom:"3px solid ".concat(colors.background),marginBottom:gap.small*1.5});export var label=css({paddingBottom:gap.small*1.5});export var tableCell=css({maxWidth:100,padding:"".concat(gap.xsmall*0.5,"px ").concat(gap.small,"px"),overflowWrap:'break-word',':first-of-type':{paddingLeft:0},':last-of-type':{paddingRight:0}});export var accordion=css({borderTop:"3px solid ".concat(colors.background)});export var subgroup=css({paddingTop:gap.small,fontWeight:600,textTransform:'uppercase',fontSize:'0.75rem'});
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var _themeConfig$variable=themeConfig.variables,_themeConfig$variable2=_themeConfig$variable===void 0?{}:_themeConfig$variable,gap=_themeConfig$variable2.gap,_themeConfig$colors=themeConfig.colors,colors=_themeConfig$colors===void 0?{}:_themeConfig$colors;export var container=css({fontSize:'0.875rem',padding:"0 ".concat(gap.big,"px ").concat(gap.big,"px"),marginBottom:gap.small*1.5});export var containerDense=css(container,{padding:0,marginBottom:0});export var groupsContainer=css({borderBottom:"3px solid ".concat(colors.background),marginBottom:gap.small*1.5});export var label=css({paddingBottom:gap.small*1.5});export var tableCell=css({maxWidth:100,padding:"".concat(gap.xsmall*0.5,"px ").concat(gap.small,"px"),overflowWrap:'break-word',':first-of-type':{paddingLeft:0},':last-of-type':{paddingRight:0}});export var accordion=css({borderTop:"3px solid ".concat(colors.background)});export var subgroup=css({paddingTop:gap.small,fontWeight:600,textTransform:'uppercase',fontSize:'0.75rem'});

package/product/components/ProductSlider/index.js

@@ -1,4 +1,5 @@
-import React from'react';import PropTypes from'prop-types';import{useWidgetSettings}from'@shopgate/engage/core';import{Swiper}from'@shopgate/engage/components';import{ProductListTypeProvider,ProductListEntryProvider}from'@shopgate/engage/product';import{Theme}from'@shopgate/pwa-common/context';import{container,items}from"./style";export var WIDGET_ID='@shopgate/engage/product/ProductSlider';/**
+var _excluded=["autoplay","className","delay","productIds","snap","scope","meta","productItemProps","item"];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);}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React from'react';import PropTypes from'prop-types';import{useWidgetSettings}from'@shopgate/engage/core';import{useThemeComponents}from'@shopgate/engage/core/hooks';import{Swiper}from'@shopgate/engage/components';import{ProductListTypeProvider,ProductListEntryProvider}from'@shopgate/engage/product/providers';import{container,items}from"./style";export var WIDGET_ID='@shopgate/engage/product/ProductSlider';/**
  * @param {Object} props The component props.
- * @returns {JSX}
- */function ProductSlider(props){var autoplay=props.autoplay,className=props.className,delay=props.delay,productIds=props.productIds,snap=props.snap,scope=props.scope;var widgetSettings=useWidgetSettings(WIDGET_ID)||{};var _ref=props.slidesPerView?props:widgetSettings,_ref$slidesPerView=_ref.slidesPerView,slidesPerView=_ref$slidesPerView===void 0?2.3:_ref$slidesPerView;return/*#__PURE__*/React.createElement(Theme,null,function(_ref2){var ProductCard=_ref2.ProductCard;var Item=props.item||ProductCard;return/*#__PURE__*/React.createElement(ProductListTypeProvider,{type:"productSlider",subType:scope},/*#__PURE__*/React.createElement(Swiper,{autoPlay:autoplay,className:"".concat(className," engage__product__product-slider"),controls:false,indicators:false,interval:delay,loop:false,freeMode:!snap,slidesPerView:slidesPerView},productIds.map(function(id){return/*#__PURE__*/React.createElement(Swiper.Item,{key:id,className:container},/*#__PURE__*/React.createElement(ProductListEntryProvider,{productId:id},/*#__PURE__*/React.createElement(Item,{productId:id,style:items})));})));});}ProductSlider.defaultProps={autoplay:false,className:null,delay:10,item:null,slidesPerView:null,snap:false,scope:null};export default ProductSlider;
+ * @returns {JSX.Element}
+ */function ProductSlider(props){var autoplay=props.autoplay,className=props.className,delay=props.delay,productIds=props.productIds,snap=props.snap,scope=props.scope,meta=props.meta,productItemProps=props.productItemProps,item=props.item,swiperProps=_objectWithoutProperties(props,_excluded);var widgetSettings=useWidgetSettings(WIDGET_ID)||{};var _ref=props.slidesPerView?props:widgetSettings,_ref$slidesPerView=_ref.slidesPerView,slidesPerView=_ref$slidesPerView===void 0?2.3:_ref$slidesPerView;// ProductSlider items are rendered with the ProductCard component provided by the theme.
+var _useThemeComponents=useThemeComponents(),ProductCard=_useThemeComponents.ProductCard;var Item=item||ProductCard;return React.createElement(ProductListTypeProvider,{type:"productSlider",subType:scope,meta:meta},React.createElement(Swiper,_extends({},autoplay&&{autoplay:{delay:delay}},{className:"".concat(className," engage__product__product-slider"),controls:false,indicators:false,freeMode:!snap},swiperProps,{slidesPerView:slidesPerView}),productIds.map(function(id){return React.createElement(Swiper.Item,{key:id,className:container},React.createElement(ProductListEntryProvider,{productId:id},React.createElement(Item,_extends({productId:id,style:items},productItemProps))));})));}ProductSlider.WIDGET_ID=WIDGET_ID;ProductSlider.defaultProps={autoplay:false,className:null,delay:10,item:null,meta:null,productItemProps:null,scope:null,slidesPerView:null,snap:false};export default ProductSlider;

package/product/components/ProductSlider/spec.js

@@ -1 +1 @@
-/* eslint-disable require-jsdoc */import React from'react';import{shallow}from'enzyme';import ProductSlider from"./index";jest.mock('@shopgate/engage/core',function(){return{useWidgetSettings:jest.fn()};});jest.mock('@shopgate/engage/components',function(){var Swiper=function Swiper(_ref){var children=_ref.children;return children;};Swiper.Item=function(_ref2){var children=_ref2.children;return children;};Swiper.Item.displayName='Swiper.Item';return{Swiper:Swiper};});jest.mock('@shopgate/engage/product',function(){return{ProductListTypeProvider:function ProductListTypeProvider(_ref3){var children=_ref3.children;return children;}};});jest.mock('@shopgate/pwa-common/context',function(){var ProductCard=function ProductCard(props){return/*#__PURE__*/React.createElement(ProductCard,props);};return{Theme:function Theme(_ref4){var children=_ref4.children;return children({ProductCard:ProductCard});}};});describe('<ProductSlider />',function(){it('should match snapshot',function(){var wrapper=shallow(/*#__PURE__*/React.createElement(ProductSlider,{productIds:['prod1']})).dive();expect(wrapper).toMatchSnapshot();});});/* eslint-enable require-jsdoc */
+/* eslint-disable require-jsdoc */import React from'react';import{shallow}from'enzyme';import ProductSlider from"./index";jest.mock('@shopgate/engage/core',function(){return{useWidgetSettings:jest.fn()};});jest.mock('@shopgate/engage/components',function(){var Swiper=function Swiper(_ref){var children=_ref.children;return children;};Swiper.Item=function(_ref2){var children=_ref2.children;return children;};Swiper.Item.displayName='Swiper.Item';return{Swiper:Swiper};});jest.mock('@shopgate/engage/core/hooks',function(){var ProductCard=function ProductCard(props){return React.createElement(ProductCard,props);};return{useThemeComponents:function useThemeComponents(){return{ProductCard:ProductCard};}};});describe('<ProductSlider />',function(){it('should match snapshot',function(){var wrapper=shallow(React.createElement(ProductSlider,{productIds:['prod1']}));expect(wrapper).toMatchSnapshot();});});/* eslint-enable require-jsdoc */

package/product/components/ProductVariants/VariantAvailability.connector.js

@@ -0,0 +1,5 @@
+import{connect}from'react-redux';import{getVariantAvailabilityByCharacteristics}from'@shopgate/pwa-common-commerce/product';/**
+ * @param {Object} state The application state.
+ * @param {Object} props The component props.
+ * @return {Object}
+ */var mapStateToProps=function mapStateToProps(state,props){return{availability:getVariantAvailabilityByCharacteristics(state,props)};};export default connect(mapStateToProps);

package/product/components/ProductVariants/VariantAvailability.js

@@ -0,0 +1,5 @@
+import React,{memo}from'react';import PropTypes from'prop-types';import{Availability,SurroundPortals}from'@shopgate/engage/components';import{PRODUCT_VARIANT_SELECT_PICKER_AVAILABILITY}from'@shopgate/pwa-common-commerce/product';import connect from"./VariantAvailability.connector";import styles from"./VariantAvailability.style";/**
+ * The VariantAvailability component.
+ * @param {Object} availability availability
+ * @returns {JSX}
+ */var VariantAvailability=function VariantAvailability(_ref){var availability=_ref.availability;if(!availability){return null;}var state=availability.state,text=availability.text;return React.createElement(SurroundPortals,{portalName:PRODUCT_VARIANT_SELECT_PICKER_AVAILABILITY,portalProps:availability},React.createElement(Availability,{className:styles,state:state,text:text}));};VariantAvailability.defaultProps={availability:null};export default connect(memo(VariantAvailability));

package/product/components/ProductVariants/index.js

@@ -0,0 +1 @@
+export{default as VariantAvailability}from"./VariantAvailability";

package/product/components/QuantityPicker/hooks.js

@@ -0,0 +1,5 @@
+import{useWidgetSettings}from"../../../core";/**
+ * @param {Object} [productStock={}] product.stock object
+ * @returns {Object}
+ */export var useQuantityRange=function useQuantityRange(){var _ref,_ref2;var productStock=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var settings=useWidgetSettings('@shopgate/engage/product/QuantityPicker');if(!productStock){return null;}var min=(_ref=settings===null||settings===void 0?void 0:settings.minOrderQuantity)!==null&&_ref!==void 0?_ref:1;if(productStock.minOrderQuantity>0){min=productStock.minOrderQuantity;}var max=(_ref2=settings===null||settings===void 0?void 0:settings.maxOrderQuantity)!==null&&_ref2!==void 0?_ref2:50;if(productStock.maxOrderQuantity>0){max=Math.min(Math.max(min,max),productStock.maxOrderQuantity);}// Normalize min if max is finally less then min
+min=Math.min(min,max);return{min:min,max:max};};

package/product/components/QuantityPicker/index.js

@@ -1,7 +1,8 @@
-function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen);}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++){arr2[i]=arr[i];}return arr2;}function _iterableToArrayLimit(arr,i){var _i=arr==null?null:typeof Symbol!=="undefined"&&arr[Symbol.iterator]||arr["@@iterator"];if(_i==null)return;var _arr=[];var _n=true;var _d=false;var _s,_e;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useState,useEffect}from'react';import PropTypes from'prop-types';import{css}from'glamor';import{useWidgetStyles}from"../../../core";import{I18n,SheetDrawer,SheetList}from"../../../components";import{getQuantityRange}from"./helpers";/**
+function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useState,useEffect}from'react';import PropTypes from'prop-types';import{css}from'glamor';import{logger}from"../../../core/helpers";import{useWidgetStyles}from"../../../core/hooks";import{I18n,SheetDrawer,SheetList}from"../../../components";import{useQuantityRange}from"./hooks";var deprecationWarning='QuantityPicker is deprecated in favor of the UnitQuantityPicker component.\nUnitQuantityPicker now additionally supports units and floating point values.';/** */function triggerDeprecation(){if(deprecationWarning){logger.warn(deprecationWarning);deprecationWarning=null;}}/**
  * The QuantityPicker component.
+ * @deprecated Use UnitQuantityPicker to also support different units for quantity.
  * @returns {JSX}
- */var QuantityPicker=function QuantityPicker(_ref){var conditioner=_ref.conditioner,setQuantity=_ref.setQuantity,stock=_ref.stock;if(!stock){return null;}var _useState=useState(false),_useState2=_slicedToArray(_useState,2),opened=_useState2[0],setOpened=_useState2[1];var _useState3=useState(null),_useState4=_slicedToArray(_useState3,2),resolveValue=_useState4[0],setResolveValue=_useState4[1];var _useState5=useState(null),_useState6=_slicedToArray(_useState5,2),promiseResolve=_useState6[0],setPromiseResolve=_useState6[1];/**
+ */var QuantityPicker=function QuantityPicker(_ref){var conditioner=_ref.conditioner,setQuantity=_ref.setQuantity,stock=_ref.stock;triggerDeprecation();var _useState=useState(false),_useState2=_slicedToArray(_useState,2),opened=_useState2[0],setOpened=_useState2[1];var _useState3=useState(null),_useState4=_slicedToArray(_useState3,2),resolveValue=_useState4[0],setResolveValue=_useState4[1];var _useState5=useState(null),_useState6=_slicedToArray(_useState5,2),promiseResolve=_useState6[0],setPromiseResolve=_useState6[1];/**
    * Handle select quantity
    * @param {number} quantity quantity
    */var handleSelectQuantity=function handleSelectQuantity(quantity){setQuantity(quantity);setResolveValue(true);setOpened(false);};/**
@@ -15,4 +16,4 @@ setPromiseResolve(function(){return resolve;});// Open sheet
 setOpened(true);});};// Mount effect
 useEffect(function(){// Add most late conditioner
 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/*#__PURE__*/React.createElement(SheetDrawer,{title:/*#__PURE__*/React.createElement(I18n.Text,{string:"product.quantity"}),isOpen:opened,onClose:handleCloseSheet,contentClassName:css(styles.sheet).toString()},/*#__PURE__*/React.createElement(SheetList,null,items.map(function(item){return/*#__PURE__*/React.createElement(SheetList.Item,{title:item,key:item,onClick:function onClick(){return handleSelectQuantity(parseInt(item,10));}});})));};QuantityPicker.defaultProps={stock:null};export default QuantityPicker;
+useEffect(function(){if(resolveValue===null){return;}if(promiseResolve){promiseResolve(resolveValue);}setResolveValue(null);},[promiseResolve,resolveValue]);var styles=useWidgetStyles('@shopgate/engage/product/QuantityPicker');var quantityRange=useQuantityRange(stock);if(!stock){return null;}var min=quantityRange.min,max=quantityRange.max;var items=Array(max-min+1).fill(min).map(function(v,index){return String(v+index);});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;