diff --git a/.eslintrc.es6.json b/.eslintrc.es6.json index a34a03f5f6..6a676ce6cc 100644 --- a/.eslintrc.es6.json +++ b/.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 diff --git a/assets/css/src/admin.styl b/assets/css/src/admin.styl index 76696c18de..a93a030583 100644 --- a/assets/css/src/admin.styl +++ b/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' diff --git a/assets/js/src/newsletters/listings/standard.jsx b/assets/js/src/newsletters/listings/standard.jsx index 412ce243f6..efcd94909d 100644 --- a/assets/js/src/newsletters/listings/standard.jsx +++ b/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, + }); } }; diff --git a/assets/js/src/newsletters/templates.jsx b/assets/js/src/newsletters/templates.jsx index ae42a1be53..1e2997890a 100644 --- a/assets/js/src/newsletters/templates.jsx +++ b/assets/js/src/newsletters/templates.jsx @@ -1,22 +1,11 @@ -define( - [ - 'react', - 'underscore', - 'mailpoet', - 'react-router', - 'classnames', - 'newsletters/breadcrumb.jsx', - 'help-tooltip.jsx', - ], - ( - React, - _, - MailPoet, - Router, - classNames, - Breadcrumb, - HelpTooltip - ) => { +import React from 'react'; +import _ from 'underscore'; +import MailPoet from 'mailpoet'; +import { confirmAlert } from 'react-confirm-alert'; +import classNames from 'classnames'; +import Breadcrumb from 'newsletters/breadcrumb.jsx'; +import HelpTooltip from 'help-tooltip.jsx'; + const ImportTemplate = React.createClass({ saveTemplate: function (saveTemplate) { const template = saveTemplate; @@ -174,13 +163,7 @@ define( }, handleDeleteTemplate: function (template) { this.setState({ loading: true }); - if ( - window.confirm( - ( - MailPoet.I18n.t('confirmTemplateDeletion') - ).replace('%$1s', template.name) - ) - ) { + const onConfirm = () => { 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; diff --git a/package.json b/package.json index 38f7c3c33c..8a9b63651d 100644 --- a/package.json +++ b/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", diff --git a/views/newsletters.html b/views/newsletters.html index 262e8aa367..ad701f9f2b 100644 --- a/views/newsletters.html +++ b/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 %>