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

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(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();});});});
+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();});});});

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 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));
+ */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));

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(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();});});});
+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();});});});

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 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);
+ */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);

package/product/components/Media/FeaturedMedia.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;}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);/**
+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);/**
  * 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 React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_MEDIA},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/*#__PURE__*/React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_MEDIA},/*#__PURE__*/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)||_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";/**
+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";/**
  * The featured image component.
- * @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;
+ * @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;

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 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;
+ */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;

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 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;
+ */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;

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

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

package/product/components/MediaSlider/index.js

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

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

@@ -1,16 +1,16 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{PureComponent}from'react';import PropTypes from'prop-types';import{ProductContext}from'@shopgate/engage/product/contexts';import Option from"../Option";import TextOption from"../TextOption";import connect from"./connector";/**
+function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{PureComponent}from'react';import PropTypes from'prop-types';import Option from"../Option";import TextOption from"../TextOption";import{ProductContext}from"../../../context";import connect from"./connector";/**
  * The Product Options component.
- */var Options=/*#__PURE__*/function(_PureComponent){function Options(){var _this2;_classCallCheck(this,Options);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,Options,[].concat(args));/**
-   * @param {Object} props The component props.
-   */_defineProperty(_this2,"handleStoreSelection",function(props){props.options.forEach(function(option){// Only options of type 'select' have a default value. Type 'text' has no default.
-if(option.type!=='select'){return;}_this2.context.setOption(option.id,option.items[0].value,option.items[0].price);});});return _this2;}_inherits(Options,_PureComponent);return _createClass(Options,[{key:"componentDidMount",value:/**
+ */var Options=/*#__PURE__*/function(_PureComponent){_inherits(Options,_PureComponent);var _super=_createSuper(Options);function Options(){var _this;_classCallCheck(this,Options);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_super.call.apply(_super,[this].concat(args));_defineProperty(_assertThisInitialized(_this),"handleStoreSelection",function(props){props.options.forEach(function(option){// Only options of type 'select' have a default value. Type 'text' has no default.
+if(option.type!=='select'){return;}_this.context.setOption(option.id,option.items[0].value,option.items[0].price);});});return _this;}_createClass(Options,[{key:"componentDidMount",value:/**
    * Triggers storeSelections when the component is mounted and has options set.
    */function componentDidMount(){if(!this.context||!this.context.setOption||!this.props.options){return;}this.handleStoreSelection(this.props);}/**
    * When the component receives the product options
    * it will set the first value of each option as active
    * @param {Object} nextProps The incoming props.
-   */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(!this.props.options&&nextProps.options){this.handleStoreSelection(nextProps);}}},{key:"render",value:/**
+   */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(!this.props.options&&nextProps.options){this.handleStoreSelection(nextProps);}}/**
+   * @param {Object} props The component props.
+   */},{key:"render",value:/**
    * Renders the component
    * @returns {JSX}
-   */function render(){var _this$props=this.props,options=_this$props.options,currentOptions=_this$props.currentOptions;if(!options){return null;}return React.createElement(ProductContext.Consumer,null,function(_ref){var setOption=_ref.setOption;return React.createElement("div",{"data-test-id":"optionsPicker",className:"engage__product__options"},options.map(function(option){switch(option.type){case'text':return React.createElement(TextOption,{key:option.id,id:option.id,label:option.label,value:currentOptions[option.id],info:option.info,onChange:setOption,required:option.required,price:option.price});case'select':return React.createElement(Option,{key:option.id,label:option.label,id:option.id,items:option.items,value:currentOptions[option.id],onChange:setOption});default:// unknown type
-return null;}}));});}}]);}(PureComponent);_defineProperty(Options,"contextType",ProductContext);_defineProperty(Options,"defaultProps",{currentOptions:{},options:null});export default connect(Options);
+   */function render(){var _this$props=this.props,options=_this$props.options,currentOptions=_this$props.currentOptions;if(!options){return null;}return/*#__PURE__*/React.createElement(ProductContext.Consumer,null,function(_ref){var setOption=_ref.setOption;return/*#__PURE__*/React.createElement("div",{"data-test-id":"optionsPicker",className:"engage__product__options"},options.map(function(option){switch(option.type){case'text':return/*#__PURE__*/React.createElement(TextOption,{key:option.id,id:option.id,label:option.label,value:currentOptions[option.id],info:option.info,onChange:setOption,required:option.required,price:option.price});case'select':return/*#__PURE__*/React.createElement(Option,{key:option.id,label:option.label,id:option.id,items:option.items,value:currentOptions[option.id],onChange:setOption});default:// unknown type
+return null;}}));});}}]);return Options;}(PureComponent);_defineProperty(Options,"contextType",ProductContext);_defineProperty(Options,"defaultProps",{currentOptions:{},options:null});export default connect(Options);

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

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

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

