@shopgate/engage 7.29.0-alpha.9 → 7.29.1-beta.1

package/components/Typography/Typography.js

@@ -8,4 +8,4 @@ var _excluded=["align","className","color","component","display","gutterBottom",
  * Creates the styles for the Typography component.
  * @param {Theme} theme The theme object.
  * @returns {Object} The styles object.
- */export var styles=function styles(theme){return{/* Styles applied to the root element. */root:{margin:0},/* Styles applied to the root element if `variant="body2"`. */body2:theme.typography.body2,/* Styles applied to the root element if `variant="body1"`. */body1:theme.typography.body1,/* Styles applied to the root element if `variant="caption"`. */caption:theme.typography.caption,/* Styles applied to the root element if `variant="button"`. */button:theme.typography.button,/* Styles applied to the root element if `variant="h1"`. */h1:theme.typography.h1,/* Styles applied to the root element if `variant="h2"`. */h2:theme.typography.h2,/* Styles applied to the root element if `variant="h3"`. */h3:theme.typography.h3,/* Styles applied to the root element if `variant="h4"`. */h4:theme.typography.h4,/* Styles applied to the root element if `variant="h5"`. */h5:theme.typography.h5,/* Styles applied to the root element if `variant="h6"`. */h6:theme.typography.h6,/* Styles applied to the root element if `variant="subtitle1"`. */subtitle1:theme.typography.subtitle1,/* Styles applied to the root element if `variant="subtitle2"`. */subtitle2:theme.typography.subtitle2,/* Styles applied to the root element if `variant="overline"`. */overline:theme.typography.overline,/* Styles applied to the root element if `variant="srOnly"`. Only accessible to screen readers. */srOnly:{position:'absolute',height:1,width:1,overflow:'hidden'},/* Styles applied to the root element if `align="left"`. */alignLeft:{textAlign:'left'},/* Styles applied to the root element if `align="center"`. */alignCenter:{textAlign:'center'},/* Styles applied to the root element if `align="right"`. */alignRight:{textAlign:'right'},/* Styles applied to the root element if `align="justify"`. */alignJustify:{textAlign:'justify'},/* Styles applied to the root element if `nowrap={true}`. */noWrap:{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'},/* Styles applied to the root element if `gutterBottom={true}`. */gutterBottom:{marginBottom:'0.35em'},/* Styles applied to the root element if `paragraph={true}`. */paragraph:{marginBottom:16},/* Styles applied to the root element if `color="inherit"`. */colorInherit:{color:'inherit'},/* Styles applied to the root element if `color="primary"`. */colorPrimary:{color:theme.palette.primary.main},/* Styles applied to the root element if `color="secondary"`. */colorSecondary:{color:theme.palette.secondary.main},/* Styles applied to the root element if `color="textPrimary"`. */colorTextPrimary:{color:theme.palette.text.primary},/* Styles applied to the root element if `color="textSecondary"`. */colorTextSecondary:{color:theme.palette.text.secondary},colorTextTertiary:{color:theme.palette.text.tertiary},/* Styles applied to the root element if `color="error"`. */colorError:{color:theme.palette.error.main},/* Styles applied to the root element if `color="warning"` */colorWarning:{color:theme.palette.warning.main},/* Styles applied to the root element if `color="success"` */colorSuccess:{color:theme.palette.success.main},/* Styles applied to the root element if `display="inline"`. */displayInline:{display:'inline'},/* Styles applied to the root element if `display="block"`. */displayBlock:{display:'block'}};};var defaultVariantMapping={h1:'h1',h2:'h2',h3:'h3',h4:'h4',h5:'h5',h6:'h6',subtitle1:'h6',subtitle2:'h6',body1:'p',body2:'p'};var Typography=React.forwardRef(function(props,ref){var _props$align=props.align,align=_props$align===void 0?'inherit':_props$align,className=props.className,_props$color=props.color,color=_props$color===void 0?'initial':_props$color,component=props.component,_props$display=props.display,display=_props$display===void 0?'initial':_props$display,_props$gutterBottom=props.gutterBottom,gutterBottom=_props$gutterBottom===void 0?false:_props$gutterBottom,_props$noWrap=props.noWrap,noWrap=_props$noWrap===void 0?false:_props$noWrap,_props$paragraph=props.paragraph,paragraph=_props$paragraph===void 0?false:_props$paragraph,_props$variant=props.variant,variant=_props$variant===void 0?'body1':_props$variant,_props$variantMapping=props.variantMapping,variantMapping=_props$variantMapping===void 0?defaultVariantMapping:_props$variantMapping,classes=props.classes,other=_objectWithoutProperties(props,_excluded);var Component=component||(paragraph?'p':variantMapping[variant]||defaultVariantMapping[variant])||'span';return React.createElement(Component,_extends({className:classNames(classes.root,_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},classes[variant],variant!=='inherit'),classes["color".concat(capitalize(color))],color!=='initial'),classes.noWrap,noWrap),classes.gutterBottom,gutterBottom),classes.paragraph,paragraph),classes["align".concat(capitalize(align))],align!=='inherit'),classes["display".concat(capitalize(display))],display!=='initial'),className),ref:ref},other));});Typography.defaultProps={align:'inherit',children:null,className:undefined,color:'initial',component:null,display:'initial',gutterBottom:false,noWrap:false,paragraph:false,variant:'body1',variantMapping:defaultVariantMapping};export default withStyles(Typography,styles,{name:'Typography'});
+ */export var styles=function styles(theme){return{/* Styles applied to the root element. */root:{margin:0},/* Styles applied to the root element if `variant="body2"`. */body2:theme.typography.body2,/* Styles applied to the root element if `variant="body1"`. */body1:theme.typography.body1,/* Styles applied to the root element if `variant="caption"`. */caption:theme.typography.caption,/* Styles applied to the root element if `variant="button"`. */button:theme.typography.button,/* Styles applied to the root element if `variant="h1"`. */h1:theme.typography.h1,/* Styles applied to the root element if `variant="h2"`. */h2:theme.typography.h2,/* Styles applied to the root element if `variant="h3"`. */h3:theme.typography.h3,/* Styles applied to the root element if `variant="h4"`. */h4:theme.typography.h4,/* Styles applied to the root element if `variant="h5"`. */h5:theme.typography.h5,/* Styles applied to the root element if `variant="h6"`. */h6:theme.typography.h6,/* Styles applied to the root element if `variant="subtitle1"`. */subtitle1:theme.typography.subtitle1,/* Styles applied to the root element if `variant="subtitle2"`. */subtitle2:theme.typography.subtitle2,/* Styles applied to the root element if `variant="overline"`. */overline:theme.typography.overline,/* Styles applied to the root element if `variant="srOnly"`. Only accessible to screen readers. */srOnly:{position:'absolute',height:1,width:1,overflow:'hidden'},/* Styles applied to the root element if `align="left"`. */alignLeft:{textAlign:'left'},/* Styles applied to the root element if `align="center"`. */alignCenter:{textAlign:'center'},/* Styles applied to the root element if `align="right"`. */alignRight:{textAlign:'right'},/* Styles applied to the root element if `align="justify"`. */alignJustify:{textAlign:'justify'},/* Styles applied to the root element if `nowrap={true}`. */noWrap:{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'},/* Styles applied to the root element if `gutterBottom={true}`. */gutterBottom:{marginBottom:'0.35em'},/* Styles applied to the root element if `paragraph={true}`. */paragraph:{marginBottom:16},/* Styles applied to the root element if `color="inherit"`. */colorInherit:{color:'inherit'},/* Styles applied to the root element if `color="primary"`. */colorPrimary:{color:theme.palette.primary.main},/* Styles applied to the root element if `color="secondary"`. */colorSecondary:{color:theme.palette.secondary.main},/* Styles applied to the root element if `color="textPrimary"`. */colorTextPrimary:{color:theme.palette.text.primary},/* Styles applied to the root element if `color="textSecondary"`. */colorTextSecondary:{color:theme.palette.text.secondary},colorTextTertiary:{color:theme.palette.text.tertiary},/* Styles applied to the root element if `color="error"`. */colorError:{color:theme.palette.error.main},/* Styles applied to the root element if `color="warning"` */colorWarning:{color:theme.palette.warning.main},/* Styles applied to the root element if `color="success"` */colorSuccess:{color:theme.palette.success.main},/* Styles applied to the root element if `display="inline"`. */displayInline:{display:'inline'},/* Styles applied to the root element if `display="block"`. */displayBlock:{display:'block'}};};var defaultVariantMapping={h1:'h1',h2:'h2',h3:'h3',h4:'h4',h5:'h5',h6:'h6',subtitle1:'h6',subtitle2:'h6',body1:'p',body2:'p'};var Typography=React.forwardRef(function(props,ref){var _props$align=props.align,align=_props$align===void 0?'inherit':_props$align,className=props.className,_props$color=props.color,color=_props$color===void 0?'initial':_props$color,component=props.component,_props$display=props.display,display=_props$display===void 0?'initial':_props$display,_props$gutterBottom=props.gutterBottom,gutterBottom=_props$gutterBottom===void 0?false:_props$gutterBottom,_props$noWrap=props.noWrap,noWrap=_props$noWrap===void 0?false:_props$noWrap,_props$paragraph=props.paragraph,paragraph=_props$paragraph===void 0?false:_props$paragraph,_props$variant=props.variant,variant=_props$variant===void 0?'body1':_props$variant,_props$variantMapping=props.variantMapping,variantMapping=_props$variantMapping===void 0?defaultVariantMapping:_props$variantMapping,classes=props.classes,other=_objectWithoutProperties(props,_excluded);var Component=component||(paragraph?'p':variantMapping[variant]||defaultVariantMapping[variant])||'span';return React.createElement(Component,_extends({className:classNames(classes.root,'engage__typography',_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},classes[variant],variant!=='inherit'),"engage__typography_".concat(variant),variant!=='inherit'),classes["color".concat(capitalize(color))],color!=='initial'),classes.noWrap,noWrap),classes.gutterBottom,gutterBottom),'engage__typography__gutter-bottom',gutterBottom),classes.paragraph,paragraph),"engage__typography__paragraph",paragraph),classes["align".concat(capitalize(align))],align!=='inherit'),classes["display".concat(capitalize(display))],display!=='initial'),className),ref:ref},other));});Typography.defaultProps={align:'inherit',children:null,className:undefined,color:'initial',component:null,display:'initial',gutterBottom:false,noWrap:false,paragraph:false,variant:'body1',variantMapping:defaultVariantMapping};export default withStyles(Typography,styles);

package/components/Typography/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Typography } from './Typography';
+export type { TypographyProps } from './Typography';

package/components/View/components/Content/components/ParallaxProvider/index.js

@@ -0,0 +1,19 @@
+import React,{useEffect,useContext,useMemo}from'react';import PropTypes from'prop-types';import{ParallaxProvider as ParallaxProviderCmp,useParallaxController}from'react-scroll-parallax';import{useElementSize}from'@shopgate/engage/core/hooks';import{useScrollContainer}from'@shopgate/engage/core/helpers';import{useReduceMotion}from'@shopgate/engage/a11y/hooks';import{ViewContext}from'@shopgate/engage/components/View';/**
+ * The ParallaxProviderInner component is used to update the parallax controller when the
+ * scroll height changes.
+ * @param {Object} props The component props.
+ * @param {number} props.scrollHeight The height of the scroll container.
+ * @param {Object} props.children The component children.
+ * @returns {JSX.Element}
+ */var ParallaxProviderInner=function ParallaxProviderInner(_ref){var scrollHeight=_ref.scrollHeight,children=_ref.children;var _useParallaxControlle=useParallaxController(),update=_useParallaxControlle.update;useEffect(function(){update();},[scrollHeight,update]);return children;};ParallaxProviderInner.propTypes={children:PropTypes.node.isRequired};/**
+ * The ParallaxProvider component wraps the parallax context from the react-scroll-parallax package
+ * around its children.
+ * @param {Object} props The component props.
+ * @param {boolean} props.viewVisible Whether the view is currently visible.
+ * @param {Object} props.children The component children.
+ * @returns {JSX.Element}
+ */var ParallaxProvider=function ParallaxProvider(_ref2){var viewVisible=_ref2.viewVisible,children=_ref2.children;var reduceMotion=useReduceMotion();// Determine if a scroll container is used. If false PWA is in curbside website mode and window
+// is used as scroll container.
+var scrollContainerUsed=useScrollContainer();var _useContext=useContext(ViewContext),viewRef=_useContext.contentRef;// Mocked ref for the useElementSize hook to track the size of the scroll container.
+var mockedElementSizeRef=useMemo(function(){var _viewRef$current;return{current:scrollContainerUsed?viewRef===null||viewRef===void 0?void 0:(_viewRef$current=viewRef.current)===null||_viewRef$current===void 0?void 0:_viewRef$current.querySelector('.engage__view__content__scrollable-content'):null};},[scrollContainerUsed,viewRef]);var _useElementSize=useElementSize(mockedElementSizeRef),height=_useElementSize.height;return React.createElement(ParallaxProviderCmp// For now Parallax is disabled when no scroll container is used.
+,{isDisabled:!scrollContainerUsed||reduceMotion||!viewVisible,scrollContainer:scrollContainerUsed?viewRef.current:null},React.createElement(ParallaxProviderInner,{scrollHeight:height},children));};export default ParallaxProvider;

package/components/View/components/Content/index.js

@@ -1,4 +1,4 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import Helmet from'react-helmet';import ResponsiveContainer from'@shopgate/engage/components/ResponsiveContainer';import appConfig from'@shopgate/pwa-common/helpers/config';import event from'@shopgate/pwa-core/classes/Event';import{router}from'@virtuous/conductor';import{RouteContext}from'@shopgate/pwa-common/context';import{EVENT_KEYBOARD_WILL_CHANGE}from'@shopgate/pwa-core/constants/AppEvents';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import{VIEW_CONTENT}from'@shopgate/pwa-common/constants/Portals';import{useScrollContainer,isIOs}from'@shopgate/engage/core/helpers';import{ConditionalWrapper}from"../../../ConditionalWrapper";import Above from"../Above";import Below from"../Below";import{container,containerInner}from"./style";/**
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import Helmet from'react-helmet';import ResponsiveContainer from'@shopgate/engage/components/ResponsiveContainer';import appConfig from'@shopgate/pwa-common/helpers/config';import event from'@shopgate/pwa-core/classes/Event';import{router}from'@virtuous/conductor';import{RouteContext}from'@shopgate/pwa-common/context';import{EVENT_KEYBOARD_WILL_CHANGE}from'@shopgate/pwa-core/constants/AppEvents';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import{VIEW_CONTENT}from'@shopgate/pwa-common/constants/Portals';import{useScrollContainer,isIOs}from'@shopgate/engage/core/helpers';import{ConditionalWrapper}from"../../../ConditionalWrapper";import Above from"../Above";import Below from"../Below";import ParallaxProvider from"./components/ParallaxProvider";import{container,containerInner}from"./style";/**
  * The ViewContent component.
  */var ViewContent=/*#__PURE__*/function(_Component){/**
    * @param {Object} props The component props.
@@ -27,4 +27,4 @@ window.requestAnimationFrame(function(){if(_this3.ref.current===window){window.s
 // is focused to prevent side effects (multiple scrollable content areas).
 '--extra-ios-scroll-space':isInputFocused?0:'12px',overflow:overflow};}},{key:"render",value:/**
    * @return {JSX.Element}
-   */function render(){return React.createElement("article",{className:"".concat(container," engage__view__content ").concat(this.props.className),ref:this.scrollContainer?this.ref:null,style:this.style,role:"none"},React.createElement("div",{className:containerInner},React.createElement(Helmet,{title:appConfig.shopName}),React.createElement(Above,null),React.createElement(ResponsiveContainer,{breakpoint:">xs",webOnly:true},this.props.visible?React.createElement("div",{id:"PageHeaderBelow"}):null),React.createElement(ConditionalWrapper,{condition:!this.props.noContentPortal,wrapper:function wrapper(children){return React.createElement(SurroundPortals,{portalName:VIEW_CONTENT},children);}},this.props.children),React.createElement(Below,null)));}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(props,state){if(props.visible||state.keyboardHeight===0){return null;}return{keyboardHeight:0};}}]);}(Component);_defineProperty(ViewContent,"contextType",RouteContext);_defineProperty(ViewContent,"defaultProps",{className:'',children:null,noScrollOnKeyboard:false,noContentPortal:false,noKeyboardListener:false});export default(function(props){return React.createElement(RouteContext.Consumer,null,function(_ref2){var visible=_ref2.visible,_ref2$pattern=_ref2.pattern,pattern=_ref2$pattern===void 0?'':_ref2$pattern,_ref2$is=_ref2.is404,is404=_ref2$is===void 0?false:_ref2$is;return React.createElement(ViewContent,_extends({},props,{visible:visible,className:"route_".concat(is404?'404':pattern.replace(/[:/]/g,'_'))}));});});
+   */function render(){return React.createElement(ParallaxProvider,{viewVisible:this.props.visible},React.createElement("article",{className:"".concat(container," engage__view__content ").concat(this.props.className),ref:this.scrollContainer?this.ref:null,style:this.style,role:"none"},React.createElement("div",{className:containerInner},React.createElement("div",{className:"engage__view__content__scrollable-content"},React.createElement(Helmet,{title:appConfig.shopName}),React.createElement(Above,null),React.createElement(ResponsiveContainer,{breakpoint:">xs",webOnly:true},this.props.visible?React.createElement("div",{id:"PageHeaderBelow"}):null),React.createElement(ConditionalWrapper,{condition:!this.props.noContentPortal,wrapper:function wrapper(children){return React.createElement(SurroundPortals,{portalName:VIEW_CONTENT},children);}},this.props.children),React.createElement(Below,null)))));}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(props,state){if(props.visible||state.keyboardHeight===0){return null;}return{keyboardHeight:0};}}]);}(Component);_defineProperty(ViewContent,"contextType",RouteContext);_defineProperty(ViewContent,"defaultProps",{className:'',children:null,noScrollOnKeyboard:false,noContentPortal:false,noKeyboardListener:false});export default(function(props){return React.createElement(RouteContext.Consumer,null,function(_ref2){var visible=_ref2.visible,_ref2$pattern=_ref2.pattern,pattern=_ref2$pattern===void 0?'':_ref2$pattern,_ref2$is=_ref2.is404,is404=_ref2$is===void 0?false:_ref2$is;return React.createElement(ViewContent,_extends({},props,{visible:visible,className:"route_".concat(is404?'404':pattern.replace(/[:/]/g,'_'))}));});});

