@shopgate/pwa-common 7.30.0-alpha.8 → 7.30.0-beta.1

package/components/Widgets/components/Widget/spec.js

@@ -2,8 +2,9 @@ import React from 'react';
 import { mount } from 'enzyme';
 import Grid from "../../../Grid";
 import Widget from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('react', () => ({
-  ...require.requireActual('react'),
+  ...jest.requireActual('react'),
   Suspense: function Suspense({
     children
   }) {
@@ -15,7 +16,7 @@ jest.mock('react', () => ({
  * A dummy component.
  * @returns {JSX}
  */
-const MyComponent = () => /*#__PURE__*/React.createElement("div", null);
+const MyComponent = () => /*#__PURE__*/_jsx("div", {});
 const widgets = {
   '@shopgate/commerce-widgets/image': MyComponent
 };
@@ -28,7 +29,7 @@ describe('<Widget />', () => {
       width: 12,
       height: 6
     };
-    const wrapper = mount(/*#__PURE__*/React.createElement(Widget, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Widget, {
       config: config,
       component: widgets[config.type]
     }));
@@ -43,7 +44,7 @@ describe('<Widget />', () => {
       width: 6,
       height: 6
     };
-    const wrapper = mount(/*#__PURE__*/React.createElement(Widget, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Widget, {
       config: config,
       component: widgets[config.type],
       cellSize: 100
@@ -60,7 +61,7 @@ describe('<Widget />', () => {
       width: 12,
       height: 6
     };
-    const wrapper = mount(/*#__PURE__*/React.createElement(Widget, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Widget, {
       config: config,
       component: widgets[config.type]
     }));

package/components/Widgets/components/WidgetGrid/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
@@ -9,12 +10,18 @@ import shouldShowWidget from "../../helpers/shouldShowWidget";
 /**
  * The WidgetGrid component.
  */
-class WidgetGrid extends Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let WidgetGrid = /*#__PURE__*/function (_Component) {
+  function WidgetGrid() {
+    return _Component.apply(this, arguments) || this;
+  }
+  _inheritsLoose(WidgetGrid, _Component);
+  var _proto = WidgetGrid.prototype;
   /**
    * @param {Object} nextProps The next component props.
    * @return {boolean}
    */
-  shouldComponentUpdate(nextProps) {
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
     if (!isEqual(this.props.components, nextProps.components)) return true;
     if (!isEqual(this.props.config, nextProps.config)) return true;
     return false;
@@ -23,8 +30,8 @@ class WidgetGrid extends Component {
   /**
    * Render the component.
    * @return {JSX}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     const {
       components,
       config
@@ -36,21 +43,22 @@ class WidgetGrid extends Component {
     // TODO: This should not happen within every render call.
     // Sort the widgets by row. This has to happen to take care of the z-index flow.
     const widgets = sortBy(config, ['row']).filter(w => shouldShowWidget(w.settings));
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${styles} common__widgets__widget-grid`
-    }, Object.keys(widgets).map(key => {
-      const widget = widgets[key];
-      const widgetKey = `w${key}`;
-      // Map to the correct widget component using the `type` key inside the widget.
-      const WidgetComponent = components[widget.type];
-      return /*#__PURE__*/React.createElement(Widget, {
-        config: widget,
-        component: WidgetComponent,
-        key: widgetKey
-      });
-    }));
-  }
-}
+    return /*#__PURE__*/_jsx("div", {
+      className: `${styles} common__widgets__widget-grid`,
+      children: Object.keys(widgets).map(key => {
+        const widget = widgets[key];
+        const widgetKey = `w${key}`;
+        // Map to the correct widget component using the `type` key inside the widget.
+        const WidgetComponent = components[widget.type];
+        return /*#__PURE__*/_jsx(Widget, {
+          config: widget,
+          component: WidgetComponent
+        }, widgetKey);
+      })
+    });
+  };
+  return WidgetGrid;
+}(Component);
 WidgetGrid.defaultProps = {
   config: []
 };

package/components/Widgets/components/WidgetGrid/spec.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import WidgetGrid from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('react', () => ({
-  ...require.requireActual('react'),
+  ...jest.requireActual('react'),
   Suspense: function Suspense({
     children
   }) {
@@ -14,7 +15,7 @@ jest.mock('react', () => ({
  * A mock Image component.
  * @returns {JSX}
  */
-const Image = () => /*#__PURE__*/React.createElement("div", null);
+const Image = () => /*#__PURE__*/_jsx("div", {});
 const components = {
   '@shopgate/commerce-widgets/image': Image
 };
@@ -31,7 +32,7 @@ describe('<WidgetGrid />', () => {
       },
       type: '@shopgate/commerce-widgets/image'
     }];
-    const wrapper = mount(/*#__PURE__*/React.createElement(WidgetGrid, {
+    const wrapper = mount(/*#__PURE__*/_jsx(WidgetGrid, {
       config: config,
       components: components
     }));
@@ -39,7 +40,7 @@ describe('<WidgetGrid />', () => {
     expect(wrapper.find(Image).length).toEqual(1);
   });
   it('should not render without a `config` prop', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(WidgetGrid, {
+    const wrapper = mount(/*#__PURE__*/_jsx(WidgetGrid, {
       components: components
     }));
     expect(wrapper).toMatchSnapshot();

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 = [{
@@ -137,11 +140,15 @@ describe('<Widgets />', () => {
     expect(wrapper.find('img').length).toBe(1);
   });
   it('should schedule a re-render when widget is scheduled', () => {
-    const minutesToNextFullHour = 60 - new Date().getMinutes();
-    const msToNextFullHour = minutesToNextFullHour * 60000;
+    // Use a fixed point in time so "next full hour" is deterministic.
+    // Pick a time that's not exactly on the hour.
+    const base = new Date('2023-01-01T10:37:00.000Z');
+    jest.setSystemTime(base);
+    const minutesToNextFullHour = 60 - base.getMinutes(); // 23
+    const msToNextFullHour = minutesToNextFullHour * 60000; // 23 * 60_000
+
     const scheduledFromMs = Date.now() + msToNextFullHour - 1;
     const scheduledToMs = Date.now() + minutesToNextFullHour + 1000;
-    /* eslint-disable camelcase */
     const widgets = [{
       col: 0,
       row: 0,
@@ -158,19 +165,26 @@ 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');
     instance.forceUpdate = jest.fn();
+
+    // Before the schedule hits, the image should not render yet.
     expect(wrapper.find(Image).exists()).toBe(false);
+
+    // 1) Advance to the next full hour -> first forced update.
     jest.advanceTimersByTime(msToNextFullHour);
     expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
-    // In real life next timeout should be in 60 minutes.
-    // This test has same Date and fake timers.
-    jest.advanceTimersByTime(msToNextFullHour);
+
+    // 2) The component should schedule the next tick for +60 min.
+    jest.advanceTimersByTime(60 * 60000);
     expect(instance.forceUpdate).toHaveBeenCalledTimes(2);
-    instance.componentWillUnmount();
-    expect(clearTimeout).toHaveBeenCalled();
+
+    // Unmount triggers cleanup of any pending timeouts.
+    wrapper.unmount();
+    expect(clearSpy).toHaveBeenCalled();
+    clearSpy.mockRestore();
   });
   it('should render only wrapper when widgets array is empty', () => {
     const widgets = [];

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.8",
+  "version": "7.30.0-beta.1",
   "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.8",
+    "@shopgate/pwa-benchmark": "7.30.0-beta.1",
     "@virtuous/conductor": "~2.5.0",
     "@virtuous/react-conductor": "~2.5.0",
     "@virtuous/redux-persister": "1.1.0-beta.7",
@@ -27,7 +27,6 @@
     "gsap": "^3.6.0",
     "history": "^4.9.0",
     "intl-messageformat": "^7.8.3",
-    "jsdom": "11.12.0",
     "path-match": "^1.2.4",
     "react-dotdotdot": "~1.3.0",
     "react-helmet": "^6.1.0",
@@ -42,11 +41,11 @@
     "url-search-params": "^0.10.0"
   },
   "devDependencies": {
-    "@shopgate/pwa-core": "7.30.0-alpha.8",
+    "@shopgate/pwa-core": "7.30.0-beta.1",
     "@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"
   }
 }