@@ -1,4 +1,4 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import PropTypes from'prop-types';import{I18n,PickerUtilize as Picker}from'@shopgate/engage/components';import{PriceDifference}from'@shopgate/engage/product/components';import{ProductContext}from'@shopgate/engage/product/contexts';/**
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import PropTypes from'prop-types';import{I18n,PickerUtilize as Picker}from'@shopgate/engage/components';import{PriceDifference}from'@shopgate/engage/product';import{ProductContext}from"../../../context";/**
  * @param {Object} props The component props.
  * @returns {JSX}
- */var Option=function Option(_ref){var id=_ref.id,label=_ref.label,items=_ref.items,value=_ref.value,_onChange=_ref.onChange;return React.createElement(ProductContext.Consumer,null,function(_ref2){var currency=_ref2.currency;return React.createElement("div",{key:id,"data-test-id":label},React.createElement(Picker,{label:label,items:items.map(function(item){return _extends({},item,{rightComponent:React.createElement(PriceDifference,{currency:currency,difference:item.priceDifference})});}),placeholder:React.createElement(I18n.Text,{string:"product.pick_an_attribute",params:[label]}),value:value,onChange:function onChange(val){return _onChange(id,val,items.find(function(item){return item.value===val;}).price);}}));});};Option.defaultProps={value:null};export default Option;
+ */var Option=function Option(_ref){var id=_ref.id,label=_ref.label,items=_ref.items,value=_ref.value,_onChange=_ref.onChange;return/*#__PURE__*/React.createElement(ProductContext.Consumer,null,function(_ref2){var currency=_ref2.currency;return/*#__PURE__*/React.createElement("div",{key:id,"data-test-id":label},/*#__PURE__*/React.createElement(Picker,{label:label,items:items.map(function(item){return _extends({},item,{rightComponent:/*#__PURE__*/React.createElement(PriceDifference,{currency:currency,difference:item.priceDifference})});}),placeholder:/*#__PURE__*/React.createElement(I18n.Text,{string:"product.pick_an_attribute",params:[label]}),value:value,onChange:function onChange(val){return _onChange(id,val,items.find(function(item){return item.value===val;}).price);}}));});};Option.defaultProps={value:null};export default Option;

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

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

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

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

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

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

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

