@shopgate/engage 7.30.0-alpha.7 → 7.30.0-alpha.9

package/product/components/FilterBar/mock.js

@@ -1,9 +1,72 @@
-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 configureStore from'redux-mock-store';import thunk from'redux-thunk';import{FILTER_TYPE_SINGLE_SELECT,FILTER_TYPE_MULTISELECT}from'@shopgate/pwa-common-commerce/filter/constants';import{themeConfig as mockThemeConfig}from'@shopgate/pwa-common/helpers/config/mock';var mockedStoreDefault={filter:{activeFilters:[],availableFilters:{},activeHash:null,temporaryFilters:{}},history:{queryParams:{sort:'desc'}}};var mockedStoreAllSelected=_extends({},mockedStoreDefault,{filter:_extends({},mockedStoreDefault.filter,{activeFilters:[{filters:{SingleSelect:{type:FILTER_TYPE_SINGLE_SELECT,label:'Single selection',value:'SingleSelected',valueLabel:'Single Selected'},MultiSelect:{type:FILTER_TYPE_MULTISELECT,label:'MultiSelect',values:['one','two'],valueLabels:['One','Two']},Range:{type:'range',label:'Range',minimum:1.1,maximum:99.99}}}]})});/**
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { FILTER_TYPE_SINGLE_SELECT, FILTER_TYPE_MULTISELECT } from '@shopgate/pwa-common-commerce/filter/constants';
+import { themeConfig as mockThemeConfig } from '@shopgate/pwa-common/helpers/config/mock';
+const mockedStoreDefault = {
+  filter: {
+    activeFilters: [],
+    availableFilters: {},
+    activeHash: null,
+    temporaryFilters: {}
+  },
+  history: {
+    queryParams: {
+      sort: 'desc'
+    }
+  }
+};
+const mockedStoreAllSelected = {
+  ...mockedStoreDefault,
+  filter: {
+    ...mockedStoreDefault.filter,
+    activeFilters: [{
+      filters: {
+        SingleSelect: {
+          type: FILTER_TYPE_SINGLE_SELECT,
+          label: 'Single selection',
+          value: 'SingleSelected',
+          valueLabel: 'Single Selected'
+        },
+        MultiSelect: {
+          type: FILTER_TYPE_MULTISELECT,
+          label: 'MultiSelect',
+          values: ['one', 'two'],
+          valueLabels: ['One', 'Two']
+        },
+        Range: {
+          type: 'range',
+          label: 'Range',
+          minimum: 1.1,
+          maximum: 99.99
+        }
+      }
+    }]
+  }
+};
+
+/**
  * Returns a store with default state.
  * @returns {Object}
- */export function getDefaultStore(){return configureStore([thunk])(mockedStoreDefault);}/**
+ */
+export function getDefaultStore() {
+  return configureStore([thunk])(mockedStoreDefault);
+}
+/**
  * Returns a store with state with all filter types selected.
  * @returns {Object}
- */export function getStoreWithSelectedFilters(){return configureStore([thunk])(mockedStoreAllSelected);}/**
+ */
+export function getStoreWithSelectedFilters() {
+  return configureStore([thunk])(mockedStoreAllSelected);
+}
+
+/**
  * Mock app config
- */export function mockAppConfig(){jest.mock('@shopgate/pwa-common/helpers/config',function(){return{"default":{currency:'USD'},themeConfig:mockThemeConfig};});}
+ */
+export function mockAppConfig() {
+  jest.mock('@shopgate/pwa-common/helpers/config', () => ({
+    default: {
+      currency: 'USD'
+    },
+    themeConfig: mockThemeConfig
+  }));
+}

package/product/components/FilterBar/selectors.js

@@ -1,4 +1,8 @@
-import{createSelector}from'reselect';import{hasActiveFilters}from'@shopgate/pwa-common-commerce/filter/selectors';/**
+import { createSelector } from 'reselect';
+import { hasActiveFilters } from '@shopgate/pwa-common-commerce/filter/selectors';
+
+/**
  * Checks if the filter bar has active filters
  * @return {bool}
- */export var isFilterBarActive=createSelector(hasActiveFilters,function(activeFilters){return activeFilters;});
+ */
+export const isFilterBarActive = createSelector(hasActiveFilters, activeFilters => activeFilters);

