@shopgate/pwa-common 7.30.0-alpha.7 → 7.30.0-alpha.9

package/components/I18n/components/FormatNumber/spec.js

@@ -1,6 +1,45 @@
-function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React from'react';import{mount}from'enzyme';import{i18n}from'@shopgate/engage/core';import I18n from"../../index";import FormatNumber from"./index";jest.unmock('@shopgate/engage/core/helpers/i18n');describe('<FormatNumber>',function(){describe('i18n not ready',function(){it('should return same number and className when i18n is not ready',function(){var component=mount(React.createElement(FormatNumber,{number:1,fractions:2,className:"some-class"}));expect(component.html().includes('some-class')).toBe(true);expect(component.text().includes('1')).toBe(true);expect(component).toMatchSnapshot();});});describe('i18n ready',function(){i18n.init({locales:{},lang:'en-US'});var pairs=[[1,'1.00',2],[0.1,'0.10',2],[1,'1.000',3],[1,'1',0]];/**
+import React from 'react';
+import { mount } from 'enzyme';
+import { i18n } from '@shopgate/engage/core';
+import I18n from "../../index";
+import FormatNumber from "./index";
+jest.unmock('@shopgate/engage/core/helpers/i18n');
+describe('<FormatNumber>', () => {
+  describe('i18n not ready', () => {
+    it('should return same number and className when i18n is not ready', () => {
+      const component = mount(/*#__PURE__*/React.createElement(FormatNumber, {
+        number: 1,
+        fractions: 2,
+        className: "some-class"
+      }));
+      expect(component.html().includes('some-class')).toBe(true);
+      expect(component.text().includes('1')).toBe(true);
+      expect(component).toMatchSnapshot();
+    });
+  });
+  describe('i18n ready', () => {
+    i18n.init({
+      locales: {},
+      lang: 'en-US'
+    });
+    const pairs = [[1, '1.00', 2], [0.1, '0.10', 2], [1, '1.000', 3], [1, '1', 0]];
+
+    /**
      * Makes a component.
      * @param {number} number Number
      * @param {number} fractions Decimal points.
      * @returns {Object}
-     */var makeComponent=function makeComponent(number,fractions){return mount(React.createElement(I18n.Provider,null,React.createElement("div",null,React.createElement(FormatNumber,{number:number,fractions:fractions}))));};pairs.forEach(function(_ref){var _ref2=_slicedToArray(_ref,3),input=_ref2[0],expexted=_ref2[1],fractions=_ref2[2];it("should format ".concat(input," into ").concat(expexted),function(){var component=makeComponent(input,fractions);expect(component.text().includes("".concat(expexted))).toBe(true);expect(component).toMatchSnapshot();});});});});
+     */
+    const makeComponent = (number, fractions) => mount(/*#__PURE__*/React.createElement(I18n.Provider, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FormatNumber, {
+      number: number,
+      fractions: fractions
+    }))));
+    pairs.forEach(([input, expexted, fractions]) => {
+      it(`should format ${input} into ${expexted}`, () => {
+        const component = makeComponent(input, fractions);
+        expect(component.text().includes(`${expexted}`)).toBe(true);
+        expect(component).toMatchSnapshot();
+      });
+    });
+  });
+});

package/components/I18n/components/FormatPrice/index.js

@@ -1,5 +1,35 @@
-var _excluded=["className"];function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React,{memo}from'react';import PropTypes from'prop-types';import{i18n}from'@shopgate/engage/core/helpers/i18n';/**
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { i18n } from '@shopgate/engage/core/helpers/i18n';
+/**
  * Formats a price.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var FormatPrice=function FormatPrice(props){var className=props.className,formatProps=_objectWithoutProperties(props,_excluded);if(!className){return FormatPrice.format(formatProps);}return React.createElement("span",{className:className},FormatPrice.format(formatProps));};FormatPrice.format=function(_ref){var price=_ref.price,currency=_ref.currency,fractions=_ref.fractions;if(!i18n.ready){return price;}return i18n.price(price,currency,fractions);};FormatPrice.defaultProps={className:null,fractions:true};export default memo(FormatPrice);
+ */
+const FormatPrice = props => {
+  const {
+    className,
+    ...formatProps
+  } = props;
+  if (!className) {
+    return FormatPrice.format(formatProps);
+  }
+  return /*#__PURE__*/React.createElement("span", {
+    className: className
+  }, FormatPrice.format(formatProps));
+};
+FormatPrice.format = ({
+  price,
+  currency,
+  fractions
+}) => {
+  if (!i18n.ready) {
+    return price;
+  }
+  return i18n.price(price, currency, fractions);
+};
+FormatPrice.defaultProps = {
+  className: null,
+  fractions: true
+};
+export default /*#__PURE__*/memo(FormatPrice);

