@shopgate/pwa-ui-shared 7.30.0-alpha.6 → 7.30.0-alpha.8

package/ContextMenu/style.js

@@ -1 +1,45 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var container=css({position:'relative'}).toString();var button=css({display:'block',fontSize:'1.5rem',outline:0,padding:0,color:'inherit'}).toString();var disabled=css({cursor:'not-allowed'}).toString();var overlay=css({position:'fixed',top:0,right:0,bottom:0,left:0,zIndex:10}).toString();var menu=css({position:'absolute',top:0,left:0,padding:"".concat(themeConfig.variables.gap.small,"px 0"),minWidth:130,background:themeConfig.colors.light,borderRadius:2,boxShadow:themeConfig.shadows.contextMenu}).toString();var scrollable=css({maxHeight:'30vh',overflowY:'auto'}).toString();export default{container:container,button:button,menu:menu,overlay:overlay,disabled:disabled,scrollable:scrollable};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const container = css({
+  position: 'relative'
+}).toString();
+const button = css({
+  display: 'block',
+  fontSize: '1.5rem',
+  outline: 0,
+  padding: 0,
+  color: 'inherit'
+}).toString();
+const disabled = css({
+  cursor: 'not-allowed'
+}).toString();
+const overlay = css({
+  position: 'fixed',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  zIndex: 10
+}).toString();
+const menu = css({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  padding: `${themeConfig.variables.gap.small}px 0`,
+  minWidth: 130,
+  background: themeConfig.colors.light,
+  borderRadius: 2,
+  boxShadow: themeConfig.shadows.contextMenu
+}).toString();
+const scrollable = css({
+  maxHeight: '30vh',
+  overflowY: 'auto'
+}).toString();
+export default {
+  container,
+  button,
+  menu,
+  overlay,
+  disabled,
+  scrollable
+};

package/Dialog/components/BasicDialog/index.js

@@ -1,2 +1,6 @@
 // TODO: Move to ThemeContext
-import BaseDialogGMD from'@shopgate/pwa-ui-material/BaseDialog';import BaseDialogIOS from'@shopgate/pwa-ui-ios/BaseDialog';import{themeName}from'@shopgate/pwa-common/helpers/config';var isIos=themeName.includes('ios');export default isIos?BaseDialogIOS:BaseDialogGMD;
+import BaseDialogGMD from '@shopgate/pwa-ui-material/BaseDialog';
+import BaseDialogIOS from '@shopgate/pwa-ui-ios/BaseDialog';
+import { themeName } from '@shopgate/pwa-common/helpers/config';
+const isIos = themeName.includes('ios');
+export default isIos ? BaseDialogIOS : BaseDialogGMD;

package/Dialog/components/HtmlContentDialog/index.js

@@ -1,6 +1,26 @@
-import React from'react';import PropTypes from'prop-types';import BasicDialog from"../BasicDialog";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import BasicDialog from "../BasicDialog";
+
+/**
  * Renders a simple dialog with a title and html content as a message.
  * This is the default dialog if no type has been specified.
  * @param {Object} props The component properties.
  * @returns {JSX.Element} The rendered component.
- */var HtmlContentDialog=function HtmlContentDialog(_ref){var actions=_ref.actions,message=_ref.message,title=_ref.title;return React.createElement(BasicDialog,{title:title,actions:actions},React.createElement("div",{dangerouslySetInnerHTML:{__html:message}}));};HtmlContentDialog.defaultProps={title:BasicDialog.defaultProps.title};export default HtmlContentDialog;
+ */
+const HtmlContentDialog = ({
+  actions,
+  message,
+  title
+}) => /*#__PURE__*/React.createElement(BasicDialog, {
+  title: title,
+  actions: actions
+}, /*#__PURE__*/React.createElement("div", {
+  dangerouslySetInnerHTML: {
+    __html: message
+  }
+}));
+HtmlContentDialog.defaultProps = {
+  title: BasicDialog.defaultProps.title
+};
+export default HtmlContentDialog;

