@shopgate/engage 7.30.0-alpha.8 → 7.30.0-beta.1

package/components/SideNavigation/SideNavigationItem.js

@@ -20,6 +20,7 @@ import { useSideNavigation } from "./SideNavigation.hooks";
  * @param {string} props.label - The label text for the item.
  * @returns {JSX.Element} The rendered component.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SideNavigationItem = ({
   children,
   level,
@@ -35,25 +36,29 @@ const SideNavigationItem = ({
     currentPathname
   } = useSideNavigation();
   const isActive = useMemo(() => !forceInactive && (currentPathname === href || forceActive), [currentPathname, forceActive, forceInactive, href]);
-  return /*#__PURE__*/React.createElement("li", {
-    className: classNames(list, className)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(item, {
-      [itemActive]: isActive
-    })
-  }, href ? /*#__PURE__*/React.createElement(Link, {
-    tag: "a",
-    href: href,
-    className: classNames(link, getIndentation(level), {
-      [linkActive]: isActive
-    })
-  }, i18n.text(label)) : /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: classNames(link, getIndentation(level), {
-      [linkActive]: isActive
-    }),
-    onClick: onClick
-  }, i18n.text(label)), buttonRight), children);
+  return /*#__PURE__*/_jsxs("li", {
+    className: classNames(list, className),
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: classNames(item, {
+        [itemActive]: isActive
+      }),
+      children: [href ? /*#__PURE__*/_jsx(Link, {
+        tag: "a",
+        href: href,
+        className: classNames(link, getIndentation(level), {
+          [linkActive]: isActive
+        }),
+        children: i18n.text(label)
+      }) : /*#__PURE__*/_jsx("button", {
+        type: "button",
+        className: classNames(link, getIndentation(level), {
+          [linkActive]: isActive
+        }),
+        onClick: onClick,
+        children: i18n.text(label)
+      }), buttonRight]
+    }), children]
+  });
 };
 SideNavigationItem.defaultProps = {
   buttonRight: null,

package/components/SideNavigation/SideNavigationLinks.js

@@ -13,6 +13,7 @@ import { PROFILE_PATH, WISH_LIST_PATH, ORDERS_PATH } from "../../account";
  * SideNavigationLinks component
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const SideNavigationLinks = () => {
   const {
     isLoggedIn,
@@ -20,35 +21,40 @@ const SideNavigationLinks = () => {
     currentPathname
   } = useSideNavigation();
   const isAccountActive = currentPathname === PROFILE_PATH || currentPathname === ORDERS_PATH || currentPathname === WISH_LIST_PATH;
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(SideNavigationItem, {
-    href: CART_PATH,
-    label: "navigation.cart"
-  }), !isLoggedIn && appConfig.hasFavorites ? /*#__PURE__*/React.createElement(SideNavigationItem, {
-    href: FAVORITES_PATH,
-    label: "navigation.favorites"
-  }) : null, isLoggedIn && /*#__PURE__*/React.createElement(SideNavigationNestedItem, {
-    href: PROFILE_PATH,
-    label: "navigation.your_account",
-    forceActive: isAccountActive,
-    level: 0
-  }, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement(SideNavigationItem, {
-    level: 1,
-    href: PROFILE_PATH,
-    label: "titles.profile"
-  }), /*#__PURE__*/React.createElement(SideNavigationItem, {
-    level: 1,
-    href: ORDERS_PATH,
-    label: "titles.order_history"
-  }), appConfig.hasFavorites ? /*#__PURE__*/React.createElement(SideNavigationItem, {
-    level: 1,
-    href: WISH_LIST_PATH,
-    label: "titles.favorites"
-  }) : null)), /*#__PURE__*/React.createElement(SideNavigationLinksQuicklinks, null), /*#__PURE__*/React.createElement(SideNavigationLinksLegal, null), isLoggedIn ? /*#__PURE__*/React.createElement(SideNavigationItem, {
-    onClick: logout,
-    label: "navigation.logout"
-  }) : /*#__PURE__*/React.createElement(SideNavigationItem, {
-    href: LOGIN_PATH,
-    label: "navigation.login_register"
-  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(SideNavigationItem, {
+      href: CART_PATH,
+      label: "navigation.cart"
+    }), !isLoggedIn && appConfig.hasFavorites ? /*#__PURE__*/_jsx(SideNavigationItem, {
+      href: FAVORITES_PATH,
+      label: "navigation.favorites"
+    }) : null, isLoggedIn && /*#__PURE__*/_jsx(SideNavigationNestedItem, {
+      href: PROFILE_PATH,
+      label: "navigation.your_account",
+      forceActive: isAccountActive,
+      level: 0,
+      children: /*#__PURE__*/_jsxs("ul", {
+        children: [/*#__PURE__*/_jsx(SideNavigationItem, {
+          level: 1,
+          href: PROFILE_PATH,
+          label: "titles.profile"
+        }), /*#__PURE__*/_jsx(SideNavigationItem, {
+          level: 1,
+          href: ORDERS_PATH,
+          label: "titles.order_history"
+        }), appConfig.hasFavorites ? /*#__PURE__*/_jsx(SideNavigationItem, {
+          level: 1,
+          href: WISH_LIST_PATH,
+          label: "titles.favorites"
+        }) : null]
+      })
+    }), /*#__PURE__*/_jsx(SideNavigationLinksQuicklinks, {}), /*#__PURE__*/_jsx(SideNavigationLinksLegal, {}), isLoggedIn ? /*#__PURE__*/_jsx(SideNavigationItem, {
+      onClick: logout,
+      label: "navigation.logout"
+    }) : /*#__PURE__*/_jsx(SideNavigationItem, {
+      href: LOGIN_PATH,
+      label: "navigation.login_register"
+    })]
+  });
 };
 export default SideNavigationLinks;

