@shopgate/pwa-common 7.30.0-alpha.6 → 7.30.0-alpha.8

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

@@ -1,12 +1,57 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import isEqual from'lodash/isEqual';import PropTypes from'prop-types';import sortBy from'lodash/sortBy';import Widget from"../Widget";import styles from"./style";import shouldShowWidget from"../../helpers/shouldShowWidget";/**
+import React, { Component } from 'react';
+import isEqual from 'lodash/isEqual';
+import PropTypes from 'prop-types';
+import sortBy from 'lodash/sortBy';
+import Widget from "../Widget";
+import styles from "./style";
+import shouldShowWidget from "../../helpers/shouldShowWidget";
+
+/**
  * The WidgetGrid component.
- */var WidgetGrid=/*#__PURE__*/function(_Component){function WidgetGrid(){_classCallCheck(this,WidgetGrid);return _callSuper(this,WidgetGrid,arguments);}_inherits(WidgetGrid,_Component);return _createClass(WidgetGrid,[{key:"shouldComponentUpdate",value:/**
+ */
+class WidgetGrid extends Component {
+  /**
    * @param {Object} nextProps The next component props.
    * @return {boolean}
-   */function shouldComponentUpdate(nextProps){if(!isEqual(this.props.components,nextProps.components))return true;if(!isEqual(this.props.config,nextProps.config))return true;return false;}/**
+   */
+  shouldComponentUpdate(nextProps) {
+    if (!isEqual(this.props.components, nextProps.components)) return true;
+    if (!isEqual(this.props.config, nextProps.config)) return true;
+    return false;
+  }
+
+  /**
    * Render the component.
    * @return {JSX}
-   */},{key:"render",value:function render(){var _this$props=this.props,components=_this$props.components,config=_this$props.config;if(!config.length){return null;}// 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.
-var widgets=sortBy(config,['row']).filter(function(w){return shouldShowWidget(w.settings);});return React.createElement("div",{className:"".concat(styles," common__widgets__widget-grid")},Object.keys(widgets).map(function(key){var widget=widgets[key];var widgetKey="w".concat(key);// Map to the correct widget component using the `type` key inside the widget.
-var WidgetComponent=components[widget.type];return React.createElement(Widget,{config:widget,component:WidgetComponent,key:widgetKey});}));}}]);}(Component);_defineProperty(WidgetGrid,"defaultProps",{config:[]});export default WidgetGrid;
+   */
+  render() {
+    const {
+      components,
+      config
+    } = this.props;
+    if (!config.length) {
+      return null;
+    }
+
+    // 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
+      });
+    }));
+  }
+}
+WidgetGrid.defaultProps = {
+  config: []
+};
+export default WidgetGrid;

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