package/product/components/FilterBar/style.js

@@ -1 +1,4 @@
-import{css}from'glamor';export default css({transition:'transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1)'});
+import { css } from 'glamor';
+export default css({
+  transition: 'transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1)'
+});

package/product/components/Header/PriceStriked/connector.js

@@ -1,9 +1,26 @@
-import{connect}from'react-redux';import{getProductPriceData}from'@shopgate/pwa-common-commerce/product';/**
+import { connect } from 'react-redux';
+import { getProductPriceData } from '@shopgate/pwa-common-commerce/product';
+
+/**
  * @param {Object} state The current application state.
  * @param {Object} props The component props.
  * @return {Object} The extended component props.
- */var mapStateToProps=function mapStateToProps(state,props){return{price:getProductPriceData(state,props)};};/**
+ */
+const mapStateToProps = (state, props) => ({
+  price: getProductPriceData(state, props)
+});
+
+/**
  * @param {Object} next The next component props.
  * @param {Object} prev The current component props.
  * @return {boolean}
- */var areStatePropsEqual=function areStatePropsEqual(next,prev){if(!prev.price&&next.price){return false;}return true;};export default connect(mapStateToProps,null,null,{areStatePropsEqual:areStatePropsEqual});
+ */
+const areStatePropsEqual = (next, prev) => {
+  if (!prev.price && next.price) {
+    return false;
+  }
+  return true;
+};
+export default connect(mapStateToProps, null, null, {
+  areStatePropsEqual
+});

package/product/components/Header/PriceStriked/index.js

@@ -1,5 +1,49 @@
-import React,{Fragment}from'react';import PropTypes from'prop-types';import{Portal,I18n,PlaceholderLabel,PriceStriked as StrikePrice}from'@shopgate/engage/components';import{PRODUCT_PRICE_STRIKED,PRODUCT_PRICE_STRIKED_AFTER,PRODUCT_PRICE_STRIKED_BEFORE}from'@shopgate/engage/product/constants';import{withPriceCalculation}from'@shopgate/engage/product/hocs';import{useWidgetSettings}from'@shopgate/engage/core/hooks';import connect from"./connector";import styles from"./style";/**
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Portal, I18n, PlaceholderLabel, PriceStriked as StrikePrice } from '@shopgate/engage/components';
+import { PRODUCT_PRICE_STRIKED, PRODUCT_PRICE_STRIKED_AFTER, PRODUCT_PRICE_STRIKED_BEFORE } from '@shopgate/engage/product/constants';
+import { withPriceCalculation } from '@shopgate/engage/product/hocs';
+import { useWidgetSettings } from '@shopgate/engage/core/hooks';
+import connect from "./connector";
+import styles from "./style";
+
+/**
  * The PriceStriked component.
  * @param {Object} props The component props.
  * @return {JSX}
- */var PriceStriked=function PriceStriked(_ref){var price=_ref.price;var _useWidgetSettings=useWidgetSettings('@shopgate/engage/product/components/Header/PriceStriked'),_useWidgetSettings$ms=_useWidgetSettings.msrpLabel,msrpLabel=_useWidgetSettings$ms===void 0?'price.msrp':_useWidgetSettings$ms,unitPriceStrikedLabel=_useWidgetSettings.unitPriceStrikedLabel;return React.createElement(Fragment,null,React.createElement(Portal,{name:PRODUCT_PRICE_STRIKED_BEFORE}),React.createElement(Portal,{name:PRODUCT_PRICE_STRIKED},React.createElement(PlaceholderLabel,{className:styles.placeholder,ready:price!==null},price&&price.msrp>0&&price.unitPrice!==price.msrp&&React.createElement(Fragment,null,!!msrpLabel&&React.createElement(I18n.Text,{string:msrpLabel,className:styles.msrp}),React.createElement(StrikePrice,{className:styles.msrpStriked,value:price.msrp,currency:price.currency})),price&&!price.msrp&&price.unitPriceStriked>0&&price.unitPrice!==price.unitPriceStriked&&React.createElement(React.Fragment,null,!!unitPriceStrikedLabel&&React.createElement(I18n.Text,{string:unitPriceStrikedLabel,className:styles.msrp}),React.createElement(StrikePrice,{value:price.unitPriceStriked,currency:price.currency})))),React.createElement(Portal,{name:PRODUCT_PRICE_STRIKED_AFTER}));};PriceStriked.defaultProps={price:null};export default connect(withPriceCalculation(PriceStriked));
+ */
+const PriceStriked = ({
+  price
+}) => {
+  const {
+    msrpLabel = 'price.msrp',
+    unitPriceStrikedLabel
+  } = useWidgetSettings('@shopgate/engage/product/components/Header/PriceStriked');
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Portal, {
+    name: PRODUCT_PRICE_STRIKED_BEFORE
+  }), /*#__PURE__*/React.createElement(Portal, {
+    name: PRODUCT_PRICE_STRIKED
+  }, /*#__PURE__*/React.createElement(PlaceholderLabel, {
+    className: styles.placeholder,
+    ready: price !== null
+  }, price && price.msrp > 0 && price.unitPrice !== price.msrp && /*#__PURE__*/React.createElement(Fragment, null, !!msrpLabel && /*#__PURE__*/React.createElement(I18n.Text, {
+    string: msrpLabel,
+    className: styles.msrp
+  }), /*#__PURE__*/React.createElement(StrikePrice, {
+    className: styles.msrpStriked,
+    value: price.msrp,
+    currency: price.currency
+  })), price && !price.msrp && price.unitPriceStriked > 0 && price.unitPrice !== price.unitPriceStriked && /*#__PURE__*/React.createElement(React.Fragment, null, !!unitPriceStrikedLabel && /*#__PURE__*/React.createElement(I18n.Text, {
+    string: unitPriceStrikedLabel,
+    className: styles.msrp
+  }), /*#__PURE__*/React.createElement(StrikePrice, {
+    value: price.unitPriceStriked,
+    currency: price.currency
+  })))), /*#__PURE__*/React.createElement(Portal, {
+    name: PRODUCT_PRICE_STRIKED_AFTER
+  }));
+};
+PriceStriked.defaultProps = {
+  price: null
+};
+export default connect(withPriceCalculation(PriceStriked));