package/core/helpers/getFullImageSource.js

@@ -22,6 +22,6 @@ import{CONFIGURATION_COLLECTION_CREATE_EXTERNAL_IMAGE_URL}from'@shopgate/engage/
  * @param {number} dimension.width Width in pixels.
  * @param {number} dimension.height Height in pixels.
  * @returns {string}
- */export var getFullImageSource=function getFullImageSource(src){var _ref=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{},width=_ref.width,height=_ref.height;if(src&&src.includes('images.shopgate.services/v2/images')){var _getProductImageSetti2=getProductImageSettings(),fillColor=_getProductImageSetti2.fillColor,quality=_getProductImageSetti2.quality;var format=getImageFormat();return buildUrl(src,{format:format,width:width,height:height,quality:quality,fill:fillColor.replace('#','')});}if(src&&src.startsWith('https://img-cdn.shopgate.com')&&!src.includes('?')){return buildUrl(src,{w:width,h:height,q:70,zd:'resize',fillc:'FFFFFF'});}// Check if an extension registered an external image url handler within the config collection.
+ */export var getFullImageSource=function getFullImageSource(src){var _ref=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{},width=_ref.width,height=_ref.height;if(src&&src.includes('images.shopgate.services')){var _getProductImageSetti2=getProductImageSettings(),fillColor=_getProductImageSetti2.fillColor,quality=_getProductImageSetti2.quality;var format=getImageFormat();return buildUrl(src,{format:format,width:width,height:height,quality:quality,fill:fillColor.replace('#','')});}if(src&&src.startsWith('https://img-cdn.shopgate.com')&&!src.includes('?')){return buildUrl(src,{w:width,h:height,q:70,zd:'resize',fillc:'FFFFFF'});}// Check if an extension registered an external image url handler within the config collection.
 var createUrlFn=configuration.get(CONFIGURATION_COLLECTION_CREATE_EXTERNAL_IMAGE_URL);if(typeof createUrlFn==='function'){var _getProductImageSetti4=getProductImageSettings(),_fillColor=_getProductImageSetti4.fillColor,_quality=_getProductImageSetti4.quality;var _format=getImageFormat();// Invoke the handler with all relevant parameters.
 var externalUrl=createUrlFn(src,{width:width,height:height,fillColor:_fillColor,quality:_quality,format:_format});if(!!externalUrl&&typeof externalUrl==='string'){return externalUrl;}}return src;};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.29.0-alpha.9",
+  "version": "7.29.1-beta.1",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,12 +17,12 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@shopgate/native-modules": "1.0.0-beta.25",
-    "@shopgate/pwa-common": "7.29.0-alpha.9",
-    "@shopgate/pwa-common-commerce": "7.29.0-alpha.9",
-    "@shopgate/pwa-core": "7.29.0-alpha.9",
-    "@shopgate/pwa-ui-ios": "7.29.0-alpha.9",
-    "@shopgate/pwa-ui-material": "7.29.0-alpha.9",
-    "@shopgate/pwa-ui-shared": "7.29.0-alpha.9",
+    "@shopgate/pwa-common": "7.29.1-beta.1",
+    "@shopgate/pwa-common-commerce": "7.29.1-beta.1",
+    "@shopgate/pwa-core": "7.29.1-beta.1",
+    "@shopgate/pwa-ui-ios": "7.29.1-beta.1",
+    "@shopgate/pwa-ui-material": "7.29.1-beta.1",
+    "@shopgate/pwa-ui-shared": "7.29.1-beta.1",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.3.1",
     "@virtuous/conductor": "~2.5.0",
@@ -41,6 +41,7 @@
     "react-phone-number-input": "^3.2.16",
     "react-player": "1.11.0",
     "react-portal": "^3.1.0",
+    "react-scroll-parallax": "^3.5.0",
     "tss-react": "^4.9.18",
     "validate.js": "^0.13.1"
   },

package/page/components/NotFound.js

@@ -1,3 +1,5 @@
-import React,{useCallback}from'react';import PropTypes from'prop-types';import{css}from'glamor';import{connect}from'react-redux';import RippleButton from'@shopgate/pwa-ui-shared/RippleButton';import{I18n}from'@shopgate/engage/components';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{historyPop}from'@shopgate/pwa-common/actions/router';var mapDispatchToProps={onClick:historyPop};var variables=themeConfig.variables;var styles={wrapper:css({display:'flex',justifyContent:'center',flexDirection:'column',textAlign:'center',padding:variables.gap.big,paddingTop:variables.gap.xxbig}).toString(),text:css({fontSize:'1.5rem'}).toString(),button:css({width:'100%',maxWidth:250}).toString(),buttonContainer:css({flexGrow:'0',padding:"".concat(variables.emptyPage.buttonVerticalGap,"px ").concat(variables.gap.big,"px")}).toString()};/**
- * @returns {JSX}
- */var NotFound=function NotFound(_ref){var onClick=_ref.onClick;var handleClick=useCallback(function(){onClick();},[onClick]);return React.createElement("div",{className:styles.wrapper},React.createElement(I18n.Text,{className:styles.text,string:"page.not_found"}),React.createElement("div",{className:styles.buttonContainer},React.createElement(RippleButton,{onClick:handleClick,className:styles.button,type:"secondary"},React.createElement(I18n.Text,{string:"page.continue"}))));};export default connect(null,mapDispatchToProps)(NotFound);
+import React,{useCallback}from'react';import{css}from'glamor';import{useDispatch}from'react-redux';import RippleButton from'@shopgate/pwa-ui-shared/RippleButton';import{I18n}from'@shopgate/engage/components';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{historyPop,historyResetTo}from'@shopgate/pwa-common/actions/router';import{i18n,INDEX_PATH}from"../../core";var variables=themeConfig.variables;var styles={wrapper:css({display:'flex',justifyContent:'center',flexDirection:'column',textAlign:'center',padding:variables.gap.big,paddingTop:variables.gap.xxbig}).toString(),text:css({fontSize:'1.5rem'}).toString(),button:css({width:'100%',maxWidth:250}).toString(),buttonContainer:css({flexGrow:'0',padding:"".concat(variables.emptyPage.buttonVerticalGap,"px ").concat(variables.gap.big,"px"),display:'flex',flexDirection:'column',gap:variables.gap.big,alignItems:'center'}).toString()};/**
+ * The NotFoundPage component renders a "Page Not Found" view
+ * with options to navigate back or to the home page.
+ * @returns {JSX.Element}
+ */var NotFound=function NotFound(){var dispatch=useDispatch();var handleBack=useCallback(function(){dispatch(historyPop());},[dispatch]);var handleHome=useCallback(function(){dispatch(historyResetTo(INDEX_PATH));},[dispatch]);return React.createElement("div",{className:styles.wrapper},React.createElement(I18n.Text,{className:styles.text,string:"page.not_found"}),React.createElement("div",{className:styles.buttonContainer},React.createElement(RippleButton,{onClick:handleBack,className:styles.button,type:"secondary"},React.createElement(I18n.Text,{string:"common.back"})),React.createElement(RippleButton,{onClick:handleHome,className:styles.button,type:"secondary"},React.createElement(I18n.Text,{string:"navigation.back",params:{title:i18n.text('navigation.home')}}))));};export default NotFound;

package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.js

