Add AuthorizeSenderEmailModal component

MAILPOET-4300

mailpoet/assets/js/src/common/authorize_sender_email_modal.tsx

@@ -0,0 +1,86 @@
+import { useEffect, useState } from 'react';
+import ReactStringReplace from 'react-string-replace';
+import PropTypes from 'prop-types';
+import { MailPoet } from 'mailpoet';
+import { Modal } from 'common/modal/modal';
+import { Loader } from 'common';
+
+type ApiActionType = 'create' | 'confirm';
+
+/**
+ * @param {string} email - Email address
+ * @param {ApiActionType} type - action type
+ * @returns {Promise}
+ */
+const makeApiRequest = (email: string, type: ApiActionType = 'create') =>
+  MailPoet.Ajax.post({
+    api_version: MailPoet.apiVersion,
+    endpoint: 'settings',
+    action:
+      type === 'create'
+        ? 'authorizeSenderEmailAddress'
+        : 'confirmSenderEmailAddressIsAuthorized',
+    data: {
+      email,
+    },
+  });
+
+type Props = {
+  senderEmail: string;
+  onRequestClose: () => void;
+};
+
+function AuthorizeSenderEmailModal({ senderEmail, onRequestClose }: Props) {
+  const [apiResponseType, setApiResponseType] = useState<boolean>(null);
+
+  const senderEmailAddress = String(senderEmail).toLowerCase();
+
+  useEffect(() => {
+    if (!senderEmailAddress) {
+      return;
+    }
+
+    makeApiRequest(senderEmailAddress)
+      .then((res) => {
+        setApiResponseType(Boolean(res?.data));
+      })
+      .catch(() => {
+        setApiResponseType(false);
+      });
+  }, [senderEmailAddress]);
+
+  return (
+    <Modal
+      title={MailPoet.I18n.t('authorizeSenderEmailModalTitle').replace(
+        '[senderEmail]',
+        senderEmailAddress,
+      )}
+      onRequestClose={onRequestClose}
+      contentClassName="authorize-sender-email-modal"
+    >
+      {apiResponseType && (
+        <p>
+          {ReactStringReplace(
+            MailPoet.I18n.t('authorizeSenderEmailModalDescription'),
+            /\[bold\](.*?)\[\/bold\]/g,
+            (match, i) => (
+              <strong key={i}>{match}</strong>
+            ),
+          )}
+        </p>
+      )}
+
+      {apiResponseType === false && (
+        <p>{MailPoet.I18n.t('authorizeSenderEmailMessageError')}</p>
+      )}
+
+      <Loader size={64} />
+    </Modal>
+  );
+}
+
+AuthorizeSenderEmailModal.propTypes = {
+  senderEmail: PropTypes.string.isRequired,
+};
+
+export { AuthorizeSenderEmailModal };

mailpoet/views/layout.html

@@ -120,6 +120,11 @@ jQuery('#adminmenu #toplevel_page_mailpoet-newsletters')
   'reviewRequestRateUsNow': _x('Rate us now', 'Review our plugin on WordPress.org.'),
   'reviewRequestNotNow': __('Not now'),
 
+  'authorizeSenderEmailModalTitle': __('Authorizing your email address: [senderEmail]', 'mailpoet'),
+  'authorizeSenderEmailModalDescription': __('Check your inbox now to confirm your email address. Please find the email with the subject: [bold]"email address to authorize"[/bold]', 'mailpoet'),
+  'authorizeSenderEmailMessageSuccess': __('The email address has been authorized. You can now send emails using this address with MailPoet.', 'mailpoet'),
+  'authorizeSenderEmailMessageError': __('An error occured when performing the request. Please try again later', 'mailpoet'),
+
   'sent': __('Sent'),
   'notSentYet': __('Not sent yet!'),