Render banner near send button

[MAILPOET-2597]

assets/js/src/newsletters/send.jsx

@@ -473,7 +473,6 @@ class NewsletterSend extends React.Component {
 
     return (
       <div>
-        <SubscribersLimitNotice />
         <h1>{MailPoet.I18n.t('finalNewsletterStep')}</h1>
 
         {breadcrumb}
@@ -487,6 +486,7 @@ class NewsletterSend extends React.Component {
           onChange={this.handleFormChange}
           onSubmit={this.handleSave}
         >
+          <SubscribersLimitNotice />
           <p className="submit">
             {
               isPaused

assets/js/src/notices/notice.jsx

@@ -3,45 +3,61 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
 
-const Notice = (props) => {
+const Notice = ({
+  onClose,
+  onDisplay,
+  renderInPlace,
+  timeout,
+  scroll,
+  children,
+  closable,
+  type,
+}) => {
   const [hidden, setHidden] = React.useState(false);
   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) {
+    if (timeout) {
-      timeoutRef.current = setTimeout(close, props.timeout);
+      timeoutRef.current = setTimeout(close, timeout);
     }
     return () => (timeoutRef.current ? clearTimeout(timeoutRef.current) : null);
-  }, [close, props.timeout]);
+  }, [close, timeout]);
 
   React.useLayoutEffect(() => {
-    if (props.scroll && elementRef.current) {
+    if (scroll && elementRef.current) {
       elementRef.current.scrollIntoView(false);
     }
-  }, [props.scroll]);
+  }, [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`}>
+  const content = (
-      {props.children}
+    <div ref={elementRef} className={`mailpoet_base_notice mailpoet_${type}_notice`}>
-      {props.closable && (
+      {children}
+      {closable && (
         <button type="button" className="notice-dismiss" onClick={close}>
           <span className="screen-reader-text">{MailPoet.I18n.t('dismissNotice')}</span>
         </button>
       )}
-    </div>,
+    </div>
+  );
+
+  if (renderInPlace) {
+    return content;
+  }
+
+  return ReactDOM.createPortal(
+    content,
     document.getElementById('mailpoet_notices')
   );
 };
@@ -49,6 +65,7 @@ Notice.propTypes = {
   type: PropTypes.oneOf(['success', 'info', 'warning', 'error']).isRequired,
   scroll: PropTypes.bool,
   closable: PropTypes.bool,
+  renderInPlace: PropTypes.bool,
   onDisplay: PropTypes.func,
   onClose: PropTypes.func,
   timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf([false])]),
@@ -62,6 +79,7 @@ Notice.defaultProps = {
   timeout: 10000,
   scroll: false,
   closable: true,
+  renderInPlace: false,
   onDisplay: undefined,
   onClose: undefined,
 };

assets/js/src/notices/subscribers_limit_notice.jsx

@@ -22,7 +22,7 @@ const SubscribersLimitNotice = () => {
   };
 
   return (
-    <Notice type="error" timeout={false} closable={false}>
+    <Notice type="error" timeout={false} closable={false} renderInPlace>
       <h3>{title}</h3>
       <p>
         {youReachedTheLimit}