Add "Fix this!" button to display set FROM address modal

[MAILPOET-2805]

assets/js/src/dismissible-notice.jsx

@@ -1,5 +1,4 @@
 import jQuery from 'jquery';
-import MailPoet from 'mailpoet';
 
 jQuery(($) => {
   $(document).on('click', '.mailpoet-dismissible-notice .notice-dismiss', function dismiss() {
@@ -13,18 +12,4 @@ jQuery(($) => {
         },
       });
   });
-  $(document).on('click', '.notice .mailpoet-js-button-resume-sending', function resumeSending() {
-    const noticeElement = $(this).closest('.notice');
-    MailPoet.Ajax.post({
-      api_version: window.mailpoet_api_version,
-      endpoint: 'mailer',
-      action: 'resumeSending',
-    }).done(() => {
-      noticeElement.slideUp();
-      MailPoet.Notice.success(MailPoet.I18n.t('mailerSendingResumedNotice'));
-      if (window.mailpoet_listing) { window.mailpoet_listing.forceUpdate(); }
-    }).fail((response) => {
-      MailPoet.Notice.showApiErrorNotice(response, { scroll: true });
-    });
-  });
 });

assets/js/src/sending-paused-notices-fix-button.tsx

@@ -0,0 +1,36 @@
+import jQuery from 'jquery';
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import SetFromAddressModal from 'common/set_from_address_modal';
+import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
+import Notices from 'notices/notices.jsx';
+
+const App = () => {
+  const [showModal, setShowModal] = useState(false);
+
+  // use jQuery since some of the targeted notices are added to the DOM using the old
+  // jQuery-based notice implementation which doesn't trigger pure-JS added listeners
+  jQuery(($) => {
+    $(document).on('click', '.notice .mailpoet-js-button-fix-this', () => {
+      setShowModal(true);
+    });
+  });
+
+  return (
+    <GlobalContext.Provider value={useGlobalContextValue(window)}>
+      <Notices />
+      { showModal && (
+        <SetFromAddressModal
+          onRequestClose={() => setShowModal(false)}
+        />
+      )}
+    </GlobalContext.Provider>
+  );
+};
+
+// nothing is actually rendered to the container because the <Modal> component uses
+// ReactDOM.createPortal() but we need an element as a React root on all pages
+const container = document.getElementById('mailpoet_set_from_address_modal');
+if (container) {
+  ReactDOM.render(<App />, container);
+}

assets/js/src/webpack_admin_index.jsx

@@ -19,3 +19,4 @@ import 'subscribers/importExport/import.jsx'; // side effect - executes on doc r
 import 'subscribers/importExport/export.js'; // side effect - executes on doc ready
 import 'wizard/wizard.jsx'; // side effect - renders ReactDOM to document
 import 'experimental_features/experimental_features.jsx'; // side effect - renders ReactDOM to document
+import 'sending-paused-notices-fix-button.tsx'; // side effect - renders ReactDOM to document

lib/Util/Notices/UnauthorizedEmailInNewslettersNotice.php

@@ -36,7 +36,7 @@ class UnauthorizedEmailInNewslettersNotice {
   public function display($validationError) {
     $message = $this->getMessageText();
     $message .= $this->getNewslettersLinks($validationError);
-    $message .= $this->getResumeSendingButton();
+    $message .= $this->getFixThisButton();
     // Use Mailer log errors display system to display this notice
     $mailerLog = MailerLog::setError(MailerLog::getMailerLog(), MailerError::OPERATION_AUTHORIZATION, $message);
     MailerLog::updateMailerLog($mailerLog);
@@ -59,8 +59,8 @@ class UnauthorizedEmailInNewslettersNotice {
     return $links;
   }
 
-  private function getResumeSendingButton() {
+  private function getFixThisButton() {
-    $button = '<button class="button button-primary mailpoet-js-button-resume-sending">' . $this->wp->__('Resume sending', 'mailpoet') . '</button>';
+    $button = '<button class="button button-primary mailpoet-js-button-fix-this">' . $this->wp->__('Fix this!', 'mailpoet') . '</button>';
     return "<p>$button</p>";
   }
 }

lib/Util/Notices/UnauthorizedEmailNotice.php

@@ -34,7 +34,7 @@ class UnauthorizedEmailNotice {
   public function display($validationError) {
     $message = $this->getMessageText($validationError);
     $message .= $this->getSettingsButtons($validationError);
-    $message .= $this->getResumeSendingButton();
+    $message .= $this->getFixThisButton();
     $extraClasses = 'mailpoet-js-error-unauthorized-emails-notice';
     Notice::displayError($message, $extraClasses, self::OPTION_NAME, false, false);
   }
@@ -57,8 +57,8 @@ class UnauthorizedEmailNotice {
     return $buttons;
   }
 
-  private function getResumeSendingButton() {
+  private function getFixThisButton() {
-    $button = '<button class="button button-primary mailpoet-js-button-resume-sending">' . $this->wp->__('Resume sending', 'mailpoet') . '</button>';
+    $button = '<button class="button button-primary mailpoet-js-button-fix-this">' . $this->wp->__('Fix this!', 'mailpoet') . '</button>';
     return "<p>$button</p>";
   }
 }

views/layout.html

@@ -30,6 +30,9 @@ jQuery('.toplevel_page_mailpoet-newsletters.menu-top-last')
   <!-- React notices -->
   <div id="mailpoet_notices"></div>
 
+  <!-- Set FROM address modal React root -->
+  <div id="mailpoet_set_from_address_modal"></div>
+
   <!-- title block -->
   <% block title %><% endblock %>
   <!-- content block -->