package/components/I18n/components/FormatPrice/spec.js

@@ -1 +1,46 @@
-import React from'react';import{mount}from'enzyme';import{i18n}from'@shopgate/engage/core';import I18n from"../../index";jest.unmock('@shopgate/engage/core/helpers/i18n');describe('<FormatPrice />',function(){var locales={greeting:'Hello {price}'};var price=1234.56;var formattedPrice='€1,234.56';var currency='EUR';var lang='en-US';i18n.init({locales:locales,lang:lang});describe('Given the component was mounted to the DOM',function(){var renderedElement;it('should match snapshot',function(){renderedElement=mount(React.createElement(I18n.Provider,null,React.createElement("div",null,React.createElement("span",{className:"only-price"},React.createElement(I18n.Price,{price:price,currency:currency})),React.createElement("span",{className:"text-with-price"},React.createElement(I18n.Text,{string:"greeting"},React.createElement(I18n.Price,{forKey:"price",price:price,currency:currency}))))));expect(renderedElement).toMatchSnapshot();});it('should render formatted price',function(){var text=renderedElement.find('.only-price').text();expect(text).toBe(formattedPrice);});it('should render within translated text',function(){var text=renderedElement.find('.text-with-price').text();expect(text).toBe("Hello ".concat(formattedPrice));});});});
+import React from 'react';
+import { mount } from 'enzyme';
+import { i18n } from '@shopgate/engage/core';
+import I18n from "../../index";
+jest.unmock('@shopgate/engage/core/helpers/i18n');
+describe('<FormatPrice />', () => {
+  const locales = {
+    greeting: 'Hello {price}'
+  };
+  const price = 1234.56;
+  const formattedPrice = '€1,234.56';
+  const currency = 'EUR';
+  const lang = 'en-US';
+  i18n.init({
+    locales,
+    lang
+  });
+  describe('Given the component was mounted to the DOM', () => {
+    let renderedElement;
+    it('should match snapshot', () => {
+      renderedElement = mount(/*#__PURE__*/React.createElement(I18n.Provider, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+        className: "only-price"
+      }, /*#__PURE__*/React.createElement(I18n.Price, {
+        price: price,
+        currency: currency
+      })), /*#__PURE__*/React.createElement("span", {
+        className: "text-with-price"
+      }, /*#__PURE__*/React.createElement(I18n.Text, {
+        string: "greeting"
+      }, /*#__PURE__*/React.createElement(I18n.Price, {
+        forKey: "price",
+        price: price,
+        currency: currency
+      }))))));
+      expect(renderedElement).toMatchSnapshot();
+    });
+    it('should render formatted price', () => {
+      const text = renderedElement.find('.only-price').text();
+      expect(text).toBe(formattedPrice);
+    });
+    it('should render within translated text', () => {
+      const text = renderedElement.find('.text-with-price').text();
+      expect(text).toBe(`Hello ${formattedPrice}`);
+    });
+  });
+});

package/components/I18n/components/FormatTime/index.js

@@ -1,5 +1,29 @@
-import React,{Fragment,memo}from'react';import PropTypes from'prop-types';import{i18n}from'@shopgate/engage/core/helpers/i18n';/**
+import React, { Fragment, memo } from 'react';
+import PropTypes from 'prop-types';
+import { i18n } from '@shopgate/engage/core/helpers/i18n';
+
+/**
  * Formats a time.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var FormatTime=function FormatTime(_ref){var timestamp=_ref.timestamp,format=_ref.format;return React.createElement(Fragment,null,FormatTime.format({timestamp:timestamp,format:format}));};FormatTime.format=function(_ref2){var timestamp=_ref2.timestamp,format=_ref2.format;if(!i18n.ready){return timestamp;}return i18n.time(timestamp,format);};FormatTime.defaultProps={format:'medium'};export default memo(FormatTime);
+ */
+const FormatTime = ({
+  timestamp,
+  format
+}) => /*#__PURE__*/React.createElement(Fragment, null, FormatTime.format({
+  timestamp,
+  format
+}));
+FormatTime.format = ({
+  timestamp,
+  format
+}) => {
+  if (!i18n.ready) {
+    return timestamp;
+  }
+  return i18n.time(timestamp, format);
+};
+FormatTime.defaultProps = {
+  format: 'medium'
+};
+export default /*#__PURE__*/memo(FormatTime);

