Fix ES6 no-alert eslint rule (replace confirm() with a custom UI component) [MAILPOET-1137]

.eslintrc.es6.json

@@ -48,7 +48,6 @@
     "camelcase": 0,
     "eqeqeq": 0,
     "space-unary-ops": 0,
-    "no-alert": 0,
     "no-script-url": 0,
     "space-infix-ops": 0,
     "no-irregular-whitespace": 0

assets/css/src/admin.styl

@@ -27,3 +27,5 @@
 @require 'pages_custom'
 
 @require 'mp2migrator'
+
+@require '../../../node_modules/react-confirm-alert/src/react-confirm-alert.css'

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router';
+import { confirmAlert } from 'react-confirm-alert';
 import classNames from 'classnames';
 import MailPoet from 'mailpoet';
 import Hooks from 'wp-js-hooks';
@@ -98,13 +99,23 @@ const bulk_actions = [
 ];
 
 const confirmEdit = (newsletter) => {
+  const redirectToEditing = () => {
+    window.location.href = `?page=mailpoet-newsletter-editor&id=${newsletter.id}`;
+  };
   if (
     !newsletter.queue
     || newsletter.status != 'sending'
     || newsletter.queue.status !== null
-    || window.confirm(MailPoet.I18n.t('confirmEdit'))
   ) {
-    window.location.href = `?page=mailpoet-newsletter-editor&id=${newsletter.id}`;
+    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.jsx

@@ -1,22 +1,11 @@
-define(
+import React from 'react';
-  [
+import _ from 'underscore';
-    'react',
+import MailPoet from 'mailpoet';
-    'underscore',
+import { confirmAlert } from 'react-confirm-alert';
-    'mailpoet',
+import classNames from 'classnames';
-    'react-router',
+import Breadcrumb from 'newsletters/breadcrumb.jsx';
-    'classnames',
+import HelpTooltip from 'help-tooltip.jsx';
-    'newsletters/breadcrumb.jsx',
+
-    'help-tooltip.jsx',
-  ],
-  (
-    React,
-    _,
-    MailPoet,
-    Router,
-    classNames,
-    Breadcrumb,
-    HelpTooltip
-  ) => {
     const ImportTemplate = React.createClass({
       saveTemplate: function (saveTemplate) {
         const template = saveTemplate;
@@ -174,13 +163,7 @@ define(
       },
       handleDeleteTemplate: function (template) {
         this.setState({ loading: true });
-        if (
+        const onConfirm = () => {
-          window.confirm(
-            (
-              MailPoet.I18n.t('confirmTemplateDeletion')
-            ).replace('%$1s', template.name)
-          )
-        ) {
           MailPoet.Ajax.post({
             api_version: window.mailpoet_api_version,
             endpoint: 'newsletterTemplates',
@@ -198,9 +181,18 @@ define(
               );
             }
           });
-        } else {
+        };
+        const onCancel = () => {
           this.setState({ loading: false });
-        }
+        };
+        confirmAlert({
+          title: MailPoet.I18n.t('confirmTitle'),
+          message: MailPoet.I18n.t('confirmTemplateDeletion').replace('%$1s', template.name),
+          confirmLabel: MailPoet.I18n.t('confirmLabel'),
+          cancelLabel: MailPoet.I18n.t('cancelLabel'),
+          onConfirm: onConfirm,
+          onCancel: onCancel,
+        });
       },
       handleShowTemplate: function (template) {
         MailPoet.Modal.popup({
@@ -290,6 +282,4 @@ define(
       },
     });
 
-    return NewsletterTemplates;
+export default NewsletterTemplates;
-  }
-);

package.json

@@ -24,6 +24,7 @@
     "papaparse": "4.1.1",
     "parsleyjs": "^2.1.2",
     "react": "~15.4.2",
+    "react-confirm-alert": "^1.0.8",
     "react-dom": "~15.4.2",
     "react-html-parser": "^1.0.3",
     "react-router": "~3.0.2",

views/newsletters.html

@@ -260,7 +260,10 @@
     'mailerCheckSettingsNotice': __('Check your [link]sending method settings[/link].'),
     'mailerResumeSendingButton': __('Resume sending'),
     'mailerSendingResumedNotice': __('Sending has been resumed.'),
-    'confirmEdit': __('Sending is in progress. Do you want to pause sending and edit the newsletter?')
+    'confirmEdit': __('Sending is in progress. Do you want to pause sending and edit the newsletter?'),
+    'confirmTitle': __('Confirm to proceed'),
+    'confirmLabel': __('Confirm'),
+    'cancelLabel': __('Cancel')
   }) %>
 <% endblock %>