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

package/product/components/Availability/Availability.js

@@ -0,0 +1,6 @@
+import*as React from'react';import PropTypes from'prop-types';import classNames from'classnames';import{AVAILABILITY_STATE_OK,AVAILABILITY_STATE_WARNING,AVAILABILITY_STATE_ALERT}from'@shopgate/pwa-common-commerce/product/constants';import{SurroundPortals,PlaceholderLabel,Availability as AvailableText}from'@shopgate/engage/components';import{PRODUCT_AVAILABILITY}from'@shopgate/engage/product';import{hasNewServices}from'@shopgate/engage/core/helpers';import connect from"./Availability.connector";import{placeholder,availability as availabilityStyle}from"./Availability.style";/**
+ * The Availability component.
+ * @param {Object} props The component props.
+ * @return {JSX}
+ */function Availability(_ref){var availability=_ref.availability,fulfillmentMethods=_ref.fulfillmentMethods,fulfillmentSelection=_ref.fulfillmentSelection,className=_ref.className;// Render only when no fulfillment methods are available or when the given method exists
+if(hasNewServices()&&(!fulfillmentMethods||fulfillmentMethods.indexOf(fulfillmentSelection)!==-1)){return null;}var classes=classNames(placeholder,className?className.toString():null);return React.createElement(SurroundPortals,{portalName:PRODUCT_AVAILABILITY,portalProps:{availability:availability}},React.createElement(PlaceholderLabel,{className:classes,ready:availability!==null},availability&&React.createElement(AvailableText,{className:availabilityStyle,showWhenAvailable:true,text:availability.text||'',state:availability.state})));}Availability.defaultProps={availability:null,fulfillmentMethods:null,fulfillmentSelection:'',className:null};export default connect(React.memo(Availability));

package/product/components/Availability/Availability.style.js

@@ -0,0 +1 @@
+import{css}from'glamor';export var placeholder=css({height:16,width:'70%',marginTop:5,marginBottom:2}).toString();export var availability=css({fontSize:'0.875rem'}).toString();

package/product/components/Availability/index.js

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

package/product/components/Characteristics/Characteristic/components/Sheet/index.js

@@ -1,8 +1,20 @@
-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,{PureComponent}from'react';import PropTypes from'prop-types';import{SheetDrawer,SheetList}from'@shopgate/engage/components';import{VariantContext,ProductContext}from'@shopgate/engage/product';import{ViewContext}from'@shopgate/engage/components/View';import Item from"../SheetItem";import VariantAvailability from"../VariantAvailability";/**
+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 _objectDestructuringEmpty(obj){if(obj==null)throw new TypeError("Cannot destructure undefined");}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,{PureComponent,Fragment}from'react';import PropTypes from'prop-types';import{SheetDrawer,SheetList,Menu,ResponsiveContainer}from'@shopgate/engage/components';import{ThemeContext}from'@shopgate/engage/core/contexts';import{VariantContext,ProductContext}from'@shopgate/engage/product/contexts';import{VariantAvailability}from'@shopgate/engage/product/components';import{ViewContext}from'@shopgate/engage/components/View';import Item from"../SheetItem";/**
  * The CharacteristicSheet component.
- */var CharacteristicSheet=/*#__PURE__*/function(_PureComponent){_inherits(CharacteristicSheet,_PureComponent);var _super=_createSuper(CharacteristicSheet);function CharacteristicSheet(){var _this;_classCallCheck(this,CharacteristicSheet);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),"firstSelectableItemRef",/*#__PURE__*/React.createRef());_defineProperty(_assertThisInitialized(_this),"onDidOpen",function(){if(_this.firstSelectableItemRef.current){_this.firstSelectableItemRef.current.focus();}_this.props.setViewAriaHidden(true);});_defineProperty(_assertThisInitialized(_this),"onClose",function(e){_this.props.onClose(e);_this.props.setViewAriaHidden(false);});_defineProperty(_assertThisInitialized(_this),"handleItemClick",function(event,itemId){event.stopPropagation();_this.props.onSelect(itemId);});_defineProperty(_assertThisInitialized(_this),"renderAvailability",function(value){var selection=_extends({},_this.props.selection,_defineProperty({},_this.props.charId,value));return/*#__PURE__*/React.createElement(VariantAvailability,{characteristics:selection,productId:_this.props.productId});});return _this;}_createClass(CharacteristicSheet,[{key:"render",value:/**
+ */var CharacteristicSheet=/*#__PURE__*/function(_PureComponent){function CharacteristicSheet(){var _this2;_classCallCheck(this,CharacteristicSheet);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,CharacteristicSheet,[].concat(args));_defineProperty(_this2,"firstSelectableItemRef",React.createRef());/**
+   * Focuses the first selectable item and hides the view for screen readers.
+   */_defineProperty(_this2,"onDidOpen",function(){if(_this2.firstSelectableItemRef.current){_this2.firstSelectableItemRef.current.focus();}_this2.props.setViewAriaHidden(true);});/**
+   * Shows the view for screen readers.
+   * @param {Object} e The event payload.
+   */_defineProperty(_this2,"onClose",function(e){_this2.props.onClose(e);_this2.props.setViewAriaHidden(false);});/**
+   * @param {Object} event The event object.
+   * @param {string} itemId The id that was selected
+   */_defineProperty(_this2,"handleItemClick",function(event,itemId){event.stopPropagation();_this2.props.onSelect(itemId);});/**
+   * Renders the availability text inside the sheet item.
+   * @param {string} value The value that the sheet item represents.
+   * @return {React.Component|null}
+   */_defineProperty(_this2,"renderAvailability",function(value){var _this2$props=_this2.props,fulfillmentMethods=_this2$props.fulfillmentMethods,isFetching=_this2$props.isFetching;if(fulfillmentMethods||isFetching){return null;}var selection=_extends({},_this2.props.selection,_defineProperty({},_this2.props.charId,value));return React.createElement(VariantAvailability,{characteristics:selection,productId:_this2.props.productId});});return _this2;}_inherits(CharacteristicSheet,_PureComponent);return _createClass(CharacteristicSheet,[{key:"render",value:/**
    * @return {JSX}
-   */function render(){var _this2=this;var _this$props=this.props,items=_this$props.items,label=_this$props.label,open=_this$props.open,selectedValue=_this$props.selectedValue;var selectedIndex;if(selectedValue){selectedIndex=items.findIndex(function(item){return item.id===selectedValue;});}else{selectedIndex=items.findIndex(function(item){return item.selectable;});}return/*#__PURE__*/React.createElement(SheetDrawer,{title:label,isOpen:open,onClose:this.onClose,onDidOpen:this.onDidOpen},/*#__PURE__*/React.createElement(SheetList,{className:"theme__product__characteristic__sheet"},items.map(function(item,index){return/*#__PURE__*/React.createElement(Item,{item:item,key:item.id,onClick:_this2.handleItemClick,rightComponent:function rightComponent(){return _this2.renderAvailability(item.id);},selected:item.id===selectedValue,ref:index===selectedIndex?_this2.firstSelectableItemRef:null,characteristics:_extends({},_this2.props.selection,_defineProperty({},_this2.props.charId,item.id))});})));}}]);return CharacteristicSheet;}(PureComponent);/**
+   */function render(){var _this3=this;var _this$props=this.props,items=_this$props.items,label=_this$props.label,open=_this$props.open,selectedValue=_this$props.selectedValue,contextRef=_this$props.contextRef,onDidClose=_this$props.onDidClose;var selectedIndex;if(selectedValue){selectedIndex=items.findIndex(function(item){return item.id===selectedValue;});}else{selectedIndex=items.findIndex(function(item){return item.selectable;});}return React.createElement(Fragment,null,React.createElement(ResponsiveContainer,{appAlways:true,breakpoint:"xs"},React.createElement(SheetDrawer,{title:label,isOpen:open,onClose:this.onClose,onDidOpen:this.onDidOpen,onDidClose:onDidClose},React.createElement(SheetList,{className:"theme__product__characteristic__sheet"},items.map(function(item,index){return React.createElement(Item,{item:item,key:item.id,onClick:_this3.handleItemClick,rightComponent:function rightComponent(){return _this3.renderAvailability(item.id);},selected:item.id===selectedValue,ref:index===selectedIndex?_this3.firstSelectableItemRef:null,characteristics:_extends({},_this3.props.selection,_defineProperty({},_this3.props.charId,item.id))});})))),React.createElement(ResponsiveContainer,{webOnly:true,breakpoint:">xs"},React.createElement(ThemeContext.Consumer,null,function(_ref){var contextProps=_extends({},(_objectDestructuringEmpty(_ref),_ref));return React.createElement(Menu,{isOpen:open,onClose:_this3.onClose,contextRef:contextRef},React.createElement(ThemeContext.Provider,{value:contextProps},items.map(function(item,index){return React.createElement(Item,{key:item.id,item:item,onClick:_this3.handleItemClick,rightComponent:function rightComponent(){return _this3.renderAvailability(item.id);},selected:item.id===selectedValue,ref:index===selectedIndex?_this3.firstSelectableItemRef:null,characteristics:_extends({},_this3.props.selection,_defineProperty({},_this3.props.charId,item.id))});})));})));}}]);}(PureComponent);/**
  * @param {Object} props The original component props.
  * @returns {JSX}
- */_defineProperty(CharacteristicSheet,"defaultProps",{onClose:function onClose(){},onSelect:function onSelect(){},productId:null,selectedValue:null,selection:null});var SheetComponent=function SheetComponent(props){return/*#__PURE__*/React.createElement(ViewContext.Consumer,null,function(_ref){var setAriaHidden=_ref.setAriaHidden;return/*#__PURE__*/React.createElement(ProductContext.Consumer,null,function(_ref2){var productId=_ref2.productId;return/*#__PURE__*/React.createElement(VariantContext.Consumer,null,function(_ref3){var characteristics=_ref3.characteristics;return/*#__PURE__*/React.createElement(CharacteristicSheet,_extends({productId:productId,selection:characteristics,setViewAriaHidden:setAriaHidden},props));});});});};export default SheetComponent;
+ */_defineProperty(CharacteristicSheet,"defaultProps",{fulfillmentMethods:null,onClose:function onClose(){},onSelect:function onSelect(){},onDidClose:function onDidClose(){},productId:null,selectedValue:null,contextRef:null,selection:null,isFetching:false});var SheetComponent=function SheetComponent(props){return React.createElement(ViewContext.Consumer,null,function(_ref2){var setAriaHidden=_ref2.setAriaHidden;return React.createElement(ProductContext.Consumer,null,function(_ref3){var productId=_ref3.productId,fulfillmentMethods=_ref3.fulfillmentMethods,isFetching=_ref3.isFetching;return React.createElement(VariantContext.Consumer,null,function(_ref4){var characteristics=_ref4.characteristics;return React.createElement(CharacteristicSheet,_extends({productId:productId,selection:characteristics,setViewAriaHidden:setAriaHidden,fulfillmentMethods:fulfillmentMethods,isFetching:isFetching},props));});});});};export default SheetComponent;

