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;