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

package/product/components/MediaSlider/components/MediaVideo/index.js

@@ -1,4 +1,4 @@
 import React from'react';import PropTypes from'prop-types';import{IntersectionVisibility,VideoPlayer}from"../../../../../components";import{useWidgetSettings}from"../../../../../core";import connect from"./connector";import{videoWrapper,videoResponsive,video}from"../../style";/**
  * The media video component.
  * @returns {JSX}
- */var MediaVideo=function MediaVideo(_ref){var connectivityType=_ref.connectivityType,media=_ref.media;var settings=useWidgetSettings('@shopgate/engage/product/MediaSlider');var autoPlay=settings.videos.autoPlay[connectivityType]||false;return/*#__PURE__*/React.createElement(IntersectionVisibility,null,function(_ref2){var visible=_ref2.visible,ratio=_ref2.ratio,setRef=_ref2.setRef;return/*#__PURE__*/React.createElement("div",{ref:setRef,className:videoWrapper},/*#__PURE__*/React.createElement("div",{className:videoResponsive},/*#__PURE__*/React.createElement(VideoPlayer,{url:media.url,playing:autoPlay&&visible&&ratio>0.8,width:"100%",height:"100%",controls:settings.videos.controls,muted:settings.videos.muted,loop:settings.videos.loop,className:video})));});};export default connect(MediaVideo);
+ */var MediaVideo=function MediaVideo(_ref){var connectivityType=_ref.connectivityType,media=_ref.media;var settings=useWidgetSettings('@shopgate/engage/product/MediaSlider');var autoPlay=settings.videos.autoPlay[connectivityType]||false;return React.createElement(IntersectionVisibility,null,function(_ref2){var visible=_ref2.visible,ratio=_ref2.ratio,setRef=_ref2.setRef;return React.createElement("div",{ref:setRef,className:videoWrapper},React.createElement("div",{className:videoResponsive},React.createElement(VideoPlayer,{url:media.url,playing:autoPlay&&visible&&ratio>0.8,width:"100%",height:"100%",controls:settings.videos.controls,muted:settings.videos.muted,loop:settings.videos.loop,className:video})));});};export default connect(MediaVideo);

package/product/components/MediaSlider/index.js

@@ -1,6 +1,6 @@
-var _typeRenders;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{SurroundPortals,Swiper}from'@shopgate/engage/components';import{PRODUCT_MEDIA}from'@shopgate/pwa-common-commerce/product';import{MEDIA_TYPE_IMAGE,MEDIA_TYPE_VIDEO}from"../../constants";import MediaImage from"./components/MediaImage";import MediaVideo from"./components/MediaVideo";import connect from"./connector";import{container}from"./style";var typeRenders=(_typeRenders={},_defineProperty(_typeRenders,MEDIA_TYPE_IMAGE,MediaImage),_defineProperty(_typeRenders,MEDIA_TYPE_VIDEO,MediaVideo),_typeRenders);/**
+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{SurroundPortals,Swiper}from'@shopgate/engage/components';import{PRODUCT_MEDIA}from'@shopgate/pwa-common-commerce/product';import{MEDIA_TYPE_IMAGE,MEDIA_TYPE_VIDEO}from"../../constants";import MediaImage from"./components/MediaImage";import MediaVideo from"./components/MediaVideo";import connect from"./connector";import{container}from"./style";var typeRenders=_defineProperty(_defineProperty({},MEDIA_TYPE_IMAGE,MediaImage),MEDIA_TYPE_VIDEO,MediaVideo);/**
  * The product media slider component.
- * @returns {JSX}
- */var MediaSlider=function MediaSlider(_ref){var navigate=_ref.navigate,featuredMedia=_ref.featuredMedia,media=_ref.media,ariaHidden=_ref['aria-hidden'],renderPlaceholder=_ref.renderPlaceholder,className=_ref.className;var currentSlide=0;/**
+ * @returns {JSX.Element}
+ */var MediaSlider=function MediaSlider(_ref){var navigate=_ref.navigate,featuredMedia=_ref.featuredMedia,media=_ref.media,ariaHidden=_ref['aria-hidden'],renderPlaceholder=_ref.renderPlaceholder,className=_ref.className,paginationType=_ref.paginationType;var currentSlide=0;/**
    * @param {number} slide slide
-   */var setCurrentSlide=function setCurrentSlide(slide){currentSlide=slide;};/** Handle click */var handleSlideClick=function handleSlideClick(){if(!media.length){return;}navigate(currentSlide);};if(!Array.isArray(media)||media.length===0){return renderPlaceholder(featuredMedia);}return/*#__PURE__*/React.createElement("div",{className:container},/*#__PURE__*/React.createElement(SurroundPortals,{portalName:PRODUCT_MEDIA},media&&/*#__PURE__*/React.createElement(Swiper,{loop:media.length>1,indicators:true,onSlideChange:setCurrentSlide,disabled:media.length===1,controls:media.some(function(m){return m.type===MEDIA_TYPE_VIDEO;}),className:className,"aria-hidden":ariaHidden},media.map(function(singleMedia){var Type=typeRenders[singleMedia.type];return/*#__PURE__*/React.createElement(Swiper.Item,{key:Object.values(singleMedia).join('_')},/*#__PURE__*/React.createElement(Type,{media:singleMedia,onClick:handleSlideClick}));}))));};MediaSlider.defaultProps={'aria-hidden':null,className:null,featuredMedia:null,media:null,renderPlaceholder:function renderPlaceholder(featuredMedia){return/*#__PURE__*/React.createElement(MediaImage,featuredMedia);}};export default connect(MediaSlider);
+   */var setCurrentSlide=function setCurrentSlide(slide){currentSlide=slide;};/** Handle click */var handleSlideClick=function handleSlideClick(){if(!media.length){return;}navigate(currentSlide);};if(!Array.isArray(media)||media.length===0){return renderPlaceholder(featuredMedia);}return React.createElement("div",{className:container},React.createElement(SurroundPortals,{portalName:PRODUCT_MEDIA},media&&React.createElement(Swiper,{paginationType:paginationType,loop:media.length>1,indicators:true,onSlideChange:setCurrentSlide,disabled:media.length===1,controls:media.some(function(m){return m.type===MEDIA_TYPE_VIDEO;}),className:className,"aria-hidden":ariaHidden},media.map(function(singleMedia){var Type=typeRenders[singleMedia.type];return React.createElement(Swiper.Item,{key:Object.values(singleMedia).join('_')},React.createElement(Type,{media:singleMedia,onClick:handleSlideClick}));}))));};MediaSlider.defaultProps={'aria-hidden':null,className:null,featuredMedia:null,paginationType:null,media:null,renderPlaceholder:function renderPlaceholder(featuredMedia){return React.createElement(MediaImage,featuredMedia);}};export default connect(MediaSlider);

package/product/components/Options/components/Content/index.js

@@ -1,16 +1,16 @@
-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 _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,{PureComponent}from'react';import PropTypes from'prop-types';import Option from"../Option";import TextOption from"../TextOption";import{ProductContext}from"../../../context";import connect from"./connector";/**
+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 _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,{PureComponent}from'react';import PropTypes from'prop-types';import{ProductContext}from'@shopgate/engage/product/contexts';import Option from"../Option";import TextOption from"../TextOption";import connect from"./connector";/**
  * The Product Options component.
- */var Options=/*#__PURE__*/function(_PureComponent){_inherits(Options,_PureComponent);var _super=_createSuper(Options);function Options(){var _this;_classCallCheck(this,Options);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_super.call.apply(_super,[this].concat(args));_defineProperty(_assertThisInitialized(_this),"handleStoreSelection",function(props){props.options.forEach(function(option){// Only options of type 'select' have a default value. Type 'text' has no default.
-if(option.type!=='select'){return;}_this.context.setOption(option.id,option.items[0].value,option.items[0].price);});});return _this;}_createClass(Options,[{key:"componentDidMount",value:/**
+ */var Options=/*#__PURE__*/function(_PureComponent){function Options(){var _this2;_classCallCheck(this,Options);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,Options,[].concat(args));/**
+   * @param {Object} props The component props.
+   */_defineProperty(_this2,"handleStoreSelection",function(props){props.options.forEach(function(option){// Only options of type 'select' have a default value. Type 'text' has no default.
+if(option.type!=='select'){return;}_this2.context.setOption(option.id,option.items[0].value,option.items[0].price);});});return _this2;}_inherits(Options,_PureComponent);return _createClass(Options,[{key:"componentDidMount",value:/**
    * Triggers storeSelections when the component is mounted and has options set.
    */function componentDidMount(){if(!this.context||!this.context.setOption||!this.props.options){return;}this.handleStoreSelection(this.props);}/**
    * When the component receives the product options
    * it will set the first value of each option as active
    * @param {Object} nextProps The incoming props.
-   */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(!this.props.options&&nextProps.options){this.handleStoreSelection(nextProps);}}/**
-   * @param {Object} props The component props.
-   */},{key:"render",value:/**
+   */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(!this.props.options&&nextProps.options){this.handleStoreSelection(nextProps);}}},{key:"render",value:/**
    * Renders the component
    * @returns {JSX}
-   */function render(){var _this$props=this.props,options=_this$props.options,currentOptions=_this$props.currentOptions;if(!options){return null;}return/*#__PURE__*/React.createElement(ProductContext.Consumer,null,function(_ref){var setOption=_ref.setOption;return/*#__PURE__*/React.createElement("div",{"data-test-id":"optionsPicker",className:"engage__product__options"},options.map(function(option){switch(option.type){case'text':return/*#__PURE__*/React.createElement(TextOption,{key:option.id,id:option.id,label:option.label,value:currentOptions[option.id],info:option.info,onChange:setOption,required:option.required,price:option.price});case'select':return/*#__PURE__*/React.createElement(Option,{key:option.id,label:option.label,id:option.id,items:option.items,value:currentOptions[option.id],onChange:setOption});default:// unknown type
-return null;}}));});}}]);return Options;}(PureComponent);_defineProperty(Options,"contextType",ProductContext);_defineProperty(Options,"defaultProps",{currentOptions:{},options:null});export default connect(Options);
+   */function render(){var _this$props=this.props,options=_this$props.options,currentOptions=_this$props.currentOptions;if(!options){return null;}return React.createElement(ProductContext.Consumer,null,function(_ref){var setOption=_ref.setOption;return React.createElement("div",{"data-test-id":"optionsPicker",className:"engage__product__options"},options.map(function(option){switch(option.type){case'text':return React.createElement(TextOption,{key:option.id,id:option.id,label:option.label,value:currentOptions[option.id],info:option.info,onChange:setOption,required:option.required,price:option.price});case'select':return React.createElement(Option,{key:option.id,label:option.label,id:option.id,items:option.items,value:currentOptions[option.id],onChange:setOption});default:// unknown type
+return null;}}));});}}]);}(PureComponent);_defineProperty(Options,"contextType",ProductContext);_defineProperty(Options,"defaultProps",{currentOptions:{},options:null});export default connect(Options);

