@shopgate/engage 7.29.3 → 7.29.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.29.3",
+  "version": "7.29.4",
   "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.3",
-    "@shopgate/pwa-common-commerce": "7.29.3",
-    "@shopgate/pwa-core": "7.29.3",
-    "@shopgate/pwa-ui-ios": "7.29.3",
-    "@shopgate/pwa-ui-material": "7.29.3",
-    "@shopgate/pwa-ui-shared": "7.29.3",
+    "@shopgate/pwa-common": "7.29.4",
+    "@shopgate/pwa-common-commerce": "7.29.4",
+    "@shopgate/pwa-core": "7.29.4",
+    "@shopgate/pwa-ui-ios": "7.29.4",
+    "@shopgate/pwa-ui-material": "7.29.4",
+    "@shopgate/pwa-ui-shared": "7.29.4",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.3.1",
     "@virtuous/conductor": "~2.5.0",

package/page/widgets/Video/Video.js

@@ -1,7 +1,9 @@
-function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useEffect,useMemo,useState}from'react';import{makeStyles}from'@shopgate/engage/styles';import{useReduceMotion}from'@shopgate/engage/a11y/hooks';import{usePrevious,useAppEventOnReturnFromBackground}from'@shopgate/engage/core/hooks';import{useVideoWidget}from"./hooks";import{isHttpsUrl}from"../../helpers";var useStyles=makeStyles()(function(_theme,_ref){var borderRadius=_ref.borderRadius;return{root:{width:'100%',display:'flex',overflow:'hidden',borderRadius:borderRadius},video:{// Add additional pixels to the width to prevent visible horizontal hairlines on some browsers
-width:'calc(100% + 4px)'}};});/**
+function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useEffect,useMemo,useState}from'react';import{makeStyles}from'@shopgate/engage/styles';import{useReduceMotion}from'@shopgate/engage/a11y/hooks';import{usePrevious,useAppEventOnReturnFromBackground}from'@shopgate/engage/core/hooks';import{ConditionalWrapper,Link}from'@shopgate/engage/components';import{useVideoWidget}from"./hooks";import{isHttpsUrl}from"../../helpers";var useStyles=makeStyles()(function(_theme,_ref){var borderRadius=_ref.borderRadius;return{root:{width:'100%',display:'flex',overflow:'hidden',borderRadius:borderRadius},video:{// Add additional pixels to the width to prevent visible horizontal hairlines on some browsers
+width:'calc(100% + 3px)',display:'flex'}};});/**
  * The VideoWidget is used to display a video.
  * @returns {JSX.Element}
- */var Video=function Video(){var _useVideoWidget=useVideoWidget(),url=_useVideoWidget.url,muted=_useVideoWidget.muted,loop=_useVideoWidget.loop,controls=_useVideoWidget.controls,autoplay=_useVideoWidget.autoplay,borderRadius=_useVideoWidget.borderRadius;var _useStyles=useStyles({borderRadius:borderRadius}),classes=_useStyles.classes;var reduceMotion=useReduceMotion();var _useState=useState(false),_useState2=_slicedToArray(_useState,2),hasError=_useState2[0],setHasError=_useState2[1];var videoRef=React.useRef(null);var prevUrl=usePrevious(url);var isValidUrl=useMemo(function(){return url?isHttpsUrl(url):false;},[url]);// Resume video playback when app returned from background
-useAppEventOnReturnFromBackground(function(){if(!videoRef.current||reduceMotion||!autoplay){return;}videoRef.current.play();});useEffect(function(){if(!videoRef.current||reduceMotion){return;}if(autoplay){videoRef.current.play();}else{videoRef.current.pause();videoRef.current.currentTime=0;}},[autoplay,reduceMotion]);useEffect(function(){if(!url||url!==prevUrl){setHasError(false);}},[hasError,prevUrl,url]);if(!url||hasError||!isValidUrl)return null;return React.createElement("div",{className:classes.root},React.createElement("video",{ref:videoRef// Set play position to 0.001s to guarantee that there is always a frame shown
-,src:"".concat(url,"#t=0.001"),muted:muted,controls:!autoplay||reduceMotion?true:controls,autoPlay:reduceMotion?false:autoplay,className:classes.video,preload:"auto",playsInline:true,loop:loop,"aria-hidden":true,onError:function onError(){setHasError(true);}},React.createElement("track",{kind:"captions",src:"",srcLang:"de",label:"Deutsch"})));};export default Video;
+ */var Video=function Video(){var _useVideoWidget=useVideoWidget(),url=_useVideoWidget.url,muted=_useVideoWidget.muted,loop=_useVideoWidget.loop,controls=_useVideoWidget.controls,autoplay=_useVideoWidget.autoplay,borderRadius=_useVideoWidget.borderRadius,link=_useVideoWidget.link;var _useStyles=useStyles({borderRadius:borderRadius}),classes=_useStyles.classes;var reduceMotion=useReduceMotion();var _useState=useState(false),_useState2=_slicedToArray(_useState,2),hasError=_useState2[0],setHasError=_useState2[1];var videoRef=React.useRef(null);var prevUrl=usePrevious(url);var isValidUrl=useMemo(function(){return url?isHttpsUrl(url):false;},[url]);var showControls=useMemo(function(){if(link){// When a link is set we never show controls to avoid side effects due to two clickable areas.
+return false;}return!autoplay||reduceMotion?true:controls;},[autoplay,controls,link,reduceMotion]);// Resume video playback when app returned from background
+useAppEventOnReturnFromBackground(function(){if(!videoRef.current||reduceMotion||!autoplay){return;}videoRef.current.play();});useEffect(function(){if(!videoRef.current){return;}if(reduceMotion){// Pause playback when reduced motion settings changed after video was rendered
+videoRef.current.pause();return;}if(autoplay){videoRef.current.play();}else{videoRef.current.pause();videoRef.current.currentTime=0;}},[autoplay,reduceMotion]);useEffect(function(){if(!url||url!==prevUrl){setHasError(false);}},[hasError,prevUrl,url]);if(!url||hasError||!isValidUrl)return null;return React.createElement("div",{className:classes.root},React.createElement(ConditionalWrapper,{condition:!!link,wrapper:function wrapper(children){return React.createElement(Link,{href:link},children);}},React.createElement("video",{ref:videoRef// Set play position to 0.001s to guarantee that there is always a frame shown
+,src:"".concat(url,"#t=0.001"),muted:muted,controls:showControls,autoPlay:reduceMotion?false:autoplay,className:classes.video,preload:"auto",playsInline:true,loop:loop,"aria-hidden":true,onError:function onError(){setHasError(true);}},React.createElement("track",{kind:"captions",src:"",srcLang:"de",label:"Deutsch"}))));};export default Video;

