@shopgate/engage 7.29.1-beta.1 → 7.29.1-beta.2

package/package.json

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

package/page/helpers/index.d.ts

@@ -68,3 +68,17 @@ type BorderRadiusParams = {
 export declare function resolveBorderRadiusFromWidgetConfig(
   params: BorderRadiusParams
 )
+
+/**
+ * Validator factory for regular expressions.
+ * @param regex The regular expression to match.
+ * @returns A function that validates if a value matches the regex.
+ */
+export declare function matchesRegex(regex: RegExp): (val: string) => boolean;
+
+/**
+ * Validates if a given string is a valid HTTPS URL.
+ * @param val The string to validate.
+ * @returns True if the string is a valid HTTPS URL, false otherwise.
+ */
+export declare const isHttpsUrl: (val: string) => boolean;

package/page/helpers/index.js

@@ -21,4 +21,12 @@ var _ref2=mapping.find(function(_ref4){var _ref5=_slicedToArray(_ref4,2),value=_
  * @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;};
+ */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;};/**
+ * Validator factory for regular expressions
+ * @param {RegExp} regex the regex
+ * @return {Function}
+ */export var matchesRegex=function matchesRegex(regex){return function(val){return!val||regex.test(val);};};/**
+ * Returns a function that validates if input is a valid url with the https protocol
+ * @param {string} val the string to be validated
+ * @return {boolean}
+ */export var isHttpsUrl=matchesRegex(new RegExp('^\\s*https://[^\\s/$.?#].[^\\s]*\\s*$','i'));

package/page/widgets/Video/Video.js

@@ -0,0 +1,4 @@
+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}from'@shopgate/engage/core';import{useVideoWidget}from"./hooks";import{isHttpsUrl}from"../../helpers";var useStyles=makeStyles()(function(theme,_ref){var borderRadius=_ref.borderRadius;return{video:{width:'100%',borderRadius:borderRadius}};});/**
+ * 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 prevAutoPlay=usePrevious(autoplay);var prevUrl=usePrevious(url);var isValidUrl=useMemo(function(){return url?isHttpsUrl(url):false;},[url]);useEffect(function(){if(videoRef.current&&prevAutoPlay&&!autoplay){videoRef.current.pause();videoRef.current.currentTime=0;}if(videoRef.current&&!prevAutoPlay&&autoplay){videoRef.current.play();}if(!url||url!==prevUrl||!hasError){setHasError(false);}},[autoplay,hasError,prevAutoPlay,prevUrl,url]);if(!url||hasError||!isValidUrl)return null;return React.createElement("video",{ref:videoRef,src:url,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(){return setHasError(true);}},React.createElement("track",{kind:"captions",src:"",srcLang:"de",label:"Deutsch"}));};export default Video;

package/page/widgets/Video/hooks.js

@@ -0,0 +1,14 @@
+import{useWidget}from'@shopgate/engage/page/hooks';import{resolveBorderRadiusFromWidgetConfig}from"../../helpers";/**
+ * @typedef {Object} VideoWidgetConfig
+ * @property {string} url The video URL.
+ * @property {boolean} [muted] Whether the video should be muted.
+ * @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.
+ */ /**
+ * @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};};

package/page/widgets/Video/index.js

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

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 ButtonWidget}from"./Button";
+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 VideoWidget}from"./Video";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

@@ -11,6 +11,9 @@
   "@shopgate/widgets/htmlWidget": {
     "path": "@shopgate/engage/page/widgets/HTML"
   },
+  "@shopgate/widgets/videoWidget": {
+    "path": "@shopgate/engage/page/widgets/Video"
+  },
   "@shopgate/widgets/headlineWidget": {
     "path": "@shopgate/engage/page/widgets/Headline"
   },