package/product/components/Characteristics/Characteristic/components/SheetItem/index.js

@@ -1,5 +1,10 @@
-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,{PureComponent}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{withForwardedRef}from'@shopgate/engage/core';import{CharacteristicsButton}from'@shopgate/engage/back-in-stock/components';import styles from"./style";/**
+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,{PureComponent}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{withForwardedRef}from'@shopgate/engage/core/hocs';import{CharacteristicsButton}from'@shopgate/engage/back-in-stock/components';import styles from"./style";/**
  * The SheetItem component.
- */var SheetItem=/*#__PURE__*/function(_PureComponent){_inherits(SheetItem,_PureComponent);var _super=_createSuper(SheetItem);function SheetItem(){var _this;_classCallCheck(this,SheetItem);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),"getStyle",function(selectable){if(!selectable){return styles.buttonDisabled;}return styles.button;});_defineProperty(_assertThisInitialized(_this),"buildProps",function(){var _this$props=_this.props,item=_this$props.item,_onClick=_this$props.onClick,forwardedRef=_this$props.forwardedRef;return _extends({className:"".concat(_this.getStyle(item.selectable).toString()," theme__product__characteristic__option"),key:item.id,ref:forwardedRef,value:item.id,'aria-hidden':!item.selectable},item.selectable&&{onClick:function onClick(event){return _onClick(event,item.id);}});});return _this;}_createClass(SheetItem,[{key:"render",value:/**
+ */var SheetItem=/*#__PURE__*/function(_PureComponent){function SheetItem(){var _this2;_classCallCheck(this,SheetItem);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,SheetItem,[].concat(args));/**
+   * @param {boolean} selectable Whether or not the item can be selected.
+   * @returns {string}
+   */_defineProperty(_this2,"getStyle",function(selectable){if(!selectable){return styles.buttonDisabled;}return styles.button;});/**
+   * @returns {Object}
+   */_defineProperty(_this2,"buildProps",function(){var _this2$props=_this2.props,item=_this2$props.item,_onClick=_this2$props.onClick,forwardedRef=_this2$props.forwardedRef;return _extends({className:"".concat(_this2.getStyle(item.selectable).toString()," theme__product__characteristic__option"),key:item.id,ref:forwardedRef,value:item.id,'aria-hidden':!item.selectable},item.selectable&&{onClick:function onClick(event){return _onClick(event,item.id);}});});return _this2;}_inherits(SheetItem,_PureComponent);return _createClass(SheetItem,[{key:"render",value:/**
    * @returns {JSX}
-   */function render(){var _this$props2=this.props,item=_this$props2.item,Right=_this$props2.rightComponent,selected=_this$props2.selected,characteristics=_this$props2.characteristics;var buildProps=this.buildProps();return/*#__PURE__*/React.createElement("div",{className:classNames(styles.root,_defineProperty({},styles.rootSelected,selected))},/*#__PURE__*/React.createElement("button",_extends({},buildProps,{"data-test-id":item.label,"aria-selected":selected,role:"option",type:"button"}),/*#__PURE__*/React.createElement("div",{className:styles.mainRow},/*#__PURE__*/React.createElement("div",null,item.label),/*#__PURE__*/React.createElement("div",{className:styles.mainRowRight},item.selectable&&/*#__PURE__*/React.createElement(Right,null)))),/*#__PURE__*/React.createElement("div",{className:styles.bottomRow},item.selectable&&/*#__PURE__*/React.createElement(CharacteristicsButton,{characteristics:characteristics})));}}]);return SheetItem;}(PureComponent);_defineProperty(SheetItem,"defaultProps",{forwardedRef:null,onClick:function onClick(){},rightComponent:null,selected:false});export default withForwardedRef(SheetItem);
+   */function render(){var _this$props=this.props,item=_this$props.item,Right=_this$props.rightComponent,selected=_this$props.selected,characteristics=_this$props.characteristics;return React.createElement("div",{className:classNames(styles.root,_defineProperty({},styles.rootSelected,selected))},React.createElement("button",_extends({},this.buildProps(),{"data-test-id":item.label,"aria-selected":selected,role:"option",type:"button"}),React.createElement("div",{className:styles.mainRow},React.createElement("div",null,item.label),React.createElement("div",{className:styles.mainRowRight},item.selectable&&React.createElement(Right,null)))),React.createElement("div",{className:styles.bottomRow},item.selectable&&React.createElement(CharacteristicsButton,{characteristics:characteristics})));}}]);}(PureComponent);_defineProperty(SheetItem,"defaultProps",{forwardedRef:null,onClick:function onClick(){},rightComponent:null,selected:false});export default withForwardedRef(SheetItem);

package/product/components/Characteristics/Characteristic/components/SheetItem/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables;var button=css({outline:0,textAlign:'left',paddingLeft:0,paddingRight:0,width:'100%',display:'flex',justifyContent:'space-between',flexWrap:'wrap'});var buttonDisabled=css(button,{color:colors.shade4});var bgColor=colors.darkGray;var boxShadowOffset=variables.gap.bigger;var root=css({padding:'16px 0'});var rootSelected=css(root,{background:bgColor,boxShadow:"-".concat(boxShadowOffset,"px 0 0 ").concat(bgColor,", ").concat(boxShadowOffset,"px 0 0 ").concat(bgColor),paddingTop:17,paddingBottom:17,margin:'-1px 0'}).toString();var mainRow=css({display:'flex',flexWrap:'wrap',gap:'4px 8px',justifyContent:'space-between',width:'100%'}).toString();var mainRowRight=css({marginLeft:'auto'}).toString();var bottomRow=css({'&:not(:empty)':{marginTop:8,textAlign:'right'}}).toString();export default{root:root,rootSelected:rootSelected,button:button,buttonDisabled:buttonDisabled,mainRow:mainRow,mainRowRight:mainRowRight,bottomRow:bottomRow};
+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{themeConfig}from'@shopgate/pwa-common/helpers/config';import{responsiveMediaQuery}from'@shopgate/engage/styles';var colors=themeConfig.colors;var button=css({outline:0,textAlign:'left',paddingLeft:0,paddingRight:0,width:'100%',display:'flex',justifyContent:'space-between',flexWrap:'wrap',color:'var(--color-text-high-emphasis)'});var buttonDisabled=css(button,{color:colors.shade4});var root=css(_defineProperty({padding:'16px 0'},responsiveMediaQuery('>xs',{webOnly:true}),{padding:'8px 16px'}));var rootSelected=css(button,_defineProperty({background:"var(--color-background-accent, ".concat(colors.darkGray,")"),boxShadow:"-16px 0 0 var(--color-background-accent, ".concat(colors.darkGray,"), 16px 0 0 var(--color-background-accent, ").concat(colors.darkGray,")"),margin:'-1px 0',paddingTop:17,paddingBottom:17,fontWeight:500},responsiveMediaQuery('>xs',{webOnly:true}),{margin:0,paddingTop:8,paddingBottom:8,padding:'8px 16px',boxShadow:'none'}));var mainRow=css({display:'flex',flexWrap:'wrap',gap:'4px 8px',justifyContent:'space-between',width:'100%'}).toString();var mainRowRight=css({marginLeft:'auto'}).toString();var bottomRow=css({'&:not(:empty)':{textAlign:'right'}}).toString();export default{root:root,rootSelected:rootSelected,button:button,buttonDisabled:buttonDisabled,mainRow:mainRow,mainRowRight:mainRowRight,bottomRow:bottomRow};

package/product/components/Characteristics/Characteristic/index.js

