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

package/product/components/ProductList/index.js

@@ -1,5 +1,5 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import PropTypes from'prop-types';import{ProductListTypeProvider}from'@shopgate/engage/product';import{ITEMS_PER_LOAD}from'@shopgate/pwa-common/constants/DisplayOptions';import InfiniteContainer from'@shopgate/pwa-common/components/InfiniteContainer';import LoadingIndicator from'@shopgate/pwa-ui-shared/LoadingIndicator';import{ViewContext}from'@shopgate/engage/components/View';import Iterator from"./components/Iterator";import Layout from"./components/Layout";/**
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import PropTypes from'prop-types';import{ITEMS_PER_LOAD}from'@shopgate/pwa-common/constants/DisplayOptions';import InfiniteContainer from'@shopgate/pwa-common/components/InfiniteContainer';import LoadingIndicator from'@shopgate/pwa-ui-shared/LoadingIndicator';import{ViewContext}from'@shopgate/engage/components/View';import{ProductListTypeProvider}from'@shopgate/engage/product';import Iterator from"./components/Iterator";import Layout from"./components/Layout";/**
  * The Product List component.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var ProductList=function ProductList(_ref){var flags=_ref.flags,infiniteLoad=_ref.infiniteLoad,handleGetProducts=_ref.handleGetProducts,products=_ref.products,totalProductCount=_ref.totalProductCount,requestHash=_ref.requestHash,scope=_ref.scope;if(!infiniteLoad){return/*#__PURE__*/React.createElement(Layout,null,/*#__PURE__*/React.createElement(ProductListTypeProvider,{type:"productList",subType:scope},products.map(function(product){return/*#__PURE__*/React.createElement(Iterator,_extends({display:flags,id:product.id,key:product.id},product));})));}return/*#__PURE__*/React.createElement(ViewContext.Consumer,null,function(_ref2){var getContentRef=_ref2.getContentRef;return/*#__PURE__*/React.createElement(ProductListTypeProvider,{type:"productList",subType:scope},/*#__PURE__*/React.createElement(InfiniteContainer,{containerRef:getContentRef(),wrapper:Layout,iterator:Iterator,loader:handleGetProducts,items:products,loadingIndicator:/*#__PURE__*/React.createElement(LoadingIndicator,null),totalItems:totalProductCount,initialLimit:10,limit:ITEMS_PER_LOAD,requestHash:requestHash,enablePromiseBasedLoading:true}));});};ProductList.defaultProps={flags:null,handleGetProducts:function handleGetProducts(){},infiniteLoad:true,products:null,requestHash:null,totalProductCount:null,scope:null};export default ProductList;
+ */var ProductList=function ProductList(_ref){var flags=_ref.flags,infiniteLoad=_ref.infiniteLoad,handleGetProducts=_ref.handleGetProducts,products=_ref.products,totalProductCount=_ref.totalProductCount,requestHash=_ref.requestHash,scope=_ref.scope;if(!infiniteLoad){return React.createElement(Layout,null,React.createElement(ProductListTypeProvider,{type:"productList",subType:scope},products.map(function(product){return React.createElement(Iterator,_extends({display:flags,id:product.id,key:product.id},product));})));}return React.createElement(ViewContext.Consumer,null,function(_ref2){var getContentRef=_ref2.getContentRef;return React.createElement(ProductListTypeProvider,{type:"productList",subType:scope},React.createElement(InfiniteContainer,{containerRef:getContentRef(),wrapper:Layout,iterator:Iterator,loader:handleGetProducts,items:products,loadingIndicator:React.createElement(LoadingIndicator,null),totalItems:totalProductCount,initialLimit:10,limit:ITEMS_PER_LOAD,requestHash:requestHash,enablePromiseBasedLoading:true}));});};ProductList.defaultProps={flags:null,handleGetProducts:function handleGetProducts(){},infiniteLoad:true,products:null,requestHash:null,totalProductCount:null,scope:null};export default ProductList;

package/product/components/ProductName/ProductName.js

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

package/product/components/ProductName/ProductNameContent.js

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

package/product/components/ProductName/index.js

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

package/product/components/ProductProperties/Content.js

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

package/product/components/ProductProperties/Group.js

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

package/product/components/ProductProperties/GroupedProperties.js

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

package/product/components/ProductProperties/Lists.js

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

package/product/components/ProductProperties/ListsHTML.js

@@ -0,0 +1,5 @@
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React,{useCallback}from'react';import PropTypes from'prop-types';import{useNavigation}from'@shopgate/engage/core/hooks';import{HtmlSanitizer}from'@shopgate/engage/components';/**
+ * Renders a single properties row with HTML content.
+ * @param {Object} props The component props.
+ * @return {JSX.Element}
+ */var ListsHTML=function ListsHTML(_ref){var properties=_ref.properties;var _useNavigation=useNavigation(),push=_useNavigation.push;var handleClick=useCallback(function(pathname,target){push(_extends({pathname:pathname},target&&{state:{target:target}}));},[push]);return properties.map(function(_ref2){var label=_ref2.label,value=_ref2.value,type=_ref2.type;return React.createElement("div",{key:label,className:"engage__product__product-property","data-type":type,"data-label":label},React.createElement(HtmlSanitizer,{settings:{handleClick:handleClick,html:value}},value));});};export default React.memo(ListsHTML);

package/product/components/ProductProperties/ProductProperties.js

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

package/product/components/ProductProperties/Row.js

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

package/product/components/ProductProperties/RowHTML.js

@@ -0,0 +1,5 @@
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React,{useCallback}from'react';import PropTypes from'prop-types';import{useNavigation}from'@shopgate/engage/core/hooks';import{HtmlSanitizer}from'@shopgate/engage/components';/**
+ * Renders a single properties row with HTML content.
+ * @param {Object} props The component props.
+ * @return {JSX.Element}
+ */var RowHTML=function RowHTML(_ref){var value=_ref.value,label=_ref.label;var _useNavigation=useNavigation(),push=_useNavigation.push;var handleClick=useCallback(function(pathname,target){push(_extends({pathname:pathname},target&&{state:{target:target}}));},[push]);return React.createElement("tr",{className:"engage__product__product-property","data-type":"html","data-label":label},React.createElement("td",{colSpan:2},React.createElement(HtmlSanitizer,{settings:{handleClick:handleClick,html:value}},value)));};export default React.memo(RowHTML);

package/product/components/ProductProperties/Rows.js

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

package/product/components/ProductProperties/Wrapper.js

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

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

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

package/product/components/ProductProperties/style.js

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

package/product/components/ProductSlider/index.js

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

package/product/components/ProductSlider/spec.js

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

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

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

package/product/components/ProductVariants/VariantAvailability.js

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

package/product/components/ProductVariants/index.js

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

package/product/components/QuantityPicker/hooks.js

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

package/product/components/QuantityPicker/index.js

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

package/product/components/Rating/index.js