@@ -1,22 +1,10 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Fragment,PureComponent}from'react';import PropTypes from'prop-types';import Transition from'react-transition-group/Transition';import debounce from'lodash/debounce';import{TextField,InfoIcon}from'@shopgate/engage/components';import{withShowModal}from'@shopgate/engage/core/hocs';import{broadcastLiveMessage}from'@shopgate/engage/a11y';import{ProductContext}from'@shopgate/engage/product/contexts';import transition from'@shopgate/engage/product/components/Characteristics/transition';import OptionInformation from"./components/OptionInfo";import styles from"./style";/**
+function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Fragment,PureComponent}from'react';import PropTypes from'prop-types';import Transition from'react-transition-group/Transition';import debounce from'lodash/debounce';import TextField from'@shopgate/pwa-ui-shared/Form/TextField';import InfoIcon from'@shopgate/pwa-ui-shared/icons/InfoIcon';import withShowModal from'@shopgate/pwa-common/helpers/modal/withShowModal';import{broadcastLiveMessage}from'@shopgate/engage/a11y';import transition from"../../../Characteristics/transition";import{ProductContext}from"../../../context";import OptionInformation from"./components/OptionInfo";import styles from"./style";/**
  * The TextOption component
- */var TextOption=/*#__PURE__*/function(_PureComponent){function TextOption(props){var _this2;_classCallCheck(this,TextOption);_this2=_callSuper(this,TextOption,[props]);/**
+ */var TextOption=/*#__PURE__*/function(_PureComponent){_inherits(TextOption,_PureComponent);var _super=_createSuper(TextOption);/**
+   * @param {Object} props The component props.
+   */function TextOption(props){var _this;_classCallCheck(this,TextOption);_this=_super.call(this,props);_defineProperty(_assertThisInitialized(_this),"setRef",function(ref){_this.ref=ref;});_defineProperty(_assertThisInitialized(_this),"removeHighlight",function(){_this.setState({highlight:false});});_defineProperty(_assertThisInitialized(_this),"checkInput",function(){if(!_this.props.required){return true;}if(_this.props.value){return true;}broadcastLiveMessage('product.fill_out_required_input_first');_this.ref.scrollIntoView({behavior:'smooth'});_this.setState({highlight:true});return false;});_defineProperty(_assertThisInitialized(_this),"infoIcon",function(){if(!_this.props.info){return null;}var _this$props=_this.props,label=_this$props.label,info=_this$props.info,showModal=_this$props.showModal;return/*#__PURE__*/React.createElement("div",{onClick:function onClick(){return showModal({title:label,message:info});},"aria-hidden":true},/*#__PURE__*/React.createElement(InfoIcon,{size:24,className:styles.infoIcon}));});_defineProperty(_assertThisInitialized(_this),"handleKeyPress",function(event){// Enter key and on iOS also the "Done" button.
+if(event.which===13){_this.ref.blur();}});_defineProperty(_assertThisInitialized(_this),"handleChange",function(val){_this.props.onChange(_this.props.id,val,_this.props.price);});_defineProperty(_assertThisInitialized(_this),"handleDebounced",debounce(_this.handleChange,300));_this.state={highlight:false};_this.ref=null;props.conditioner.addConditioner("text-option-".concat(props.id),_this.checkInput);return _this;}/**
    * @param {Object} ref ref
-   */_defineProperty(_this2,"setRef",function(ref){_this2.ref=ref;});/**
-   * Remove highlight state
-   */_defineProperty(_this2,"removeHighlight",function(){_this2.setState({highlight:false});});/**
-   * Checks if required input is done.
-   * @return {boolean}
-   */_defineProperty(_this2,"checkInput",function(){if(!_this2.props.required){return true;}if(_this2.props.value){return true;}broadcastLiveMessage('product.fill_out_required_input_first');_this2.ref.scrollIntoView({behavior:'smooth'});_this2.setState({highlight:true});return false;});/**
-   * @returns {JSX}
-   */_defineProperty(_this2,"infoIcon",function(){if(!_this2.props.info){return null;}var _this2$props=_this2.props,label=_this2$props.label,info=_this2$props.info,showModal=_this2$props.showModal;return React.createElement("div",{onClick:function onClick(){return showModal({title:label,message:info});},"aria-hidden":true},React.createElement(InfoIcon,{size:24,className:styles.infoIcon}));});/**
-   * Handles form submits by key.
-   * @param {Object} event The event that caused the keypress.
-   */_defineProperty(_this2,"handleKeyPress",function(event){// Enter key and on iOS also the "Done" button.
-if(event.which===13){_this2.ref.blur();}});/**
-   * @param {string} val value.
-   */_defineProperty(_this2,"handleChange",function(val){_this2.props.onChange(_this2.props.id,val,_this2.props.price);});_defineProperty(_this2,"handleDebounced",debounce(_this2.handleChange,300));_this2.state={highlight:false};_this2.ref=null;props.conditioner.addConditioner("text-option-".concat(props.id),_this2.checkInput);return _this2;}_inherits(TextOption,_PureComponent);return _createClass(TextOption,[{key:"render",value:/**
+   */_createClass(TextOption,[{key:"render",value:/**
    * @return {JSX}
-   */function render(){var _this3=this;var _this$props=this.props,id=_this$props.id,label=_this$props.label,value=_this$props.value,required=_this$props.required,price=_this$props.price,info=_this$props.info;var optionInfoId=id;return React.createElement("div",{className:styles.row},React.createElement(Transition,{"in":this.state.highlight,timeout:700,onEntered:this.removeHighlight},function(state){return React.createElement(Fragment,null,React.createElement("div",{className:styles.wrapper,style:transition[state]},React.createElement(TextField,{setRef:_this3.setRef,name:"text_".concat(id),value:value,onChange:_this3.handleDebounced,onKeyPress:_this3.handleKeyPress,placeholder:label,label:label,rightElement:_this3.infoIcon(),"data-test-id":label,hasUnderline:false,className:styles.element,attributes:{'aria-describedby':optionInfoId}})),React.createElement(OptionInformation,{label:label,required:required,price:price,info:info,optionInfoId:optionInfoId}));}));}}]);}(PureComponent);_defineProperty(TextOption,"defaultProps",{info:null,value:null/**
-   * @param {Object} props The component props.
-   */});export default withShowModal(function(props){return React.createElement(ProductContext.Consumer,null,function(_ref){var conditioner=_ref.conditioner;return React.createElement(TextOption,_extends({conditioner:conditioner},props));});});
+   */function render(){var _this2=this;var _this$props2=this.props,id=_this$props2.id,label=_this$props2.label,value=_this$props2.value,required=_this$props2.required,price=_this$props2.price,info=_this$props2.info;var optionInfoId=id;return/*#__PURE__*/React.createElement("div",{className:styles.row},/*#__PURE__*/React.createElement(Transition,{"in":this.state.highlight,timeout:700,onEntered:this.removeHighlight},function(state){return/*#__PURE__*/React.createElement(Fragment,null,/*#__PURE__*/React.createElement("div",{className:styles.wrapper,style:transition[state]},/*#__PURE__*/React.createElement(TextField,{setRef:_this2.setRef,name:"text_".concat(id),value:value,onChange:_this2.handleDebounced,onKeyPress:_this2.handleKeyPress,placeholder:label,label:label,rightElement:_this2.infoIcon(),"data-test-id":label,hasUnderline:false,className:styles.element,attributes:{'aria-describedby':optionInfoId}})),/*#__PURE__*/React.createElement(OptionInformation,{label:label,required:required,price:price,info:info,optionInfoId:optionInfoId}));}));}}]);return TextOption;}(PureComponent);_defineProperty(TextOption,"defaultProps",{info:null,value:null});export default withShowModal(function(props){return/*#__PURE__*/React.createElement(ProductContext.Consumer,null,function(_ref){var conditioner=_ref.conditioner;return/*#__PURE__*/React.createElement(TextOption,_extends({conditioner:conditioner},props));});});

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

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