package/Dialog/components/HtmlContentDialog/spec.js

@@ -1 +1,59 @@
-import React from'react';import{shallow}from'enzyme';import HtmlContentDialog from"./index";var message='<p><i>This is a html message.</i></p>';var title='This is the title.';jest.mock('@shopgate/engage/a11y/components');describe('<HtmlContentDialog />',function(){it('should render with minimal props',function(){var wrapper=shallow(React.createElement(HtmlContentDialog,{message:message,actions:[]}));expect(wrapper).toMatchSnapshot();expect(wrapper.html()).toMatch(message);});it('should render with title and html message',function(){var wrapper=shallow(React.createElement(HtmlContentDialog,{title:title,message:message,actions:[]}));expect(wrapper).toMatchSnapshot();expect(wrapper.html()).toMatch(title);});it('should render with title, html message and messageParams',function(){var wrapper=shallow(React.createElement(HtmlContentDialog,{title:title,message:"Message with {name}",params:{name:'Placeholder'},actions:[]}));expect(wrapper).toMatchSnapshot();});it('should render the actions',function(){var actions=[{label:'fooAction',action:function action(){}}];var wrapper=shallow(React.createElement(HtmlContentDialog,{title:title,message:message,actions:actions}));expect(wrapper).toMatchSnapshot();expect(wrapper.html()).toMatch(actions[0].label);});it('should pass title through',function(){var customTitle=React.createElement("div",null,"Title");var wrapper=shallow(React.createElement(HtmlContentDialog,{title:customTitle,message:message,params:{},actions:[]}));expect(wrapper.find('BasicDialog').prop('title')).toEqual(customTitle);});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import HtmlContentDialog from "./index";
+const message = '<p><i>This is a html message.</i></p>';
+const title = 'This is the title.';
+jest.mock('@shopgate/engage/a11y/components');
+describe('<HtmlContentDialog />', () => {
+  it('should render with minimal props', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(HtmlContentDialog, {
+      message: message,
+      actions: []
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.html()).toMatch(message);
+  });
+  it('should render with title and html message', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(HtmlContentDialog, {
+      title: title,
+      message: message,
+      actions: []
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.html()).toMatch(title);
+  });
+  it('should render with title, html message and messageParams', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(HtmlContentDialog, {
+      title: title,
+      message: "Message with {name}",
+      params: {
+        name: 'Placeholder'
+      },
+      actions: []
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render the actions', () => {
+    const actions = [{
+      label: 'fooAction',
+      action: () => {}
+    }];
+    const wrapper = shallow(/*#__PURE__*/React.createElement(HtmlContentDialog, {
+      title: title,
+      message: message,
+      actions: actions
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.html()).toMatch(actions[0].label);
+  });
+  it('should pass title through', () => {
+    const customTitle = /*#__PURE__*/React.createElement("div", null, "Title");
+    const wrapper = shallow(/*#__PURE__*/React.createElement(HtmlContentDialog, {
+      title: customTitle,
+      message: message,
+      params: {},
+      actions: []
+    }));
+    expect(wrapper.find('BasicDialog').prop('title')).toEqual(customTitle);
+  });
+});

package/Dialog/components/PipelineErrorDialog/index.js

@@ -1,36 +1,125 @@
-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 PropTypes from'prop-types';import I18n from'@shopgate/pwa-common/components/I18n';import BasicDialog from"../BasicDialog";/**
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import I18n from '@shopgate/pwa-common/components/I18n';
+import BasicDialog from "../BasicDialog";
+
+/**
  * The number of taps required until the dialog switches to/from developer mode.
- */var requiredTapsToSwitchModes=10;/**
+ */
+const requiredTapsToSwitchModes = 10;
+
+/**
  * The timeout between repeated tapping on the message (in ms).
- */var switchModeTapTimeout=4000/requiredTapsToSwitchModes;/**
+ */
+const switchModeTapTimeout = 4000 / requiredTapsToSwitchModes;
+
+/**
  * This component displays a pipeline error dialog.
  * The special behaviour of this message is that the user may tap the message body
  * ten times until it reveals additional information about the error that occurred.
- */var PipelineErrorDialog=/*#__PURE__*/function(_Component){/**
+ */
+class PipelineErrorDialog extends Component {
+  /**
    * Creates the component.
    * @param {Object} props The component props.
-   */function PipelineErrorDialog(props){var _this2;_classCallCheck(this,PipelineErrorDialog);_this2=_callSuper(this,PipelineErrorDialog,[props]);/**
-   * Clears the tap counter once the
-   */_defineProperty(_this2,"handleTapTimeout",function(){_this2.tapCounter=0;});/**
-   * User tapped the message, increase the tap counter and switch view modes if required.
-   */_defineProperty(_this2,"handleClick",function(){_this2.tapCounter+=1;if(_this2.tapTimeout){// Clear the timeout.
-clearTimeout(_this2.tapTimeout);}if(_this2.tapCounter>=requiredTapsToSwitchModes){// Switch modes and reset the tap counter.
-_this2.tapCounter=0;_this2.setState(function(_ref){var devMode=_ref.devMode;return{devMode:!devMode};});}else{_this2.tapTimeout=setTimeout(_this2.handleTapTimeout,switchModeTapTimeout);}});/**
-   * Renders the error message in developer mode.
-   * @returns {JSX}
-   */_defineProperty(_this2,"renderDevErrorMessage",function(){/**
-     * Checks the input to be truthy, "0" or "false" and enables it to be rendered then.
-     * @param {Object|string|number|boolean} value The value to be checked if it should be rendered.
-     * @returns {boolean}
-     */var checkValue=function checkValue(value){return!!value||value===0||value===false;};var params=_this2.props.params;return React.createElement("div",{"aria-hidden":true},React.createElement("span",null,React.createElement("strong",null,"Pipeline:"),React.createElement("span",null," ".concat(params.pipeline)),React.createElement("br",null)),checkValue(params.entityId)&&React.createElement("span",null,React.createElement("strong",null,"Entity id:"),React.createElement("span",null," ".concat(params.entityId)),React.createElement("br",null)),checkValue(params.code)&&React.createElement("span",null,React.createElement("strong",null,"Code:"),React.createElement("span",null," ".concat(params.code)),React.createElement("br",null)),React.createElement("span",null,React.createElement("strong",null,"Message:"),React.createElement("span",null," ".concat(params.message)),React.createElement("br",null)),checkValue(params.translated)&&React.createElement("span",null,React.createElement("strong",null,"Message Translated:"),React.createElement("span",null," ".concat(params.translated.toString())),React.createElement("br",null)),checkValue(params.messageParams)&&React.createElement("p",null,React.createElement("strong",null,"Message Params:"),React.createElement("br",null),React.createElement("span",null,JSON.stringify(params.messageParams,null,' ')),React.createElement("br",null)),checkValue(params.request)&&React.createElement("p",null,React.createElement("strong",null,"Request Params:"),React.createElement("br",null),React.createElement("span",null,JSON.stringify(params.request,null,' ')),React.createElement("br",null)));});/**
-   * Renders the regular error message in user mode.
-   * @returns {JSX}
-   */_defineProperty(_this2,"renderUserErrorMessage",function(){var _this2$props=_this2.props,_this2$props$message=_this2$props.message,message=_this2$props$message===void 0?'':_this2$props$message,_this2$props$params=_this2$props.params,params=_this2$props$params===void 0?{}:_this2$props$params;return React.createElement(React.Fragment,null,!!params.translated&&(message||params.message||React.createElement(I18n.Text,{string:"modal.body_error"})),!params.translated&&React.createElement(I18n.Text,{string:message||params.message||'modal.body_error',params:params.messageParams||{}}));});_this2.tapTimeout=null;_this2.tapCounter=0;_this2.state={devMode:false// Indicating whether we are in dev mode.
-};return _this2;}/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * Clears the tap counter once the
+     */
+    this.handleTapTimeout = () => {
+      this.tapCounter = 0;
+    };
+    /**
+     * User tapped the message, increase the tap counter and switch view modes if required.
+     */
+    this.handleClick = () => {
+      this.tapCounter += 1;
+      if (this.tapTimeout) {
+        // Clear the timeout.
+        clearTimeout(this.tapTimeout);
+      }
+      if (this.tapCounter >= requiredTapsToSwitchModes) {
+        // Switch modes and reset the tap counter.
+        this.tapCounter = 0;
+        this.setState(({
+          devMode
+        }) => ({
+          devMode: !devMode
+        }));
+      } else {
+        this.tapTimeout = setTimeout(this.handleTapTimeout, switchModeTapTimeout);
+      }
+    };
+    /**
+     * Renders the error message in developer mode.
+     * @returns {JSX}
+     */
+    this.renderDevErrorMessage = () => {
+      /**
+       * Checks the input to be truthy, "0" or "false" and enables it to be rendered then.
+       * @param {Object|string|number|boolean} value The value to be checked if it should be rendered.
+       * @returns {boolean}
+       */
+      const checkValue = value => !!value || value === 0 || value === false;
+      const {
+        params
+      } = this.props;
+      return /*#__PURE__*/React.createElement("div", {
+        "aria-hidden": true
+      }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Pipeline:"), /*#__PURE__*/React.createElement("span", null, ` ${params.pipeline}`), /*#__PURE__*/React.createElement("br", null)), checkValue(params.entityId) && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Entity id:"), /*#__PURE__*/React.createElement("span", null, ` ${params.entityId}`), /*#__PURE__*/React.createElement("br", null)), checkValue(params.code) && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Code:"), /*#__PURE__*/React.createElement("span", null, ` ${params.code}`), /*#__PURE__*/React.createElement("br", null)), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Message:"), /*#__PURE__*/React.createElement("span", null, ` ${params.message}`), /*#__PURE__*/React.createElement("br", null)), checkValue(params.translated) && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Message Translated:"), /*#__PURE__*/React.createElement("span", null, ` ${params.translated.toString()}`), /*#__PURE__*/React.createElement("br", null)), checkValue(params.messageParams) && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("strong", null, "Message Params:"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("span", null, JSON.stringify(params.messageParams, null, ' ')), /*#__PURE__*/React.createElement("br", null)), checkValue(params.request) && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("strong", null, "Request Params:"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("span", null, JSON.stringify(params.request, null, ' ')), /*#__PURE__*/React.createElement("br", null)));
+    };
+    /**
+     * Renders the regular error message in user mode.
+     * @returns {JSX}
+     */
+    this.renderUserErrorMessage = () => {
+      const {
+        message = '',
+        params = {}
+      } = this.props;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, !!params.translated && (message || params.message || /*#__PURE__*/React.createElement(I18n.Text, {
+        string: "modal.body_error"
+      })), !params.translated && /*#__PURE__*/React.createElement(I18n.Text, {
+        string: message || params.message || 'modal.body_error',
+        params: params.messageParams || {}
+      }));
+    };
+    this.tapTimeout = null;
+    this.tapCounter = 0;
+    this.state = {
+      devMode: false // Indicating whether we are in dev mode.
+    };
+  }
+
+  /**
    * @return {string} The title based on the current state of the dialog.
-   */_inherits(PipelineErrorDialog,_Component);return _createClass(PipelineErrorDialog,[{key:"title",get:function get(){return this.state.devMode?'Pipeline Error':'modal.title_error';}/**
+   */
+  get title() {
+    return this.state.devMode ? 'Pipeline Error' : 'modal.title_error';
+  }
+
+  /**
    * @return {JSX} The content component based on the the current state of the dialog.
-   */},{key:"content",get:function get(){return this.state.devMode?this.renderDevErrorMessage():this.renderUserErrorMessage();}},{key:"render",value:/**
+   */
+  get content() {
+    return this.state.devMode ? this.renderDevErrorMessage() : this.renderUserErrorMessage();
+  }
+  /**
    * Renders the error message depending on the current mode.
    * @return {JSX}
-   */function render(){return React.createElement(BasicDialog,{title:this.title,actions:this.props.actions},React.createElement("div",{onClick:this.handleClick},this.content));}}]);}(Component);_defineProperty(PipelineErrorDialog,"defaultProps",{message:''});export default PipelineErrorDialog;
+   */
+  render() {
+    return /*#__PURE__*/React.createElement(BasicDialog, {
+      title: this.title,
+      actions: this.props.actions
+    }, /*#__PURE__*/React.createElement("div", {
+      onClick: this.handleClick
+    }, this.content));
+  }
+}
+PipelineErrorDialog.defaultProps = {
+  message: ''
+};
+export default PipelineErrorDialog;