@@ -1,7 +1,7 @@
-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);}import React,{Fragment,memo}from'react';import PropTypes from'prop-types';import Portal from'@shopgate/pwa-common/components/Portal';import{PRODUCT_RATING,PRODUCT_RATING_AFTER,PRODUCT_RATING_BEFORE}from'@shopgate/pwa-common-commerce/product/constants/Portals';import appConfig from'@shopgate/pwa-common/helpers/config';import RatingStars from'@shopgate/pwa-ui-shared/RatingStars';import RatingCount from'@shopgate/engage/reviews/components/Reviews/components/RatingCount';import{useWidgetSettings}from'@shopgate/engage/core';import{container}from"./style";import connect from"./connector";/**
+function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}import React,{memo,useMemo}from'react';import PropTypes from'prop-types';import appConfig from'@shopgate/pwa-common/helpers/config';import{RatingStars,SurroundPortals}from'@shopgate/engage/components';import{PRODUCT_RATING}from'@shopgate/engage/product/constants';import RatingCount from'@shopgate/engage/reviews/components/Reviews/components/RatingCount';import{useWidgetSettings}from'@shopgate/engage/core/hooks';import{container}from"./style";import connect from"./connector";var hasReviews=appConfig.hasReviews;/**
  * Scrolls page to reviews excerpt.
  */var scrollToRating=function scrollToRating(){var reviewsExcerpt=document.getElementById('reviewsExcerpt');if(_typeof(reviewsExcerpt)!=='object'||!reviewsExcerpt||!reviewsExcerpt.offsetTop||!reviewsExcerpt.closest||!reviewsExcerpt.closest('article')){return;}reviewsExcerpt.closest('article').scroll(0,reviewsExcerpt.offsetTop-30);};/**
  * The Rating component.
  * @param {Object} props The component props.
- * @return {JSX}
- */var Rating=function Rating(_ref){var rating=_ref.rating;var _useWidgetSettings=useWidgetSettings('@shopgate/engage/rating'),_useWidgetSettings$sh=_useWidgetSettings.showEmptyRatingStars,showEmptyRatingStars=_useWidgetSettings$sh===void 0?false:_useWidgetSettings$sh;var showRatings=showEmptyRatingStars?appConfig.hasReviews&&rating:appConfig.hasReviews&&rating&&rating.count;return/*#__PURE__*/React.createElement(Fragment,null,/*#__PURE__*/React.createElement(Portal,{name:PRODUCT_RATING_BEFORE}),/*#__PURE__*/React.createElement(Portal,{name:PRODUCT_RATING},showRatings&&/*#__PURE__*/React.createElement("div",{className:"".concat(container," engage__product__rating"),onClick:scrollToRating,role:"link","aria-hidden":true},/*#__PURE__*/React.createElement(RatingStars,{value:rating.average,display:"big"}),/*#__PURE__*/React.createElement(RatingCount,{count:rating.count,prominent:true}))),/*#__PURE__*/React.createElement(Portal,{name:PRODUCT_RATING_AFTER}));};Rating.defaultProps={rating:null};export default connect(/*#__PURE__*/memo(Rating));
+ * @return {JSX.Element}
+ */var Rating=function Rating(_ref){var rating=_ref.rating;var _useWidgetSettings=useWidgetSettings('@shopgate/engage/rating'),_useWidgetSettings$sh=_useWidgetSettings.showEmptyRatingStars,showEmptyRatingStars=_useWidgetSettings$sh===void 0?false:_useWidgetSettings$sh;var showRatings=useMemo(function(){if(hasReviews&&(rating===null||rating===void 0?void 0:rating.average)>0){return true;}if(hasReviews&&showEmptyRatingStars&&rating){return true;}return false;},[rating,showEmptyRatingStars]);return React.createElement(SurroundPortals,{portalName:PRODUCT_RATING},showRatings&&React.createElement("div",{className:container,onClick:scrollToRating,role:"presentation"},React.createElement(RatingStars,{value:rating.average,display:"big"}),React.createElement(RatingCount,{count:rating.count,prominent:true})));};Rating.defaultProps={rating:null};export default connect(memo(Rating));

package/product/components/Rating/spec.js

@@ -1,5 +1,5 @@
-import React from'react';import{Provider}from'react-redux';import configureStore from'redux-mock-store';import{mount}from'enzyme';import mockRenderOptions from'@shopgate/pwa-common/helpers/mocks/mockRenderOptions';import{setMocks,mockedStateWithTwoReviews,mockedStateWithoutReview}from'@shopgate/pwa-common-commerce/reviews/mock';import Rating from"./index";import{getElementById}from"./mock";setMocks();describe('Rating (product header)',function(){var mockedStore=configureStore();/**
+import React from'react';import{Provider}from'react-redux';import configureStore from'redux-mock-store';import{mount}from'enzyme';import mockRenderOptions from'@shopgate/pwa-common/helpers/mocks/mockRenderOptions';import{setMocks,mockedStateWithTwoReviews,mockedStateWithoutReview}from'@shopgate/pwa-common-commerce/reviews/mock';import Rating from"./index";import{getElementById}from"./mock";setMocks();jest.mock('@shopgate/engage/components');describe('Rating (product header)',function(){var mockedStore=configureStore();/**
    * Makes component.
    * @param {Object} state State
    * @returns {Object}
-   */var getComponent=function getComponent(state){return mount(/*#__PURE__*/React.createElement(Provider,{store:mockedStore(state)},/*#__PURE__*/React.createElement(Rating,{productId:"foo"})),mockRenderOptions);};describe('Rendering',function(){it('should render rating when data is available',function(){var component=getComponent(mockedStateWithTwoReviews);expect(component).toMatchSnapshot();});it('should render nothing when data is not available',function(){var component=getComponent(mockedStateWithoutReview);expect(component.html()).toBe('');});});describe('Scroll on click',function(){var scrollSpy=jest.fn();it('should scroll to reviews when clicked',function(){jest.spyOn(document,'getElementById').mockImplementation(getElementById(scrollSpy));var component=getComponent(mockedStateWithTwoReviews);component.simulate('click');expect(scrollSpy.mock.calls[0][0]).toBe(0);expect(scrollSpy.mock.calls[0][1]).toBe(70);expect(scrollSpy).toHaveBeenCalled();document.getElementById.mockReset();document.getElementById.mockRestore();});it('should do nothing when clicked but no reviews excerpt element',function(){jest.spyOn(document,'getElementById').mockImplementation(function(){return null;});var component=getComponent(mockedStateWithTwoReviews);component.simulate('click');expect(scrollSpy.mock.calls.length).toBe(1);document.getElementById.mockReset();document.getElementById.mockRestore();});});});
+   */var getComponent=function getComponent(state){return mount(React.createElement(Provider,{store:mockedStore(state)},React.createElement(Rating,{productId:"foo"})),mockRenderOptions);};describe('Rendering',function(){it('should render rating when data is available',function(){var component=getComponent(mockedStateWithTwoReviews);expect(component).toMatchSnapshot();});it('should render nothing when data is not available',function(){var component=getComponent(mockedStateWithoutReview);expect(component.isEmptyRender()).toBe(true);});});describe('Scroll on click',function(){var scrollSpy=jest.fn();it('should scroll to reviews when clicked',function(){jest.spyOn(document,'getElementById').mockImplementation(getElementById(scrollSpy));var component=getComponent(mockedStateWithTwoReviews);component.simulate('click');expect(scrollSpy.mock.calls[0][0]).toBe(0);expect(scrollSpy.mock.calls[0][1]).toBe(70);expect(scrollSpy).toHaveBeenCalled();document.getElementById.mockReset();document.getElementById.mockRestore();});it('should do nothing when clicked but no reviews excerpt element',function(){jest.spyOn(document,'getElementById').mockImplementation(function(){return null;});var component=getComponent(mockedStateWithTwoReviews);component.simulate('click');expect(scrollSpy.mock.calls.length).toBe(1);document.getElementById.mockReset();document.getElementById.mockRestore();});});});

package/product/components/RelationsSlider/RelationsSheet.js

@@ -1,4 +1,4 @@
-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,useCallback,Fragment,memo}from'react';import PropTypes from'prop-types';import{useWidgetSettings,useTheme}from"../../../core";import{SheetDrawer,I18n,Button}from"../../../components";import{WIDGET_ID}from"./constants";import{showMore,sheet}from"./style";import connect from"./RelationsSheet.connector";/**
+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,useCallback,Fragment,memo}from'react';import PropTypes from'prop-types';import{useWidgetSettings,useTheme}from"../../../core";import{SheetDrawer,I18n,Button}from"../../../components";import{WIDGET_ID}from"./constants";import{showMore,sheet}from"./style";import connect from"./RelationsSheet.connector";/**
  * Shows a Sheet Drawer with all related products.
  * @returns {JSX}
- */var RelationsSheet=/*#__PURE__*/memo(function(_ref){var products=_ref.products.products;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),show=_useState2[0],setShow=_useState2[1];var _useWidgetSettings=useWidgetSettings(WIDGET_ID),headline=_useWidgetSettings.headline;var _useTheme=useTheme(),ProductGrid=_useTheme.ProductGrid;var handleOpen=useCallback(function(event){event.preventDefault();setShow(true);},[]);var handleClose=useCallback(function(){setShow(false);},[]);return/*#__PURE__*/React.createElement(Fragment,null,/*#__PURE__*/React.createElement(Button,{onClick:handleOpen,flat:true,className:showMore},/*#__PURE__*/React.createElement(I18n.Text,{string:"product.relations.showMore"})),/*#__PURE__*/React.createElement(SheetDrawer,{isOpen:show,title:headline,onClose:handleClose},/*#__PURE__*/React.createElement("div",{className:sheet},/*#__PURE__*/React.createElement(ProductGrid,{products:products,infiniteLoad:false}))));});RelationsSheet.defaultProps={products:{products:[],productCount:0}};export default connect(RelationsSheet);
+ */var RelationsSheet=memo(function(_ref){var products=_ref.products.products;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),show=_useState2[0],setShow=_useState2[1];var _useWidgetSettings=useWidgetSettings(WIDGET_ID),headline=_useWidgetSettings.headline;var _useTheme=useTheme(),ProductGrid=_useTheme.ProductGrid;var handleOpen=useCallback(function(event){event.preventDefault();setShow(true);},[]);var handleClose=useCallback(function(){setShow(false);},[]);return React.createElement(Fragment,null,React.createElement(Button,{onClick:handleOpen,flat:true,className:showMore},React.createElement(I18n.Text,{string:"product.relations.showMore"})),React.createElement(SheetDrawer,{isOpen:show,title:headline,onClose:handleClose},React.createElement("div",{className:sheet},React.createElement(ProductGrid,{products:products,infiniteLoad:false}))));});RelationsSheet.defaultProps={products:{products:[],productCount:0}};export default connect(RelationsSheet);