package/components/SideNavigation/SideNavigationLinksLegal.js

@@ -9,6 +9,7 @@ import connect from "./SideNavigationLinksLegal.connector";
  * @param {Array<{label: string, url: string}>} [props.links] - The list of legal links.
  * @returns {*[]} The rendered component or null.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const SideNavigationLinksLegal = ({
   links
 }) => {
@@ -18,14 +19,12 @@ const SideNavigationLinksLegal = ({
   return links.map(({
     label,
     url
-  }) => /*#__PURE__*/React.createElement(SideNavigationItem, {
-    key: url,
+  }) => /*#__PURE__*/_jsx(SideNavigationItem, {
     href: url,
     label: label
-  }));
+  }, url));
 };
 SideNavigationLinksLegal.defaultProps = {
-  links: null,
-  isFetching: false
+  links: null
 };
 export default connect(SideNavigationLinksLegal);

package/components/SideNavigation/SideNavigationLinksQuicklinks.js

@@ -9,6 +9,7 @@ import connect from "./SideNavigationLinksQuicklinks.connector";
  * @param {Array} props.links The quicklinks links
  * @returns {*[]}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const SideNavigationLinksQuicklinks = ({
   links
 }) => {
@@ -18,11 +19,10 @@ const SideNavigationLinksQuicklinks = ({
   return links.map(({
     label,
     url
-  }) => /*#__PURE__*/React.createElement(SideNavigationItem, {
-    key: url,
+  }) => /*#__PURE__*/_jsx(SideNavigationItem, {
     href: url,
     label: label
-  }));
+  }, url));
 };
 SideNavigationLinksQuicklinks.defaultProps = {
   links: null

package/components/SideNavigation/SideNavigationNestedItem.js

@@ -1,12 +1,20 @@
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import ArrowDrop from '@shopgate/pwa-ui-shared/icons/ArrowDropIcon';
+import PropTypes from 'prop-types';
 import { chevronButton, chevronUp, chevronDown, open } from "./SideNavigationCategoriesItem.style";
 import SideNavigationItem from "./SideNavigationItem";
 
 /**
  * The SideNavigationCategoriesItem component
- * @returns {JSX}
+ * @param {Object} props The component props.
+ * @param {number} props.level The nesting level.
+ * @param {string} props.label The item label.
+ * @param {string} props.href The item href.
+ * @param {JSX.Element} props.children The nested items.
+ * @param {boolean} props.forceActive Whether the item should be forced open.
+ * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const SideNavigationNestedItem = ({
   level,
   label,
@@ -23,21 +31,23 @@ const SideNavigationNestedItem = ({
   const handleClick = useCallback(() => {
     setIsOpen(!isOpen);
   }, [isOpen]);
-  const buttonRight = useMemo(() => /*#__PURE__*/React.createElement("button", {
+  const buttonRight = useMemo(() => /*#__PURE__*/_jsx("button", {
     type: "button",
     onClick: handleClick,
-    className: chevronButton
-  }, /*#__PURE__*/React.createElement(ArrowDrop, {
-    className: (isOpen ? chevronUp : chevronDown).toString()
-  })), [handleClick, isOpen]);
-  return /*#__PURE__*/React.createElement(SideNavigationItem, {
+    className: chevronButton,
+    children: /*#__PURE__*/_jsx(ArrowDrop, {
+      className: (isOpen ? chevronUp : chevronDown).toString()
+    })
+  }), [handleClick, isOpen]);
+  return /*#__PURE__*/_jsx(SideNavigationItem, {
     href: href,
     label: label,
     level: level,
     buttonRight: buttonRight,
     className: level === 0 && isOpen ? open : null,
-    forceInactive: true
-  }, isOpen ? children : null);
+    forceInactive: true,
+    children: isOpen ? children : null
+  });
 };
 SideNavigationNestedItem.defaultProps = {
   level: 0,

package/components/SideNavigation/SideNavigationProvider.js

@@ -5,6 +5,7 @@ import { ITEM_PATTERN, ITEM_GALLERY_PATTERN, ITEM_REVIEWS_PATTERN, ITEM_WRITE_RE
 import { hex2bin } from '@shopgate/pwa-common/helpers/data';
 import Context from "./SideNavigationProvider.context";
 import connect from "./SideNavigationProvider.connector";
+import { jsx as _jsx } from "react/jsx-runtime";
 const categoryPatterns = [CATEGORY_PATTERN, CATEGORY_FILTER_PATTERN];
 const itemPatterns = [ITEM_PATTERN, ITEM_GALLERY_PATTERN, ITEM_REVIEWS_PATTERN, ITEM_WRITE_REVIEW_PATTERN];
 
@@ -60,9 +61,10 @@ const SideNavigationProvider = ({
     activeCategoryId,
     isVisible
   }), [activeCategoryId, currentParams, currentPathname, currentRoute, isLoggedIn, isVisible, logout, maxCategoryNesting]);
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: value
-  }, children);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: value,
+    children: children
+  });
 };
 SideNavigationProvider.defaultProps = {
   currentParams: null,

package/components/SnackBarContainer/index.js

@@ -1,16 +1,23 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { createPortal } from 'react-dom';
 import { SnackBar } from '@shopgate/pwa-ui-material';
 
 /**
  * The SnackBarContainer component.
  * @param {Object} props The component props.
- * @returns {JSX}
+ * @returns {JSX.Element|null}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 function SnackBarContainer(props) {
   if (!props.toasts.length) {
     return null;
   }
-  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(SnackBar, props), document.getElementById('portals'));
+  return /*#__PURE__*/createPortal(/*#__PURE__*/_jsx(SnackBar, {
+    ...props
+  }), document.getElementById('portals'));
 }