package/Dialog/components/PipelineErrorDialog/spec.js

@@ -1,14 +1,94 @@
-import React from'react';import{mount}from'enzyme';import PipelineErrorDialog from"./index";jest.mock('@shopgate/engage/a11y/components');describe('<PipelineErrorDialog />',function(){var defaultParams={code:'123',message:'Error message',pipeline:'fakePipeline',request:{}};it('should render with minimal props',function(){var wrapper=mount(React.createElement(PipelineErrorDialog,{actions:[],params:defaultParams}));expect(wrapper).toMatchSnapshot();});it('should show a custom message if a message is is provided',function(){var message='Custom message';var wrapper=mount(React.createElement(PipelineErrorDialog,{actions:[],message:message,params:defaultParams}));expect(wrapper).toMatchSnapshot();expect(wrapper.html()).toMatch(message);});it('should switch modes on tap',function(){var wrapper=mount(React.createElement(PipelineErrorDialog,{actions:[],params:defaultParams}));var numTaps=10;var clickElement=wrapper.find('div[onClick]');// Dev mode should be disabled.
-for(var i=0;i<numTaps;i+=1){expect(wrapper.state().devMode).toBe(false);clickElement.simulate('click');}// Dev mode should be enabled.
-for(var _i2=0;_i2<numTaps;_i2+=1){expect(wrapper.state().devMode).toBe(true);clickElement.simulate('click');}// Dev mode should be disabled again.
-expect(wrapper.state().devMode).toBe(false);});it('should not switch modes if tapped too slow',function(){jest.useFakeTimers();var wrapper=mount(React.createElement(PipelineErrorDialog,{actions:[],params:defaultParams}));var numTaps=10;var numTapsUntilTimeout=Math.round(numTaps/2);var clickElement=wrapper.find('div[onClick]');// Dev mode should be disabled.
-expect(wrapper.state().devMode).toBe(false);/**
+import React from 'react';
+import { mount } from 'enzyme';
+import PipelineErrorDialog from "./index";
+jest.mock('@shopgate/engage/a11y/components');
+describe('<PipelineErrorDialog />', () => {
+  const defaultParams = {
+    code: '123',
+    message: 'Error message',
+    pipeline: 'fakePipeline',
+    request: {}
+  };
+  it('should render with minimal props', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(PipelineErrorDialog, {
+      actions: [],
+      params: defaultParams
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should show a custom message if a message is is provided', () => {
+    const message = 'Custom message';
+    const wrapper = mount(/*#__PURE__*/React.createElement(PipelineErrorDialog, {
+      actions: [],
+      message: message,
+      params: defaultParams
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.html()).toMatch(message);
+  });
+  it('should switch modes on tap', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(PipelineErrorDialog, {
+      actions: [],
+      params: defaultParams
+    }));
+    const numTaps = 10;
+    const clickElement = wrapper.find('div[onClick]');
+
+    // Dev mode should be disabled.
+    for (let i = 0; i < numTaps; i += 1) {
+      expect(wrapper.state().devMode).toBe(false);
+      clickElement.simulate('click');
+    }
+
+    // Dev mode should be enabled.
+    for (let i = 0; i < numTaps; i += 1) {
+      expect(wrapper.state().devMode).toBe(true);
+      clickElement.simulate('click');
+    }
+
+    // Dev mode should be disabled again.
+    expect(wrapper.state().devMode).toBe(false);
+  });
+  it('should not switch modes if tapped too slow', () => {
+    jest.useFakeTimers();
+    const wrapper = mount(/*#__PURE__*/React.createElement(PipelineErrorDialog, {
+      actions: [],
+      params: defaultParams
+    }));
+    const numTaps = 10;
+    const numTapsUntilTimeout = Math.round(numTaps / 2);
+    const clickElement = wrapper.find('div[onClick]');
+
+    // Dev mode should be disabled.
+    expect(wrapper.state().devMode).toBe(false);
+
+    /**
      * Simulates multiple tap events.
      * @param {number} amount The number of tap events to simulate in a row.
-     */var tapOnElement=function tapOnElement(amount){if(amount>0){clickElement.simulate('click');tapOnElement(amount-1);}};// Tap a few times.
-tapOnElement(numTapsUntilTimeout);// Trigger a timeout (user was too slow).
-jest.runAllTimers();// Tap the remaining times.
-tapOnElement(numTaps-numTapsUntilTimeout);// We timed out and should not be in dev mode by now.
-expect(wrapper.state().devMode).toBe(false);// Add the remaining amount of taps to enter dev mode.
-tapOnElement(numTapsUntilTimeout);// This time dev mode should be enabled.
-expect(wrapper.state().devMode).toBe(true);});});
+     */
+    const tapOnElement = amount => {
+      if (amount > 0) {
+        clickElement.simulate('click');
+        tapOnElement(amount - 1);
+      }
+    };
+
+    // Tap a few times.
+    tapOnElement(numTapsUntilTimeout);
+
+    // Trigger a timeout (user was too slow).
+    jest.runAllTimers();
+
+    // Tap the remaining times.
+    tapOnElement(numTaps - numTapsUntilTimeout);
+
+    // We timed out and should not be in dev mode by now.
+    expect(wrapper.state().devMode).toBe(false);
+
+    // Add the remaining amount of taps to enter dev mode.
+    tapOnElement(numTapsUntilTimeout);
+
+    // This time dev mode should be enabled.
+    expect(wrapper.state().devMode).toBe(true);
+  });
+});

