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

package/components/View/index.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
@@ -8,6 +7,7 @@ import Content from "./components/Content";
 import ViewProvider from "./provider";
 import { ViewContext } from "./context";
 import styles from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
 const {
   colors
 } = themeConfig;
@@ -35,19 +35,25 @@ function ViewContainer({
   const style = {
     display: visible ? 'flex' : 'none'
   };
-  return /*#__PURE__*/React.createElement(ViewProvider, null, /*#__PURE__*/React.createElement(ViewContext.Consumer, null, ({
-    setContentRef,
-    ariaHidden: ariaHiddenContext
-  }) => /*#__PURE__*/React.createElement("section", {
-    className: `${styles} engage__view`,
-    style: style,
-    "aria-hidden": ariaHidden || ariaHiddenContext
-  }, /*#__PURE__*/React.createElement(Content, {
-    noScrollOnKeyboard: noScrollOnKeyboard,
-    noKeyboardListener: noKeyboardListener,
-    setContentRef: setContentRef,
-    noContentPortal: noContentPortal
-  }, children))));
+  return /*#__PURE__*/_jsx(ViewProvider, {
+    children: /*#__PURE__*/_jsx(ViewContext.Consumer, {
+      children: ({
+        setContentRef,
+        ariaHidden: ariaHiddenContext
+      }) => /*#__PURE__*/_jsx("section", {
+        className: `${styles} engage__view`,
+        style: style,
+        "aria-hidden": ariaHidden || ariaHiddenContext,
+        children: /*#__PURE__*/_jsx(Content, {
+          noScrollOnKeyboard: noScrollOnKeyboard,
+          noKeyboardListener: noKeyboardListener,
+          setContentRef: setContentRef,
+          noContentPortal: noContentPortal,
+          children: children
+        })
+      })
+    })
+  });
 }
 ViewContainer.defaultProps = {
   'aria-hidden': false,
@@ -63,9 +69,12 @@ ViewContainer.defaultProps = {
  * @returns {JSX.Element}
  */
 export default function View(props) {
-  return /*#__PURE__*/React.createElement(RouteContext.Consumer, null, ({
-    visible
-  }) => /*#__PURE__*/React.createElement(ViewContainer, _extends({}, props, {
-    visible: visible
-  })));
+  return /*#__PURE__*/_jsx(RouteContext.Consumer, {
+    children: ({
+      visible
+    }) => /*#__PURE__*/_jsx(ViewContainer, {
+      ...props,
+      visible: visible
+    })
+  });
 }

package/components/View/provider.js

@@ -1,3 +1,5 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import delay from 'lodash/delay';
@@ -12,6 +14,7 @@ import { ViewContext } from "./context";
  * @param {Object} state State
  * @returns {Object}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const mapStateToProps = state => ({
   modalCount: getModalCount(state)
 });
@@ -19,60 +22,61 @@ const mapStateToProps = state => ({
 /**
  * The ViewProvider component.
  */
-class ViewProvider extends Component {
+let ViewProvider = /*#__PURE__*/function (_Component) {
   /**
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
-    this.handleModalShow = () => {
-      this.activeElement = document.activeElement;
-      this.setAriaHidden(true);
+  function ViewProvider(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
+    _this.handleModalShow = () => {
+      _this.activeElement = document.activeElement;
+      _this.setAriaHidden(true);
     };
-    this.handleModalHide = () => {
-      if (this.activeElement && this.activeElement.focus) {
-        this.activeElement.focus();
+    _this.handleModalHide = () => {
+      if (_this.activeElement && _this.activeElement.focus) {
+        _this.activeElement.focus();
       }
-      this.setAriaHidden(false);
+      _this.setAriaHidden(false);
     };
     /**
      * @param {number} value The new top value;
      */
-    this.setTop = value => {
-      this.set('top', value);
+    _this.setTop = value => {
+      _this.set('top', value);
     };
     /**
      * @param {number} value The new bottom value;
      */
-    this.setBottom = value => {
-      this.set('bottom', value);
+    _this.setBottom = value => {
+      _this.set('bottom', value);
     };
     /**
      * @param {boolean} value The new aria hidden value;
      */
-    this.setAriaHidden = value => {
-      this.set('ariaHidden', value);
+    _this.setAriaHidden = value => {
+      _this.set('ariaHidden', value);
     };
     /**
      * @param {Object} ref A React reference to the page content wrapper.
      */
-    this.setContentRef = ref => {
-      this.set('contentRef', ref);
+    _this.setContentRef = ref => {
+      _this.set('contentRef', ref);
       // Delay to dispatch actual DOM node - implemented with CCP-2358
       delay(() => emitScrollEvents(ref.current), 250);
     };
     /**
      * @return {Object}
      */
-    this.getContentRef = () => this.state.contentRef;
+    _this.getContentRef = () => _this.state.contentRef;
     /**
      * Scrolls the content ref to the top.
      * @param {number} [value=0] A number indicating the new scroll position of the content ref.
      */
-    this.scrollTop = (value = 0) => {
+    _this.scrollTop = (value = 0) => {
       const {
         current
-      } = this.state.contentRef;
+      } = _this.state.contentRef;
       if (current) {
         current.scrollTop = value;
       }
@@ -81,14 +85,14 @@ class ViewProvider extends Component {
      * @param {string} property The state property to set.
      * @param {*} value The value to set.
      */
-    this.set = (property, value) => {
-      if (this.state[property] !== value) {
-        this.setState({
+    _this.set = (property, value) => {
+      if (_this.state[property] !== value) {
+        _this.setState({
           [property]: value
         });
       }
     };
-    this.state = {
+    _this.state = {
       top: 0,
       bottom: 0,
       contentRef: {
@@ -97,50 +101,57 @@ class ViewProvider extends Component {
       ariaHidden: props.modalCount > 0
     };
     // Last view active element
-    this.activeElement = null;
+    _this.activeElement = null;
+    return _this;
   }
 
   /** @inheritDoc */
-  componentDidMount() {
+  _inheritsLoose(ViewProvider, _Component);
+  var _proto = ViewProvider.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     UIEvents.addListener(MODAL_EVENTS.SHOW, this.handleModalShow);
     UIEvents.addListener(MODAL_EVENTS.HIDE, this.handleModalHide);
   }
 
-  /** @inheritDoc */
-  componentDidUpdate(prevProps) {
+  /** @inheritDoc */;
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
     if (prevProps.modalCount !== this.props.modalCount) {
       this.setAriaHidden(this.props.modalCount > 0);
     }
   }
 
-  /** @inheritDoc */
-  componentWillUnmount() {
+  /** @inheritDoc */;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     UIEvents.removeListener(MODAL_EVENTS.SHOW, this.handleModalShow);
     UIEvents.removeListener(MODAL_EVENTS.HIDE, this.handleModalHide);
   }
 
   /**
    * @returns {Object}
-   */
-  get providerContext() {
-    return {
-      ...this.state,
-      set: this.set,
-      setTop: this.setTop,
-      setBottom: this.setBottom,
-      setAriaHidden: this.setAriaHidden,
-      setContentRef: this.setContentRef,
-      getContentRef: this.getContentRef,
-      scrollTop: this.scrollTop
-    };
-  }
+   */;
   /**
    * @returns {JSX}
    */
-  render() {
-    return /*#__PURE__*/React.createElement(ViewContext.Provider, {
-      value: this.providerContext
-    }, this.props.children);
-  }
-}
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsx(ViewContext.Provider, {
+      value: this.providerContext,
+      children: this.props.children
+    });
+  };
+  return _createClass(ViewProvider, [{
+    key: "providerContext",
+    get: function () {
+      return {
+        ...this.state,
+        set: this.set,
+        setTop: this.setTop,
+        setBottom: this.setBottom,
+        setAriaHidden: this.setAriaHidden,
+        setContentRef: this.setContentRef,
+        getContentRef: this.getContentRef,
+        scrollTop: this.scrollTop
+      };
+    }
+  }]);
+}(Component);
 export default connect(mapStateToProps)(ViewProvider);

package/core/classes/GeolocationRequest.js

@@ -5,13 +5,13 @@ import { GEOLOCATION_DEFAULT_TIMEOUT } from "../constants/geolocationRequest";
 /**
  * The GeolocationRequest class enables to retrieve the current geolocation of the device.
  */
-class GeolocationRequest {
+let GeolocationRequest = /*#__PURE__*/function () {
   /**
    * Constructor
    * @param {boolean} [useBrowserAPI=true] Wether the browser API or app commands a supposed to
    * be used to determine the geolocation.
    */
-  constructor(useBrowserAPI = true) {
+  function GeolocationRequest(useBrowserAPI = true) {
     this.useBrowserAPI = useBrowserAPI;
     this.options = {
       timeout: GEOLOCATION_DEFAULT_TIMEOUT
@@ -23,7 +23,8 @@ class GeolocationRequest {
    * @param {number} [value=10000] The timeout in ms.
    * @returns {GeolocationRequest}
    */
-  setTimeout(value = GEOLOCATION_DEFAULT_TIMEOUT) {
+  var _proto = GeolocationRequest.prototype;
+  _proto.setTimeout = function setTimeout(value = GEOLOCATION_DEFAULT_TIMEOUT) {
     this.options.timeout = value;
     return this;
   }
@@ -32,10 +33,11 @@ class GeolocationRequest {
    * Dispatches the request. If no further provisions are made, it will trigger the geolocation
    * permission dialog if permissions are not already granted.
    * @returns {Promise}
-   */
-  dispatch() {
+   */;
+  _proto.dispatch = function dispatch() {
     const instance = this.useBrowserAPI ? geolocationRequestBrowser : geolocationRequestApp;
     return instance.dispatch(this.options.timeout);
-  }
-}
+  };
+  return GeolocationRequest;
+}();
 export default GeolocationRequest;

package/core/classes/GeolocationRequestApp.js

@@ -11,11 +11,11 @@ const EVENT_NAME = 'setLocation';
  * The GeolocationRequestApp class enables to retrieve the current geolocation of the device.
  * Therefore it utilizes app commands and events.
  */
-class GeolocationRequestApp {
+let GeolocationRequestApp = /*#__PURE__*/function () {
   /**
    * Constructor.
    */
-  constructor() {
+  function GeolocationRequestApp() {
     /**
      * Handles responses
      * @param {Object} response Response.
@@ -59,12 +59,13 @@ class GeolocationRequestApp {
     this.responseQueue = [];
     event.addCallback(EVENT_NAME, this.handleResponse);
   }
+  var _proto = GeolocationRequestApp.prototype;
   /**
    * Dispatches the request.
    * @param {number} [timeout=GEOLOCATION_DEFAULT_TIMEOUT] Timeout in ms for the request.
    * @returns {Promise}
    */
-  dispatch(timeout = GEOLOCATION_DEFAULT_TIMEOUT) {
+  _proto.dispatch = function dispatch(timeout = GEOLOCATION_DEFAULT_TIMEOUT) {
     return new Promise(async (resolve, reject) => {
       this.responseQueue.push({
         resolve,
@@ -78,7 +79,8 @@ class GeolocationRequestApp {
       logGroup('GetLocationRequest', commandParams, '#9a9800');
       await new AppCommand().setCommandName(COMMAND_NAME).setLibVersion(LIB_VERSION).setCommandParams(commandParams).dispatch();
     });
-  }
-}
+  };
+  return GeolocationRequestApp;
+}();
 export { GeolocationRequestApp };
 export default new GeolocationRequestApp();

package/core/classes/GeolocationRequestBrowser.js

@@ -6,14 +6,16 @@ const errorMapping = [GEOLOCATION_ERROR_UNKNOWN, GEOLOCATION_ERROR_DENIED, GEOLO
 /**
  * The GeolocationRequestBrowser class enables to retrieve the current geolocation of the device.
  */
-class GeolocationRequestBrowser {
+let GeolocationRequestBrowser = /*#__PURE__*/function () {
+  function GeolocationRequestBrowser() {}
+  var _proto = GeolocationRequestBrowser.prototype;
   /**
    * Dispatches the request. If no further provisions are made, it will trigger the geolocation
    * permission dialog if permissions are not already granted.
    * @param {number} [timeout=GEOLOCATION_DEFAULT_TIMEOUT] Timeout in ms for the request.
    * @returns {Promise}
    */
-  dispatch(timeout = GEOLOCATION_DEFAULT_TIMEOUT) {
+  _proto.dispatch = function dispatch(timeout = GEOLOCATION_DEFAULT_TIMEOUT) {
     return new Promise((resolve, reject) => {
       navigator.geolocation.getCurrentPosition(position => {
         const {
@@ -35,8 +37,9 @@ class GeolocationRequestBrowser {
         timeout
       });
     });
-  }
-}
+  };
+  return GeolocationRequestBrowser;
+}();
 export { GeolocationRequestBrowser };
 
 /* eslint-enable class-methods-use-this */

package/core/collections/AppInitialization.js

@@ -5,7 +5,6 @@
  * @param {Function} params.getState Redux dispatch function
  * @returns {Promise}
  */
-
 /**
  * Class to maintain handler functions that are executed before the React app initializes.
  *
@@ -16,11 +15,11 @@
  * Since the handler execution is blocking and postpones the React app initialization, this
  * system should be handled with care.
  */
-class AppInitialization {
+let AppInitialization = /*#__PURE__*/function () {
   /**
    * Constructor
    */
-  constructor() {
+  function AppInitialization() {
     this.store = new Map();
   }
 
@@ -29,7 +28,8 @@ class AppInitialization {
    * @param {*} key Identifier for the handler
    * @returns {Promise}
    */
-  get(key) {
+  var _proto = AppInitialization.prototype;
+  _proto.get = function get(key) {
     return this.store.get(key);
   }
 
@@ -54,8 +54,8 @@ class AppInitialization {
    *
    * appInitialization.set('handler-key', handler);
    * }
-   */
-  set(key, handler) {
+   */;
+  _proto.set = function set(key, handler) {
     this.store.set(key, handler);
     return this;
   }
@@ -63,8 +63,8 @@ class AppInitialization {
   /**
    * Invokes all registered handlers
    * @returns {Promise<{results: [], errors: []}>}
-   */
-  async initialize({
+   */;
+  _proto.initialize = async function initialize({
     dispatch,
     getState
   }) {
@@ -86,6 +86,7 @@ class AppInitialization {
       results,
       errors
     };
-  }
-}
+  };
+  return AppInitialization;
+}();
 export default new AppInitialization();

package/core/config/ThemeConfigResolver.js

@@ -6,14 +6,14 @@ import appConfig, { writeToConfig, equalStructureComparator } from '@shopgate/pw
 /**
  * Parses a JSON object and resolves placeholders with values from the object.
  */
-export class ThemeConfigResolver {
+export let ThemeConfigResolver = /*#__PURE__*/function () {
   /**
    * @param {Object} config The configuration to resolve references for.
    * @param {string} [delimiter='$.'] What the replaceable starts with.
    * @param {string} [endDelimiter='.$'] What the replaceable ends with. Useful within some strings.
    * @constructor
    */
-  constructor(config = {}, delimiter = '$.', endDelimiter = '.$') {
+  function ThemeConfigResolver(config = {}, delimiter = '$.', endDelimiter = '.$') {
     this.config = config;
     this.delimiter = delimiter;
     // Some references require an ending delimiter. E.g.: "size: $.theme.reference.value.$rem"
@@ -24,7 +24,8 @@ export class ThemeConfigResolver {
    * Resolves the JSON configuration.
    * @returns {Object}
    */
-  resolve() {
+  var _proto = ThemeConfigResolver.prototype;
+  _proto.resolve = function resolve() {
     if (!this.configIsFilled()) {
       return this.config;
     }
@@ -33,8 +34,8 @@ export class ThemeConfigResolver {
 
   /**
    * Takes the current theme config and resolves all page- and widget-setting refs
-   */
-  resolveAll() {
+   */;
+  _proto.resolveAll = function resolveAll() {
     this.config = appConfig.theme;
     writeToConfig({
       theme: this.resolve()
@@ -44,16 +45,16 @@ export class ThemeConfigResolver {
   /**
    * Checks whether the config has any keys.
    * @returns {boolean}
-   */
-  configIsFilled() {
+   */;
+  _proto.configIsFilled = function configIsFilled() {
     return Object.keys(this.config).length > 0;
   }
 
   /**
    * @param {Object} input The input object to process.
    * @returns {Object}
-   */
-  processObject(input) {
+   */;
+  _proto.processObject = function processObject(input) {
     const output = {};
     Object.keys(input).forEach(key => {
       const item = input[key];
@@ -77,8 +78,8 @@ export class ThemeConfigResolver {
   /**
    * @param {Array} input The input array to process.
    * @returns {Array}
-   */
-  processArray(input) {
+   */;
+  _proto.processArray = function processArray(input) {
     return input.map(item => {
       if (this.isObject(item)) {
         return this.processObject(item);
@@ -96,8 +97,8 @@ export class ThemeConfigResolver {
   /**
    * @param {string} input The input string to process.
    * @returns {string}
-   */
-  processString(input) {
+   */;
+  _proto.processString = function processString(input) {
     // Replace all variable references in the given string if any exist
     let value = input;
     let replacementValue;
@@ -136,8 +137,8 @@ export class ThemeConfigResolver {
    *  Checks whether the props is a string.
    * @param {*} prop The property to check.
    * @returns {boolean}
-   */
-  isString(prop) {
+   */;
+  _proto.isString = function isString(prop) {
     return typeof prop === 'string';
   }
 
@@ -145,9 +146,10 @@ export class ThemeConfigResolver {
    * Whether the prop is an object.
    * @param {*} prop The prop to test.
    * @returns {boolean}
-   */
-  isObject(prop) {
+   */;
+  _proto.isObject = function isObject(prop) {
     return typeof prop === 'object' && prop !== null && prop.constructor === Object;
-  }
-}
+  };
+  return ThemeConfigResolver;
+}();
 /* eslint-enable class-methods-use-this */

package/core/helpers/errorBehavior.js

@@ -24,14 +24,14 @@ const getErrorMessage = (message, params = {}, pipeline = '') => {
 
   // Generate a bunch of lookup keys from the message
   while (segments.length) {
-    pipelineKeys.push([...segments, pipeline, code]);
-    codeKeys.push([...segments, code]);
-    genericKeys.push([...segments, 'generic']);
+    pipelineKeys.push([].concat(segments, [pipeline, code]));
+    codeKeys.push([].concat(segments, [code]));
+    genericKeys.push([].concat(segments, ['generic']));
     segments.pop();
   }
 
   // Add common keys
-  keys = [...pipelineKeys, ...codeKeys, ...genericKeys, ...[`common.errors.${code}`, 'common.errors.generic']];
+  keys = [].concat(pipelineKeys, codeKeys, genericKeys, [`common.errors.${code}`, 'common.errors.generic']);
   const match = keys.find(key => i18n.getPath(key));
   try {
     return i18n.text(match, params);

package/core/hocs/withApp.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import AppContext from "../contexts/AppContext";
 
@@ -7,15 +6,19 @@ import AppContext from "../contexts/AppContext";
  * @param {Function} WrappedComponent The react component to wrap.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export function withApp(WrappedComponent) {
   /**
    * The actual HOC.
    * @param {Object} props The component props.
    * @returns {JSX}
    */
-  const WithApp = props => /*#__PURE__*/React.createElement(AppContext.Consumer, null, appContext => /*#__PURE__*/React.createElement(WrappedComponent, _extends({
-    app: appContext
-  }, props)));
+  const WithApp = props => /*#__PURE__*/_jsx(AppContext.Consumer, {
+    children: appContext => /*#__PURE__*/_jsx(WrappedComponent, {
+      app: appContext,
+      ...props
+    })
+  });
   const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
   WithApp.displayName = `WithApp(${displayName})`;
   return WithApp;

package/core/hocs/withCurrentProduct.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useContext } from 'react';
 import { ThemeContext } from '@shopgate/pwa-common/context';
 
@@ -8,6 +7,7 @@ import { ThemeContext } from '@shopgate/pwa-common/context';
  * @param {string|null} prop The optional prop name.
  * @returns {Object}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const getInjectedProps = (context, prop) => {
   if (!prop) {
     return context;
@@ -39,7 +39,10 @@ export function withCurrentProduct(WrappedComponent, options = {}) {
       }
     } = useContext(ThemeContext);
     const productProps = useContext(ProductContext);
-    return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, getInjectedProps(productProps, options.prop), props));
+    return /*#__PURE__*/_jsx(WrappedComponent, {
+      ...getInjectedProps(productProps, options.prop),
+      ...props
+    });
   }
   const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
   WithCurrentProduct.displayName = `WithCurrentProduct(${displayName})`;

package/core/hocs/withForwardedRef.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
 
 /**
@@ -9,6 +8,7 @@ import React, { forwardRef } from 'react';
  * @param {string} [options.prop='forwardedRef'] The prop for the forwarded ref.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export function withForwardedRef(WrappedComponent, options = {}) {
   /**
    * The actual HOC.
@@ -20,7 +20,10 @@ export function withForwardedRef(WrappedComponent, options = {}) {
     const injected = {
       [options.prop || 'forwardedRef']: ref
     };
-    return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, injected));
+    return /*#__PURE__*/_jsx(WrappedComponent, {
+      ...props,
+      ...injected
+    });
   };
   const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
   WithForwardedRef.displayName = `WithForwardedRef(${displayName})`;

package/core/hocs/withNavigation.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { push, pop, replace, reset, update } from "../router/helpers";
 
@@ -7,6 +6,7 @@ import { push, pop, replace, reset, update } from "../router/helpers";
  * @param {string|null} prop The optional prop name.
  * @returns {Object}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const getInjectedProps = prop => {
   const injected = {
     historyPush: push,
@@ -38,7 +38,10 @@ export function withNavigation(WrappedComponent, options = {}) {
    * @param {Object} props The component props.
    * @returns {JSX}
    */
-  const WithNavigation = props => /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, getInjectedProps(options.prop), props));
+  const WithNavigation = props => /*#__PURE__*/_jsx(WrappedComponent, {
+    ...getInjectedProps(options.prop),
+    ...props
+  });
   const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
   WithNavigation.displayName = `WithNavigation(${displayName})`;
   return WithNavigation;