Add new modal for authorizing FROM address

[MAILPOET-2804]

assets/js/src/common/set_from_address_modal.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import ReactStringReplace from 'react-string-replace';
+import MailPoet from 'mailpoet';
+
+const showSetFromAddressModal = async () => {
+  MailPoet.Modal.popup({
+    title: MailPoet.I18n.t('setFromAddressModalTitle'),
+    template: ReactDOMServer.renderToString(
+      <div id="set-from-address-modal">
+        <p>
+          {
+            ReactStringReplace(
+              MailPoet.I18n.t('setFromAddressModalDescription'),
+              /\[link\](.*?)\[\/link\]/g,
+              (match) => (
+                <a
+                  key="setFromAddressModalDescriptionLink"
+                  href="https://account.mailpoet.com/authorization"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {match}
+                </a>
+              )
+            )
+          }
+        </p>
+
+        <input
+          id="mailpoet_set_from_address_modal_address"
+          type="text"
+          placeholder="from@mydomain.com"
+        />
+
+        <input
+          id="mailpoet_set_from_address_modal_save"
+          className="button button-primary"
+          type="submit"
+          value={MailPoet.I18n.t('setFromAddressModalSave')}
+        />
+      </div>
+    ),
+  });
+};
+
+export default showSetFromAddressModal;

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

@@ -2,11 +2,18 @@ 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 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';
 import { PremiumInstallationStatus } from 'old_settings/premium_tab/messages/premium_installation_messages.jsx';
 
+const getSettings = async () => MailPoet.Ajax.post({
+  api_version: window.mailpoet_api_version,
+  endpoint: 'settings',
+  action: 'get',
+});
+
 const requestServicesApi = async (key, action) => MailPoet.Ajax.post({
   api_version: window.mailpoet_api_version,
   endpoint: 'services',
@@ -183,6 +190,17 @@ const PremiumTab = (props) => {
                   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();
+                    }
+                  }
                 }}
               >
                 {MailPoet.I18n.t('premiumTabVerifyButton')}