+SnackBarContainer.defaultProps = {
+  toasts: []
+};
 export default SnackBarContainer;

package/components/Switch/index.js

@@ -15,6 +15,7 @@ import styles from "./style";
  * @param {string} [props.id=null] Optional custom id for checkbox input and label
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Switch = ({
   disabled,
   checked,
@@ -24,20 +25,25 @@ const Switch = ({
   children
 }) => {
   const switchId = useMemo(() => id || Math.random(), [id]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.container
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    disabled: disabled,
-    checked: checked,
-    onChange: onChange,
-    className: styles.input,
-    id: switchId
-  }), children && /*#__PURE__*/React.createElement("label", {
-    htmlFor: switchId
-  }, /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": !!a11yFallbackText
-  }, children), a11yFallbackText && /*#__PURE__*/React.createElement(VisuallyHidden, null, a11yFallbackText)));
+  return /*#__PURE__*/_jsxs("div", {
+    className: styles.container,
+    children: [/*#__PURE__*/_jsx("input", {
+      type: "checkbox",
+      disabled: disabled,
+      checked: checked,
+      onChange: onChange,
+      className: styles.input,
+      id: switchId
+    }), children && /*#__PURE__*/_jsxs("label", {
+      htmlFor: switchId,
+      children: [/*#__PURE__*/_jsx("span", {
+        "aria-hidden": !!a11yFallbackText,
+        children: children
+      }), a11yFallbackText && /*#__PURE__*/_jsx(VisuallyHidden, {
+        children: a11yFallbackText
+      })]
+    })]
+  });
 };
 Switch.defaultProps = {
   children: null,

package/components/Tabs/TabContext.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
 const Context = /*#__PURE__*/React.createContext(null);
 
 /**
@@ -15,9 +16,10 @@ const TabContext = props => {
   const context = React.useMemo(() => ({
     value
   }), [value]);
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: context
-  }, children);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: context,
+    children: children
+  });
 };
 /**
  * @returns {unknown}

package/components/Tabs/components/Tab.js

@@ -10,6 +10,7 @@ import { ViewContext } from "../../View";
  * @param {Object} props props
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Tab = props => {
   const {
     className,
@@ -47,7 +48,7 @@ const Tab = props => {
       onFocus(event);
     }
   };
-  return /*#__PURE__*/React.createElement(Button, {
+  return /*#__PURE__*/_jsxs(Button, {
     flat: true,
     type: selected ? 'secondary' : 'regular',
     className: classNames(root, className),
@@ -56,10 +57,12 @@ const Tab = props => {
     disabled: disabled,
     onClick: handleClick,
     onFocus: handleFocus,
-    tabIndex: selected ? 0 : -1
-  }, /*#__PURE__*/React.createElement("span", {
-    className: wrapper
-  }, label), indicator);
+    tabIndex: selected ? 0 : -1,
+    children: [/*#__PURE__*/_jsx("span", {
+      className: wrapper,
+      children: label
+    }), indicator]
+  });
 };
 Tab.defaultProps = {
   className: null,

package/components/Tabs/components/TabIndicator.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -9,12 +8,14 @@ import { root } from "./TabIndicator.style";
  * @param {Object} props props
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const TabIndicator = ({
   className,
   ...other
-}) => /*#__PURE__*/React.createElement("span", _extends({
-  className: classNames(root, className)
-}, other));
+}) => /*#__PURE__*/_jsx("span", {
+  className: classNames(root, className),
+  ...other
+});
 TabIndicator.defaultProps = {
   className: null
 };