package/components/I18n/components/FormatTime/spec.js

@@ -1,2 +1,43 @@
-import React from'react';import{mount}from'enzyme';import{i18n}from'@shopgate/engage/core';import I18n from"../../index";jest.unmock('@shopgate/engage/core/helpers/i18n');describe('<FormatTime />',function(){var locales={greeting:'Hello {time}'};var timestamp=new Date('Dec 25, 1999 04:25:45').getTime();var formattedTime='4:25:45 AM';var format='medium';var lang='en-US';i18n.init({locales:locales,lang:lang});describe('Given the component was mounted to the DOM',function(){// TODO: Handle snapshot test.
-var renderedElement=mount(React.createElement(I18n.Provider,null,React.createElement("div",null,React.createElement("span",{className:"only-time"},React.createElement(I18n.Time,{timestamp:timestamp,format:format})),React.createElement("span",{className:"text-with-time"},React.createElement(I18n.Text,{string:"greeting"},React.createElement(I18n.Time,{forKey:"time",timestamp:timestamp,format:format}))))));it('should render formatted time',function(){var text=renderedElement.find('.only-time').text();expect(text).toBe(formattedTime);});it('should render within translated text',function(){var text=renderedElement.find('.text-with-time').text();expect(text).toBe("Hello ".concat(formattedTime));});});});
+import React from 'react';
+import { mount } from 'enzyme';
+import { i18n } from '@shopgate/engage/core';
+import I18n from "../../index";
+jest.unmock('@shopgate/engage/core/helpers/i18n');
+describe('<FormatTime />', () => {
+  const locales = {
+    greeting: 'Hello {time}'
+  };
+  const timestamp = new Date('Dec 25, 1999 04:25:45').getTime();
+  const formattedTime = '4:25:45 AM';
+  const format = 'medium';
+  const lang = 'en-US';
+  i18n.init({
+    locales,
+    lang
+  });
+  describe('Given the component was mounted to the DOM', () => {
+    // TODO: Handle snapshot test.
+    const renderedElement = mount(/*#__PURE__*/React.createElement(I18n.Provider, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: "only-time"
+    }, /*#__PURE__*/React.createElement(I18n.Time, {
+      timestamp: timestamp,
+      format: format
+    })), /*#__PURE__*/React.createElement("span", {
+      className: "text-with-time"
+    }, /*#__PURE__*/React.createElement(I18n.Text, {
+      string: "greeting"
+    }, /*#__PURE__*/React.createElement(I18n.Time, {
+      forKey: "time",
+      timestamp: timestamp,
+      format: format
+    }))))));
+    it('should render formatted time', () => {
+      const text = renderedElement.find('.only-time').text();
+      expect(text).toBe(formattedTime);
+    });
+    it('should render within translated text', () => {
+      const text = renderedElement.find('.text-with-time').text();
+      expect(text).toBe(`Hello ${formattedTime}`);
+    });
+  });
+});

package/components/I18n/components/I18nProvider/index.js