@@ -1,7 +1,28 @@
-var _excluded=["src","alt","breakpoint"];function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React,{useMemo}from'react';import PropTypes from'prop-types';import{useTheme}from'@shopgate/engage/styles';import{parseImageUrl}from"../../helpers";/** @typedef {import('@shopgate/engage/styles').Theme} Theme */ /** @typedef {Theme['breakpoints']['keys'][0]} Breakpoint */ /** @typedef {React.ImgHTMLAttributes<HTMLImageElement>} ImgProps */ /** @typedef {{breakpoint: Breakpoint} & ImgProps} ResponsiveImageProps */ /**
+var _excluded=["src","alt","breakpoint","className","enableParallax","isBanner","borderRadius"],_excluded2=["src"];function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _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 _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React,{useMemo,useState}from'react';import PropTypes from'prop-types';import{makeStyles,useResponsiveValue}from'@shopgate/engage/styles';import{useParallax}from'react-scroll-parallax';import{parseImageUrl}from"../../helpers";/**
+ * @typedef {Object} CustomResponsiveImageProps
+ * @property {boolean} [enableParallax] Whether to enable the parallax effect.
+ * @property {number} [borderRadius] The border radius to apply to the image.
+ * @property {Breakpoint} [breakpoint] The breakpoint from which on a higher resolution image should
+ * be loaded.
+ * @property {boolean} [isBanner] Whether the image is used as a banner (full width and height of
+ * its container).
+ */ /** @typedef {import('@shopgate/engage/styles').Theme} Theme */ /** @typedef {Theme['breakpoints']['keys'][0]} Breakpoint */ /** @typedef {React.ImgHTMLAttributes<HTMLImageElement>} ImgProps */ /** @typedef {CustomResponsiveImageProps & ImgProps} ResponsiveImageProps */var useStyles=makeStyles()({preventSave:{userSelect:'none',pointerEvents:'none'},image:{width:'100%'},container:{width:'100%',overflow:'hidden',display:'flex',justifyContent:'center',alignItems:'center'},bannerContainer:{overflow:'hidden',position:'absolute',width:'100%',height:'100%',top:0,left:0,display:'flex',justifyContent:'center',alignItems:'center'},banner:{position:'absolute',width:'100%',height:'100%',objectFit:'cover'}});/**
+ * @param {ResponsiveImageProps} props The component props.
+ * @returns {JSX.Element}
+ */var ResponsiveWidgetImage=function ResponsiveWidgetImage(_ref){var src=_ref.src,alt=_ref.alt,breakpoint=_ref.breakpoint,className=_ref.className,_ref$enableParallax=_ref.enableParallax,enableParallax=_ref$enableParallax===void 0?false:_ref$enableParallax,_ref$isBanner=_ref.isBanner,isBanner=_ref$isBanner===void 0?false:_ref$isBanner,_ref$borderRadius=_ref.borderRadius,borderRadius=_ref$borderRadius===void 0?0:_ref$borderRadius,imgProps=_objectWithoutProperties(_ref,_excluded);var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var _useState=useState(0),_useState2=_slicedToArray(_useState,2),imageHeight=_useState2[0],setImageHeight=_useState2[1];var _useState3=useState(0),_useState4=_slicedToArray(_useState3,2),imageWidth=_useState4[0],setImageWidth=_useState4[1];// If parallax is to soft, increase this value.
+var parallaxPercent=15;var parallax=useParallax({translateY:["-".concat(parallaxPercent),"".concat(parallaxPercent)],disabled:!enableParallax});/**
+   * Handles the image load event
+   * We set the aspect ratio of the container based on the image dimensions
+   * to prevent white spaces in the layout while the image is moving.
+   * The aspect ratio is calculated with the parallaxPercent
+   * @param {Object} event The load event.
+   */var handleImageLoad=function handleImageLoad(event){var width=event.target.clientWidth;var height=event.target.clientHeight;setImageWidth(width);setImageHeight(height);};var containerRatio=useMemo(function(){var heightReduction=enableParallax?imageHeight/100*(parallaxPercent+7):0;return"".concat(imageWidth,"/").concat(imageHeight-heightReduction);},[enableParallax,imageHeight,imageWidth]);var src2x=useMemo(function(){return parseImageUrl(src,true);},[src]);var imgSrc=useResponsiveValue(_defineProperty({xs:src},breakpoint,src2x));return React.createElement("div",{className:cx(_defineProperty(_defineProperty({},classes.bannerContainer,isBanner),classes.container,!isBanner)),style:_extends({borderRadius:"".concat(borderRadius,"px")},!isBanner&&enableParallax?{aspectRatio:containerRatio}:{})},React.createElement("img",_extends({src:imgSrc,ref:parallax.ref,alt:alt,loading:"lazy",className:cx(className,classes.preventSave,classes.image,_defineProperty({},classes.banner,isBanner)),onLoad:handleImageLoad,style:_extends({},enableParallax&&isBanner?{height:"".concat(100+parallaxPercent*2,"%")}:{})},imgProps)));};ResponsiveWidgetImage.defaultProps={src:null,alt:null,breakpoint:'md',className:null,enableParallax:false,isBanner:false,borderRadius:0};/**
  * The ResponsiveWidgetImage component renders an image that adapts to different screen sizes.
- * It uses the <picture> element to provide a higher resolution image for medium and larger screens.
+ * It renders a image with higher resolution on larger screens
+ * It can apply a parallax effect when scrolling.
  *
  * @param {ResponsiveImageProps} props The component props.
  * @returns {JSX.Element}
- */var ResponsiveWidgetImage=function ResponsiveWidgetImage(_ref){var src=_ref.src,alt=_ref.alt,breakpoint=_ref.breakpoint,imgProps=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),breakpoints=_useTheme.breakpoints;var src2x=useMemo(function(){return parseImageUrl(src,true);},[src]);if(!src){return null;}return React.createElement("picture",null,React.createElement("source",{media:"(width >= ".concat(breakpoints.values[breakpoint],"px)"),srcSet:src2x}),React.createElement("img",_extends({src:src,alt:alt,loading:"lazy"},imgProps)));};ResponsiveWidgetImage.defaultProps={alt:null,breakpoint:'md'};export default ResponsiveWidgetImage;
+ */var Protector=function Protector(_ref2){var src=_ref2.src,rest=_objectWithoutProperties(_ref2,_excluded2);if(!src){return null;}// Only render the actual ResponsiveWidgetImage if a src is provided to avoid errors from
+// the useParallax hook.
+return React.createElement(ResponsiveWidgetImage,_extends({src:src},rest));};Protector.defaultProps={src:null};export default Protector;

package/page/components/WidgetHeadline/WidgetHeadline.js

@@ -1,7 +1,14 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React,{useMemo}from'react';import{makeStyles}from'@shopgate/engage/styles';import{Typography}from'@shopgate/engage/components';import PropTypes from'prop-types';var useStyles=makeStyles()(function(theme){return{root:{padding:theme.spacing(2)}};});/**
+var _excluded=["headline","className"];function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React,{useMemo}from'react';import{makeStyles}from'@shopgate/engage/styles';import{Typography}from'@shopgate/engage/components';import PropTypes from'prop-types';var useStyles=makeStyles()(function(theme){return{root:{padding:theme.spacing(2)}};});/** @typedef {import('@shopgate/engage/components/Typography').TypographyProps} TypographyProps */ /**
+ * @typedef {Object} HeadlineProps
+ * @property {string} text The headline text.
+ * @property {TypographyProps['align]} [textAlign] The text alignment.
+ * @property {TypographyProps['variant']} [typography] The typography variant to use.
+ * @property {boolean} [bold] Whether the text should be bold.
+ * @property {boolean} [italic] Whether the text should be italic.
+ * @property {boolean} [underline] Whether the text should be underlined.
+ */ /** @typedef {{headline: HeadlineProps} & TypographyProps} WidgetHeadlineProps */ /**
  * The WidgetHeadline is used to display a headline for the widget.
- * @param {Object} props The component props.
- * @param {Object} props.headline The headline props.
+ * @param {WidgetHeadlineProps} props The component props.
  * @returns {JSX.Element}
- */var WidgetHeadline=function WidgetHeadline(_ref){var headline=_ref.headline,className=_ref.className;var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx,css=_useStyles.css;var _ref2=headline||{},_ref2$typography=_ref2.typography,typography=_ref2$typography===void 0?'h3':_ref2$typography,text=_ref2.text,textAlign=_ref2.textAlign,bold=_ref2.bold,italic=_ref2.italic,underline=_ref2.underline;var styles=useMemo(function(){return _extends({},bold&&{fontWeight:'bold'},{},italic&&{fontStyle:'italic'},{},underline&&{textDecoration:'underline'});},[bold,italic,underline]);if(!text)return null;return React.createElement(Typography,{variant:typography,align:textAlign// && increases the specificity of the styles which guarantees that defaults are overridden
-,className:cx(css({'&&':_extends({},styles)}),classes.root,className)},text);};WidgetHeadline.defaultProps={className:null};export default WidgetHeadline;
+ */var WidgetHeadline=function WidgetHeadline(_ref){var headline=_ref.headline,className=_ref.className,rest=_objectWithoutProperties(_ref,_excluded);var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx,css=_useStyles.css;var _ref2=headline||{},_ref2$typography=_ref2.typography,typography=_ref2$typography===void 0?'h3':_ref2$typography,text=_ref2.text,textAlign=_ref2.textAlign,bold=_ref2.bold,italic=_ref2.italic,underline=_ref2.underline;var styles=useMemo(function(){return _extends({},bold&&{fontWeight:'bold'},{},italic&&{fontStyle:'italic'},{},underline&&{textDecoration:'underline'});},[bold,italic,underline]);if(!text)return null;return React.createElement(Typography,_extends({variant:typography,align:textAlign// && increases the specificity of the styles which guarantees that defaults are overridden
+,className:cx(css({'&&':_extends({},styles)}),classes.root,className)},rest),text);};WidgetHeadline.defaultProps={className:null};export default WidgetHeadline;

package/page/components/WidgetRichText/WidgetRichText.js