package/product/components/Header/PriceStriked/style.js

@@ -1 +1,26 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables;var placeholder=css({height:16,width:'70%',marginTop:5,marginBottom:2}).toString();var msrp=css({color:colors.shade11,fontSize:'0.875rem',marginRight:variables.gap.small/2}).toString();var msrpStriked=css({display:'inline',fontSize:'0.875rem'}).toString();export default{placeholder:placeholder,msrp:msrp,msrpStriked:msrpStriked};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors,
+  variables
+} = themeConfig;
+const placeholder = css({
+  height: 16,
+  width: '70%',
+  marginTop: 5,
+  marginBottom: 2
+}).toString();
+const msrp = css({
+  color: colors.shade11,
+  fontSize: '0.875rem',
+  marginRight: variables.gap.small / 2
+}).toString();
+const msrpStriked = css({
+  display: 'inline',
+  fontSize: '0.875rem'
+}).toString();
+export default {
+  placeholder,
+  msrp,
+  msrpStriked
+};

package/product/components/Header/Shipping/components/Label/index.js

@@ -1,6 +1,33 @@
-import React from'react';import PropTypes from'prop-types';import I18n from'@shopgate/pwa-common/components/I18n';import styles from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import I18n from '@shopgate/pwa-common/components/I18n';
+import styles from "./style";
+
+/**
  * The Shipping Label component.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var Label=function Label(_ref){var className=_ref.className,price=_ref.price,currency=_ref.currency;return(// eslint-disable-next-line jsx-a11y/aria-role
-React.createElement("div",{role:"text",className:"".concat(className," ").concat(styles.text)},price>0?React.createElement(I18n.Text,{string:"shipping.cost"},React.createElement(I18n.Price,{forKey:"price",price:price,currency:currency})):React.createElement(I18n.Text,{string:"shipping.free"})));};Label.defaultProps={className:''};export default Label;
+ */
+const Label = ({
+  className,
+  price,
+  currency
+}) =>
+/*#__PURE__*/
+// eslint-disable-next-line jsx-a11y/aria-role
+React.createElement("div", {
+  role: "text",
+  className: `${className} ${styles.text}`
+}, price > 0 ? /*#__PURE__*/React.createElement(I18n.Text, {
+  string: "shipping.cost"
+}, /*#__PURE__*/React.createElement(I18n.Price, {
+  forKey: "price",
+  price: price,
+  currency: currency
+})) : /*#__PURE__*/React.createElement(I18n.Text, {
+  string: "shipping.free"
+}));
+Label.defaultProps = {
+  className: ''
+};
+export default Label;