package/product/components/Options/index.js

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

package/product/components/OrderQuantityHint/index.js

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

package/product/components/OrderQuantityHint/style.js

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

package/product/components/PriceDifference/index.js

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

package/product/components/PriceDifference/style.js

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

package/product/components/ProductBadges/index.js

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

package/product/components/ProductCard/index.js

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

package/product/components/ProductCard/style.js

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

package/product/components/ProductCharacteristics/context.js

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

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

@@ -1,4 +1,4 @@
-function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import isMatch from'lodash/isMatch';import appConfig from'@shopgate/pwa-common/helpers/config';var variantSelectionMode=appConfig.variantSelectionMode,_appConfig$product=appConfig.product,_appConfig$product2=_appConfig$product===void 0?{}:_appConfig$product,variantPreselect=_appConfig$product2.variantPreselect;var preselectVariant=variantPreselect||parseInt(variantSelectionMode,10)===1;/**
+function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import isMatch from'lodash/isMatch';import appConfig from'@shopgate/pwa-common/helpers/config';var variantSelectionMode=appConfig.variantSelectionMode,_appConfig$product=appConfig.product;_appConfig$product=_appConfig$product===void 0?{}:_appConfig$product;var variantPreselect=_appConfig$product.variantPreselect;var preselectVariant=variantPreselect||parseInt(variantSelectionMode,10)===1;/**
  * Returns the index of a particular characteristic from a set of characteristics.
  * @param {Array} characteristics The characteristics of a product.
  * @param {number} characteristicId The id of the characteristic to find.

package/product/components/ProductCharacteristics/index.js

@@ -1,39 +1,25 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import isMatch from'lodash/isMatch';import isEqual from'lodash/isEqual';import{broadcastLiveMessage}from'@shopgate/engage/a11y';import{responsiveCondition}from'@shopgate/engage/styles';import connect from"./connector";import VariantsContext from"./context";import{isCharacteristicEnabled,getSelectedValue,prepareState,selectCharacteristics}from"./helpers";/**
+function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import isMatch from'lodash/isMatch';import isEqual from'lodash/isEqual';import{broadcastLiveMessage}from'@shopgate/engage/a11y';import connect from"./connector";import VariantsContext from"./context";import{isCharacteristicEnabled,getSelectedValue,prepareState,selectCharacteristics}from"./helpers";/**
  * The ProductCharacteristics component.
- */var ProductCharacteristics=/*#__PURE__*/function(_Component){function ProductCharacteristics(_props){var _this2;_classCallCheck(this,ProductCharacteristics);_this2=_callSuper(this,ProductCharacteristics,[_props]);/**
-   * Sets the refs to the characteristics selects.
-   * @param {Object} props The props to check against.
-   */_defineProperty(_this2,"setRefs",function(props){var variants=props.variants;if(variants){variants.characteristics.forEach(function(_char){_this2.refsStore[_char.id]=React.createRef();});}});/**
-   * Checks if all selections have been made.
-   * @return {boolean}
-   */_defineProperty(_this2,"checkSelection",function(){var characteristics=_this2.state.characteristics;var _this2$props=_this2.props,variants=_this2$props.variants,variantId=_this2$props.variantId;if(!variants){return true;}var filteredValues=Object.keys(characteristics).filter(function(key){return!!characteristics[key];});var selected=!!(filteredValues.length===variants.characteristics.length&&variantId);if(!selected){var firstUnselected=_this2.findUnselectedCharacteristic();if(firstUnselected){var ref=_this2.refsStore[firstUnselected.id];// Focus the item for screen readers and broadcast a related live message.
-ref.current.focus();var option=ref.current.innerText;broadcastLiveMessage('product.pick_option_first',{params:{option:option}});if(responsiveCondition('>xs',{webOnly:true})){ref.current.scrollIntoView({behavior:'smooth',block:'center'});}else{ref.current.scrollIntoView({behavior:'smooth'});}_this2.setState({highlight:firstUnselected.id});}}return selected;});_defineProperty(_this2,"checkSelectedCharacteristics",function(){var characteristics=_this2.state.characteristics;var _this2$props2=_this2.props,variantId=_this2$props2.variantId,variants=_this2$props2.variants,finishTimeout=_this2$props2.finishTimeout;if(!variants){return;}var filteredValues=Object.keys(characteristics).filter(function(key){return!!characteristics[key];});if(filteredValues.length!==variants.characteristics.length){return;}var products=variants.products.filter(function(product){return isMatch(product.characteristics,characteristics);});if(!products.length){return;}if(products[0].id===variantId){return;}setTimeout(function(){_this2.props.navigate(products[0].id);},finishTimeout);});/**
-   * Stores a selected characteristic into the local state.
-   * @param {Object} selection The selected item.
-   */_defineProperty(_this2,"handleSelection",function(selection){var _this2$props3=_this2.props,variants=_this2$props3.variants,setCharacteristics=_this2$props3.setCharacteristics;var id=selection.id,value=selection.value;_this2.setState(function(_ref){var characteristics=_ref.characteristics;var state=prepareState(id,value,characteristics,variants.characteristics,variants.products);setCharacteristics(state);return{characteristics:_extends({},state),highlight:null};},_this2.checkSelectedCharacteristics);});/**
-   * @param {Object} selections The selections stored in the state.
-   * @param {string} charId The current characteristic ID.
-   * @param {Array} values The characteristic values.
-   * @param {number} charIndex The characteristic index.
-   * @param {string|null} selectedValue selectedValue
-   * @param {boolean} charDisabled Whether the characteristic for the values is disabled
-   * @return {Array}
-   */_defineProperty(_this2,"buildValues",function(selections,charId,values,charIndex,selectedValue,charDisabled){// If this is the first characteristic then all values are selectable.
-if(charIndex===0){return values.map(function(value){return _extends({},value,{selectable:!charDisabled,selected:selectedValue===value.id});});}var variants=_this2.props.variants;var subset={};Object.keys(selections).forEach(function(item,index){if(index<charIndex){subset[item]=selections[item];}});// Filter products that match or partially match the current characteristic selection.
+ */var ProductCharacteristics=/*#__PURE__*/function(_Component){_inherits(ProductCharacteristics,_Component);var _super=_createSuper(ProductCharacteristics);/**
+   * @param {Object} props The component props.
+   */function ProductCharacteristics(_props){var _this;_classCallCheck(this,ProductCharacteristics);_this=_super.call(this,_props);_defineProperty(_assertThisInitialized(_this),"setRefs",function(props){var variants=props.variants;if(variants){variants.characteristics.forEach(function(_char){_this.refsStore[_char.id]=/*#__PURE__*/React.createRef();});}});_defineProperty(_assertThisInitialized(_this),"checkSelection",function(){var characteristics=_this.state.characteristics;var _this$props=_this.props,variants=_this$props.variants,variantId=_this$props.variantId;if(!variants){return true;}var filteredValues=Object.keys(characteristics).filter(function(key){return!!characteristics[key];});var selected=!!(filteredValues.length===variants.characteristics.length&&variantId);if(!selected){var firstUnselected=_this.findUnselectedCharacteristic();if(firstUnselected){var ref=_this.refsStore[firstUnselected.id];// Focus the item for screen readers and broadcast a related live message.
+ref.current.focus();var option=ref.current.innerText;broadcastLiveMessage('product.pick_option_first',{params:{option:option}});ref.current.scrollIntoView({behavior:'smooth'});_this.setState({highlight:firstUnselected.id});}}return selected;});_defineProperty(_assertThisInitialized(_this),"checkSelectedCharacteristics",function(){var characteristics=_this.state.characteristics;var _this$props2=_this.props,variantId=_this$props2.variantId,variants=_this$props2.variants,finishTimeout=_this$props2.finishTimeout;if(!variants){return;}var filteredValues=Object.keys(characteristics).filter(function(key){return!!characteristics[key];});if(filteredValues.length!==variants.characteristics.length){return;}var products=variants.products.filter(function(product){return isMatch(product.characteristics,characteristics);});if(!products.length){return;}if(products[0].id===variantId){return;}setTimeout(function(){_this.props.navigate(products[0].id);},finishTimeout);});_defineProperty(_assertThisInitialized(_this),"handleSelection",function(selection){var _this$props3=_this.props,variants=_this$props3.variants,setCharacteristics=_this$props3.setCharacteristics;var id=selection.id,value=selection.value;_this.setState(function(_ref){var characteristics=_ref.characteristics;var state=prepareState(id,value,characteristics,variants.characteristics,variants.products);setCharacteristics(state);return{characteristics:_extends({},state),highlight:null};},_this.checkSelectedCharacteristics);});_defineProperty(_assertThisInitialized(_this),"buildValues",function(selections,charId,values,charIndex,selectedValue,charDisabled){// If this is the first characteristic then all values are selectable.
+if(charIndex===0){return values.map(function(value){return _extends({},value,{selectable:!charDisabled,selected:selectedValue===value.id});});}var variants=_this.props.variants;var subset={};Object.keys(selections).forEach(function(item,index){if(index<charIndex){subset[item]=selections[item];}});// Filter products that match or partially match the current characteristic selection.
 var products=variants.products.filter(function(_ref2){var characteristics=_ref2.characteristics;return isMatch(characteristics,subset);});// Check if any of the values are present inside any of the matching products.
-return values.map(function(value){var selectable=products.some(function(_ref3){var characteristics=_ref3.characteristics;return isMatch(characteristics,_defineProperty({},charId,value.id));});return _extends({},value,{selectable:charDisabled?false:selectable,selected:selectedValue===value.id});});});/**
-   * Resets the highlight state
-   */_defineProperty(_this2,"resetHighlight",function(){_this2.setState({highlight:null});});_this2.refsStore={};var _characteristics=selectCharacteristics(_props);_this2.state={highlight:null,characteristics:_characteristics};_props.setCharacteristics(_characteristics);_this2.setRefs(_props);_props.conditioner.addConditioner('product-variants',_this2.checkSelection);return _this2;}/** @inheritDoc */_inherits(ProductCharacteristics,_Component);return _createClass(ProductCharacteristics,[{key:"componentDidMount",value:function componentDidMount(){this.checkSelectedCharacteristics();}/**
+return values.map(function(value){var selectable=products.some(function(_ref3){var characteristics=_ref3.characteristics;return isMatch(characteristics,_defineProperty({},charId,value.id));});return _extends({},value,{selectable:charDisabled?false:selectable,selected:selectedValue===value.id});});});_defineProperty(_assertThisInitialized(_this),"resetHighlight",function(){_this.setState({highlight:null});});_this.refsStore={};var _characteristics=selectCharacteristics(_props);_this.state={highlight:null,characteristics:_characteristics};_props.setCharacteristics(_characteristics);_this.setRefs(_props);_props.conditioner.addConditioner('product-variants',_this.checkSelection);return _this;}/** @inheritDoc */_createClass(ProductCharacteristics,[{key:"componentDidMount",value:function componentDidMount(){this.checkSelectedCharacteristics();}/**
    * @param {Object} nextProps The next component props.
    */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(!this.props.variants&&nextProps.variants){// Initialize refs and characteristics when the variants prop was updated with a valid value.
 this.setRefs(nextProps);var characteristics=selectCharacteristics(nextProps);this.setState({characteristics:characteristics},this.checkSelectedCharacteristics);// Inform parent component about potential updates e.g. preselected characteristic values
 nextProps.setCharacteristics(characteristics);}else if(nextProps.characteristics&&!isEqual(this.state.characteristics,nextProps.characteristics)){// Sync back characteristics from parent if set
-this.setState({characteristics:nextProps.characteristics});}}},{key:"findUnselectedCharacteristic",value:/**
+this.setState({characteristics:nextProps.characteristics});}}/**
+   * Sets the refs to the characteristics selects.
+   * @param {Object} props The props to check against.
+   */},{key:"findUnselectedCharacteristic",value:/**
    * Finds the first unselected characteristic.
    * @return {Object|null}
-   */function findUnselectedCharacteristic(){var characteristics=this.state.characteristics;var unselected=this.props.variants.characteristics.filter(function(_char2){return!characteristics.hasOwnProperty(_char2.id);});if(unselected.length){return unselected[0];}return null;}},{key:"render",value:/**
+   */function findUnselectedCharacteristic(){var characteristics=this.state.characteristics;var unselected=this.props.variants.characteristics.filter(function(_char2){return!characteristics.hasOwnProperty(_char2.id);});if(unselected.length){return unselected[0];}return null;}/**
+   * Resets the highlight state
+   */},{key:"render",value:/**
    * @return {JSX}
-   */function render(){var _this3=this;var characteristics=this.state.characteristics;var variants=this.props.variants;if(!variants){return null;}return React.createElement(VariantsContext.Provider,{value:this.state},variants.characteristics.map(function(_char3,index){var disabled=!isCharacteristicEnabled(characteristics,index);var selected=getSelectedValue(_char3.id,characteristics);var values=_this3.buildValues(characteristics,_char3.id,_char3.values,index,selected,disabled);return _this3.props.render({charRef:_this3.refsStore[_char3.id],disabled:disabled,highlight:_this3.state.highlight===_char3.id,id:_char3.id,key:_char3.id,label:_char3.label,swatch:!!_char3.swatch,// BETA
-select:_this3.handleSelection,selected:selected,values:values,resetHighlight:_this3.resetHighlight});}));}}]);}(Component);_defineProperty(ProductCharacteristics,"defaultProps",{finishTimeout:0,variantId:null,variants:null,characteristics:null/**
-   * @param {Object} props The component props.
-   */});export default connect(ProductCharacteristics);
+   */function render(){var _this2=this;var characteristics=this.state.characteristics;var variants=this.props.variants;if(!variants){return null;}return/*#__PURE__*/React.createElement(VariantsContext.Provider,{value:this.state},variants.characteristics.map(function(_char3,index){var disabled=!isCharacteristicEnabled(characteristics,index);var selected=getSelectedValue(_char3.id,characteristics);var values=_this2.buildValues(characteristics,_char3.id,_char3.values,index,selected,disabled);return _this2.props.render({charRef:_this2.refsStore[_char3.id],disabled:disabled,highlight:_this2.state.highlight===_char3.id,id:_char3.id,key:_char3.id,label:_char3.label,swatch:!!_char3.swatch,// BETA
+select:_this2.handleSelection,selected:selected,values:values,resetHighlight:_this2.resetHighlight});}));}}]);return ProductCharacteristics;}(Component);_defineProperty(ProductCharacteristics,"defaultProps",{finishTimeout:0,variantId:null,variants:null,characteristics:null});export default connect(ProductCharacteristics);

package/product/components/ProductDiscountBadge/index.js

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

package/product/components/ProductDiscountBadge/spec.js

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