package/product/components/Options/components/Content/spec.js

@@ -1,2 +1,2 @@
-import React from'react';import{mount,shallow}from'enzyme';import{PickerUtilize as Picker}from'@shopgate/engage/components';import Options from"./index";jest.mock("../../../context",function(){return{ProductContext:{Consumer:jest.fn(function(_ref){var children=_ref.children;return children({setOption:jest.fn(),currency:'EUR'});})}};});jest.mock('@shopgate/engage/components/View');// Mock the redux connect() method instead of providing a fake store.
-jest.mock("./connector",function(){return function(obj){var newObj=obj;var mockOptions=[{id:'test-id',type:'select',label:'label',items:[{currency:'USD',price:10,priceDifference:0},{currency:'USD',price:10,priceDifference:0}]}];newObj.defaultProps={options:mockOptions,currentOptions:{}};return newObj;};});describe('<Options />',function(){var mockOptions=[{id:'test-id',type:'select',label:'label',items:[{currency:'USD',price:10,priceDifference:0},{currency:'USD',price:10,priceDifference:0}]}];describe('Given the component was mounted to the DOM',function(){it('should match snapshot',function(){var wrapper=shallow(/*#__PURE__*/React.createElement(Options,{currentOptions:{}})).dive();expect(wrapper).toMatchSnapshot();});it('should render correct number of options',function(){var wrapper=mount(/*#__PURE__*/React.createElement(Options,{options:mockOptions}));var picker=wrapper.find(Picker);expect(picker.length).toBe(mockOptions.length);});});});
+import React from'react';import{mount,shallow}from'enzyme';import{PickerUtilize as Picker}from'@shopgate/engage/components';import Options from"./index";jest.mock('@shopgate/engage/components');jest.mock('@shopgate/engage/product/contexts',function(){return{ProductContext:{Consumer:jest.fn(function(_ref){var children=_ref.children;return children({setOption:jest.fn(),currency:'EUR'});})}};});// Mock the redux connect() method instead of providing a fake store.
+jest.mock("./connector",function(){return function(obj){var newObj=obj;var mockOptions=[{id:'test-id',type:'select',label:'label',items:[{currency:'USD',price:10,priceDifference:0},{currency:'USD',price:10,priceDifference:0}]}];newObj.defaultProps={options:mockOptions,currentOptions:{}};return newObj;};});describe('<Options />',function(){var mockOptions=[{id:'test-id',type:'select',label:'label',items:[{currency:'USD',price:10,priceDifference:0},{currency:'USD',price:10,priceDifference:0}]}];describe('Given the component was mounted to the DOM',function(){it('should match snapshot',function(){var wrapper=shallow(React.createElement(Options,{currentOptions:{}})).dive();expect(wrapper).toMatchSnapshot();});it('should render correct number of options',function(){var wrapper=mount(React.createElement(Options,{options:mockOptions}));var picker=wrapper.find(Picker);expect(picker.length).toBe(mockOptions.length);});});});

package/product/components/Options/components/Option/index.js

@@ -1,4 +1,4 @@
-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{I18n,PickerUtilize as Picker}from'@shopgate/engage/components';import{PriceDifference}from'@shopgate/engage/product';import{ProductContext}from"../../../context";/**
+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{I18n,PickerUtilize as Picker}from'@shopgate/engage/components';import{PriceDifference}from'@shopgate/engage/product/components';import{ProductContext}from'@shopgate/engage/product/contexts';/**
  * @param {Object} props The component props.
  * @returns {JSX}
- */var Option=function Option(_ref){var id=_ref.id,label=_ref.label,items=_ref.items,value=_ref.value,_onChange=_ref.onChange;return/*#__PURE__*/React.createElement(ProductContext.Consumer,null,function(_ref2){var currency=_ref2.currency;return/*#__PURE__*/React.createElement("div",{key:id,"data-test-id":label},/*#__PURE__*/React.createElement(Picker,{label:label,items:items.map(function(item){return _extends({},item,{rightComponent:/*#__PURE__*/React.createElement(PriceDifference,{currency:currency,difference:item.priceDifference})});}),placeholder:/*#__PURE__*/React.createElement(I18n.Text,{string:"product.pick_an_attribute",params:[label]}),value:value,onChange:function onChange(val){return _onChange(id,val,items.find(function(item){return item.value===val;}).price);}}));});};Option.defaultProps={value:null};export default Option;
+ */var Option=function Option(_ref){var id=_ref.id,label=_ref.label,items=_ref.items,value=_ref.value,_onChange=_ref.onChange;return React.createElement(ProductContext.Consumer,null,function(_ref2){var currency=_ref2.currency;return React.createElement("div",{key:id,"data-test-id":label},React.createElement(Picker,{label:label,items:items.map(function(item){return _extends({},item,{rightComponent:React.createElement(PriceDifference,{currency:currency,difference:item.priceDifference})});}),placeholder:React.createElement(I18n.Text,{string:"product.pick_an_attribute",params:[label]}),value:value,onChange:function onChange(val){return _onChange(id,val,items.find(function(item){return item.value===val;}).price);}}));});};Option.defaultProps={value:null};export default Option;

package/product/components/Options/components/TextOption/components/OptionInfo/index.js

@@ -1,9 +1,9 @@
-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 Grid from'@shopgate/pwa-common/components/Grid';import I18n from'@shopgate/pwa-common/components/I18n';import{ProductContext}from"../../../../../context";import styles from"./style";/**
+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{Grid,I18n}from'@shopgate/engage/components';import{ProductContext}from'@shopgate/engage/product/contexts';import styles from"./style";/**
  * The text option info component
  * @param {Object} props The component props
  * @param {Object} context The component context
  * @return {JSX}
- */var OptionInfo=function OptionInfo(_ref,context){var required=_ref.required,label=_ref.label,price=_ref.price,currency=_ref.currency,info=_ref.info,optionInfoId=_ref.optionInfoId;if(!required&&!price){return null;}var _context$i18n=context.i18n(),__=_context$i18n.__,_p=_context$i18n._p;var ariaPrice='';var ariaRequired='';if(price){ariaPrice=__('price.label',{price:_p(price,currency,2).replace('-',"\u2212")});}if(required){ariaRequired=__('common.required');}return/*#__PURE__*/React.createElement(Grid,{className:styles.info},required&&/*#__PURE__*/React.createElement(Grid.Item,{className:styles.required,"aria-hidden":true},/*#__PURE__*/React.createElement(I18n.Text,{string:"common.required"})),!!price&&/*#__PURE__*/React.createElement(Grid.Item,{grow:1,className:styles.price,"aria-hidden":true},"".concat(label,": "),/*#__PURE__*/React.createElement(I18n.Price,{currency:currency,price:price})),/*#__PURE__*/React.createElement("div",{hidden:true,id:optionInfoId},ariaRequired,ariaPrice,info));};OptionInfo.contextTypes={i18n:PropTypes.func};/**
+ */var OptionInfo=function OptionInfo(_ref,context){var required=_ref.required,label=_ref.label,price=_ref.price,currency=_ref.currency,info=_ref.info,optionInfoId=_ref.optionInfoId;if(!required&&!price){return null;}var _context$i18n=context.i18n(),__=_context$i18n.__,_p=_context$i18n._p;var ariaPrice='';var ariaRequired='';if(price){ariaPrice=__('price.label',{price:_p(price,currency,2).replace('-',"\u2212")});}if(required){ariaRequired=__('common.required');}return React.createElement(Grid,{className:styles.info},required&&React.createElement(Grid.Item,{className:styles.required,"aria-hidden":true},React.createElement(I18n.Text,{string:"common.required"})),!!price&&React.createElement(Grid.Item,{grow:1,className:styles.price,"aria-hidden":true},"".concat(label,": "),React.createElement(I18n.Price,{currency:currency,price:price})),React.createElement("div",{hidden:true,id:optionInfoId},ariaRequired,ariaPrice,info));};OptionInfo.contextTypes={i18n:PropTypes.func};/**
  * @param {Object} props The component props.
  * @returns {JSX}
- */var OptionInfoWithProductContext=function OptionInfoWithProductContext(props){return/*#__PURE__*/React.createElement(ProductContext.Consumer,null,function(_ref2){var currency=_ref2.currency;return/*#__PURE__*/React.createElement(OptionInfo,_extends({currency:currency},props));});};export default/*#__PURE__*/memo(OptionInfoWithProductContext);export{OptionInfo};
+ */var OptionInfoWithProductContext=function OptionInfoWithProductContext(props){return React.createElement(ProductContext.Consumer,null,function(_ref2){var currency=_ref2.currency;return React.createElement(OptionInfo,_extends({currency:currency},props));});};export default memo(OptionInfoWithProductContext);export{OptionInfo};

package/product/components/Options/components/TextOption/components/OptionInfo/spec.js

