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

package/Dialog/components/VariantSelectModal/spec.js

@@ -1,3 +1,52 @@
-import React from'react';import{shallow}from'enzyme';import{UnwrappedVariantSelectModal as VariantSelectModal}from"./index";var message='This is the message.';var title='This is the title.';jest.mock('@shopgate/engage/a11y/components');describe('<VariantSelectModal />',function(){it('should render with minimal props',function(){var wrapper=shallow(React.createElement(VariantSelectModal,{message:message,actions:[],navigate:function navigate(){}}));expect(wrapper).toMatchSnapshot();expect(wrapper.html()).toMatch(message);});it('should render the actions',function(){var mockConfirm=jest.fn();var mockNavigate=jest.fn();/**
+import React from 'react';
+import { shallow } from 'enzyme';
+import { UnwrappedVariantSelectModal as VariantSelectModal } from "./index";
+const message = 'This is the message.';
+const title = 'This is the title.';
+jest.mock('@shopgate/engage/a11y/components');
+describe('<VariantSelectModal />', () => {
+  it('should render with minimal props', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(VariantSelectModal, {
+      message: message,
+      actions: [],
+      navigate: () => {}
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.html()).toMatch(message);
+  });
+  it('should render the actions', () => {
+    const mockConfirm = jest.fn();
+    const mockNavigate = jest.fn();
+    /**
      * Mocks named function
-     */var onConfirm=function onConfirm(){mockConfirm();};var actions=[{label:'confirm',action:onConfirm},{label:'dismiss',action:function action(){}}];var params={productId:'product_1'};var mockedProps={message:message,title:title,params:params,actions:[].concat(actions),navigate:mockNavigate};var wrapper=shallow(React.createElement(VariantSelectModal,mockedProps));expect(wrapper).toMatchSnapshot();var reordered=wrapper.find('BasicDialog').props().actions;var last=reordered.slice(-1)[0];expect(last.label).toEqual(actions[0].label);last.action();expect(mockConfirm).toHaveBeenCalledTimes(1);expect(mockNavigate).toHaveBeenCalledTimes(1);});});
+     */
+    const onConfirm = () => {
+      mockConfirm();
+    };
+    const actions = [{
+      label: 'confirm',
+      action: onConfirm
+    }, {
+      label: 'dismiss',
+      action: () => {}
+    }];
+    const params = {
+      productId: 'product_1'
+    };
+    const mockedProps = {
+      message,
+      title,
+      params,
+      actions: [...actions],
+      navigate: mockNavigate
+    };
+    const wrapper = shallow(/*#__PURE__*/React.createElement(VariantSelectModal, mockedProps));
+    expect(wrapper).toMatchSnapshot();
+    const reordered = wrapper.find('BasicDialog').props().actions;
+    const last = reordered.slice(-1)[0];
+    expect(last.label).toEqual(actions[0].label);
+    last.action();
+    expect(mockConfirm).toHaveBeenCalledTimes(1);
+    expect(mockNavigate).toHaveBeenCalledTimes(1);
+  });
+});

package/Dialog/constants.js

@@ -1 +1,6 @@
-export var DIALOG_TEXT_MESSAGE='DIALOG_TEXT_MESSAGE';export var DIALOG_HTML_CONTENT='DIALOG_HTML_CONTENT';export var MODAL_VARIANT_SELECT='MODAL_VARIANT_SELECT';export var MODAL_ACTION_TYPE_NORMAL='normal';export var MODAL_ACTION_TYPE_PRIMARY='primary';export var MODAL_ACTION_TYPE_DANGER='danger';
+export const DIALOG_TEXT_MESSAGE = 'DIALOG_TEXT_MESSAGE';
+export const DIALOG_HTML_CONTENT = 'DIALOG_HTML_CONTENT';
+export const MODAL_VARIANT_SELECT = 'MODAL_VARIANT_SELECT';
+export const MODAL_ACTION_TYPE_NORMAL = 'normal';
+export const MODAL_ACTION_TYPE_PRIMARY = 'primary';
+export const MODAL_ACTION_TYPE_DANGER = 'danger';

