diff --git a/assets/js/src/newsletters/send.jsx b/assets/js/src/newsletters/send.jsx index 7933c661cf..d11a1db13d 100644 --- a/assets/js/src/newsletters/send.jsx +++ b/assets/js/src/newsletters/send.jsx @@ -473,7 +473,6 @@ class NewsletterSend extends React.Component { return (
-

{MailPoet.I18n.t('finalNewsletterStep')}

{breadcrumb} @@ -487,6 +486,7 @@ class NewsletterSend extends React.Component { onChange={this.handleFormChange} onSubmit={this.handleSave} > +

{ isPaused diff --git a/assets/js/src/notices/notice.jsx b/assets/js/src/notices/notice.jsx index 1638ce8b33..426d23402f 100644 --- a/assets/js/src/notices/notice.jsx +++ b/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) { - timeoutRef.current = setTimeout(close, props.timeout); + if (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( -

- {props.children} - {props.closable && ( + + const content = ( +
+ {children} + {closable && ( )} -
, +
+ ); + + 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, }; diff --git a/assets/js/src/notices/subscribers_limit_notice.jsx b/assets/js/src/notices/subscribers_limit_notice.jsx index 23e3d786df..daca436538 100644 --- a/assets/js/src/notices/subscribers_limit_notice.jsx +++ b/assets/js/src/notices/subscribers_limit_notice.jsx @@ -22,7 +22,7 @@ const SubscribersLimitNotice = () => { }; return ( - +

{title}

{youReachedTheLimit}