@@ -1,10 +1,19 @@
-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,{PureComponent,Fragment}from'react';import PropTypes from'prop-types';import classNames from'classnames';import Transition from'react-transition-group/Transition';import Sheet from"./components/Sheet";import styles from"./style";import transition from"../transition";/**
+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,{PureComponent,Fragment}from'react';import PropTypes from'prop-types';import classNames from'classnames';import Transition from'react-transition-group/Transition';import{ResponsiveContainer,ArrowDropIcon}from'@shopgate/engage/components';import Sheet from"./components/Sheet";import styles from"./style";import transition from"../transition";/**
  * A single characteristic.
- */var Characteristic=/*#__PURE__*/function(_PureComponent){_inherits(Characteristic,_PureComponent);var _super=_createSuper(Characteristic);function Characteristic(){var _this;_classCallCheck(this,Characteristic);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),"state",{highlight:false,sheet:false});_defineProperty(_assertThisInitialized(_this),"getButtonLabel",function(defaultLabel){if(!_this.props.selected){return defaultLabel;}var value=_this.props.values.find(function(val){return val.id===_this.props.selected;});return value.label;});_defineProperty(_assertThisInitialized(_this),"handleButtonClick",function(event){event.preventDefault();if(_this.props.disabled){return;}_this.setState({sheet:true});});_defineProperty(_assertThisInitialized(_this),"handleItemSelection",function(valueId){_this.props.select({id:_this.props.id,value:valueId});_this.closeSheet();});_defineProperty(_assertThisInitialized(_this),"closeSheet",function(){_this.setState({sheet:false});if(_this.props.charRef&&_this.props.charRef.current){_this.props.charRef.current.focus();}});_defineProperty(_assertThisInitialized(_this),"removeHighlight",function(){_this.setState({highlight:false});});_defineProperty(_assertThisInitialized(_this),"transitionRenderer",function(state){var _this$context$i18n=_this.context.i18n(),__=_this$context$i18n.__;var _this$props=_this.props,disabled=_this$props.disabled,selected=_this$props.selected,charRef=_this$props.charRef,label=_this$props.label;var translatedLabel=__('product.pick_an_attribute',[label]);var buttonLabel=_this.getButtonLabel(translatedLabel);var classes=classNames(styles.button,_defineProperty({},styles.buttonDisabled,disabled),'theme__product__characteristic');return/*#__PURE__*/React.createElement("div",{role:"button","aria-disabled":disabled,"aria-haspopup":!disabled,tabIndex:0,className:classes,onClick:_this.handleButtonClick,onKeyDown:function onKeyDown(){},ref:charRef,style:transition[state],"data-test-id":label},selected&&/*#__PURE__*/React.createElement("div",{className:"".concat(styles.label," theme__product__characteristic__label")},label),/*#__PURE__*/React.createElement("div",_extends({className:"".concat(styles.selection," theme__product__characteristic__selection")},selected&&{'data-selected':true}),buttonLabel));});return _this;}_createClass(Characteristic,[{key:"UNSAFE_componentWillReceiveProps",value:/**
-   * @param {Object} nextProps The next component props.
-   */function UNSAFE_componentWillReceiveProps(nextProps){this.setState({highlight:nextProps.highlight});}/**
+ */var Characteristic=/*#__PURE__*/function(_PureComponent){function Characteristic(){var _this2;_classCallCheck(this,Characteristic);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,Characteristic,[].concat(args));_defineProperty(_this2,"state",{highlight:false,sheet:false});/**
    * @param {string} defaultLabel The default button label.
    * @return {string}
-   */},{key:"render",value:/**
+   */_defineProperty(_this2,"getButtonLabel",function(defaultLabel){if(!_this2.props.selected){return defaultLabel;}var value=_this2.props.values.find(function(val){return val.id===_this2.props.selected;});return value.label;});/**
+   * @param {Object} event The event object.
+   */_defineProperty(_this2,"handleButtonClick",function(event){event.preventDefault();if(_this2.props.disabled){return;}_this2.setState({sheet:true});});/**
+   * @param {string} valueId The ID of the selected value.
+   */_defineProperty(_this2,"handleItemSelection",function(valueId){_this2.props.select({id:_this2.props.id,value:valueId});_this2.closeSheet();});_defineProperty(_this2,"closeSheet",function(){_this2.setState({sheet:false});});_defineProperty(_this2,"sheetDidClose",function(){if(_this2.props.charRef&&_this2.props.charRef.current){// Focus the element that triggered the CharacteristicsSheet after it closes
+_this2.props.charRef.current.focus();}});_defineProperty(_this2,"removeHighlight",function(){_this2.setState({highlight:false});});/**
+   * Renders the transition contents.
+   * @param {string} state The current transition state.
+   * @returns {JSX}
+   */_defineProperty(_this2,"transitionRenderer",function(state){var _this2$context$i18n=_this2.context.i18n(),__=_this2$context$i18n.__;var _this2$props=_this2.props,disabled=_this2$props.disabled,selected=_this2$props.selected,charRef=_this2$props.charRef,label=_this2$props.label;var translatedLabel=__('product.pick_an_attribute',[label]);var buttonLabel=_this2.getButtonLabel(translatedLabel);var classes=classNames(styles.button,_defineProperty({},styles.buttonDisabled,disabled),'theme__product__characteristic');return React.createElement("div",{role:"button","aria-disabled":disabled,"aria-haspopup":!disabled,tabIndex:0,className:classes,onClick:_this2.handleButtonClick,onKeyDown:function onKeyDown(){},ref:charRef,style:transition[state],"data-test-id":label},selected&&React.createElement("div",{className:"".concat(styles.label," theme__product__characteristic__label")},label),React.createElement("div",_extends({className:"".concat(styles.selection," theme__product__characteristic__selection")},selected&&{'data-selected':true}),buttonLabel),React.createElement(ResponsiveContainer,{breakpoint:">xs",webOnly:true},React.createElement("div",{className:styles.arrow},React.createElement(ArrowDropIcon,null))));});return _this2;}_inherits(Characteristic,_PureComponent);return _createClass(Characteristic,[{key:"UNSAFE_componentWillReceiveProps",value:/**
+   * @param {Object} nextProps The next component props.
+   */function UNSAFE_componentWillReceiveProps(nextProps){this.setState({highlight:nextProps.highlight});}},{key:"render",value:/**
    * @return {JSX}
-   */function render(){var _this$context$i18n2=this.context.i18n(),__=_this$context$i18n2.__;var _this$props2=this.props,id=_this$props2.id,selected=_this$props2.selected,values=_this$props2.values;var displayLabel=this.props.label;var translatedLabel=__('product.pick_an_attribute',[displayLabel]);return/*#__PURE__*/React.createElement(Fragment,null,/*#__PURE__*/React.createElement(Transition,{"in":this.state.highlight,timeout:500,onEntered:this.removeHighlight},this.transitionRenderer),/*#__PURE__*/React.createElement(Sheet,{charId:id,items:values,label:translatedLabel,onClose:this.closeSheet,onSelect:this.handleItemSelection,open:this.state.sheet,selectedValue:selected}));}}]);return Characteristic;}(PureComponent);_defineProperty(Characteristic,"contextTypes",{i18n:PropTypes.func});_defineProperty(Characteristic,"defaultProps",{selected:null});export default Characteristic;
+   */function render(){var _this$context$i18n=this.context.i18n(),__=_this$context$i18n.__;var _this$props=this.props,id=_this$props.id,selected=_this$props.selected,values=_this$props.values,charRef=_this$props.charRef;var displayLabel=this.props.label;var translatedLabel=__('product.pick_an_attribute',[displayLabel]);return React.createElement(Fragment,null,React.createElement(Transition,{"in":this.state.highlight,timeout:500,onEntered:this.removeHighlight},this.transitionRenderer),React.createElement(Sheet,{charId:id,contextRef:charRef,items:values,label:translatedLabel,onClose:this.closeSheet,onDidClose:this.sheetDidClose,onSelect:this.handleItemSelection,open:this.state.sheet,selectedValue:selected}));}}]);}(PureComponent);_defineProperty(Characteristic,"contextTypes",{i18n:PropTypes.func});_defineProperty(Characteristic,"defaultProps",{selected:null});export default Characteristic;

package/product/components/Characteristics/Characteristic/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';var button=css({background:themeColors.overlay,display:'flex',flexDirection:'column',justifyContent:'center',minHeight:56,outline:0,padding:'12px 16px',marginBottom:8,transition:'background 250ms ease-in, color 250ms ease-in'}).toString();var buttonDisabled=css({color:themeColors.shade4}).toString();var label=css({fontSize:12,marginTop:-2,marginBottom:4}).toString();var selection=css({fontWeight:500,lineHeight:1.125}).toString();export default{button:button,buttonDisabled:buttonDisabled,label:label,selection:selection};
+import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';var button=css({background:"var(--color-background-accent, ".concat(themeColors.overlay,")"),color:'var(--color-text-high-emphasis)',position:'relative',cursor:'pointer',display:'flex',flexDirection:'column',justifyContent:'center',minHeight:56,outline:0,padding:'12px 16px',marginBottom:8,transition:'background 250ms ease-in, color 250ms ease-in'}).toString();var buttonDisabled=css({color:"".concat(themeColors.shade4," !important")}).toString();var label=css({fontSize:12,marginTop:-2,marginBottom:4}).toString();var selection=css({fontWeight:500,lineHeight:1.125}).toString();var arrow=css({position:'absolute',right:32,fontSize:20}).toString();export default{arrow:arrow,button:button,buttonDisabled:buttonDisabled,label:label,selection:selection};

package/product/components/Characteristics/Swatch/index.js

@@ -1,10 +1,12 @@
-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,Fragment}from'react';import PropTypes from'prop-types';import classNames from'classnames';import Transition from'react-transition-group/Transition';import{VariantSwatch}from'@shopgate/engage/product';import styles from"./style";import transition from"../transition";/**
+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,Fragment}from'react';import PropTypes from'prop-types';import classNames from'classnames';import Transition from'react-transition-group/Transition';import{VariantSwatch}from'@shopgate/engage/product/components';import styles from"./style";import transition from"../transition";/**
  * A single characteristic swatch type.
- */var Swatch=/*#__PURE__*/function(_PureComponent){_inherits(Swatch,_PureComponent);var _super=_createSuper(Swatch);function Swatch(){var _this;_classCallCheck(this,Swatch);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),"state",{highlight:false});_defineProperty(_assertThisInitialized(_this),"getLabel",function(charLabel){if(!_this.props.selected){return charLabel;}var value=_this.props.values.find(function(val){return val.id===_this.props.selected;});return"".concat(charLabel," - ").concat(value.label);});_defineProperty(_assertThisInitialized(_this),"handleItemSelection",function(valueId){_this.props.select({id:_this.props.id,value:valueId});});_defineProperty(_assertThisInitialized(_this),"removeHighlight",function(){_this.setState({highlight:false});});return _this;}_createClass(Swatch,[{key:"UNSAFE_componentWillReceiveProps",value:/**
-   * @param {Object} nextProps The next component props.
-   */function UNSAFE_componentWillReceiveProps(nextProps){this.setState({highlight:nextProps.highlight});}/**
+ */var Swatch=/*#__PURE__*/function(_PureComponent){function Swatch(){var _this2;_classCallCheck(this,Swatch);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,Swatch,[].concat(args));_defineProperty(_this2,"state",{highlight:false});/**
    * @param {string} charLabel The default button label.
    * @return {string}
-   */},{key:"render",value:/**
+   */_defineProperty(_this2,"getLabel",function(charLabel){if(!_this2.props.selected){return charLabel;}var value=_this2.props.values.find(function(val){return val.id===_this2.props.selected;});return"".concat(charLabel," - ").concat(value.label);});/**
+   * @param {string} valueId The ID of the selected value.
+   */_defineProperty(_this2,"handleItemSelection",function(valueId){_this2.props.select({id:_this2.props.id,value:valueId});});_defineProperty(_this2,"removeHighlight",function(){_this2.setState({highlight:false});});return _this2;}_inherits(Swatch,_PureComponent);return _createClass(Swatch,[{key:"UNSAFE_componentWillReceiveProps",value:/**
+   * @param {Object} nextProps The next component props.
+   */function UNSAFE_componentWillReceiveProps(nextProps){this.setState({highlight:nextProps.highlight});}},{key:"render",value:/**
    * @return {JSX}
-   */function render(){var _this2=this;var _this$props=this.props,id=_this$props.id,disabled=_this$props.disabled,charRef=_this$props.charRef,label=_this$props.label,values=_this$props.values;var swatch={id:id,label:label,values:values};return/*#__PURE__*/React.createElement(Fragment,null,/*#__PURE__*/React.createElement(Transition,{"in":this.state.highlight,timeout:500,onEntered:this.removeHighlight},function(state){return/*#__PURE__*/React.createElement("div",{"aria-hidden":true,className:classNames(styles.label,_defineProperty({},styles.labelDisabled,disabled)),ref:charRef,style:transition[state],"data-test-id":label},_this2.getLabel(label));}),/*#__PURE__*/React.createElement("div",{className:styles.items},/*#__PURE__*/React.createElement(VariantSwatch,{swatch:swatch,onClick:this.handleItemSelection})));}}]);return Swatch;}(PureComponent);_defineProperty(Swatch,"defaultProps",{selected:null});export default Swatch;
+   */function render(){var _this3=this;var _this$props=this.props,id=_this$props.id,disabled=_this$props.disabled,charRef=_this$props.charRef,label=_this$props.label,values=_this$props.values;var swatch={id:id,label:label,values:values};return React.createElement(Fragment,null,React.createElement(Transition,{"in":this.state.highlight,timeout:500,onEntered:this.removeHighlight},function(state){return React.createElement("div",{"aria-hidden":true,className:classNames(styles.label,_defineProperty({},styles.labelDisabled,disabled)),ref:charRef,style:transition[state],"data-test-id":label},_this3.getLabel(label));}),React.createElement("div",{className:styles.items},React.createElement(VariantSwatch,{swatch:swatch,onClick:this.handleItemSelection})));}}]);}(PureComponent);_defineProperty(Swatch,"defaultProps",{selected:null});export default Swatch;