@@ -1,4 +1,48 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import{mount}from'enzyme';import WidgetGrid from"./index";jest.mock('react',function(){return _extends({},require.requireActual('react'),{Suspense:function Suspense(_ref){var children=_ref.children;return children;}});});/**
+import React from 'react';
+import { mount } from 'enzyme';
+import WidgetGrid from "./index";
+jest.mock('react', () => ({
+  ...require.requireActual('react'),
+  Suspense: function Suspense({
+    children
+  }) {
+    return children;
+  }
+}));
+
+/**
  * A mock Image component.
  * @returns {JSX}
- */var Image=function Image(){return React.createElement("div",null);};var components={'@shopgate/commerce-widgets/image':Image};describe('<WidgetGrid />',function(){it('should render with a config',function(){var config=[{col:0,row:0,width:12,height:3,settings:{id:83535,image:'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg'},type:'@shopgate/commerce-widgets/image'}];var wrapper=mount(React.createElement(WidgetGrid,{config:config,components:components}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Image).length).toEqual(1);});it('should not render without a `config` prop',function(){var wrapper=mount(React.createElement(WidgetGrid,{components:components}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Image).length).toEqual(0);});});
+ */
+const Image = () => /*#__PURE__*/React.createElement("div", null);
+const components = {
+  '@shopgate/commerce-widgets/image': Image
+};
+describe('<WidgetGrid />', () => {
+  it('should render with a config', () => {
+    const config = [{
+      col: 0,
+      row: 0,
+      width: 12,
+      height: 3,
+      settings: {
+        id: 83535,
+        image: 'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg'
+      },
+      type: '@shopgate/commerce-widgets/image'
+    }];
+    const wrapper = mount(/*#__PURE__*/React.createElement(WidgetGrid, {
+      config: config,
+      components: components
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(Image).length).toEqual(1);
+  });
+  it('should not render without a `config` prop', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(WidgetGrid, {
+      components: components
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(Image).length).toEqual(0);
+  });
+});

package/components/Widgets/components/WidgetGrid/style.js

@@ -1 +1,8 @@
-import{css}from'glamor';export default css({display:'grid',gridTemplateColumns:'repeat(12, 1fr)',gridAutoRows:'auto',gridAutoFlow:'row dense',position:'relative'});
+import { css } from 'glamor';
+export default css({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(12, 1fr)',
+  gridAutoRows: 'auto',
+  gridAutoFlow: 'row dense',
+  position: 'relative'
+});

package/components/Widgets/helpers/shouldShowWidget.js

@@ -2,10 +2,47 @@
  * Checks widget setting and decides if widget should be shown at the moment.
  * @param {Object} settings Widget setting object.
  * @returns {boolean}
- */function shouldShowWidget(){var settings=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var nowDate=new Date();// Show widget if flag does not exist (old widgets)
-if(!settings.hasOwnProperty('published')){return true;}if(settings.published===false){return false;}// Defensive here since this data comes from the pipeline, it might be invalid for some reasons.
-if(settings.hasOwnProperty('plan')&&settings.plan){var startDate=null;var endDate=null;var notStartedYet=false;var finishedAlready=false;if(settings.planDate.valid_from){startDate=new Date(settings.planDate.valid_from);notStartedYet=nowDate<=startDate;}if(settings.planDate.valid_to){endDate=new Date(settings.planDate.valid_to);finishedAlready=nowDate>=endDate;}// Don't hide if no dates found
-if(!startDate&&!endDate){return true;}// Hide if some wrong dates are passed
-if(startDate&&endDate&&startDate>=endDate){return false;}// Hide if start date is set but it is not there yet
-// Hide if end date is reached
-if(startDate&&notStartedYet||endDate&&finishedAlready){return false;}}return true;}export default shouldShowWidget;
+ */
+function shouldShowWidget(settings = {}) {
+  const nowDate = new Date();
+  // Show widget if flag does not exist (old widgets)
+  if (!settings.hasOwnProperty('published')) {
+    return true;
+  }
+  if (settings.published === false) {
+    return false;
+  }
+
+  // Defensive here since this data comes from the pipeline, it might be invalid for some reasons.
+  if (settings.hasOwnProperty('plan') && settings.plan) {
+    let startDate = null;
+    let endDate = null;
+    let notStartedYet = false;
+    let finishedAlready = false;
+    if (settings.planDate.valid_from) {
+      startDate = new Date(settings.planDate.valid_from);
+      notStartedYet = nowDate <= startDate;
+    }
+    if (settings.planDate.valid_to) {
+      endDate = new Date(settings.planDate.valid_to);
+      finishedAlready = nowDate >= endDate;
+    }
+    // Don't hide if no dates found
+    if (!startDate && !endDate) {
+      return true;
+    }
+
+    // Hide if some wrong dates are passed
+    if (startDate && endDate && startDate >= endDate) {
+      return false;
+    }
+
+    // Hide if start date is set but it is not there yet
+    // Hide if end date is reached
+    if (startDate && notStartedYet || endDate && finishedAlready) {
+      return false;
+    }
+  }
+  return true;
+}
+export default shouldShowWidget;

package/components/Widgets/index.js

@@ -1,36 +1,148 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}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";var WIDGET_GRID_TYPE='@shopgate/commerce-widgets/widget-grid';var GRID_COLUMNS=12;// One grid row has 12 columns. // TODO: is it deprecated since css grid?
+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";
+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?
+
 /**
  * Creates a grid wrapper for widget(s).
  * @param {string} key The unique key.
  * @param {Array} config Array of widgets to be placed in the grid.
  * @param {Array} components The component definitions for the widgets.
  * @returns {JSX} The wrapper.
- */var createGridWrapper=function createGridWrapper(key,config,components){return React.createElement(WidgetGrid,{key:key,config:config,components:components});};/**
+ */
+const createGridWrapper = (key, config, components) => (/*#__PURE__*/React.createElement(WidgetGrid, {
+  key,
+  config,
+  components
+}));
+
+/**
  * The widgets component.
- */var Widgets=/*#__PURE__*/function(_Component){/**
+ */
+class Widgets extends Component {
+  /**
    * @param {Object} props The component props.
-   */function Widgets(props){var _this2;_classCallCheck(this,Widgets);_this2=_callSuper(this,Widgets,[props]);_this2.autoReloadInterval=undefined;if(_this2.hasSchedulableWidgets()){_this2.startAutoRerender();}return _this2;}/**
+   */
+  constructor(props) {
+    super(props);
+    this.autoReloadInterval = undefined;
+    if (this.hasSchedulableWidgets()) {
+      this.startAutoRerender();
+    }
+  }
+
+  /**
    * @param {Object} nextProps The next component props.
    * @return {JSX}
-   */_inherits(Widgets,_Component);return _createClass(Widgets,[{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps){if(!isEqual(this.props.themeWidgets,nextProps.themeWidgets)){return true;}if(!isEqual(this.props.widgets,nextProps.widgets)){return true;}return false;}/**
+   */
+  shouldComponentUpdate(nextProps) {
+    if (!isEqual(this.props.themeWidgets, nextProps.themeWidgets)) {
+      return true;
+    }
+    if (!isEqual(this.props.widgets, nextProps.widgets)) {
+      return true;
+    }
+    return false;
+  }
+
+  /**
    * Component will unmount lifecycle method.
-   */},{key:"componentWillUnmount",value:function componentWillUnmount(){this.stopAutoRerender();}/**
+   */
+  componentWillUnmount() {
+    this.stopAutoRerender();
+  }
+
+  /**
    * Checks if any widget is schedulable.
    * @param {Array} widgets Array of widgets.
    * @returns {boolean}
-   */},{key:"hasSchedulableWidgets",value:function hasSchedulableWidgets(){return(this.props.widgets||[]).some(function(widget){return widget.settings.plan;});}/**
+   */
+  hasSchedulableWidgets() {
+    return (this.props.widgets || []).some(widget => widget.settings.plan);
+  }
+
+  /**
    * Sets auto re-render.
-   */},{key:"startAutoRerender",value:function startAutoRerender(){var _this3=this;var minutesToRoundedHour=60-new Date().getMinutes();var nextRerenderIn=minutesToRoundedHour*60000;this.autoReloadTimeout=setTimeout(function(){return _this3.doAutoRerender();},nextRerenderIn);}/**
+   */
+  startAutoRerender() {
+    const minutesToRoundedHour = 60 - new Date().getMinutes();
+    const nextRerenderIn = minutesToRoundedHour * 60000;
+    this.autoReloadTimeout = setTimeout(() => this.doAutoRerender(), nextRerenderIn);
+  }
+
+  /**
    * Stops auto re-render. Must be called before component is unmounted to avoid
    * memory leak.
-   */},{key:"stopAutoRerender",value:function stopAutoRerender(){clearTimeout(this.autoReloadTimeout);}/**
+   */
+  stopAutoRerender() {
+    clearTimeout(this.autoReloadTimeout);
+  }
+
+  /**
    * Forces re-render and sets another timeout for next cycle.
-   */},{key:"doAutoRerender",value:function doAutoRerender(){this.forceUpdate();this.startAutoRerender();}/**
+   */
+  doAutoRerender() {
+    this.forceUpdate();
+    this.startAutoRerender();
+  }
+
+  /**
    * Create array of elements from widget configuration.
    * @returns {Array} Array of JSX elements.
-   */},{key:"createArrayOfElements",value:function createArrayOfElements(){var _this$props=this.props,_this$props$widgets=_this$props.widgets,widgets=_this$props$widgets===void 0?[]:_this$props$widgets,components=_this$props.themeWidgets;return widgets.filter(function(widget){return shouldShowWidget(widget.settings);}).map(function(widget,index){if(!components[widget.type]&&widget.type!==WIDGET_GRID_TYPE){return null;}var key="w".concat((widget===null||widget===void 0?void 0:widget.id)||index);if(widget.type===WIDGET_GRID_TYPE){// If it's a grid just create it and pass the child widgets.
-return createGridWrapper(key,widget.settings.widgets,components);}if(widget.height){// If it has a definite height wrap the widget in a grid.
-return createGridWrapper(key,[_extends({},widget,{col:0,row:0,width:GRID_COLUMNS})],components);}// In all other cases just create and return the widget component.
-return React.createElement(components[widget.type],_extends({},widget,{key:key}));});}/**
+   */
+  createArrayOfElements() {
+    const {
+      widgets = [],
+      themeWidgets: components
+    } = this.props;
+    return widgets.filter(widget => shouldShowWidget(widget.settings)).map((widget, index) => {
+      if (!components[widget.type] && widget.type !== WIDGET_GRID_TYPE) {
+        return null;
+      }
+      const key = `w${widget?.id || index}`;
+      if (widget.type === WIDGET_GRID_TYPE) {
+        // If it's a grid just create it and pass the child widgets.
+        return createGridWrapper(key, widget.settings.widgets, components);
+      }
+      if (widget.height) {
+        // If it has a definite height wrap the widget in a grid.
+        return createGridWrapper(key, [{
+          ...widget,
+          col: 0,
+          row: 0,
+          width: GRID_COLUMNS
+        }], components);
+      }
+
+      // In all other cases just create and return the widget component.
+      return /*#__PURE__*/React.createElement(components[widget.type], {
+        ...widget,
+        key
+      });
+    });
+  }
+
+  /**
    * @return {JSX}
-   */},{key:"render",value:function render(){var _this$props2=this.props,widgets=_this$props2.widgets,components=_this$props2.themeWidgets;if(!widgets){return null;}return React.createElement("div",{className:"common__widgets"},this.createArrayOfElements(widgets,components));}}]);}(Component);_defineProperty(Widgets,"defaultProps",{widgets:null});export default withThemeWidgets(Widgets);
+   */
+  render() {
+    const {
+      widgets,
+      themeWidgets: components
+    } = this.props;
+    if (!widgets) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: "common__widgets"
+    }, this.createArrayOfElements(widgets, components));
+  }
+}
+Widgets.defaultProps = {
+  widgets: null
+};
+export default withThemeWidgets(Widgets);