package/Dialog/index.js

@@ -1,4 +1,24 @@
-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,{useEffect}from'react';import PropTypes from'prop-types';import Modal from'@shopgate/pwa-common/components/Modal';import Backdrop from'@shopgate/pwa-common/components/Backdrop';import{MODAL_PIPELINE_ERROR}from'@shopgate/pwa-common/constants/ModalTypes';import I18n from'@shopgate/pwa-common/components/I18n';import{DIALOG_TEXT_MESSAGE,MODAL_VARIANT_SELECT,MODAL_ACTION_TYPE_PRIMARY,MODAL_ACTION_TYPE_NORMAL,DIALOG_HTML_CONTENT}from"./constants";import PipelineErrorDialog from"./components/PipelineErrorDialog";import TextMessageDialog from"./components/TextMessageDialog";import HtmlContentDialog from"./components/HtmlContentDialog";import BasicDialog from"./components/BasicDialog";import VariantSelectModal from"./components/VariantSelectModal";var dialogTypes=_defineProperty(_defineProperty(_defineProperty(_defineProperty({},DIALOG_TEXT_MESSAGE,TextMessageDialog),DIALOG_HTML_CONTENT,HtmlContentDialog),MODAL_PIPELINE_ERROR,PipelineErrorDialog),MODAL_VARIANT_SELECT,VariantSelectModal);var supportsInert='inert'in HTMLElement.prototype;/**
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Modal from '@shopgate/pwa-common/components/Modal';
+import Backdrop from '@shopgate/pwa-common/components/Backdrop';
+import { MODAL_PIPELINE_ERROR } from '@shopgate/pwa-common/constants/ModalTypes';
+import I18n from '@shopgate/pwa-common/components/I18n';
+import { DIALOG_TEXT_MESSAGE, MODAL_VARIANT_SELECT, MODAL_ACTION_TYPE_PRIMARY, MODAL_ACTION_TYPE_NORMAL, DIALOG_HTML_CONTENT } from "./constants";
+import PipelineErrorDialog from "./components/PipelineErrorDialog";
+import TextMessageDialog from "./components/TextMessageDialog";
+import HtmlContentDialog from "./components/HtmlContentDialog";
+import BasicDialog from "./components/BasicDialog";
+import VariantSelectModal from "./components/VariantSelectModal";
+const dialogTypes = {
+  [DIALOG_TEXT_MESSAGE]: TextMessageDialog,
+  [DIALOG_HTML_CONTENT]: HtmlContentDialog,
+  [MODAL_PIPELINE_ERROR]: PipelineErrorDialog,
+  [MODAL_VARIANT_SELECT]: VariantSelectModal
+};
+const supportsInert = 'inert' in HTMLElement.prototype;
+
+/**
  * The main component for rendering dialogs.
  * This component takes care of choosing the correct component body for the given type
  * and render it on a modal overlay.
@@ -8,9 +28,96 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
  * @param {Function} props.onDismiss The function to call when the dismiss button is clicked.
  * @param {NodeList} props.children The children to render inside the modal.
  * @returns {JSX.Element}
- */var Dialog=function Dialog(_ref){var modal=_ref.modal,onConfirm=_ref.onConfirm,onDismiss=_ref.onDismiss,children=_ref.children;// Assemble the actions.
-var actions=[];var confirm=modal.confirm,dismiss=modal.dismiss,title=modal.title,titleParams=modal.titleParams,message=modal.message,params=modal.params,type=modal.type,confirmDisabled=modal.confirmDisabled,dismissDisabled=modal.dismissDisabled;// Push dismiss action first so the button is rendered first
-if(dismiss){// We have a dismiss label, add a dismiss action.
-actions.push({label:modal.dismiss,action:onDismiss,type:MODAL_ACTION_TYPE_PRIMARY,disabled:dismissDisabled});}if(confirm){// We have a confirm label, add a confirm action.
-actions.push({label:modal.confirm,action:onConfirm,type:MODAL_ACTION_TYPE_NORMAL,disabled:confirmDisabled});}var dialogType=type;if(!dialogType&&message){dialogType=DIALOG_TEXT_MESSAGE;}var dialogTitle=title;if(titleParams){dialogTitle=React.createElement(I18n.Text,{string:title,params:titleParams});}var dialogProps={actions:actions,title:dialogTitle,params:params,message:message||undefined,children:children};var DialogComponent=dialogTypes[dialogType]||BasicDialog;// Effect to toggle aria-hidden on all other modals when the dialog is open.
-useEffect(function(){var otherModals=document.querySelectorAll('.common__modal:not(.ui-shared__dialog-modal), .engage__sheet-drawer');otherModals.forEach(function(entry){if(supportsInert){entry.setAttribute('inert','');}else{entry.setAttribute('aria-hidden','true');}});return function(){otherModals.forEach(function(entry){entry.removeAttribute('inert');entry.removeAttribute('aria-hidden');});};},[]);return React.createElement(Modal,{classes:{container:'ui-shared__dialog-modal'}},React.createElement(Backdrop,{isVisible:true,level:0,opacity:30}),React.createElement(DialogComponent,dialogProps));};Dialog.defaultProps={onConfirm:function onConfirm(){},onDismiss:function onDismiss(){},children:null};export default Dialog;
+ */
+const Dialog = ({
+  modal,
+  onConfirm,
+  onDismiss,
+  children
+}) => {
+  // Assemble the actions.
+  const actions = [];
+  const {
+    confirm,
+    dismiss,
+    title,
+    titleParams,
+    message,
+    params,
+    type,
+    confirmDisabled,
+    dismissDisabled
+  } = modal;
+
+  // Push dismiss action first so the button is rendered first
+  if (dismiss) {
+    // We have a dismiss label, add a dismiss action.
+    actions.push({
+      label: modal.dismiss,
+      action: onDismiss,
+      type: MODAL_ACTION_TYPE_PRIMARY,
+      disabled: dismissDisabled
+    });
+  }
+  if (confirm) {
+    // We have a confirm label, add a confirm action.
+    actions.push({
+      label: modal.confirm,
+      action: onConfirm,
+      type: MODAL_ACTION_TYPE_NORMAL,
+      disabled: confirmDisabled
+    });
+  }
+  let dialogType = type;
+  if (!dialogType && message) {
+    dialogType = DIALOG_TEXT_MESSAGE;
+  }
+  let dialogTitle = title;
+  if (titleParams) {
+    dialogTitle = /*#__PURE__*/React.createElement(I18n.Text, {
+      string: title,
+      params: titleParams
+    });
+  }
+  const dialogProps = {
+    actions,
+    title: dialogTitle,
+    params,
+    message: message || undefined,
+    children
+  };
+  const DialogComponent = dialogTypes[dialogType] || BasicDialog;
+
+  // Effect to toggle aria-hidden on all other modals when the dialog is open.
+  useEffect(() => {
+    const otherModals = document.querySelectorAll('.common__modal:not(.ui-shared__dialog-modal), .engage__sheet-drawer');
+    otherModals.forEach(entry => {
+      if (supportsInert) {
+        entry.setAttribute('inert', '');
+      } else {
+        entry.setAttribute('aria-hidden', 'true');
+      }
+    });
+    return () => {
+      otherModals.forEach(entry => {
+        entry.removeAttribute('inert');
+        entry.removeAttribute('aria-hidden');
+      });
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Modal, {
+    classes: {
+      container: 'ui-shared__dialog-modal'
+    }
+  }, /*#__PURE__*/React.createElement(Backdrop, {
+    isVisible: true,
+    level: 0,
+    opacity: 30
+  }), /*#__PURE__*/React.createElement(DialogComponent, dialogProps));
+};
+Dialog.defaultProps = {
+  onConfirm: () => {},
+  onDismiss: () => {},
+  children: null
+};
+export default Dialog;

package/Dialog/spec.js

@@ -1,5 +1,83 @@
-import React from'react';import{shallow,ReactWrapper}from'enzyme';import{MODAL_PIPELINE_ERROR}from'@shopgate/pwa-common/constants/ModalTypes';import{MODAL_VARIANT_SELECT}from"./constants";import Dialog from"./index";jest.mock("./components/VariantSelectModal",function(){/**
+import React from 'react';
+import { shallow, ReactWrapper } from 'enzyme';
+import { MODAL_PIPELINE_ERROR } from '@shopgate/pwa-common/constants/ModalTypes';
+import { MODAL_VARIANT_SELECT } from "./constants";
+import Dialog from "./index";
+jest.mock("./components/VariantSelectModal", () => {
+  /**
    * VariantSelectModal mock.
    * @return {JSX}
-   */var VariantSelectModal=function VariantSelectModal(){return React.createElement("div",null);};return VariantSelectModal;});jest.mock('@shopgate/engage/components');describe('<Dialog />',function(){it('should render without props',function(){var wrapper=shallow(React.createElement(Dialog,{modal:{message:'msg'}}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('TextMessageDialog').length).toBe(1);});it('should render BasicDialog when no message given',function(){var wrapper=shallow(React.createElement(Dialog,{modal:{message:null}}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('BasicDialog').length).toBe(1);});it('should render a special dialog',function(){var params={errorCode:'',message:'',pipeline:'',request:{}};var wrapper=shallow(React.createElement(Dialog,{modal:{type:MODAL_PIPELINE_ERROR,params:params}}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('DefaultDialog').length).toBe(0);expect(wrapper.find('PipelineErrorDialog').length).toBe(1);});it('should render variant select dialog',function(){var params={productId:'product_1'};var wrapper=shallow(React.createElement(Dialog,{modal:{message:'Test',type:MODAL_VARIANT_SELECT,params:params}}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('DefaultDialog').length).toBe(0);expect(wrapper.find('VariantSelectModal').length).toBe(1);});it('should convert title into translatable element',function(){var title='translate.me';var titleParams={foo:'bar'};// eslint-disable-next-line extra-rules/no-single-line-objects
-var wrapper=shallow(React.createElement(Dialog,{modal:{title:title,titleParams:titleParams}}));var i18n=new ReactWrapper(wrapper.find('BasicDialog').prop('title'));expect(i18n.prop('string')).toEqual(title);expect(i18n.prop('params')).toEqual(titleParams);});});
+   */
+  const VariantSelectModal = () => /*#__PURE__*/React.createElement("div", null);
+  return VariantSelectModal;
+});
+jest.mock('@shopgate/engage/components');
+describe('<Dialog />', () => {
+  it('should render without props', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Dialog, {
+      modal: {
+        message: 'msg'
+      }
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('TextMessageDialog').length).toBe(1);
+  });
+  it('should render BasicDialog when no message given', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Dialog, {
+      modal: {
+        message: null
+      }
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('BasicDialog').length).toBe(1);
+  });
+  it('should render a special dialog', () => {
+    const params = {
+      errorCode: '',
+      message: '',
+      pipeline: '',
+      request: {}
+    };
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Dialog, {
+      modal: {
+        type: MODAL_PIPELINE_ERROR,
+        params
+      }
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('DefaultDialog').length).toBe(0);
+    expect(wrapper.find('PipelineErrorDialog').length).toBe(1);
+  });
+  it('should render variant select dialog', () => {
+    const params = {
+      productId: 'product_1'
+    };
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Dialog, {
+      modal: {
+        message: 'Test',
+        type: MODAL_VARIANT_SELECT,
+        params
+      }
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('DefaultDialog').length).toBe(0);
+    expect(wrapper.find('VariantSelectModal').length).toBe(1);
+  });
+  it('should convert title into translatable element', () => {
+    const title = 'translate.me';
+    const titleParams = {
+      foo: 'bar'
+    };
+
+    // eslint-disable-next-line extra-rules/no-single-line-objects
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Dialog, {
+      modal: {
+        title,
+        titleParams
+      }
+    }));
+    const i18n = new ReactWrapper(wrapper.find('BasicDialog').prop('title'));
+    expect(i18n.prop('string')).toEqual(title);
+    expect(i18n.prop('params')).toEqual(titleParams);
+  });
+});