@@ -1 +1 @@
-import React from'react';import{shallow}from'enzyme';import mockRenderOptions from'@shopgate/pwa-common/helpers/mocks/mockRenderOptions';import{OptionInfo}from"./index";var optionInfoText='Some Text';var optionInfoId='some-id';describe('<OptionInfo />',function(){it('should not render when not required and no price',function(){var wrapper=shallow(/*#__PURE__*/React.createElement(OptionInfo,{required:false,label:"",price:0,currency:"EUR",info:optionInfoText,optionInfoId:optionInfoId}),mockRenderOptions);expect(wrapper).toBeEmptyRender();});it('should render required element',function(){var wrapper=shallow(/*#__PURE__*/React.createElement(OptionInfo,{required:true,label:"",price:0,currency:"EUR",info:optionInfoText,optionInfoId:optionInfoId}),mockRenderOptions).dive();expect(wrapper).toMatchSnapshot();});it('should render price element',function(){var wrapper=shallow(/*#__PURE__*/React.createElement(OptionInfo,{required:false,label:"Label",price:10,currency:"EUR",info:optionInfoText,optionInfoId:optionInfoId}),mockRenderOptions).dive();expect(wrapper).toMatchSnapshot();});});
+import React from'react';import{shallow}from'enzyme';import mockRenderOptions from'@shopgate/pwa-common/helpers/mocks/mockRenderOptions';import{OptionInfo}from"./index";var optionInfoText='Some Text';var optionInfoId='some-id';jest.mock('@shopgate/engage/components',function(){var _jest$requireActual=jest.requireActual('@shopgate/pwa-common/components/Grid'),Grid=_jest$requireActual["default"];var _jest$requireActual2=jest.requireActual('@shopgate/pwa-common/components/I18n'),I18n=_jest$requireActual2["default"];return{Grid:Grid,I18n:I18n};});jest.mock('@shopgate/engage/product/contexts',function(){return{ProductContext:{Consumer:function Consumer(_ref){var children=_ref.children;return children({currency:'EUR'});}}};});describe('<OptionInfo />',function(){it('should not render when not required and no price',function(){var wrapper=shallow(React.createElement(OptionInfo,{required:false,label:"",price:0,currency:"EUR",info:optionInfoText,optionInfoId:optionInfoId}),mockRenderOptions);expect(wrapper).toBeEmptyRender();});it('should render required element',function(){var wrapper=shallow(React.createElement(OptionInfo,{required:true,label:"",price:0,currency:"EUR",info:optionInfoText,optionInfoId:optionInfoId}),mockRenderOptions).dive();expect(wrapper).toMatchSnapshot();});it('should render price element',function(){var wrapper=shallow(React.createElement(OptionInfo,{required:false,label:"Label",price:10,currency:"EUR",info:optionInfoText,optionInfoId:optionInfoId}),mockRenderOptions).dive();expect(wrapper).toMatchSnapshot();});});

package/product/components/Options/components/TextOption/components/OptionInfo/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables;var info=css({marginTop:variables.gap.xsmall,padding:"0 ".concat(variables.gap.big,"px")}).toString();var required=css({color:colors.shade9,fontSize:'0.825rem'}).toString();var price=css({textAlign:'right',fontSize:'0.825rem'}).toString();export default{info:info,required:required,price:price};
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables;var info=css({marginTop:variables.gap.xsmall,padding:"0 ".concat(variables.gap.big,"px")}).toString();var required=css({color:"var(--color-text-medium-emphasis, ".concat(colors.shade9,")"),fontSize:'0.825rem'}).toString();var price=css({textAlign:'right',fontSize:'0.825rem'}).toString();export default{info:info,required:required,price:price};

package/product/components/Options/components/TextOption/index.js

@@ -1,10 +1,22 @@
-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 _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,{Fragment,PureComponent}from'react';import PropTypes from'prop-types';import Transition from'react-transition-group/Transition';import debounce from'lodash/debounce';import TextField from'@shopgate/pwa-ui-shared/Form/TextField';import InfoIcon from'@shopgate/pwa-ui-shared/icons/InfoIcon';import withShowModal from'@shopgate/pwa-common/helpers/modal/withShowModal';import{broadcastLiveMessage}from'@shopgate/engage/a11y';import transition from"../../../Characteristics/transition";import{ProductContext}from"../../../context";import OptionInformation from"./components/OptionInfo";import styles from"./style";/**
+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 _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 _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,{Fragment,PureComponent}from'react';import PropTypes from'prop-types';import Transition from'react-transition-group/Transition';import debounce from'lodash/debounce';import{TextField,InfoIcon}from'@shopgate/engage/components';import{withShowModal}from'@shopgate/engage/core/hocs';import{broadcastLiveMessage}from'@shopgate/engage/a11y';import{ProductContext}from'@shopgate/engage/product/contexts';import transition from'@shopgate/engage/product/components/Characteristics/transition';import OptionInformation from"./components/OptionInfo";import styles from"./style";/**
  * The TextOption component
- */var TextOption=/*#__PURE__*/function(_PureComponent){_inherits(TextOption,_PureComponent);var _super=_createSuper(TextOption);/**
-   * @param {Object} props The component props.
-   */function TextOption(props){var _this;_classCallCheck(this,TextOption);_this=_super.call(this,props);_defineProperty(_assertThisInitialized(_this),"setRef",function(ref){_this.ref=ref;});_defineProperty(_assertThisInitialized(_this),"removeHighlight",function(){_this.setState({highlight:false});});_defineProperty(_assertThisInitialized(_this),"checkInput",function(){if(!_this.props.required){return true;}if(_this.props.value){return true;}broadcastLiveMessage('product.fill_out_required_input_first');_this.ref.scrollIntoView({behavior:'smooth'});_this.setState({highlight:true});return false;});_defineProperty(_assertThisInitialized(_this),"infoIcon",function(){if(!_this.props.info){return null;}var _this$props=_this.props,label=_this$props.label,info=_this$props.info,showModal=_this$props.showModal;return/*#__PURE__*/React.createElement("div",{onClick:function onClick(){return showModal({title:label,message:info});},"aria-hidden":true},/*#__PURE__*/React.createElement(InfoIcon,{size:24,className:styles.infoIcon}));});_defineProperty(_assertThisInitialized(_this),"handleKeyPress",function(event){// Enter key and on iOS also the "Done" button.
-if(event.which===13){_this.ref.blur();}});_defineProperty(_assertThisInitialized(_this),"handleChange",function(val){_this.props.onChange(_this.props.id,val,_this.props.price);});_defineProperty(_assertThisInitialized(_this),"handleDebounced",debounce(_this.handleChange,300));_this.state={highlight:false};_this.ref=null;props.conditioner.addConditioner("text-option-".concat(props.id),_this.checkInput);return _this;}/**
+ */var TextOption=/*#__PURE__*/function(_PureComponent){function TextOption(props){var _this2;_classCallCheck(this,TextOption);_this2=_callSuper(this,TextOption,[props]);/**
    * @param {Object} ref ref
-   */_createClass(TextOption,[{key:"render",value:/**
+   */_defineProperty(_this2,"setRef",function(ref){_this2.ref=ref;});/**
+   * Remove highlight state
+   */_defineProperty(_this2,"removeHighlight",function(){_this2.setState({highlight:false});});/**
+   * Checks if required input is done.
+   * @return {boolean}
+   */_defineProperty(_this2,"checkInput",function(){if(!_this2.props.required){return true;}if(_this2.props.value){return true;}broadcastLiveMessage('product.fill_out_required_input_first');_this2.ref.scrollIntoView({behavior:'smooth'});_this2.setState({highlight:true});return false;});/**
+   * @returns {JSX}
+   */_defineProperty(_this2,"infoIcon",function(){if(!_this2.props.info){return null;}var _this2$props=_this2.props,label=_this2$props.label,info=_this2$props.info,showModal=_this2$props.showModal;return React.createElement("div",{onClick:function onClick(){return showModal({title:label,message:info});},"aria-hidden":true},React.createElement(InfoIcon,{size:24,className:styles.infoIcon}));});/**
+   * Handles form submits by key.
+   * @param {Object} event The event that caused the keypress.
+   */_defineProperty(_this2,"handleKeyPress",function(event){// Enter key and on iOS also the "Done" button.
+if(event.which===13){_this2.ref.blur();}});/**
+   * @param {string} val value.
+   */_defineProperty(_this2,"handleChange",function(val){_this2.props.onChange(_this2.props.id,val,_this2.props.price);});_defineProperty(_this2,"handleDebounced",debounce(_this2.handleChange,300));_this2.state={highlight:false};_this2.ref=null;props.conditioner.addConditioner("text-option-".concat(props.id),_this2.checkInput);return _this2;}_inherits(TextOption,_PureComponent);return _createClass(TextOption,[{key:"render",value:/**
    * @return {JSX}
-   */function render(){var _this2=this;var _this$props2=this.props,id=_this$props2.id,label=_this$props2.label,value=_this$props2.value,required=_this$props2.required,price=_this$props2.price,info=_this$props2.info;var optionInfoId=id;return/*#__PURE__*/React.createElement("div",{className:styles.row},/*#__PURE__*/React.createElement(Transition,{"in":this.state.highlight,timeout:700,onEntered:this.removeHighlight},function(state){return/*#__PURE__*/React.createElement(Fragment,null,/*#__PURE__*/React.createElement("div",{className:styles.wrapper,style:transition[state]},/*#__PURE__*/React.createElement(TextField,{setRef:_this2.setRef,name:"text_".concat(id),value:value,onChange:_this2.handleDebounced,onKeyPress:_this2.handleKeyPress,placeholder:label,label:label,rightElement:_this2.infoIcon(),"data-test-id":label,hasUnderline:false,className:styles.element,attributes:{'aria-describedby':optionInfoId}})),/*#__PURE__*/React.createElement(OptionInformation,{label:label,required:required,price:price,info:info,optionInfoId:optionInfoId}));}));}}]);return TextOption;}(PureComponent);_defineProperty(TextOption,"defaultProps",{info:null,value:null});export default withShowModal(function(props){return/*#__PURE__*/React.createElement(ProductContext.Consumer,null,function(_ref){var conditioner=_ref.conditioner;return/*#__PURE__*/React.createElement(TextOption,_extends({conditioner:conditioner},props));});});
+   */function render(){var _this3=this;var _this$props=this.props,id=_this$props.id,label=_this$props.label,value=_this$props.value,required=_this$props.required,price=_this$props.price,info=_this$props.info;var optionInfoId=id;return React.createElement("div",{className:styles.row},React.createElement(Transition,{"in":this.state.highlight,timeout:700,onEntered:this.removeHighlight},function(state){return React.createElement(Fragment,null,React.createElement("div",{className:styles.wrapper,style:transition[state]},React.createElement(TextField,{setRef:_this3.setRef,name:"text_".concat(id),value:value,onChange:_this3.handleDebounced,onKeyPress:_this3.handleKeyPress,placeholder:label,label:label,rightElement:_this3.infoIcon(),"data-test-id":label,hasUnderline:false,className:styles.element,attributes:{'aria-describedby':optionInfoId}})),React.createElement(OptionInformation,{label:label,required:required,price:price,info:info,optionInfoId:optionInfoId}));}));}}]);}(PureComponent);_defineProperty(TextOption,"defaultProps",{info:null,value:null/**
+   * @param {Object} props The component props.
+   */});export default withShowModal(function(props){return React.createElement(ProductContext.Consumer,null,function(_ref){var conditioner=_ref.conditioner;return React.createElement(TextOption,_extends({conditioner:conditioner},props));});});