package/Dialog/components/TextMessageDialog/index.js

@@ -1,6 +1,32 @@
-import React from'react';import PropTypes from'prop-types';import I18n from'@shopgate/pwa-common/components/I18n';import{i18n,nl2br}from'@shopgate/engage/core';import BasicDialog from"../BasicDialog";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import I18n from '@shopgate/pwa-common/components/I18n';
+import { i18n, nl2br } from '@shopgate/engage/core';
+import BasicDialog from "../BasicDialog";
+
+/**
  * Renders a simple dialog with a title and a text message.
  * This is the default dialog if no type has been specified.
  * @param {Object} props The component properties.
  * @returns {JSX} The rendered component.
- */var TextMessageDialog=function TextMessageDialog(_ref){var actions=_ref.actions,message=_ref.message,title=_ref.title,params=_ref.params,children=_ref.children;return React.createElement(BasicDialog,{title:title,actions:actions},React.createElement("span",{dangerouslySetInnerHTML:{__html:nl2br(i18n.text(message,params))}}),children);};TextMessageDialog.defaultProps={title:BasicDialog.defaultProps.title,params:I18n.Text.defaultProps.params,children:null};export default TextMessageDialog;
+ */
+const TextMessageDialog = ({
+  actions,
+  message,
+  title,
+  params,
+  children
+}) => /*#__PURE__*/React.createElement(BasicDialog, {
+  title: title,
+  actions: actions
+}, /*#__PURE__*/React.createElement("span", {
+  dangerouslySetInnerHTML: {
+    __html: nl2br(i18n.text(message, params))
+  }
+}), children);
+TextMessageDialog.defaultProps = {
+  title: BasicDialog.defaultProps.title,
+  params: I18n.Text.defaultProps.params,
+  children: null
+};
+export default TextMessageDialog;

