@shopgate/pwa-common 7.30.0-alpha.9 → 7.30.0-beta.2

package/components/Widgets/index.js

@@ -1,9 +1,11 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
 import { withThemeWidgets } from '@shopgate/engage/core/hocs';
 import WidgetGrid from "./components/WidgetGrid";
 import shouldShowWidget from "./helpers/shouldShowWidget";
+import { jsx as _jsx } from "react/jsx-runtime";
 const WIDGET_GRID_TYPE = '@shopgate/commerce-widgets/widget-grid';
 const GRID_COLUMNS = 12; // One grid row has 12 columns. // TODO: is it deprecated since css grid?
 
@@ -23,23 +25,26 @@ const createGridWrapper = (key, config, components) => (/*#__PURE__*/React.creat
 /**
  * The widgets component.
  */
-class Widgets extends Component {
+let Widgets = /*#__PURE__*/function (_Component) {
   /**
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
-    this.autoReloadInterval = undefined;
-    if (this.hasSchedulableWidgets()) {
-      this.startAutoRerender();
+  function Widgets(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
+    if (_this.hasSchedulableWidgets()) {
+      _this.startAutoRerender();
     }
+    return _this;
   }
 
   /**
    * @param {Object} nextProps The next component props.
    * @return {JSX}
    */
-  shouldComponentUpdate(nextProps) {
+  _inheritsLoose(Widgets, _Component);
+  var _proto = Widgets.prototype;
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
     if (!isEqual(this.props.themeWidgets, nextProps.themeWidgets)) {
       return true;
     }
@@ -51,8 +56,8 @@ class Widgets extends Component {
 
   /**
    * Component will unmount lifecycle method.
-   */
-  componentWillUnmount() {
+   */;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     this.stopAutoRerender();
   }
 
@@ -60,15 +65,15 @@ class Widgets extends Component {
    * Checks if any widget is schedulable.
    * @param {Array} widgets Array of widgets.
    * @returns {boolean}
-   */
-  hasSchedulableWidgets() {
+   */;
+  _proto.hasSchedulableWidgets = function hasSchedulableWidgets() {
     return (this.props.widgets || []).some(widget => widget.settings.plan);
   }
 
   /**
    * Sets auto re-render.
-   */
-  startAutoRerender() {
+   */;
+  _proto.startAutoRerender = function startAutoRerender() {
     const minutesToRoundedHour = 60 - new Date().getMinutes();
     const nextRerenderIn = minutesToRoundedHour * 60000;
     this.autoReloadTimeout = setTimeout(() => this.doAutoRerender(), nextRerenderIn);
@@ -77,15 +82,15 @@ class Widgets extends Component {
   /**
    * Stops auto re-render. Must be called before component is unmounted to avoid
    * memory leak.
-   */
-  stopAutoRerender() {
+   */;
+  _proto.stopAutoRerender = function stopAutoRerender() {
     clearTimeout(this.autoReloadTimeout);
   }
 
   /**
    * Forces re-render and sets another timeout for next cycle.
-   */
-  doAutoRerender() {
+   */;
+  _proto.doAutoRerender = function doAutoRerender() {
     this.forceUpdate();
     this.startAutoRerender();
   }
@@ -93,8 +98,8 @@ class Widgets extends Component {
   /**
    * Create array of elements from widget configuration.
    * @returns {Array} Array of JSX elements.
-   */
-  createArrayOfElements() {
+   */;
+  _proto.createArrayOfElements = function createArrayOfElements() {
     const {
       widgets = [],
       themeWidgets: components
@@ -128,8 +133,8 @@ class Widgets extends Component {
 
   /**
    * @return {JSX}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     const {
       widgets,
       themeWidgets: components
@@ -137,11 +142,13 @@ class Widgets extends Component {
     if (!widgets) {
       return null;
     }
-    return /*#__PURE__*/React.createElement("div", {
-      className: "common__widgets"
-    }, this.createArrayOfElements(widgets, components));
-  }
-}
+    return /*#__PURE__*/_jsx("div", {
+      className: "common__widgets",
+      children: this.createArrayOfElements(widgets, components)
+    });
+  };
+  return Widgets;
+}(Component);
 Widgets.defaultProps = {
   widgets: null
 };

package/components/Widgets/spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { ThemeResourcesProvider } from '@shopgate/engage/core/providers';
 import Widgets from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.useFakeTimers();
 jest.mock('@shopgate/pwa-common/context', () => ({
   ThemeContext: {
@@ -15,7 +16,7 @@ jest.mock('@shopgate/pwa-common/context', () => ({
  * A mock Image component.
  * @returns {JSX}
  */
-const Image = () => /*#__PURE__*/React.createElement("img", {
+const Image = () => /*#__PURE__*/_jsx("img", {
   alt: ""
 });
 /* eslint-disable react/prop-types */
@@ -26,9 +27,10 @@ const Image = () => /*#__PURE__*/React.createElement("img", {
  */
 const WidgetGrid = ({
   children
-}) => /*#__PURE__*/React.createElement("div", {
-  className: "widget-grid"
-}, children);
+}) => /*#__PURE__*/_jsx("div", {
+  className: "widget-grid",
+  children: children
+});
 /* eslint-enable react/prop-types */
 
 const components = {
@@ -42,12 +44,13 @@ const components = {
  * @param {Object[]} widgets Widgets to be rendered.
  * @returns {JSX.Element}
  */
-const createWrapper = widgets => mount(/*#__PURE__*/React.createElement(ThemeResourcesProvider, {
+const createWrapper = widgets => mount(/*#__PURE__*/_jsx(ThemeResourcesProvider, {
   widgets: components,
-  components: {}
-}, /*#__PURE__*/React.createElement(Widgets, {
-  widgets: widgets
-})));
+  components: {},
+  children: /*#__PURE__*/_jsx(Widgets, {
+    widgets: widgets
+  })
+}));
 describe('<Widgets />', () => {
   it('should render a grid if height is defined', () => {
     const widgets = [{
@@ -146,8 +149,6 @@ describe('<Widgets />', () => {
 
     const scheduledFromMs = Date.now() + msToNextFullHour - 1;
     const scheduledToMs = Date.now() + minutesToNextFullHour + 1000;
-
-    /* eslint-disable camelcase */
     const widgets = [{
       col: 0,
       row: 0,
@@ -164,8 +165,6 @@ describe('<Widgets />', () => {
       },
       type: '@shopgate/commerce-widgets/image'
     }];
-    /* eslint-enable camelcase */
-
     const wrapper = createWrapper(widgets);
     const instance = wrapper.find('Widgets').instance();
     const clearSpy = jest.spyOn(global, 'clearTimeout');

package/helpers/data/index.js

@@ -194,7 +194,7 @@ export const validateSelectorParams = (selector, defaultResult = null) => (...pa
   if (params.some(param => param === null || typeof param === 'undefined')) {
     return defaultResult;
   }
-  return selector(...params);
+  return selector.apply(void 0, params);
 };
 
 /**

package/helpers/portals/portalCollection.js

@@ -1,37 +1,40 @@
 /**
  * The portals collection.
  */
-class PortalCollection {
+let PortalCollection = /*#__PURE__*/function () {
+  function PortalCollection() {}
+  var _proto = PortalCollection.prototype;
   /**
    * Returns the portal definitions.
    * @return {Object}
    */
-  getPortals() {
+  _proto.getPortals = function getPortals() {
     return this.portals;
   }
 
   /**
    * Registers the portal definitions.
    * @param {Object} [portals={}] The portals to register.
-   */
-  registerPortals(portals = {}) {
+   */;
+  _proto.registerPortals = function registerPortals(portals = {}) {
     this.portals = portals;
   }
 
   /**
    * Registers the portal config.
    * @param {Object} [config={}] The portals config.
-   */
-  registerConfig(config = {}) {
+   */;
+  _proto.registerConfig = function registerConfig(config = {}) {
     this.config = config;
   }
 
   /**
    * Returns the portal config.
    * @return {Object}
-   */
-  getConfig() {
+   */;
+  _proto.getConfig = function getConfig() {
     return this.config;
-  }
-}
+  };
+  return PortalCollection;
+}();
 export default new PortalCollection();

package/helpers/redux/mutable.js

@@ -88,7 +88,7 @@ export const mutable = func => {
     if (steps.length > 0) {
       mutatedArgs = steps.reduce((acc, step, i, arr) => {
         // Call next step func in the pipeline with mutated args
-        let res = step(...acc);
+        let res = step.apply(void 0, acc);
 
         // Keep params unchanged if the step did not perform any change action at all
         if (!isObject(res)) {
@@ -132,7 +132,7 @@ export const mutable = func => {
     }
 
     // Call the actual mutable
-    return current(...mutatedArgs);
+    return current.apply(void 0, mutatedArgs);
   }
 
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/pwa-common",
-  "version": "7.30.0-alpha.9",
+  "version": "7.30.0-beta.2",
   "description": "Common library for the Shopgate Connect PWA.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@redux-devtools/extension": "^3.3.0",
     "@sentry/browser": "6.0.1",
-    "@shopgate/pwa-benchmark": "7.30.0-alpha.9",
+    "@shopgate/pwa-benchmark": "7.30.0-beta.2",
     "@virtuous/conductor": "~2.5.0",
     "@virtuous/react-conductor": "~2.5.0",
     "@virtuous/redux-persister": "1.1.0-beta.7",
@@ -41,11 +41,11 @@
     "url-search-params": "^0.10.0"
   },
   "devDependencies": {
-    "@shopgate/pwa-core": "7.30.0-alpha.9",
+    "@shopgate/pwa-core": "7.30.0-beta.2",
     "@types/react-portal": "^3.0.9",
     "lodash": "^4.17.21",
     "prop-types": "~15.8.1",
-    "react": "~16.14.0",
-    "react-dom": "~16.14.0"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   }
 }

package/providers/loading/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { UIEvents } from '@shopgate/pwa-core';
@@ -6,52 +7,30 @@ import LoadingContext from "./context";
 /**
  * The LoadingProvider component.
  */
-class LoadingProvider extends Component {
-  /**
-   * Adds or increases the loading counter for a path.
-   * @param {string} path The path which loads.
-   */
-  static setLoading(path) {
-    UIEvents.emit(LoadingProvider.SET, path);
-  }
-
-  /**
-   * Resets the loading counter for a path.
-   * @param {string} path The path which loads.
-   */
-  static resetLoading(path) {
-    UIEvents.emit(LoadingProvider.RESET, path);
-  }
-
-  /**
-   * Decreases the loading counter for a path.
-   * @param {string} path The path which loads.
-   */
-  static unsetLoading(path) {
-    UIEvents.emit(LoadingProvider.UNSET, path);
-  }
-
+import { jsx as _jsx } from "react/jsx-runtime";
+let LoadingProvider = /*#__PURE__*/function (_Component) {
   /**
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
+  function LoadingProvider(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Adds or increases the loading counter for a path.
      * @param {string} path The path which loads.
      */
-    this.setLoading = path => {
+    _this.setLoading = path => {
       const {
         loading
-      } = this;
+      } = _this;
       const newLoading = {
         ...loading,
         [path]: loading[path] ? loading[path] + 1 : 1
       };
 
       // Immediately updates state due to multiple sets before actual rerender.
-      this.loading = newLoading;
-      this.setState({
+      _this.loading = newLoading;
+      _this.setState({
         loading: newLoading
       });
     };
@@ -59,15 +38,15 @@ class LoadingProvider extends Component {
      * Resets the loading counter for a path.
      * @param {string} path The path which loads.
      */
-    this.resetLoading = path => {
+    _this.resetLoading = path => {
       const {
         [path]: removedPath,
         ...remaining
-      } = this.loading;
+      } = _this.loading;
 
       // Immediately updates state due to multiple sets before actual rerender.
-      this.loading = remaining;
-      this.setState({
+      _this.loading = remaining;
+      _this.setState({
         loading: remaining
       });
     };
@@ -75,15 +54,15 @@ class LoadingProvider extends Component {
      * Decreases the loading counter for a path.
      * @param {string} path The path which loads.
      */
-    this.unsetLoading = path => {
+    _this.unsetLoading = path => {
       const {
         loading
-      } = this;
+      } = _this;
       if (typeof loading[path] === 'undefined') {
         return;
       }
       if (loading[path] <= 1) {
-        this.resetLoading(path);
+        _this.resetLoading(path);
         return;
       }
       const newLoading = {
@@ -92,8 +71,8 @@ class LoadingProvider extends Component {
       };
 
       // Immediately updates state due to multiple sets before actual rerender.
-      this.loading = newLoading;
-      this.setState({
+      _this.loading = newLoading;
+      _this.setState({
         loading: newLoading
       });
     };
@@ -102,44 +81,79 @@ class LoadingProvider extends Component {
      * @param {string} path The path it inspect.
      * @return {boolean}
      */
-    this.isLoading = path => {
+    _this.isLoading = path => {
       const {
         loading
-      } = this.state;
+      } = _this.state;
       return !!loading[path];
     };
-    this.loading = {};
-    this.state = {
+    _this.loading = {};
+    _this.contextValue = null;
+    _this.state = {
       loading: {}
     };
-    UIEvents.addListener(this.constructor.SET, this.setLoading);
-    UIEvents.addListener(this.constructor.RESET, this.resetLoading);
-    UIEvents.addListener(this.constructor.UNSET, this.unsetLoading);
+    UIEvents.addListener(_this.constructor.SET, _this.setLoading);
+    UIEvents.addListener(_this.constructor.RESET, _this.resetLoading);
+    UIEvents.addListener(_this.constructor.UNSET, _this.unsetLoading);
+    return _this;
   }
 
   /**
    * Removes the event listeners when the component unmounts.
    */
-  componentWillUnmount() {
+  _inheritsLoose(LoadingProvider, _Component);
+  /**
+   * Adds or increases the loading counter for a path.
+   * @param {string} path The path which loads.
+   */
+  LoadingProvider.setLoading = function setLoading(path) {
+    UIEvents.emit(LoadingProvider.SET, path);
+  }
+
+  /**
+   * Resets the loading counter for a path.
+   * @param {string} path The path which loads.
+   */;
+  LoadingProvider.resetLoading = function resetLoading(path) {
+    UIEvents.emit(LoadingProvider.RESET, path);
+  }
+
+  /**
+   * Decreases the loading counter for a path.
+   * @param {string} path The path which loads.
+   */;
+  LoadingProvider.unsetLoading = function unsetLoading(path) {
+    UIEvents.emit(LoadingProvider.UNSET, path);
+  };
+  var _proto = LoadingProvider.prototype;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     UIEvents.removeListener(this.constructor.SET, this.setLoading);
     UIEvents.removeListener(this.constructor.RESET, this.resetLoading);
     UIEvents.removeListener(this.constructor.UNSET, this.unsetLoading);
-  }
+  };
   /**
    * @return {JSX}
    */
-  render() {
-    const value = {
-      loading: this.state.loading,
+  _proto.render = function render() {
+    const {
+      loading
+    } = this.state;
+    const nextValue = {
+      loading,
       setLoading: this.setLoading,
       unsetLoading: this.unsetLoading,
       isLoading: this.isLoading
     };
-    return /*#__PURE__*/React.createElement(LoadingContext.Provider, {
-      value: value
-    }, this.props.children);
-  }
-}
+    if (!this.contextValue || this.contextValue.loading !== loading) {
+      this.contextValue = nextValue;
+    }
+    return /*#__PURE__*/_jsx(LoadingContext.Provider, {
+      value: this.contextValue,
+      children: this.props.children
+    });
+  };
+  return LoadingProvider;
+}(Component);
 LoadingProvider.SET = 'loading_set';
 LoadingProvider.RESET = 'loading_reset';
 LoadingProvider.UNSET = 'loading_unset';

package/providers/toast/index.js

@@ -1,8 +1,11 @@
+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 { UIEvents } from '@shopgate/pwa-core';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import ToastContext from "./context";
+import { jsx as _jsx } from "react/jsx-runtime";
 const {
   variables: {
     toast: {
@@ -14,23 +17,24 @@ const {
 /**
  * The ToastProvider component
  */
-class ToastProvider extends Component {
+let ToastProvider = /*#__PURE__*/function (_Component) {
   /**
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
+  function ToastProvider(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Adds a new, unique, toast to the list.
      * @param {Object} toast The toast object to add.
      */
-    this.addToast = toast => {
+    _this.addToast = toast => {
       if (!toast.message) {
         return;
       }
       const {
         toasts
-      } = this.state;
+      } = _this.state;
 
       // Check if the toast id already is present.
       const found = toasts.find(({
@@ -54,56 +58,63 @@ class ToastProvider extends Component {
           duration: toast.duration || duration
         });
       }
-      this.setState({
+      _this.setState({
         toasts
       });
     };
     /**
      * Removes the first toast from the list.
      */
-    this.removeToast = () => {
+    _this.removeToast = () => {
       const {
         toasts
-      } = this.state;
+      } = _this.state;
       toasts.shift();
-      this.setState({
+      _this.setState({
         toasts
       });
     };
-    this.flushToasts = () => {
-      if (this.state.toasts.length) {
-        this.setState({
+    _this.flushToasts = () => {
+      if (_this.state.toasts.length) {
+        _this.setState({
           toasts: []
         });
       }
     };
-    this.state = {
+    _this.state = {
       toasts: []
     };
-    UIEvents.addListener(this.constructor.ADD, this.addToast);
-    UIEvents.addListener(this.constructor.FLUSH, this.flushToasts);
+    UIEvents.addListener(_this.constructor.ADD, _this.addToast);
+    UIEvents.addListener(_this.constructor.FLUSH, _this.flushToasts);
+    return _this;
   }
 
   /**
    * Returns the context value to be passed to consumers.
    * @returns {Object}
    */
-  get provided() {
-    return {
-      addToast: this.addToast,
-      removeToast: this.removeToast,
-      toasts: this.state.toasts
-    };
-  }
+  _inheritsLoose(ToastProvider, _Component);
+  var _proto = ToastProvider.prototype;
   /**
    * @returns {JSX}
    */
-  render() {
-    return /*#__PURE__*/React.createElement(ToastContext.Provider, {
-      value: this.provided
-    }, this.props.children);
-  }
-}
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsx(ToastContext.Provider, {
+      value: this.provided,
+      children: this.props.children
+    });
+  };
+  return _createClass(ToastProvider, [{
+    key: "provided",
+    get: function () {
+      return {
+        addToast: this.addToast,
+        removeToast: this.removeToast,
+        toasts: this.state.toasts
+      };
+    }
+  }]);
+}(Component);
 ToastProvider.ADD = 'toast_add';
 ToastProvider.FLUSH = 'toast_flush';
 export default ToastProvider;

package/reducers/modal/index.js

@@ -9,7 +9,7 @@ import { CREATE_MODAL, REMOVE_MODAL } from "../../constants/ActionTypes";
 export default function modalReducer(state = [], action) {
   switch (action.type) {
     case CREATE_MODAL:
-      return [...state, action.options];
+      return [].concat(state, [action.options]);
     case REMOVE_MODAL:
       return state.filter(modal => modal.id !== action.id);
     default:

package/store/index.js

@@ -46,7 +46,7 @@ export function configureStore(reducers, subscribers) {
   if (appConfig.benchmark) {
     benchmarkController.startup();
   }
-  const store = createStore(makeRootReducer(reducers), getInitialState(), composeWithDevTools(applyMiddleware(...[thunk, ...(appConfig.benchmark ? [benchmarkMiddleware] : []), streams, logger]), persistState({
+  const store = createStore(makeRootReducer(reducers), getInitialState(), composeWithDevTools(applyMiddleware.apply(void 0, [thunk].concat(appConfig.benchmark ? [benchmarkMiddleware] : [], [streams, logger])), persistState({
     key: storeKey,
     paths: persistedReducers.getAll()
   })));

package/subscriptions/helpers/buildRegisterUrl.js

@@ -15,6 +15,7 @@ const getRegisterUrl = (url, redirect = '') => {
   const redirectTo = redirect && !redirect.startsWith(CHECKOUT_PATH) ? redirect : INDEX_PATH;
 
   // Build the callback data.
+
   parsed.query.sgcloud_callback_data = JSON.stringify({
     redirectTo
   });