package/product/components/Header/Shipping/components/Label/style.js

@@ -1 +1,11 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;var text=css({color:"var(--color-state-ok, ".concat(colors.success,")")}).toString();export default{text:text};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors
+} = themeConfig;
+const text = css({
+  color: `var(--color-state-ok, ${colors.success})`
+}).toString();
+export default {
+  text
+};

package/product/components/Header/Shipping/connector.js

@@ -1,9 +1,26 @@
-import{connect}from'react-redux';import{getProductShipping}from'@shopgate/pwa-common-commerce/product/selectors/product';/**
+import { connect } from 'react-redux';
+import { getProductShipping } from '@shopgate/pwa-common-commerce/product/selectors/product';
+
+/**
  * @param {Object} state The current application state.
  * @param {Object} props The component props.
  * @return {Object} The extended component props.
- */var mapStateToProps=function mapStateToProps(state,props){return{shipping:getProductShipping(state,props)};};/**
+ */
+const mapStateToProps = (state, props) => ({
+  shipping: getProductShipping(state, props)
+});
+
+/**
  * @param {Object} next The next component props.
  * @param {Object} prev The previous component props.
  * @return {boolean}
- */var areStatePropsEqual=function areStatePropsEqual(next,prev){if(!prev.shipping&&next.shipping){return false;}return true;};export default connect(mapStateToProps,null,null,{areStatePropsEqual:areStatePropsEqual});
+ */
+const areStatePropsEqual = (next, prev) => {
+  if (!prev.shipping && next.shipping) {
+    return false;
+  }
+  return true;
+};
+export default connect(mapStateToProps, null, null, {
+  areStatePropsEqual
+});

package/product/components/Header/Shipping/index.js

@@ -1,5 +1,34 @@
-import React,{Fragment,memo}from'react';import PropTypes from'prop-types';import Portal from'@shopgate/pwa-common/components/Portal';import{PRODUCT_SHIPPING,PRODUCT_SHIPPING_AFTER,PRODUCT_SHIPPING_BEFORE}from'@shopgate/pwa-common-commerce/product/constants/Portals';import PlaceholderLabel from'@shopgate/pwa-ui-shared/PlaceholderLabel';import Label from"./components/Label";import connect from"./connector";import styles from"./style";/**
+import React, { Fragment, memo } from 'react';
+import PropTypes from 'prop-types';
+import Portal from '@shopgate/pwa-common/components/Portal';
+import { PRODUCT_SHIPPING, PRODUCT_SHIPPING_AFTER, PRODUCT_SHIPPING_BEFORE } from '@shopgate/pwa-common-commerce/product/constants/Portals';
+import PlaceholderLabel from '@shopgate/pwa-ui-shared/PlaceholderLabel';
+import Label from "./components/Label";
+import connect from "./connector";
+import styles from "./style";
+
+/**
  * The Shipping Info component.
  * @param {Object} props The component props.
  * @return {JSX}
- */var Shipping=function Shipping(_ref){var shipping=_ref.shipping;return React.createElement(Fragment,null,React.createElement(Portal,{name:PRODUCT_SHIPPING_BEFORE}),React.createElement(Portal,{name:PRODUCT_SHIPPING},React.createElement(PlaceholderLabel,{className:styles.placeholder,ready:shipping!==null},shipping&&typeof shipping.price!=='undefined'&&shipping.price!==null&&React.createElement(Label,{className:"".concat(styles.shipping," engage__product__header__shipping"),price:shipping.price,currency:shipping.currency}))),React.createElement(Portal,{name:PRODUCT_SHIPPING_AFTER}));};Shipping.defaultProps={shipping:null};export default connect(memo(Shipping));
+ */
+const Shipping = ({
+  shipping
+}) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Portal, {
+  name: PRODUCT_SHIPPING_BEFORE
+}), /*#__PURE__*/React.createElement(Portal, {
+  name: PRODUCT_SHIPPING
+}, /*#__PURE__*/React.createElement(PlaceholderLabel, {
+  className: styles.placeholder,
+  ready: shipping !== null
+}, shipping && typeof shipping.price !== 'undefined' && shipping.price !== null && /*#__PURE__*/React.createElement(Label, {
+  className: `${styles.shipping} engage__product__header__shipping`,
+  price: shipping.price,
+  currency: shipping.currency
+}))), /*#__PURE__*/React.createElement(Portal, {
+  name: PRODUCT_SHIPPING_AFTER
+}));
+Shipping.defaultProps = {
+  shipping: null
+};
+export default connect(/*#__PURE__*/memo(Shipping));

