@shopgate/pwa-ui-shared 7.30.4-beta.1 → 7.31.0-alpha.2

package/Dialog/components/PipelineErrorDialog/index.js

@@ -1,8 +1,6 @@
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React, { useState, useRef, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import I18n from '@shopgate/pwa-common/components/I18n';
+import { I18n } from '@shopgate/engage/components';
 import BasicDialog from "../BasicDialog";
 
 /**
@@ -16,168 +14,121 @@ const requiredTapsToSwitchModes = 10;
  */
 const switchModeTapTimeout = 4000 / requiredTapsToSwitchModes;
 
+/**
+ * Checks the input to be truthy, "0" or "false" and enables it to be rendered then.
+ * @param {Object|string|number|boolean} value The value to be checked if it should be rendered.
+ * @returns {boolean}
+ */
+const checkValue = value => !!value || value === 0 || value === false;
+
 /**
  * This component displays a pipeline error dialog.
- * The special behaviour of this message is that the user may tap the message body
+ * The special behavior of this message is that the user may tap the message body
  * ten times until it reveals additional information about the error that occurred.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-let PipelineErrorDialog = /*#__PURE__*/function (_Component) {
-  /**
-   * Creates the component.
-   * @param {Object} props The component props.
-   */
-  function PipelineErrorDialog(props) {
-    var _this;
-    _this = _Component.call(this, props) || this;
-    /**
-     * Clears the tap counter once the
-     */
-    _this.handleTapTimeout = () => {
-      _this.tapCounter = 0;
-    };
-    /**
-     * User tapped the message, increase the tap counter and switch view modes if required.
-     */
-    _this.handleClick = () => {
-      _this.tapCounter += 1;
-      if (_this.tapTimeout) {
-        // Clear the timeout.
-        clearTimeout(_this.tapTimeout);
-      }
-      if (_this.tapCounter >= requiredTapsToSwitchModes) {
-        // Switch modes and reset the tap counter.
-        _this.tapCounter = 0;
-        _this.setState(({
-          devMode
-        }) => ({
-          devMode: !devMode
-        }));
-      } else {
-        _this.tapTimeout = setTimeout(_this.handleTapTimeout, switchModeTapTimeout);
-      }
-    };
-    /**
-     * Renders the error message in developer mode.
-     * @returns {JSX}
-     */
-    _this.renderDevErrorMessage = () => {
-      /**
-       * Checks the input to be truthy, "0" or "false" and enables it to be rendered then.
-       * @param {Object|string|number|boolean} value The value to be checked if it should be rendered.
-       * @returns {boolean}
-       */
-      const checkValue = value => !!value || value === 0 || value === false;
-      const {
-        params
-      } = _this.props;
-      return /*#__PURE__*/_jsxs("div", {
-        "aria-hidden": true,
-        children: [/*#__PURE__*/_jsxs("span", {
-          children: [/*#__PURE__*/_jsx("strong", {
-            children: "Pipeline:"
-          }), /*#__PURE__*/_jsx("span", {
-            children: ` ${params.pipeline}`
-          }), /*#__PURE__*/_jsx("br", {})]
-        }), checkValue(params.entityId) && /*#__PURE__*/_jsxs("span", {
-          children: [/*#__PURE__*/_jsx("strong", {
-            children: "Entity id:"
-          }), /*#__PURE__*/_jsx("span", {
-            children: ` ${params.entityId}`
-          }), /*#__PURE__*/_jsx("br", {})]
-        }), checkValue(params.code) && /*#__PURE__*/_jsxs("span", {
-          children: [/*#__PURE__*/_jsx("strong", {
-            children: "Code:"
-          }), /*#__PURE__*/_jsx("span", {
-            children: ` ${params.code}`
-          }), /*#__PURE__*/_jsx("br", {})]
-        }), /*#__PURE__*/_jsxs("span", {
-          children: [/*#__PURE__*/_jsx("strong", {
-            children: "Message:"
-          }), /*#__PURE__*/_jsx("span", {
-            children: ` ${params.message}`
-          }), /*#__PURE__*/_jsx("br", {})]
-        }), checkValue(params.translated) && /*#__PURE__*/_jsxs("span", {
-          children: [/*#__PURE__*/_jsx("strong", {
-            children: "Message Translated:"
-          }), /*#__PURE__*/_jsx("span", {
-            children: ` ${params.translated.toString()}`
-          }), /*#__PURE__*/_jsx("br", {})]
-        }), checkValue(params.messageParams) && /*#__PURE__*/_jsxs("p", {
-          children: [/*#__PURE__*/_jsx("strong", {
-            children: "Message Params:"
-          }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("span", {
-            children: JSON.stringify(params.messageParams, null, ' ')
-          }), /*#__PURE__*/_jsx("br", {})]
-        }), checkValue(params.request) && /*#__PURE__*/_jsxs("p", {
-          children: [/*#__PURE__*/_jsx("strong", {
-            children: "Request Params:"
-          }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("span", {
-            children: JSON.stringify(params.request, null, ' ')
-          }), /*#__PURE__*/_jsx("br", {})]
-        })]
-      });
-    };
-    /**
-     * Renders the regular error message in user mode.
-     * @returns {JSX}
-     */
-    _this.renderUserErrorMessage = () => {
-      const {
-        message = '',
-        params = {}
-      } = _this.props;
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [!!params.translated && (message || params.message || /*#__PURE__*/_jsx(I18n.Text, {
-          string: "modal.body_error"
-        })), !params.translated && /*#__PURE__*/_jsx(I18n.Text, {
-          string: message || params.message || 'modal.body_error',
-          params: params.messageParams || {}
-        })]
-      });
-    };
-    _this.tapTimeout = null;
-    _this.tapCounter = 0;
-    _this.state = {
-      devMode: false // Indicating whether we are in dev mode.
-    };
-    return _this;
-  }
+const PipelineErrorDialog = ({
+  actions,
+  params,
+  message
+}) => {
+  const [devMode, setDevMode] = useState(false);
+  const tapTimeoutRef = useRef(null);
+  const tapCounterRef = useRef(0);
+  const handleTapTimeout = useCallback(() => {
+    tapCounterRef.current = 0;
+  }, []);
+  const handleClick = useCallback(() => {
+    tapCounterRef.current += 1;
+    if (tapTimeoutRef.current) {
+      clearTimeout(tapTimeoutRef.current);
+    }
+    if (tapCounterRef.current >= requiredTapsToSwitchModes) {
+      tapCounterRef.current = 0;
+      setDevMode(prev => !prev);
+    } else {
+      tapTimeoutRef.current = setTimeout(handleTapTimeout, switchModeTapTimeout);
+    }
+  }, [handleTapTimeout]);
+  useEffect(() => () => {
+    if (tapTimeoutRef.current) {
+      clearTimeout(tapTimeoutRef.current);
+    }
+  }, []);
+  const title = devMode ? 'Pipeline Error' : 'modal.title_error';
 
   /**
-   * @return {string} The title based on the current state of the dialog.
+   * @returns {JSX.Element}
    */
-  _inheritsLoose(PipelineErrorDialog, _Component);
-  var _proto = PipelineErrorDialog.prototype;
+  const renderDevErrorMessage = () => /*#__PURE__*/_jsxs("div", {
+    "aria-hidden": true,
+    children: [/*#__PURE__*/_jsxs("span", {
+      children: [/*#__PURE__*/_jsx("strong", {
+        children: "Pipeline:"
+      }), /*#__PURE__*/_jsx("span", {
+        children: ` ${params.pipeline}`
+      }), /*#__PURE__*/_jsx("br", {})]
+    }), checkValue(params.entityId) && /*#__PURE__*/_jsxs("span", {
+      children: [/*#__PURE__*/_jsx("strong", {
+        children: "Entity id:"
+      }), /*#__PURE__*/_jsx("span", {
+        children: ` ${params.entityId}`
+      }), /*#__PURE__*/_jsx("br", {})]
+    }), checkValue(params.code) && /*#__PURE__*/_jsxs("span", {
+      children: [/*#__PURE__*/_jsx("strong", {
+        children: "Code:"
+      }), /*#__PURE__*/_jsx("span", {
+        children: ` ${params.code}`
+      }), /*#__PURE__*/_jsx("br", {})]
+    }), /*#__PURE__*/_jsxs("span", {
+      children: [/*#__PURE__*/_jsx("strong", {
+        children: "Message:"
+      }), /*#__PURE__*/_jsx("span", {
+        children: ` ${params.message}`
+      }), /*#__PURE__*/_jsx("br", {})]
+    }), checkValue(params.translated) && /*#__PURE__*/_jsxs("span", {
+      children: [/*#__PURE__*/_jsx("strong", {
+        children: "Message Translated:"
+      }), /*#__PURE__*/_jsx("span", {
+        children: ` ${params.translated.toString()}`
+      }), /*#__PURE__*/_jsx("br", {})]
+    }), checkValue(params.messageParams) && /*#__PURE__*/_jsxs("p", {
+      children: [/*#__PURE__*/_jsx("strong", {
+        children: "Message Params:"
+      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("span", {
+        children: JSON.stringify(params.messageParams, null, ' ')
+      }), /*#__PURE__*/_jsx("br", {})]
+    }), checkValue(params.request) && /*#__PURE__*/_jsxs("p", {
+      children: [/*#__PURE__*/_jsx("strong", {
+        children: "Request Params:"
+      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("span", {
+        children: JSON.stringify(params.request, null, ' ')
+      }), /*#__PURE__*/_jsx("br", {})]
+    })]
+  });
+
   /**
-   * Renders the error message depending on the current mode.
-   * @return {JSX}
+   * @returns {JSX.Element}
    */
-  _proto.render = function render() {
-    return /*#__PURE__*/_jsx(BasicDialog, {
-      title: this.title,
-      actions: this.props.actions,
-      children: /*#__PURE__*/_jsx("div", {
-        onClick: this.handleClick,
-        children: this.content
-      })
-    });
-  };
-  return _createClass(PipelineErrorDialog, [{
-    key: "title",
-    get: function () {
-      return this.state.devMode ? 'Pipeline Error' : 'modal.title_error';
-    }
-
-    /**
-     * @return {JSX} The content component based on the the current state of the dialog.
-     */
-  }, {
-    key: "content",
-    get: function () {
-      return this.state.devMode ? this.renderDevErrorMessage() : this.renderUserErrorMessage();
-    }
-  }]);
-}(Component);
+  const renderUserErrorMessage = () => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!!params.translated && (message || params.message || /*#__PURE__*/_jsx(I18n.Text, {
+      string: "modal.body_error"
+    })), !params.translated && /*#__PURE__*/_jsx(I18n.Text, {
+      string: message || params.message || 'modal.body_error',
+      params: params.messageParams || {}
+    })]
+  });
+  const content = devMode ? renderDevErrorMessage() : renderUserErrorMessage();
+  return /*#__PURE__*/_jsx(BasicDialog, {
+    title: title,
+    actions: actions,
+    children: /*#__PURE__*/_jsx("div", {
+      onClick: handleClick,
+      children: content
+    })
+  });
+};
 PipelineErrorDialog.defaultProps = {
   message: ''
 };

package/Dialog/components/PipelineErrorDialog/spec.js

@@ -34,21 +34,22 @@ describe('<PipelineErrorDialog />', () => {
     }));
     const numTaps = 10;
     const clickElement = wrapper.find('div[onClick]');
+    const devMarker = 'Pipeline:';
 
     // Dev mode should be disabled.
     for (let i = 0; i < numTaps; i += 1) {
-      expect(wrapper.state().devMode).toBe(false);
+      expect(wrapper.text()).not.toContain(devMarker);
       clickElement.simulate('click');
     }
+    expect(wrapper.text()).toContain(devMarker);
 
-    // Dev mode should be enabled.
-    for (let i = 0; i < numTaps; i += 1) {
-      expect(wrapper.state().devMode).toBe(true);
+    // Dev mode should be enabled until 10 more taps.
+    for (let i = 0; i < numTaps - 1; i += 1) {
+      expect(wrapper.text()).toContain(devMarker);
       clickElement.simulate('click');
     }
-
-    // Dev mode should be disabled again.
-    expect(wrapper.state().devMode).toBe(false);
+    clickElement.simulate('click');
+    expect(wrapper.text()).not.toContain(devMarker);
   });
   it('should not switch modes if tapped too slow', () => {
     jest.useFakeTimers();
@@ -59,9 +60,8 @@ describe('<PipelineErrorDialog />', () => {
     const numTaps = 10;
     const numTapsUntilTimeout = Math.round(numTaps / 2);
     const clickElement = wrapper.find('div[onClick]');
-
-    // Dev mode should be disabled.
-    expect(wrapper.state().devMode).toBe(false);
+    const devMarker = 'Pipeline:';
+    expect(wrapper.text()).not.toContain(devMarker);
 
     /**
      * Simulates multiple tap events.
@@ -82,14 +82,8 @@ describe('<PipelineErrorDialog />', () => {
 
     // Tap the remaining times.
     tapOnElement(numTaps - numTapsUntilTimeout);
-
-    // We timed out and should not be in dev mode by now.
-    expect(wrapper.state().devMode).toBe(false);
-
-    // Add the remaining amount of taps to enter dev mode.
+    expect(wrapper.text()).not.toContain(devMarker);
     tapOnElement(numTapsUntilTimeout);
-
-    // This time dev mode should be enabled.
-    expect(wrapper.state().devMode).toBe(true);
+    expect(wrapper.text()).toContain(devMarker);
   });
 });

package/Dialog/components/TextMessageDialog/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import I18n from '@shopgate/pwa-common/components/I18n';
+import { I18n } from '@shopgate/engage/components';
 import { i18n, nl2br } from '@shopgate/engage/core';
 import BasicDialog from "../BasicDialog";
 

package/Dialog/components/VariantSelectModal/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import I18n from '@shopgate/pwa-common/components/I18n';
+import { I18n } from '@shopgate/engage/components';
 import { ITEM_PATH } from '@shopgate/pwa-common-commerce/product/constants';
 import { bin2hex } from '@shopgate/pwa-common/helpers/data';
 import BasicDialog from "../BasicDialog";

package/Dialog/index.js

@@ -3,7 +3,7 @@ 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 { I18n } from '@shopgate/engage/components';
 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";

package/DiscountBadge/index.js

@@ -2,8 +2,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 { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { jsx as _jsx } from "react/jsx-runtime";
+const badgeBase = {
+  background: 'var(--color-primary)',
+  borderRadius: 2,
+  color: 'var(--color-primary-contrast)',
+  padding: 5,
+  width: '100%',
+  fontWeight: 700,
+  textAlign: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  lineHeight: 1,
+  whiteSpace: 'nowrap',
+  ...themeConfig.variables.discountBadgeBase
+};
+const useStyles = makeStyles()(() => ({
+  small: {
+    ...badgeBase
+  },
+  big: {
+    ...badgeBase,
+    paddingTop: 5,
+    paddingLeft: 5,
+    paddingRight: 5
+  }
+}));
 /**
  * The discount badge component.
  * @param {Object} props The component props
@@ -11,24 +38,30 @@ 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__*/_jsx("div", {
-  "data-test-id": text,
-  className: "ui-shared__discount-badge",
-  "aria-label": `${i18n.text('cart.discount')}: ${text}`,
-  tabIndex: -1,
-  children: /*#__PURE__*/_jsx(I18n.Text, {
-    className: `${styles[display]} ${className} theme__discount-badge`,
-    string: text,
-    params: [discount],
-    "aria-hidden": true
-  })
-});
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const displayClass = display === 'big' ? classes.big : classes.small;
+  return /*#__PURE__*/_jsx("div", {
+    "data-test-id": text,
+    className: "ui-shared__discount-badge",
+    "aria-label": `${i18n.text('cart.discount')}: ${text}`,
+    tabIndex: -1,
+    children: /*#__PURE__*/_jsx(I18n.Text, {
+      className: cx(displayClass, className, 'theme__discount-badge'),
+      string: text,
+      params: [discount],
+      "aria-hidden": true
+    })
+  });
+};
 DiscountBadge.defaultProps = {
   className: '',
   discount: null,