package/product/components/RelationsSlider/RelationsSlider.js

@@ -2,4 +2,4 @@ import React from'react';import PropTypes from'prop-types';import{useWidgetSetti
  * Renders the relations slider in the desired position on the Product Detail Page.
  * @param {string} desiredPosition The position the relations slider needs to render.
  * @returns {JSX}
- */var RelationsSlider=function RelationsSlider(_ref){var desiredPosition=_ref.desiredPosition;var _useWidgetSettings=useWidgetSettings(WIDGET_ID),type=_useWidgetSettings.type,position=_useWidgetSettings.position;var _useCurrentProduct=useCurrentProduct(),productId=_useCurrentProduct.productId;if(!type||position!==desiredPosition){return null;}return/*#__PURE__*/React.createElement(RelationsSliderContent,{productId:productId,type:type,max:10,limit:100});};RelationsSlider.defaultProps={desiredPosition:'header'};export default RelationsSlider;
+ */var RelationsSlider=function RelationsSlider(_ref){var desiredPosition=_ref.desiredPosition;var _useWidgetSettings=useWidgetSettings(WIDGET_ID),type=_useWidgetSettings.type,position=_useWidgetSettings.position;var _useCurrentProduct=useCurrentProduct(),productId=_useCurrentProduct.productId;if(!type||position!==desiredPosition){return null;}return React.createElement(RelationsSliderContent,{productId:productId,type:type,max:10,limit:100});};RelationsSlider.defaultProps={desiredPosition:'header'};export default RelationsSlider;

package/product/components/RelationsSlider/RelationsSliderContent.js

@@ -1,4 +1,4 @@
 import React,{useEffect,memo}from'react';import PropTypes from'prop-types';import{Swiper,Card}from'@shopgate/engage/components';import ProductCard from"../ProductCard";import RelationsSheet from"./RelationsSheet";import{useWidgetSettings,useCurrentProduct}from"../../../core";import connect from"./RelationsSlider.connector";import{WIDGET_ID}from"./constants";import*as styles from"./style";/**
  * @param {Object} props The component props.
  * @returns {JSX}
- */var RelationsSliderContent=/*#__PURE__*/memo(function(_ref){var _ref$products=_ref.products,products=_ref$products.products,productsCount=_ref$products.productsCount,getRelations=_ref.getRelations;var _useWidgetSettings=useWidgetSettings(WIDGET_ID),headline=_useWidgetSettings.headline,hidePrice=_useWidgetSettings.hidePrice,hideRating=_useWidgetSettings.hideRating,titleRows=_useWidgetSettings.titleRows,showMoreButton=_useWidgetSettings.showMoreButton,type=_useWidgetSettings.type,_useWidgetSettings$sl=_useWidgetSettings.slidesPerView,slidesPerView=_useWidgetSettings$sl===void 0?2.3:_useWidgetSettings$sl;var _useCurrentProduct=useCurrentProduct(),productId=_useCurrentProduct.productId;useEffect(function(){getRelations();},[getRelations]);if(products.length===0){return null;}return/*#__PURE__*/React.createElement("div",{className:styles.container},!!headline&&/*#__PURE__*/React.createElement("h3",{className:styles.headline},headline),!!showMoreButton&&productsCount>10&&/*#__PURE__*/React.createElement(RelationsSheet,{limit:100,productId:productId,type:type}),/*#__PURE__*/React.createElement(Swiper,{slidesPerView:slidesPerView,classNames:{container:styles.sliderContainer}},products.map(function(product){return/*#__PURE__*/React.createElement(Swiper.Item,{key:product.id},/*#__PURE__*/React.createElement(Card,{className:styles.card},/*#__PURE__*/React.createElement(ProductCard,{product:product,hidePrice:hidePrice,hideName:false,hideRating:hideRating,titleRows:titleRows})));})));});RelationsSliderContent.defaultProps={products:{products:[],productsCount:0}};export default connect(RelationsSliderContent);
+ */var RelationsSliderContent=memo(function(_ref){var _ref$products=_ref.products,products=_ref$products.products,productsCount=_ref$products.productsCount,getRelations=_ref.getRelations;var _useWidgetSettings=useWidgetSettings(WIDGET_ID),headline=_useWidgetSettings.headline,hidePrice=_useWidgetSettings.hidePrice,hideRating=_useWidgetSettings.hideRating,titleRows=_useWidgetSettings.titleRows,showMoreButton=_useWidgetSettings.showMoreButton,type=_useWidgetSettings.type,_useWidgetSettings$sl=_useWidgetSettings.slidesPerView,slidesPerView=_useWidgetSettings$sl===void 0?2.3:_useWidgetSettings$sl;var _useCurrentProduct=useCurrentProduct(),productId=_useCurrentProduct.productId;useEffect(function(){getRelations();},[getRelations]);if(products.length===0){return null;}return React.createElement("div",{className:styles.container},!!headline&&React.createElement("h3",{className:styles.headline},headline),!!showMoreButton&&productsCount>10&&React.createElement(RelationsSheet,{limit:100,productId:productId,type:type}),React.createElement(Swiper,{slidesPerView:slidesPerView,classNames:{container:styles.sliderContainer}},products.map(function(product){return React.createElement(Swiper.Item,{key:product.id,className:styles.sliderItem},React.createElement(Card,{className:styles.card},React.createElement(ProductCard,{product:product,hidePrice:hidePrice,hideName:false,hideRating:hideRating,titleRows:titleRows})));})));});RelationsSliderContent.defaultProps={products:{products:[],productsCount:0}};export default connect(RelationsSliderContent);

package/product/components/RelationsSlider/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var container=css({position:'relative'});export var headline=css({fontSize:'1rem',fontWeight:500,padding:"0 ".concat(variables.gap.big,"px ").concat(variables.gap.small,"px"),margin:0});export var sliderContainer=css({marginLeft:'auto',marginRight:'auto',position:'relative',padding:"".concat(variables.gap.small,"px 0 ").concat(variables.gap.big,"px")}).toString();export var card=css({height:'100%',margin:"0 ".concat(variables.gap.small,"px")}).toString();export var gridCard=css({height:'100%',margin:0}).toString();export var showMore=css({position:'absolute !important',top:"-".concat(variables.gap.small/2),right:0,padding:"".concat(variables.gap.small/2,"px 0 !important")}).toString();export var sheet=css({maxHeight:"calc(100vh - ".concat(variables.navigator.height,"px)")}).toString();export var gridItem=css({':nth-child(even)':{padding:'8px 0 8px 8px'},':nth-child(odd)':{padding:'8px 8px 8px 0'},':first-child':{padding:'0 8px 8px 0'},':nth-child(2)':{padding:'0 0 8px 8px'},padding:8,width:'50%'}).toString();
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var container=css({position:'relative'});export var headline=css({fontSize:'1rem',fontWeight:500,padding:"0 ".concat(variables.gap.big,"px ").concat(variables.gap.small,"px"),margin:0});export var sliderContainer=css({marginLeft:'auto',marginRight:'auto',position:'relative',padding:"".concat(variables.gap.small,"px 0 ").concat(variables.gap.big,"px")}).toString();export var sliderItem=css({paddingBottom:10}).toString();export var card=css({height:'100%',margin:"0 ".concat(variables.gap.small,"px")}).toString();export var gridCard=css({height:'100%',margin:0}).toString();export var showMore=css({position:'absolute !important',top:"-".concat(variables.gap.small/2),right:0,padding:"".concat(variables.gap.small/2,"px 0 !important")}).toString();export var sheet=css({maxHeight:"calc(100vh - ".concat(variables.navigator.height,"px)")}).toString();export var gridItem=css({':nth-child(even)':{padding:'8px 0 8px 8px'},':nth-child(odd)':{padding:'8px 8px 8px 0'},':first-child':{padding:'0 8px 8px 0'},':nth-child(2)':{padding:'0 0 8px 8px'},padding:8,width:'50%'}).toString();

package/product/components/Swatch/Swatch.js

@@ -2,4 +2,4 @@ import React,{memo}from'react';import PropTypes from'prop-types';import{css}from
  * The swatch component.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var Swatch=function Swatch(_ref){var swatch=_ref.swatch;if(!swatch){return null;}var styles=useWidgetStyles(WIDGET_ID);var classNames={swatch:styles&&styles.swatch?css(styles.swatch).toString():null,item:styles&&styles.item?css(styles.item).toString():null,itemSelected:styles&&styles.itemSelected?css(styles.itemSelected).toString():null};return/*#__PURE__*/React.createElement(SwatchContent,{swatch:swatch,classNames:classNames});};Swatch.defaultProps={swatch:null};export default/*#__PURE__*/memo(Swatch);
+ */var Swatch=function Swatch(_ref){var swatch=_ref.swatch;if(!swatch){return null;}var styles=useWidgetStyles(WIDGET_ID);var classNames={swatch:styles&&styles.swatch?css(styles.swatch).toString():null,item:styles&&styles.item?css(styles.item).toString():null,itemSelected:styles&&styles.itemSelected?css(styles.itemSelected).toString():null};return React.createElement(SwatchContent,{swatch:swatch,classNames:classNames});};Swatch.defaultProps={swatch:null};export default memo(Swatch);

package/product/components/Swatch/SwatchContent.js

@@ -2,4 +2,4 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * The swatch content component.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var SwatchContent=function SwatchContent(_ref){var swatch=_ref.swatch,classNames=_ref.classNames,_onClick=_ref.onClick;if(!swatch){return null;}return/*#__PURE__*/React.createElement(SurroundPortals,{portalName:PRODUCT_SWATCH,portalProps:{swatch:swatch}},/*#__PURE__*/React.createElement("ul",{className:cls(swatchClass,_defineProperty({},classNames.swatch,!!classNames.swatch))},swatch.values.map(function(value){var _cls2;return/*#__PURE__*/React.createElement("li",{"aria-hidden":true,key:value.id,onClick:function onClick(){return _onClick(value.id);},className:cls(itemClass,(_cls2={},_defineProperty(_cls2,classNames.item,!!classNames.item),_defineProperty(_cls2,itemSelectedClass,!!value.selected),_defineProperty(_cls2,classNames.itemSelected,!!value.selected),_cls2)),style:_extends({},value.swatch.color&&{backgroundColor:value.swatch.color},value.swatch.imageUrl&&{backgroundImage:"url(".concat(value.swatch.imageUrl,")")})});})));};SwatchContent.defaultProps={classNames:{},swatch:null,onClick:noop};export default/*#__PURE__*/memo(SwatchContent);
+ */var SwatchContent=function SwatchContent(_ref){var swatch=_ref.swatch,classNames=_ref.classNames,_onClick=_ref.onClick;if(!swatch){return null;}return React.createElement(SurroundPortals,{portalName:PRODUCT_SWATCH,portalProps:{swatch:swatch}},React.createElement("ul",{className:cls(swatchClass,_defineProperty({},classNames.swatch,!!classNames.swatch))},swatch.values.map(function(value){return React.createElement("li",{"aria-hidden":true,key:value.id,onClick:function onClick(){return _onClick(value.id);},className:cls(itemClass,_defineProperty(_defineProperty(_defineProperty({},classNames.item,!!classNames.item),itemSelectedClass,!!value.selected),classNames.itemSelected,!!value.selected)),style:_extends({},value.swatch.color&&{backgroundColor:value.swatch.color},{},value.swatch.imageUrl&&{backgroundImage:"url(".concat(value.swatch.imageUrl,")")})});})));};SwatchContent.defaultProps={classNames:{},swatch:null,onClick:noop};export default memo(SwatchContent);

package/product/components/Swatch/VariantSwatch.js

@@ -2,4 +2,4 @@ import React,{memo}from'react';import PropTypes from'prop-types';import noop fro
  * The variant swatch component.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var VariantSwatch=function VariantSwatch(_ref){var swatch=_ref.swatch,onClick=_ref.onClick;if(!swatch){return null;}var styles=useWidgetStyles(WIDGET_ID);var classNames={swatch:styles&&styles.swatch?css(styles.swatch).toString():null,item:styles&&styles.item?css(styles.item).toString():null,itemSelected:styles&&styles.itemSelected?css(styles.itemSelected).toString():null};return/*#__PURE__*/React.createElement(SwatchContent,{swatch:swatch,classNames:classNames,onClick:onClick});};VariantSwatch.defaultProps={swatch:null,onClick:noop};export default/*#__PURE__*/memo(VariantSwatch);
+ */var VariantSwatch=function VariantSwatch(_ref){var swatch=_ref.swatch,onClick=_ref.onClick;if(!swatch){return null;}var styles=useWidgetStyles(WIDGET_ID);var classNames={swatch:styles&&styles.swatch?css(styles.swatch).toString():null,item:styles&&styles.item?css(styles.item).toString():null,itemSelected:styles&&styles.itemSelected?css(styles.itemSelected).toString():null};return React.createElement(SwatchContent,{swatch:swatch,classNames:classNames,onClick:onClick});};VariantSwatch.defaultProps={swatch:null,onClick:noop};export default memo(VariantSwatch);

package/product/components/Swatch/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;export var swatchClass=css({gridTemplateColumns:'repeat(auto-fill, minmax(12px, 1fr))',gridGap:'2px',display:'grid',marginBottom:'0.2rem'}).toString();export var itemClass=css({minWidth:'12px',width:'12px',maxWidth:'12px',minHeight:'12px',height:'12px',maxHeight:'12px',borderRadius:'50%',borderWidth:'1px',borderStyle:'solid',borderColor:colors.shade4,backgroundSize:'cover'}).toString();export var itemSelectedClass=css({borderColor:colors.accent}).toString();
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;export var swatchClass=css({gridTemplateColumns:'repeat(auto-fill, minmax(12px, 1fr))',gridGap:'2px',display:'grid',marginBottom:'0.2rem'}).toString();export var itemClass=css({minWidth:'12px',width:'12px',maxWidth:'12px',minHeight:'12px',height:'12px',maxHeight:'12px',borderRadius:'50%',borderWidth:'1px',borderStyle:'solid',borderColor:colors.shade4,backgroundSize:'cover'}).toString();export var itemSelectedClass=css({borderColor:"var(--color-secondary, ".concat(colors.accent,")")}).toString();

package/product/components/Swatches/Swatches.js

@@ -2,4 +2,4 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * Renders only product swatches from a list of characteristics.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var Swatches=function Swatches(_ref){var productId=_ref.productId,characteristics=_ref.characteristics;if(!isBeta()){return null;}if(!characteristics){return null;}var settings=useWidgetSettings(WIDGET_ID);var swatches=characteristics.filter(function(c){return c.swatch===true;});if(settings.filter&&settings.filter.length){swatches=swatches.filter(function(swatch){return settings.filter.includes(swatch.id);});}if(!swatches){return null;}if(settings.maxItemCount){swatches=swatches.map(function(swatch){return _extends({},swatch,{values:swatch.values.slice(0,settings.maxItemCount)});});}return/*#__PURE__*/React.createElement(SurroundPortals,{portalName:PRODUCT_SWATCHES,portalProps:{characteristics:characteristics}},/*#__PURE__*/React.createElement("div",{className:swatchesClass},swatches.map(function(swatch){return/*#__PURE__*/React.createElement(Swatch,{key:"".concat(productId,".").concat(swatch.id),swatch:swatch});})));};Swatches.defaultProps={characteristics:null};export default connect(/*#__PURE__*/memo(Swatches));
+ */var Swatches=function Swatches(_ref){var productId=_ref.productId,characteristics=_ref.characteristics;if(!isBeta()){return null;}if(!characteristics){return null;}var settings=useWidgetSettings(WIDGET_ID);var swatches=characteristics.filter(function(c){return c.swatch===true;});if(settings.filter&&settings.filter.length){swatches=swatches.filter(function(swatch){return settings.filter.includes(swatch.id);});}if(!swatches){return null;}if(settings.maxItemCount){swatches=swatches.map(function(swatch){return _extends({},swatch,{values:swatch.values.slice(0,settings.maxItemCount)});});}return React.createElement(SurroundPortals,{portalName:PRODUCT_SWATCHES,portalProps:{characteristics:characteristics}},React.createElement("div",{className:swatchesClass},swatches.map(function(swatch){return React.createElement(Swatch,{key:"".concat(productId,".").concat(swatch.id),swatch:swatch});})));};Swatches.defaultProps={characteristics:null};export default connect(memo(Swatches));

package/product/components/UnitQuantityPicker/CartUnitQuantityPicker.js

@@ -0,0 +1,4 @@
+import React from'react';import PropTypes from'prop-types';import noop from'lodash/noop';import UnitQuantityPicker from"./UnitQuantityPicker";import{small,big}from"./styles";/**
+ * @param {Object} props The component props.
+ * @returns {JSX}
+ */var CartUnitQuantityPicker=function CartUnitQuantityPicker(_ref){var unit=_ref.unit,value=_ref.value,onChange=_ref.onChange,classNames=_ref.classNames,hasCatchWeight=_ref.hasCatchWeight;var hasUnitWithDecimals=unit&&hasCatchWeight||false;var withDecimals=classNames.withDecimals,withoutDecimals=classNames.withoutDecimals;return React.createElement(UnitQuantityPicker,{className:!hasUnitWithDecimals?withDecimals:withoutDecimals,unit:hasUnitWithDecimals?unit:null,maxDecimals:hasUnitWithDecimals?2:0,incrementStep:hasUnitWithDecimals?0.25:1,decrementStep:hasUnitWithDecimals?0.25:1,onChange:onChange,value:value});};CartUnitQuantityPicker.defaultProps={unit:null,onChange:noop,classNames:{withDecimals:big,withoutDecimals:small},hasCatchWeight:false};export default CartUnitQuantityPicker;

package/product/components/UnitQuantityPicker/ProductUnitQuantityPicker.js

@@ -1,9 +1,6 @@
-import React,{useContext,useEffect,useMemo}from'react';import PropTypes from'prop-types';import{css}from'glamor';import classNames from'classnames';import{SurroundPortals}from'@shopgate/engage/components';import{themeConfig}from'@shopgate/engage';import{PRODUCT_UNIT_QUANTITY_PICKER,ProductContext}from'@shopgate/engage/product';import{withCurrentProduct,useWidgetSettings}from'@shopgate/engage/core';import UnitQuantityPicker from"./UnitQuantityPicker";import connect from"./ProductUnitQuantityPicker.connector";var variables=themeConfig.variables;var styles={root:css({marginBottom:variables.gap.small,marginTop:'0px',justifyContent:'space-evenly'}).toString(),qtyContainer:css({marginBottom:variables.gap.small}).toString(),qtyWrapper:css({width:'100%',padding:'0'}).toString()};/**
+import React,{useContext,useMemo}from'react';import PropTypes from'prop-types';import{css}from'glamor';import classNames from'classnames';import{I18n,SurroundPortals}from'@shopgate/engage/components';import{themeConfig}from'@shopgate/engage';import{PRODUCT_UNIT_QUANTITY_PICKER,ProductContext}from'@shopgate/engage/product';import{hasNewServices}from'@shopgate/engage/core/helpers';import{withCurrentProduct}from'@shopgate/engage/core/hocs';import{useWidgetSettings}from'@shopgate/engage/core/hooks';import UnitQuantityPicker from"./UnitQuantityPicker";import connect from"./ProductUnitQuantityPicker.connector";import{small,big}from"./styles";var variables=themeConfig.variables;var styles={root:css({padding:variables.gap.big}),title:css({fontSize:'1rem',fontWeight:500,marginBottom:'0.5rem'}).toString()};/**
  * Renders the quantity picker enriched with current product data.
  * @param {Object} props Props
  * @returns {JSX}
- */var ProductUnitQuantityPicker=function ProductUnitQuantityPicker(_ref){var children=_ref.children,className=_ref.className,product=_ref.product,disabled=_ref.disabled,stockInfo=_ref.stockInfo;var _ref2=useWidgetSettings('@shopgate/engage/product/components/UnitQuantityPicker')||{},_ref2$show=_ref2.show,show=_ref2$show===void 0?false:_ref2$show;if(!show){return null;}var _useContext=useContext(ProductContext),quantity=_useContext.quantity,setQuantity=_useContext.setQuantity;var _useMemo=useMemo(function(){var min;var max;if(stockInfo){if(stockInfo.minOrderQuantity>0){min=stockInfo.minOrderQuantity;}if(stockInfo.maxOrderQuantity>0){max=stockInfo.maxOrderQuantity;}}return{minValue:min,maxValue:max};},[stockInfo]),minValue=_useMemo.minValue,maxValue=_useMemo.maxValue;/**
-   * Validates an value based on minValue & maxValue and corrects it if necessary
-   * @param {number} val The value to be tested / adjusted
-   * @returns {number}
-   */var validateQuantity=function validateQuantity(val){if(minValue&&val<minValue)return minValue;if(maxValue&&val>maxValue)return maxValue;return val;};useEffect(function(){var validatedQuantity=validateQuantity(quantity);if(validatedQuantity!==quantity){setQuantity(validatedQuantity);}},[quantity,minValue,maxValue,validateQuantity,setQuantity]);if(!product){return null;}var unit=product.unit,hasCatchWeight=product.hasCatchWeight;var hasUnitWithDecimals=unit&&hasCatchWeight||false;return/*#__PURE__*/React.createElement(SurroundPortals,{portalName:PRODUCT_UNIT_QUANTITY_PICKER},/*#__PURE__*/React.createElement("div",{className:classNames(styles.root,className)},/*#__PURE__*/React.createElement("div",{className:styles.qtyWrapper},/*#__PURE__*/React.createElement(UnitQuantityPicker,{className:styles.qtyContainer,unit:hasUnitWithDecimals?unit:null,maxDecimals:hasUnitWithDecimals?2:0,incrementStep:hasUnitWithDecimals?0.25:1,decrementStep:hasUnitWithDecimals?0.25:1,onChange:setQuantity,value:quantity,disabled:disabled,minValue:minValue,maxValue:maxValue})),children&&/*#__PURE__*/React.createElement("div",null,children)));};ProductUnitQuantityPicker.defaultProps={disabled:false,product:null,stockInfo:null,children:null,className:null};export default withCurrentProduct(connect(ProductUnitQuantityPicker));
+ */var ProductUnitQuantityPicker=function ProductUnitQuantityPicker(_ref){var children=_ref.children,className=_ref.className,classes=_ref.classes,product=_ref.product,disabled=_ref.disabled,stockInfo=_ref.stockInfo,size=_ref.size,quantityLabel=_ref.quantityLabel,hideHeadline=_ref.hideHeadline;var _useWidgetSettings=useWidgetSettings('@shopgate/engage/product/components/UnitQuantityPicker'),_useWidgetSettings$sh=_useWidgetSettings.show,show=_useWidgetSettings$sh===void 0?hasNewServices():_useWidgetSettings$sh;var _useContext=useContext(ProductContext),quantity=_useContext.quantity,setQuantity=_useContext.setQuantity;var _useMemo=useMemo(function(){var min;var max;if((stockInfo===null||stockInfo===void 0?void 0:stockInfo.minOrderQuantity)>0){min=stockInfo.minOrderQuantity;}if((stockInfo===null||stockInfo===void 0?void 0:stockInfo.maxOrderQuantity)>0){max=stockInfo.maxOrderQuantity;}return{minValue:min,maxValue:max};},[stockInfo]),minValue=_useMemo.minValue,maxValue=_useMemo.maxValue;if(!product||!show){return null;}var unit=product.unit,hasCatchWeight=product.hasCatchWeight;var hasUnitWithDecimals=unit&&hasCatchWeight||false;return React.createElement(SurroundPortals,{portalName:PRODUCT_UNIT_QUANTITY_PICKER},React.createElement("div",{className:classNames(styles.root,className)},React.createElement("div",null,!hideHeadline&&React.createElement("div",{className:styles.title},React.createElement(I18n.Text,{string:"product.sections.quantity"})),React.createElement(UnitQuantityPicker// eslint-disable-next-line no-nested-ternary
+,{className:(classes===null||classes===void 0?void 0:classes.picker)?classes.picker:hasUnitWithDecimals?big:small,unit:hasUnitWithDecimals?unit:null,maxDecimals:hasUnitWithDecimals?2:0,incrementStep:hasUnitWithDecimals?0.25:1,decrementStep:hasUnitWithDecimals?0.25:1,onChange:setQuantity,value:quantity,disabled:disabled,minValue:minValue,maxValue:maxValue,size:size,quantityLabel:quantityLabel})),children&&React.createElement("div",null,children)));};ProductUnitQuantityPicker.defaultProps={disabled:false,product:null,size:undefined,stockInfo:null,children:null,className:null,quantityLabel:null,classes:{picker:null},hideHeadline:false};export default withCurrentProduct(connect(ProductUnitQuantityPicker));

package/product/components/UnitQuantityPicker/UnitQuantityPicker.js

@@ -1,14 +1,12 @@
-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,{useCallback,useEffect}from'react';import PropTypes from'prop-types';import{css}from'glamor';import classNames from'classnames';import{themeConfig}from'@shopgate/engage';import{RippleButton,QuantityInput,I18n}from'@shopgate/engage/components';import{useWidgetSettings,withCurrentProduct,withWidgetSettings}from'@shopgate/engage/core';import{connect}from'react-redux';import{getCurrentProductPropertyByLabel}from'@shopgate/engage/product/selectors/product';var colors=themeConfig.colors;// default dimension to be used for button and input
-// in order for them to look with the same size
-var defaultDimension=36;var styles={root:css({display:'flex',flexDirection:'row',width:'100%'}).toString(),input:function input(color,bgColor,hasLabel){return css({padding:'0',flex:1,fontSize:16,fontWeight:600,height:defaultDimension,lineHeight:"".concat(defaultDimension,"px"),width:'100%',minWidth:'32px',backgroundColor:bgColor,marginLeft:hasLabel?'-16px':'0',textAlign:hasLabel?'left':'center',color:color,outline:'none','&:focus':{outline:'none'}}).toString();},inputWrapper:css({width:'100%'}),button:function button(color,bgColor){return css({backgroundColor:"".concat(bgColor," !important"),color:"".concat(color," !important"),width:defaultDimension,' &&':{minWidth:defaultDimension,padding:0},height:defaultDimension}).toString();},buttonRipple:css({padding:0,// we use this calculation in order to make the font size
-// relative to the default dimension. number 28 was the
-// one we used before and it looked "normal" on desktop
-fontSize:"".concat(Math.floor(defaultDimension/28*100),"%"),height:defaultDimension,lineHeight:"".concat(defaultDimension-1,"px")}).toString(),buttonNoRadiusLeft:css({' &&':{borderTopLeftRadius:0,borderBottomLeftRadius:0}}).toString(),buttonNoRadiusRight:css({' &&':{borderTopRightRadius:0,borderBottomRightRadius:0}}).toString(),disabled:css({' > div':{padding:0}}).toString(),quantityLabelWrapper:function quantityLabelWrapper(bgColor){return css({display:'flex',alignItems:'center',backgroundColor:bgColor,width:'100%',lineHeight:defaultDimension,height:defaultDimension}).toString();},quantityLabel:function quantityLabel(color){return css({fontSize:'16px',textAlign:'center',padding:'0',flex:1,marginRight:'8px',marginLeft:'-8px',color:color}).toString();}};/**
+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;}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React,{useCallback,useEffect,useState,useRef,useMemo}from'react';import PropTypes from'prop-types';import{i18n,hasNewServices}from'@shopgate/engage/core/helpers';import{UIEvents}from'@shopgate/engage/core';import{useWidgetSettings}from'@shopgate/engage/core/hooks';import{css}from'glamor';import classNames from'classnames';import{themeConfig}from'@shopgate/engage';import{RippleButton,QuantityInput}from'@shopgate/engage/components';import{broadcastLiveMessage}from'@shopgate/engage/a11y/helpers';var variables=themeConfig.variables,colors=themeConfig.colors;var styles={root:css({display:'flex',flexDirection:'row',position:'relative',zIndex:5}).toString(),backdrop:css({zIndex:4,top:0,left:0,height:'100%',width:'100%',position:'fixed'}),inputWrapper:function inputWrapper(_ref){var inputColor=_ref.inputColor,inputBgColor=_ref.inputBgColor;return css(_extends({display:'flex',alignItems:'center',width:'100%',fontSize:16,backgroundColor:"var(--color-background-accent, ".concat(colors.shade8,")")},inputColor&&{color:"".concat(inputColor," !important")},{},inputBgColor&&{backgroundColor:"".concat(inputBgColor," !important")},{' .quantity-label':{paddingLeft:variables.gap.small,paddingRight:4,textAlign:'center',width:'calc(100% - 32px)',textOverflow:'ellipsis',overflow:'hidden',whiteSpace:'nowrap'}}));},input:function input(_ref2){var inputColor=_ref2.inputColor,inputBgColor=_ref2.inputBgColor,hasLabel=_ref2.hasLabel,size=_ref2.size;var fontWeight=size==='large'?600:'normal';return css(_extends({padding:"0 ".concat(variables.gap.small,"px"),textAlign:hasLabel?'left':'center',fontWeight:fontWeight,height:'100%',width:'100%'},inputColor&&{color:"".concat(inputColor)},{},inputBgColor&&{backgroundColor:"".concat(inputBgColor," !important")},{},hasLabel&&{paddingLeft:0},{outline:'none','&:focus:not(:focus-visible)':{outline:'none'}})).toString();},button:function button(_ref3){var _ref3$size=_ref3.size,size=_ref3$size===void 0?'default':_ref3$size,buttonColor=_ref3.buttonColor,buttonBgColor=_ref3.buttonBgColor;var sizeValue=size==='large'?36:28;return css({width:sizeValue,' &&':{minWidth:sizeValue,padding:0},height:sizeValue,fontSize:"".concat(Math.floor(sizeValue/28*100),"% !important"),'&:not(:disabled)':_extends({},buttonColor&&{color:"".concat(buttonColor," !important")},{},buttonBgColor&&{backgroundColor:"".concat(buttonBgColor," !important")})});},buttonRipple:css({padding:0}).toString(),buttonNoRadiusLeft:css({' &&':{borderTopLeftRadius:0,borderBottomLeftRadius:0}}).toString(),buttonNoRadiusRight:css({' &&':{borderTopRightRadius:0,borderBottomRightRadius:0}}).toString(),disabled:css({' > div':{padding:0}}).toString()};/**
  * A Quantity Picker with unit support.
- * @returns {JSX}
- */var UnitQuantityPicker=function UnitQuantityPicker(_ref){var className=_ref.className,onChange=_ref.onChange,value=_ref.value,allowDecrement=_ref.allowDecrement,allowIncrement=_ref.allowIncrement,allowZero=_ref.allowZero,decrementStep=_ref.decrementStep,incrementStep=_ref.incrementStep,maxDecimals=_ref.maxDecimals,unit=_ref.unit,disabled=_ref.disabled,minValue=_ref.minValue,maxValue=_ref.maxValue,productProperty=_ref.productProperty;var _ref2=useWidgetSettings('@shopgate/engage/product/components/UnitQuantityPicker')||{},_ref2$buttonColor=_ref2.buttonColor,buttonColor=_ref2$buttonColor===void 0?colors.shade8:_ref2$buttonColor,_ref2$buttonBgColor=_ref2.buttonBgColor,buttonBgColor=_ref2$buttonBgColor===void 0?colors.primary:_ref2$buttonBgColor,_ref2$inputColor=_ref2.inputColor,inputColor=_ref2$inputColor===void 0?colors.dark:_ref2$inputColor,_ref2$inputBgColor=_ref2.inputBgColor,inputBgColor=_ref2$inputBgColor===void 0?colors.shade8:_ref2$inputBgColor,_ref2$showLabel=_ref2.showLabel,showLabel=_ref2$showLabel===void 0?true:_ref2$showLabel;var label=/*#__PURE__*/React.createElement(I18n.Text,{string:"product.sections.quantity"});if(productProperty&&productProperty.value&&productProperty.value!==''){label=productProperty.value;}var handleDecrement=useCallback(function(){var newValue=value-decrementStep;if(newValue<=0&&!allowZero||minValue&&newValue<minValue){newValue=value;}onChange(newValue);},[allowZero,decrementStep,minValue,onChange,value]);var handleIncrement=useCallback(function(){var newValue=value+incrementStep;if(maxValue&&newValue>maxValue){newValue=value;}onChange(newValue);},[incrementStep,maxValue,onChange,value]);useEffect(function(){if(minValue&&value<minValue){onChange(minValue);}if(maxValue&&value>maxValue){onChange(maxValue);}/* eslint-disable react-hooks/exhaustive-deps */},[]);/* eslint-enable react-hooks/exhaustive-deps */return/*#__PURE__*/React.createElement("div",{className:"".concat(styles.root," ").concat(className)},/*#__PURE__*/React.createElement(RippleButton,{rippleClassName:styles.buttonRipple,className:classNames(styles.button(buttonColor,buttonBgColor),styles.buttonNoRadiusRight,_defineProperty({},styles.disabled,disabled)),type:"secondary",disabled:!allowDecrement||disabled,onClick:handleDecrement,rippleSize:defaultDimension},"-"),/*#__PURE__*/React.createElement("div",{className:styles.quantityLabelWrapper(inputBgColor)},showLabel&&/*#__PURE__*/React.createElement("div",{"aria-hidden":true,className:styles.quantityLabel(inputColor)},label),/*#__PURE__*/React.createElement(QuantityInput,{className:styles.input(inputColor,inputBgColor,showLabel),value:value,onChange:onChange,maxDecimals:maxDecimals,unit:unit,disabled:disabled,minValue:minValue,maxValue:maxValue})),/*#__PURE__*/React.createElement(RippleButton,{type:"secondary",disabled:!allowIncrement||disabled,rippleClassName:styles.buttonRipple,className:classNames(styles.button(buttonColor,buttonBgColor),styles.buttonNoRadiusLeft,_defineProperty({},styles.disabled,disabled)),onClick:handleIncrement},"+"));};UnitQuantityPicker.defaultProps={className:'',allowZero:false,allowIncrement:true,allowDecrement:true,incrementStep:0.25,decrementStep:0.25,maxDecimals:2,unit:null,disabled:false,minValue:null,maxValue:null,productProperty:null};/**
- * maps the state to props
- * @param {Object} state state object
- * @param {Object} props property object
- * @return {{productProperty: *}}
- */var mapStateToProps=function mapStateToProps(state,props){return{productProperty:getCurrentProductPropertyByLabel(state,props)};};export default withWidgetSettings(withCurrentProduct(connect(mapStateToProps)(UnitQuantityPicker)),'@shopgate/engage/product/components/UnitQuantityPicker');
+ * @returns {JSX.Element}
+ */var UnitQuantityPicker=function UnitQuantityPicker(_ref4){var className=_ref4.className,onChange=_ref4.onChange,value=_ref4.value,allowDecrement=_ref4.allowDecrement,allowIncrement=_ref4.allowIncrement,allowZero=_ref4.allowZero,decrementStep=_ref4.decrementStep,incrementStep=_ref4.incrementStep,maxDecimals=_ref4.maxDecimals,unit=_ref4.unit,disabled=_ref4.disabled,minValue=_ref4.minValue,maxValue=_ref4.maxValue,size=_ref4.size,toggleTabBarOnFocus=_ref4.toggleTabBarOnFocus,quantityLabel=_ref4.quantityLabel;var widgetDefaults=useMemo(function(){if(hasNewServices()){// The widget configuration was introduced with CCP-2449 in PWA6. It's inactive for now
+// when running on new services, since for those shops it never existed and the default
+// values would introduce breaking changes.
+return{};}return{buttonColor:colors.shade8,buttonBgColor:colors.primary,inputColor:colors.dark,inputBgColor:colors.shade8,showLabel:true};},[]);var _useWidgetSettings=useWidgetSettings('@shopgate/engage/product/components/UnitQuantityPicker'),_useWidgetSettings$bu=_useWidgetSettings.buttonColor,buttonColor=_useWidgetSettings$bu===void 0?widgetDefaults.buttonColor:_useWidgetSettings$bu,_useWidgetSettings$bu2=_useWidgetSettings.buttonBgColor,buttonBgColor=_useWidgetSettings$bu2===void 0?widgetDefaults.buttonBgColor:_useWidgetSettings$bu2,_useWidgetSettings$in=_useWidgetSettings.inputColor,inputColor=_useWidgetSettings$in===void 0?widgetDefaults.inputColor:_useWidgetSettings$in,_useWidgetSettings$in2=_useWidgetSettings.inputBgColor,inputBgColor=_useWidgetSettings$in2===void 0?widgetDefaults.inputBgColor:_useWidgetSettings$in2,_useWidgetSettings$sh=_useWidgetSettings.showLabel,showLabel=_useWidgetSettings$sh===void 0?widgetDefaults.showLabel:_useWidgetSettings$sh;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isFocused=_useState2[0],setIsFocused=_useState2[1];var inputRef=useRef(null);var handleOnFocus=useCallback(function(){setIsFocused(true);if(toggleTabBarOnFocus){UIEvents.emit('HIDE_TAB_BAR');}},[toggleTabBarOnFocus]);var handleOnBlur=useCallback(function(){setIsFocused(false);if(toggleTabBarOnFocus){UIEvents.emit('SHOW_TAB_BAR');}},[toggleTabBarOnFocus]);var handleManualChange=useCallback(function(newValue){onChange(newValue);var message;if(newValue<value){message='product.decreased_quantity_to';}if(newValue>value){message='product.increased_quantity_to';}if(message){broadcastLiveMessage(message,{params:{quantity:newValue}});}},[onChange,value]);var handleDecrement=useCallback(function(event){var newValue=value-decrementStep;if(newValue<=0&&!allowZero||minValue&&newValue<minValue){newValue=value;}handleManualChange(newValue);event.preventDefault();event.stopPropagation();},[allowZero,decrementStep,handleManualChange,minValue,value]);var handleIncrement=useCallback(function(event){var newValue=value+incrementStep;if(maxValue&&newValue>maxValue){newValue=value;}handleManualChange(newValue);event.preventDefault();event.stopPropagation();},[handleManualChange,incrementStep,maxValue,value]);useEffect(function(){if(minValue&&value<minValue){onChange(minValue);}if(maxValue&&value>maxValue){onChange(maxValue);}/* eslint-disable react-hooks/exhaustive-deps */},[]);/* eslint-enable react-hooks/exhaustive-deps */ /**
+   * Handler for pressing "enter" on Android
+   */var handleKeyDown=useCallback(function(event){if(event.key==='Enter'&&inputRef.current!==null){try{inputRef.current.blur();}catch(e){// nothing to do here
+}}},[]);return React.createElement(React.Fragment,null,isFocused&&// Show hidden backdrop when focused to avoid side effects when user blurs the input
+// e.g. opening links unintended
+React.createElement("div",{className:styles.backdrop}),React.createElement("div",{className:"".concat(styles.root," ").concat(className)},React.createElement(RippleButton,{type:"secondary",disabled:!allowDecrement||disabled,rippleClassName:styles.buttonRipple,className:classNames(styles.button({size:size,buttonColor:buttonColor,buttonBgColor:buttonBgColor}),styles.buttonNoRadiusRight,_defineProperty({},styles.disabled,!allowDecrement||disabled)),onClick:handleDecrement,"aria-label":i18n.text('product.decrease_quantity')},"-"),React.createElement("span",{className:styles.inputWrapper({inputColor:inputColor,inputBgColor:inputBgColor})},quantityLabel&&showLabel&&React.createElement("span",{"aria-hidden":true,className:"quantity-label"},quantityLabel),React.createElement(QuantityInput,{className:styles.input({inputColor:inputColor,inputBgColor:inputBgColor,hasLabel:showLabel&&!!quantityLabel,size:size}),value:value,onChange:onChange,maxDecimals:maxDecimals,unit:unit,disabled:disabled,minValue:minValue,maxValue:maxValue,"aria-label":i18n.text('product.quantity'),onFocus:handleOnFocus,onBlur:handleOnBlur,onKeyDown:handleKeyDown,ref:inputRef})),React.createElement(RippleButton,{type:"secondary",disabled:!allowIncrement||disabled,rippleClassName:styles.buttonRipple,className:classNames(styles.button({size:size,buttonColor:buttonColor,buttonBgColor:buttonBgColor}),styles.buttonNoRadiusLeft,_defineProperty({},styles.disabled,!allowIncrement||disabled)),onClick:handleIncrement,"aria-label":i18n.text('product.increase_quantity')},"+")));};UnitQuantityPicker.defaultProps={className:'',allowZero:false,allowIncrement:true,allowDecrement:true,incrementStep:0.25,decrementStep:0.25,maxDecimals:2,unit:null,disabled:false,minValue:null,size:'default',maxValue:null,quantityLabel:null,toggleTabBarOnFocus:false};export default UnitQuantityPicker;

package/product/components/UnitQuantityPicker/UnitQuantityPickerWithSection.js

@@ -1,4 +1,7 @@
-import React from'react';import{css}from'glamor';import PropTypes from'prop-types';import{themeConfig}from'@shopgate/engage';import{useWidgetSettings}from"../../../core";import{ProductUnitQuantityPicker}from"./index";import{OrderQuantityHint}from"../../index";import{Section}from"../../../a11y";var variables=themeConfig.variables;var styles={quantityPicker:css({display:'flex',flexDirection:'column',alignItems:'flex-start',padding:variables.gap.big}).toString(),quantityHint:css({marginBottom:-4,paddingLeft:16}).toString()};/**
+import React,{useMemo}from'react';import{css}from'glamor';import PropTypes from'prop-types';import{connect}from'react-redux';import{hasNewServices,i18n}from'@shopgate/engage/core/helpers';import{useWidgetSettings}from'@shopgate/engage/core/hooks';import{withCurrentProduct,withWidgetSettings}from'@shopgate/engage/core/hocs';import{Section}from'@shopgate/engage/a11y/components';import{makeGetCurrentProductPropertyByLabel}from'@shopgate/engage/product/selectors/product';import ProductUnitQuantityPicker from"./ProductUnitQuantityPicker";import OrderQuantityHint from"../OrderQuantityHint";var styles={quantityPicker:css({display:'flex',flexDirection:'column'}).toString(),quantityPickerPicker:css({width:'100%'}).toString(),quantityHint:css({'&:not(:empty)':{paddingTop:8,marginBottom:-4}}).toString()};/**
  * A Quantity Picker with unit support.
  * @returns {JSX.Element}
- */var UnitQuantityPickerWithSection=function UnitQuantityPickerWithSection(_ref){var productId=_ref.productId,variantId=_ref.variantId;var _ref2=useWidgetSettings('@shopgate/engage/product/components/UnitQuantityPicker')||{},_ref2$show=_ref2.show,show=_ref2$show===void 0?false:_ref2$show;if(!show){return null;}return/*#__PURE__*/React.createElement(Section,{title:"product.sections.quantity"},/*#__PURE__*/React.createElement(ProductUnitQuantityPicker,{className:styles.quantityPicker},/*#__PURE__*/React.createElement(OrderQuantityHint,{productId:variantId||productId,className:styles.quantityHint})));};UnitQuantityPickerWithSection.defaultProps={productId:null,variantId:null};export default UnitQuantityPickerWithSection;
+ */var UnitQuantityPickerWithSection=function UnitQuantityPickerWithSection(_ref){var productId=_ref.productId,variantId=_ref.variantId,productProperty=_ref.productProperty;var _useWidgetSettings=useWidgetSettings('@shopgate/engage/product/components/UnitQuantityPicker'),_useWidgetSettings$sh=_useWidgetSettings.show,show=_useWidgetSettings$sh===void 0?hasNewServices():_useWidgetSettings$sh;var quantityLabel=useMemo(function(){var _ref2;if(!show){return null;}var label=i18n.text('product.sections.quantity');if(((_ref2=productProperty===null||productProperty===void 0?void 0:productProperty.value)!==null&&_ref2!==void 0?_ref2:'')!==''){label=productProperty.value;}return label;},[productProperty,show]);if(!show){return null;}return React.createElement(Section,{title:"product.sections.quantity"},React.createElement(ProductUnitQuantityPicker,{className:styles.quantityPicker,classes:{picker:styles.quantityPickerPicker},size:"large",quantityLabel:quantityLabel,hideHeadline:true},React.createElement(OrderQuantityHint,{productId:variantId||productId,className:styles.quantityHint})));};UnitQuantityPickerWithSection.defaultProps={productId:null,variantId:null,productProperty:null};/**
+ * Creates the mapStateToProps connector function.
+ * @returns {Function}
+ */var makeMapStateToProps=function makeMapStateToProps(){var getCurrentProductPropertyByLabel=makeGetCurrentProductPropertyByLabel();return function(state,props){return{productProperty:getCurrentProductPropertyByLabel(state,props)};};};export default withWidgetSettings(withCurrentProduct(connect(makeMapStateToProps)(UnitQuantityPickerWithSection)),'@shopgate/engage/product/components/UnitQuantityPicker');

package/product/components/UnitQuantityPicker/index.js

@@ -1 +1 @@
-export{default as UnitQuantityPicker}from"./UnitQuantityPicker";export{default as ProductUnitQuantityPicker}from"./ProductUnitQuantityPicker";
+export{default as CartUnitQuantityPicker}from"./CartUnitQuantityPicker";export{default as ProductUnitQuantityPicker}from"./ProductUnitQuantityPicker";export{default as UnitQuantityPicker}from"./UnitQuantityPicker";export{default as UnitQuantityPickerWithSection}from"./UnitQuantityPickerWithSection";

package/product/components/UnitQuantityPicker/styles.js

@@ -0,0 +1 @@
+import{css}from'glamor';export var small=css({width:120}).toString();export var big=css({width:170}).toString();

package/product/components/context.js

@@ -1 +1 @@
-import React from'react';export var ProductContext=/*#__PURE__*/React.createContext();
+import React from'react';export var ProductContext=React.createContext();export{default as VariantContext}from"./ProductCharacteristics/context";

package/product/components/index.js

@@ -0,0 +1 @@
+export*from"./Availability";export{default as Characteristics}from"./Characteristics";export{default as Description}from"./Description";export{default as EffectivityDates}from"./EffectivityDates";export{default as MapPriceHint}from"./MapPriceHint";export*from"./Media";export{default as MediaSlider}from"./MediaSlider";export{default as Options}from"./Options";export{SelectOption,TextOption}from"./Options";export{default as OrderQuantityHint}from"./OrderQuantityHint";export{default as PriceDifference}from"./PriceDifference";export*from"./PriceInfo";export{default as ProductBadges}from"./ProductBadges";export{default as ProductCard}from"./ProductCard";export{default as ProductCharacteristics}from"./ProductCharacteristics";export{default as ProductDiscountBadge}from"./ProductDiscountBadge";export{default as ProductGridPrice}from"./ProductGridPrice";export{default as ProductImage}from"./ProductImage";export{default as ProductList}from"./ProductList";export*from"./ProductName";export{default as ProductProperties}from"./ProductProperties/ProductProperties";export{default as ProductSlider}from"./ProductSlider";export*from"./ProductVariants";export{default as QuantityPicker}from"./QuantityPicker";export{default as Rating}from"./Rating";export*from"./RelationsSlider";export*from"./Swatch";export*from"./Swatches";export*from"./UnitQuantityPicker";

package/product/constants/index.js

@@ -1,2 +1,3 @@
 // MEDIA TYPES
-export var MEDIA_TYPE_IMAGE='image';export var MEDIA_TYPE_VIDEO='video';
+export var MEDIA_TYPE_IMAGE='image';export var MEDIA_TYPE_VIDEO='video';// AVAILABILITY TYPES
+export var AVAILABILITY_TYPE_COMING_SOON='comingSoon';export var AVAILABILITY_TYPE_AVAILABLE='available';export var AVAILABILITY_TYPE_LIMITED_AVAILABILITY='limitedAvailability';export var AVAILABILITY_TYPE_NOT_AVAILABLE='notAvailable';export var AVAILABILITY_TYPE_CUSTOM_AVAILABILITY='customAvailability';export var availabilityTypes=[AVAILABILITY_TYPE_AVAILABLE,AVAILABILITY_TYPE_LIMITED_AVAILABILITY,AVAILABILITY_TYPE_NOT_AVAILABLE,AVAILABILITY_TYPE_CUSTOM_AVAILABILITY];export*from'@shopgate/pwa-common-commerce/product/constants/index';export*from'@shopgate/pwa-common-commerce/product/constants/Pipelines';export*from'@shopgate/pwa-common-commerce/product/constants/Portals';

package/product/contexts/index.js

@@ -0,0 +1 @@
+export{ProductContext,VariantContext}from"../components/context";