package/product/components/Options/components/TextOption/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables;var row=css({marginBottom:variables.gap.small}).toString();var wrapper=css({backgroundColor:colors.shade8,padding:"".concat(variables.gap.small,"px ").concat(variables.gap.big,"px"),minHeight:56}).toString();var element=css({paddingBottom:0,'& label':{fontWeight:400,color:'inherit'},'& input':{fontWeight:500}}).toString();var infoIcon=css({color:colors.shade9}).toString();export default{row:row,wrapper:wrapper,element:element,infoIcon:infoIcon};
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables;var row=css({marginBottom:variables.gap.small}).toString();var wrapper=css({backgroundColor:"var(--color-background-accent, ".concat(colors.shade8,")"),padding:"".concat(variables.gap.small,"px ").concat(variables.gap.big,"px"),minHeight:56}).toString();var element=css({paddingBottom:0,'& label':{fontWeight:400,color:'var(--color-text-high-emphasis, inherit)'},'& input':{fontWeight:500,color:'var(--color-text-high-emphasis)'},'& .placeholder':{color:'var(--color-text-low-emphasis)'}}).toString();var infoIcon=css({color:colors.shade9}).toString();export default{row:row,wrapper:wrapper,element:element,infoIcon:infoIcon};

package/product/components/Options/index.js

@@ -1,5 +1,5 @@
-import React from'react';import{PRODUCT_OPTIONS}from'@shopgate/pwa-common-commerce/product/constants/Portals';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import{ProductContext}from"../context";import Content from"./components/Content";import Option from"./components/Option";import TextOption from"./components/TextOption";// Export for theme api
+import React from'react';import{PRODUCT_OPTIONS}from'@shopgate/engage/product/constants';import{SurroundPortals}from'@shopgate/engage/components';import{ProductContext}from"../context";import Content from"./components/Content";import Option from"./components/Option";import TextOption from"./components/TextOption";// Export for theme api
 export{TextOption,Option as SelectOption};/**
  * The Product Options component.
  * @returns {JSX}
- */var Options=function Options(){return/*#__PURE__*/React.createElement(ProductContext.Consumer,null,function(_ref){var productId=_ref.productId,variantId=_ref.variantId,options=_ref.options;return/*#__PURE__*/React.createElement(SurroundPortals,{portalName:PRODUCT_OPTIONS,portalProps:{productId:variantId||productId}},/*#__PURE__*/React.createElement(Content/* props needed in connector */,{productId:variantId||productId,currentOptions:options}));});};export default Options;
+ */var Options=function Options(){return React.createElement(ProductContext.Consumer,null,function(_ref){var productId=_ref.productId,variantId=_ref.variantId,options=_ref.options;return React.createElement(SurroundPortals,{portalName:PRODUCT_OPTIONS,portalProps:{productId:variantId||productId}},React.createElement(Content/* props needed in connector */,{productId:variantId||productId,currentOptions:options}));});};export default Options;

package/product/components/OrderQuantityHint/index.js

@@ -1,4 +1,5 @@
-import React from'react';import PropTypes from'prop-types';import{I18n,SurroundPortals}from'@shopgate/engage/components';import{isBeta,useWidgetSettings}from'@shopgate/engage/core';import{PRODUCT_ORDER_QUANTITY}from'@shopgate/engage/product';import withProductStock from"../../hocs/withProductStock";import{hint}from"./style";/**
+import React,{useMemo}from'react';import PropTypes from'prop-types';import{I18n,SurroundPortals}from'@shopgate/engage/components';import{i18n,hasNewServices,isBeta}from'@shopgate/engage/core/helpers';import{useWidgetSettings}from'@shopgate/engage/core/hooks';import{PRODUCT_ORDER_QUANTITY}from'@shopgate/engage/product';import{formatFloat}from'@shopgate/engage/components/QuantityInput/helper';import withProductStock from"../../hocs/withProductStock";import withProduct from"../../hocs/withProduct";import{hint}from"./style";/**
  * The Product Order Quantity Hint component.
  * @return {JSX}
- */var OrderQuantityHint=function OrderQuantityHint(_ref){var stock=_ref.stock;if(!isBeta()){return null;}var settings=useWidgetSettings('@shopgate/engage/product/OrderQuantityHint');return/*#__PURE__*/React.createElement(SurroundPortals,{portalName:PRODUCT_ORDER_QUANTITY,portalProps:{stock:stock}},settings.show&&stock&&!!stock.minOrderQuantity&&/*#__PURE__*/React.createElement("div",{className:hint},/*#__PURE__*/React.createElement(I18n.Text,{string:"product.minOrderQuantity",params:{quantity:stock.minOrderQuantity}})),settings.show&&stock&&!!stock.maxOrderQuantity&&/*#__PURE__*/React.createElement("div",{className:hint},/*#__PURE__*/React.createElement(I18n.Text,{string:"product.maxOrderQuantity",params:{quantity:stock.maxOrderQuantity}})));};OrderQuantityHint.defaultProps={stock:null};export default withProductStock(OrderQuantityHint);
+ */var OrderQuantityHint=function OrderQuantityHint(_ref){var stock=_ref.stock,product=_ref.product,className=_ref.className;var _ref2=product||{},hasCatchWeight=_ref2.hasCatchWeight,productUnit=_ref2.unit;var settings=useWidgetSettings('@shopgate/engage/product/OrderQuantityHint');var showContent=useMemo(function(){if(hasNewServices()){// During development of PWA 7 the component was shown by default
+return true;}return isBeta()&&settings.show===true;},[settings.show]);var unit=useMemo(function(){if(hasCatchWeight){var key="formats.unitOfMeasurement.".concat(productUnit);var text=i18n.text(key);return text!==key?text:productUnit||'';}return'';},[hasCatchWeight,productUnit]);var maxDecimals=useMemo(function(){return hasCatchWeight&&productUnit?2:0;},[hasCatchWeight,productUnit]);return React.createElement("div",{className:className},React.createElement(SurroundPortals,{portalName:PRODUCT_ORDER_QUANTITY,portalProps:{stock:stock}},showContent&&stock&&!!stock.minOrderQuantity&&React.createElement("div",{className:hint},React.createElement(I18n.Text,{string:"product.minOrderQuantity",params:{quantity:formatFloat(stock.minOrderQuantity,maxDecimals),unit:unit}})),showContent&&stock&&!!stock.maxOrderQuantity&&React.createElement("div",{className:hint},React.createElement(I18n.Text,{string:"product.maxOrderQuantity",params:{quantity:formatFloat(stock.maxOrderQuantity,maxDecimals),unit:unit}}))));};OrderQuantityHint.defaultProps={className:null,stock:null,product:null};export default withProduct(withProductStock(OrderQuantityHint));

package/product/components/OrderQuantityHint/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';export var hint=css({fontSize:'0.75rem',color:themeConfig.colors.shade3});
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';export var hint=css({fontSize:'0.75rem',color:"var(--color-text-medium-emphasis, ".concat(themeConfig.colors.shade11,")")});

package/product/components/PriceDifference/index.js

@@ -5,4 +5,4 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
  * @param {string} props.currency The currency of the price.
  * @param {number} props.difference The price difference.
  * @return {JSX}
- */var PriceDifference=function PriceDifference(_ref){var _classNames;var className=_ref.className,currency=_ref.currency,difference=_ref.difference;if(difference===0){return null;}var priceClassName=classNames(className,(_classNames={},_defineProperty(_classNames,styles.positive,difference>0),_defineProperty(_classNames,styles.negative,difference<0),_classNames));return/*#__PURE__*/React.createElement(Price,{className:priceClassName,currency:currency,unitPrice:difference});};PriceDifference.defaultProps={className:''};export default PriceDifference;
+ */var PriceDifference=function PriceDifference(_ref){var className=_ref.className,currency=_ref.currency,difference=_ref.difference;if(difference===0){return null;}var priceClassName=classNames(className,_defineProperty(_defineProperty({},styles.positive,difference>0),styles.negative,difference<0));return React.createElement(Price,{className:priceClassName,currency:currency,unitPrice:difference});};PriceDifference.defaultProps={className:''};export default PriceDifference;

package/product/components/PriceDifference/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;var positive=css({color:colors.shade4,':before':{content:'"+"'}}).toString();var negative=css({color:colors.primary}).toString();export default{positive:positive,negative:negative};
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;var positive=css({color:colors.shade4,':before':{content:'"+"'}}).toString();var negative=css({color:"var(--color-primary, ".concat(colors.primary,")")}).toString();export default{positive:positive,negative:negative};

package/product/components/PriceInfo/PriceInfo.connector.js

@@ -0,0 +1,4 @@
+import{connect}from'react-redux';import{makeGetShopSettingByKey}from"../../../core/selectors/shopSettings";import{SHOP_SETTING_DISPLAY_PRICE_PER_MEASURE_UNIT}from"../../../core/constants";/**
+ * Creates the mapStateToProps connector function.
+ * @returns {Function}
+ */var makeMapStateToProps=function makeMapStateToProps(){var getShopSetting=makeGetShopSettingByKey(SHOP_SETTING_DISPLAY_PRICE_PER_MEASURE_UNIT,false);return function(state,props){return{displayPricePerMeasureUnit:getShopSetting(state,props)};};};export default connect(makeMapStateToProps);