package/DiscountBadge/index.js

@@ -1,7 +1,35 @@
-import React from'react';import PropTypes from'prop-types';import{I18n}from'@shopgate/engage/components';import{i18n}from'@shopgate/engage/core/helpers';import styles from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { I18n } from '@shopgate/engage/components';
+import { i18n } from '@shopgate/engage/core/helpers';
+import styles from "./style";
+
+/**
  * The discount badge component.
  * @param {Object} props The component props
  * @param {string} [props.className] Additional CSS style definitions
  * @param {string} props.text The text contents of the component.
  * @returns {JSX.Element}
- */var DiscountBadge=function DiscountBadge(_ref){var text=_ref.text,className=_ref.className,display=_ref.display,discount=_ref.discount;return React.createElement("div",{"data-test-id":text,className:"ui-shared__discount-badge","aria-label":"".concat(i18n.text('cart.discount'),": ").concat(text),tabIndex:-1},React.createElement(I18n.Text,{className:"".concat(styles[display]," ").concat(className," theme__discount-badge"),string:text,params:[discount],"aria-hidden":true}));};DiscountBadge.defaultProps={className:'',discount:null,display:'small'};export default DiscountBadge;
+ */
+const DiscountBadge = ({
+  text,
+  className,
+  display,
+  discount
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-test-id": text,
+  className: "ui-shared__discount-badge",
+  "aria-label": `${i18n.text('cart.discount')}: ${text}`,
+  tabIndex: -1
+}, /*#__PURE__*/React.createElement(I18n.Text, {
+  className: `${styles[display]} ${className} theme__discount-badge`,
+  string: text,
+  params: [discount],
+  "aria-hidden": true
+}));
+DiscountBadge.defaultProps = {
+  className: '',
+  discount: null,
+  display: 'small'
+};
+export default DiscountBadge;