package/components/Tabs/components/TabPanel.js

@@ -7,6 +7,7 @@ import { useTabContext } from "../TabContext";
  * @param {Object} props props
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const TabPanel = props => {
   const {
     children,
@@ -14,11 +15,12 @@ const TabPanel = props => {
     value
   } = props;
   const context = useTabContext();
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: className,
     hidden: value !== context.value,
-    role: "tabpanel"
-  }, value === context.value && children);
+    role: "tabpanel",
+    children: value === context.value && children
+  });
 };
 TabPanel.defaultProps = {
   children: null,

package/components/Tabs/components/Tabs.js

@@ -13,6 +13,7 @@ import { useTabContext } from "../TabContext";
  * @param {Object} props props
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Tabs = props => {
   const {
     children: childrenProp,
@@ -107,7 +108,7 @@ const Tabs = props => {
   React.useEffect(() => {
     updateIndicatorState();
   });
-  const indicator = /*#__PURE__*/React.createElement(TabIndicator, {
+  const indicator = /*#__PURE__*/_jsx(TabIndicator, {
     style: indicatorStyle
   });
   let childIndex = 0;
@@ -126,16 +127,19 @@ const Tabs = props => {
       value: childValue
     });
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(root, className)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(fixed),
-    ref: tabsRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(flexContainer),
-    ref: tabListRef,
-    role: "tablist"
-  }, children), mounted && indicator));
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames(root, className),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: classNames(fixed),
+      ref: tabsRef,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: classNames(flexContainer),
+        ref: tabListRef,
+        role: "tablist",
+        children: children
+      }), mounted && indicator]
+    })
+  });
 };
 Tabs.defaultProps = {
   className: null

package/components/Tabs/useEventCallback.js

@@ -12,5 +12,5 @@ export default function useEventCallback(fn) {
   useEnhancedEffect(() => {
     ref.current = fn;
   });
-  return React.useCallback((...args) => (0, ref.current)(...args), []);
+  return React.useCallback((...args) => (0, ref.current).apply(void 0, args), []);
 }

package/components/TextLink/TextLink.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -10,12 +9,14 @@ import { link } from "./TextLink.style";
  * @param {Object} props The component props
  * @returns {JSX.Element}
  */
-const TextLink = props => /*#__PURE__*/React.createElement(Link, _extends({}, props, {
+import { jsx as _jsx } from "react/jsx-runtime";
+const TextLink = props => /*#__PURE__*/_jsx(Link, {
+  ...props,
   className: classNames(props.className, link),
   tag: "a",
   role: "link",
   tabIndex: 0
-}));
+});
 TextLink.defaultProps = {
   className: null
 };

package/components/TimeBoundary/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import _isEqual from "lodash/isEqual";
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
@@ -16,65 +17,73 @@ import { second$ } from '@shopgate/pwa-common/streams/interval';
         )}
  *     </TimeBoundary>
  */