@@ -1,16 +1,59 @@
-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/engage/core/helpers/i18n';import{logger}from'@shopgate/pwa-core/helpers';/**
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { i18n } from '@shopgate/engage/core/helpers/i18n';
+import { logger } from '@shopgate/pwa-core/helpers';
+
+/**
  * A React component that provides child components with i18n features.
  * @returns {React.Component}
- */var I18nProvider=/*#__PURE__*/function(_Component){/**
+ */
+export default class I18nProvider extends Component {
+  /**
    * @inheritDoc
-   */function I18nProvider(props){var _this2;_classCallCheck(this,I18nProvider);_this2=_callSuper(this,I18nProvider,[props]);// eslint-disable-next-line react/prop-types
-/**
-   * Gets a shortcut to i18n functionality with preset language.
-   * @returns {Object}
-   */_defineProperty(_this2,"getI18nInstance",function(){return{__:i18n.text,_p:i18n.price,_d:i18n.date,_t:i18n.time,_n:i18n.number};});if(_this2.props.lang||_this2.props.locales){logger.warn("===== I18nProvider deprecated =====\nI18nProvider and it's related components (@shopgate/pwa-common/component/I18n) or context types are deprecated and will be removed in @shopgate/engage v7.0.0.\nPlease use { i18n } from @shopgate/engage/core.\n===================================\n      ");}return _this2;}/**
+   */
+  constructor(props) {
+    super(props);
+    // eslint-disable-next-line react/prop-types
+    /**
+     * Gets a shortcut to i18n functionality with preset language.
+     * @returns {Object}
+     */
+    this.getI18nInstance = () => ({
+      __: i18n.text,
+      _p: i18n.price,
+      _d: i18n.date,
+      _t: i18n.time,
+      _n: i18n.number
+    });
+    if (this.props.lang || this.props.locales) {
+      logger.warn(`===== I18nProvider deprecated =====\nI18nProvider and it's related components (@shopgate/pwa-common/component/I18n) or context types are deprecated and will be removed in @shopgate/engage v7.0.0.\nPlease use { i18n } from @shopgate/engage/core.\n===================================
+      `);
+    }
+  }
+
+  /**
    * Provides context for child components.
    * @returns {Object}
-   */_inherits(I18nProvider,_Component);return _createClass(I18nProvider,[{key:"getChildContext",value:function getChildContext(){return{i18n:this.getI18nInstance};}},{key:"render",value:/**
+   */
+  getChildContext() {
+    return {
+      i18n: this.getI18nInstance
+    };
+  }
+  /**
    * Renders the component.
    * @returns {JSX}
-   */function render(){var children=this.props.children;return children?React.cloneElement(children):null;}}]);}(Component);_defineProperty(I18nProvider,"childContextTypes",{i18n:PropTypes.func.isRequired});_defineProperty(I18nProvider,"defaultProps",{children:null});export{I18nProvider as default};
+   */
+  render() {
+    const {
+      children
+    } = this.props;
+    return children ? /*#__PURE__*/React.cloneElement(children) : null;
+  }
+}
+I18nProvider.childContextTypes = {
+  i18n: PropTypes.func.isRequired
+};
+I18nProvider.defaultProps = {
+  children: null
+};

package/components/I18n/components/I18nProvider/spec.js