package/product/components/PriceInfo/PriceInfo.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,{useMemo}from'react';import PropTypes from'prop-types';import{css}from'glamor';import classNames from'classnames';import{i18n}from'@shopgate/engage/core';import{ConditionalWrapper}from'@shopgate/engage/components';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import connect from"./PriceInfo.connector";var styles={container:css({color:themeConfig.colors.shade3}).toString(),noWrap:css({whiteSpace:'nowrap'}).toString()};/**
+ * The price info component
+ * @returns {JSX}
+ */var PriceInfo=function PriceInfo(_ref){var product=_ref.product,className=_ref.className,wrapper=_ref.wrapper,displayPricePerMeasureUnit=_ref.displayPricePerMeasureUnit,externalCurrency=_ref.currency;var _ref2=product||{},_ref2$price=_ref2.price,price=_ref2$price===void 0?{}:_ref2$price,unitPriceRefValue=_ref2.unitPriceRefValue,unitPriceRefUom=_ref2.unitPriceRefUom;var pricePerMeasureUnit=price.pricePerMeasureUnit,info=price.info,currency=price.currency;var content=useMemo(function(){if(!displayPricePerMeasureUnit){return info;}if(!pricePerMeasureUnit){return null;}var unitKey="formats.unitOfMeasurement.".concat(unitPriceRefUom);var unit=i18n.text(unitKey);if(unit===unitKey){unit=unitPriceRefUom;}return i18n.text('price.pricePerMeasurementFormat',{price:i18n.price(pricePerMeasureUnit,currency||externalCurrency,2),refValue:unitPriceRefValue||'',refUom:unit});},[currency,displayPricePerMeasureUnit,externalCurrency,info,pricePerMeasureUnit,unitPriceRefUom,unitPriceRefValue]);if(!content){return null;}return React.createElement(ConditionalWrapper,{condition:!!wrapper,wrapper:wrapper},React.createElement("div",{className:classNames(styles.container,className,_defineProperty({},styles.noWrap,displayPricePerMeasureUnit)),dangerouslySetInnerHTML:{__html:content},"data-test-id":"priceInfo: ".concat(content)}));};PriceInfo.defaultProps={product:null,className:null,currency:null,wrapper:null,displayPricePerMeasureUnit:false};export default connect(PriceInfo);

package/product/components/PriceInfo/index.js

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

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

package/product/components/ProductCard/index.js

@@ -1,4 +1,4 @@
-import React,{Fragment}from'react';import PropTypes from'prop-types';import{isBeta,useWidgetSettings}from'@shopgate/engage/core';import{Link,Ellipsis,Portal,RatingStars,DiscountBadge}from'@shopgate/engage/components';import{getProductRoute,MapPriceHint,ProductImage,OrderQuantityHint,FeaturedMedia,Swatches,ProductBadges}from'@shopgate/engage/product';import*as portals from'@shopgate/pwa-common-commerce/category';import ProductGridPrice from"../ProductGridPrice";import{getProductImageSettings}from"../../helpers";import styles from"./style";var location='productCard';/**
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React,{useMemo}from'react';import PropTypes from'prop-types';import{isBeta}from'@shopgate/engage/core/helpers';import{useWidgetSettings}from'@shopgate/engage/core/hooks';import{useProductListType}from'@shopgate/engage/product/hooks';import{Link,RatingStars,DiscountBadge,SurroundPortals}from'@shopgate/engage/components';import{getProductRoute}from'@shopgate/engage/product';import{MapPriceHint,ProductImage,OrderQuantityHint,FeaturedMedia,Swatches,ProductName,ProductBadges}from'@shopgate/engage/product/components';import{getProductImageSettings}from'@shopgate/engage/product/helpers';import{PRODUCT_ITEM_DISCOUNT,PRODUCT_ITEM_PRICE}from'@shopgate/engage/category';import ProductGridPrice from"../ProductGridPrice";import styles from"./style";var location='productCard';/**
  * The ProductCard component.
  * @param {Object} props The component props.
  * @param {Object} props.product The product data.
@@ -6,5 +6,14 @@ import React,{Fragment}from'react';import PropTypes from'prop-types';import{isBe
  * @param {boolean} props.hideRating Whether the rating should be hidden.
  * @param {boolean} props.hideName Whether the name should be hidden.
  * @param {number} props.titleRows The max number of rows for the product title.
- * @return {JSX}
- */function ProductCard(props){var product=props.product,hidePrice=props.hidePrice,hideRating=props.hideRating,hideName=props.hideName,titleRows=props.titleRows,linkState=props.linkState,linkReplace=props.linkReplace,linkHref=props.linkHref;var _getProductImageSetti=getProductImageSettings(),gridResolutions=_getProductImageSetti.ListImage;var _useWidgetSettings=useWidgetSettings('@shopgate/engage/rating'),_useWidgetSettings$sh=_useWidgetSettings.showEmptyRatingStars,showEmptyRatingStars=_useWidgetSettings$sh===void 0?false:_useWidgetSettings$sh;var showRatings=false;if(!hideRating&&product.rating&&product.rating.average>0){showRatings=true;}else if(!hideRating&&showEmptyRatingStars&&product.rating){showRatings=true;}return/*#__PURE__*/React.createElement(Link,{className:"engage__product-card",tagName:"a",href:linkHref||getProductRoute(product.id),itemProp:"item",itemScope:true,itemType:"http://schema.org/Product",state:linkState,replace:linkReplace},isBeta()&&product.featuredMedia?/*#__PURE__*/React.createElement(FeaturedMedia,{type:product.featuredMedia.type,url:product.featuredMedia.url,altText:product.featuredMedia.altText}):/*#__PURE__*/React.createElement(ProductImage,{src:product.featuredImageBaseUrl,resolutions:gridResolutions,alt:product.name,itemProp:"image"}),/*#__PURE__*/React.createElement(ProductBadges,{location:location,productId:product.id},!!(!hidePrice&&product.price.discount)&&/*#__PURE__*/React.createElement("div",{className:styles.badgeWrapper},/*#__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,{text:"-".concat(product.price.discount,"%")})),/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT_AFTER,props:{productId:product.id}}))),!(hidePrice&&hideRating)&&/*#__PURE__*/React.createElement("div",{className:styles.details},showRatings&&/*#__PURE__*/React.createElement(RatingStars,{value:product.rating.average}),/*#__PURE__*/React.createElement(Swatches,{productId:product.id}),!hideName&&/*#__PURE__*/React.createElement("div",{itemProp:"name",className:styles.title,"data-test-id":"Productname: ".concat(product.name)},/*#__PURE__*/React.createElement(Ellipsis,{rows:titleRows||3},product.name)),/*#__PURE__*/React.createElement(MapPriceHint,{productId:product.id}),/*#__PURE__*/React.createElement(OrderQuantityHint,{productId:product.id}),!hidePrice&&/*#__PURE__*/React.createElement(Fragment,null,/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_BEFORE,props:{productId:product.id,location:location}}),/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE,props:{productId:product.id,location:location}},/*#__PURE__*/React.createElement(ProductGridPrice,{price:product.price})),/*#__PURE__*/React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_AFTER,props:{productId:product.id,location:location}}))));}ProductCard.defaultProps={linkState:{},linkReplace:false,linkHref:''};export default ProductCard;
+ * @param {string} props.url Optional alternative url for the product link
+ * @return {JSX.Element}
+ */function ProductCard(props){var product=props.product,hidePrice=props.hidePrice,hideRating=props.hideRating,hideName=props.hideName,titleRows=props.titleRows,url=props.url;var _useProductListType=useProductListType(),meta=_useProductListType.meta;var _getProductImageSetti=getProductImageSettings(),gridResolutions=_getProductImageSetti.ListImage;var _useWidgetSettings=useWidgetSettings('@shopgate/engage/rating'),_useWidgetSettings$sh=_useWidgetSettings.showEmptyRatingStars,showEmptyRatingStars=_useWidgetSettings$sh===void 0?false:_useWidgetSettings$sh;var showRatings=useMemo(function(){var _product$rating;if(!hideRating&&(product===null||product===void 0?void 0:(_product$rating=product.rating)===null||_product$rating===void 0?void 0:_product$rating.average)>0){return true;}if(!hideRating&&showEmptyRatingStars&&(product===null||product===void 0?void 0:product.rating)){return true;}return false;},[hideRating,product,showEmptyRatingStars]);return React.createElement(Link,{className:"engage__product-card",href:url||getProductRoute(product.id),itemProp:"item",itemScope:true,itemType:"http://schema.org/Product",tabIndex:0,state:_extends({},meta)},isBeta()&&product.featuredMedia?React.createElement(FeaturedMedia,{type:product.featuredMedia.type,url:product.featuredMedia.url,altText:product.featuredMedia.altText}):React.createElement(ProductImage,{src:product.featuredImageBaseUrl,resolutions:gridResolutions,alt:product.name,itemProp:"image"}),React.createElement(ProductBadges,{location:location,productId:product.id},!!(!hidePrice&&product.price.discount)&&React.createElement("div",{className:styles.badgeWrapper},React.createElement(SurroundPortals,{portalName:PRODUCT_ITEM_DISCOUNT,portalProps:{productId:product.id}},React.createElement(DiscountBadge,{text:"-".concat(product.price.discount,"%")})))),!(hidePrice&&hideRating&&hideName)&&React.createElement("div",{className:"".concat(styles.details," engage__product-card__information")},showRatings&&React.createElement(RatingStars,{value:product.rating.average}),React.createElement(Swatches,{productId:product.id}),!hideName&&React.createElement(ProductName,{name:product.name,className:styles.title,testId:"Productname: ".concat(product.name),itemProp:"name",rows:titleRows||3}),React.createElement(MapPriceHint,{productId:product.id}),React.createElement(OrderQuantityHint,{productId:product.id}),!hidePrice&&React.createElement(SurroundPortals,{portalName:PRODUCT_ITEM_PRICE,portalProps:{productId:product.id,location:location}},React.createElement(ProductGridPrice,{product:product}))));}/**
+ * After a refactoring of the Theme API ProductCard component, this component replaced a
+ * sub-component of the ProductCard.
+ * The original implementation exposed a couple of sub-components that don't exist in the new
+ * implementation. Since we expect that they are not used anywhere, we replace them with mocks.
+ *
+ * Link to a GitHub tag that contains the original implementation:
+ * @link https://github.com/shopgate/pwa/blob/v7.27.1/themes/theme-ios11/themeApi/ProductCard/components/Render/index.jsx#L115
+ */ProductCard.Badge=function(){return null;};ProductCard.Price=function(){return null;};ProductCard.Title=function(){return null;};ProductCard.defaultProps={hideName:false,hidePrice:false,hideRating:false,titleRows:3,url:null};export default ProductCard;

package/product/components/ProductCard/style.js

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

package/product/components/ProductCharacteristics/context.js

@@ -1 +1 @@
-import React from'react';export default/*#__PURE__*/React.createContext();
+import React from'react';export default React.createContext();