package/product/components/Characteristics/index.js

@@ -1,5 +1,12 @@
-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,Fragment}from'react';import PropTypes from'prop-types';import{isBeta}from'@shopgate/engage/core';import Portal from'@shopgate/pwa-common/components/Portal';import{PRODUCT_VARIANT_SELECT,PRODUCT_VARIANT_SELECT_AFTER,PRODUCT_VARIANT_SELECT_BEFORE}from'@shopgate/pwa-common-commerce/product/constants/Portals';import{ProductCharacteristics,ProductContext}from'@shopgate/engage/product';import Characteristic from"./Characteristic";import Swatch from"./Swatch";/**
+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,Fragment}from'react';import PropTypes from'prop-types';import{isBeta}from'@shopgate/engage/core';import{Portal}from'@shopgate/engage/components';import{PRODUCT_VARIANT_SELECT,PRODUCT_VARIANT_SELECT_AFTER,PRODUCT_VARIANT_SELECT_BEFORE}from'@shopgate/engage/product/constants';import{ProductCharacteristics}from'@shopgate/engage/product/components';import{ProductContext}from'@shopgate/engage/product/contexts';import Characteristic from"./Characteristic";import Swatch from"./Swatch";/**
  * The Characteristics component.
- */var Characteristics=/*#__PURE__*/function(_PureComponent){_inherits(Characteristics,_PureComponent);var _super=_createSuper(Characteristics);function Characteristics(){var _this;_classCallCheck(this,Characteristics);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),"consumeRenderer",function(_ref){var conditioner=_ref.conditioner,setCharacteristics=_ref.setCharacteristics,characteristics=_ref.characteristics;var _this$props=_this.props,productId=_this$props.productId,variantId=_this$props.variantId;return/*#__PURE__*/React.createElement(ProductCharacteristics,{productId:productId,variantId:variantId,render:_this.renderer,conditioner:conditioner,finishTimeout:200,setCharacteristics:setCharacteristics,characteristics:characteristics});});_defineProperty(_assertThisInitialized(_this),"renderer",function(props){if(isBeta()&&!!props.swatch){return/*#__PURE__*/React.createElement(Swatch,props);}return/*#__PURE__*/React.createElement(Characteristic,props);});return _this;}_createClass(Characteristics,[{key:"render",value:/**
+ */var Characteristics=/*#__PURE__*/function(_PureComponent){function Characteristics(){var _this2;_classCallCheck(this,Characteristics);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,Characteristics,[].concat(args));/**
+   * @param {Object} props The consumer props.
    * @returns {JSX}
-   */function render(){return/*#__PURE__*/React.createElement(Fragment,null,/*#__PURE__*/React.createElement(Portal,{name:PRODUCT_VARIANT_SELECT_BEFORE}),/*#__PURE__*/React.createElement(Portal,{name:PRODUCT_VARIANT_SELECT},/*#__PURE__*/React.createElement(ProductContext.Consumer,null,this.consumeRenderer)),/*#__PURE__*/React.createElement(Portal,{name:PRODUCT_VARIANT_SELECT_AFTER}));}}]);return Characteristics;}(PureComponent);_defineProperty(Characteristics,"defaultProps",{productId:null,variantId:null});Characteristics.defaultProps={productId:null,variantId:null};export default Characteristics;
+   */_defineProperty(_this2,"consumeRenderer",function(_ref){var conditioner=_ref.conditioner,setCharacteristics=_ref.setCharacteristics,characteristics=_ref.characteristics;var _this2$props=_this2.props,productId=_this2$props.productId,variantId=_this2$props.variantId;return React.createElement(ProductCharacteristics,{productId:productId,variantId:variantId,render:_this2.renderer,conditioner:conditioner,finishTimeout:200,setCharacteristics:setCharacteristics,characteristics:characteristics});});/**
+   * @see ProductCharacteristics.render
+   * @param {Object} props The renderer props.
+   * @returns {JSX}
+   */_defineProperty(_this2,"renderer",function(props){if(isBeta()&&!!props.swatch){return React.createElement(Swatch,props);}return React.createElement(Characteristic,props);});return _this2;}_inherits(Characteristics,_PureComponent);return _createClass(Characteristics,[{key:"render",value:/**
+   * @returns {JSX}
+   */function render(){return React.createElement(Fragment,null,React.createElement(Portal,{name:PRODUCT_VARIANT_SELECT_BEFORE}),React.createElement(Portal,{name:PRODUCT_VARIANT_SELECT},React.createElement(ProductContext.Consumer,null,this.consumeRenderer)),React.createElement(Portal,{name:PRODUCT_VARIANT_SELECT_AFTER}));}}]);}(PureComponent);_defineProperty(Characteristics,"defaultProps",{productId:null,variantId:null});Characteristics.defaultProps={productId:null,variantId:null};export default Characteristics;

package/product/components/Characteristics/transition.js

@@ -1 +1 @@
-import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;export default{entering:{background:colors.primary,color:colors.primaryContrast},entered:{background:colors.primary,color:colors.primaryContrast}};
+import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;export default{entering:{background:"var(--color-primary, ".concat(colors.primary,")"),color:"var(--color-primary-contrast, ".concat(colors.primaryContrast,")")},entered:{background:"var(--color-primary, ".concat(colors.primary,")"),color:"var(--color-primary-contrast, ".concat(colors.primaryContrast,")")}};

package/product/components/Description/index.js

@@ -1,8 +1,7 @@
-import React from'react';import PropTypes from'prop-types';import{SurroundPortals,PlaceholderParagraph,HtmlSanitizer,I18n}from'@shopgate/engage/components';import{PRODUCT_DESCRIPTION}from'@shopgate/engage/product';import{container,title,placeholder,content}from"./style";import connect from"./connector";/**
- * @param {Object} props The component props.
- * @returns {JSX}
- */var Content=function Content(_ref){var html=_ref.html,navigate=_ref.navigate;if(html===''){return null;}return/*#__PURE__*/React.createElement("div",{className:"".concat(container," engage__product__description")},/*#__PURE__*/React.createElement("div",{"aria-hidden":true,className:title},/*#__PURE__*/React.createElement(I18n.Text,{string:"product.description_heading"})),/*#__PURE__*/React.createElement(PlaceholderParagraph,{className:placeholder,ready:!!html},/*#__PURE__*/React.createElement("div",{className:content,"data-test-id":"description"},/*#__PURE__*/React.createElement(HtmlSanitizer,{settings:{html:html,handleClick:navigate}},html))));};Content.defaultProps={html:null,navigate:function navigate(){}};/**
+var _excluded=["html","navigate"];function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React from'react';import PropTypes from'prop-types';import{SurroundPortals,PlaceholderParagraph,HtmlSanitizer,I18n}from'@shopgate/engage/components';import{PRODUCT_DESCRIPTION}from'@shopgate/engage/product';import classNames from'classnames';import{container,title,placeholder,content}from"./style";import connect from"./connector";/**
  * The product description.
  * @param {Object} props The component props.
- * @returns {JSX}
- */function Description(props){return/*#__PURE__*/React.createElement(SurroundPortals,{portalName:PRODUCT_DESCRIPTION,portalProps:props},/*#__PURE__*/React.createElement(Content,props));}Description.defaultProps={html:null,navigate:function navigate(){}};export default connect(Description);
+ * @param {string} props.html html describing the product
+ * @param {Function} props.navigate where to navigate on click
+ * @returns {JSX.Element}
+ */function Description(_ref){var html=_ref.html,navigate=_ref.navigate,props=_objectWithoutProperties(_ref,_excluded);return React.createElement(SurroundPortals,{portalName:PRODUCT_DESCRIPTION,portalProps:_extends({html:html,navigate:navigate},props)},html!==''&&React.createElement("div",{className:"".concat(container," engage__product__description")},React.createElement("div",{className:classNames(title,'theme__description_heading')},React.createElement(I18n.Text,{string:"product.description_heading"})),React.createElement(PlaceholderParagraph,{className:placeholder,ready:!!html},React.createElement("div",{className:content,"data-test-id":"description"},React.createElement(HtmlSanitizer,{settings:{html:html,handleClick:navigate}},html)))));}Description.defaultProps={html:null,navigate:function navigate(){}};export default connect(Description);

