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

package/Dialog/components/PipelineErrorDialog/spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import PipelineErrorDialog from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/a11y/components');
 describe('<PipelineErrorDialog />', () => {
   const defaultParams = {
@@ -10,7 +11,7 @@ describe('<PipelineErrorDialog />', () => {
     request: {}
   };
   it('should render with minimal props', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(PipelineErrorDialog, {
+    const wrapper = mount(/*#__PURE__*/_jsx(PipelineErrorDialog, {
       actions: [],
       params: defaultParams
     }));
@@ -18,7 +19,7 @@ describe('<PipelineErrorDialog />', () => {
   });
   it('should show a custom message if a message is is provided', () => {
     const message = 'Custom message';
-    const wrapper = mount(/*#__PURE__*/React.createElement(PipelineErrorDialog, {
+    const wrapper = mount(/*#__PURE__*/_jsx(PipelineErrorDialog, {
       actions: [],
       message: message,
       params: defaultParams
@@ -27,7 +28,7 @@ describe('<PipelineErrorDialog />', () => {
     expect(wrapper.html()).toMatch(message);
   });
   it('should switch modes on tap', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(PipelineErrorDialog, {
+    const wrapper = mount(/*#__PURE__*/_jsx(PipelineErrorDialog, {
       actions: [],
       params: defaultParams
     }));
@@ -51,7 +52,7 @@ describe('<PipelineErrorDialog />', () => {
   });
   it('should not switch modes if tapped too slow', () => {
     jest.useFakeTimers();
-    const wrapper = mount(/*#__PURE__*/React.createElement(PipelineErrorDialog, {
+    const wrapper = mount(/*#__PURE__*/_jsx(PipelineErrorDialog, {
       actions: [],
       params: defaultParams
     }));

package/Dialog/components/TextMessageDialog/index.js

@@ -10,20 +10,22 @@ import BasicDialog from "../BasicDialog";
  * @param {Object} props The component properties.
  * @returns {JSX} The rendered component.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TextMessageDialog = ({
   actions,
   message,
   title,
   params,
   children
-}) => /*#__PURE__*/React.createElement(BasicDialog, {
+}) => /*#__PURE__*/_jsxs(BasicDialog, {
   title: title,
-  actions: actions
-}, /*#__PURE__*/React.createElement("span", {
-  dangerouslySetInnerHTML: {
-    __html: nl2br(i18n.text(message, params))
-  }
-}), children);
+  actions: actions,
+  children: [/*#__PURE__*/_jsx("span", {
+    dangerouslySetInnerHTML: {
+      __html: nl2br(i18n.text(message, params))
+    }
+  }), children]
+});
 TextMessageDialog.defaultProps = {
   title: BasicDialog.defaultProps.title,
   params: I18n.Text.defaultProps.params,

package/Dialog/components/TextMessageDialog/spec.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import TextMessageDialog from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 const message = 'This is the message.';
 const title = 'This is the title.';
 jest.mock('@shopgate/engage/a11y/components');
 describe('<TextMessageDialog />', () => {
   it('should render with minimal props', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(TextMessageDialog, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(TextMessageDialog, {
       message: message,
       actions: []
     }));
@@ -14,7 +15,7 @@ describe('<TextMessageDialog />', () => {
     expect(wrapper.html()).toMatch(message);
   });
   it('should render with title and message', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(TextMessageDialog, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(TextMessageDialog, {
       title: title,
       message: message,
       actions: []
@@ -23,7 +24,7 @@ describe('<TextMessageDialog />', () => {
     expect(wrapper.html()).toMatch(title);
   });
   it('should render with title, message and messageParams', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(TextMessageDialog, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(TextMessageDialog, {
       title: title,
       message: "Message with {name}",
       params: {
@@ -38,7 +39,7 @@ describe('<TextMessageDialog />', () => {
       label: 'fooAction',
       action: () => {}
     }];
-    const wrapper = shallow(/*#__PURE__*/React.createElement(TextMessageDialog, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(TextMessageDialog, {
       title: title,
       message: message,
       actions: actions
@@ -47,8 +48,10 @@ describe('<TextMessageDialog />', () => {
     expect(wrapper.html()).toMatch(actions[0].label);
   });
   it('should pass title through', () => {
-    const customTitle = /*#__PURE__*/React.createElement("div", null, "Title");
-    const wrapper = shallow(/*#__PURE__*/React.createElement(TextMessageDialog, {
+    const customTitle = /*#__PURE__*/_jsx("div", {
+      children: "Title"
+    });
+    const wrapper = shallow(/*#__PURE__*/_jsx(TextMessageDialog, {
       title: customTitle,
       message: message,
       params: {},

package/Dialog/components/VariantSelectModal/index.js

@@ -14,6 +14,7 @@ import connect from "./connector";
  * @param {string} navigate The navigate action.
  * @return {Array} Reordered and extended actions.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const reorderActions = (actions, {
   productId
 }, navigate) => {
@@ -61,12 +62,13 @@ const VariantSelectModal = ({
   params
 }) => {
   const parsedActions = reorderActions(actions, params, navigate);
-  return /*#__PURE__*/React.createElement(BasicDialog, {
+  return /*#__PURE__*/_jsx(BasicDialog, {
     title: title,
-    actions: parsedActions
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: message
-  }));
+    actions: parsedActions,
+    children: /*#__PURE__*/_jsx(I18n.Text, {
+      string: message
+    })
+  });
 };
 VariantSelectModal.defaultProps = {
   params: {

package/Dialog/components/VariantSelectModal/spec.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { UnwrappedVariantSelectModal as VariantSelectModal } from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 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, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(VariantSelectModal, {
       message: message,
       actions: [],
       navigate: () => {}
@@ -37,10 +38,12 @@ describe('<VariantSelectModal />', () => {
       message,
       title,
       params,
-      actions: [...actions],
+      actions: [].concat(actions),
       navigate: mockNavigate
     };
-    const wrapper = shallow(/*#__PURE__*/React.createElement(VariantSelectModal, mockedProps));
+    const wrapper = shallow(/*#__PURE__*/_jsx(VariantSelectModal, {
+      ...mockedProps
+    }));
     expect(wrapper).toMatchSnapshot();
     const reordered = wrapper.find('BasicDialog').props().actions;
     const last = reordered.slice(-1)[0];

package/Dialog/index.js

@@ -10,6 +10,7 @@ import TextMessageDialog from "./components/TextMessageDialog";
 import HtmlContentDialog from "./components/HtmlContentDialog";
 import BasicDialog from "./components/BasicDialog";
 import VariantSelectModal from "./components/VariantSelectModal";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const dialogTypes = {
   [DIALOG_TEXT_MESSAGE]: TextMessageDialog,
   [DIALOG_HTML_CONTENT]: HtmlContentDialog,
@@ -74,7 +75,7 @@ const Dialog = ({
   }
   let dialogTitle = title;
   if (titleParams) {
-    dialogTitle = /*#__PURE__*/React.createElement(I18n.Text, {
+    dialogTitle = /*#__PURE__*/_jsx(I18n.Text, {
       string: title,
       params: titleParams
     });
@@ -105,15 +106,18 @@ const Dialog = ({
       });
     };
   }, []);
-  return /*#__PURE__*/React.createElement(Modal, {
+  return /*#__PURE__*/_jsxs(Modal, {
     classes: {
       container: 'ui-shared__dialog-modal'
-    }
-  }, /*#__PURE__*/React.createElement(Backdrop, {
-    isVisible: true,
-    level: 0,
-    opacity: 30
-  }), /*#__PURE__*/React.createElement(DialogComponent, dialogProps));
+    },
+    children: [/*#__PURE__*/_jsx(Backdrop, {
+      isVisible: true,
+      level: 0,
+      opacity: 30
+    }), /*#__PURE__*/_jsx(DialogComponent, {
+      ...dialogProps
+    })]
+  });
 };
 Dialog.defaultProps = {
   onConfirm: () => {},

package/Dialog/spec.js

@@ -3,18 +3,19 @@ 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";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock("./components/VariantSelectModal", () => {
   /**
    * VariantSelectModal mock.
    * @return {JSX}
    */
-  const VariantSelectModal = () => /*#__PURE__*/React.createElement("div", null);
+  const VariantSelectModal = () => /*#__PURE__*/_jsx("div", {});
   return VariantSelectModal;
 });
 jest.mock('@shopgate/engage/components');
 describe('<Dialog />', () => {
   it('should render without props', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Dialog, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Dialog, {
       modal: {
         message: 'msg'
       }
@@ -23,7 +24,7 @@ describe('<Dialog />', () => {
     expect(wrapper.find('TextMessageDialog').length).toBe(1);
   });
   it('should render BasicDialog when no message given', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Dialog, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Dialog, {
       modal: {
         message: null
       }
@@ -38,7 +39,7 @@ describe('<Dialog />', () => {
       pipeline: '',
       request: {}
     };
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Dialog, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Dialog, {
       modal: {
         type: MODAL_PIPELINE_ERROR,
         params
@@ -52,7 +53,7 @@ describe('<Dialog />', () => {
     const params = {
       productId: 'product_1'
     };
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Dialog, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Dialog, {
       modal: {
         message: 'Test',
         type: MODAL_VARIANT_SELECT,
@@ -70,7 +71,7 @@ describe('<Dialog />', () => {
     };
 
     // eslint-disable-next-line extra-rules/no-single-line-objects
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Dialog, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(Dialog, {
       modal: {
         title,
         titleParams

package/DiscountBadge/index.js

@@ -11,22 +11,24 @@ import styles from "./style";
  * @param {string} props.text The text contents of the component.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const DiscountBadge = ({
   text,
   className,
   display,
   discount
-}) => /*#__PURE__*/React.createElement("div", {
+}) => /*#__PURE__*/_jsx("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
-}));
+  tabIndex: -1,
+  children: /*#__PURE__*/_jsx(I18n.Text, {
+    className: `${styles[display]} ${className} theme__discount-badge`,
+    string: text,
+    params: [discount],
+    "aria-hidden": true
+  })
+});
 DiscountBadge.defaultProps = {
   className: '',
   discount: null,

package/DiscountBadge/spec.js

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

package/FavoritesButton/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import appConfig from '@shopgate/pwa-common/helpers/config';
@@ -12,95 +13,103 @@ import connect from "./connector";
 /**
  * The favorites button component.
  */
-class FavoritesButton extends Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let FavoritesButton = /*#__PURE__*/function (_Component) {
   /**
    * Construct and init state
    * @param {Object} props Component props
    */
-  constructor(props) {
-    super(props);
+  function FavoritesButton(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Callback for the moment when the ripple animation is done.
      */
-    this.onRippleComplete = () => {
-      this.props.onRippleComplete(this.props.active);
+    _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 => {
+    _this.handleClick = event => {
       event.preventDefault();
       event.stopPropagation();
-      if (this.props.once && this.clickedOnce) {
+      if (_this.props.once && _this.clickedOnce) {
         return;
       }
-      this.clickedOnce = true;
-      if (!this.props.productId) {
+      _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);
+      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.props.removeFavorites(_this.props.productId, _this.props.removeWithRelatives);
+        }, _this.props.removeThrottle);
       }
     };
-    this.clickedOnce = false;
+    _this.clickedOnce = false;
+    return _this;
   }
+  _inheritsLoose(FavoritesButton, _Component);
+  var _proto = FavoritesButton.prototype;
   /**
    * Returns text for aria-label.
    * @returns {string}
    */
-  getLabel() {
+  _proto.getLabel = function 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}
    */
-  renderIcon() {
+  _proto.renderIcon = function renderIcon() {
     if (!this.props.loadWishlistOnAppStartEnabled || this.props.wishlistItemQuantityEnabled && !this.props.active) {
-      return /*#__PURE__*/React.createElement(HeartPlusOutlineIcon, null);
+      return /*#__PURE__*/_jsx(HeartPlusOutlineIcon, {});
     }
     if (this.props.wishlistItemQuantityEnabled && this.props.active) {
-      return /*#__PURE__*/React.createElement(HeartPlus, null);
+      return /*#__PURE__*/_jsx(HeartPlus, {});
     }
     if (this.props.active) {
-      return /*#__PURE__*/React.createElement(HeartIcon, null);
+      return /*#__PURE__*/_jsx(HeartIcon, {});
     }
-    return /*#__PURE__*/React.createElement(HeartOutlineIcon, null);
+    return /*#__PURE__*/_jsx(HeartOutlineIcon, {});
   }
 
   /**
    * Renders the component.
    * @returns {JSX|null}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     if (!appConfig.hasFavorites) {
       return null;
     }
     const className = this.props.noShadow ? styles.buttonFlat : styles.button;
-    return /*#__PURE__*/React.createElement("button", {
+    return /*#__PURE__*/_jsx("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()));
-  }
-}
+      type: "button",
+      children: /*#__PURE__*/_jsx(Ripple, {
+        className: `${styles.ripple} ${this.props.rippleClassName}`,
+        onComplete: this.onRippleComplete,
+        children: this.renderIcon()
+      })
+    });
+  };
+  return FavoritesButton;
+}(Component);
 /**
  * Context types definition.
  * @type {{i18n: shim}}

package/FavoritesButton/spec.js

@@ -6,6 +6,7 @@ import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOpti
 import appConfig from '@shopgate/pwa-common/helpers/config';
 import FavoritesButton from "./index";
 import { mockedStateEmpty, mockedStateOnList, mockedStateNotOnList } from "./mock";
+import { jsx as _jsx } from "react/jsx-runtime";
 const mockedStore = configureStore();
 const dispatcher = jest.fn();
 jest.mock('@shopgate/pwa-common/helpers/config');
@@ -29,9 +30,12 @@ describe('<FavoritesButton />', () => {
   }) => {
     const store = mockedStore(mockedState);
     store.dispatch = dispatcher;
-    return mount(/*#__PURE__*/React.createElement(Provider, {
-      store: store
-    }, /*#__PURE__*/React.createElement(FavoritesButton, props)), mockRenderOptions);
+    return mount(/*#__PURE__*/_jsx(Provider, {
+      store: store,
+      children: /*#__PURE__*/_jsx(FavoritesButton, {
+        ...props
+      })
+    }), mockRenderOptions);
   };
   beforeEach(() => {
     dispatcher.mockReset();