package/Dialog/components/TextMessageDialog/spec.js

@@ -1 +1,59 @@
-import React from'react';import{shallow}from'enzyme';import TextMessageDialog from"./index";var message='This is the message.';var title='This is the title.';jest.mock('@shopgate/engage/a11y/components');describe('<TextMessageDialog />',function(){it('should render with minimal props',function(){var wrapper=shallow(React.createElement(TextMessageDialog,{message:message,actions:[]}));expect(wrapper).toMatchSnapshot();expect(wrapper.html()).toMatch(message);});it('should render with title and message',function(){var wrapper=shallow(React.createElement(TextMessageDialog,{title:title,message:message,actions:[]}));expect(wrapper).toMatchSnapshot();expect(wrapper.html()).toMatch(title);});it('should render with title, message and messageParams',function(){var wrapper=shallow(React.createElement(TextMessageDialog,{title:title,message:"Message with {name}",params:{name:'Placeholder'},actions:[]}));expect(wrapper).toMatchSnapshot();});it('should render the actions',function(){var actions=[{label:'fooAction',action:function action(){}}];var wrapper=shallow(React.createElement(TextMessageDialog,{title:title,message:message,actions:actions}));expect(wrapper).toMatchSnapshot();expect(wrapper.html()).toMatch(actions[0].label);});it('should pass title through',function(){var customTitle=React.createElement("div",null,"Title");var wrapper=shallow(React.createElement(TextMessageDialog,{title:customTitle,message:message,params:{},actions:[]}));expect(wrapper.find('BasicDialog').prop('title')).toEqual(customTitle);});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import TextMessageDialog from "./index";
+const message = 'This is the message.';
+const title = 'This is the title.';
+jest.mock('@shopgate/engage/a11y/components');
+describe('<TextMessageDialog />', () => {
+  it('should render with minimal props', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TextMessageDialog, {
+      message: message,
+      actions: []
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.html()).toMatch(message);
+  });
+  it('should render with title and message', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TextMessageDialog, {
+      title: title,
+      message: message,
+      actions: []
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.html()).toMatch(title);
+  });
+  it('should render with title, message and messageParams', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TextMessageDialog, {
+      title: title,
+      message: "Message with {name}",
+      params: {
+        name: 'Placeholder'
+      },
+      actions: []
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render the actions', () => {
+    const actions = [{
+      label: 'fooAction',
+      action: () => {}
+    }];
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TextMessageDialog, {
+      title: title,
+      message: message,
+      actions: actions
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.html()).toMatch(actions[0].label);
+  });
+  it('should pass title through', () => {
+    const customTitle = /*#__PURE__*/React.createElement("div", null, "Title");
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TextMessageDialog, {
+      title: customTitle,
+      message: message,
+      params: {},
+      actions: []
+    }));
+    expect(wrapper.find('BasicDialog').prop('title')).toEqual(customTitle);
+  });
+});