package/product/components/Description/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;export var container=css({fontSize:'0.875rem',padding:'0.8125rem 1rem 1rem'});export var title=css({fontSize:'1rem',fontWeight:500,marginBottom:'0.5rem'});export var content=css({lineHeight:1.7,overflow:'hidden',wordBreak:['break-all','break-word'],hyphens:'auto',' ul':{listStyle:'disc'},' ol':{listStyle:'decimal'},' ul, ol':{margin:'.75em 0',paddingLeft:'1.2em'},' a':{color:colors.primary,margin:'-.35em',padding:'.35em',position:'relative'}});export var placeholder=css({height:'0.875rem'}).toString();
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;export var container=css({fontSize:'0.875rem',padding:'0.8125rem 1rem 1rem'});export var title=css({fontSize:'1rem',fontWeight:500,marginBottom:'0.5rem',color:'var(--color-text-high-emphasis)'});export var content=css({lineHeight:1.7,overflow:'hidden',wordBreak:['break-all','break-word'],color:'var(--color-text-high-emphasis)',hyphens:'auto',' ul':{listStyle:'disc'},' ol':{listStyle:'decimal'},' ul, ol':{margin:'.75em 0',paddingLeft:'1.2em'},' a':{color:"var(--color-primary, ".concat(colors.primary,")"),margin:'-.35em',padding:'.35em',position:'relative'}});export var placeholder=css({height:'0.875rem'}).toString();

package/product/components/EffectivityDates/helpers.js

