Replace react-confirm-alert with custom component with consistent UI

assets/css/src/modal.styl

@@ -77,6 +77,9 @@ body.mailpoet_modal_opened
   padding: 10px 10px 10px 10px
   height: 92%
 
+  .button + .button
+    margin-left: 10px
+
 // modal panel
 .mailpoet_modal_overlay.mailpoet_panel_overlay
   top: 32px
@@ -128,6 +131,8 @@ body.mailpoet_modal_opened
 // modal button
 .mailpoet_modal_close
   background: url(../img/modal_close_button.png) 7px 7px no-repeat
+  border: 0
+  cursor: pointer
   height: 30px
   overflow: hidden
   padding: 0

assets/js/src/common/confirm_alert.jsx

@@ -0,0 +1,72 @@
+import MailPoet from 'mailpoet';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+class ConfirmAlert extends React.Component {
+  static propTypes = {
+    title: PropTypes.string,
+    message: PropTypes.string.isRequired,
+    cancelLabel: PropTypes.string,
+    confirmLabel: PropTypes.string,
+    onConfirm: PropTypes.func.isRequired,
+  }
+
+  static defaultProps = {
+    title: MailPoet.I18n.t('confirmTitle'),
+    cancelLabel: MailPoet.I18n.t('cancelLabel'),
+    confirmLabel: MailPoet.I18n.t('confirmLabel'),
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = { show: true };
+  }
+
+  componentWillUpdate = () => {
+    if (!this.state.show) {
+      this.setState({ show: true });
+    }
+  }
+
+  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} />
+            {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}>
+                {cancelLabel}
+              </button>
+              <button className="button button-primary" onClick={this.onConfirm}>
+                {confirmLabel}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default function confirmAlert(props) {
+  ReactDOM.render(<ConfirmAlert {...props} />, document.getElementById('mailpoet_confirm_alert_holder'));
+}

assets/js/src/newsletters/listings/standard.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import createReactClass from 'create-react-class';
-import { confirmAlert } from 'react-confirm-alert';
 import classNames from 'classnames';
 import MailPoet from 'mailpoet';
 import Hooks from 'wp-js-hooks';
 import PropTypes from 'prop-types';
 
+import confirmAlert from 'common/confirm_alert.jsx';
 import Listing from 'listing/listing.jsx';
 import ListingTabs from 'newsletters/listings/tabs.jsx';
 import ListingHeading from 'newsletters/listings/heading.jsx';
@@ -113,10 +113,7 @@ const confirmEdit = (newsletter) => {
     redirectToEditing();
   } else {
     confirmAlert({
-      title: MailPoet.I18n.t('confirmTitle'),
       message: MailPoet.I18n.t('confirmEdit'),
-      confirmLabel: MailPoet.I18n.t('confirmLabel'),
-      cancelLabel: MailPoet.I18n.t('cancelLabel'),
       onConfirm: redirectToEditing,
     });
   }

assets/js/src/newsletters/templates/template_box.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import MailPoet from 'mailpoet';
-import { confirmAlert } from 'react-confirm-alert';
 import PropTypes from 'prop-types';
 
+import confirmAlert from 'common/confirm_alert.jsx';
+
 /**
  * props = {
  *   index, id, newsletterId, name, description, thumbnail, readonly,
@@ -40,12 +41,8 @@ class TemplateBox extends React.Component {
       });
     };
     confirmAlert({
-      title: MailPoet.I18n.t('confirmTitle'),
       message: MailPoet.I18n.t('confirmTemplateDeletion').replace('%$1s', name),
-      confirmLabel: MailPoet.I18n.t('confirmLabel'),
-      cancelLabel: MailPoet.I18n.t('cancelLabel'),
       onConfirm,
-      onCancel: () => {},
     });
   }
 

views/layout.html

@@ -11,6 +11,7 @@ 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 %>