@@ -1,4 +1,4 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import PropTypes from'prop-types';import{HtmlSanitizer}from'@shopgate/engage/components';import{makeStyles}from'@shopgate/engage/styles';var useStyles=makeStyles()(function(theme){return{root:{width:'100%','& > :first-child':{marginTop:0},'& > :last-child':{marginBottom:0},'& p':{margin:'0px 0px 1rem 0px',':empty':{minHeight:'1rem'}},'ul, ol':{paddingLeft:'40px'},'ul li':{listStyleType:'disc'},'ol li':{listStyleType:'decimal'},h1:_extends({},theme.typography.h1,{margin:'0px 0px 1rem 0px'}),h2:_extends({},theme.typography.h2,{margin:'0px 0px 1rem 0px'}),h3:_extends({},theme.typography.h3,{margin:'0px 0px 1rem 0px'}),h4:_extends({},theme.typography.h4,{margin:'0px 0px 1rem 0px'}),h5:_extends({},theme.typography.h5,{margin:'0px 0px 1rem 0px'}),h6:_extends({},theme.typography.h6,{margin:'0px 0px 1rem 0px'})}};});/**
+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{HtmlSanitizer}from'@shopgate/engage/components';import{makeStyles}from'@shopgate/engage/styles';var useStyles=makeStyles()(function(theme){return{root:{width:'100%','& > :first-child':{marginTop:0},'& > :last-child':{marginBottom:0},'& p':{margin:'0px 0px 1rem 0px',':empty':{minHeight:'1rem'}},'ul, ol':{paddingLeft:'40px'},'ul li':{listStyleType:'disc'},'ol li':{listStyleType:'decimal'},h1:_extends({},theme.typography.h1,{margin:'0px 0px 1rem 0px'}),h2:_extends({},theme.typography.h2,{margin:'0px 0px 1rem 0px'}),h3:_extends({},theme.typography.h3,{margin:'0px 0px 1rem 0px'}),h4:_extends({},theme.typography.h4,{margin:'0px 0px 1rem 0px'}),h5:_extends({},theme.typography.h5,{margin:'0px 0px 1rem 0px'}),h6:_extends({},theme.typography.h6,{margin:'0px 0px 1rem 0px'}),a:{color:'var(--color-primary)'}}};});/**
  * @param {Object} props The component props.
  * @param {string} props.content The rich text content.
  * @param {string} [props.className] An optional class name.

package/page/components/Widgets/Widget.js

@@ -14,4 +14,4 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  */var Widget=function Widget(_ref2){var _ref3,_definition$layout,_ref4,_definition$layout2,_ref5,_definition$layout3,_ref6,_definition$layout4,_definition$layout5,_definition$layout6,_definition$layout7,_definition$layout8,_definition$meta,_definition$meta$sche,_definition$meta2,_definition$meta2$sch,_definition$meta3,_definition$meta3$sch,_definition$meta4,_definition$meta4$hid,_definition$meta5,_definition$meta5$hid;var Component=_ref2.component,definition=_ref2.definition,isPreview=_ref2.isPreview,isCustomLegacyWidget=_ref2.isCustomLegacyWidget;var _useStyles=useStyles({marginTop:(_ref3=definition===null||definition===void 0?void 0:(_definition$layout=definition.layout)===null||_definition$layout===void 0?void 0:_definition$layout.marginTop)!==null&&_ref3!==void 0?_ref3:0,marginBottom:(_ref4=definition===null||definition===void 0?void 0:(_definition$layout2=definition.layout)===null||_definition$layout2===void 0?void 0:_definition$layout2.marginBottom)!==null&&_ref4!==void 0?_ref4:0,marginLeft:(_ref5=definition===null||definition===void 0?void 0:(_definition$layout3=definition.layout)===null||_definition$layout3===void 0?void 0:_definition$layout3.marginLeft)!==null&&_ref5!==void 0?_ref5:0,marginRight:(_ref6=definition===null||definition===void 0?void 0:(_definition$layout4=definition.layout)===null||_definition$layout4===void 0?void 0:_definition$layout4.marginRight)!==null&&_ref6!==void 0?_ref6:0}),classes=_useStyles.classes,cx=_useStyles.cx;var _useWidgetsPreview=useWidgetsPreview(),setActiveWidget=_useWidgetsPreview.setActiveWidget,activeWidget=_useWidgetsPreview.activeWidget;// Handle clicks on the widget container in preview mode. Take care that highlighting only happens
 // when the widget is not already active, otherwise it would be confusing when users want to
 // interact with widget elements.
-var handleInteraction=useCallback(function(){setActiveWidget(definition.code,activeWidget!==definition.code);if(activeWidget!==definition.code){dispatchWidgetPreviewEvent('widget-clicked',definition.code);}},[activeWidget,definition.code,setActiveWidget]);var handlers=usePressHandler(handleInteraction);if(!Component){return null;}return React.createElement("section",_extends({id:"widget-code-".concat(definition.code),className:cx(classes.root,_defineProperty({},classes.preview,isPreview)),style:{marginTop:definition===null||definition===void 0?void 0:(_definition$layout5=definition.layout)===null||_definition$layout5===void 0?void 0:_definition$layout5.marginTop,marginBottom:definition===null||definition===void 0?void 0:(_definition$layout6=definition.layout)===null||_definition$layout6===void 0?void 0:_definition$layout6.marginBottom,marginLeft:definition===null||definition===void 0?void 0:(_definition$layout7=definition.layout)===null||_definition$layout7===void 0?void 0:_definition$layout7.marginLeft,marginRight:definition===null||definition===void 0?void 0:(_definition$layout8=definition.layout)===null||_definition$layout8===void 0?void 0:_definition$layout8.marginRight},"data-widget-name":definition.widgetConfigDefinitionCode},isPreview&&_extends({},handlers)),isPreview&&(definition===null||definition===void 0?void 0:definition.meta)&&React.createElement("div",{className:classes.widgetInfo},((_definition$meta=definition.meta)===null||_definition$meta===void 0?void 0:(_definition$meta$sche=_definition$meta.scheduled)===null||_definition$meta$sche===void 0?void 0:_definition$meta$sche.isScheduled)&&React.createElement(Tooltip,{text:(_definition$meta2=definition.meta)===null||_definition$meta2===void 0?void 0:(_definition$meta2$sch=_definition$meta2.scheduled)===null||_definition$meta2$sch===void 0?void 0:_definition$meta2$sch.tooltip},React.createElement(TimeIcon,{className:cx(classes.scheduledIcon,_defineProperty({},classes.scheduledIconExpired,(_definition$meta3=definition.meta)===null||_definition$meta3===void 0?void 0:(_definition$meta3$sch=_definition$meta3.scheduled)===null||_definition$meta3$sch===void 0?void 0:_definition$meta3$sch.isExpired))})),((_definition$meta4=definition.meta)===null||_definition$meta4===void 0?void 0:(_definition$meta4$hid=_definition$meta4.hidden)===null||_definition$meta4$hid===void 0?void 0:_definition$meta4$hid.isHidden)&&React.createElement(Tooltip,{text:(_definition$meta5=definition.meta)===null||_definition$meta5===void 0?void 0:(_definition$meta5$hid=_definition$meta5.hidden)===null||_definition$meta5$hid===void 0?void 0:_definition$meta5$hid.tooltip},React.createElement(VisibilityOffIcon,{className:classes.visibilityIcon}))),React.createElement(WidgetProvider,{definition:definition,isPreview:isPreview},React.createElement(Suspense,{fallback:React.createElement(Loading,null)},React.createElement(Component,isCustomLegacyWidget?{settings:definition.widgetConfig}:{}))));};Widget.defaultProps={isCustomLegacyWidget:false};export default Widget;
+var handleInteraction=useCallback(function(){setActiveWidget(definition.code,activeWidget!==definition.code);dispatchWidgetPreviewEvent('widget-clicked',definition.code);},[activeWidget,definition.code,setActiveWidget]);var handlers=usePressHandler(handleInteraction);if(!Component){return null;}return React.createElement("section",_extends({id:"widget-code-".concat(definition.code),className:cx(classes.root,_defineProperty({},classes.preview,isPreview)),style:{marginTop:definition===null||definition===void 0?void 0:(_definition$layout5=definition.layout)===null||_definition$layout5===void 0?void 0:_definition$layout5.marginTop,marginBottom:definition===null||definition===void 0?void 0:(_definition$layout6=definition.layout)===null||_definition$layout6===void 0?void 0:_definition$layout6.marginBottom,marginLeft:definition===null||definition===void 0?void 0:(_definition$layout7=definition.layout)===null||_definition$layout7===void 0?void 0:_definition$layout7.marginLeft,marginRight:definition===null||definition===void 0?void 0:(_definition$layout8=definition.layout)===null||_definition$layout8===void 0?void 0:_definition$layout8.marginRight},"data-widget-name":definition.widgetConfigDefinitionCode},isPreview&&_extends({},handlers)),isPreview&&(definition===null||definition===void 0?void 0:definition.meta)&&React.createElement("div",{className:classes.widgetInfo},((_definition$meta=definition.meta)===null||_definition$meta===void 0?void 0:(_definition$meta$sche=_definition$meta.scheduled)===null||_definition$meta$sche===void 0?void 0:_definition$meta$sche.isScheduled)&&React.createElement(Tooltip,{text:(_definition$meta2=definition.meta)===null||_definition$meta2===void 0?void 0:(_definition$meta2$sch=_definition$meta2.scheduled)===null||_definition$meta2$sch===void 0?void 0:_definition$meta2$sch.tooltip},React.createElement(TimeIcon,{className:cx(classes.scheduledIcon,_defineProperty({},classes.scheduledIconExpired,(_definition$meta3=definition.meta)===null||_definition$meta3===void 0?void 0:(_definition$meta3$sch=_definition$meta3.scheduled)===null||_definition$meta3$sch===void 0?void 0:_definition$meta3$sch.isExpired))})),((_definition$meta4=definition.meta)===null||_definition$meta4===void 0?void 0:(_definition$meta4$hid=_definition$meta4.hidden)===null||_definition$meta4$hid===void 0?void 0:_definition$meta4$hid.isHidden)&&React.createElement(Tooltip,{text:(_definition$meta5=definition.meta)===null||_definition$meta5===void 0?void 0:(_definition$meta5$hid=_definition$meta5.hidden)===null||_definition$meta5$hid===void 0?void 0:_definition$meta5$hid.tooltip},React.createElement(VisibilityOffIcon,{className:classes.visibilityIcon}))),React.createElement(WidgetProvider,{definition:definition,isPreview:isPreview},React.createElement(Suspense,{fallback:React.createElement(Loading,null)},React.createElement(Component,isCustomLegacyWidget?{settings:definition.widgetConfig}:{}))));};Widget.defaultProps={isCustomLegacyWidget:false};export default Widget;

package/page/helpers/index.d.ts

