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

package/page/widgets/Video/Video.js

@@ -1,21 +1,12 @@
-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 React from 'react';
 import { useVideoWidget } from "./hooks";
-import { isHttpsUrl } from "../../helpers";
-const useStyles = makeStyles()((_theme, {
-  borderRadius
-}) => ({
-  video: {
-    width: '100%',
-    borderRadius
-  }
-}));
+import WidgetVideo from "../../components/WidgetVideo";
+
 /**
  * The VideoWidget is used to display a video.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Video = () => {
   const {
     url,
@@ -23,49 +14,17 @@ const Video = () => {
     loop,
     controls,
     autoplay,
-    borderRadius
+    borderRadius,
+    link
   } = useVideoWidget();
-  const {
-    classes
-  } = useStyles({
-    borderRadius
-  });
-  const reduceMotion = useReduceMotion();
-  const [hasError, setHasError] = useState(false);
-  const videoRef = React.useRef(null);
-  const prevAutoPlay = usePrevious(autoplay);
-  const prevUrl = usePrevious(url);
-  const isValidUrl = useMemo(() => url ? isHttpsUrl(url) : false, [url]);
-  useEffect(() => {
-    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 /*#__PURE__*/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,
+  return /*#__PURE__*/_jsx(WidgetVideo, {
+    url: url,
     loop: loop,
-    "aria-hidden": true,
-    onError: () => setHasError(true)
-  }, /*#__PURE__*/React.createElement("track", {
-    kind: "captions",
-    src: "",
-    srcLang: "de",
-    label: "Deutsch"
-  }));
+    muted: muted,
+    controls: controls,
+    autoplay: autoplay,
+    borderRadius: borderRadius,
+    link: link
+  });
 };
 export default Video;

package/page/widgets/Video/hooks.js

@@ -8,6 +8,8 @@ import { resolveBorderRadiusFromWidgetConfig } from "../../helpers";
  * @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 {number} [borderRadius] The border radius preset.