package/product/components/ProductCharacteristics/helpers/index.js

@@ -1,4 +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;}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 isMatch from'lodash/isMatch';import appConfig from'@shopgate/pwa-common/helpers/config';var variantSelectionMode=appConfig.variantSelectionMode,_appConfig$product=appConfig.product;_appConfig$product=_appConfig$product===void 0?{}:_appConfig$product;var variantPreselect=_appConfig$product.variantPreselect;var preselectVariant=variantPreselect||parseInt(variantSelectionMode,10)===1;/**
+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 _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 isMatch from'lodash/isMatch';import appConfig from'@shopgate/pwa-common/helpers/config';var variantSelectionMode=appConfig.variantSelectionMode,_appConfig$product=appConfig.product,_appConfig$product2=_appConfig$product===void 0?{}:_appConfig$product,variantPreselect=_appConfig$product2.variantPreselect;var preselectVariant=variantPreselect||parseInt(variantSelectionMode,10)===1;/**
  * Returns the index of a particular characteristic from a set of characteristics.
  * @param {Array} characteristics The characteristics of a product.
  * @param {number} characteristicId The id of the characteristic to find.

package/product/components/ProductCharacteristics/index.js

@@ -1,25 +1,39 @@
-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 _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 isMatch from'lodash/isMatch';import isEqual from'lodash/isEqual';import{broadcastLiveMessage}from'@shopgate/engage/a11y';import connect from"./connector";import VariantsContext from"./context";import{isCharacteristicEnabled,getSelectedValue,prepareState,selectCharacteristics}from"./helpers";/**
+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 _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 isMatch from'lodash/isMatch';import isEqual from'lodash/isEqual';import{broadcastLiveMessage}from'@shopgate/engage/a11y';import{responsiveCondition}from'@shopgate/engage/styles';import connect from"./connector";import VariantsContext from"./context";import{isCharacteristicEnabled,getSelectedValue,prepareState,selectCharacteristics}from"./helpers";/**
  * The ProductCharacteristics component.
- */var ProductCharacteristics=/*#__PURE__*/function(_Component){_inherits(ProductCharacteristics,_Component);var _super=_createSuper(ProductCharacteristics);/**
-   * @param {Object} props The component props.
-   */function ProductCharacteristics(_props){var _this;_classCallCheck(this,ProductCharacteristics);_this=_super.call(this,_props);_defineProperty(_assertThisInitialized(_this),"setRefs",function(props){var variants=props.variants;if(variants){variants.characteristics.forEach(function(_char){_this.refsStore[_char.id]=/*#__PURE__*/React.createRef();});}});_defineProperty(_assertThisInitialized(_this),"checkSelection",function(){var characteristics=_this.state.characteristics;var _this$props=_this.props,variants=_this$props.variants,variantId=_this$props.variantId;if(!variants){return true;}var filteredValues=Object.keys(characteristics).filter(function(key){return!!characteristics[key];});var selected=!!(filteredValues.length===variants.characteristics.length&&variantId);if(!selected){var firstUnselected=_this.findUnselectedCharacteristic();if(firstUnselected){var ref=_this.refsStore[firstUnselected.id];// Focus the item for screen readers and broadcast a related live message.
-ref.current.focus();var option=ref.current.innerText;broadcastLiveMessage('product.pick_option_first',{params:{option:option}});ref.current.scrollIntoView({behavior:'smooth'});_this.setState({highlight:firstUnselected.id});}}return selected;});_defineProperty(_assertThisInitialized(_this),"checkSelectedCharacteristics",function(){var characteristics=_this.state.characteristics;var _this$props2=_this.props,variantId=_this$props2.variantId,variants=_this$props2.variants,finishTimeout=_this$props2.finishTimeout;if(!variants){return;}var filteredValues=Object.keys(characteristics).filter(function(key){return!!characteristics[key];});if(filteredValues.length!==variants.characteristics.length){return;}var products=variants.products.filter(function(product){return isMatch(product.characteristics,characteristics);});if(!products.length){return;}if(products[0].id===variantId){return;}setTimeout(function(){_this.props.navigate(products[0].id);},finishTimeout);});_defineProperty(_assertThisInitialized(_this),"handleSelection",function(selection){var _this$props3=_this.props,variants=_this$props3.variants,setCharacteristics=_this$props3.setCharacteristics;var id=selection.id,value=selection.value;_this.setState(function(_ref){var characteristics=_ref.characteristics;var state=prepareState(id,value,characteristics,variants.characteristics,variants.products);setCharacteristics(state);return{characteristics:_extends({},state),highlight:null};},_this.checkSelectedCharacteristics);});_defineProperty(_assertThisInitialized(_this),"buildValues",function(selections,charId,values,charIndex,selectedValue,charDisabled){// If this is the first characteristic then all values are selectable.
-if(charIndex===0){return values.map(function(value){return _extends({},value,{selectable:!charDisabled,selected:selectedValue===value.id});});}var variants=_this.props.variants;var subset={};Object.keys(selections).forEach(function(item,index){if(index<charIndex){subset[item]=selections[item];}});// Filter products that match or partially match the current characteristic selection.
+ */var ProductCharacteristics=/*#__PURE__*/function(_Component){function ProductCharacteristics(_props){var _this2;_classCallCheck(this,ProductCharacteristics);_this2=_callSuper(this,ProductCharacteristics,[_props]);/**
+   * Sets the refs to the characteristics selects.
+   * @param {Object} props The props to check against.
+   */_defineProperty(_this2,"setRefs",function(props){var variants=props.variants;if(variants){variants.characteristics.forEach(function(_char){_this2.refsStore[_char.id]=React.createRef();});}});/**
+   * Checks if all selections have been made.
+   * @return {boolean}
+   */_defineProperty(_this2,"checkSelection",function(){var characteristics=_this2.state.characteristics;var _this2$props=_this2.props,variants=_this2$props.variants,variantId=_this2$props.variantId;if(!variants){return true;}var filteredValues=Object.keys(characteristics).filter(function(key){return!!characteristics[key];});var selected=!!(filteredValues.length===variants.characteristics.length&&variantId);if(!selected){var firstUnselected=_this2.findUnselectedCharacteristic();if(firstUnselected){var ref=_this2.refsStore[firstUnselected.id];// Focus the item for screen readers and broadcast a related live message.
+ref.current.focus();var option=ref.current.innerText;broadcastLiveMessage('product.pick_option_first',{params:{option:option}});if(responsiveCondition('>xs',{webOnly:true})){ref.current.scrollIntoView({behavior:'smooth',block:'center'});}else{ref.current.scrollIntoView({behavior:'smooth'});}_this2.setState({highlight:firstUnselected.id});}}return selected;});_defineProperty(_this2,"checkSelectedCharacteristics",function(){var characteristics=_this2.state.characteristics;var _this2$props2=_this2.props,variantId=_this2$props2.variantId,variants=_this2$props2.variants,finishTimeout=_this2$props2.finishTimeout;if(!variants){return;}var filteredValues=Object.keys(characteristics).filter(function(key){return!!characteristics[key];});if(filteredValues.length!==variants.characteristics.length){return;}var products=variants.products.filter(function(product){return isMatch(product.characteristics,characteristics);});if(!products.length){return;}if(products[0].id===variantId){return;}setTimeout(function(){_this2.props.navigate(products[0].id);},finishTimeout);});/**
+   * Stores a selected characteristic into the local state.
+   * @param {Object} selection The selected item.
+   */_defineProperty(_this2,"handleSelection",function(selection){var _this2$props3=_this2.props,variants=_this2$props3.variants,setCharacteristics=_this2$props3.setCharacteristics;var id=selection.id,value=selection.value;_this2.setState(function(_ref){var characteristics=_ref.characteristics;var state=prepareState(id,value,characteristics,variants.characteristics,variants.products);setCharacteristics(state);return{characteristics:_extends({},state),highlight:null};},_this2.checkSelectedCharacteristics);});/**
+   * @param {Object} selections The selections stored in the state.
+   * @param {string} charId The current characteristic ID.
+   * @param {Array} values The characteristic values.
+   * @param {number} charIndex The characteristic index.
+   * @param {string|null} selectedValue selectedValue
+   * @param {boolean} charDisabled Whether the characteristic for the values is disabled
+   * @return {Array}
+   */_defineProperty(_this2,"buildValues",function(selections,charId,values,charIndex,selectedValue,charDisabled){// If this is the first characteristic then all values are selectable.
+if(charIndex===0){return values.map(function(value){return _extends({},value,{selectable:!charDisabled,selected:selectedValue===value.id});});}var variants=_this2.props.variants;var subset={};Object.keys(selections).forEach(function(item,index){if(index<charIndex){subset[item]=selections[item];}});// Filter products that match or partially match the current characteristic selection.
 var products=variants.products.filter(function(_ref2){var characteristics=_ref2.characteristics;return isMatch(characteristics,subset);});// Check if any of the values are present inside any of the matching products.
-return values.map(function(value){var selectable=products.some(function(_ref3){var characteristics=_ref3.characteristics;return isMatch(characteristics,_defineProperty({},charId,value.id));});return _extends({},value,{selectable:charDisabled?false:selectable,selected:selectedValue===value.id});});});_defineProperty(_assertThisInitialized(_this),"resetHighlight",function(){_this.setState({highlight:null});});_this.refsStore={};var _characteristics=selectCharacteristics(_props);_this.state={highlight:null,characteristics:_characteristics};_props.setCharacteristics(_characteristics);_this.setRefs(_props);_props.conditioner.addConditioner('product-variants',_this.checkSelection);return _this;}/** @inheritDoc */_createClass(ProductCharacteristics,[{key:"componentDidMount",value:function componentDidMount(){this.checkSelectedCharacteristics();}/**
+return values.map(function(value){var selectable=products.some(function(_ref3){var characteristics=_ref3.characteristics;return isMatch(characteristics,_defineProperty({},charId,value.id));});return _extends({},value,{selectable:charDisabled?false:selectable,selected:selectedValue===value.id});});});/**
+   * Resets the highlight state
+   */_defineProperty(_this2,"resetHighlight",function(){_this2.setState({highlight:null});});_this2.refsStore={};var _characteristics=selectCharacteristics(_props);_this2.state={highlight:null,characteristics:_characteristics};_props.setCharacteristics(_characteristics);_this2.setRefs(_props);_props.conditioner.addConditioner('product-variants',_this2.checkSelection);return _this2;}/** @inheritDoc */_inherits(ProductCharacteristics,_Component);return _createClass(ProductCharacteristics,[{key:"componentDidMount",value:function componentDidMount(){this.checkSelectedCharacteristics();}/**
    * @param {Object} nextProps The next component props.
    */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(!this.props.variants&&nextProps.variants){// Initialize refs and characteristics when the variants prop was updated with a valid value.
 this.setRefs(nextProps);var characteristics=selectCharacteristics(nextProps);this.setState({characteristics:characteristics},this.checkSelectedCharacteristics);// Inform parent component about potential updates e.g. preselected characteristic values
 nextProps.setCharacteristics(characteristics);}else if(nextProps.characteristics&&!isEqual(this.state.characteristics,nextProps.characteristics)){// Sync back characteristics from parent if set
-this.setState({characteristics:nextProps.characteristics});}}/**
-   * Sets the refs to the characteristics selects.
-   * @param {Object} props The props to check against.
-   */},{key:"findUnselectedCharacteristic",value:/**
+this.setState({characteristics:nextProps.characteristics});}}},{key:"findUnselectedCharacteristic",value:/**
    * Finds the first unselected characteristic.
    * @return {Object|null}
-   */function findUnselectedCharacteristic(){var characteristics=this.state.characteristics;var unselected=this.props.variants.characteristics.filter(function(_char2){return!characteristics.hasOwnProperty(_char2.id);});if(unselected.length){return unselected[0];}return null;}/**
-   * Resets the highlight state
-   */},{key:"render",value:/**
+   */function findUnselectedCharacteristic(){var characteristics=this.state.characteristics;var unselected=this.props.variants.characteristics.filter(function(_char2){return!characteristics.hasOwnProperty(_char2.id);});if(unselected.length){return unselected[0];}return null;}},{key:"render",value:/**
    * @return {JSX}
-   */function render(){var _this2=this;var characteristics=this.state.characteristics;var variants=this.props.variants;if(!variants){return null;}return/*#__PURE__*/React.createElement(VariantsContext.Provider,{value:this.state},variants.characteristics.map(function(_char3,index){var disabled=!isCharacteristicEnabled(characteristics,index);var selected=getSelectedValue(_char3.id,characteristics);var values=_this2.buildValues(characteristics,_char3.id,_char3.values,index,selected,disabled);return _this2.props.render({charRef:_this2.refsStore[_char3.id],disabled:disabled,highlight:_this2.state.highlight===_char3.id,id:_char3.id,key:_char3.id,label:_char3.label,swatch:!!_char3.swatch,// BETA
-select:_this2.handleSelection,selected:selected,values:values,resetHighlight:_this2.resetHighlight});}));}}]);return ProductCharacteristics;}(Component);_defineProperty(ProductCharacteristics,"defaultProps",{finishTimeout:0,variantId:null,variants:null,characteristics:null});export default connect(ProductCharacteristics);
+   */function render(){var _this3=this;var characteristics=this.state.characteristics;var variants=this.props.variants;if(!variants){return null;}return React.createElement(VariantsContext.Provider,{value:this.state},variants.characteristics.map(function(_char3,index){var disabled=!isCharacteristicEnabled(characteristics,index);var selected=getSelectedValue(_char3.id,characteristics);var values=_this3.buildValues(characteristics,_char3.id,_char3.values,index,selected,disabled);return _this3.props.render({charRef:_this3.refsStore[_char3.id],disabled:disabled,highlight:_this3.state.highlight===_char3.id,id:_char3.id,key:_char3.id,label:_char3.label,swatch:!!_char3.swatch,// BETA
+select:_this3.handleSelection,selected:selected,values:values,resetHighlight:_this3.resetHighlight});}));}}]);}(Component);_defineProperty(ProductCharacteristics,"defaultProps",{finishTimeout:0,variantId:null,variants:null,characteristics:null/**
+   * @param {Object} props The component props.
+   */});export default connect(ProductCharacteristics);

package/product/components/ProductDiscountBadge/index.js

@@ -1,4 +1,4 @@
 function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import PropTypes from'prop-types';import{css}from'glamor';import{SurroundPortals}from'@shopgate/engage/components';import DiscountBadge from'@shopgate/pwa-ui-shared/DiscountBadge';import{PRODUCT_DISCOUNT}from'@shopgate/pwa-common-commerce/product/constants/Portals';import{useWidgetSettings}from'@shopgate/engage/core';import ProductBadges from"../ProductBadges";import styles from"./style";import connect from"./connector";/**
  * ProductDiscountBadge
- * @return {JSX}
- */var ProductDiscountBadge=function ProductDiscountBadge(_ref){var productId=_ref.productId,discount=_ref.discount;var _ref2=useWidgetSettings('@shopgate/engage/product/components/ProductDiscountBadge')||{},_ref2$pdp=_ref2.pdp,pdp=_ref2$pdp===void 0?{show:false,style:{}}:_ref2$pdp;return/*#__PURE__*/React.createElement(ProductBadges,{className:styles.portal,location:"productDiscountBadge",productId:productId,portalProps:_extends({},pdp)},pdp.show&&discount?/*#__PURE__*/React.createElement("div",{className:"".concat(styles.container," ").concat(css(pdp.style)," theme__product__product-discount"),"aria-hidden":true},/*#__PURE__*/React.createElement(SurroundPortals,{portalName:PRODUCT_DISCOUNT,portalProps:{productId:productId,discount:discount}},/*#__PURE__*/React.createElement(DiscountBadge,{className:styles.badge,text:"-".concat(discount,"%")}))):null);};ProductDiscountBadge.defaultProps={discount:null};export default connect(ProductDiscountBadge);
+ * @return {JSX.Element}
+ */var ProductDiscountBadge=function ProductDiscountBadge(_ref){var productId=_ref.productId,discount=_ref.discount;var _ref2=useWidgetSettings('@shopgate/engage/product/components/ProductDiscountBadge')||{},_ref2$pdp=_ref2.pdp,pdp=_ref2$pdp===void 0?{show:false,style:{}}:_ref2$pdp;return React.createElement(ProductBadges,{className:styles.portal,location:"productDiscountBadge",productId:productId,portalProps:_extends({},pdp)},pdp.show&&discount?React.createElement("div",{className:"".concat(styles.container," ").concat(css(pdp.style)," theme__product__product-discount")},React.createElement(SurroundPortals,{portalName:PRODUCT_DISCOUNT,portalProps:{productId:productId,discount:discount}},React.createElement(DiscountBadge,{className:styles.badge,text:"-".concat(discount,"%")}))):null);};ProductDiscountBadge.defaultProps={discount:null};export default connect(ProductDiscountBadge);

package/product/components/ProductDiscountBadge/spec.js

@@ -1,5 +1,5 @@
-import React from'react';import{mount}from'enzyme';import configureStore from'redux-mock-store';import{Provider}from'react-redux';import{useWidgetSettings}from'@shopgate/engage/core/hooks/useWidgetSettings';import{mockedProduct1,mockedStateWithDiscount,mockedStateWithoutDiscount}from"./mock";import ProductDiscountBadge from"./index";jest.mock('@shopgate/engage/core/hooks/useWidgetSettings',function(){return{useWidgetSettings:jest.fn()};});describe('<ProductDiscountBadge />',function(){var mockedStore=configureStore();beforeEach(function(){useWidgetSettings.mockReturnValue({pdp:{show:true,style:{color:'blue'}}});});/**
+import React from'react';import{mount}from'enzyme';import configureStore from'redux-mock-store';import{Provider}from'react-redux';import{useWidgetSettings}from'@shopgate/engage/core/hooks/useWidgetSettings';import{mockedProduct1,mockedStateWithDiscount,mockedStateWithoutDiscount}from"./mock";import ProductDiscountBadge from"./index";jest.mock('@shopgate/engage/components');jest.mock('@shopgate/engage/core/hooks/useWidgetSettings',function(){return{useWidgetSettings:jest.fn()};});describe('<ProductDiscountBadge />',function(){var mockedStore=configureStore();beforeEach(function(){useWidgetSettings.mockReturnValue({pdp:{show:true,style:{color:'blue'}}});});/**
    * createComponent
    * @param {Object} mockedState mockedState
    * @return {*}
-   */var createComponent=function createComponent(mockedState){var store=mockedStore(mockedState);return mount(/*#__PURE__*/React.createElement(Provider,{store:store},/*#__PURE__*/React.createElement(ProductDiscountBadge,{productId:mockedProduct1.productId})));};it('should render without discount',function(){var wrapper=createComponent(mockedStateWithoutDiscount);expect(wrapper).toMatchSnapshot();});it('should render with discount',function(){var wrapper=createComponent(mockedStateWithDiscount);expect(wrapper).toMatchSnapshot();});it('should not render with discount if widgetSetting is false',function(){useWidgetSettings.mockReturnValue({pdp:{show:false,style:{}}});var wrapper=createComponent(mockedStateWithDiscount);expect(wrapper).toMatchSnapshot();});});
+   */var createComponent=function createComponent(mockedState){var store=mockedStore(mockedState);return mount(React.createElement(Provider,{store:store},React.createElement(ProductDiscountBadge,{productId:mockedProduct1.productId})));};it('should render without discount',function(){var wrapper=createComponent(mockedStateWithoutDiscount);expect(wrapper).toMatchSnapshot();});it('should render with discount',function(){var wrapper=createComponent(mockedStateWithDiscount);expect(wrapper).toMatchSnapshot();});it('should not render with discount if widgetSetting is false',function(){useWidgetSettings.mockReturnValue({pdp:{show:false,style:{}}});var wrapper=createComponent(mockedStateWithDiscount);expect(wrapper).toMatchSnapshot();});});