@@ -1,28 +1,24 @@
 export type ProductsWidgetInputConfig = {
-  /**
-   * Source type for the product list
-   */
-  productSelectorType: 'searchTerm' | 'brand' | 'category' | 'manualItemNumbers' | 'productSelector';
   /**
    * A search term to filter products by
    */
-  productsSearchTerm: string;
+  searchTerm: string;
   /**
    * A brand to filter products by
    */
-  productsBrand: string;
+  brand: string;
   /**
    * A category to filter products by
    */
-  productsCategory: string;
+  category: string;
   /**
    * Array of product item numbers (selected via manual input)
    */
-  productsManualItemNumbers: string[];
+  manualItemNumbers: string[];
   /**
    * Array of product item numbers (selected via product selector)
    */
-  productsSelectorItemNumbers: string[];
+  selectorItemNumbers: string[];
 }
 
 export type GetProductSearchParamsFromProductsInputConfigReturnValue = {
@@ -53,3 +49,22 @@ export declare function parseImageUrl(
   url: string,
   useHighRes?: boolean
 ): string;
+
+type BorderRadiusParams = {
+  /**
+   * The border radius option
+   */
+  borderRadius: 'default' | 'none' |'rounded' | 'custom';
+  /**
+   * The custom border radius value
+   */
+  customBorderRadius?: number
+};
+
+/**
+ * Retrieves the border radius based on the widget config
+ * @returns The resolved border radius
+ */
+export declare function resolveBorderRadiusFromWidgetConfig(
+  params: BorderRadiusParams
+)

package/page/helpers/index.js

@@ -1,4 +1,4 @@
-/* eslint-disable max-len */ /**
+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;}/* eslint-disable max-len */ /**
  * @typedef {import('./').ProductsWidgetInputConfig} ProductsWidgetInputConfig
  */ /**
  * @typedef {import('./').GetProductSearchParamsFromProductsInputConfigReturnValue} GetProductSearchParamsFromProductsInputConfigReturnValue
@@ -8,10 +8,17 @@
  * The return value can be used to e.g. parametrize the useWidgetProducts hook.
  * @param {ProductsWidgetInputConfig} products Config object of the "Products" input.
  * @returns {GetProductSearchParamsFromProductsInputConfigReturnValue}
- */export var getProductSearchParamsFromProductsInputConfig=function getProductSearchParamsFromProductsInputConfig(){var products=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var _ref=products||{},productSelectorType=_ref.productSelectorType,productsBrand=_ref.productsBrand,productsCategory=_ref.productsCategory,productsItemNumbers=_ref.productsItemNumbers,productsManualItemNumbers=_ref.productsManualItemNumbers,productsSelectorItemNumbers=_ref.productsSelectorItemNumbers,productsSearchTerm=_ref.productsSearchTerm;var productsSearchType=productSelectorType;/** @type {string|string[]} */var productsSearchValue='';switch(productSelectorType){case'brand':productsSearchValue=productsBrand;break;case'category':productsSearchValue=productsCategory;break;// Kept for backward compatibility - was replaces by 'manualItemNumbers' and 'productSelector'
-case'itemNumbers':productsSearchValue=productsItemNumbers.split(',').map(function(item){return item.trim();});break;case'manualItemNumbers':productsSearchValue=productsManualItemNumbers;break;case'productSelector':productsSearchValue=productsSelectorItemNumbers;break;case'searchTerm':default:productsSearchValue=productsSearchTerm;}if(['itemNumbers','manualItemNumbers','productSelector'].includes(productSelectorType)){productsSearchType='productIds';}return{productsSearchType:productsSearchType,productsSearchValue:productsSearchValue};};/**
+ */export var getProductSearchParamsFromProductsInputConfig=function getProductSearchParamsFromProductsInputConfig(){var products=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var _ref=products||{},brand=_ref.brand,category=_ref.category,manualItemNumbers=_ref.manualItemNumbers,selectorItemNumbers=_ref.selectorItemNumbers,searchTerm=_ref.searchTerm;var mapping=[['brand',brand],['category',category],['searchTerm',searchTerm],['productIds',manualItemNumbers],['productIds',selectorItemNumbers]];// Pick the first non-undefined value
+// eslint-disable-next-line prefer-const
+var _ref2=mapping.find(function(_ref4){var _ref5=_slicedToArray(_ref4,2),value=_ref5[1];return value!==undefined;})||['searchTerm',searchTerm],_ref3=_slicedToArray(_ref2,2),productsSearchType=_ref3[0],productsSearchValue=_ref3[1];return{productsSearchType:productsSearchType,productsSearchValue:productsSearchValue};};/**
  * Parses the image URL to return a high resolution version if required.
  * @param {string} url The original image URL.
  * @param {boolean} useHighRes Whether to return a high resolution version.
  * @returns {string} The parsed image URL.
- */export var parseImageUrl=function parseImageUrl(url,useHighRes){if(!url||!useHighRes){return url;}var match=url.match(/^(.*)\.([^./]+)$/);return!match?url:"".concat(match[1],"@2x.").concat(match[2]);};
+ */export var parseImageUrl=function parseImageUrl(url,useHighRes){if(!url||!useHighRes){return url;}var match=url.match(/^(.*)\.([^./]+)$/);return!match?url:"".concat(match[1],"@2x.").concat(match[2]);};/**
+ * Retrieves the border radius based on the widget config
+ * @param {Object} params The helper parameters.
+ * @param {"default"|"none"|"rounded"|"custom"} params.borderRadius The border radius option.
+ * @param {number} params.borderRadiusCustom The custom border radius value.
+ * @returns {number} The resolved border radius.
+ */export var resolveBorderRadiusFromWidgetConfig=function resolveBorderRadiusFromWidgetConfig(_ref6){var borderRadius=_ref6.borderRadius,borderRadiusCustom=_ref6.borderRadiusCustom;if(borderRadius==='none')return 0;if(borderRadius==='rounded')return 16;if(borderRadius==='custom'&&typeof borderRadiusCustom==='number')return borderRadiusCustom;return 0;};

package/page/reducers/index.js

@@ -12,4 +12,6 @@ return _extends({},widget,{widgetConfig:customLegacyWidget.settings||{},widgetCo
  * @param {Object} [state={}] The current state.
  * @param {Object} action The action object.
  * @returns {Object} The new state.
- */export function pageV2(){var state=arguments.length>0&&arguments[0]!==undefined?arguments[0]:defaultState;var action=arguments.length>1?arguments[1]:undefined;/* eslint-disable no-param-reassign */var producer=produce(function(draft){switch(action.type){case REQUEST_PAGE_CONFIG_V2:{var pageType=action.pageType,pageSlug=action.pageSlug;draft[pageType]=draft[pageType]||{};draft[pageType][pageSlug]={data:null,isFetching:true,expires:0};break;}case RECEIVE_PAGE_CONFIG_V2:{var _pageType=action.pageType,_pageSlug=action.pageSlug,data=action.data;draft[_pageType]=draft[_pageType]||{};draft[_pageType][_pageSlug]={data:transformCustomLegacyWidgets(data),isFetching:false,expires:Date.now()+PAGE_STATE_LIFETIME};break;}case ERROR_PAGE_CONFIG_V2:{var _pageType2=action.pageType,_pageSlug2=action.pageSlug;draft[_pageType2]=draft[_pageType2]||{};draft[_pageType2][_pageSlug2]={data:null,isFetching:false};break;}case APP_WILL_START:{Object.keys(draft).forEach(function(pageType){Object.keys(draft[pageType]).forEach(function(pageCode){draft[pageType][pageCode].expires=0;});});break;}default:break;}});/* eslint-enable no-param-reassign */return producer(state);}
+ */export function pageV2(){var state=arguments.length>0&&arguments[0]!==undefined?arguments[0]:defaultState;var action=arguments.length>1?arguments[1]:undefined;/* eslint-disable no-param-reassign */var producer=produce(function(draft){var _ref=action||{},pageType=_ref.pageType,pageSlug=_ref.pageSlug,data=_ref.data;/**
+     * Helper to initialize pageType and pageSlug if not present
+     */var initializePage=function initializePage(){if(!draft[pageType]){draft[pageType]={};}if(!draft[pageType][pageSlug]){draft[pageType][pageSlug]={data:null,isFetching:false,expires:0,hasError:false};}};switch(action.type){case REQUEST_PAGE_CONFIG_V2:{initializePage();draft[pageType][pageSlug].isFetching=true;draft[pageType][pageSlug].hasError=false;break;}case RECEIVE_PAGE_CONFIG_V2:{initializePage();draft[pageType][pageSlug].data=transformCustomLegacyWidgets(data);draft[pageType][pageSlug].isFetching=false;draft[pageType][pageSlug].expires=Date.now()+PAGE_STATE_LIFETIME;draft[pageType][pageSlug].hasError=false;break;}case ERROR_PAGE_CONFIG_V2:{initializePage();draft[pageType][pageSlug].isFetching=false;draft[pageType][pageSlug].hasError=true;break;}case APP_WILL_START:{Object.keys(draft).forEach(function(page){Object.keys(draft[page]).forEach(function(pageCode){draft[page][pageCode].expires=0;});});break;}default:break;}});/* eslint-enable no-param-reassign */return producer(state);}

package/page/selectors/index.js

@@ -36,7 +36,7 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @param {Object} params The selector parameters.
  * @param {string} params.slug The slug of the page.
  * @returns {Function} A selector function that retrieves the unified CMS page data.
- */export var makeGetUnifiedCMSPageData=function makeGetUnifiedCMSPageData(_ref4){var slug=_ref4.slug;var getPageV2=makeGetPage({type:'cms',slug:slug});var getPageV1=makeGetPageConfigById({pageId:slug});return createSelector(getIsCms2Enabled,getPageV1,getPageV2,function(isCms2Enabled,pageV1,pageV2){var _ref8,_ref9;if(isCms2Enabled){var _ref5,_ref6,_pageV2$data,_pageV2$data2,_ref7,_pageV2$data3,_pageV2$data3$dropzon;if(!pageV2)return undefined;return{isFetching:(_ref5=pageV2===null||pageV2===void 0?void 0:pageV2.isFetching)!==null&&_ref5!==void 0?_ref5:false,expires:(_ref6=pageV2===null||pageV2===void 0?void 0:pageV2.expires)!==null&&_ref6!==void 0?_ref6:null,title:(pageV2===null||pageV2===void 0?void 0:(_pageV2$data=pageV2.data)===null||_pageV2$data===void 0?void 0:_pageV2$data.pageTitle)||(pageV2===null||pageV2===void 0?void 0:(_pageV2$data2=pageV2.data)===null||_pageV2$data2===void 0?void 0:_pageV2$data2.name)||'',widgets:(_ref7=pageV2===null||pageV2===void 0?void 0:(_pageV2$data3=pageV2.data)===null||_pageV2$data3===void 0?void 0:(_pageV2$data3$dropzon=_pageV2$data3.dropzones)===null||_pageV2$data3$dropzon===void 0?void 0:_pageV2$data3$dropzon['cmsWidgetList'])!==null&&_ref7!==void 0?_ref7:[],cmsVersion:2};}if(!pageV1)return undefined;return{isFetching:(_ref8=pageV1===null||pageV1===void 0?void 0:pageV1.isFetching)!==null&&_ref8!==void 0?_ref8:false,expires:(_ref9=pageV1===null||pageV1===void 0?void 0:pageV1.expires)!==null&&_ref9!==void 0?_ref9:null,title:(pageV1===null||pageV1===void 0?void 0:pageV1.title)||'',widgets:(pageV1===null||pageV1===void 0?void 0:pageV1.widgets)||[],cmsVersion:1};});};/**
+ */export var makeGetUnifiedCMSPageData=function makeGetUnifiedCMSPageData(_ref4){var slug=_ref4.slug;var getPageV2=makeGetPage({type:'cms',slug:slug});var getPageV1=makeGetPageConfigById({pageId:slug});return createSelector(getIsCms2Enabled,getPageV1,getPageV2,function(isCms2Enabled,pageV1,pageV2){var _ref9,_ref10;if(isCms2Enabled){var _ref5,_ref6,_pageV2$data,_pageV2$data2,_ref7,_pageV2$data3,_pageV2$data3$dropzon,_ref8;if(!pageV2)return undefined;return{isFetching:(_ref5=pageV2===null||pageV2===void 0?void 0:pageV2.isFetching)!==null&&_ref5!==void 0?_ref5:false,expires:(_ref6=pageV2===null||pageV2===void 0?void 0:pageV2.expires)!==null&&_ref6!==void 0?_ref6:null,title:(pageV2===null||pageV2===void 0?void 0:(_pageV2$data=pageV2.data)===null||_pageV2$data===void 0?void 0:_pageV2$data.pageTitle)||(pageV2===null||pageV2===void 0?void 0:(_pageV2$data2=pageV2.data)===null||_pageV2$data2===void 0?void 0:_pageV2$data2.name)||'',widgets:(_ref7=pageV2===null||pageV2===void 0?void 0:(_pageV2$data3=pageV2.data)===null||_pageV2$data3===void 0?void 0:(_pageV2$data3$dropzon=_pageV2$data3.dropzones)===null||_pageV2$data3$dropzon===void 0?void 0:_pageV2$data3$dropzon['cmsWidgetList'])!==null&&_ref7!==void 0?_ref7:[],cmsVersion:2,hasError:(_ref8=pageV2===null||pageV2===void 0?void 0:pageV2.hasError)!==null&&_ref8!==void 0?_ref8:false};}if(!pageV1)return undefined;return{isFetching:(_ref9=pageV1===null||pageV1===void 0?void 0:pageV1.isFetching)!==null&&_ref9!==void 0?_ref9:false,expires:(_ref10=pageV1===null||pageV1===void 0?void 0:pageV1.expires)!==null&&_ref10!==void 0?_ref10:null,title:(pageV1===null||pageV1===void 0?void 0:pageV1.title)||'',widgets:(pageV1===null||pageV1===void 0?void 0:pageV1.widgets)||[],cmsVersion:1,hasError:false};});};/**
  * Creates a selector that generates a hash to select results for widget products.
  * @param {'searchTerm' | 'productIds' | 'brand' | 'category' |'highlights'} type Type of the
  * request to make.

package/page/widgets/Button/Button.js

@@ -0,0 +1,4 @@
+import React,{useCallback}from'react';import{Button}from'@shopgate/engage/components';import{useWidget}from'@shopgate/engage/page/hooks';import{makeStyles}from'@shopgate/engage/styles';import{useNavigation}from'@shopgate/engage/core';var useStyles=makeStyles()({root:{display:'flex',justifyContent:'center'},text:{whiteSpace:'nowrap'}});/**
+ * The ButtonWidget is used to display a button.
+ * @returns {JSX.Element}
+ */var ButtonWidget=function ButtonWidget(){var _useStyles=useStyles(),classes=_useStyles.classes;var _useWidget=useWidget(),config=_useWidget.config;var text=config.text,link=config.link;var _useNavigation=useNavigation(),push=_useNavigation.push;var handleClick=useCallback(function(e){e.stopPropagation();if(!link)return;push({pathname:link});},[link,push]);if(!text)return null;return React.createElement("div",{className:classes.root},React.createElement(Button,{type:"secondary",onClick:handleClick,wrapContent:false},React.createElement("span",{className:classes.text},text)));};export default ButtonWidget;

package/page/widgets/Button/index.js

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

package/page/widgets/HTML/HTML.js

@@ -1,5 +1,5 @@
 import React from'react';import{HtmlSanitizer}from'@shopgate/engage/components';import{makeStyles}from'@shopgate/engage/styles';import{themeConfig}from'@shopgate/engage';import{useHtmlWidget}from"./hooks";var colors=themeConfig.colors;var useStyles=makeStyles()({root:{' h1, h2, h3, h4, h5, h6, p, ul, ol':{margin:'1rem 0'},' h1, h2, h3, h4, h5, h6':{fontWeight:600},' h1':{fontSize:'1.5rem'},' h2':{fontSize:'1.25rem'},' h3':{fontSize:'1.1rem'},' h4, h5, h6':{fontSize:'1rem'},' ol, ul':{paddingLeft:'1rem'},' ol > li':{listStyle:'decimal'},' ul > li':{listStyle:'disc'},' img':{display:'initial'},' img[style*="float: left"], img[style*="float:left"], img.pull-left':{marginRight:'1rem'},' img[style*="float: right"], img[style*="float:right"], img.pull-right':{marginLeft:'1rem'},' code, pre':{whiteSpace:'pre-wrap'},' blockquote, q':{paddingLeft:'1rem',margin:'2rem 0',borderLeft:".25rem solid ".concat(colors.shade6),fontStyle:'italic'},' > :first-child':{marginTop:0},// Clearfix for floated widget content
-':after':{clear:'both',content:'.',display:'block',visibility:'hidden',height:0}}});/**
+':after':{clear:'both',content:'.',display:'block',visibility:'hidden',height:0},a:{color:'var(--color-primary)'}}});/**
  * The HtmlWidget component is used to display html code.
  * @returns {JSX.Element}
  */var HtmlWidget=function HtmlWidget(){var _useStyles=useStyles(),classes=_useStyles.classes;var _useHtmlWidget=useHtmlWidget(),html=_useHtmlWidget.html;return React.createElement(HtmlSanitizer,{settings:{html:html},processStyles:true,className:classes.root},html);};export default HtmlWidget;

package/page/widgets/HeroBanner/HeroBanner.js

@@ -1,3 +1,3 @@
-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{ConditionalWrapper,Link}from'@shopgate/engage/components';import{WidgetRichText,ResponsiveWidgetImage}from'@shopgate/engage/page/components';import{makeStyles}from'@shopgate/engage/styles';import{useHeroBannerWidget}from"./hooks";var useStyles=makeStyles()(function(theme){return{link:{width:'100%'},content:_defineProperty({width:'100%',position:'relative',display:'flex',alignItems:'center',minHeight:300},theme.breakpoints.up('md'),{minHeight:400}),richText:{position:'relative',zIndex:2,padding:theme.spacing(2)},image:{position:'absolute',width:'100%',height:'100%',top:0,left:0,objectFit:'cover',zIndex:0,pointerEvents:'none'}};});/**
+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{ConditionalWrapper,Link}from'@shopgate/engage/components';import{WidgetRichText,ResponsiveWidgetImage}from'@shopgate/engage/page/components';import{makeStyles}from'@shopgate/engage/styles';import{useHeroBannerWidget}from"./hooks";var useStyles=makeStyles()(function(theme){return{link:{width:'100%'},content:_defineProperty({width:'100%',position:'relative',display:'flex',alignItems:'center',minHeight:300},theme.breakpoints.up('md'),{minHeight:400}),richText:{position:'relative',zIndex:2,padding:theme.spacing(2)},imageContainer:{position:'absolute',width:'100%',height:'100%',top:0,left:0}};});/**
  * @returns {JSX.Element}
- */var HeroBanner=function HeroBanner(){var _useHeroBannerWidget=useHeroBannerWidget(),text=_useHeroBannerWidget.text,backgroundImage=_useHeroBannerWidget.backgroundImage,link=_useHeroBannerWidget.link;var _useStyles=useStyles(),cx=_useStyles.cx,classes=_useStyles.classes;return React.createElement(ConditionalWrapper,{condition:!!link,wrapper:function wrapper(children){return React.createElement(Link,{href:link,className:cx(classes.link)},children);}},React.createElement("div",{className:cx(classes.content)},React.createElement(WidgetRichText,{content:text,className:cx(classes.richText)}),React.createElement(ResponsiveWidgetImage,{src:backgroundImage===null||backgroundImage===void 0?void 0:backgroundImage.url,alt:backgroundImage===null||backgroundImage===void 0?void 0:backgroundImage.alt,className:cx(classes.image)})));};export default HeroBanner;
+ */var HeroBanner=function HeroBanner(){var _useHeroBannerWidget=useHeroBannerWidget(),text=_useHeroBannerWidget.text,backgroundImage=_useHeroBannerWidget.backgroundImage,link=_useHeroBannerWidget.link,borderRadius=_useHeroBannerWidget.borderRadius,parallax=_useHeroBannerWidget.parallax;var _useStyles=useStyles(),cx=_useStyles.cx,classes=_useStyles.classes;return React.createElement(ConditionalWrapper,{condition:!!link,wrapper:function wrapper(children){return React.createElement(Link,{href:link,className:cx(classes.link)},children);}},React.createElement("div",{className:cx(classes.content)},React.createElement(WidgetRichText,{content:text,className:cx(classes.richText)}),React.createElement("div",{className:cx(classes.imageContainer)},React.createElement(ResponsiveWidgetImage,{src:backgroundImage===null||backgroundImage===void 0?void 0:backgroundImage.url,alt:backgroundImage===null||backgroundImage===void 0?void 0:backgroundImage.alt,borderRadius:borderRadius,enableParallax:parallax,isBanner:true}))));};export default HeroBanner;

package/page/widgets/HeroBanner/hooks.js

@@ -1,14 +1,17 @@
-import{useWidget}from'@shopgate/engage/page/hooks';/**
+var _excluded=["borderRadius","borderRadiusCustom"];function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import{useWidget}from'@shopgate/engage/page/hooks';import{resolveBorderRadiusFromWidgetConfig}from"../../helpers";/**
  * @typedef {Object} HeroBanner
  * @property {string} text Banner text content
  * @property {Object} backgroundImage Banner background image
  * @property {string} backgroundImage.url Banner background image URL
  * @property {string} backgroundImage.alt Banner background image alt text
  * @property {string} link Optional banner link
+ * @property {"default"|"none"|"rounded"|"custom"} borderRadius The border radius option.
+ * @property {number} [borderRadiusCustom] The custom border radius value.
+ * @property {boolean} parallax Whether to apply a parallax effect to the image
  */ /**
  * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
  *   .useWidget<HeroBanner> >} UseWidgetReturnType
  */ // eslint-disable-next-line valid-jsdoc
 /**
  * Hook to access the Image widget configuration and data.
- */export var useHeroBannerWidget=function useHeroBannerWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;return config;};
+ */export var useHeroBannerWidget=function useHeroBannerWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var _ref=config||{},borderRadius=_ref.borderRadius,borderRadiusCustom=_ref.borderRadiusCustom,rest=_objectWithoutProperties(_ref,_excluded);var borderRadiusResolved=resolveBorderRadiusFromWidgetConfig({borderRadius:borderRadius,borderRadiusCustom:borderRadiusCustom});return _extends({},rest,{borderRadius:borderRadiusResolved});};

package/page/widgets/Image/Image.js

@@ -1,4 +1,4 @@
-import React from'react';import{makeStyles}from'@shopgate/engage/styles';import{Link,ConditionalWrapper}from'@shopgate/engage/components';import{ResponsiveWidgetImage}from'@shopgate/engage/page/components';import{useImageWidget}from"./hooks";var useStyles=makeStyles()(function(){return{link:{},image:{width:'100%'}};});/**
+import React from'react';import{makeStyles}from'@shopgate/engage/styles';import{Link,ConditionalWrapper}from'@shopgate/engage/components';import{ResponsiveWidgetImage}from'@shopgate/engage/page/components';import{useImageWidget}from"./hooks";var useStyles=makeStyles()({link:{},image:{width:'100%'}});/**
  * The ImageWidget is used to display a image.
  * @returns {JSX.Element}
- */var Image=function Image(){var _useStyles=useStyles(),cx=_useStyles.cx,classes=_useStyles.classes;var _useImageWidget=useImageWidget(),link=_useImageWidget.link,altText=_useImageWidget.altText,url=_useImageWidget.url;if(!url)return null;return React.createElement(ConditionalWrapper,{condition:!!link,wrapper:function wrapper(children){return React.createElement(Link,{href:link,className:cx(classes.link)},children);}},React.createElement(ResponsiveWidgetImage,{src:url,alt:altText,className:cx(classes.image)}));};export default Image;
+ */var Image=function Image(){var _useStyles=useStyles(),cx=_useStyles.cx,classes=_useStyles.classes;var _useImageWidget=useImageWidget(),link=_useImageWidget.link,altText=_useImageWidget.altText,url=_useImageWidget.url,borderRadius=_useImageWidget.borderRadius,parallax=_useImageWidget.parallax;if(!url)return null;return React.createElement(ConditionalWrapper,{condition:!!link,wrapper:function wrapper(children){return React.createElement(Link,{href:link,className:cx(classes.link)},children);}},React.createElement(ResponsiveWidgetImage,{src:url,alt:altText,className:cx(classes.image),borderRadius:borderRadius,enableParallax:parallax}));};export default Image;

package/page/widgets/Image/hooks.js

@@ -1,4 +1,4 @@
-import{useWidget}from'@shopgate/engage/page/hooks';import{useResponsiveValue}from'@shopgate/engage/styles';/**
+import{useWidget}from'@shopgate/engage/page/hooks';import{useResponsiveValue}from'@shopgate/engage/styles';import{resolveBorderRadiusFromWidgetConfig}from"../../helpers";/**
  * @typedef {Object} ImageWidgetConfig
  * @property {Object} image The image object.
  * @property {string} image.url The image URL.
@@ -9,6 +9,9 @@ import{useWidget}from'@shopgate/engage/page/hooks';import{useResponsiveValue}fro
  * @property {boolean} [useImageWide] Whether to use the wide image on
  * medium and larger screens.
  * @property {string} [link] The link URL.
+ * @property {"default"|"none"|"rounded"|"custom"} borderRadius The border radius option.
+ * @property {number} [borderRadiusCustom] The custom border radius value.
+ * @property {boolean} [parallax] Whether to apply a parallax effect to the image.
  */ /**
  * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
  *   .useWidget<ImageWidgetConfig> >} UseWidgetReturnType
@@ -16,4 +19,4 @@ import{useWidget}from'@shopgate/engage/page/hooks';import{useResponsiveValue}fro
 /**
  * Hook to access the Image widget configuration and data.
  * Handles responsive image URLs and alt texts.
- */export var useImageWidget=function useImageWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var _ref=config||{},image=_ref.image,imageWide=_ref.imageWide,link=_ref.link,useImageWide=_ref.useImageWide;var resolved=useResponsiveValue({xs:{url:image===null||image===void 0?void 0:image.url,altText:image===null||image===void 0?void 0:image.altText},md:{url:useImageWide&&(imageWide===null||imageWide===void 0?void 0:imageWide.url)?imageWide.url:image===null||image===void 0?void 0:image.url,altText:useImageWide&&(imageWide===null||imageWide===void 0?void 0:imageWide.altText)?imageWide.altText:image===null||image===void 0?void 0:image.altText}});return{url:resolved.url,altText:resolved.altText,link:link};};
+ */export var useImageWidget=function useImageWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var _ref=config||{},image=_ref.image,imageWide=_ref.imageWide,link=_ref.link,useImageWide=_ref.useImageWide,borderRadius=_ref.borderRadius,borderRadiusCustom=_ref.borderRadiusCustom,parallax=_ref.parallax;var borderRadiusResolved=resolveBorderRadiusFromWidgetConfig({borderRadius:borderRadius,borderRadiusCustom:borderRadiusCustom});var resolved=useResponsiveValue({xs:{url:image===null||image===void 0?void 0:image.url,altText:image===null||image===void 0?void 0:image.altText},md:{url:useImageWide&&(imageWide===null||imageWide===void 0?void 0:imageWide.url)?imageWide.url:image===null||image===void 0?void 0:image.url,altText:useImageWide&&(imageWide===null||imageWide===void 0?void 0:imageWide.altText)?imageWide.altText:image===null||image===void 0?void 0:image.altText}});return{url:resolved.url,altText:resolved.altText,link:link,borderRadius:borderRadiusResolved,parallax:parallax};};

