Rewritten alert to use MailPoet.Modal.popup()

[MAILPOET-1772]

assets/js/src/common/confirm_alert.jsx

@@ -1,78 +1,53 @@
 import MailPoet from 'mailpoet';
 import PropTypes from 'prop-types';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOMServer from 'react-dom/server';
 
-class ConfirmAlert extends React.Component {
+const ConfirmAlert = (props) => {
-  static propTypes = {
+  MailPoet.Modal.popup({
-    title: PropTypes.string,
+    title: props.title,
-    message: PropTypes.string.isRequired,
+    template: ReactDOMServer.renderToString(
-    cancelLabel: PropTypes.string,
+      <>
-    confirmLabel: PropTypes.string,
+        <p>{props.message}</p>
-    onConfirm: PropTypes.func.isRequired,
+        <button id="mailpoet_alert_cancel" className="button button-secondary" type="button">
-  }
+          {props.cancelLabel}
+        </button>
+        <button id="mailpoet_alert_confirm" className="button button-primary" type="submit">
+          {props.confirmLabel}
+        </button>
+      </>
+    ),
+    onInit: () => {
+      document
+        .getElementById('mailpoet_alert_confirm')
+        .addEventListener('click', () => {
+          MailPoet.Modal.close();
+          props.onConfirm();
+        });
 
-  static defaultProps = {
+      document
-    title: MailPoet.I18n.t('confirmTitle'),
+        .getElementById('mailpoet_alert_cancel')
-    cancelLabel: MailPoet.I18n.t('cancelLabel'),
+        .addEventListener('click', () => MailPoet.Modal.close());
-    confirmLabel: MailPoet.I18n.t('confirmLabel'),
+    },
-  }
+  });
+  return null;
+};
 
-  constructor(props) {
+ConfirmAlert.propTypes = {
-    super(props);
+  title: PropTypes.string,
-    this.state = { show: true };
+  message: PropTypes.string.isRequired,
-  }
+  cancelLabel: PropTypes.string,
+  confirmLabel: PropTypes.string,
+  onConfirm: PropTypes.func.isRequired,
+};
 
-  componentWillUpdate = () => {
+ConfirmAlert.defaultProps = {
-    if (!this.state.show) {
+  title: MailPoet.I18n.t('confirmTitle'),
-      this.setState({ show: true });
+  cancelLabel: MailPoet.I18n.t('cancelLabel'),
-    }
+  confirmLabel: MailPoet.I18n.t('confirmLabel'),
-  }
+};
-
-  onClose = () => {
-    this.setState({ show: false });
-  }
-
-  onConfirm = () => {
-    this.onClose();
-    this.props.onConfirm();
-  }
-
-  render() {
-    const {
-      title, message, confirmLabel, cancelLabel,
-    } = this.props;
-
-    return (this.state.show
-      && (
-        <div className="mailpoet_modal_overlay">
-          <div className="mailpoet_popup" tabIndex="-1">
-            <div className="mailpoet_popup_wrapper">
-              <button className="mailpoet_modal_close" onClick={this.onClose} type="button" />
-              {title
-              && (
-                <div className="mailpoet_popup_title">
-                  <h2>{title}</h2>
-                </div>
-              )
-              }
-              <div className="mailpoet_popup_body clearfix">
-                <p className="mailpoet_hp_email_label">{message}</p>
-                <button className="button button-secondary" onClick={this.onClose} type="button">
-                  {cancelLabel}
-                </button>
-                <button className="button button-primary" onClick={this.onConfirm} type="submit">
-                  {confirmLabel}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )
-    );
-  }
-}
 
 export default function confirmAlert(props) {
-  ReactDOM.render(<ConfirmAlert {...props} />, document.getElementById('mailpoet_confirm_alert_holder'));
+  // the below render is only to invoke proptypes on ConfirmAlert
+  ReactDOMServer.renderToString(<ConfirmAlert {...props} />);
 }

views/layout.html

@@ -11,7 +11,6 @@ jQuery('.toplevel_page_mailpoet-newsletters.menu-top-last')
 
 <!-- system notices -->
 <div id="mailpoet_notice_system" class="mailpoet_notice" style="display:none;"></div>
-<div id="mailpoet_confirm_alert_holder"></div>
 
 <!-- handlebars templates -->
 <% block templates %><% endblock %>