package/Dialog/components/VariantSelectModal/connector.js

@@ -1,5 +1,14 @@
-import{connect}from'react-redux';import{historyPush}from'@shopgate/pwa-common/actions/router';/**
+import { connect } from 'react-redux';
+import { historyPush } from '@shopgate/pwa-common/actions/router';
+
+/**
  * Connects the dispatch function to a callable function in the props.
  * @param {Function} dispatch The redux dispatch function.
  * @return {Object} The extended component props.
- */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{navigate:function navigate(pathname){return dispatch(historyPush({pathname:pathname}));}};};export default connect(null,mapDispatchToProps);
+ */
+const mapDispatchToProps = dispatch => ({
+  navigate: pathname => dispatch(historyPush({
+    pathname
+  }))
+});
+export default connect(null, mapDispatchToProps);

package/Dialog/components/VariantSelectModal/index.js

@@ -1,14 +1,50 @@
-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 PropTypes from'prop-types';import I18n from'@shopgate/pwa-common/components/I18n';import{ITEM_PATH}from'@shopgate/pwa-common-commerce/product/constants';import{bin2hex}from'@shopgate/pwa-common/helpers/data';import BasicDialog from"../BasicDialog";import connect from"./connector";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import I18n from '@shopgate/pwa-common/components/I18n';
+import { ITEM_PATH } from '@shopgate/pwa-common-commerce/product/constants';
+import { bin2hex } from '@shopgate/pwa-common/helpers/data';
+import BasicDialog from "../BasicDialog";
+import connect from "./connector";
+
+/**
  * Reorders the actions for the modal so that the confirmation button will be rendered last.
  * Also attaches a navigation action to the confirmation action.
  * @param {Array} actions The confirm and dismiss actions.
  * @param {string} productId The product id passed through params.
  * @param {string} navigate The navigate action.
  * @return {Array} Reordered and extended actions.
- */var reorderActions=function reorderActions(actions,_ref,navigate){var productId=_ref.productId;var confirmAction;var orderedActions=actions;orderedActions.forEach(function(act,index){if(act.action.name!=='onConfirm'){return;}confirmAction=_extends({},act,{action:function action(){// Execute default action
-act.action();// Navigate to product details page
-if(productId){navigate("".concat(ITEM_PATH,"/").concat(bin2hex(productId)));}}});orderedActions.splice(index,1);});// Push the confirm action last so that we have the button rendered at the bottom right of modal.
-if(confirmAction){orderedActions.push(confirmAction);}return orderedActions;};/**
+ */
+const reorderActions = (actions, {
+  productId
+}, navigate) => {
+  let confirmAction;
+  const orderedActions = actions;
+  orderedActions.forEach((act, index) => {
+    if (act.action.name !== 'onConfirm') {
+      return;
+    }
+    confirmAction = {
+      ...act,
+      action: () => {
+        // Execute default action
+        act.action();
+        // Navigate to product details page
+        if (productId) {
+          navigate(`${ITEM_PATH}/${bin2hex(productId)}`);
+        }
+      }
+    };
+    orderedActions.splice(index, 1);
+  });
+
+  // Push the confirm action last so that we have the button rendered at the bottom right of modal.
+  if (confirmAction) {
+    orderedActions.push(confirmAction);
+  }
+  return orderedActions;
+};
+
+/**
  * Renders a simple dialog with a title and a text message.
  * @param {Array} actions The modal button actions.
  * @param {string} message The modal message.
@@ -16,4 +52,27 @@ if(confirmAction){orderedActions.push(confirmAction);}return orderedActions;};/*
  * @param {Object} params The modal params.
  * @return {JSX} The rendered component.
  * @constructor
- */var VariantSelectModal=function VariantSelectModal(_ref2){var actions=_ref2.actions,message=_ref2.message,navigate=_ref2.navigate,title=_ref2.title,params=_ref2.params;var parsedActions=reorderActions(actions,params,navigate);return React.createElement(BasicDialog,{title:title,actions:parsedActions},React.createElement(I18n.Text,{string:message}));};VariantSelectModal.defaultProps={params:{productId:null},title:BasicDialog.defaultProps.title};export default connect(VariantSelectModal);export{VariantSelectModal as UnwrappedVariantSelectModal};
+ */
+const VariantSelectModal = ({
+  actions,
+  message,
+  navigate,
+  title,
+  params
+}) => {
+  const parsedActions = reorderActions(actions, params, navigate);
+  return /*#__PURE__*/React.createElement(BasicDialog, {
+    title: title,
+    actions: parsedActions
+  }, /*#__PURE__*/React.createElement(I18n.Text, {
+    string: message
+  }));
+};
+VariantSelectModal.defaultProps = {
+  params: {
+    productId: null
+  },
+  title: BasicDialog.defaultProps.title
+};
+export default connect(VariantSelectModal);
+export { VariantSelectModal as UnwrappedVariantSelectModal };