package/product/components/ProductDiscountBadge/style.js

@@ -1 +1 @@
-import{css}from'glamor';var styles={portal:css({top:12}).toString(),container:css({minWidth:65,zIndex:10}),badge:css({fontSize:'1.15rem'}).toString()};export default styles;
+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{css}from'glamor';import{responsiveMediaQuery}from'@shopgate/engage/styles';var styles={portal:css(_defineProperty({top:12},responsiveMediaQuery('>xs',{webOnly:true}),{top:25,left:25})).toString(),container:css(_defineProperty({minWidth:65,zIndex:10},responsiveMediaQuery('>xs',{webOnly:true}),{minWidth:50})),badge:css(_defineProperty({fontSize:'1.15rem'},responsiveMediaQuery('>xs',{webOnly:true}),{fontSize:14})).toString()};export default styles;

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

@@ -0,0 +1,8 @@
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React,{useMemo,memo}from'react';import PropTypes from'prop-types';import{MapPriceHint,OrderQuantityHint,EffectivityDates,Swatches,AVAILABILITY_STATE_OK,AVAILABILITY_STATE_ALERT,getProductRoute}from'@shopgate/engage/product';import{hasNewServices as checkHasNewServices,i18n}from'@shopgate/engage/core/helpers';import{Availability,Link}from'@shopgate/engage/components';import{StockInfoLists}from'@shopgate/engage/locations/components';import{makeStyles}from'@shopgate/engage/styles';import ItemName from"../ItemName";import ItemPrice from"../ItemPrice";var useStyles=makeStyles()({root:{lineHeight:1.2,':not(:empty)':{padding:'12px 0 16px'}},quantityHint:{paddingTop:8}});/**
+ * The Product Grid Item Detail component.
+ * @param {Object} props The component props.
+ * @param {Object} props.product The product.
+ * @param {Object} props.display The display object.
+ * @param {Object} [props.productListTypeMeta] Optional meta object with data from the product list
+ * @returns {JSX.Element}
+ */var ItemDetails=function ItemDetails(_ref){var product=_ref.product,display=_ref.display,productListTypeMeta=_ref.productListTypeMeta;var productId=product.id,_product$name=product.name,name=_product$name===void 0?null:_product$name,_product$stock=product.stock,stock=_product$stock===void 0?null:_product$stock;var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var hasNewServices=useMemo(function(){return checkHasNewServices();},[]);if(display&&!display.name&&!display.price&&!display.reviews){return null;}return React.createElement(Link,{className:cx(classes.root,'theme__product-grid__item__item-details'),tabIndex:0,href:getProductRoute(productId),state:_extends({title:product.name},productListTypeMeta)},React.createElement(Swatches,{productId:productId}),React.createElement(ItemName,{display:display,productId:productId,name:name}),React.createElement(MapPriceHint,{productId:productId}),React.createElement(OrderQuantityHint,{productId:productId,className:classes.quantityHint}),React.createElement(EffectivityDates,{productId:productId}),hasNewServices&&React.createElement(React.Fragment,null,React.createElement(Availability,{state:!stock||stock.orderable?AVAILABILITY_STATE_OK:AVAILABILITY_STATE_ALERT,text:i18n.text('product.available.not'),showWhenAvailable:false}),React.createElement(StockInfoLists,{product:product})),React.createElement(ItemPrice,{product:product,display:display}));};ItemDetails.defaultProps={display:null,productListTypeMeta:null};export default memo(ItemDetails);

