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

package/components/CountdownTimer/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import padStart from 'lodash/padStart';
@@ -11,6 +12,7 @@ import I18n from "../I18n";
  * @param {number} seconds The remaining seconds.
  * @return {Object} String and params for the i18n component
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const getFormattedTimeString = (days, hours, minutes, seconds) => {
   const formattedHours = padStart(hours, 2, '0');
   const formattedMinutes = padStart(minutes, 2, '0');
@@ -44,27 +46,31 @@ const createFormattedTime = timeSpanInput => {
 /**
  * The Countdown timer component.
  */
-class CountdownTimer extends Component {
+let CountdownTimer = /*#__PURE__*/function (_Component) {
   /**
    * The component constructor.
    * @param {Object} props The component properties.
    */
-  constructor(props) {
-    super(props);
-    this.intervalHandle = null;
-    this.remainingTime = this.getRemainingTime();
-    this.expired = this.remainingTime <= 0;
+  function CountdownTimer(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
+    _this.intervalHandle = null;
+    _this.remainingTime = _this.getRemainingTime();
+    _this.expired = _this.remainingTime <= 0;
 
     // Calculate the initial formatted time string.
-    this.state = {
-      formattedTime: createFormattedTime(this.remainingTime)
+    _this.state = {
+      formattedTime: createFormattedTime(_this.remainingTime)
     };
+    return _this;
   }
 
   /**
    * Installs a new interval to update the timer if the component did mount.
    */
-  componentDidMount() {
+  _inheritsLoose(CountdownTimer, _Component);
+  var _proto = CountdownTimer.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     // Install the interval.
     this.intervalHandle = setInterval(() => {
       /**
@@ -78,8 +84,8 @@ class CountdownTimer extends Component {
 
   /**
    * Clears the timer interval.
-   */
-  componentWillUnmount() {
+   */;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     if (this.intervalHandle) {
       clearInterval(this.intervalHandle);
     }
@@ -87,15 +93,15 @@ class CountdownTimer extends Component {
 
   /**
    * @returns {number} The remaining time until the timer runs out.
-   */
-  getRemainingTime() {
+   */;
+  _proto.getRemainingTime = function getRemainingTime() {
     return Math.ceil(this.props.timeout - Date.now() / 1000);
   }
 
   /**
    * Updates the formatted time. Will not cause a re-rendering of the component.
-   */
-  updateTimer() {
+   */;
+  _proto.updateTimer = function updateTimer() {
     // Calculate the remaining time until the timer is expired. Also ignore negative durations.
     const deltaTime = Math.max(0, this.remainingTime);
     const isExpired = deltaTime <= 0;
@@ -119,15 +125,16 @@ class CountdownTimer extends Component {
   /**
    * Renders the element.
    * @return {JSX.Element}
-   */
-  render() {
-    return /*#__PURE__*/React.createElement(I18n.Text, {
+   */;
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsx(I18n.Text, {
       string: this.state.formattedTime.string,
       params: this.state.formattedTime.params,
       className: `${this.props.className} common__countdown-timer`
     });
-  }
-}
+  };
+  return CountdownTimer;
+}(Component);
 CountdownTimer.defaultProps = {
   className: '',
   onExpire: null

package/components/CountdownTimer/spec.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import CountdownTimer, { getFormattedTimeString } from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<CountdownTimer>', () => {
   jest.useFakeTimers();
 
@@ -15,7 +17,7 @@ describe('<CountdownTimer>', () => {
    */
   const createTimerElement = (remainingDays, remainingHours, remainingMinutes, remainingSeconds, callback) => {
     const timeout = Math.floor(Date.now() / 1000) + remainingDays * 86400 + remainingHours * 3600 + remainingMinutes * 60 + remainingSeconds;
-    const wrapper = shallow(/*#__PURE__*/React.createElement(CountdownTimer, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(CountdownTimer, {
       timeout: timeout,
       onExpire: callback
     }));
@@ -36,24 +38,23 @@ describe('<CountdownTimer>', () => {
    */
   const performFormatCheck = (remainingDays, remainingHours, remainingMinutes, remainingSeconds) => {
     jest.clearAllTimers();
-    setInterval.mock.calls = [];
+    const intervalSpy = jest.spyOn(global, 'setInterval');
     const wrapper = createTimerElement(remainingDays, remainingHours, remainingMinutes, remainingSeconds, null);
-    const expectedTimeFormat = getFormattedTimeString(remainingDays, remainingHours, remainingMinutes, remainingSeconds - 1 // Expect the decremented timeout.
-    );
-
-    // We cannot perform a snapshot match here because the timestamp changes for each call.
-    expect(setInterval.mock.calls.length).toBe(1);
-    jest.runTimersToTime(1000);
+    const expectedTimeFormat = getFormattedTimeString(remainingDays, remainingHours, remainingMinutes, remainingSeconds - 1);
+    expect(intervalSpy).toHaveBeenCalledTimes(1);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
     wrapper.update();
     const {
       params,
       string
     } = wrapper.props();
-    const renderedTimeFormat = {
+    expect({
       params,
       string
-    };
-    expect(renderedTimeFormat).toEqual(expectedTimeFormat);
+    }).toEqual(expectedTimeFormat);
+    intervalSpy.mockRestore();
   };
   it('should render the correct time for < 24h', () => performFormatCheck(0, 0, 0, 5));
   it('should render the correct time for 24h - 48h', () => performFormatCheck(1, 12, 6, 5));
@@ -62,46 +63,44 @@ describe('<CountdownTimer>', () => {
     jest.clearAllTimers();
     const wrapper = createTimerElement(-1, -2, -3, -5, null);
     const expectedTimeFormat = getFormattedTimeString(0, 0, 0, 0);
-    jest.runTimersToTime(1000);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
     const {
       params,
       string
     } = wrapper.props();
-    const renderedTimeFormat = {
+    expect({
       params,
       string
-    };
-    expect(renderedTimeFormat).toEqual(expectedTimeFormat);
+    }).toEqual(expectedTimeFormat);
   });
   it('should stop at 00:00:00 when the timer expires', () => {
     const wrapper = createTimerElement(0, 0, 0, 1, null);
     const expectedTimeFormat = getFormattedTimeString(0, 0, 0, 0);
-    let renderedTimeFormat;
-
-    // Run down to 00:00:00.
-    jest.runTimersToTime(1000);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
     wrapper.update();
     let {
       params,
       string
     } = wrapper.props();
-    renderedTimeFormat = {
+    expect({
       params,
       string
-    };
-    expect(renderedTimeFormat).toEqual(expectedTimeFormat);
-
-    // Advance time a bit further and make sure the timer stays at 00:00:00.
-    jest.runTimersToTime(1000);
+    }).toEqual(expectedTimeFormat);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
     ({
       params,
       string
     } = wrapper.props());
-    renderedTimeFormat = {
+    expect({
       params,
       string
-    };
-    expect(renderedTimeFormat).toEqual(expectedTimeFormat);
+    }).toEqual(expectedTimeFormat);
   });
   it('should invoke the callback when the timer expires', () => {
     let timesCallbackInvoked = 0;
@@ -112,17 +111,17 @@ describe('<CountdownTimer>', () => {
       timesCallbackInvoked += 1;
     };
     createTimerElement(0, 0, 0, 2, callback);
-
-    // The timer is not expired yet. Make sure the callback is not invoked.
-    jest.runTimersToTime(1000);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
     expect(timesCallbackInvoked).toBe(0);
-
-    // The timer should expire by now.
-    jest.runTimersToTime(1000);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
     expect(timesCallbackInvoked).toBe(1);
-
-    // Run it again and make sure it won't be called twice.
-    jest.runTimersToTime(1000);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
     expect(timesCallbackInvoked).toBe(1);
   });
   it('should not invoke the callback when the timeout is already expired.', () => {
@@ -134,7 +133,9 @@ describe('<CountdownTimer>', () => {
       timesCallbackInvoked += 1;
     };
     createTimerElement(0, 0, 0, 0, callback);
-    jest.runTimersToTime(1000);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
     expect(timesCallbackInvoked).toBe(0);
   });
 });

package/components/Drawer/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -6,34 +7,39 @@ import styles from "./style";
 /**
  * Drawer component.
  */
-class Drawer extends Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let Drawer = /*#__PURE__*/function (_Component) {
   /**
    * Initializes the Drawer component.
    * @param {Object} props The components props.
    */
-  constructor(props) {
-    super(props);
+  function Drawer(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Syncs the internal active state when an animation ends.
      */
-    this.handleAnimationEnd = () => {
-      this.setState({
-        active: this.props.isOpen
+    _this.handleAnimationEnd = () => {
+      _this.setState({
+        active: _this.props.isOpen
       });
-      if (!this.props.isOpen) {
-        this.props.onDidClose();
+      if (!_this.props.isOpen) {
+        _this.props.onDidClose();
       } else {
-        this.props.onDidOpen();
+        _this.props.onDidOpen();
       }
     };
-    this.sheetRef = /*#__PURE__*/React.createRef();
-    this.state = {
+    _this.sheetRef = /*#__PURE__*/React.createRef();
+    _this.state = {
       active: props.isOpen
     };
+    return _this;
   }
 
   /** inheritdoc */
-  componentDidMount() {
+  _inheritsLoose(Drawer, _Component);
+  var _proto = Drawer.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     if (this.props.isOpen) {
       if (this.sheetRef.current) {
         this.sheetRef.current.focus();
@@ -44,8 +50,8 @@ class Drawer extends Component {
   /**
    * Update state when isOpen changes.
    * @param {Object} nextProps The next component props.
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+   */;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.isOpen !== nextProps.isOpen) {
       if (nextProps.isOpen) {
         if (typeof nextProps.onOpen === 'function') {
@@ -63,19 +69,19 @@ class Drawer extends Component {
   /**
    * Set focus for a11y when sheet opens
    * @param {Object} prevProps The previous component props.
-   */
-  componentDidUpdate(prevProps) {
+   */;
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
     if (!prevProps.isOpen && this.props.isOpen) {
       if (this.sheetRef.current) {
         this.sheetRef.current.focus();
       }
     }
-  }
+  };
   /**
    * Renders the component.
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       className,
       children,
@@ -96,7 +102,7 @@ class Drawer extends Component {
     if (typeof animation.duration === 'number') {
       style.animationDuration = `${animation.duration}ms`;
     }
-    return active ? /*#__PURE__*/React.createElement("div", {
+    return active ? /*#__PURE__*/_jsx("div", {
       ref: this.sheetRef,
       className: combinedClassName,
       style: style,
@@ -111,10 +117,12 @@ class Drawer extends Component {
       },
       role: "dialog",
       "aria-modal": true,
-      tabIndex: -1
-    }, children) : null;
-  }
-}
+      tabIndex: -1,
+      children: children
+    }) : null;
+  };
+  return Drawer;
+}(Component);
 /**
  * The component prop types.
  * @type {Object}

package/components/Drawer/spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import Drawer from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/a11y/components');
 describe('<Drawer />', () => {
   const onOpen = jest.fn();
@@ -11,11 +12,11 @@ describe('<Drawer />', () => {
     jest.clearAllMocks();
   });
   it('should render', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Drawer, null));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Drawer, {}));
     expect(wrapper).toMatchSnapshot();
   });
   it('should execute callback when drawer is opened', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Drawer, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Drawer, {
       onOpen: onOpen
     }));
     wrapper.setProps({
@@ -24,7 +25,7 @@ describe('<Drawer />', () => {
     expect(onOpen).toBeCalled();
   });
   it('should execute callback when drawer is closed', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Drawer, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Drawer, {
       isOpen: true,
       onClose: onClose
     }));
@@ -34,7 +35,7 @@ describe('<Drawer />', () => {
     expect(onClose).toBeCalled();
   });
   it('should add custom classes', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Drawer, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Drawer, {
       className: "custom-class-name",
       isOpen: true
     }));
@@ -42,7 +43,7 @@ describe('<Drawer />', () => {
     expect(wrapper.hasClass('custom-class-name')).toEqual(true);
   });
   it('should execute callback when drawer open animation did end', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Drawer, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Drawer, {
       className: "custom-class-name",
       isOpen: false,
       onOpen: onOpen,
@@ -58,7 +59,7 @@ describe('<Drawer />', () => {
     expect(onDidOpen).toBeCalled();
   });
   it('should execute callback when drawer close animation did end', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Drawer, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Drawer, {
       className: "custom-class-name",
       isOpen: true,
       onClose: onClose,

package/components/Dropdown/index.js

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Transition from "../Transition";
@@ -9,23 +9,28 @@ import transitions from "./transitions";
  * This component slides it's child content up or down based on it's isOpen property.
  * @returns {JSX}
  */
-class Dropdown extends Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let Dropdown = /*#__PURE__*/function (_Component) {
   /**
    * Constructor
    * @param {Object} props Props of the Component
    */
-  constructor(props) {
-    super(props);
-    this.state = {
+  function Dropdown(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
+    _this.state = {
       initialRender: true
     };
+    return _this;
   }
 
   /**
    * Update the initialRender state if the isOpen state changes from false to true
    * @param {Object} nextProps The new props
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  _inheritsLoose(Dropdown, _Component);
+  var _proto = Dropdown.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.isOpen === false && nextProps.isOpen === true) {
       this.setState({
         initialRender: false
@@ -37,33 +42,37 @@ class Dropdown extends Component {
    * Only update the component if isOpen changed
    * @param {Object} nextProps The new props
    * @returns {boolean}
-   */
-  shouldComponentUpdate(nextProps) {
+   */;
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
     return this.props.isOpen !== nextProps.isOpen;
   }
 
   /**
    * Renders the component.
    * @returns {JSX}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     let transitionProps;
     if (this.props.isOpen) {
       transitionProps = this.state.initialRender ? transitions.initialOpen : transitions.open;
     } else {
       transitionProps = this.state.initialRender ? transitions.initialClose : transitions.close;
     }
-    return /*#__PURE__*/React.createElement(Transition, _extends({}, transitionProps, {
+    return /*#__PURE__*/_jsx(Transition, {
+      ...transitionProps,
       onComplete: this.props.onComplete,
       onStart: this.props.onStart,
       duration: this.props.duration,
-      easing: this.props.easing
-    }), /*#__PURE__*/React.createElement("div", {
-      className: `${styles} ${this.props.className} common__dropdown`,
-      "aria-hidden": !this.props.isOpen
-    }, this.props.children));
-  }
-}
+      easing: this.props.easing,
+      children: /*#__PURE__*/_jsx("div", {
+        className: `${styles} ${this.props.className} common__dropdown`,
+        "aria-hidden": !this.props.isOpen,
+        children: this.props.children
+      })
+    });
+  };
+  return Dropdown;
+}(Component);
 Dropdown.defaultProps = {
   className: '',
   children: null,

package/components/Ellipsis/index.js

@@ -7,11 +7,13 @@ import Dotdotdot from 'react-dotdotdot';
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
-const Ellipsis = props => /*#__PURE__*/React.createElement(Dotdotdot, {
+import { jsx as _jsx } from "react/jsx-runtime";
+const Ellipsis = props => /*#__PURE__*/_jsx(Dotdotdot, {
   clamp: props.rows,
   className: `${props.className} common__ellipsis`,
-  useNativeClamp: true
-}, props.children);
+  useNativeClamp: true,
+  children: props.children
+});
 Ellipsis.defaultProps = {
   className: '',
   rows: 3

package/components/Ellipsis/spec.js

@@ -1,13 +1,15 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Ellipsis from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 const clamp = 3;
 const text = 'Some very long text that should be cut off by this ellipsis component.';
 describe('<Ellipsis />', () => {
   it('should render', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Ellipsis, {
-      rows: clamp
-    }, text));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Ellipsis, {
+      rows: clamp,
+      children: text
+    }));
     expect(wrapper).toMatchSnapshot();
   });
 });

package/components/EmbeddedMedia/index.js

@@ -7,6 +7,7 @@ import { embeddedMedia } from '@shopgate/pwa-common/collections';
  * EmbeddedMedia component. Handles loading of media related scripts e.g. the Vimeo Player.
  * @returns {JSX}
  */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const EmbeddedMedia = ({
   children,
   cookieConsentSettings
@@ -45,12 +46,14 @@ const EmbeddedMedia = ({
     src: provider.remoteScriptUrl,
     type: 'text/javascript'
   }));
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Helmet, {
-    script: scripts
-    // Helmet doesn't support `onload` in script objects so we have to hack in our own
-    ,
-    onChangeClientState: (newState, addedTags) => updateProviderScripts(addedTags)
-  }), children);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Helmet, {
+      script: scripts
+      // Helmet doesn't support `onload` in script objects so we have to hack in our own
+      ,
+      onChangeClientState: (newState, addedTags) => updateProviderScripts(addedTags)
+    }), children]
+  });
 };
 EmbeddedMedia.defaultProps = {
   cookieConsentSettings: {

package/components/EmbeddedMedia/spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { embeddedMedia } from '@shopgate/pwa-common/collections';
 import EmbeddedMedia from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/pwa-common/collections', () => ({
   embeddedMedia: {
     getHasPendingProviders: jest.fn(),
@@ -21,12 +22,20 @@ describe('<EmbeddedMedia />', () => {
   });
   it('should return children', () => {
     embeddedMedia.getHasPendingProviders.mockReturnValueOnce(false);
-    const wrapper = shallow(/*#__PURE__*/React.createElement(EmbeddedMedia, null, /*#__PURE__*/React.createElement("div", null, "Children")));
+    const wrapper = shallow(/*#__PURE__*/_jsx(EmbeddedMedia, {
+      children: /*#__PURE__*/_jsx("div", {
+        children: "Children"
+      })
+    }));
     expect(wrapper.html()).toEqual('<div>Children</div>');
   });
   it.skip('should render Helmet with a script', () => {
     embeddedMedia.getHasPendingProviders.mockReturnValueOnce(true);
-    const wrapper = shallow(/*#__PURE__*/React.createElement(EmbeddedMedia, null, /*#__PURE__*/React.createElement("div", null, "Content with embedded media (youtube, vimeo, etc)")));
+    const wrapper = shallow(/*#__PURE__*/_jsx(EmbeddedMedia, {
+      children: /*#__PURE__*/_jsx("div", {
+        children: "Content with embedded media (youtube, vimeo, etc)"
+      })
+    }));
     const helmetProps = wrapper.find('HelmetWrapper').props();
     expect(helmetProps).toEqual({
       defer: true,