@shopgate/engage 7.30.0-alpha.9 → 7.30.0-beta.2

package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.js

@@ -1,10 +1,14 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles, useResponsiveValue } from '@shopgate/engage/styles';
 import { useParallax } from 'react-scroll-parallax';
 import { parseImageUrl } from "../../helpers";
 
+/**
+ * @callback OnImageRatioChange
+ * @param {string} ratio - The new image ratio, e.g. "1920/1080".
+ */
+
 /**
  * @typedef {Object} CustomResponsiveImageProps
  * @property {boolean} [enableParallax] Whether to enable the parallax effect.
@@ -13,13 +17,15 @@ import { parseImageUrl } from "../../helpers";
  * be loaded.
  * @property {boolean} [isBanner] Whether the image is used as a banner (full width and height of
  * its container).
+ * @property {OnImageRatioChange} [onImageRatioChange] Called when the aspect ratio of the image
+ * changes.
  */
 
 /** @typedef {import('@shopgate/engage/styles').Theme} Theme */
 /** @typedef {Theme['breakpoints']['keys'][0]} Breakpoint */
 /** @typedef {React.ImgHTMLAttributes<HTMLImageElement>} ImgProps */
 /** @typedef {CustomResponsiveImageProps & ImgProps} ResponsiveImageProps */