package/DiscountBadge/spec.js

@@ -1 +1,19 @@
-import React from'react';import{shallow}from'enzyme';import DiscountBadge from"./index";jest.mock('@shopgate/engage/components');describe('<DiscountBadge />',function(){it('should render the text',function(){var wrapper=shallow(React.createElement(DiscountBadge,{text:"foo"}));expect(wrapper).toMatchSnapshot();});it('should render the text and discount',function(){var wrapper=shallow(React.createElement(DiscountBadge,{text:"SAVE {0}%",discount:20}));expect(wrapper).toMatchSnapshot();});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import DiscountBadge from "./index";
+jest.mock('@shopgate/engage/components');
+describe('<DiscountBadge />', () => {
+  it('should render the text', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(DiscountBadge, {
+      text: "foo"
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render the text and discount', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(DiscountBadge, {
+      text: "SAVE {0}%",
+      discount: 20
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/DiscountBadge/style.js

@@ -1,4 +1,36 @@
-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{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;var badge=_extends({background:"var(--color-primary, ".concat(colors.primary,")"),borderRadius:2,color:"var(--color-primary-contrast, ".concat(colors.primaryContrast,")"),padding:5,width:'100%',fontWeight:700,textAlign:'center',display:'flex',justifyContent:'center',alignItems:'center',lineHeight:1,whiteSpace:'nowrap'},themeConfig.variables.discountBadgeBase);/**
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors
+} = themeConfig;
+const badge = {
+  background: `var(--color-primary, ${colors.primary})`,
+  borderRadius: 2,
+  color: `var(--color-primary-contrast, ${colors.primaryContrast})`,
+  padding: 5,
+  width: '100%',
+  fontWeight: 700,
+  textAlign: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  lineHeight: 1,
+  whiteSpace: 'nowrap',
+  ...themeConfig.variables.discountBadgeBase
+};
+
+/**
  * The discount badge styles that can be selected by passing the style key.
  * @type {Object}
- */export default{small:css(_extends({},badge)).toString(),big:css(_extends({},badge,{paddingTop:5,paddingLeft:5,paddingRight:5})).toString()};
+ */
+export default {
+  small: css({
+    ...badge
+  }).toString(),
+  big: css({
+    ...badge,
+    paddingTop: 5,
+    paddingLeft: 5,
+    paddingRight: 5
+  }).toString()
+};

package/FavoritesButton/connector.js

@@ -1,8 +1,23 @@
-import{connect}from'react-redux';import{toggleFavoriteWithListChooser}from'@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';import{getLoadWishlistOnAppStartEnabled,getWishlistItemQuantityEnabled}from'@shopgate/engage/core/selectors/shopSettings';/**
+import { connect } from 'react-redux';
+import { toggleFavoriteWithListChooser } from '@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';
+import { getLoadWishlistOnAppStartEnabled, getWishlistItemQuantityEnabled } from '@shopgate/engage/core/selectors/shopSettings';
+
+/**
  * Creates the mapStateToProps connector function.
  * @returns {Function}
- */var makeMapStateToProps=function makeMapStateToProps(){return function(state){return{wishlistItemQuantityEnabled:getWishlistItemQuantityEnabled(state),loadWishlistOnAppStartEnabled:getLoadWishlistOnAppStartEnabled(state)};};};/**
+ */
+const makeMapStateToProps = () => state => ({
+  wishlistItemQuantityEnabled: getWishlistItemQuantityEnabled(state),
+  loadWishlistOnAppStartEnabled: getLoadWishlistOnAppStartEnabled(state)
+});
+
+/**
  * 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{addFavorites:function addFavorites(productId){return dispatch(toggleFavoriteWithListChooser(productId));},removeFavorites:function removeFavorites(productId,withRelatives){return dispatch(toggleFavoriteWithListChooser(productId,withRelatives));}};};export default connect(makeMapStateToProps,mapDispatchToProps);
+ */
+const mapDispatchToProps = dispatch => ({
+  addFavorites: productId => dispatch(toggleFavoriteWithListChooser(productId)),
+  removeFavorites: (productId, withRelatives) => dispatch(toggleFavoriteWithListChooser(productId, withRelatives))
+});
+export default connect(makeMapStateToProps, mapDispatchToProps);

package/FavoritesButton/index.js

@@ -1,24 +1,127 @@
-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 appConfig from'@shopgate/pwa-common/helpers/config';import HeartIcon from"../icons/HeartIcon";import HeartOutlineIcon from"../icons/HeartOutlineIcon";import HeartPlusOutlineIcon from"../icons/HeartPlusOutlineIcon";import HeartPlus from"../icons/HeartPlusIcon";import Ripple from"../Ripple";import styles from"./style";import connect from"./connector";/**
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import appConfig from '@shopgate/pwa-common/helpers/config';
+import HeartIcon from "../icons/HeartIcon";
+import HeartOutlineIcon from "../icons/HeartOutlineIcon";
+import HeartPlusOutlineIcon from "../icons/HeartPlusOutlineIcon";
+import HeartPlus from "../icons/HeartPlusIcon";
+import Ripple from "../Ripple";
+import styles from "./style";
+import connect from "./connector";
+
+/**
  * The favorites button component.
- */var FavoritesButton=/*#__PURE__*/function(_Component){/**
+ */
+class FavoritesButton extends Component {
+  /**
    * Construct and init state
    * @param {Object} props Component props
-   */function FavoritesButton(props){var _this2;_classCallCheck(this,FavoritesButton);_this2=_callSuper(this,FavoritesButton,[props]);/**
-   * Callback for the moment when the ripple animation is done.
-   */_defineProperty(_this2,"onRippleComplete",function(){_this2.props.onRippleComplete(_this2.props.active);});/**
-   * Adds or removes a given product ID from the favorite list.
-   * @param {Object} event The click event object.
-   */_defineProperty(_this2,"handleClick",function(event){event.preventDefault();event.stopPropagation();if(_this2.props.once&&_this2.clickedOnce){return;}_this2.clickedOnce=true;if(!_this2.props.productId){return;}// When wishlist item quantity is active, items cannot be removed via the button
-if(!_this2.props.active||_this2.props.wishlistItemQuantityEnabled){_this2.props.addFavorites(_this2.props.productId);}else{setTimeout(function(){_this2.props.removeFavorites(_this2.props.productId,_this2.props.removeWithRelatives);},_this2.props.removeThrottle);}});_this2.clickedOnce=false;return _this2;}_inherits(FavoritesButton,_Component);return _createClass(FavoritesButton,[{key:"getLabel",value:/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * Callback for the moment when the ripple animation is done.
+     */
+    this.onRippleComplete = () => {
+      this.props.onRippleComplete(this.props.active);
+    };
+    /**
+     * Adds or removes a given product ID from the favorite list.
+     * @param {Object} event The click event object.
+     */
+    this.handleClick = event => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.props.once && this.clickedOnce) {
+        return;
+      }
+      this.clickedOnce = true;
+      if (!this.props.productId) {
+        return;
+      }
+
+      // When wishlist item quantity is active, items cannot be removed via the button
+      if (!this.props.active || this.props.wishlistItemQuantityEnabled) {
+        this.props.addFavorites(this.props.productId);
+      } else {
+        setTimeout(() => {
+          this.props.removeFavorites(this.props.productId, this.props.removeWithRelatives);
+        }, this.props.removeThrottle);
+      }
+    };
+    this.clickedOnce = false;
+  }
+  /**
    * Returns text for aria-label.
    * @returns {string}
-   */function getLabel(){var _this$context$i18n=this.context.i18n(),__=_this$context$i18n.__;var lang=this.props.active?'favorites.remove':'favorites.add';return __(lang);}},{key:"renderIcon",value:/**
+   */
+  getLabel() {
+    const {
+      __
+    } = this.context.i18n();
+    const lang = this.props.active ? 'favorites.remove' : 'favorites.add';
+    return __(lang);
+  }
+  /**
    * Renders the heart icon as filled or outlined, depending on the favorite button being active.
    * @returns {JSX}
-   */function renderIcon(){if(!this.props.loadWishlistOnAppStartEnabled||this.props.wishlistItemQuantityEnabled&&!this.props.active){return React.createElement(HeartPlusOutlineIcon,null);}if(this.props.wishlistItemQuantityEnabled&&this.props.active){return React.createElement(HeartPlus,null);}if(this.props.active){return React.createElement(HeartIcon,null);}return React.createElement(HeartOutlineIcon,null);}/**
+   */
+  renderIcon() {
+    if (!this.props.loadWishlistOnAppStartEnabled || this.props.wishlistItemQuantityEnabled && !this.props.active) {
+      return /*#__PURE__*/React.createElement(HeartPlusOutlineIcon, null);
+    }
+    if (this.props.wishlistItemQuantityEnabled && this.props.active) {
+      return /*#__PURE__*/React.createElement(HeartPlus, null);
+    }
+    if (this.props.active) {
+      return /*#__PURE__*/React.createElement(HeartIcon, null);
+    }
+    return /*#__PURE__*/React.createElement(HeartOutlineIcon, null);
+  }
+
+  /**
    * Renders the component.
    * @returns {JSX|null}
-   */},{key:"render",value:function render(){if(!appConfig.hasFavorites){return null;}var className=this.props.noShadow?styles.buttonFlat:styles.button;return React.createElement("button",{"aria-label":this.getLabel(),"aria-hidden":this.props['aria-hidden'],className:"ui-shared__favorites-button ".concat(className," ").concat(this.props.className),onClick:this.handleClick,"data-test-id":"favoriteButton",type:"button"},React.createElement(Ripple,{className:"".concat(styles.ripple," ").concat(this.props.rippleClassName),onComplete:this.onRippleComplete},this.renderIcon()));}}]);}(Component);/**
-   * Context types definition.
-   * @type {{i18n: shim}}
-   */_defineProperty(FavoritesButton,"contextTypes",{i18n:PropTypes.func});_defineProperty(FavoritesButton,"defaultProps",{active:false,addFavorites:function addFavorites(){},'aria-hidden':null,className:'',noShadow:false,once:false,onRippleComplete:function onRippleComplete(){},productId:null,removeFavorites:function removeFavorites(){},removeThrottle:0,removeWithRelatives:false,rippleClassName:'',wishlistItemQuantityEnabled:false,loadWishlistOnAppStartEnabled:true});export default connect(FavoritesButton);
+   */
+  render() {
+    if (!appConfig.hasFavorites) {
+      return null;
+    }
+    const className = this.props.noShadow ? styles.buttonFlat : styles.button;
+    return /*#__PURE__*/React.createElement("button", {
+      "aria-label": this.getLabel(),
+      "aria-hidden": this.props['aria-hidden'],
+      className: `ui-shared__favorites-button ${className} ${this.props.className}`,
+      onClick: this.handleClick,
+      "data-test-id": "favoriteButton",
+      type: "button"
+    }, /*#__PURE__*/React.createElement(Ripple, {
+      className: `${styles.ripple} ${this.props.rippleClassName}`,
+      onComplete: this.onRippleComplete
+    }, this.renderIcon()));
+  }
+}
+/**
+ * Context types definition.
+ * @type {{i18n: shim}}
+ */
+FavoritesButton.contextTypes = {
+  i18n: PropTypes.func
+};
+FavoritesButton.defaultProps = {
+  active: false,
+  addFavorites: () => {},
+  'aria-hidden': null,
+  className: '',
+  noShadow: false,
+  once: false,
+  onRippleComplete: () => {},
+  productId: null,
+  removeFavorites: () => {},
+  removeThrottle: 0,
+  removeWithRelatives: false,
+  rippleClassName: '',
+  wishlistItemQuantityEnabled: false,
+  loadWishlistOnAppStartEnabled: true
+};
+export default connect(FavoritesButton);

package/FavoritesButton/mock.js

@@ -1,10 +1,56 @@
-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;}var mockedProduct1={productId:'foo'};/**
+const mockedProduct1 = {
+  productId: 'foo'
+};
+
+/**
  * Mocked state with product only. Favorites not set.
  * @type {Object}
- */export var mockedStateNotOnList={product:{productsById:_defineProperty({},mockedProduct1.productId,{productData:mockedProduct1})},favorites:{products:{ids:[mockedProduct1.productId]}}};/**
+ */
+export const mockedStateNotOnList = {
+  product: {
+    productsById: {
+      [mockedProduct1.productId]: {
+        productData: mockedProduct1
+      }
+    }
+  },
+  favorites: {
+    products: {
+      ids: [mockedProduct1.productId]
+    }
+  }
+};
+
+/**
  * Mocked state with product only. Favorites not set.
  * @type {Object}
- */export var mockedStateOnList={product:{productsById:_defineProperty({},mockedProduct1.productId,{productData:mockedProduct1})},favorites:{products:{ids:[mockedProduct1.productId]}}};/**
+ */
+export const mockedStateOnList = {
+  product: {
+    productsById: {
+      [mockedProduct1.productId]: {
+        productData: mockedProduct1
+      }
+    }
+  },
+  favorites: {
+    products: {
+      ids: [mockedProduct1.productId]
+    }
+  }
+};
+
+/**
  * Mocked state without data.
  * @type {{product: {, favorites: {}}}}
- */export var mockedStateEmpty={product:{productsById:{}},favorites:{products:{ids:[]}}};
+ */
+export const mockedStateEmpty = {
+  product: {
+    productsById: {}
+  },
+  favorites: {
+    products: {
+      ids: []
+    }
+  }
+};