Add Notice component

assets/css/src/components/_notice.scss

@@ -19,3 +19,31 @@
     margin: 0;
   }
 }
+
+.mailpoet_base_notice {
+  background: #fff;
+  border-left: 4px solid transparent;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
+  margin: 5px 0 15px;
+  padding: 1px 12px;
+}
+
+.mailpoet_success_notice {
+  @extend .mailpoet_base_notice;
+  border-left-color: #46b450;
+}
+
+.mailpoet_error_notice {
+  @extend .mailpoet_base_notice;
+  border-left-color: #dc3232;
+}
+
+.mailpoet_warning_notice {
+  @extend .mailpoet_base_notice;
+  border-left-color: #ffb900;
+}
+
+.mailpoet_info_notice {
+  @extend .mailpoet_base_notice;
+  border-left-color: #00a0d2;
+}

assets/js/src/notices/notice.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+
+const Notice = (props) => {
+  const [hidden, setHidden] = React.useState(false);
+  const elementRef = React.useRef(null);
+  const timeoutRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (props.timeout) {
+      timeoutRef.current = setTimeout(() => setHidden(true), props.timeout);
+    }
+    return () => (timeoutRef.current ? clearTimeout(timeoutRef.current) : null);
+  }, [props.timeout]);
+
+  React.useLayoutEffect(() => {
+    if (props.scroll && elementRef.current) {
+      elementRef.current.scrollIntoView(false);
+    }
+  }, [props.scroll]);
+
+  if (hidden) return null;
+  return ReactDOM.createPortal(
+    <div ref={elementRef} className={`mailpoet_${props.type}_notice`}>{props.children}</div>,
+    document.getElementById('mailpoet_notices')
+  );
+};
+Notice.propTypes = {
+  type: PropTypes.oneOf(['success', 'info', 'warning', 'error']).isRequired,
+  scroll: PropTypes.bool,
+  timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf([false])]),
+  children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element),
+  ]).isRequired,
+};
+Notice.defaultProps = {
+  timeout: 10000,
+  scroll: false,
+};
+
+export default Notice;

views/layout.html

@@ -20,6 +20,8 @@ jQuery('.toplevel_page_mailpoet-newsletters.menu-top-last')
   <!-- notices -->
   <div id="mailpoet_notice_error" class="mailpoet_notice" style="display:none;"></div>
   <div id="mailpoet_notice_success" class="mailpoet_notice" style="display:none;"></div>
+  <!-- React notices -->
+  <div id="mailpoet_notices"></div>
 
   <!-- title block -->
   <% block title %><% endblock %>