-
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   preventSave: {
     userSelect: 'none',
@@ -66,6 +72,8 @@ const ResponsiveWidgetImage = ({
   enableParallax = false,
   isBanner = false,
   borderRadius = 0,
+  onLoad,
+  onImageRatioChange,
   ...imgProps
 }) => {
   const {
@@ -87,13 +95,16 @@ const ResponsiveWidgetImage = ({
    * 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.
+   * @param {React.SyntheticEvent<HTMLImageElement, Event>} event The load event.
    */
   const handleImageLoad = event => {
-    const width = event.target.clientWidth;
-    const height = event.target.clientHeight;
+    const width = event.currentTarget.naturalWidth;
+    const height = event.currentTarget.naturalHeight;
     setImageWidth(width);
     setImageHeight(height);
+    if (typeof onLoad === 'function') {
+      onLoad(event);
+    }
   };
   const containerRatio = useMemo(() => {
     const heightReduction = enableParallax ? imageHeight / 100 * (parallaxPercent + 7) : 0;
@@ -104,7 +115,12 @@ const ResponsiveWidgetImage = ({
     xs: src,
     [breakpoint]: src2x
   });
-  return /*#__PURE__*/React.createElement("div", {
+  useEffect(() => {
+    if (typeof onImageRatioChange === 'function') {
+      onImageRatioChange(containerRatio);
+    }
+  }, [containerRatio, onImageRatioChange]);
+  return /*#__PURE__*/_jsx("div", {
     className: cx({
       [classes.bannerContainer]: isBanner,
       [classes.container]: !isBanner
@@ -114,22 +130,24 @@ const ResponsiveWidgetImage = ({
       ...(!isBanner && enableParallax ? {
         aspectRatio: containerRatio
       } : {})
-    }
-  }, /*#__PURE__*/React.createElement("img", _extends({
-    src: imgSrc,
-    ref: parallax.ref,
-    alt: alt,
-    loading: "lazy",
-    className: cx(className, classes.preventSave, classes.image, {
-      [classes.banner]: isBanner
-    }),
-    onLoad: handleImageLoad,
-    style: {
-      ...(enableParallax && isBanner ? {
-        height: `${100 + parallaxPercent * 2}%`
-      } : {})
-    }
-  }, imgProps)));
+    },
+    children: /*#__PURE__*/_jsx("img", {
+      src: imgSrc,
+      ref: parallax.ref,
+      alt: alt,
+      loading: "lazy",
+      className: cx(className, classes.preventSave, classes.image, {
+        [classes.banner]: isBanner
+      }),
+      onLoad: handleImageLoad,
+      style: {
+        ...(enableParallax && isBanner ? {
+          height: `${100 + parallaxPercent * 2}%`
+        } : {})
+      },
+      ...imgProps
+    })
+  });
 };
 ResponsiveWidgetImage.defaultProps = {
   src: null,
@@ -138,7 +156,9 @@ ResponsiveWidgetImage.defaultProps = {
   className: null,
   enableParallax: false,
   isBanner: false,
-  borderRadius: 0
+  borderRadius: 0,
+  onLoad: undefined,
+  onImageRatioChange: undefined
 };
 
 /**
@@ -158,9 +178,10 @@ const Protector = ({
   }
   // Only render the actual ResponsiveWidgetImage if a src is provided to avoid errors from
   // the useParallax hook.
-  return /*#__PURE__*/React.createElement(ResponsiveWidgetImage, _extends({
-    src: src
-  }, rest));
+  return /*#__PURE__*/_jsx(ResponsiveWidgetImage, {
+    src: src,
+    ...rest
+  });
 };
 Protector.defaultProps = {
   src: null

package/page/components/WidgetHeadline/WidgetHeadline.js

@@ -1,8 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
 import { Typography } from '@shopgate/engage/components';
 import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   root: {
     padding: theme.spacing(2)
@@ -58,7 +58,7 @@ const WidgetHeadline = ({
     })
   }), [bold, italic, underline]);
   if (!text) return null;
-  return /*#__PURE__*/React.createElement(Typography, _extends({
+  return /*#__PURE__*/_jsx(Typography, {
     variant: typography,
     align: textAlign
     // && increases the specificity of the styles which guarantees that defaults are overridden
@@ -67,8 +67,10 @@ const WidgetHeadline = ({
       '&&': {
         ...styles
       }
-    }), classes.root, className)
-  }, rest), text);
+    }), classes.root, className),
+    ...rest,
+    children: text
+  });
 };
 WidgetHeadline.defaultProps = {
   className: null

package/page/components/WidgetRichText/WidgetRichText.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { HtmlSanitizer } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   root: {
     width: '100%',
@@ -71,13 +72,14 @@ const WidgetRichText = ({
     classes
   } = useStyles();
   if (!content) return null;
-  return /*#__PURE__*/React.createElement(HtmlSanitizer, {
+  return /*#__PURE__*/_jsx(HtmlSanitizer, {
     processStyles: true,
     settings: {
       html: content
     },
-    className: cx(classes.root, className)
-  }, content);
+    className: cx(classes.root, className),
+    children: content
+  });
 };
 WidgetRichText.defaultProps = {
   content: '',

package/page/components/WidgetVideo/WidgetVideo.js

@@ -0,0 +1,159 @@
+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 PropTypes from 'prop-types';
+import { isHttpsUrl } from "../../helpers";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()((_theme, {
+  borderRadius
+}) => ({
+  root: {
+    width: '100%',
+    display: 'flex',
+    overflow: 'hidden',
+    borderRadius
+  },
+  video: {
+    // Add additional pixels to the width to prevent visible horizontal hairlines on some browsers
+    width: 'calc(100% + 3px)',
+    display: 'flex'
+  },
+  banner: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover'
+  },
+  bannerContainer: {
+    position: 'absolute',
+    height: '100%',
+    top: 0,
+    left: 0,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+}));
+
+/**
+ * The WidgetVideo component is used to display a video in a widget.
+ * @param {Object} props The component props.
+ * @param {boolean} props.isBanner Whether the video is used in a banner.
+ * @param {string} props.url The video URL.
+ * @param {boolean} props.muted Whether the video is muted.
+ * @param {boolean} props.loop Whether the video is looping.
+ * @param {boolean} props.controls Whether the video controls are shown.
+ * @param {boolean} props.autoplay Whether the video should autoplay.
+ * @param {number} props.borderRadius The border radius value.
+ * @param {string} props.link The link URL.
+ * @returns {JSX.Element}
+ */
+const WidgetVideo = ({
+  isBanner,
+  url,
+  muted,
+  loop,
+  controls,
+  autoplay,
+  borderRadius,
+  link
+}) => {
+  const reduceMotion = useReduceMotion();
+  const autoplayValue = reduceMotion ? false : isBanner || autoplay;
+  const {
+    classes,
+    cx
+  } = useStyles({
+    borderRadius
+  });
+  const [hasError, setHasError] = useState(false);
+  const videoRef = React.useRef(null);
+  const prevUrl = usePrevious(url);
+  const isValidUrl = useMemo(() => url ? isHttpsUrl(url) : false, [url]);
+  const showControls = useMemo(() => {
+    if (link || isBanner) {
+      // When a link is set we never show controls to avoid side effects due to two clickable areas.
+      return false;
+    }
+    return !autoplayValue || reduceMotion ? true : controls;
+  }, [autoplayValue, controls, isBanner, link, reduceMotion]);
+
+  // Resume video playback when app returned from background
+  useAppEventOnReturnFromBackground(() => {
+    if (!videoRef.current || reduceMotion || !autoplayValue) {
+      return;
+    }
+    videoRef.current.play();
+  });
+  useEffect(() => {
+    if (!videoRef.current) {
+      return;
+    }
+    if (reduceMotion) {
+      // Pause playback when reduced motion settings changed after video was rendered
+      videoRef.current.pause();
+      return;
+    }
+    if (autoplayValue) {
+      videoRef.current.play();
+    } else {
+      videoRef.current.pause();
+      videoRef.current.currentTime = 0;
+    }
+  }, [autoplayValue, reduceMotion]);
+  useEffect(() => {
+    if (!url || url !== prevUrl) {
+      setHasError(false);
+    }
+  }, [hasError, prevUrl, url]);
+  if (!url || hasError || !isValidUrl) return null;
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(classes.root, {
+      [classes.bannerContainer]: isBanner
+    }),
+    children: /*#__PURE__*/_jsx(ConditionalWrapper, {
+      condition: !!link,
+      wrapper: children => /*#__PURE__*/_jsx(Link, {
+        href: link,
+        children: children
+      }),
+      children: /*#__PURE__*/_jsx("video", {
+        ref: videoRef
+        // Set play position to 0.001s to guarantee that there is always a frame shown
+        ,
+        src: `${url}#t=0.001`,
+        muted: isBanner ? true : muted,
+        controls: showControls,
+        autoPlay: autoplayValue,
+        className: cx(classes.video, {
+          [classes.banner]: isBanner
+        }),
+        preload: "auto",
+        playsInline: true,
+        loop: isBanner ? true : loop,
+        "aria-hidden": true,
+        onError: () => {
+          setHasError(true);
+        },
+        children: /*#__PURE__*/_jsx("track", {
+          kind: "captions",
+          src: "",
+          srcLang: "de",
+          label: "Deutsch"
+        })
+      })
+    })
+  });
+};
+WidgetVideo.defaultProps = {
+  isBanner: false,
+  link: null,
+  url: null,
+  muted: false,
+  loop: false,
+  controls: false,
+  autoplay: false,
+  borderRadius: 0
+};
+export default WidgetVideo;

package/page/components/WidgetVideo/index.js

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

package/page/components/Widgets/Overlay.js

@@ -21,7 +21,7 @@ import { useWidgetsPreview } from "./hooks";
  * @property {OverlayStyle} bottom Style for the bottom margin overlay.
  * @property {OverlayStyle} right Style for the right margin overlay.
  */
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles({
   name: 'WidgetPreviewOverlay'
 })((_, {
@@ -261,16 +261,16 @@ const Overlay = ({
     setIsFlashing(false);
   }, []);
   if (!mainOverlayStyle) return null;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.root
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.mainOverlay,
-    style: mainOverlayStyle,
-    onAnimationEnd: handleAnimationEnd
-  }), marginOverlays && Object.entries(marginOverlays).map(([key, overlayStyle]) => /*#__PURE__*/React.createElement("div", {
-    key: key,
-    className: classes.marginOverlay,
-    style: overlayStyle
-  })));
+  return /*#__PURE__*/_jsxs("div", {
+    className: classes.root,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classes.mainOverlay,
+      style: mainOverlayStyle,
+      onAnimationEnd: handleAnimationEnd
+    }), marginOverlays && Object.entries(marginOverlays).map(([key, overlayStyle]) => /*#__PURE__*/_jsx("div", {
+      className: classes.marginOverlay,
+      style: overlayStyle
+    }, key))]
+  });
 };
 export default Overlay;