@@ -1 +1,39 @@
-import React from'react';import{shallow}from'enzyme';import{i18n as i18nHelper}from'@shopgate/engage/core';import I18nProvider from"./index";jest.unmock('@shopgate/engage/core/helpers/i18n');describe('<I18nProvider />',function(){var locales={greeting:'Guten Tag {name}'};var lang='de-DE';i18nHelper.init({locales:locales,lang:lang});describe('Given the component was mounted to the DOM',function(){var renderedElement;var renderedInstance;it('should match snapshot',function(){renderedElement=shallow(React.createElement(I18nProvider,null));renderedInstance=renderedElement.instance();expect(renderedElement).toMatchSnapshot();});it('should provide access to i18n via context',function(){var _renderedInstance$get=renderedInstance.getChildContext(),i18n=_renderedInstance$get.i18n;expect(i18n).toEqual(renderedInstance.getI18nInstance);});it('should translate when calling an instance method',function(){var _renderedInstance$get2=renderedInstance.getI18nInstance(),__=_renderedInstance$get2.__;var translated=__('greeting',{name:'Test'});expect(translated).toBe('Guten Tag Test');});});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import { i18n as i18nHelper } from '@shopgate/engage/core';
+import I18nProvider from "./index";
+jest.unmock('@shopgate/engage/core/helpers/i18n');
+describe('<I18nProvider />', () => {
+  const locales = {
+    greeting: 'Guten Tag {name}'
+  };
+  const lang = 'de-DE';
+  i18nHelper.init({
+    locales,
+    lang
+  });
+  describe('Given the component was mounted to the DOM', () => {
+    let renderedElement;
+    let renderedInstance;
+    it('should match snapshot', () => {
+      renderedElement = shallow(/*#__PURE__*/React.createElement(I18nProvider, null));
+      renderedInstance = renderedElement.instance();
+      expect(renderedElement).toMatchSnapshot();
+    });
+    it('should provide access to i18n via context', () => {
+      const {
+        i18n
+      } = renderedInstance.getChildContext();
+      expect(i18n).toEqual(renderedInstance.getI18nInstance);
+    });
+    it('should translate when calling an instance method', () => {
+      const {
+        __
+      } = renderedInstance.getI18nInstance();
+      const translated = __('greeting', {
+        name: 'Test'
+      });
+      expect(translated).toBe('Guten Tag Test');
+    });
+  });
+});

package/components/I18n/components/Placeholder/index.js

@@ -1,6 +1,12 @@
-import React,{Fragment}from'react';import PropTypes from'prop-types';/**
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+/**
  * A placeholder for a translation key.
  * @param {Object} props The component props.
  * @param {Object} context The component context.
  * @returns {JSX}
- */var Placeholder=function Placeholder(props){return React.createElement(Fragment,null,props.children);};Placeholder.format=function(props){return React.createElement(Placeholder,props);};export default Placeholder;
+ */
+const Placeholder = props => /*#__PURE__*/React.createElement(Fragment, null, props.children);
+Placeholder.format = props => /*#__PURE__*/React.createElement(Placeholder, props);
+export default Placeholder;

package/components/I18n/components/Placeholder/spec.js

@@ -1 +1,30 @@
-import React from'react';import{mount}from'enzyme';import{i18n}from'@shopgate/engage/core';import I18n from"../../index";jest.unmock('@shopgate/engage/core/helpers/i18n');describe('<Placeholder />',function(){var locales={greeting:'Hello {world}'};var lang='en-US';i18n.init({locales:locales,lang:lang});describe('Given the component was mounted to the DOM',function(){var renderedElement;it('should render',function(){renderedElement=mount(React.createElement(I18n.Provider,null,React.createElement(I18n.Text,{string:"greeting"},React.createElement(I18n.Placeholder,{forKey:"world"},React.createElement("strong",null,"WORLD")),"/")));expect(renderedElement).toMatchSnapshot();});it('should render with a placeholder text',function(){var text=renderedElement.find('strong').text();expect(text).toBe('WORLD');});});});
+import React from 'react';
+import { mount } from 'enzyme';
+import { i18n } from '@shopgate/engage/core';
+import I18n from "../../index";
+jest.unmock('@shopgate/engage/core/helpers/i18n');
+describe('<Placeholder />', () => {
+  const locales = {
+    greeting: 'Hello {world}'
+  };
+  const lang = 'en-US';
+  i18n.init({
+    locales,
+    lang
+  });
+  describe('Given the component was mounted to the DOM', () => {
+    let renderedElement;
+    it('should render', () => {
+      renderedElement = mount(/*#__PURE__*/React.createElement(I18n.Provider, null, /*#__PURE__*/React.createElement(I18n.Text, {
+        string: "greeting"
+      }, /*#__PURE__*/React.createElement(I18n.Placeholder, {
+        forKey: "world"
+      }, /*#__PURE__*/React.createElement("strong", null, "WORLD")), "/")));
+      expect(renderedElement).toMatchSnapshot();
+    });
+    it('should render with a placeholder text', () => {
+      const text = renderedElement.find('strong').text();
+      expect(text).toBe('WORLD');
+    });
+  });
+});

package/components/I18n/components/Translate/index.js

@@ -1,4 +1,12 @@
-var _excluded=["string","children","params","className","role","transform","acceptPlainTextWithPlaceholders"];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;}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 _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React from'react';import PropTypes from'prop-types';import{renderToString}from'react-dom/server';import{logger}from'@shopgate/pwa-core';import{i18n}from'@shopgate/engage/core/helpers/i18n';/**
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.reduce.js";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { renderToString } from 'react-dom/server';
+import { logger } from '@shopgate/pwa-core';
+import { i18n } from '@shopgate/engage/core/helpers/i18n';
+
+/**
  * Returns a translation and replaces placeholder with children output.
  * It is possible to either pass JSX components or plain strings as replacement for
  * the translation keys.
@@ -15,9 +23,62 @@ var _excluded=["string","children","params","className","role","transform","acce
  * @param {boolean} [acceptPlainTextWithPlaceholders=false] When set to TRUE, the component can
  * also handle human readable texts that contain text replacement placeholders.
  * @returns {JSX.Element} The translated string as JSX component.
- */var Translate=function Translate(_ref){var string=_ref.string,children=_ref.children,params=_ref.params,className=_ref.className,role=_ref.role,transform=_ref.transform,acceptPlainTextWithPlaceholders=_ref.acceptPlainTextWithPlaceholders,rest=_objectWithoutProperties(_ref,_excluded);if(typeof string!=='string'||string.length===0){return string;}if(!i18n.ready){return React.createElement("span",_extends({className:className,role:role},rest),string);}// When the input string is malformed, return the original string rather than raising an error.
-var formatted=string;try{// First replace every occurrence of a translation key with a separator.
-var separator='__%S%__';var childrenArray=React.Children.toArray(children);var values=childrenArray.reduce(function(obj,child){return child.props&&child.props.forKey?_extends({},obj,_defineProperty({},child.props.forKey,separator)):obj;},_extends({},params));// Split the tokenized string at the separators.
-var stringParts=i18n.text(string,values,{acceptPlainTextWithPlaceholders:acceptPlainTextWithPlaceholders}).split(separator);// Create a new array containing the separated chunks of the text and merge the substitutions.
-// The result can be an array with multiple strings and will be joined together.
-formatted=stringParts.reduce(function(result,text,index){return[].concat(result,[text,childrenArray[index]]);},[]);}catch(e){logger.error('i18n error for string %s',string,e);}return React.createElement("span",_extends({className:className,role:role},rest),!transform?formatted:transform(renderToString(formatted)));};Translate.defaultProps={children:null,className:null,params:{},role:null,transform:null,acceptPlainTextWithPlaceholders:false};export default Translate;
+ */
+const Translate = ({
+  string,
+  children,
+  params,
+  className,
+  role,
+  transform,
+  acceptPlainTextWithPlaceholders,
+  ...rest
+}) => {
+  if (typeof string !== 'string' || string.length === 0) {
+    return string;
+  }
+  if (!i18n.ready) {
+    return /*#__PURE__*/React.createElement("span", _extends({
+      className: className,
+      role: role
+    }, rest), string);
+  }
+
+  // When the input string is malformed, return the original string rather than raising an error.
+  let formatted = string;
+  try {
+    // First replace every occurrence of a translation key with a separator.
+    const separator = '__%S%__';
+    const childrenArray = React.Children.toArray(children);
+    const values = childrenArray.reduce((obj, child) => child.props && child.props.forKey ? {
+      ...obj,
+      [child.props.forKey]: separator
+    } : obj, {
+      ...params
+    });
+
+    // Split the tokenized string at the separators.
+    const stringParts = i18n.text(string, values, {
+      acceptPlainTextWithPlaceholders
+    }).split(separator);
+
+    // Create a new array containing the separated chunks of the text and merge the substitutions.
+    // The result can be an array with multiple strings and will be joined together.
+    formatted = stringParts.reduce((result, text, index) => [...result, text, childrenArray[index]], []);
+  } catch (e) {
+    logger.error('i18n error for string %s', string, e);
+  }
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: className,
+    role: role
+  }, rest), !transform ? formatted : transform(renderToString(formatted)));
+};
+Translate.defaultProps = {
+  children: null,
+  className: null,
+  params: {},
+  role: null,
+  transform: null,
+  acceptPlainTextWithPlaceholders: false
+};
+export default Translate;