package/page/widgets/ImageRow/ImageRow.js

@@ -1,4 +1,4 @@
 function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React from'react';import{makeStyles}from'@shopgate/engage/styles';import{Link,ConditionalWrapper,Grid}from'@shopgate/engage/components';import{useImageRowWidget}from"./hooks";import ResponsiveWidgetImage from"../../components/ResponsiveWidgetImage";var useStyles=makeStyles()(function(theme,_ref){var imageSpacing=_ref.imageSpacing;return{imageContainer:{width:'100%',display:'flex',overflowX:'hidden',alignItems:'flex-start',flexWrap:'wrap',gap:"".concat(imageSpacing,"px")},image:{maxWidth:'100%',height:'auto',flexShrink:1,display:'block',width:'100%',objectFit:'contain'},itemContainerDense:_defineProperty(_defineProperty({},theme.breakpoints.down('md'),{flex:"1 1 calc(33% - ".concat(imageSpacing,"px)")}),theme.breakpoints.up('md'),{flex:"1 1 calc(16% - ".concat(imageSpacing,"px)")}),itemContainerDefault:_defineProperty(_defineProperty({},theme.breakpoints.down('md'),{flex:"1 1 calc(50% - ".concat(imageSpacing,"px)")}),theme.breakpoints.up('md'),{flex:"1 1 calc(25% - ".concat(imageSpacing,"px)")}),itemContainerNoWrap:{flex:' 1 1 0%'}};});/**
  * The ImageRowWidget is used to display images in one or more rows.
  * @returns {JSX.Element}
- */var ImageRow=function ImageRow(){var _useImageRowWidget=useImageRowWidget(),images=_useImageRowWidget.images,imageWrapping=_useImageRowWidget.imageWrapping,imageSpacing=_useImageRowWidget.imageSpacing;var _useStyles=useStyles({imageSpacing:imageSpacing}),cx=_useStyles.cx,classes=_useStyles.classes;if(images.length===0)return null;return React.createElement(Grid,{className:cx(classes.imageContainer),component:"div"},images.map(function(img){return React.createElement(Grid.Item,{key:img.url,component:"div",className:cx(_defineProperty(_defineProperty(_defineProperty({},classes.itemContainerDefault,imageWrapping==='responsiveDefault'),classes.itemContainerDense,imageWrapping==='responsiveDense'),classes.itemContainerNoWrap,imageWrapping==='responsiveNoWrap'))},React.createElement(ConditionalWrapper,{condition:!!img.link,wrapper:function wrapper(children){return React.createElement(Link,{href:img.link,className:cx(classes.image)},children);}},React.createElement(ResponsiveWidgetImage,{src:img.url,alt:img.altText,className:cx(classes.image)})));}));};export default ImageRow;
+ */var ImageRow=function ImageRow(){var _useImageRowWidget=useImageRowWidget(),images=_useImageRowWidget.images,imageWrapping=_useImageRowWidget.imageWrapping,imageSpacing=_useImageRowWidget.imageSpacing,borderRadius=_useImageRowWidget.borderRadius,parallax=_useImageRowWidget.parallax;var _useStyles=useStyles({imageSpacing:imageSpacing}),cx=_useStyles.cx,classes=_useStyles.classes;if(images.length===0)return null;return React.createElement(Grid,{className:cx(classes.imageContainer),component:"div"},images.map(function(img){return React.createElement(Grid.Item,{key:img.url,component:"div",className:cx(_defineProperty(_defineProperty(_defineProperty({},classes.itemContainerDefault,imageWrapping==='responsiveDefault'),classes.itemContainerDense,imageWrapping==='responsiveDense'),classes.itemContainerNoWrap,imageWrapping==='responsiveNoWrap'))},React.createElement(ConditionalWrapper,{condition:!!img.link,wrapper:function wrapper(children){return React.createElement(Link,{href:img.link,className:cx(classes.image)},children);}},React.createElement(ResponsiveWidgetImage,{src:img.url,alt:img.altText,className:cx(classes.image),borderRadius:borderRadius,enableParallax:parallax})));}));};export default ImageRow;

package/page/widgets/ImageRow/hooks.js

@@ -1,10 +1,13 @@
-import{useWidget}from'@shopgate/engage/page/hooks';import{useMemo}from'react';/**
+import{useWidget}from'@shopgate/engage/page/hooks';import{useMemo}from'react';import{resolveBorderRadiusFromWidgetConfig}from"../../helpers";/**
  * @typedef {Object} ImageRowWidgetConfig
  * @property {Array} images The images array.
  * @property {string} imageWrapping The imageWrapping setting,
  * one of: responsiveDefault | responsiveDense | responsiveNoWrap.
  * @property {string} [link] The optional link URL.
  * @property {number} [imageSpacing] An optional gap between images (in pixels).
+ * @property {"default"|"none"|"rounded"|"custom"} borderRadius The border radius option.
+ * @property {number} [borderRadiusCustom] The custom border radius value.
+ * @property {boolean} [parallax] Whether to apply a parallax effect to the image.
  */ /**
  * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
  *   .useWidget<ImageRowWidgetConfig> >} UseWidgetReturnType
@@ -12,4 +15,4 @@ import{useWidget}from'@shopgate/engage/page/hooks';import{useMemo}from'react';/*
 /**
  * Hook to access the Image row widget configuration and data.
  * Handles responsive image URLs and alt texts.
- */export var useImageRowWidget=function useImageRowWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var _ref=config||{},_ref$images=_ref.images,images=_ref$images===void 0?[]:_ref$images,imageWrapping=_ref.imageWrapping,imageSpacing=_ref.imageSpacing;var mappedImages=useMemo(function(){return images.map(function(_ref2){var image=_ref2.image,link=_ref2.link;var _ref3=image||{},url=_ref3.url,altText=_ref3.altText;return{url:url,altText:altText,link:link};}).filter(function(img){return img.url;});},[images]);return{images:mappedImages,imageWrapping:imageWrapping,imageSpacing:imageSpacing};};
+ */export var useImageRowWidget=function useImageRowWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var _ref=config||{},_ref$images=_ref.images,images=_ref$images===void 0?[]:_ref$images,imageWrapping=_ref.imageWrapping,_ref$imageSpacing=_ref.imageSpacing,imageSpacing=_ref$imageSpacing===void 0?0:_ref$imageSpacing,borderRadius=_ref.borderRadius,borderRadiusCustom=_ref.borderRadiusCustom,parallax=_ref.parallax;var borderRadiusResolved=resolveBorderRadiusFromWidgetConfig({borderRadius:borderRadius,borderRadiusCustom:borderRadiusCustom});var mappedImages=useMemo(function(){return images.map(function(_ref2){var image=_ref2.image,link=_ref2.link;var _ref3=image||{},url=_ref3.url,altText=_ref3.altText;return{url:url,altText:altText,link:link};}).filter(function(img){return img.url;});},[images]);return{images:mappedImages,imageWrapping:imageWrapping,imageSpacing:imageSpacing,borderRadius:borderRadiusResolved,parallax:parallax};};