package/page/components/Widgets/Tooltip.js

@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(() => ({
   wrapper: {
     display: 'inline-block',
@@ -177,21 +178,22 @@ function Tooltip({
     } : {})
   };
   const arrowClass = positionState === 'top' ? classes.arrowTop : classes.arrowBottom;
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/_jsxs("span", {
     className: classes.wrapper,
     ref: wrapperRef,
     "data-tooltip-id": tooltipId.current,
     onMouseEnter: () => setVisible(true),
-    onMouseLeave: () => setVisible(false)
-  }, children, mounted && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
-    className: cx(classes.tooltipBox, arrowClass, 'tooltip-box'),
-    style: portalStyle,
-    "data-visible": animate ? 'true' : 'false',
-    "data-tooltip-id": tooltipId.current,
-    dangerouslySetInnerHTML: {
-      __html: text
-    }
-  }), document.body));
+    onMouseLeave: () => setVisible(false),
+    children: [children, mounted && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/_jsx("div", {
+      className: cx(classes.tooltipBox, arrowClass, 'tooltip-box'),
+      style: portalStyle,
+      "data-visible": animate ? 'true' : 'false',
+      "data-tooltip-id": tooltipId.current,
+      dangerouslySetInnerHTML: {
+        __html: text
+      }
+    }), document.body)]
+  });
 }
 Tooltip.defaultProps = {
   text: null

package/page/components/Widgets/Widget.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { Suspense, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
@@ -8,6 +7,7 @@ import WidgetProvider from "./WidgetProvider";
 import { dispatchWidgetPreviewEvent } from "./events";
 import { useWidgetsPreview } from "./hooks";
 import Tooltip from "./Tooltip";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()((theme, {
   marginTop,
   marginLeft
@@ -94,7 +94,7 @@ const Widget = ({
   if (!Component) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("section", _extends({
+  return /*#__PURE__*/_jsxs("section", {
     id: `widget-code-${definition.code}`,
     className: cx(classes.root, {
       [classes.preview]: isPreview
@@ -105,29 +105,38 @@ const Widget = ({
       marginLeft: definition?.layout?.marginLeft,
       marginRight: definition?.layout?.marginRight
     },
-    "data-widget-name": definition.widgetConfigDefinitionCode
-  }, isPreview && {
-    ...handlers
-  }), isPreview && definition?.meta && /*#__PURE__*/React.createElement("div", {
-    className: classes.widgetInfo
-  }, definition.meta?.scheduled?.isScheduled && /*#__PURE__*/React.createElement(Tooltip, {
-    text: definition.meta?.scheduled?.tooltip
-  }, /*#__PURE__*/React.createElement(TimeIcon, {
-    className: cx(classes.scheduledIcon, {
-      [classes.scheduledIconExpired]: definition.meta?.scheduled?.isExpired
-    })
-  })), definition.meta?.hidden?.isHidden && /*#__PURE__*/React.createElement(Tooltip, {
-    text: definition.meta?.hidden?.tooltip
-  }, /*#__PURE__*/React.createElement(VisibilityOffIcon, {
-    className: classes.visibilityIcon
-  }))), /*#__PURE__*/React.createElement(WidgetProvider, {
-    definition: definition,
-    isPreview: isPreview
-  }, /*#__PURE__*/React.createElement(Suspense, {
-    fallback: /*#__PURE__*/React.createElement(Loading, null)
-  }, /*#__PURE__*/React.createElement(Component, isCustomLegacyWidget ? {
-    settings: definition.widgetConfig
-  } : {}))));
+    "data-widget-name": definition.widgetConfigDefinitionCode,
+    ...(isPreview && {
+      ...handlers
+    }),
+    children: [isPreview && definition?.meta && /*#__PURE__*/_jsxs("div", {
+      className: classes.widgetInfo,
+      children: [definition.meta?.scheduled?.isScheduled && /*#__PURE__*/_jsx(Tooltip, {
+        text: definition.meta?.scheduled?.tooltip,
+        children: /*#__PURE__*/_jsx(TimeIcon, {
+          className: cx(classes.scheduledIcon, {
+            [classes.scheduledIconExpired]: definition.meta?.scheduled?.isExpired
+          })
+        })
+      }), definition.meta?.hidden?.isHidden && /*#__PURE__*/_jsx(Tooltip, {
+        text: definition.meta?.hidden?.tooltip,
+        children: /*#__PURE__*/_jsx(VisibilityOffIcon, {
+          className: classes.visibilityIcon
+        })
+      })]
+    }), /*#__PURE__*/_jsx(WidgetProvider, {
+      definition: definition,
+      isPreview: isPreview,
+      children: /*#__PURE__*/_jsx(Suspense, {
+        fallback: /*#__PURE__*/_jsx(Loading, {}),
+        children: /*#__PURE__*/_jsx(Component, {
+          ...(isCustomLegacyWidget ? {
+            settings: definition.widgetConfig
+          } : {})
+        })
+      })
+    })]
+  });
 };
 Widget.defaultProps = {
   isCustomLegacyWidget: false

package/page/components/Widgets/WidgetProvider.js

@@ -13,6 +13,7 @@ import { WidgetContext } from "./WidgetContext";
  * @param {React.ReactNode} props.children The child components to render.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const WidgetProvider = ({
   children,
   definition,
@@ -36,8 +37,9 @@ const WidgetProvider = ({
       isPreview
     };
   }, [definition, isPreview]);
-  return /*#__PURE__*/React.createElement(WidgetContext.Provider, {
-    value: value
-  }, children);
+  return /*#__PURE__*/_jsx(WidgetContext.Provider, {
+    value: value,
+    children: children
+  });
 };
 export default WidgetProvider;

package/page/components/Widgets/Widgets.js

@@ -13,7 +13,7 @@ import { usePreviewIframeCommunication } from "./hooks";
 /**
  * @typedef {import('./types').WidgetDefinition} WidgetDefinition
  */
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PLACEHOLDER_COMPONENT = '@shopgate/widgetsInternal/Placeholder';
 const useStyles = makeStyles()({
   preview: {
@@ -60,26 +60,29 @@ const Widgets = ({
   if (!Array.isArray(widgets) || widgets.length === 0) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(ConditionalWrapper, {
+  return /*#__PURE__*/_jsx(ConditionalWrapper, {
     condition: isPreview,
-    wrapper: children => /*#__PURE__*/React.createElement(WidgetsPreviewProvider, null, children, /*#__PURE__*/React.createElement(Overlay, {
-      containerRef: widgetsRef
-    }))
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cx('engage__widgets', {
-      [classes.preview]: isPreview
+    wrapper: children => /*#__PURE__*/_jsxs(WidgetsPreviewProvider, {
+      children: [children, /*#__PURE__*/_jsx(Overlay, {
+        containerRef: widgetsRef
+      })]
     }),
-    ref: widgetsRef
-  }, widgets.map(widget => {
-    const component = widgetComponents[widget.widgetConfigDefinitionCode] || widgetComponents[PLACEHOLDER_COMPONENT];
-    return /*#__PURE__*/React.createElement(Widget, {
-      key: widget.code,
-      definition: widget,
-      isPreview: isPreview,
-      component: component,
-      isCustomLegacyWidget: widget.isCustomLegacyWidget
-    });
-  })));
+    children: /*#__PURE__*/_jsx("div", {
+      className: cx('engage__widgets', {
+        [classes.preview]: isPreview
+      }),
+      ref: widgetsRef,
+      children: widgets.map(widget => {
+        const component = widgetComponents[widget.widgetConfigDefinitionCode] || widgetComponents[PLACEHOLDER_COMPONENT];
+        return /*#__PURE__*/_jsx(Widget, {
+          definition: widget,
+          isPreview: isPreview,
+          component: component,
+          isCustomLegacyWidget: widget.isCustomLegacyWidget
+        }, widget.code);
+      })
+    })
+  });
 };
 Widgets.defaultProps = {
   widgets: null

package/page/components/Widgets/WidgetsPreviewProvider.js

@@ -11,6 +11,7 @@ import { WidgetsPreviewContext } from "./WidgetsPreviewContext";
  * @param {React.ReactNode} props.children The child components to render.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const WidgetsPreviewProvider = ({
   children
 }) => {
@@ -28,8 +29,9 @@ const WidgetsPreviewProvider = ({
     activeWidget,
     setActiveWidget: handleSetActiveWidget
   }), [activeWidget, handleSetActiveWidget]);
-  return /*#__PURE__*/React.createElement(WidgetsPreviewContext.Provider, {
-    value: value
-  }, children);
+  return /*#__PURE__*/_jsx(WidgetsPreviewContext.Provider, {
+    value: value,
+    children: children
+  });
 };
 export default WidgetsPreviewProvider;