@shopgate/engage 7.30.0-alpha.10 → 7.30.0-alpha.11

package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles, useResponsiveValue } from '@shopgate/engage/styles';
@@ -26,7 +25,7 @@ import { parseImageUrl } from "../../helpers";
 /** @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',
@@ -121,7 +120,7 @@ const ResponsiveWidgetImage = ({
       onImageRatioChange(containerRatio);
     }
   }, [containerRatio, onImageRatioChange]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: cx({
       [classes.bannerContainer]: isBanner,
       [classes.container]: !isBanner
@@ -131,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,
@@ -177,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

@@ -5,6 +5,7 @@ import { usePrevious, useAppEventOnReturnFromBackground } from '@shopgate/engage
 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
 }) => ({
@@ -107,39 +108,43 @@ const WidgetVideo = ({
     }
   }, [hasError, prevUrl, url]);
   if (!url || hasError || !isValidUrl) return null;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: cx(classes.root, {
       [classes.bannerContainer]: isBanner
-    })
-  }, /*#__PURE__*/React.createElement(ConditionalWrapper, {
-    condition: !!link,
-    wrapper: children => /*#__PURE__*/React.createElement(Link, {
-      href: link
-    }, children)
-  }, /*#__PURE__*/React.createElement("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);
-    }
-  }, /*#__PURE__*/React.createElement("track", {
-    kind: "captions",
-    src: "",
-    srcLang: "de",
-    label: "Deutsch"
-  }))));
+    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,

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;

package/page/selectors/index.js

@@ -120,7 +120,7 @@ export const makeGetUnifiedCMSPageData = ({
         isFetching: pageV2?.isFetching ?? false,
         expires: pageV2?.expires ?? null,
         title: pageV2?.data?.pageTitle || pageV2?.data?.name || '',
-        widgets: pageV2?.data?.dropzones?.['cmsWidgetList'] ?? [],
+        widgets: pageV2?.data?.dropzones?.cmsWidgetList ?? [],
         cmsVersion: 2,
         hasError: pageV2?.hasError ?? false
       };

package/page/widgets/Button/Button.js

@@ -3,6 +3,7 @@ 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';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   root: {
     display: 'flex',
@@ -42,14 +43,17 @@ const ButtonWidget = () => {
     });
   }, [link, isPreview, push]);
   if (!text) return null;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.root
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "secondary",
-    onClick: handleClick,
-    wrapContent: false
-  }, /*#__PURE__*/React.createElement("span", {
-    className: classes.text
-  }, text)));
+  return /*#__PURE__*/_jsx("div", {
+    className: classes.root,
+    children: /*#__PURE__*/_jsx(Button, {
+      type: "secondary",
+      onClick: handleClick,
+      wrapContent: false,
+      children: /*#__PURE__*/_jsx("span", {
+        className: classes.text,
+        children: text
+      })
+    })
+  });
 };
 export default ButtonWidget;

package/page/widgets/CategoryList/CategoryList.js

@@ -3,6 +3,7 @@ import { CategoryList } from '@shopgate/engage/category/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useCategoryListWidget } from "./hooks";
 import WidgetHeadline from "../../components/WidgetHeadline";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   headline: {
     paddingBottom: theme.spacing(0)
@@ -27,13 +28,15 @@ const CategoryListWidget = () => {
   if (!categories) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, showHeadline && headline && categories.length ? /*#__PURE__*/React.createElement(WidgetHeadline, {
-    headline: headline,
-    className: classes.headline
-  }) : null, /*#__PURE__*/React.createElement(CategoryList, {
-    categories: categories,
-    parentCategory: parentCategory,
-    showLeftSideImages: showImages
-  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [showHeadline && headline && categories.length ? /*#__PURE__*/_jsx(WidgetHeadline, {
+      headline: headline,
+      className: classes.headline
+    }) : null, /*#__PURE__*/_jsx(CategoryList, {
+      categories: categories,
+      parentCategory: parentCategory,
+      showLeftSideImages: showImages
+    })]
+  });
 };
 export default CategoryListWidget;

package/page/widgets/CategoryList/hooks.js

@@ -56,7 +56,7 @@ export const useCategoryListWidget = () => {
       return categories;
     }
     const isAsc = sortCC === 'nameAsc';
-    return [...categories].sort((a, b) => a.name.localeCompare(b.name, undefined, {
+    return [].concat(categories).sort((a, b) => a.name.localeCompare(b.name, undefined, {
       sensitivity: 'base'
     }) * (isAsc ? 1 : -1));
   }, [categories, sortCC]);

package/page/widgets/HTML/HTML.js

@@ -3,6 +3,7 @@ import { HtmlSanitizer } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { themeConfig } from '@shopgate/engage';
 import { useHtmlWidget } from "./hooks";
+import { jsx as _jsx } from "react/jsx-runtime";
 const {
   colors
 } = themeConfig;
@@ -81,12 +82,13 @@ const HtmlWidget = () => {
   const {
     html
   } = useHtmlWidget();
-  return /*#__PURE__*/React.createElement(HtmlSanitizer, {
+  return /*#__PURE__*/_jsx(HtmlSanitizer, {
     settings: {
       html
     },
     processStyles: true,
-    className: classes.root
-  }, html);
+    className: classes.root,
+    children: html
+  });
 };
 export default HtmlWidget;

package/page/widgets/Headline/Headline.js

@@ -6,6 +6,7 @@ import { useWidget } from "../../hooks";
  * The HeadlineWidget is used to display a headline text.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Headline = () => {
   const {
     config
@@ -14,7 +15,7 @@ const Headline = () => {
     headline
   } = config;
   if (!headline) return null;
-  return /*#__PURE__*/React.createElement(WidgetHeadline, {
+  return /*#__PURE__*/_jsx(WidgetHeadline, {
     headline: headline
   });
 };