package/page/widgets/Video/hooks.js

@@ -5,10 +5,12 @@ import{useWidget}from'@shopgate/engage/page/hooks';import{resolveBorderRadiusFro
  * @property {boolean} [loop] Whether the video should loop.
  * @property {boolean} [controls] Whether the video should display controls.
  * @property {boolean} [autoplay] Whether the video should autoplay.
+ * @property {string} [borderRadius] The border radius preset.
+ * @property {string} [link] The link URL.
  */ /**
  * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
  *   .useWidget<VideoWidgetConfig> >} UseWidgetReturnType
  */ // eslint-disable-next-line valid-jsdoc
 /**
  * Hook to access the Video widget configuration and data.
- */export var useVideoWidget=function useVideoWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var _ref=config||{},url=_ref.url,muted=_ref.muted,loop=_ref.loop,controls=_ref.controls,autoplay=_ref.autoplay,borderRadius=_ref.borderRadius,borderRadiusCustom=_ref.borderRadiusCustom;var borderRadiusResolved=resolveBorderRadiusFromWidgetConfig({borderRadius:borderRadius,borderRadiusCustom:borderRadiusCustom});return{url:url,muted:muted,loop:loop,controls:controls,autoplay:autoplay,borderRadius:borderRadiusResolved};};
+ */export var useVideoWidget=function useVideoWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var _ref=config||{},url=_ref.url,muted=_ref.muted,loop=_ref.loop,controls=_ref.controls,autoplay=_ref.autoplay,borderRadius=_ref.borderRadius,borderRadiusCustom=_ref.borderRadiusCustom,link=_ref.link;var borderRadiusResolved=resolveBorderRadiusFromWidgetConfig({borderRadius:borderRadius,borderRadiusCustom:borderRadiusCustom});return{url:url,muted:muted,loop:loop,controls:controls,autoplay:autoplay,borderRadius:borderRadiusResolved,link:link};};

package/styles/theme/createTheme/createBreakpoints.js

@@ -16,7 +16,7 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
  * console.log(sorted); // { xs: 0, sm: 600, md: 960 }
  */var sortBreakpointsValues=function sortBreakpointsValues(values){var breakpointsAsArray=Object.keys(values).map(function(key){return{key:key,val:values[key]};})||[];breakpointsAsArray.sort(function(breakpoint1,breakpoint2){return breakpoint1.val-breakpoint2.val;});return breakpointsAsArray.reduce(function(acc,obj){return _extends({},acc,_defineProperty({},obj.key,obj.val));},{});};var unit='px';var step=5;/**
  * Creates a set of media query functions based on the provided breakpoints.
- */var createBreakpoints=function createBreakpoints(){/** @type {import('./createBreakpoints').Breakpoints['values]} */var values={// Extra small – all mobile phones
+ */var createBreakpoints=function createBreakpoints(){/** @type {import('./createBreakpoints').Breakpoints['values']} */var values={// Extra small – all mobile phones
 xs:0,// Small – large phones in landscape
 sm:480,// Medium – tablets
 md:768,// Large – small laptops