-class TimeBoundary extends Component {
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+let TimeBoundary = /*#__PURE__*/function (_Component) {
   /**
    * @inheritDoc
    */
-  constructor(props) {
-    super(props);
+  function TimeBoundary(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /** Clear interval if valid */
-    this.clear = () => {
-      if (this.intervalSubscription) {
-        this.intervalSubscription.unsubscribe();
+    _this.clear = () => {
+      if (_this.intervalSubscription) {
+        _this.intervalSubscription.unsubscribe();
       }
     };
     /**
      * Check time boundary.
      */
-    this.checkBoundary = () => {
+    _this.checkBoundary = () => {
       const now = new Date(Date.now());
       const newState = {
-        before: isBefore(now, this.props.start),
-        between: isBetween(now, this.props.start, this.props.end),
-        after: isAfter(now, this.props.end)
+        before: isBefore(now, _this.props.start),
+        between: isBetween(now, _this.props.start, _this.props.end),
+        after: isAfter(now, _this.props.end)
       };
-      if (_isEqual(newState, this.state)) {
+      if (_isEqual(newState, _this.state)) {
         return;
       }
-      this.setState(newState);
+      _this.setState(newState);
       if (newState.after) {
         // already after, stop timer
-        this.clear();
+        _this.clear();
       }
     };
-    this.state = {
+    _this.state = {
       before: false,
       between: false,
       after: false
     };
+    return _this;
   }
 
   /**
    * @inheritDoc
    */
-  componentDidMount() {
+  _inheritsLoose(TimeBoundary, _Component);
+  var _proto = TimeBoundary.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     this.intervalSubscription = second$.subscribe(this.checkBoundary);
     this.checkBoundary();
   }
 
   /**
    * @inheritDoc
-   */
-  componentWillUnmount() {
+   */;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     this.clear();
-  }
+  };
   /**
    * @returns {JSX}
    */
-  render() {
-    return /*#__PURE__*/React.createElement(Fragment, null, this.props.children(this.state));
-  }
-}
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: this.props.children(this.state)
+    });
+  };
+  return TimeBoundary;
+}(Component);
 TimeBoundary.defaultProps = {
   end: null,
   start: null