+ * @property {string} [link] The link URL.
  */
 
 /**
@@ -31,7 +33,8 @@ export const useVideoWidget = () => {
     controls,
     autoplay,
     borderRadius,
-    borderRadiusCustom
+    borderRadiusCustom,
+    link
   } = config || {};
   const borderRadiusResolved = resolveBorderRadiusFromWidgetConfig({
     borderRadius,
@@ -43,6 +46,7 @@ export const useVideoWidget = () => {
     loop,
     controls,
     autoplay,
-    borderRadius: borderRadiusResolved
+    borderRadius: borderRadiusResolved,
+    link
   };
 };

package/page/widgets/index.js

@@ -10,4 +10,5 @@ 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 ButtonWidget } from "./Button";
+export { default as NestedCategoryFilterWidget } from "./NestedCategoryFilter";

package/page/widgets/widgets.json

@@ -35,6 +35,9 @@
   "@shopgate/widgets/buttonWidget": {
     "path": "@shopgate/engage/page/widgets/Button"
   },
+  "@shopgate/widgets/nestedCategoryFilterWidget": {
+    "path": "@shopgate/engage/page/widgets/NestedCategoryFilter"
+  },
   "@shopgate/widgetsInternal/Placeholder": {
     "path": "@shopgate/engage/page/widgets/Placeholder"
   }

package/product/components/Availability/Availability.js

@@ -13,6 +13,7 @@ import { placeholder, availability as availabilityStyle } from "./Availability.s
  * @param {Object} props The component props.
  * @return {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 function Availability({
   availability,
   fulfillmentMethods,
@@ -24,20 +25,22 @@ function Availability({
     return null;
   }
   const classes = classNames(placeholder, className ? className.toString() : null);
-  return /*#__PURE__*/React.createElement(SurroundPortals, {
+  return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PRODUCT_AVAILABILITY,
     portalProps: {
       availability
-    }
-  }, /*#__PURE__*/React.createElement(PlaceholderLabel, {
-    className: classes,
-    ready: availability !== null
-  }, availability && /*#__PURE__*/React.createElement(AvailableText, {
-    className: availabilityStyle,
-    showWhenAvailable: true,
-    text: availability.text || '',
-    state: availability.state
-  })));
+    },
+    children: /*#__PURE__*/_jsx(PlaceholderLabel, {
+      className: classes,
+      ready: availability !== null,
+      children: availability && /*#__PURE__*/_jsx(AvailableText, {
+        className: availabilityStyle,
+        showWhenAvailable: true,
+        text: availability.text || '',
+        state: availability.state
+      })
+    })
+  });
 }
 Availability.defaultProps = {
   availability: null,

package/product/components/Characteristics/Characteristic/components/Sheet/index.js

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { SheetDrawer, SheetList, Menu, ResponsiveContainer } from '@shopgate/engage/components';
@@ -11,62 +11,67 @@ import Item from "../SheetItem";
 /**
  * The CharacteristicSheet component.
  */
-class CharacteristicSheet extends PureComponent {
-  constructor(...args) {
-    super(...args);
-    this.firstSelectableItemRef = /*#__PURE__*/React.createRef();
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+let CharacteristicSheet = /*#__PURE__*/function (_PureComponent) {
+  function CharacteristicSheet(...args) {
+    var _this;
+    _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;
+    _this.firstSelectableItemRef = /*#__PURE__*/React.createRef();
     /**
      * Focuses the first selectable item and hides the view for screen readers.
      */
-    this.onDidOpen = () => {
-      if (this.firstSelectableItemRef.current) {
-        this.firstSelectableItemRef.current.focus();
+    _this.onDidOpen = () => {
+      if (_this.firstSelectableItemRef.current) {
+        _this.firstSelectableItemRef.current.focus();
       }
-      this.props.setViewAriaHidden(true);
+      _this.props.setViewAriaHidden(true);
     };
     /**
      * Shows the view for screen readers.
      * @param {Object} e The event payload.
      */
-    this.onClose = e => {
-      this.props.onClose(e);
-      this.props.setViewAriaHidden(false);
+    _this.onClose = e => {
+      _this.props.onClose(e);
+      _this.props.setViewAriaHidden(false);
     };
     /**
      * @param {Object} event The event object.
      * @param {string} itemId The id that was selected
      */
-    this.handleItemClick = (event, itemId) => {
+    _this.handleItemClick = (event, itemId) => {
       event.stopPropagation();
-      this.props.onSelect(itemId);
+      _this.props.onSelect(itemId);
     };
     /**
      * Renders the availability text inside the sheet item.
      * @param {string} value The value that the sheet item represents.
      * @return {React.Component|null}
      */
-    this.renderAvailability = value => {
+    _this.renderAvailability = value => {
       const {
         fulfillmentMethods,
         isFetching
-      } = this.props;
+      } = _this.props;
       if (fulfillmentMethods || isFetching) {
         return null;
       }
       const selection = {
-        ...this.props.selection,
-        [this.props.charId]: value
+        ..._this.props.selection,
+        [_this.props.charId]: value
       };
-      return /*#__PURE__*/React.createElement(VariantAvailability, {
+      return /*#__PURE__*/_jsx(VariantAvailability, {
         characteristics: selection,
-        productId: this.props.productId
+        productId: _this.props.productId
       });
     };
+    return _this;
   }
+  _inheritsLoose(CharacteristicSheet, _PureComponent);
+  var _proto = CharacteristicSheet.prototype;
   /**
    * @return {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       items,
       label,
@@ -81,54 +86,62 @@ class CharacteristicSheet extends PureComponent {
     } else {
       selectedIndex = items.findIndex(item => item.selectable);
     }
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ResponsiveContainer, {
-      appAlways: true,
-      breakpoint: "xs"
-    }, /*#__PURE__*/React.createElement(SheetDrawer, {
-      title: label,
-      isOpen: open,
-      onClose: this.onClose,
-      onDidOpen: this.onDidOpen,
-      onDidClose: onDidClose
-    }, /*#__PURE__*/React.createElement(SheetList, {
-      className: "theme__product__characteristic__sheet"
-    }, items.map((item, index) => /*#__PURE__*/React.createElement(Item, {
-      item: item,
-      key: item.id,
-      onClick: this.handleItemClick,
-      rightComponent: () => this.renderAvailability(item.id),
-      selected: item.id === selectedValue,
-      ref: index === selectedIndex ? this.firstSelectableItemRef : null,
-      characteristics: {
-        ...this.props.selection,
-        [this.props.charId]: item.id
-      }
-    }))))), /*#__PURE__*/React.createElement(ResponsiveContainer, {
-      webOnly: true,
-      breakpoint: ">xs"
-    }, /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, ({
-      ...contextProps
-    }) => /*#__PURE__*/React.createElement(Menu, {
-      isOpen: open,
-      onClose: this.onClose,
-      contextRef: contextRef
-    }, /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-      value: contextProps
-    }, items.map((item, index) => /*#__PURE__*/React.createElement(Item, {
-      key: item.id,
-      item: item,
-      onClick: this.handleItemClick,
-      rightComponent: () => this.renderAvailability(item.id),
-      selected: item.id === selectedValue,
-      ref: index === selectedIndex ? this.firstSelectableItemRef : null,
-      characteristics: {
-        ...this.props.selection,
-        [this.props.charId]: item.id
-      }
-    })))))));
-  }
-}
-
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(ResponsiveContainer, {
+        appAlways: true,
+        breakpoint: "xs",
+        children: /*#__PURE__*/_jsx(SheetDrawer, {
+          title: label,
+          isOpen: open,
+          onClose: this.onClose,
+          onDidOpen: this.onDidOpen,
+          onDidClose: onDidClose,
+          children: /*#__PURE__*/_jsx(SheetList, {
+            className: "theme__product__characteristic__sheet",
+            children: items.map((item, index) => /*#__PURE__*/_jsx(Item, {
+              item: item,
+              onClick: this.handleItemClick,
+              rightComponent: () => this.renderAvailability(item.id),
+              selected: item.id === selectedValue,
+              ref: index === selectedIndex ? this.firstSelectableItemRef : null,
+              characteristics: {
+                ...this.props.selection,
+                [this.props.charId]: item.id
+              }
+            }, item.id))
+          })
+        })
+      }), /*#__PURE__*/_jsx(ResponsiveContainer, {
+        webOnly: true,
+        breakpoint: ">xs",
+        children: /*#__PURE__*/_jsx(ThemeContext.Consumer, {
+          children: ({
+            ...contextProps
+          }) => /*#__PURE__*/_jsx(Menu, {
+            isOpen: open,
+            onClose: this.onClose,
+            contextRef: contextRef,
+            children: /*#__PURE__*/_jsx(ThemeContext.Provider, {
+              value: contextProps,
+              children: items.map((item, index) => /*#__PURE__*/_jsx(Item, {
+                item: item,
+                onClick: this.handleItemClick,
+                rightComponent: () => this.renderAvailability(item.id),
+                selected: item.id === selectedValue,
+                ref: index === selectedIndex ? this.firstSelectableItemRef : null,
+                characteristics: {
+                  ...this.props.selection,
+                  [this.props.charId]: item.id
+                }
+              }, item.id))
+            })
+          })
+        })
+      })]
+    });
+  };
+  return CharacteristicSheet;
+}(PureComponent);
 /**
  * @param {Object} props The original component props.
  * @returns {JSX}
@@ -144,19 +157,26 @@ CharacteristicSheet.defaultProps = {
   selection: null,
   isFetching: false
 };
-const SheetComponent = props => /*#__PURE__*/React.createElement(ViewContext.Consumer, null, ({
-  setAriaHidden
-}) => /*#__PURE__*/React.createElement(ProductContext.Consumer, null, ({
-  productId,
-  fulfillmentMethods,
-  isFetching
-}) => /*#__PURE__*/React.createElement(VariantContext.Consumer, null, ({
-  characteristics
-}) => /*#__PURE__*/React.createElement(CharacteristicSheet, _extends({
-  productId: productId,
-  selection: characteristics,
-  setViewAriaHidden: setAriaHidden,
-  fulfillmentMethods: fulfillmentMethods,
-  isFetching: isFetching
-}, props)))));
+const SheetComponent = props => /*#__PURE__*/_jsx(ViewContext.Consumer, {
+  children: ({
+    setAriaHidden
+  }) => /*#__PURE__*/_jsx(ProductContext.Consumer, {
+    children: ({
+      productId,
+      fulfillmentMethods,
+      isFetching
+    }) => /*#__PURE__*/_jsx(VariantContext.Consumer, {
+      children: ({
+        characteristics
+      }) => /*#__PURE__*/_jsx(CharacteristicSheet, {
+        productId: productId,
+        selection: characteristics,
+        setViewAriaHidden: setAriaHidden,
+        fulfillmentMethods: fulfillmentMethods,
+        isFetching: isFetching,
+        ...props
+      })
+    })
+  })
+});
 export default SheetComponent;