package/components/Widgets/spec.js

@@ -1,13 +1,220 @@
-import React from'react';import{mount}from'enzyme';import{ThemeResourcesProvider}from'@shopgate/engage/core/providers';import Widgets from"./index";jest.useFakeTimers();jest.mock('@shopgate/pwa-common/context',function(){return{ThemeContext:{Provider:function Provider(_ref){var children=_ref.children;return children;}}};});/**
+import React from 'react';
+import { mount } from 'enzyme';
+import { ThemeResourcesProvider } from '@shopgate/engage/core/providers';
+import Widgets from "./index";
+jest.useFakeTimers();
+jest.mock('@shopgate/pwa-common/context', () => ({
+  ThemeContext: {
+    Provider: ({
+      children
+    }) => children
+  }
+}));
+
+/**
  * A mock Image component.
  * @returns {JSX}
- */var Image=function Image(){return React.createElement("img",{alt:""});};/* eslint-disable react/prop-types */ /**
+ */
+const Image = () => /*#__PURE__*/React.createElement("img", {
+  alt: ""
+});
+/* eslint-disable react/prop-types */
+/**
  * A mock WidgetGrid component.
  * @param {Array} children Array of children.
  * @returns {JSX}
- */var WidgetGrid=function WidgetGrid(_ref2){var children=_ref2.children;return React.createElement("div",{className:"widget-grid"},children);};/* eslint-enable react/prop-types */var components={v1:{'@shopgate/commerce-widgets/image':Image,'@shopgate/commerce-widgets/widget-grid':WidgetGrid}};/**
+ */
+const WidgetGrid = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: "widget-grid"
+}, children);
+/* eslint-enable react/prop-types */
+
+const components = {
+  v1: {
+    '@shopgate/commerce-widgets/image': Image,
+    '@shopgate/commerce-widgets/widget-grid': WidgetGrid
+  }
+};
+
+/**
  * @param {Object[]} widgets Widgets to be rendered.
  * @returns {JSX.Element}
- */var createWrapper=function createWrapper(widgets){return mount(React.createElement(ThemeResourcesProvider,{widgets:components,components:{}},React.createElement(Widgets,{widgets:widgets})));};describe('<Widgets />',function(){it('should render a grid if height is defined',function(){var widgets=[{col:0,row:0,width:12,height:3,settings:{id:83535,image:'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg'},type:'@shopgate/commerce-widgets/image'}];var wrapper=createWrapper(widgets);expect(wrapper.find('WidgetGrid').exists()).toBe(true);});it('should not wrap a widget which is not a grid and has no height',function(){var widgets=[{col:0,row:0,width:12,settings:{id:83535,image:'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg'},type:'@shopgate/commerce-widgets/image'}];var wrapper=createWrapper(widgets);expect(wrapper).toMatchSnapshot();expect(wrapper.find('WidgetGrid').exists()).toBe(false);});it('should render a grid if the widget is of type grid',function(){var widgets=[{type:'@shopgate/commerce-widgets/widget-grid',settings:{widgets:[{col:0,row:0,width:12,height:5,settings:{id:'84961',alt:'',image:'https://data.shopgate.com/shop_widget_images/23836/aedc545959f55e3f73851eca0ed40a75.min.jpeg',link:'/category/'},type:'@shopgate/commerce-widgets/image'}]}}];var wrapper=createWrapper(widgets);expect(wrapper).toMatchSnapshot();expect(wrapper.find('WidgetGrid').exists()).toBe(true);});it('should render only one widget when the second one is not published and third one is invalid',function(){var widgets=[{col:0,row:0,width:12,settings:{id:835351,image:'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg'},type:'@shopgate/commerce-widgets/image'},{col:0,row:0,width:12,settings:{id:835352,image:'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg'},type:'@shopgate/commerce-widgets/imagefoo'},{col:0,row:0,width:12,settings:{published:false,id:835353,image:'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg'},type:'@shopgate/commerce-widgets/image'}];var wrapper=createWrapper(widgets);expect(wrapper).toMatchSnapshot();expect(wrapper.find('img').length).toBe(1);});it('should schedule a re-render when widget is scheduled',function(){var minutesToNextFullHour=60-new Date().getMinutes();var msToNextFullHour=minutesToNextFullHour*60000;var scheduledFromMs=Date.now()+msToNextFullHour-1;var scheduledToMs=Date.now()+minutesToNextFullHour+1000;/* eslint-disable camelcase */var widgets=[{col:0,row:0,width:12,settings:{id:835351,image:'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg',published:true,plan:true,planDate:{valid_from:new Date(scheduledFromMs).toISOString(),valid_to:new Date(scheduledToMs).toISOString()}},type:'@shopgate/commerce-widgets/image'}];/* eslint-enable camelcase */var wrapper=createWrapper(widgets);var instance=wrapper.find('Widgets').instance();instance.forceUpdate=jest.fn();expect(wrapper.find(Image).exists()).toBe(false);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);expect(instance.forceUpdate).toHaveBeenCalledTimes(2);instance.componentWillUnmount();expect(clearTimeout).toHaveBeenCalled();});it('should render only wrapper when widgets array is empty',function(){var widgets=[];var wrapper=createWrapper(widgets);expect(wrapper.find('Image').exists()).toBe(false);});it('should render null when no widgets are passed',function(){var wrapper=createWrapper(undefined);expect(wrapper.find('Widgets').html()).toBe(null);});it('should check settings of child widgets inside widget-grid',function(){var widgets=[{height:2,id:'index-5-@shopgate/commerce-widgets/widget-grid',type:'@shopgate/commerce-widgets/widget-grid',settings:{widgets:[{col:0,row:0,height:2,width:2,settings:{id:835351,image:'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg',published:true,plan:false},type:'@shopgate/commerce-widgets/image'},{col:2,row:0,height:2,width:2,settings:{id:835352,image:'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg',published:false,plan:false},type:'@shopgate/commerce-widgets/image'}]}}];var wrapper=createWrapper(widgets);expect(wrapper.find('img').length).toBe(1);});});
+ */
+const createWrapper = widgets => mount(/*#__PURE__*/React.createElement(ThemeResourcesProvider, {
+  widgets: components,
+  components: {}
+}, /*#__PURE__*/React.createElement(Widgets, {
+  widgets: widgets
+})));
+describe('<Widgets />', () => {
+  it('should render a grid if height is defined', () => {
+    const widgets = [{
+      col: 0,
+      row: 0,
+      width: 12,
+      height: 3,
+      settings: {
+        id: 83535,
+        image: 'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg'
+      },
+      type: '@shopgate/commerce-widgets/image'
+    }];
+    const wrapper = createWrapper(widgets);
+    expect(wrapper.find('WidgetGrid').exists()).toBe(true);
+  });
+  it('should not wrap a widget which is not a grid and has no height', () => {
+    const widgets = [{
+      col: 0,
+      row: 0,
+      width: 12,
+      settings: {
+        id: 83535,
+        image: 'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg'
+      },
+      type: '@shopgate/commerce-widgets/image'
+    }];
+    const wrapper = createWrapper(widgets);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('WidgetGrid').exists()).toBe(false);
+  });
+  it('should render a grid if the widget is of type grid', () => {
+    const widgets = [{
+      type: '@shopgate/commerce-widgets/widget-grid',
+      settings: {
+        widgets: [{
+          col: 0,
+          row: 0,
+          width: 12,
+          height: 5,
+          settings: {
+            id: '84961',
+            alt: '',
+            image: 'https://data.shopgate.com/shop_widget_images/23836/aedc545959f55e3f73851eca0ed40a75.min.jpeg',
+            link: '/category/'
+          },
+          type: '@shopgate/commerce-widgets/image'
+        }]
+      }
+    }];
+    const wrapper = createWrapper(widgets);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('WidgetGrid').exists()).toBe(true);
+  });
+  it('should render only one widget when the second one is not published and third one is invalid', () => {
+    const widgets = [{
+      col: 0,
+      row: 0,
+      width: 12,
+      settings: {
+        id: 835351,
+        image: 'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg'
+      },
+      type: '@shopgate/commerce-widgets/image'
+    }, {
+      col: 0,
+      row: 0,
+      width: 12,
+      settings: {
+        id: 835352,
+        image: 'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg'
+      },
+      type: '@shopgate/commerce-widgets/imagefoo'
+    }, {
+      col: 0,
+      row: 0,
+      width: 12,
+      settings: {
+        published: false,
+        id: 835353,
+        image: 'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg'
+      },
+      type: '@shopgate/commerce-widgets/image'
+    }];
+    const wrapper = createWrapper(widgets);
+    expect(wrapper).toMatchSnapshot();
+    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;
+    const scheduledFromMs = Date.now() + msToNextFullHour - 1;
+    const scheduledToMs = Date.now() + minutesToNextFullHour + 1000;
+    /* eslint-disable camelcase */
+    const widgets = [{
+      col: 0,
+      row: 0,
+      width: 12,
+      settings: {
+        id: 835351,
+        image: 'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg',
+        published: true,
+        plan: true,
+        planDate: {
+          valid_from: new Date(scheduledFromMs).toISOString(),
+          valid_to: new Date(scheduledToMs).toISOString()
+        }
+      },
+      type: '@shopgate/commerce-widgets/image'
+    }];
+    /* eslint-enable camelcase */
+    const wrapper = createWrapper(widgets);
+    const instance = wrapper.find('Widgets').instance();
+    instance.forceUpdate = jest.fn();
+    expect(wrapper.find(Image).exists()).toBe(false);
+    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);
+    expect(instance.forceUpdate).toHaveBeenCalledTimes(2);
+    instance.componentWillUnmount();
+    expect(clearTimeout).toHaveBeenCalled();
+  });
+  it('should render only wrapper when widgets array is empty', () => {
+    const widgets = [];
+    const wrapper = createWrapper(widgets);
+    expect(wrapper.find('Image').exists()).toBe(false);
+  });
+  it('should render null when no widgets are passed', () => {
+    const wrapper = createWrapper(undefined);
+    expect(wrapper.find('Widgets').html()).toBe(null);
+  });
+  it('should check settings of child widgets inside widget-grid', () => {
+    const widgets = [{
+      height: 2,
+      id: 'index-5-@shopgate/commerce-widgets/widget-grid',
+      type: '@shopgate/commerce-widgets/widget-grid',
+      settings: {
+        widgets: [{
+          col: 0,
+          row: 0,
+          height: 2,
+          width: 2,
+          settings: {
+            id: 835351,
+            image: 'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg',
+            published: true,
+            plan: false
+          },
+          type: '@shopgate/commerce-widgets/image'
+        }, {
+          col: 2,
+          row: 0,
+          height: 2,
+          width: 2,
+          settings: {
+            id: 835352,
+            image: 'https://data.shopgate.com/shop_widget_images/23836/92204c0f264ac30d6836994c2fb64eb1.min.jpeg',
+            published: false,
+            plan: false
+          },
+          type: '@shopgate/commerce-widgets/image'
+        }]
+      }
+    }];
+    const wrapper = createWrapper(widgets);
+    expect(wrapper.find('img').length).toBe(1);
+  });
+});

package/components/index.js

@@ -1 +1,9 @@
-export{default as Ellipsis}from"./Ellipsis";export{default as Router}from"./Router";export{default as Image}from"./Image";export{default as Link}from"./Link";export{default as Route}from"./Route";export{default as Portal}from"./Portal";export{default as Slider}from"./Slider";export{default as Swiper}from"./Swiper";export{default as SurroundPortals}from"./SurroundPortals";
+export { default as Ellipsis } from "./Ellipsis";
+export { default as Router } from "./Router";
+export { default as Image } from "./Image";
+export { default as Link } from "./Link";
+export { default as Route } from "./Route";
+export { default as Portal } from "./Portal";
+export { default as Slider } from "./Slider";
+export { default as Swiper } from "./Swiper";
+export { default as SurroundPortals } from "./SurroundPortals";