package/page/widgets/ImageSlider/ImageSlider.js

@@ -1,4 +1,4 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import{makeStyles}from'@shopgate/engage/styles';import{Swiper,Link,ConditionalWrapper}from'@shopgate/engage/components';import{ResponsiveWidgetImage}from'@shopgate/engage/page/components';import{useImageSliderWidget}from"./hooks";var useStyles=makeStyles()({image:{touchAction:'none',width:'100%'}});/**
+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{makeStyles}from'@shopgate/engage/styles';import{Swiper,Link,ConditionalWrapper}from'@shopgate/engage/components';import{ResponsiveWidgetImage}from'@shopgate/engage/page/components';import{useImageSliderWidget}from"./hooks";var useStyles=makeStyles()({image:{width:'100%'}});/**
  * The ImageSliderWidget is used to display an image slider.
  * @returns {JSX.Element}
- */var ImageSliderWidget=function ImageSliderWidget(){var _useStyles=useStyles(),classes=_useStyles.classes;var _useImageSliderWidget=useImageSliderWidget(),slides=_useImageSliderWidget.slides,swiperProps=_useImageSliderWidget.swiperProps;if(slides.length===0){return null;}return React.createElement(Swiper,_extends({indicators:true},swiperProps),slides.map(function(slide){if(!slide.image.url){return null;}return React.createElement(Swiper.Item,{key:slide.image.url},React.createElement(ConditionalWrapper,{condition:!!slide.link,wrapper:function wrapper(children){return React.createElement(Link,{href:slide.link},children);}},React.createElement(ResponsiveWidgetImage,{className:classes.image,src:slide.image.url,alt:slide.image.altText||''})));}));};export default ImageSliderWidget;
+ */var ImageSliderWidget=function ImageSliderWidget(){var _useImageSliderWidget=useImageSliderWidget(),slides=_useImageSliderWidget.slides,swiperProps=_useImageSliderWidget.swiperProps,borderRadius=_useImageSliderWidget.borderRadius;var _useStyles=useStyles(),classes=_useStyles.classes;if(slides.length===0){return null;}return React.createElement(Swiper,_extends({indicators:true},swiperProps),slides.map(function(slide){if(!slide.image.url){return null;}return React.createElement(Swiper.Item,{key:slide.image.url},React.createElement(ConditionalWrapper,{condition:!!slide.link,wrapper:function wrapper(children){return React.createElement(Link,{href:slide.link},children);}},React.createElement(ResponsiveWidgetImage,{className:classes.image,src:slide.image.url,alt:slide.image.altText||'',borderRadius:borderRadius})));}));};export default ImageSliderWidget;

package/page/widgets/ImageSlider/hooks.js

@@ -1,4 +1,4 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}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{useMemo}from'react';import{useWidget}from'@shopgate/engage/page/hooks';import{useTheme}from'@shopgate/engage/styles';/**
+function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}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{useMemo}from'react';import{useWidget}from'@shopgate/engage/page/hooks';import{useTheme}from'@shopgate/engage/styles';import{resolveBorderRadiusFromWidgetConfig}from"../../helpers";/**
  * @typedef {import('swiper/react').SwiperProps} SwiperCmpProps
  */ /**
  * @typedef {Object} ImageSliderImageData
@@ -9,7 +9,7 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @property {ImageSliderImageData} image The image data object.
  * @property {string} [link] The link URL.
  */ /**
- * @typedef {Object} ImageWidgetConfig
+ * @typedef {Object} ImageSliderWidgetConfig
  * @property {ImageSliderImage[]} images The image objects.
  * @property {boolean} slideAutomatic Whether the slider should automatically slide.
  * @property {boolean} endlessSlider Whether the slider should loop endlessly.
@@ -19,15 +19,24 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @property {number} slidesPerViewCustomMedium Slides per view for medium screens.
  * @property {number} slidesPerViewCustomLarge Slides per view for large screens.
  * @property {number} imageSpacing Optional gap between image slides (in pixels).
+ * @property {"default"|"off"|"bullets"|"progressbar"|"fraction"} paginationStyle
+ * @property {"default"|"none"|"rounded"|"custom"} borderRadius The border radius option.
+ * @property {number} [borderRadiusCustom] The custom border radius value.
+ * the pagination type for the slider.
  */ /**
- * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
- *   .useWidget<ImageWidgetConfig> >} UseWidgetReturnType
+ * @typedef {ReturnType<typeof import('@shopgate/engage/page/hooks')
+ *   .useWidget<ImageSliderWidgetConfig> >} UseWidgetReturnType
  */ // eslint-disable-next-line valid-jsdoc
 /**
  * Hook to access the ImageSlider widget configuration and data.
- */export var useImageSliderWidget=function useImageSliderWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config,isPreview=_useWidget.isPreview;var theme=useTheme();var images=config.images,slideAutomatic=config.slideAutomatic,endlessSlider=config.endlessSlider,sliderSpeed=config.sliderSpeed,slidesPerView=config.slidesPerView,slidesPerViewCustomSmall=config.slidesPerViewCustomSmall,slidesPerViewCustomMedium=config.slidesPerViewCustomMedium,slidesPerViewCustomLarge=config.slidesPerViewCustomLarge,imageSpacing=config.imageSpacing;/**
+ */export var useImageSliderWidget=function useImageSliderWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config,isPreview=_useWidget.isPreview,layout=_useWidget.layout;var theme=useTheme();var images=config.images,slideAutomatic=config.slideAutomatic,endlessSlider=config.endlessSlider,sliderSpeed=config.sliderSpeed,slidesPerView=config.slidesPerView,slidesPerViewCustomSmall=config.slidesPerViewCustomSmall,slidesPerViewCustomMedium=config.slidesPerViewCustomMedium,slidesPerViewCustomLarge=config.slidesPerViewCustomLarge,imageSpacing=config.imageSpacing,_config$paginationSty=config.paginationStyle,paginationStyle=_config$paginationSty===void 0?'bullets':_config$paginationSty,borderRadius=config.borderRadius,borderRadiusCustom=config.borderRadiusCustom;var borderRadiusResolved=resolveBorderRadiusFromWidgetConfig({borderRadius:borderRadius,borderRadiusCustom:borderRadiusCustom});var paginationType=useMemo(function(){return paginationStyle==='default'?'bullets':paginationStyle.toLowerCase();},[paginationStyle]);var imagesWithUrls=useMemo(function(){return images.filter(function(img){var _img$image;return img===null||img===void 0?void 0:(_img$image=img.image)===null||_img$image===void 0?void 0:_img$image.url;});},[images]);/**
    * @type {SwiperCmpProps}
-   */var swiperProps=useMemo(function(){var slidesPerViewSmall=1.0;var slidesPerViewMedium=1.3;var slidesPerViewLarge=1.6;if(slidesPerView==='dense'){slidesPerViewSmall=1.3;slidesPerViewMedium=1.8;slidesPerViewLarge=2.3;}else if(slidesPerView==='custom'){slidesPerViewSmall=slidesPerViewCustomSmall;slidesPerViewMedium=slidesPerViewCustomMedium;slidesPerViewLarge=slidesPerViewCustomLarge;}var breakpoints=_defineProperty(_defineProperty({},theme.breakpoints.values.sm,{slidesPerView:slidesPerViewMedium}),theme.breakpoints.values.md,{slidesPerView:slidesPerViewLarge});return _extends({autoplay:slideAutomatic?{delay:sliderSpeed}:false,loop:endlessSlider,slidesPerView:slidesPerViewSmall,breakpoints:breakpoints,spaceBetween:imageSpacing},isPreview?{// Improves interaction with the slider in the CMS preview iframe
-touchStartPreventDefault:true,// Create a component key from breakpoint settings to force remount on breakpoint change.
-// This fixes issues with the Swiper when breakpoint settings change during runtime.
-key:JSON.stringify(_extends({slidesPerView:slidesPerView,spaceBetween:imageSpacing},breakpoints))}:{});},[isPreview,slidesPerView,slideAutomatic,sliderSpeed,endlessSlider,theme.breakpoints.values,slidesPerViewCustomMedium,slidesPerViewCustomLarge,slidesPerViewCustomSmall,imageSpacing]);return{slides:images.filter(function(img){var _img$image;return img===null||img===void 0?void 0:(_img$image=img.image)===null||_img$image===void 0?void 0:_img$image.url;}),swiperProps:swiperProps};};
+   */var swiperProps=useMemo(function(){var _ref,_ref2;var slidesPerViewSmall=1.0;var slidesPerViewMedium=1.3;var slidesPerViewLarge=1.6;if(slidesPerView==='dense'){slidesPerViewSmall=1.3;slidesPerViewMedium=1.8;slidesPerViewLarge=2.3;}else if(slidesPerView==='custom'){slidesPerViewSmall=slidesPerViewCustomSmall;slidesPerViewMedium=slidesPerViewCustomMedium;slidesPerViewLarge=slidesPerViewCustomLarge;}/**
+     * Special image spacing for slides with a SINGLE slide per view.
+     *
+     * Needs to be at least as large as the highest horizontal layout margin (when set) to avoid
+     * showing of more than one slide.
+     * @type {number}
+     */var imageSpacingForSingleSlide=Math.max((_ref=layout===null||layout===void 0?void 0:layout.marginLeft)!==null&&_ref!==void 0?_ref:0,(_ref2=layout===null||layout===void 0?void 0:layout.marginRight)!==null&&_ref2!==void 0?_ref2:0,imageSpacing);var breakpoints=_defineProperty(_defineProperty({},theme.breakpoints.values.sm,_extends({slidesPerView:slidesPerViewMedium},slidesPerViewMedium===1&&imageSpacingForSingleSlide?{spaceBetween:imageSpacingForSingleSlide}:{spaceBetween:imageSpacing})),theme.breakpoints.values.md,_extends({slidesPerView:slidesPerViewLarge},slidesPerViewLarge===1&&imageSpacingForSingleSlide?{spaceBetween:imageSpacingForSingleSlide}:{spaceBetween:imageSpacing}));var showPagination=paginationType!=='off'&&imagesWithUrls.length>1;// Create a key that changes when relevant config changes, to force remount of Swiper
+var componentKey=isPreview?JSON.stringify(_extends({slidesPerView:slidesPerView,spaceBetween:imageSpacing,paginationType:paginationType,showPagination:showPagination},breakpoints)):null;return _extends({autoplay:slideAutomatic?{delay:sliderSpeed}:false,loop:endlessSlider,slidesPerView:slidesPerViewSmall,breakpoints:breakpoints,pagination:showPagination?{type:paginationType,clickable:true,dynamicBullets:true}:false},layout.marginLeft||layout.marginRight?{style:_extends({},layout.marginLeft?{marginLeft:layout.marginLeft*-1,paddingLeft:layout.marginLeft}:{},{},layout.marginRight?{marginRight:layout.marginRight*-1,paddingRight:layout.marginRight}:{})}:null,{},slidesPerViewSmall===1&&imageSpacingForSingleSlide?{spaceBetween:imageSpacingForSingleSlide}:{spaceBetween:imageSpacing},{},isPreview?{key:componentKey,// Improves interaction with the slider in the CMS preview iframe
+touchStartPreventDefault:true}:{});},[slidesPerView,theme.breakpoints.values.sm,theme.breakpoints.values.md,paginationType,imagesWithUrls.length,imageSpacing,slideAutomatic,sliderSpeed,endlessSlider,isPreview,slidesPerViewCustomSmall,slidesPerViewCustomMedium,slidesPerViewCustomLarge,layout]);return{slides:imagesWithUrls,swiperProps:swiperProps,borderRadius:borderRadiusResolved};};

package/page/widgets/ProductSlider/hooks.js