package/components/I18n/components/Translate/spec.js

@@ -1 +1,30 @@
-import React from'react';import{mount}from'enzyme';import{i18n}from'@shopgate/engage/core';import I18n from"../../index";jest.unmock('@shopgate/engage/core/helpers/i18n');describe('<Translate />',function(){var locales={greeting:'Hello {name}'};i18n.init({locales:locales,lang:'en-US'});describe('Given the component was mounted to the DOM',function(){var renderedElement;it('should match snapshot',function(){renderedElement=mount(React.createElement(I18n.Provider,null,React.createElement(I18n.Text,{string:"greeting",params:{name:'Test'}})));expect(renderedElement).toMatchSnapshot();});it('should render translated text',function(){var text=renderedElement.find(I18n.Text).text();expect(text).toBe('Hello Test');});});});
+import React from 'react';
+import { mount } from 'enzyme';
+import { i18n } from '@shopgate/engage/core';
+import I18n from "../../index";
+jest.unmock('@shopgate/engage/core/helpers/i18n');
+describe('<Translate />', () => {
+  const locales = {
+    greeting: 'Hello {name}'
+  };
+  i18n.init({
+    locales,
+    lang: 'en-US'
+  });
+  describe('Given the component was mounted to the DOM', () => {
+    let renderedElement;
+    it('should match snapshot', () => {
+      renderedElement = mount(/*#__PURE__*/React.createElement(I18n.Provider, null, /*#__PURE__*/React.createElement(I18n.Text, {
+        string: "greeting",
+        params: {
+          name: 'Test'
+        }
+      })));
+      expect(renderedElement).toMatchSnapshot();
+    });
+    it('should render translated text', () => {
+      const text = renderedElement.find(I18n.Text).text();
+      expect(text).toBe('Hello Test');
+    });
+  });
+});