package/product/components/Header/Shipping/mock.js

@@ -1 +1,38 @@
-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);}export var mockedStoreWithShippingPrice={product:{shippingByProductId:{fakeId:{shipping:{price:1,currency:'EUR'}}}}};export var mockedStoreWithFreeShipping={product:_extends({},mockedStoreWithShippingPrice.product,{shippingByProductId:{fakeId:{shipping:{price:0,currency:'EUR'}}}})};export var mockedStoreWithUnknownShipping={product:_extends({},mockedStoreWithShippingPrice.product,{shippingByProductId:{fakeId:{shipping:{price:null,currency:'EUR'}}}})};
+export const mockedStoreWithShippingPrice = {
+  product: {
+    shippingByProductId: {
+      fakeId: {
+        shipping: {
+          price: 1,
+          currency: 'EUR'
+        }
+      }
+    }
+  }
+};
+export const mockedStoreWithFreeShipping = {
+  product: {
+    ...mockedStoreWithShippingPrice.product,
+    shippingByProductId: {
+      fakeId: {
+        shipping: {
+          price: 0,
+          currency: 'EUR'
+        }
+      }
+    }
+  }
+};
+export const mockedStoreWithUnknownShipping = {
+  product: {
+    ...mockedStoreWithShippingPrice.product,
+    shippingByProductId: {
+      fakeId: {
+        shipping: {
+          price: null,
+          currency: 'EUR'
+        }
+      }
+    }
+  }
+};

package/product/components/Header/Shipping/spec.js

@@ -1,5 +1,34 @@
-import React from'react';import{Provider}from'react-redux';import configureStore from'redux-mock-store';import mockRenderOptions from'@shopgate/pwa-common/helpers/mocks/mockRenderOptions';import{mount}from'enzyme';import Shipping from"./index";import{mockedStoreWithShippingPrice,mockedStoreWithFreeShipping,mockedStoreWithUnknownShipping}from"./mock";var mockedStore=configureStore();describe('Shipping label',function(){/**
+import React from 'react';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOptions';
+import { mount } from 'enzyme';
+import Shipping from "./index";
+import { mockedStoreWithShippingPrice, mockedStoreWithFreeShipping, mockedStoreWithUnknownShipping } from "./mock";
+const mockedStore = configureStore();
+describe('Shipping label', () => {
+  /**
    * Creates connected the component
    * @param {Object} state The mocked redux state
    * @return {ReactWrapper}
-   */var createComponent=function createComponent(state){return mount(React.createElement(Provider,{store:mockedStore(state)},React.createElement(Shipping,{productId:"fakeId"})),mockRenderOptions);};it('should render shipping price',function(){var component=createComponent(mockedStoreWithShippingPrice);expect(component).toMatchSnapshot();expect(component.html().includes('shipping.cost')).toBe(true);});it('should render free shipping',function(){var component=createComponent(mockedStoreWithFreeShipping);expect(component).toMatchSnapshot();expect(component.html().includes('shipping.free')).toBe(true);});it('should not render when shipping is unknown',function(){var component=createComponent(mockedStoreWithUnknownShipping);expect(component.isEmptyRender()).toBe(true);});});
+   */
+  const createComponent = state => mount(/*#__PURE__*/React.createElement(Provider, {
+    store: mockedStore(state)
+  }, /*#__PURE__*/React.createElement(Shipping, {
+    productId: "fakeId"
+  })), mockRenderOptions);
+  it('should render shipping price', () => {
+    const component = createComponent(mockedStoreWithShippingPrice);
+    expect(component).toMatchSnapshot();
+    expect(component.html().includes('shipping.cost')).toBe(true);
+  });
+  it('should render free shipping', () => {
+    const component = createComponent(mockedStoreWithFreeShipping);
+    expect(component).toMatchSnapshot();
+    expect(component.html().includes('shipping.free')).toBe(true);
+  });
+  it('should not render when shipping is unknown', () => {
+    const component = createComponent(mockedStoreWithUnknownShipping);
+    expect(component.isEmptyRender()).toBe(true);
+  });
+});