package/product/components/Characteristics/Characteristic/components/SheetItem/index.js

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -9,14 +9,16 @@ import styles from "./style";
 /**
  * The SheetItem component.
  */
-class SheetItem extends PureComponent {
-  constructor(...args) {
-    super(...args);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let SheetItem = /*#__PURE__*/function (_PureComponent) {
+  function SheetItem(...args) {
+    var _this;
+    _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;
     /**
      * @param {boolean} selectable Whether or not the item can be selected.
      * @returns {string}
      */
-    this.getStyle = selectable => {
+    _this.getStyle = selectable => {
       if (!selectable) {
         return styles.buttonDisabled;
       }
@@ -25,14 +27,14 @@ class SheetItem extends PureComponent {
     /**
      * @returns {Object}
      */
-    this.buildProps = () => {
+    _this.buildProps = () => {
       const {
         item,
         onClick,
         forwardedRef
-      } = this.props;
+      } = _this.props;
       return {
-        className: `${this.getStyle(item.selectable).toString()} theme__product__characteristic__option`,
+        className: `${_this.getStyle(item.selectable).toString()} theme__product__characteristic__option`,
         key: item.id,
         ref: forwardedRef,
         value: item.id,
@@ -42,37 +44,49 @@ class SheetItem extends PureComponent {
         })
       };
     };
+    return _this;
   }
+  _inheritsLoose(SheetItem, _PureComponent);
+  var _proto = SheetItem.prototype;
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       item,
       rightComponent: Right,
       selected,
       characteristics
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsxs("div", {
       className: classNames(styles.root, {
         [styles.rootSelected]: selected
-      })
-    }, /*#__PURE__*/React.createElement("button", _extends({}, this.buildProps(), {
-      "data-test-id": item.label,
-      "aria-selected": selected,
-      role: "option",
-      type: "button"
-    }), /*#__PURE__*/React.createElement("div", {
-      className: styles.mainRow
-    }, /*#__PURE__*/React.createElement("div", null, item.label), /*#__PURE__*/React.createElement("div", {
-      className: styles.mainRowRight
-    }, item.selectable && /*#__PURE__*/React.createElement(Right, null)))), /*#__PURE__*/React.createElement("div", {
-      className: styles.bottomRow
-    }, item.selectable && /*#__PURE__*/React.createElement(CharacteristicsButton, {
-      characteristics: characteristics
-    })));
-  }
-}
+      }),
+      children: [/*#__PURE__*/_jsx("button", {
+        ...this.buildProps(),
+        "data-test-id": item.label,
+        "aria-selected": selected,
+        role: "option",
+        type: "button",
+        children: /*#__PURE__*/_jsxs("div", {
+          className: styles.mainRow,
+          children: [/*#__PURE__*/_jsx("div", {
+            children: item.label
+          }), /*#__PURE__*/_jsx("div", {
+            className: styles.mainRowRight,
+            children: item.selectable && /*#__PURE__*/_jsx(Right, {})
+          })]
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.bottomRow,
+        children: item.selectable && /*#__PURE__*/_jsx(CharacteristicsButton, {
+          characteristics: characteristics
+        })
+      })]
+    });
+  };
+  return SheetItem;
+}(PureComponent);
 SheetItem.defaultProps = {
   forwardedRef: null,
   onClick() {},