@shopgate/engage 7.29.0-alpha.15 → 7.29.0-alpha.16

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.29.0-alpha.15",
+  "version": "7.29.0-alpha.16",
   "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.15",
-    "@shopgate/pwa-common-commerce": "7.29.0-alpha.15",
-    "@shopgate/pwa-core": "7.29.0-alpha.15",
-    "@shopgate/pwa-ui-ios": "7.29.0-alpha.15",
-    "@shopgate/pwa-ui-material": "7.29.0-alpha.15",
-    "@shopgate/pwa-ui-shared": "7.29.0-alpha.15",
+    "@shopgate/pwa-common": "7.29.0-alpha.16",
+    "@shopgate/pwa-common-commerce": "7.29.0-alpha.16",
+    "@shopgate/pwa-core": "7.29.0-alpha.16",
+    "@shopgate/pwa-ui-ios": "7.29.0-alpha.16",
+    "@shopgate/pwa-ui-material": "7.29.0-alpha.16",
+    "@shopgate/pwa-ui-shared": "7.29.0-alpha.16",
     "@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/ResponsiveWidgetImage/ResponsiveWidgetImage.js

@@ -1,5 +1,28 @@
-var _excluded=["src","alt","breakpoint","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 _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 _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{makeStyles,useResponsiveValue}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 useStyles=makeStyles()({preventSave:{userSelect:'none',pointerEvents:'none'}});/**
+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 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,className=_ref.className,imgProps=_objectWithoutProperties(_ref,_excluded);var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var src2x=useMemo(function(){return parseImageUrl(src,true);},[src]);var imgSrc=useResponsiveValue(_defineProperty({xs:src},breakpoint,src2x));if(!src){return null;}return React.createElement("img",_extends({src:imgSrc,alt:alt,loading:"lazy",className:cx(classes.preventSave,className)},imgProps));};ResponsiveWidgetImage.defaultProps={src:null,alt:null,breakpoint:'md',className:null};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/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,_ref){var borderRadius=_ref.borderRadius;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',borderRadius:"".concat(borderRadius,"px")}};});/**
+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,borderRadius=_useHeroBannerWidget.borderRadius;var _useStyles=useStyles({borderRadius:borderRadius}),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

@@ -7,6 +7,7 @@ var _excluded=["borderRadius","borderRadiusCustom"];function _extends(){_extends
  * @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

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(theme,_ref){var borderRadius=_ref.borderRadius;return{link:{},image:{width:'100%',borderRadius:"".concat(borderRadius,"px")}};});/**
+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 _useImageWidget=useImageWidget(),link=_useImageWidget.link,altText=_useImageWidget.altText,url=_useImageWidget.url,borderRadius=_useImageWidget.borderRadius;var _useStyles=useStyles({borderRadius:borderRadius}),cx=_useStyles.cx,classes=_useStyles.classes;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

@@ -11,6 +11,7 @@ import{useWidget}from'@shopgate/engage/page/hooks';import{useResponsiveValue}fro
  * @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
@@ -18,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,borderRadius=_ref.borderRadius,borderRadiusCustom=_ref.borderRadiusCustom;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};};
+ */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,borderRadius=_ref.borderRadius;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',borderRadius:"".concat(borderRadius,"px")},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%'}};});/**
+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,borderRadius=_useImageRowWidget.borderRadius;var _useStyles=useStyles({imageSpacing:imageSpacing,borderRadius:borderRadius}),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

@@ -7,6 +7,7 @@ import{useWidget}from'@shopgate/engage/page/hooks';import{useMemo}from'react';im
  * @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
@@ -14,4 +15,4 @@ import{useWidget}from'@shopgate/engage/page/hooks';import{useMemo}from'react';im
 /**
  * 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,_ref$imageSpacing=_ref.imageSpacing,imageSpacing=_ref$imageSpacing===void 0?0:_ref$imageSpacing,borderRadius=_ref.borderRadius,borderRadiusCustom=_ref.borderRadiusCustom;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};};
+ */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()(function(theme,_ref){var borderRadius=_ref.borderRadius;return{image:{width:'100%',borderRadius:"".concat(borderRadius,"px")}};});/**
+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 _useImageSliderWidget=useImageSliderWidget(),slides=_useImageSliderWidget.slides,swiperProps=_useImageSliderWidget.swiperProps,borderRadius=_useImageSliderWidget.borderRadius;var _useStyles=useStyles({borderRadius:borderRadius}),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||''})));}));};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;