@@ -1,15 +1,15 @@
-import{getThemeSettings,isBeta,isAfter,isBefore,addDuration}from'@shopgate/engage/core';import{ALWAYS,NEVER}from"./constants";/**
- * Biuld params to fetch category products
+import{isBeta,isAfter,isBefore,addDuration}from'@shopgate/engage/core/helpers';import{getThemeSettings}from'@shopgate/engage/core/config';import{ALWAYS,NEVER}from"./constants";/**
+ * Build params to fetch category products
  * @returns {Object|{showScheduled: string}}
- */export var buildShowScheduledParams=function buildShowScheduledParams(){if(!isBeta()){return{};}var cachedTime=null;var _ref=getThemeSettings('product')||{},_ref$effectivityDates=_ref.effectivityDates;_ref$effectivityDates=_ref$effectivityDates===void 0?{}:_ref$effectivityDates;var showScheduled=_ref$effectivityDates.showScheduled;if(showScheduled===ALWAYS){showScheduled='P1Y';}else if(showScheduled===NEVER){showScheduled='PT0S';cachedTime=60000;// 1 minute min effective precision
+ */export var buildShowScheduledParams=function buildShowScheduledParams(){if(!isBeta()){return{};}var cachedTime=null;var _ref=getThemeSettings('product')||{},_ref$effectivityDates=_ref.effectivityDates,_ref$effectivityDates2=_ref$effectivityDates===void 0?{}:_ref$effectivityDates,showScheduled=_ref$effectivityDates2.showScheduled;if(showScheduled===ALWAYS){showScheduled='P1Y';}else if(showScheduled===NEVER){showScheduled='PT0S';cachedTime=60000;// 1 minute min effective precision
 }return{cachedTime:cachedTime,params:{showScheduled:showScheduled}};};/**
  * Decide if startDate hint should be shown
  * @param {Date} startDate product.startDate
  * @param {Object} [settings=null] settings
  * @returns {boolean}
- */export var showScheduledLabel=function showScheduledLabel(startDate){var settings=arguments.length>1&&arguments[1]!==undefined?arguments[1]:null;if(!startDate||!startDate.getDate()){return false;}var now=new Date();if(isBefore(startDate,now)){return false;}var _ref2=settings||{},_ref2$scheduledProduc=_ref2.scheduledProducts;_ref2$scheduledProduc=_ref2$scheduledProduc===void 0?{}:_ref2$scheduledProduc;var _ref2$scheduledProduc2=_ref2$scheduledProduc.showLabels,showLabels=_ref2$scheduledProduc2===void 0?ALWAYS:_ref2$scheduledProduc2;if(showLabels===NEVER){return false;}if(showLabels===ALWAYS){return true;}var cloned=new Date(startDate.getTime());addDuration(cloned,"-".concat(showLabels));return isAfter(now,cloned);};/**
+ */export var showScheduledLabel=function showScheduledLabel(startDate){var settings=arguments.length>1&&arguments[1]!==undefined?arguments[1]:null;if(!startDate||!startDate.getDate()){return false;}var now=new Date();if(isBefore(startDate,now)){return false;}var _ref2=settings||{},_ref2$scheduledProduc=_ref2.scheduledProducts,_ref2$scheduledProduc2=_ref2$scheduledProduc===void 0?{}:_ref2$scheduledProduc,_ref2$scheduledProduc3=_ref2$scheduledProduc2.showLabels,showLabels=_ref2$scheduledProduc3===void 0?ALWAYS:_ref2$scheduledProduc3;if(showLabels===NEVER){return false;}if(showLabels===ALWAYS){return true;}var cloned=new Date(startDate.getTime());addDuration(cloned,"-".concat(showLabels));return isAfter(now,cloned);};/**
  * Decide if endDate hint should be shown
  * @param {Date} endDate product.endDate
  * @param {Object} [settings=null] settings default global settings
  * @returns {boolean}
- */export var showExpiringLabel=function showExpiringLabel(endDate,settings){if(!endDate||!endDate.getDate()){return false;}var _ref3=settings||{},_ref3$expiringProduct=_ref3.expiringProducts;_ref3$expiringProduct=_ref3$expiringProduct===void 0?{}:_ref3$expiringProduct;var _ref3$expiringProduct2=_ref3$expiringProduct.showLabels,showLabels=_ref3$expiringProduct2===void 0?ALWAYS:_ref3$expiringProduct2;if(showLabels===NEVER){return false;}if(showLabels===ALWAYS){return true;}var now=new Date();var cloned=new Date(endDate.getTime());addDuration(cloned,"-".concat(showLabels));return isAfter(now,cloned);};
+ */export var showExpiringLabel=function showExpiringLabel(endDate,settings){if(!endDate||!endDate.getDate()){return false;}var _ref3=settings||{},_ref3$expiringProduct=_ref3.expiringProducts,_ref3$expiringProduct2=_ref3$expiringProduct===void 0?{}:_ref3$expiringProduct,_ref3$expiringProduct3=_ref3$expiringProduct2.showLabels,showLabels=_ref3$expiringProduct3===void 0?ALWAYS:_ref3$expiringProduct3;if(showLabels===NEVER){return false;}if(showLabels===ALWAYS){return true;}var now=new Date();var cloned=new Date(endDate.getTime());addDuration(cloned,"-".concat(showLabels));return isAfter(now,cloned);};

package/product/components/EffectivityDates/index.js

@@ -1,4 +1,4 @@
-import React,{Fragment}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{css}from'glamor';import{isBeta,useWidgetSettings,useWidgetStyles}from'@shopgate/engage/core';import{I18n,TimeBoundary,SurroundPortals}from'@shopgate/engage/components';import{PRODUCT_EFFECTIVITY_DATES}from'@shopgate/pwa-common-commerce/product/constants/Portals';import{showExpiringLabel,showScheduledLabel}from"./helpers";import{hint}from"./style";import connect from"./connector";/**
+import React,{Fragment}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{css}from'glamor';import{isBeta,useWidgetSettings,useWidgetStyles}from'@shopgate/engage/core';import{I18n,TimeBoundary,SurroundPortals}from'@shopgate/engage/components';import{PRODUCT_EFFECTIVITY_DATES}from'@shopgate/pwa-common-commerce/product/constants/Portals';import{showExpiringLabel,showScheduledLabel}from"./helpers";import{hint,notAvailable}from"./style";import connect from"./connector";/**
  * The Product Effectivity Dates component.
  * @return {JSX}
- */var EffectivityDates=function EffectivityDates(_ref){var dates=_ref.dates,children=_ref.children,productNotAvailable=_ref.productNotAvailable,productId=_ref.productId;if(!isBeta()||!dates){return children;}var settings=useWidgetSettings('@shopgate/engage/product/EffectivityDates');var styles=useWidgetStyles('@shopgate/engage/product/EffectivityDates');var startDate=new Date(dates.startDate);var endDate=new Date(dates.endDate);var hintAddClass=styles&&styles.hint?css(styles.hint).toString():null;var hintClass=classNames(hint,hintAddClass);return/*#__PURE__*/React.createElement(SurroundPortals,{portalName:PRODUCT_EFFECTIVITY_DATES,portalProps:{dates:dates,productNotAvailable:productNotAvailable,productId:productId}},/*#__PURE__*/React.createElement(TimeBoundary,{start:startDate,end:endDate},function(_ref2){var before=_ref2.before,between=_ref2.between,after=_ref2.after;if(before){return showScheduledLabel(startDate,settings)?/*#__PURE__*/React.createElement(I18n.Text,{string:"product.available.at",params:{startDate:startDate},className:hintClass}):children;}if(between){return/*#__PURE__*/React.createElement(Fragment,null,children,showExpiringLabel(endDate,settings)&&/*#__PURE__*/React.createElement(I18n.Text,{string:"product.available.until",params:{endDate:endDate},className:hintClass}));}if(after){productNotAvailable();return showExpiringLabel(endDate,settings)?/*#__PURE__*/React.createElement(I18n.Text,{string:"product.available.not",className:hintClass}):children;}return children;}));};EffectivityDates.defaultProps={children:null,dates:null,productId:null};export default connect(EffectivityDates);
+ */var EffectivityDates=function EffectivityDates(_ref){var dates=_ref.dates,children=_ref.children,productNotAvailable=_ref.productNotAvailable,productId=_ref.productId;if(!isBeta()||!dates){return children;}var settings=useWidgetSettings('@shopgate/engage/product/EffectivityDates');var styles=useWidgetStyles('@shopgate/engage/product/EffectivityDates');var startDate=dates.startDate?new Date(dates.startDate):null;var endDate=dates.endDate?new Date(dates.endDate):null;var hintAddClass=styles&&styles.hint?css(styles.hint).toString():null;return React.createElement(SurroundPortals,{portalName:PRODUCT_EFFECTIVITY_DATES,portalProps:{dates:dates,productNotAvailable:productNotAvailable,productId:productId}},React.createElement(TimeBoundary,{start:startDate,end:endDate},function(_ref2){var before=_ref2.before,between=_ref2.between,after=_ref2.after;if(before){return showScheduledLabel(startDate,settings)?React.createElement(I18n.Text,{string:"product.available.at",params:{startDate:startDate},className:classNames(hint,hintAddClass)}):children;}if(between){return React.createElement(Fragment,null,children,showExpiringLabel(endDate,settings)&&React.createElement(I18n.Text,{string:"product.available.until",params:{endDate:endDate},className:classNames(hint,hintAddClass)}));}if(after){productNotAvailable();return showExpiringLabel(endDate,settings)?React.createElement(I18n.Text,{string:"product.available.not",className:classNames(hint,hintAddClass,notAvailable)}):children;}return children;}));};EffectivityDates.defaultProps={children:null,dates:{startDate:null,endDate:null},productId:null};export default connect(EffectivityDates);

package/product/components/EffectivityDates/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';export var hint=css({color:themeConfig.colors.success,fontSize:'0.75rem'}).toString();
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';export var hint=css({color:"var(--color-state-ok, ".concat(themeConfig.colors.success,")"),fontSize:'0.75rem'}).toString();export var notAvailable=css({color:"var(--color-state-alert, ".concat(themeConfig.colors.error,")"),fontSize:'0.75rem'}).toString();

package/product/components/Header/PriceStriked/index.js

@@ -1,8 +1,5 @@
-import React,{Fragment}from'react';import PropTypes from'prop-types';import Portal from'@shopgate/pwa-common/components/Portal';import{PRODUCT_PRICE_STRIKED,PRODUCT_PRICE_STRIKED_AFTER,PRODUCT_PRICE_STRIKED_BEFORE}from'@shopgate/pwa-common-commerce/product/constants/Portals';import{withPriceCalculation}from'@shopgate/engage/product';import I18n from'@shopgate/pwa-common/components/I18n';import PlaceholderLabel from'@shopgate/pwa-ui-shared/PlaceholderLabel';import StrikePrice from'@shopgate/pwa-ui-shared/PriceStriked';import{useWidgetSettings}from'@shopgate/engage/core/hooks/useWidgetSettings';import connect from"./connector";import styles from"./style";/**
- * @param {Object} props The component props.
- * @return {JSX}
- */var Content=function Content(_ref){var price=_ref.price;var _useWidgetSettings=useWidgetSettings('@shopgate/engage/product/components/Header/PriceStriked'),_useWidgetSettings$ms=_useWidgetSettings.msrpLabel,msrpLabel=_useWidgetSettings$ms===void 0?'price.msrp':_useWidgetSettings$ms,unitPriceStrikedLabel=_useWidgetSettings.unitPriceStrikedLabel;return/*#__PURE__*/React.createElement(PlaceholderLabel,{className:styles.placeholder,ready:price!==null},price&&price.msrp>0&&price.unitPrice!==price.msrp&&/*#__PURE__*/React.createElement(Fragment,null,!!msrpLabel&&/*#__PURE__*/React.createElement(I18n.Text,{string:msrpLabel,className:styles.msrp}),/*#__PURE__*/React.createElement(StrikePrice,{className:styles.msrpStriked,value:price.msrp,currency:price.currency})),price&&!price.msrp&&price.unitPriceStriked>0&&/*#__PURE__*/React.createElement(Fragment,null,!!unitPriceStrikedLabel&&/*#__PURE__*/React.createElement(I18n.Text,{string:unitPriceStrikedLabel,className:styles.msrp}),/*#__PURE__*/React.createElement(StrikePrice,{value:price.unitPriceStriked,currency:price.currency,className:unitPriceStrikedLabel?styles.msrpStriked:''})));};/**
+import React,{Fragment}from'react';import PropTypes from'prop-types';import{Portal,I18n,PlaceholderLabel,PriceStriked as StrikePrice}from'@shopgate/engage/components';import{PRODUCT_PRICE_STRIKED,PRODUCT_PRICE_STRIKED_AFTER,PRODUCT_PRICE_STRIKED_BEFORE}from'@shopgate/engage/product/constants';import{withPriceCalculation}from'@shopgate/engage/product/hocs';import{useWidgetSettings}from'@shopgate/engage/core/hooks';import connect from"./connector";import styles from"./style";/**
  * The PriceStriked component.
  * @param {Object} props The component props.
  * @return {JSX}
- */var PriceStriked=function PriceStriked(props){return/*#__PURE__*/React.createElement(Fragment,null,/*#__PURE__*/React.createElement(Portal,{name:PRODUCT_PRICE_STRIKED_BEFORE}),/*#__PURE__*/React.createElement(Portal,{name:PRODUCT_PRICE_STRIKED},/*#__PURE__*/React.createElement(Content,props)),/*#__PURE__*/React.createElement(Portal,{name:PRODUCT_PRICE_STRIKED_AFTER}));};Content.defaultProps={price:null};export default connect(withPriceCalculation(PriceStriked));
+ */var PriceStriked=function PriceStriked(_ref){var price=_ref.price;var _useWidgetSettings=useWidgetSettings('@shopgate/engage/product/components/Header/PriceStriked'),_useWidgetSettings$ms=_useWidgetSettings.msrpLabel,msrpLabel=_useWidgetSettings$ms===void 0?'price.msrp':_useWidgetSettings$ms,unitPriceStrikedLabel=_useWidgetSettings.unitPriceStrikedLabel;return React.createElement(Fragment,null,React.createElement(Portal,{name:PRODUCT_PRICE_STRIKED_BEFORE}),React.createElement(Portal,{name:PRODUCT_PRICE_STRIKED},React.createElement(PlaceholderLabel,{className:styles.placeholder,ready:price!==null},price&&price.msrp>0&&price.unitPrice!==price.msrp&&React.createElement(Fragment,null,!!msrpLabel&&React.createElement(I18n.Text,{string:msrpLabel,className:styles.msrp}),React.createElement(StrikePrice,{className:styles.msrpStriked,value:price.msrp,currency:price.currency})),price&&!price.msrp&&price.unitPriceStriked>0&&price.unitPrice!==price.unitPriceStriked&&React.createElement(React.Fragment,null,!!unitPriceStrikedLabel&&React.createElement(I18n.Text,{string:unitPriceStrikedLabel,className:styles.msrp}),React.createElement(StrikePrice,{value:price.unitPriceStriked,currency:price.currency})))),React.createElement(Portal,{name:PRODUCT_PRICE_STRIKED_AFTER}));};PriceStriked.defaultProps={price:null};export default connect(withPriceCalculation(PriceStriked));

package/product/components/Header/PriceStriked/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables;var placeholder=css({height:16,width:'70%',marginTop:5,marginBottom:2}).toString();var msrp=css({color:colors.shade3,fontSize:'0.875rem',marginRight:variables.gap.small/2}).toString();var msrpStriked=css({display:'inline',fontSize:'0.875rem'}).toString();export default{placeholder:placeholder,msrp:msrp,msrpStriked:msrpStriked};
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables;var placeholder=css({height:16,width:'70%',marginTop:5,marginBottom:2}).toString();var msrp=css({color:colors.shade11,fontSize:'0.875rem',marginRight:variables.gap.small/2}).toString();var msrpStriked=css({display:'inline',fontSize:'0.875rem'}).toString();export default{placeholder:placeholder,msrp:msrp,msrpStriked:msrpStriked};

package/product/components/Header/Shipping/components/Label/index.js

@@ -1,6 +1,6 @@
 import React from'react';import PropTypes from'prop-types';import I18n from'@shopgate/pwa-common/components/I18n';import styles from"./style";/**
  * The Shipping Label component.
  * @param {Object} props The component props.
- * @returns {JSX.Element}
- */var Label=function Label(_ref){var className=_ref.className,price=_ref.price,currency=_ref.currency;return/*#__PURE__*/ (// eslint-disable-next-line jsx-a11y/aria-role
-React.createElement("div",{role:"text",className:"".concat(className," ").concat(styles.text)},price>0?/*#__PURE__*/React.createElement(I18n.Text,{string:"shipping.cost"},/*#__PURE__*/React.createElement(I18n.Price,{forKey:"price",price:price,currency:currency})):/*#__PURE__*/React.createElement(I18n.Text,{string:"shipping.free"})));};Label.defaultProps={className:''};export default Label;
+ * @returns {JSX}
+ */var Label=function Label(_ref){var className=_ref.className,price=_ref.price,currency=_ref.currency;return(// eslint-disable-next-line jsx-a11y/aria-role
+React.createElement("div",{role:"text",className:"".concat(className," ").concat(styles.text)},price>0?React.createElement(I18n.Text,{string:"shipping.cost"},React.createElement(I18n.Price,{forKey:"price",price:price,currency:currency})):React.createElement(I18n.Text,{string:"shipping.free"})));};Label.defaultProps={className:''};export default Label;

package/product/components/Header/Shipping/components/Label/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;var text=css({color:colors.success}).toString();export default{text:text};
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;var text=css({color:"var(--color-state-ok, ".concat(colors.success,")")}).toString();export default{text:text};

package/product/components/Header/Shipping/index.js

@@ -2,4 +2,4 @@ import React,{Fragment,memo}from'react';import PropTypes from'prop-types';import
  * The Shipping Info component.
  * @param {Object} props The component props.
  * @return {JSX}
- */var Shipping=function Shipping(_ref){var shipping=_ref.shipping;return/*#__PURE__*/React.createElement(Fragment,null,/*#__PURE__*/React.createElement(Portal,{name:PRODUCT_SHIPPING_BEFORE}),/*#__PURE__*/React.createElement(Portal,{name:PRODUCT_SHIPPING},/*#__PURE__*/React.createElement(PlaceholderLabel,{className:styles.placeholder,ready:shipping!==null},shipping&&typeof shipping.price!=='undefined'&&shipping.price!==null&&/*#__PURE__*/React.createElement(Label,{className:"".concat(styles.shipping," engage__product__header__shipping"),price:shipping.price,currency:shipping.currency}))),/*#__PURE__*/React.createElement(Portal,{name:PRODUCT_SHIPPING_AFTER}));};Shipping.defaultProps={shipping:null};export default connect(/*#__PURE__*/memo(Shipping));
+ */var Shipping=function Shipping(_ref){var shipping=_ref.shipping;return React.createElement(Fragment,null,React.createElement(Portal,{name:PRODUCT_SHIPPING_BEFORE}),React.createElement(Portal,{name:PRODUCT_SHIPPING},React.createElement(PlaceholderLabel,{className:styles.placeholder,ready:shipping!==null},shipping&&typeof shipping.price!=='undefined'&&shipping.price!==null&&React.createElement(Label,{className:"".concat(styles.shipping," engage__product__header__shipping"),price:shipping.price,currency:shipping.currency}))),React.createElement(Portal,{name:PRODUCT_SHIPPING_AFTER}));};Shipping.defaultProps={shipping:null};export default connect(memo(Shipping));

package/product/components/Header/Shipping/spec.js

@@ -2,4 +2,4 @@ import React from'react';import{Provider}from'react-redux';import configureStore
    * Creates connected the component
    * @param {Object} state The mocked redux state
    * @return {ReactWrapper}
-   */var createComponent=function createComponent(state){return mount(/*#__PURE__*/React.createElement(Provider,{store:mockedStore(state)},/*#__PURE__*/React.createElement(Shipping,{productId:"fakeId"})),mockRenderOptions);};it('should render shipping price',function(){var component=createComponent(mockedStoreWithShippingPrice);expect(component).toMatchSnapshot();expect(component.html().includes('shipping.cost')).toBe(true);});it('should render free shipping',function(){var component=createComponent(mockedStoreWithFreeShipping);expect(component).toMatchSnapshot();expect(component.html().includes('shipping.free')).toBe(true);});it('should not render when shipping is unknown',function(){var component=createComponent(mockedStoreWithUnknownShipping);expect(component.html()).toBe('');});});
+   */var createComponent=function createComponent(state){return mount(React.createElement(Provider,{store:mockedStore(state)},React.createElement(Shipping,{productId:"fakeId"})),mockRenderOptions);};it('should render shipping price',function(){var component=createComponent(mockedStoreWithShippingPrice);expect(component).toMatchSnapshot();expect(component.html().includes('shipping.cost')).toBe(true);});it('should render free shipping',function(){var component=createComponent(mockedStoreWithFreeShipping);expect(component).toMatchSnapshot();expect(component.html().includes('shipping.free')).toBe(true);});it('should not render when shipping is unknown',function(){var component=createComponent(mockedStoreWithUnknownShipping);expect(component.isEmptyRender()).toBe(true);});});