package/product/components/ProductGrid/components/Item/components/ItemDetails/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{hasNewServices}from'@shopgate/engage/core/helpers';import{Availability}from'@shopgate/engage/components';import{StockInfoLists}from'@shopgate/engage/locations/components';import ItemDetails from"./index";jest.mock('@shopgate/engage/product',function(){return{MapPriceHint:function MapPriceHint(){return null;},OrderQuantityHint:function OrderQuantityHint(){return null;},EffectivityDates:function EffectivityDates(){return null;},Swatches:function Swatches(){return null;},AVAILABILITY_STATE_OK:'AVAILABILITY_STATE_OK',AVAILABILITY_STATE_ALERT:'AVAILABILITY_STATE_ALERT',getProductRoute:jest.fn(function(productId){return"link-to-product/".concat(productId);})};});jest.mock('@shopgate/engage/locations/components',function(){return{StockInfoLists:function StockInfoLists(){return null;}};});jest.mock('@shopgate/engage/core/helpers',function(){return{hasNewServices:jest.fn().mockReturnValue(false),i18n:{text:function text(str){return str;}}};});jest.mock('@shopgate/engage/components');jest.mock('@shopgate/engage/core',function(){return{isIOSTheme:jest.fn().mockReturnValue(true),hasWebBridge:jest.fn().mockReturnValue(false),i18n:{text:function text(_text){return _text;}}};});jest.mock("../ItemName");jest.mock("../ItemPrice");describe('<ItemDetails />',function(){var props={product:{id:'1234',name:'Foo',price:{}}};var display={name:false,price:false,reviews:false};it('should render with minimal props',function(){var wrapper=shallow(React.createElement(ItemDetails,props));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Availability).exists()).toBe(false);expect(wrapper.find(StockInfoLists).exists()).toBe(false);});it('should render additional components with new services',function(){hasNewServices.mockReturnValueOnce(true);var wrapper=shallow(React.createElement(ItemDetails,props));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Availability).exists()).toBe(true);expect(wrapper.find(StockInfoLists).exists()).toBe(true);});it('should not render with display props set',function(){var wrapper=shallow(React.createElement(ItemDetails,_extends({},props,{display:display})));expect(wrapper).toBeEmptyRender();});});

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

@@ -0,0 +1,5 @@
+import React,{memo,useMemo}from'react';import PropTypes from'prop-types';import{SurroundPortals,DiscountBadge}from'@shopgate/engage/components';import{PRODUCT_ITEM_DISCOUNT}from'@shopgate/engage/category';import{makeStyles}from'@shopgate/engage/styles';var useStyles=makeStyles()({root:{minWidth:40}});/**
+ * The item discount component
+ * @param {Object} props The component props.
+ * @returns {JSX.Element|null}
+ */var ItemDiscount=function ItemDiscount(_ref){var productId=_ref.productId,discount=_ref.discount;var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var portalProps=useMemo(function(){return{productId:productId};},[productId]);if(!discount){return null;}return React.createElement("div",{className:cx(classes.root,'theme__product-grid__item__item-discount')},React.createElement(SurroundPortals,{portalName:PRODUCT_ITEM_DISCOUNT,portalProps:portalProps},React.createElement(DiscountBadge,{text:"-".concat(discount,"%")})));};ItemDiscount.defaultProps={discount:null};export default memo(ItemDiscount);

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

@@ -0,0 +1,5 @@
+import React,{memo,useMemo}from'react';import PropTypes from'prop-types';import{useSelector}from'react-redux';import{SurroundPortals,FavoritesButton}from'@shopgate/engage/components';import{PRODUCT_ITEM_FAVORITES_BUTTON}from'@shopgate/engage/category';import{isRelativeProductOnList}from'@shopgate/engage/favorites';import{getLoadWishlistOnAppStartEnabled}from'@shopgate/engage/core';import{makeStyles}from'@shopgate/engage/styles';var useStyles=makeStyles()({root:{position:'absolute',top:0,right:16,left:'auto',transform:'translate3d(0, -50%, 0)'}});/**
+ * The item favorites button component.
+ * @param {Object} props The component props.
+ * @returns {JSX.Element}
+ */var ItemFavoritesButton=function ItemFavoritesButton(_ref){var productId=_ref.productId;var _useStyles=useStyles(),classes=_useStyles.classes;var loadWishlistOnAppStartEnabled=useSelector(getLoadWishlistOnAppStartEnabled);var isOnWishlist=useSelector(function(state){return isRelativeProductOnList(state,{productId:productId});});var isFavorite=useMemo(function(){return!loadWishlistOnAppStartEnabled?false:isOnWishlist;},[isOnWishlist,loadWishlistOnAppStartEnabled]);var portalProps=useMemo(function(){return{productId:productId};},[productId]);return React.createElement(SurroundPortals,{portalName:PRODUCT_ITEM_FAVORITES_BUTTON,portalProps:portalProps},React.createElement("div",{className:classes.root,"data-test-id":"favorites"},React.createElement(FavoritesButton,{active:isFavorite,productId:productId,noShadow:true,removeWithRelatives:true})));};export default memo(ItemFavoritesButton);

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

@@ -0,0 +1 @@
+import React from'react';import{shallow}from'enzyme';import{combineReducers}from'redux';import{Provider}from'react-redux';import{createMockStore}from'@shopgate/pwa-common/store';import favorites from'@shopgate/pwa-common-commerce/favorites/reducers';import ItemFavoritesButton from"./index";jest.mock('@shopgate/engage/components');var store=createMockStore(combineReducers({favorites:favorites}));describe('<ItemFavoritesButton />',function(){it('should not render when its not a favorite',function(){var wrapper=shallow(React.createElement(Provider,{store:store},React.createElement(ItemFavoritesButton,{productId:"1234"})));expect(wrapper).toMatchSnapshot();});it('should render if its a favorite',function(){var wrapper=shallow(React.createElement(Provider,{store:store},React.createElement(ItemFavoritesButton,{productId:"1234",isFavorite:true})));expect(wrapper).toMatchSnapshot();});});

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

@@ -0,0 +1,5 @@
+import React,{useMemo,memo}from'react';import PropTypes from'prop-types';import{SurroundPortals}from'@shopgate/engage/components';import{PRODUCT_ITEM_IMAGE}from'@shopgate/engage/category/constants';import{getProductImageSettings,ProductImage}from'@shopgate/engage/product';var _getProductImageSetti=getProductImageSettings(),gridResolutions=_getProductImageSetti.ListImage;/**
+ * The item image component.
+ * @param {Object} props The component props.
+ * @returns {JSX.Element}
+ */var ItemImage=function ItemImage(_ref){var productId=_ref.productId,name=_ref.name,imageUrl=_ref.imageUrl;var portalProps=useMemo(function(){return{productId:productId};},[productId]);return React.createElement(SurroundPortals,{portalName:PRODUCT_ITEM_IMAGE,portalProps:portalProps},React.createElement(ProductImage,{alt:name,src:imageUrl,resolutions:gridResolutions,itemProp:"image"}));};ItemImage.defaultProps={imageUrl:null,name:null};export default memo(ItemImage);

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

@@ -0,0 +1 @@
+import React from'react';import{shallow}from'enzyme';import ItemImage from"./index";jest.mock('@shopgate/engage/components',function(){return{ProductImage:function ProductImage(){return null;}};});describe('<ItemImage />',function(){it('should render',function(){var wrapper=shallow(React.createElement(ItemImage,{productId:"1234",imageUrl:"http://www.google.com",name:"FooBar"}));expect(wrapper).toMatchSnapshot();});});