@@ -21,4 +21,4 @@ import _camelCase from"lodash/camelCase";function _extends(){_extends=Object.ass
  */ // eslint-disable-next-line valid-jsdoc
 /**
  * Hook to access the Product Slider widget configuration.
- */export var useProductSliderWidget=function useProductSliderWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config,isPreview=_useWidget.isPreview;var products=config.products,productCount=config.productCount,sort=config.sort,_config$showName=config.showName,showName=_config$showName===void 0?false:_config$showName,_config$showPrice=config.showPrice,showPrice=_config$showPrice===void 0?false:_config$showPrice,_config$showRating=config.showRating,showRating=_config$showRating===void 0?false:_config$showRating,_config$slideAutomati=config.slideAutomatic,slideAutomatic=_config$slideAutomati===void 0?true:_config$slideAutomati,_config$endlessSlider=config.endlessSlider,endlessSlider=_config$endlessSlider===void 0?true:_config$endlessSlider,_config$sliderSpeed=config.sliderSpeed,sliderSpeed=_config$sliderSpeed===void 0?7000:_config$sliderSpeed,_config$showHeadline=config.showHeadline,showHeadline=_config$showHeadline===void 0?false:_config$showHeadline,headline=config.headline;var productSearchParams=useMemo(function(){return getProductSearchParamsFromProductsInputConfig(products);},[products]);var swiperProps=useMemo(function(){return{autoplay:slideAutomatic,delay:sliderSpeed,loop:endlessSlider};},[slideAutomatic,sliderSpeed,endlessSlider]);var productItemProps=useMemo(function(){return{hideName:!showName,hidePrice:!showPrice,hideRating:!showRating};},[showName,showPrice,showRating]);return _extends({},productSearchParams,{sort:_camelCase(sort),productCount:productCount,swiperProps:swiperProps,productItemProps:productItemProps,isPreview:isPreview,showHeadline:showHeadline,headline:headline});};
+ */export var useProductSliderWidget=function useProductSliderWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config,isPreview=_useWidget.isPreview,layout=_useWidget.layout;var products=config.products,productCount=config.productCount,sort=config.sort,_config$showName=config.showName,showName=_config$showName===void 0?false:_config$showName,_config$showPrice=config.showPrice,showPrice=_config$showPrice===void 0?false:_config$showPrice,_config$showRating=config.showRating,showRating=_config$showRating===void 0?false:_config$showRating,_config$slideAutomati=config.slideAutomatic,slideAutomatic=_config$slideAutomati===void 0?true:_config$slideAutomati,_config$endlessSlider=config.endlessSlider,endlessSlider=_config$endlessSlider===void 0?true:_config$endlessSlider,_config$sliderSpeed=config.sliderSpeed,sliderSpeed=_config$sliderSpeed===void 0?7000:_config$sliderSpeed,_config$showHeadline=config.showHeadline,showHeadline=_config$showHeadline===void 0?false:_config$showHeadline,headline=config.headline;var productSearchParams=useMemo(function(){return getProductSearchParamsFromProductsInputConfig(products);},[products]);var swiperProps=useMemo(function(){return _extends({autoplay:slideAutomatic,delay:sliderSpeed,loop:endlessSlider},layout.marginLeft||layout.marginRight?{style:_extends({},layout.marginLeft?{marginLeft:layout.marginLeft*-1,paddingLeft:layout.marginLeft}:{},{},layout.marginRight?{marginRight:layout.marginRight*-1,paddingRight:layout.marginRight}:{})}:null);},[slideAutomatic,sliderSpeed,endlessSlider,layout]);var productItemProps=useMemo(function(){return{hideName:!showName,hidePrice:!showPrice,hideRating:!showRating};},[showName,showPrice,showRating]);return _extends({},productSearchParams,{sort:_camelCase(sort),productCount:productCount,swiperProps:swiperProps,productItemProps:productItemProps,isPreview:isPreview,showHeadline:showHeadline,headline:headline});};

package/page/widgets/index.js

@@ -1 +1 @@
-export{default as PlaceholderWidget}from"./Placeholder";export{default as ProductListWidget}from"./ProductList";export{default as CategoryListWidget}from"./CategoryList";export{default as HtmlWidget}from"./HTML";export{default as ProductSliderWidget}from"./ProductSlider";export{default as HeadlineWidget}from"./Headline";export{default as ImageWidget}from"./Image";export{default as ImageRowWidget}from"./ImageRow";export{default as ImageSliderWidget}from"./ImageSlider";export{default as RichTextWidget}from"./RichText";export{default as HeroBannerWidget}from"./HeroBanner";
+export{default as PlaceholderWidget}from"./Placeholder";export{default as ProductListWidget}from"./ProductList";export{default as CategoryListWidget}from"./CategoryList";export{default as HtmlWidget}from"./HTML";export{default as ProductSliderWidget}from"./ProductSlider";export{default as HeadlineWidget}from"./Headline";export{default as ImageWidget}from"./Image";export{default as ImageRowWidget}from"./ImageRow";export{default as ImageSliderWidget}from"./ImageSlider";export{default as RichTextWidget}from"./RichText";export{default as HeroBannerWidget}from"./HeroBanner";export{default as ButtonWidget}from"./Button";

package/page/widgets/widgets.json

@@ -29,6 +29,9 @@
   "@shopgate/widgets/heroBannerWidget": {
     "path": "@shopgate/engage/page/widgets/HeroBanner"
   },
+  "@shopgate/widgets/buttonWidget": {
+    "path": "@shopgate/engage/page/widgets/Button"
+  },
   "@shopgate/widgetsInternal/Placeholder": {
     "path": "@shopgate/engage/page/widgets/Placeholder"
   }

package/product/components/ProductGridPrice/index.js

@@ -3,4 +3,4 @@ import React,{Fragment}from'react';import PropTypes from'prop-types';import{Grid
  * renders a row with the current price and a strike price when present. As same as the price info.
  * @param {Object} product A product entity.
  * @return {JSX.Element}
- */var ProductGridPrice=function ProductGridPrice(_ref){var product=_ref.product;var price=product.price;return React.createElement(Fragment,null,React.createElement(Grid,{className:"".concat(styles.priceWrapper," engage__product__product-grid-price"),wrap:true},React.createElement(Grid.Item,{grow:1},React.createElement(Price,{currency:price.currency,discounted:!!price.discount,unitPrice:price.unitPrice,unitPriceMin:price.unitPriceMin})),price.msrp>0&&price.unitPrice!==price.msrp&&React.createElement(Grid.Item,null,React.createElement(PriceStriked,{className:styles.strikedPrice,value:price.msrp,currency:price.currency})),!price.msrp&&price.unitPriceStriked>0&&price.unitPrice!==price.unitPriceStriked&&React.createElement(Grid.Item,null,React.createElement(PriceStriked,{className:styles.strikedPrice,value:price.unitPriceStriked,currency:price.currency}))),React.createElement(PriceInfo,{product:product,className:styles.basicPrice,wrapper:function wrapper(children){return React.createElement(Grid,null,React.createElement(Grid.Item,null,children));}}));};export default withPriceCalculation(ProductGridPrice);
+ */var ProductGridPrice=function ProductGridPrice(_ref){var product=_ref.product;var price=product.price;return React.createElement(Fragment,null,React.createElement(Grid,{className:"".concat(styles.priceWrapper," engage__product__product-grid-price"),wrap:true},React.createElement(Grid.Item,{grow:1},React.createElement(Price,{currency:price.currency,discounted:!!price.discount,unitPrice:price.unitPrice,unitPriceMin:price.unitPriceMin,unitPriceMax:price.unitPriceMax})),price.msrp>0&&price.unitPrice!==price.msrp&&React.createElement(Grid.Item,null,React.createElement(PriceStriked,{className:styles.strikedPrice,value:price.msrp,currency:price.currency})),!price.msrp&&price.unitPriceStriked>0&&price.unitPrice!==price.unitPriceStriked&&React.createElement(Grid.Item,null,React.createElement(PriceStriked,{className:styles.strikedPrice,value:price.unitPriceStriked,currency:price.currency}))),React.createElement(PriceInfo,{product:product,className:styles.basicPrice,wrapper:function wrapper(children){return React.createElement(Grid,null,React.createElement(Grid.Item,null,children));}}));};export default withPriceCalculation(ProductGridPrice);

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

@@ -2,4 +2,4 @@ import React,{Fragment}from'react';import PropTypes from'prop-types';import Grid
  * The Product List Item component.
  * @param {Object} props The component props.
  * @return {JSX}
- */var Item=function Item(_ref){var display=_ref.display,product=_ref.product;return React.createElement(Link,{tagName:"a",href:"".concat(ITEM_PATH,"/").concat(bin2hex(product.id)),className:"".concat(styles.container," engage__product__product-list__item"),itemProp:"item",itemScope:true,itemType:"http://schema.org/Product"},React.createElement(Grid,{className:styles.listItemContainer},React.createElement(Grid.Item,{shrink:0,className:styles.imageContainer},React.createElement(Portal,{name:portals.PRODUCT_ITEM_IMAGE_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_IMAGE,props:{productId:product.id}},React.createElement(Image,{itemProp:"image",src:product.featuredImageBaseUrl,alt:product.name})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_IMAGE_AFTER,props:{productId:product.id}}),React.createElement(ProductBadges,{location:"productList",productId:product.id},!!product.price.discount&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT,props:{productId:product.id}},React.createElement(DiscountBadge,{className:styles.discount,text:"-".concat(product.price.discount,"%")})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT_AFTER,props:{productId:product.id}})))),React.createElement(Grid.Item,{grow:4,className:styles.titleContainer},React.createElement(ProductName,{name:product.name,portalName:portals.PRODUCT_ITEM_NAME,portalProps:{productId:product.id},itemProp:"name",testId:"Productname: ".concat(product.name)}),(!display||display.manufacturer&&product.manufacturer)&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_MANUFACTURER_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_MANUFACTURER,props:{productId:product.id}},React.createElement(Manufacturer,{text:product.manufacturer,className:styles.manufacturer})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_MANUFACTURER_AFTER,props:{productId:product.id}})),product.availability&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_AVAILABILITY_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_AVAILABILITY,props:{productId:product.id}},React.createElement(Availability,{className:styles.availability,text:product.availability.text,state:product.availability.state})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_AVAILABILITY_AFTER,props:{productId:product.id}})),(!product.availability||product.availability.state===AVAILABILITY_STATE_OK)&&React.createElement(Availability,{state:!product.stock||product.stock.orderable?AVAILABILITY_STATE_OK:AVAILABILITY_STATE_ALERT,text:i18n.text('product.available.not'),showWhenAvailable:false})),(!display||display.price)&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_BEFORE,props:{productId:product.id,location:'productList'}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE,props:{productId:product.id,location:'productList'}},React.createElement(Grid.Item,{grow:1,className:styles.priceContainer},React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_INSIDE_BEFORE,props:{productId:product.id}}),React.createElement(Price,{className:styles.price,currency:product.price.currency,discounted:!!product.price.discount,unitPrice:product.price.unitPrice,unitPriceMin:product.price.unitPriceMin}),product.price.msrp>0&&product.price.unitPrice!==product.price.msrp&&React.createElement(PriceStriked,{value:product.price.msrp,currency:product.price.currency,className:styles.priceStriked}),!product.price.msrp&&product.price.unitPriceStriked>0&&React.createElement(PriceStriked,{value:product.price.unitPriceStriked,currency:product.price.currency,className:styles.priceStriked}),React.createElement(PriceInfo,{product:product,className:styles.priceInfo}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_INSIDE_AFTER,props:{productId:product.id}}))),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_AFTER,props:{productId:product.id,location:'productList'}})),React.createElement(Grid.Item,{shrink:0,className:styles.favouriteContainer})));};Item.defaultProps={display:null};export default Item;
+ */var Item=function Item(_ref){var display=_ref.display,product=_ref.product;return React.createElement(Link,{tagName:"a",href:"".concat(ITEM_PATH,"/").concat(bin2hex(product.id)),className:"".concat(styles.container," engage__product__product-list__item"),itemProp:"item",itemScope:true,itemType:"http://schema.org/Product"},React.createElement(Grid,{className:styles.listItemContainer},React.createElement(Grid.Item,{shrink:0,className:styles.imageContainer},React.createElement(Portal,{name:portals.PRODUCT_ITEM_IMAGE_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_IMAGE,props:{productId:product.id}},React.createElement(Image,{itemProp:"image",src:product.featuredImageBaseUrl,alt:product.name})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_IMAGE_AFTER,props:{productId:product.id}}),React.createElement(ProductBadges,{location:"productList",productId:product.id},!!product.price.discount&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT,props:{productId:product.id}},React.createElement(DiscountBadge,{className:styles.discount,text:"-".concat(product.price.discount,"%")})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT_AFTER,props:{productId:product.id}})))),React.createElement(Grid.Item,{grow:4,className:styles.titleContainer},React.createElement(ProductName,{name:product.name,portalName:portals.PRODUCT_ITEM_NAME,portalProps:{productId:product.id},itemProp:"name",testId:"Productname: ".concat(product.name)}),(!display||display.manufacturer&&product.manufacturer)&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_MANUFACTURER_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_MANUFACTURER,props:{productId:product.id}},React.createElement(Manufacturer,{text:product.manufacturer,className:styles.manufacturer})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_MANUFACTURER_AFTER,props:{productId:product.id}})),product.availability&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_AVAILABILITY_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_AVAILABILITY,props:{productId:product.id}},React.createElement(Availability,{className:styles.availability,text:product.availability.text,state:product.availability.state})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_AVAILABILITY_AFTER,props:{productId:product.id}})),(!product.availability||product.availability.state===AVAILABILITY_STATE_OK)&&React.createElement(Availability,{state:!product.stock||product.stock.orderable?AVAILABILITY_STATE_OK:AVAILABILITY_STATE_ALERT,text:i18n.text('product.available.not'),showWhenAvailable:false})),(!display||display.price)&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_BEFORE,props:{productId:product.id,location:'productList'}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE,props:{productId:product.id,location:'productList'}},React.createElement(Grid.Item,{grow:1,className:styles.priceContainer},React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_INSIDE_BEFORE,props:{productId:product.id}}),React.createElement(Price,{className:styles.price,currency:product.price.currency,discounted:!!product.price.discount,unitPrice:product.price.unitPrice,unitPriceMin:product.price.unitPriceMin,unitPriceMax:product.price.unitPriceMax}),product.price.msrp>0&&product.price.unitPrice!==product.price.msrp&&React.createElement(PriceStriked,{value:product.price.msrp,currency:product.price.currency,className:styles.priceStriked}),!product.price.msrp&&product.price.unitPriceStriked>0&&React.createElement(PriceStriked,{value:product.price.unitPriceStriked,currency:product.price.currency,className:styles.priceStriked}),React.createElement(PriceInfo,{product:product,className:styles.priceInfo}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_INSIDE_AFTER,props:{productId:product.id}}))),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_AFTER,props:{productId:product.id,location:'productList'}})),React.createElement(Grid.Item,{shrink:0,className:styles.favouriteContainer})));};Item.defaultProps={display:null};export default Item;