package/product/components/Header/Tiers/components/Tier/index.js

@@ -2,5 +2,5 @@ import React,{memo}from'react';import PropTypes from'prop-types';import I18n fro
  * @param {Object} props The component props.
  * @returns {JSX}
  */var Tier=function Tier(_ref){var tier=_ref.tier,price=_ref.price;// Skip tier with quantity 1
-if(tier.from<=1){return null;}var i18nKey=tier.from===tier.to?'price.tier.set':'price.tier.range';var params={from:tier.from};return/*#__PURE__*/ (// eslint-disable-next-line jsx-a11y/aria-role
-React.createElement(I18n.Text,{string:i18nKey,params:params,key:tier.from,className:styles.tier,role:"text"},/*#__PURE__*/React.createElement(I18n.Price,{forKey:"price",price:tier.unitPrice,currency:price.currency,className:styles.price})));};export default/*#__PURE__*/memo(Tier);
+if(tier.from<=1){return null;}var i18nKey=tier.from===tier.to?'price.tier.set':'price.tier.range';var params={from:tier.from};return(// eslint-disable-next-line jsx-a11y/aria-role
+React.createElement(I18n.Text,{string:i18nKey,params:params,key:tier.from,className:styles.tier,role:"text"},React.createElement(I18n.Price,{forKey:"price",price:tier.unitPrice,currency:price.currency,className:styles.price})));};export default memo(Tier);

package/product/components/Header/Tiers/components/Tier/spec.js

@@ -1 +1 @@
-import React from'react';import{shallow}from'enzyme';import Tier from"./index";describe('<Tier />',function(){describe('Rendering with data',function(){it('should render tier prices when tier prices are available',function(){var price={tiers:[{from:1,to:2,unitPrice:92.5},{from:3,to:5,unitPrice:77.5},{from:6,to:null,unitPrice:68.5}],currency:'USD'};var tier={from:3,to:5,unitPrice:77.5};var wrapper=shallow(/*#__PURE__*/React.createElement(Tier,{price:price,tier:tier}));expect(wrapper).toMatchSnapshot();});});describe('Rendering without data',function(){it('should render nothing when tier from is less then 1',function(){var tier={from:1};var wrapper=shallow(/*#__PURE__*/React.createElement(Tier,{tier:tier,price:{}}));expect(wrapper).toBeEmptyRender();});});});
+import React from'react';import{shallow}from'enzyme';import Tier from"./index";describe('<Tier />',function(){describe('Rendering with data',function(){it('should render tier prices when tier prices are available',function(){var price={tiers:[{from:1,to:2,unitPrice:92.5},{from:3,to:5,unitPrice:77.5},{from:6,to:null,unitPrice:68.5}],currency:'USD'};var tier={from:3,to:5,unitPrice:77.5};var wrapper=shallow(React.createElement(Tier,{price:price,tier:tier}));expect(wrapper).toMatchSnapshot();});});describe('Rendering without data',function(){it('should render nothing when tier from is less then 1',function(){var tier={from:1};var wrapper=shallow(React.createElement(Tier,{tier:tier,price:{}}));expect(wrapper).toBeEmptyRender();});});});

package/product/components/Header/Tiers/index.js

@@ -2,4 +2,4 @@ import React,{Fragment,memo}from'react';import PropTypes from'prop-types';import
  * The Tiers component.
  * @param {Object} props The component props.
  * @return {JSX}
- */var Tiers=function Tiers(_ref){var price=_ref.price;if(!(price&&price.tiers&&price.tiers.length>0)){return null;}return/*#__PURE__*/React.createElement(Fragment,null,/*#__PURE__*/React.createElement(Portal,{name:PRODUCT_TIERS_BEFORE}),/*#__PURE__*/React.createElement(Portal,{name:PRODUCT_TIERS},/*#__PURE__*/React.createElement("div",{className:"".concat(styles.wrapper," engage__product__header__tiers")},price.tiers.map(function(tier){return/*#__PURE__*/React.createElement(Tier,{tier:tier,price:price,key:"".concat(Object.values(tier).join('_'))});}))),/*#__PURE__*/React.createElement(Portal,{name:PRODUCT_TIERS_AFTER}));};Tiers.defaultProps={price:null};export default connect(/*#__PURE__*/memo(Tiers));
+ */var Tiers=function Tiers(_ref){var price=_ref.price;if(!(price&&price.tiers&&price.tiers.length>0)){return null;}return React.createElement(Fragment,null,React.createElement(Portal,{name:PRODUCT_TIERS_BEFORE}),React.createElement(Portal,{name:PRODUCT_TIERS},React.createElement("div",{className:"".concat(styles.wrapper," engage__product__header__tiers")},price.tiers.map(function(tier){return React.createElement(Tier,{tier:tier,price:price,key:"".concat(Object.values(tier).join('_'))});}))),React.createElement(Portal,{name:PRODUCT_TIERS_AFTER}));};Tiers.defaultProps={price:null};export default connect(memo(Tiers));

package/product/components/Header/Tiers/spec.js

@@ -1 +1 @@
-import React from'react';import{shallow}from'enzyme';import Tiers from"./index";jest.mock("./connector",function(){return function(cmp){return cmp;};});describe('<Tiers />',function(){describe('Rendering with data',function(){it('should render tier prices when tier prices are available',function(){var price={tiers:[{from:1,to:2,unitPrice:92.5},{from:3,to:5,unitPrice:77.5},{from:6,to:null,unitPrice:68.5}],currency:'USD'};var wrapper=shallow(/*#__PURE__*/React.createElement(Tiers,{price:price}));expect(wrapper).toMatchSnapshot();});});describe('Rendering without data',function(){it('should render nothing when price data are not available ({})',function(){var wrapper=shallow(/*#__PURE__*/React.createElement(Tiers,{price:{}}));expect(wrapper).toBeEmptyRender();});it('should render nothing when price data are not available (null)',function(){var wrapper=shallow(/*#__PURE__*/React.createElement(Tiers,{price:null}));expect(wrapper).toBeEmptyRender();});it('should render nothing when tier prices are empty ([])',function(){var price={tiers:[],currency:'USD'};var wrapper=shallow(/*#__PURE__*/React.createElement(Tiers,{price:price}));expect(wrapper).toBeEmptyRender();});it('should render nothing when tier prices are not available (field missing)',function(){var price={currency:'USD'};var wrapper=shallow(/*#__PURE__*/React.createElement(Tiers,{price:price}));expect(wrapper).toBeEmptyRender();});});});
+import React from'react';import{shallow}from'enzyme';import Tiers from"./index";jest.mock("./connector",function(){return function(cmp){return cmp;};});describe('<Tiers />',function(){describe('Rendering with data',function(){it('should render tier prices when tier prices are available',function(){var price={tiers:[{from:1,to:2,unitPrice:92.5},{from:3,to:5,unitPrice:77.5},{from:6,to:null,unitPrice:68.5}],currency:'USD'};var wrapper=shallow(React.createElement(Tiers,{price:price}));expect(wrapper).toMatchSnapshot();});});describe('Rendering without data',function(){it('should render nothing when price data are not available ({})',function(){var wrapper=shallow(React.createElement(Tiers,{price:{}}));expect(wrapper).toBeEmptyRender();});it('should render nothing when price data are not available (null)',function(){var wrapper=shallow(React.createElement(Tiers,{price:null}));expect(wrapper).toBeEmptyRender();});it('should render nothing when tier prices are empty ([])',function(){var price={tiers:[],currency:'USD'};var wrapper=shallow(React.createElement(Tiers,{price:price}));expect(wrapper).toBeEmptyRender();});it('should render nothing when tier prices are not available (field missing)',function(){var price={currency:'USD'};var wrapper=shallow(React.createElement(Tiers,{price:price}));expect(wrapper).toBeEmptyRender();});});});

package/product/components/Header/index.js

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

package/product/components/MapPriceHint/index.js

