Improve the Notice component

[MAILPOET-2390]

assets/js/src/notices/api_errors_notice.jsx

@@ -4,7 +4,7 @@ import Notice from 'notices/notice.jsx';
 
 const APIErrorsNotice = ({ errors }) => {
   if (errors.length < 1) return null;
-  return <Notice type="error">{errors.map((err) => <p key={err.message}>{err.message}</p>)}</Notice>;
+  return <Notice type="error" closable={false}>{errors.map((err) => <p key={err.message}>{err.message}</p>)}</Notice>;
 };
 APIErrorsNotice.propTypes = {
   errors: PropTypes.arrayOf(PropTypes.shape({

assets/js/src/notices/mailer_status_notice.jsx

@@ -4,7 +4,7 @@ import Notice from 'notices/notice.jsx';
 
 const MailerStatusNotice = ({ error }) => {
   if (!error || error.operation !== 'authorization') return null;
-  return <Notice type="error" timeout={false}><p>{error.error_message}</p></Notice>;
+  return <Notice type="error" timeout={false} closable={false}><p>{error.error_message}</p></Notice>;
 };
 MailerStatusNotice.propTypes = {
   error: PropTypes.shape({

assets/js/src/notices/notice.jsx

@@ -7,12 +7,19 @@ const Notice = (props) => {
   const elementRef = React.useRef(null);
   const timeoutRef = React.useRef(null);
 
+  const { onClose, onDisplay } = props;
+
+  const close = React.useCallback(() => {
+    if (onClose) onClose();
+    setHidden(true);
+  }, [onClose]);
+
   React.useEffect(() => {
     if (props.timeout) {
-      timeoutRef.current = setTimeout(() => setHidden(true), props.timeout);
+      timeoutRef.current = setTimeout(close, props.timeout);
     }
     return () => (timeoutRef.current ? clearTimeout(timeoutRef.current) : null);
-  }, [props.timeout]);
+  }, [close, props.timeout]);
 
   React.useLayoutEffect(() => {
     if (props.scroll && elementRef.current) {
@@ -20,15 +27,29 @@ const Notice = (props) => {
     }
   }, [props.scroll]);
 
+  React.useLayoutEffect(() => {
+    if (onDisplay) onDisplay();
+  }, [onDisplay]);
+
   if (hidden) return null;
   return ReactDOM.createPortal(
-    <div ref={elementRef} className={`mailpoet_base_notice mailpoet_${props.type}_notice`}>{props.children}</div>,
+    <div ref={elementRef} className={`mailpoet_base_notice mailpoet_${props.type}_notice`}>
+      {props.children}
+      {props.closable && (
+        <button type="button" className="notice-dismiss" onClick={close}>
+          <span className="screen-reader-text">Dismiss this notice.</span>
+        </button>
+      )}
+    </div>,
     document.getElementById('mailpoet_notices')
   );
 };
 Notice.propTypes = {
   type: PropTypes.oneOf(['success', 'info', 'warning', 'error']).isRequired,
   scroll: PropTypes.bool,
+  closable: PropTypes.bool,
+  onDisplay: PropTypes.func,
+  onClose: PropTypes.func,
   timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf([false])]),
   children: PropTypes.oneOfType([
     PropTypes.string,
@@ -39,6 +60,9 @@ Notice.propTypes = {
 Notice.defaultProps = {
   timeout: 10000,
   scroll: false,
+  closable: true,
+  onDisplay: undefined,
+  onClose: undefined,
 };
 
 export default Notice;

assets/js/src/notices/subscribers_limit_notice.jsx

@@ -5,7 +5,7 @@ import Notice from 'notices/notice.jsx';
 const SubscribersLimitNotice = () => {
   if (!window.mailpoet_subscribers_limit_reached) return null;
   return (
-    <Notice type="error" timeout={false}>
+    <Notice type="error" timeout={false} closable={false}>
       <h3>
         {
           MailPoet.I18n.t('subscribersLimitNoticeTitle')