package/components/I18n/index.js

@@ -1 +1,16 @@
-import I18nProvider from"./components/I18nProvider";import Placeholder from"./components/Placeholder";import Translate from"./components/Translate";import FormatDate from"./components/FormatDate";import FormatTime from"./components/FormatTime";import FormatPrice from"./components/FormatPrice";import FormatNumber from"./components/FormatNumber";export default{Provider:I18nProvider,Text:Translate,Date:FormatDate,Time:FormatTime,Placeholder:Placeholder,Price:FormatPrice,Number:FormatNumber};
+import I18nProvider from "./components/I18nProvider";
+import Placeholder from "./components/Placeholder";
+import Translate from "./components/Translate";
+import FormatDate from "./components/FormatDate";
+import FormatTime from "./components/FormatTime";
+import FormatPrice from "./components/FormatPrice";
+import FormatNumber from "./components/FormatNumber";
+export default {
+  Provider: I18nProvider,
+  Text: Translate,
+  Date: FormatDate,
+  Time: FormatTime,
+  Placeholder,
+  Price: FormatPrice,
+  Number: FormatNumber
+};

package/components/Icon/index.js

@@ -1,4 +1,8 @@
-import React from'react';import PropTypes from'prop-types';import styles from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from "./style";
+
+/**
  * The Icon component.
  * @param {Object} props The component props.
  * @param {string} props.content The SVG content of the icon
@@ -6,4 +10,23 @@ import React from'react';import PropTypes from'prop-types';import styles from"./
  * @param {string} [props.viewBox] The viewBox attribute passed to the SVG
  * @param {number} [props.size=24] The icon size
  * @returns {JSX.Element}
- */var Icon=function Icon(props){return React.createElement("svg",{className:"".concat(styles," ").concat(props.className," common__icon"),viewBox:props.viewBox,xmlns:"http://www.w3.org/2000/svg",dangerouslySetInnerHTML:{__html:props.content},style:{fontSize:props.size,fill:props.color}});};Icon.defaultProps={className:'',color:null,viewBox:'0 0 24 24',size:'inherit'};export default Icon;
+ */
+const Icon = props => /*#__PURE__*/React.createElement("svg", {
+  className: `${styles} ${props.className} common__icon`,
+  viewBox: props.viewBox,
+  xmlns: "http://www.w3.org/2000/svg",
+  dangerouslySetInnerHTML: {
+    __html: props.content
+  },
+  style: {
+    fontSize: props.size,
+    fill: props.color
+  }
+});
+Icon.defaultProps = {
+  className: '',
+  color: null,
+  viewBox: '0 0 24 24',
+  size: 'inherit'
+};
+export default Icon;

package/components/Icon/style.js

@@ -1 +1,6 @@
-import{css}from'glamor';export default css({fill:'currentColor',width:'1em',height:'1em'}).toString();
+import { css } from 'glamor';
+export default css({
+  fill: 'currentColor',
+  width: '1em',
+  height: '1em'
+}).toString();