@@ -1,4 +1,4 @@
 import React from'react';import PropTypes from'prop-types';import{css}from'glamor';import classNames from'classnames';import{SurroundPortals,I18n,TimeBoundary}from'@shopgate/engage/components';import{isBeta,useWidgetSettings,useWidgetStyles}from'@shopgate/engage/core';import{PRODUCT_MAP_PRICE}from'@shopgate/engage/product';import{showHint}from"./helpers";import connect from"./connector";var defaultStyle=css({fontSize:'0.75rem'}).toString();/**
  * The Product Map Price Hint component.
  * @return {JSX}
- */var MapPriceHint=function MapPriceHint(_ref){var price=_ref.price,mapPrice=_ref.mapPrice;if(!isBeta()){return null;}var settings=useWidgetSettings('@shopgate/engage/product/MapPrice');if(!settings.showHint||!settings.hint){return null;}var styles=useWidgetStyles('@shopgate/engage/product/MapPrice');return/*#__PURE__*/React.createElement(SurroundPortals,{portalName:PRODUCT_MAP_PRICE},showHint(price,mapPrice)&&/*#__PURE__*/React.createElement(TimeBoundary,{start:new Date(mapPrice.startDate),end:new Date(mapPrice.endDate)},function(_ref2){var between=_ref2.between;return between&&/*#__PURE__*/React.createElement(I18n.Text,{string:settings.hint,className:classNames('engage__product__map-price-hint',defaultStyle,css(styles.hint).toString())});}));};MapPriceHint.defaultProps={mapPrice:null,price:null};export default connect(MapPriceHint);
+ */var MapPriceHint=function MapPriceHint(_ref){var price=_ref.price,mapPrice=_ref.mapPrice;if(!isBeta()){return null;}var settings=useWidgetSettings('@shopgate/engage/product/MapPrice');if(!settings.showHint||!settings.hint){return null;}var styles=useWidgetStyles('@shopgate/engage/product/MapPrice');return React.createElement(SurroundPortals,{portalName:PRODUCT_MAP_PRICE},showHint(price,mapPrice)&&React.createElement(TimeBoundary,{start:new Date(mapPrice.startDate),end:new Date(mapPrice.endDate)},function(_ref2){var between=_ref2.between;return between&&React.createElement(I18n.Text,{string:settings.hint,className:classNames('engage__product__map-price-hint',defaultStyle,css(styles.hint).toString())});}));};MapPriceHint.defaultProps={mapPrice:null,price:null};export default connect(MapPriceHint);

package/product/components/Media/FeaturedMedia.js

@@ -1,4 +1,4 @@
-var _types;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{SurroundPortals}from'@shopgate/engage/components';import{MEDIA_TYPE_IMAGE,MEDIA_TYPE_VIDEO}from'@shopgate/engage/product';import{PORTAL_PRODUCT_MEDIA}from"../../../components/constants";import MediaImage from"./MediaImage";import FeaturedVideo from"./FeaturedVideo";import{defaultProps,propTypes}from"./props";var types=(_types={},_defineProperty(_types,MEDIA_TYPE_IMAGE,MediaImage),_defineProperty(_types,MEDIA_TYPE_VIDEO,FeaturedVideo),_types);/**
+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{SurroundPortals}from'@shopgate/engage/components';import{MEDIA_TYPE_IMAGE,MEDIA_TYPE_VIDEO}from'@shopgate/engage/product';import{PORTAL_PRODUCT_MEDIA}from"../../../components/constants";import MediaImage from"./MediaImage";import FeaturedVideo from"./FeaturedVideo";import{defaultProps,propTypes}from"./props";var types=_defineProperty(_defineProperty({},MEDIA_TYPE_IMAGE,MediaImage),MEDIA_TYPE_VIDEO,FeaturedVideo);/**
  * The featured media component.
  * @returns {JSX}
- */var FeaturedMedia=function FeaturedMedia(_ref){var type=_ref.type,url=_ref.url,altText=_ref.altText;var TypeRenderer=types[type]||MediaImage;return/*#__PURE__*/React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_MEDIA},/*#__PURE__*/React.createElement(TypeRenderer,{url:url,altText:altText}));};FeaturedMedia.defaultProps=defaultProps;export default FeaturedMedia;
+ */var FeaturedMedia=function FeaturedMedia(_ref){var type=_ref.type,url=_ref.url,altText=_ref.altText;var TypeRenderer=types[type]||MediaImage;return React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_MEDIA},React.createElement(TypeRenderer,{url:url,altText:altText}));};FeaturedMedia.defaultProps=defaultProps;export default FeaturedMedia;

package/product/components/Media/MediaImage.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 _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen);}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++){arr2[i]=arr[i];}return arr2;}function _iterableToArrayLimit(arr,i){var _i=arr==null?null:typeof Symbol!=="undefined"&&arr[Symbol.iterator]||arr["@@iterator"];if(_i==null)return;var _arr=[];var _n=true;var _d=false;var _s,_e;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useState,useEffect}from'react';import PropTypes from'prop-types';import classnames from'classnames';import Image from'@shopgate/pwa-common/components/Image';import appConfig from'@shopgate/pwa-common/helpers/config';import{SurroundPortals}from"../../../components";import{PORTAL_PRODUCT_IMAGE}from"../../../components/constants";import{buildMediaImageUrl}from"./helpers";import{useWidgetSettings}from"../../../core";import{defaultProps,propTypes}from"./props";import MediaPlaceholder from"./MediaPlaceholder";import{innerShadow}from"./style";/**
+function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useState,useEffect}from'react';import PropTypes from'prop-types';import classnames from'classnames';import Image from'@shopgate/pwa-common/components/Image';import appConfig from'@shopgate/pwa-common/helpers/config';import{SurroundPortals}from"../../../components";import{PORTAL_PRODUCT_IMAGE}from"../../../components/constants";import{useWidgetSettings}from"../../../core";import{defaultProps,propTypes}from"./props";import MediaPlaceholder from"./MediaPlaceholder";import{innerShadow}from"./style";/**
  * The featured image component.
- * @returns {JSX}
- */var MediaImage=function MediaImage(_ref){var url=_ref.url,altText=_ref.altText,className=_ref.className,params=_ref.params;var _useState=useState(!url),_useState2=_slicedToArray(_useState,2),placeholder=_useState2[0],setPlaceholderEnabled=_useState2[1];var _useWidgetSettings=useWidgetSettings('@shopgate/engage/product/MediaImage'),_useWidgetSettings$sh=_useWidgetSettings.showInnerShadow,showInnerShadow=_useWidgetSettings$sh===void 0?!appConfig.hideProductImageShadow:_useWidgetSettings$sh;useEffect(function(){return setPlaceholderEnabled(!url);},[url]);var classes=classnames(className,_defineProperty({},innerShadow,showInnerShadow));if(placeholder){return/*#__PURE__*/React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_IMAGE},/*#__PURE__*/React.createElement(MediaPlaceholder,{className:classes}));}return/*#__PURE__*/React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_IMAGE},/*#__PURE__*/React.createElement(Image,{src:buildMediaImageUrl(url,params),alt:altText,className:classes,backgroundColor:"transparent",onError:function onError(){return setPlaceholderEnabled(true);}}));};MediaImage.defaultProps={url:defaultProps.url,altText:defaultProps.altText,className:defaultProps.className,params:null};export default MediaImage;
+ * @returns {JSX.Element}
+ */var MediaImage=function MediaImage(_ref){var url=_ref.url,altText=_ref.altText,className=_ref.className,resolutions=_ref.resolutions;var _useState=useState(!url),_useState2=_slicedToArray(_useState,2),placeholder=_useState2[0],setPlaceholderEnabled=_useState2[1];var _useWidgetSettings=useWidgetSettings('@shopgate/engage/product/MediaImage'),_useWidgetSettings$sh=_useWidgetSettings.showInnerShadow,showInnerShadow=_useWidgetSettings$sh===void 0?!appConfig.hideProductImageShadow:_useWidgetSettings$sh;useEffect(function(){return setPlaceholderEnabled(!url);},[url]);var classes=classnames(className,_defineProperty({},innerShadow,showInnerShadow));if(placeholder){return React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_IMAGE},React.createElement(MediaPlaceholder,{className:classes}));}return React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_IMAGE,portalProps:{src:url,resolutions:resolutions}},React.createElement(Image,{src:url,resolutions:resolutions,alt:altText,className:classes,backgroundColor:"transparent",onError:function onError(){return setPlaceholderEnabled(true);},animating:true}));};MediaImage.defaultProps={url:defaultProps.url,altText:defaultProps.altText,className:defaultProps.className,resolutions:undefined};export default MediaImage;

package/product/components/Media/MediaPlaceholder.js

@@ -1,4 +1,4 @@
 import React from'react';import classnames from'classnames';import PlaceholderIcon from'@shopgate/pwa-ui-shared/icons/PlaceholderIcon';import{defaultProps,propTypes}from"./props";import{placeholderContainer,placeholderContent,placeholderIcon}from"./style";/**
  * The media placeholder component.
  * @returns {JSX}
- */var MediaPlaceholder=function MediaPlaceholder(_ref){var className=_ref.className;return/*#__PURE__*/React.createElement("div",{className:classnames(placeholderContainer,className)},/*#__PURE__*/React.createElement("div",{className:placeholderContent,"data-test-id":"placeHolder"},/*#__PURE__*/React.createElement(PlaceholderIcon,{className:placeholderIcon})));};MediaPlaceholder.defaultProps={className:defaultProps.className};export default MediaPlaceholder;
+ */var MediaPlaceholder=function MediaPlaceholder(_ref){var className=_ref.className;return React.createElement("div",{className:classnames(placeholderContainer,className)},React.createElement("div",{className:placeholderContent,"data-test-id":"placeHolder"},React.createElement(PlaceholderIcon,{className:placeholderIcon})));};MediaPlaceholder.defaultProps={className:defaultProps.className};export default MediaPlaceholder;

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

@@ -1,4 +1,4 @@
 import React from'react';import PropTypes from'prop-types';import{MediaImage as Image}from"../../../Media";import{full}from"../../style";import{PRODUCT_SLIDER_IMAGE_FORMATS}from"../../constants";/**
  * The product media video slide component.
  * @returns {JSX}
- */var MediaImage=function MediaImage(_ref){var media=_ref.media,onClick=_ref.onClick;return/*#__PURE__*/React.createElement("div",{onClick:onClick,onKeyDown:onClick,role:"button",tabIndex:"0",className:full},/*#__PURE__*/React.createElement(Image,{url:media.url,altText:media.altText,params:PRODUCT_SLIDER_IMAGE_FORMATS[1]}));};MediaImage.displayName='MediaSliderImage';export default MediaImage;
+ */var MediaImage=function MediaImage(_ref){var media=_ref.media,onClick=_ref.onClick;return React.createElement("div",{onClick:onClick,onKeyDown:onClick,role:"button",tabIndex:"0",className:full},React.createElement(Image,{url:media.url,altText:media.altText,resolutions:PRODUCT_SLIDER_IMAGE_FORMATS}));};MediaImage.displayName='MediaSliderImage';export default MediaImage;