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 ReactDOMServer from 'react-dom/server';
+import React, { useState } from 'react';
 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 () => {
-  MailPoet.Modal.popup({
-    title: MailPoet.I18n.t('setFromAddressModalTitle'),
-    template: ReactDOMServer.renderToString(
+const removeUnauthorizedEmailNotices = () => {
+  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();
+  }
+};
+
+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 () => {
+            const addressValidator = jQuery('#mailpoet_set_from_address_modal_address').parsley();
+            addressValidator.validate();
+            if (!addressValidator.isValid()) {
+              return;
+            }
+            if (!address) {
+              return;
+            }
+            try {
+              await handleSave(address);
+              onRequestClose();
+              removeUnauthorizedEmailNotices();
+              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 });
+            }
+          }}
         />
       </div>
-    ),
-    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();
-
-          // 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', () => {
-        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,95 +143,102 @@ const PremiumTab = (props) => {
   }
 
   return (
-    <table className="form-table">
-      <tbody>
-        <tr>
-          <th scope="row">
-            <label htmlFor="mailpoet_premium_key">
-              {MailPoet.I18n.t('premiumTabActivationKeyLabel')}
-            </label>
-            <p className="description">
-              {MailPoet.I18n.t('premiumTabDescription')}
-            </p>
-          </th>
-          <td>
-            <div>
-              <input
-                type="text"
-                id="mailpoet_premium_key"
-                className="regular-text"
-                name="premium[premium_key]"
-                value={key || ''}
-                onChange={(event) => {
-                  setKey(event.target.value.trim() || null);
-                  setPremiumStatus(null);
-                  setPremiumInstallationStatus(null);
-                  setMssStatus(null);
-                }}
-              />
-              <button
-                type="button"
-                id="mailpoet_premium_key_verify"
-                className="button-secondary"
-                onClick={async (event) => {
-                  if (!key) {
-                    MailPoet.Notice.error(
-                      MailPoet.I18n.t('premiumTabNoKeyNotice'),
-                      { scroll: true },
-                    );
-                    return;
-                  }
-
-                  setPremiumStatus(null);
-                  setPremiumInstallationStatus(null);
-                  setMssStatus(null);
-
-                  MailPoet.Modal.loading(true);
-                  const isUserTriggered = event.isTrusted;
-                  await verifyMailPoetSendingServiceKey(isUserTriggered);
-                  await verifyMailPoetPremiumKey();
-                  MailPoet.Modal.loading(false);
-
-                  // show modal to set authorized FROM address, if needed
-                  if (isUserTriggered) {
-                    const settings = await getSettings();
-                    const authorizedAddressNeeded = !settings.data.sender.address
-                      || settings.data.authorized_emails_addresses_check;
-
-                    if (mssStatus === MssStatus.KEY_VALID_MSS_ACTIVE && authorizedAddressNeeded) {
-                      showSetFromAddressModal();
+    <>
+      <table className="form-table">
+        <tbody>
+          <tr>
+            <th scope="row">
+              <label htmlFor="mailpoet_premium_key">
+                {MailPoet.I18n.t('premiumTabActivationKeyLabel')}
+              </label>
+              <p className="description">
+                {MailPoet.I18n.t('premiumTabDescription')}
+              </p>
+            </th>
+            <td>
+              <div>
+                <input
+                  type="text"
+                  id="mailpoet_premium_key"
+                  className="regular-text"
+                  name="premium[premium_key]"
+                  value={key || ''}
+                  onChange={(event) => {
+                    setKey(event.target.value.trim() || null);
+                    setPremiumStatus(null);
+                    setPremiumInstallationStatus(null);
+                    setMssStatus(null);
+                  }}
+                />
+                <button
+                  type="button"
+                  id="mailpoet_premium_key_verify"
+                  className="button-secondary"
+                  onClick={async (event) => {
+                    if (!key) {
+                      MailPoet.Notice.error(
+                        MailPoet.I18n.t('premiumTabNoKeyNotice'),
+                        { scroll: true },
+                      );
+                      return;
                     }
-                  }
-                }}
-              >
-                {MailPoet.I18n.t('premiumTabVerifyButton')}
-              </button>
-            </div>
-            {keyValid !== null && (
-              <div className="key-activation-messages">
-                <KeyMessages keyValid={keyValid} />
-                {mssStatus !== null && (
-                  <MssMessages
-                    keyStatus={mssStatus}
-                    keyMessage={mssKeyMessage}
-                    activationCallback={() => verifyMailPoetSendingServiceKey(true)}
-                  />
-                )}
-                {premiumStatus !== null && (
-                  <PremiumMessages
-                    keyStatus={premiumStatus}
-                    keyMessage={premiumMessage}
-                    installationStatus={premiumInstallationStatus}
-                    installationCallback={installPremiumPlugin}
-                    activationCallback={() => activatePremiumPlugin()}
-                  />
-                )}
+
+                    setPremiumStatus(null);
+                    setPremiumInstallationStatus(null);
+                    setMssStatus(null);
+
+                    MailPoet.Modal.loading(true);
+                    const isUserTriggered = event.isTrusted;
+                    await verifyMailPoetSendingServiceKey(isUserTriggered);
+                    await verifyMailPoetPremiumKey();
+                    MailPoet.Modal.loading(false);
+
+                    // show modal to set authorized FROM address, if needed
+                    if (isUserTriggered) {
+                      const settings = await getSettings();
+                      const authorizedAddressNeeded = !settings.data.sender.address
+                        || settings.data.authorized_emails_addresses_check;
+
+                      if (mssStatus === MssStatus.KEY_VALID_MSS_ACTIVE && authorizedAddressNeeded) {
+                        setShowSetFromAddressModal(true);
+                      }
+                    }
+                  }}
+                >
+                  {MailPoet.I18n.t('premiumTabVerifyButton')}
+                </button>
               </div>
-            )}
-          </td>
-        </tr>
-      </tbody>
-    </table>
+              {keyValid !== null && (
+                <div className="key-activation-messages">
+                  <KeyMessages keyValid={keyValid} />
+                  {mssStatus !== null && (
+                    <MssMessages
+                      keyStatus={mssStatus}
+                      keyMessage={mssKeyMessage}
+                      activationCallback={() => verifyMailPoetSendingServiceKey(true)}
+                    />
+                  )}
+                  {premiumStatus !== null && (
+                    <PremiumMessages
+                      keyStatus={premiumStatus}
+                      keyMessage={premiumMessage}
+                      installationStatus={premiumInstallationStatus}
+                      installationCallback={installPremiumPlugin}
+                      activationCallback={() => activatePremiumPlugin()}
+                    />
+                  )}
+                </div>
+              )}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      { showSetFromAddressModal && (
+        <SetFromAddressModal
+          onRequestClose={() => setShowSetFromAddressModal(false)}
+        />
+      )}
+    </>
   );
 };