package/product/components/Header/Shipping/style.js

@@ -1 +1,14 @@
-import{css}from'glamor';var placeholder=css({height:16,width:'70%',marginTop:5,marginBottom:2}).toString();var shipping=css({fontSize:'0.875rem'}).toString();export default{placeholder:placeholder,shipping:shipping};
+import { css } from 'glamor';
+const placeholder = css({
+  height: 16,
+  width: '70%',
+  marginTop: 5,
+  marginBottom: 2
+}).toString();
+const shipping = css({
+  fontSize: '0.875rem'
+}).toString();
+export default {
+  placeholder,
+  shipping
+};

package/product/components/Header/Tiers/components/Tier/index.js

@@ -1,6 +1,39 @@
-import React,{memo}from'react';import PropTypes from'prop-types';import I18n from'@shopgate/pwa-common/components/I18n';import styles from"../../style";/**
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import I18n from '@shopgate/pwa-common/components/I18n';
+import styles from "../../style";
+
+/**
  * @param {Object} props The component props.
  * @returns {JSX}
- */var Tier=function Tier(_ref){var tier=_ref.tier,price=_ref.price;// Skip tier with quantity 1
-if(tier.from<=1){return null;}var i18nKey=tier.from===tier.to?'price.tier.set':'price.tier.range';var params={from:tier.from};return(// eslint-disable-next-line jsx-a11y/aria-role
-React.createElement(I18n.Text,{string:i18nKey,params:params,key:tier.from,className:styles.tier,role:"text"},React.createElement(I18n.Price,{forKey:"price",price:tier.unitPrice,currency:price.currency,className:styles.price})));};export default memo(Tier);
+ */
+const Tier = ({
+  tier,
+  price
+}) => {
+  // Skip tier with quantity 1
+  if (tier.from <= 1) {
+    return null;
+  }
+  const i18nKey = tier.from === tier.to ? 'price.tier.set' : 'price.tier.range';
+  const params = {
+    from: tier.from
+  };
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/aria-role
+    React.createElement(I18n.Text, {
+      string: i18nKey,
+      params: params,
+      key: tier.from,
+      className: styles.tier,
+      role: "text"
+    }, /*#__PURE__*/React.createElement(I18n.Price, {
+      forKey: "price",
+      price: tier.unitPrice,
+      currency: price.currency,
+      className: styles.price
+    }))
+  );
+};
+export default /*#__PURE__*/memo(Tier);

package/product/components/Header/Tiers/components/Tier/spec.js

