Rewrite set FROM address modal to React WIP

[MAILPOET-2804]

assets/js/src/common/set_from_address_modal.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
-import ReactDOMServer from 'react-dom/server';
 import ReactStringReplace from 'react-string-replace';
 import jQuery from 'jquery';
 import MailPoet from 'mailpoet';
+import Modal from 'common/modal/modal.jsx';
 
 const mailPoetApiVersion = (window as any).mailpoet_api_version as string;
 
@@ -35,10 +35,29 @@ const getSuccessMessage = (): string => MailPoet.I18n.t('setFromAddressEmailSucc
   '<a href="?page=mailpoet-settings#basics" rel="noopener noreferrer">$1</a>'
 );
 
-const showSetFromAddressModal = async () => {
+const removeUnauthorizedEmailNotices = () => {
-  MailPoet.Modal.popup({
+  const unauthorizedEmailNotice = document.querySelector('[data-notice="unauthorized-email-addresses-notice"]');
-    title: MailPoet.I18n.t('setFromAddressModalTitle'),
+  if (unauthorizedEmailNotice) {
-    template: ReactDOMServer.renderToString(
+    unauthorizedEmailNotice.remove();
+  }
+  const unauthorizedEmailInNewsletterNotice = document.querySelector('[data-notice="unauthorized-email-in-newsletters-addresses-notice"]');
+  if (unauthorizedEmailInNewsletterNotice) {
+    unauthorizedEmailInNewsletterNotice.remove();
+  }
+};
+
+type Props = {
+  onRequestClose: () => void,
+};
+
+const SetFromAddressModal = ({ onRequestClose }: Props) => {
+  const [address, setAddress] = useState(null);
+
+  return (
+    <Modal
+      title={MailPoet.I18n.t('setFromAddressModalTitle')}
+      onRequestClose={onRequestClose}
+    >
       <div id="set-from-address-modal">
         <p>
           {
@@ -65,6 +84,11 @@ const showSetFromAddressModal = async () => {
           placeholder="from@mydomain.com"
           data-parsley-required
           data-parsley-type="email"
+          onChange={(event) => {
+            setAddress(event.target.value.trim() || null);
+            const addressValidator = jQuery('#mailpoet_set_from_address_modal_address').parsley();
+            addressValidator.removeError('saveError');
+          }}
         />
 
         <input
@@ -72,50 +96,30 @@ const showSetFromAddressModal = async () => {
           className="button button-primary"
           type="submit"
           value={MailPoet.I18n.t('setFromAddressModalSave')}
-        />
+          onClick={async () => {
-      </div>
+            const addressValidator = jQuery('#mailpoet_set_from_address_modal_address').parsley();
-    ),
-    onInit: () => {
-      const saveButton = document.getElementById('mailpoet_set_from_address_modal_save') as HTMLInputElement;
-      const addressInput = document.getElementById('mailpoet_set_from_address_modal_address') as HTMLInputElement;
-      const addressValidator = jQuery(addressInput).parsley();
-
-      saveButton.addEventListener('click', async () => {
             addressValidator.validate();
             if (!addressValidator.isValid()) {
               return;
             }
-
-        const address = addressInput.value.trim() || null;
             if (!address) {
               return;
             }
             try {
               await handleSave(address);
-          MailPoet.Modal.close();
+              onRequestClose();
-
+              removeUnauthorizedEmailNotices();
-          // remove unauthorized email notices
-          const unauthorizedEmailNotice = document.querySelector('[data-notice="unauthorized-email-addresses-notice"]');
-          if (unauthorizedEmailNotice) {
-            unauthorizedEmailNotice.remove();
-          }
-          const unauthorizedEmailInNewsletterNotice = document.querySelector('[data-notice="unauthorized-email-in-newsletters-addresses-notice"]');
-          if (unauthorizedEmailInNewsletterNotice) {
-            unauthorizedEmailInNewsletterNotice.remove();
-          }
               MailPoet.Notice.success(getSuccessMessage());
             } catch (e) {
               const error = e.errors && e.errors[0] ? e.errors[0] : null;
               const message = getErrorMessage(error);
               addressValidator.addError('saveError', { message });
             }
-      });
+          }}
-
+        />
-      addressInput.addEventListener('input', () => {
+      </div>
-        addressValidator.removeError('saveError');
+    </Modal>
-      });
+  );
-    },
-  });
 };
 
-export default showSetFromAddressModal;
+export default SetFromAddressModal;

assets/js/src/old_settings/premium_tab/premium_tab.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { useMemo, useState } from 'react';
 import ReactDOM from 'react-dom';
 import MailPoet from 'mailpoet';
-import showSetFromAddressModal from 'common/set_from_address_modal.tsx';
+import SetFromAddressModal from 'common/set_from_address_modal.tsx';
 import KeyMessages from 'old_settings/premium_tab/messages/key_messages.jsx';
 import { MssStatus, MssMessages } from 'old_settings/premium_tab/messages/mss_messages.jsx';
 import { PremiumStatus, PremiumMessages } from 'old_settings/premium_tab/messages/premium_messages.jsx';
@@ -50,6 +50,7 @@ const PremiumTab = (props) => {
   const [premiumInstallationStatus, setPremiumInstallationStatus] = useState(null);
   const [mssStatus, setMssStatus] = useState(key ? props.mssStatus : null);
   const [mssKeyMessage, setMssKeyMessage] = useState(null);
+  const [showSetFromAddressModal, setShowSetFromAddressModal] = useState(false);
 
   // key is considered valid if either Premium or MSS check passes
   const keyValid = useMemo(() => {
@@ -142,6 +143,7 @@ const PremiumTab = (props) => {
   }
 
   return (
+    <>
       <table className="form-table">
         <tbody>
           <tr>
@@ -198,7 +200,7 @@ const PremiumTab = (props) => {
                         || settings.data.authorized_emails_addresses_check;
 
                       if (mssStatus === MssStatus.KEY_VALID_MSS_ACTIVE && authorizedAddressNeeded) {
-                      showSetFromAddressModal();
+                        setShowSetFromAddressModal(true);
                       }
                     }
                   }}
@@ -231,6 +233,12 @@ const PremiumTab = (props) => {
           </tr>
         </tbody>
       </table>
+      { showSetFromAddressModal && (
+        <SetFromAddressModal
+          onRequestClose={() => setShowSetFromAddressModal(false)}
+        />
+      )}
+    </>
   );
 };