@@ -1 +1,47 @@
-import React from'react';import{shallow}from'enzyme';import Tier from"./index";describe('<Tier />',function(){describe('Rendering with data',function(){it('should render tier prices when tier prices are available',function(){var price={tiers:[{from:1,to:2,unitPrice:92.5},{from:3,to:5,unitPrice:77.5},{from:6,to:null,unitPrice:68.5}],currency:'USD'};var tier={from:3,to:5,unitPrice:77.5};var wrapper=shallow(React.createElement(Tier,{price:price,tier:tier}));expect(wrapper).toMatchSnapshot();});});describe('Rendering without data',function(){it('should render nothing when tier from is less then 1',function(){var tier={from:1};var wrapper=shallow(React.createElement(Tier,{tier:tier,price:{}}));expect(wrapper).toBeEmptyRender();});});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import Tier from "./index";
+describe('<Tier />', () => {
+  describe('Rendering with data', () => {
+    it('should render tier prices when tier prices are available', () => {
+      const price = {
+        tiers: [{
+          from: 1,
+          to: 2,
+          unitPrice: 92.5
+        }, {
+          from: 3,
+          to: 5,
+          unitPrice: 77.5
+        }, {
+          from: 6,
+          to: null,
+          unitPrice: 68.5
+        }],
+        currency: 'USD'
+      };
+      const tier = {
+        from: 3,
+        to: 5,
+        unitPrice: 77.5
+      };
+      const wrapper = shallow(/*#__PURE__*/React.createElement(Tier, {
+        price: price,
+        tier: tier
+      }));
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+  describe('Rendering without data', () => {
+    it('should render nothing when tier from is less then 1', () => {
+      const tier = {
+        from: 1
+      };
+      const wrapper = shallow(/*#__PURE__*/React.createElement(Tier, {
+        tier: tier,
+        price: {}
+      }));
+      expect(wrapper).toBeEmptyRender();
+    });
+  });
+});

package/product/components/Header/Tiers/connector.js

@@ -1,10 +1,27 @@
-import{connect}from'react-redux';import{getProductPriceData}from'@shopgate/pwa-common-commerce/product';/**
+import { connect } from 'react-redux';
+import { getProductPriceData } from '@shopgate/pwa-common-commerce/product';
+
+/**
  * Maps the contents of the state to the component props.
  * @param {Object} state The current application state.
  * @param {Object} props The component props.
  * @return {Object} The extended component props.
- */var mapStateToProps=function mapStateToProps(state,props){return{price:getProductPriceData(state,props)};};/**
+ */
+const mapStateToProps = (state, props) => ({
+  price: getProductPriceData(state, props)
+});
+
+/**
  * @param {Object} next The next component props.
  * @param {Object} prev The current component props.
  * @return {boolean}
- */var areStatePropsEqual=function areStatePropsEqual(next,prev){if(!prev.price&&next.price){return false;}return true;};export default connect(mapStateToProps,null,null,{areStatePropsEqual:areStatePropsEqual});
+ */
+const areStatePropsEqual = (next, prev) => {
+  if (!prev.price && next.price) {
+    return false;
+  }
+  return true;
+};
+export default connect(mapStateToProps, null, null, {
+  areStatePropsEqual
+});

package/product/components/Header/Tiers/index.js

@@ -1,5 +1,37 @@
-import React,{Fragment,memo}from'react';import PropTypes from'prop-types';import Portal from'@shopgate/pwa-common/components/Portal';import{PRODUCT_TIERS,PRODUCT_TIERS_AFTER,PRODUCT_TIERS_BEFORE}from'@shopgate/pwa-common-commerce/product/constants/Portals';import Tier from"./components/Tier";import connect from"./connector";import styles from"./style";/**
+import React, { Fragment, memo } from 'react';
+import PropTypes from 'prop-types';
+import Portal from '@shopgate/pwa-common/components/Portal';
+import { PRODUCT_TIERS, PRODUCT_TIERS_AFTER, PRODUCT_TIERS_BEFORE } from '@shopgate/pwa-common-commerce/product/constants/Portals';
+import Tier from "./components/Tier";
+import connect from "./connector";
+import styles from "./style";
+
+/**
  * The Tiers component.
  * @param {Object} props The component props.
  * @return {JSX}
- */var Tiers=function Tiers(_ref){var price=_ref.price;if(!(price&&price.tiers&&price.tiers.length>0)){return null;}return React.createElement(Fragment,null,React.createElement(Portal,{name:PRODUCT_TIERS_BEFORE}),React.createElement(Portal,{name:PRODUCT_TIERS},React.createElement("div",{className:"".concat(styles.wrapper," engage__product__header__tiers")},price.tiers.map(function(tier){return React.createElement(Tier,{tier:tier,price:price,key:"".concat(Object.values(tier).join('_'))});}))),React.createElement(Portal,{name:PRODUCT_TIERS_AFTER}));};Tiers.defaultProps={price:null};export default connect(memo(Tiers));
+ */
+const Tiers = ({
+  price
+}) => {
+  if (!(price && price.tiers && price.tiers.length > 0)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Portal, {
+    name: PRODUCT_TIERS_BEFORE
+  }), /*#__PURE__*/React.createElement(Portal, {
+    name: PRODUCT_TIERS
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${styles.wrapper} engage__product__header__tiers`
+  }, price.tiers.map(tier => /*#__PURE__*/React.createElement(Tier, {
+    tier: tier,
+    price: price,
+    key: `${Object.values(tier).join('_')}`
+  })))), /*#__PURE__*/React.createElement(Portal, {
+    name: PRODUCT_TIERS_AFTER
+  }));
+};
+Tiers.defaultProps = {
+  price: null
+};
+export default connect(/*#__PURE__*/memo(Tiers));