Add new modal for authorizing FROM address

[MAILPOET-2804]

assets/css/src/components-plugin/_set-from-address-modal.scss

@@ -0,0 +1,15 @@
+#set-from-address-modal {
+  p:first-child {
+    margin-top: 0;
+  }
+
+  #mailpoet_set_from_address_modal_address {
+    display: block;
+    width: 230px;
+  }
+
+  #mailpoet_set_from_address_modal_save {
+    display: block;
+    margin-top: 30px;
+  }
+}

assets/css/src/mailpoet-plugin.scss

@@ -46,6 +46,7 @@
 @import 'components-plugin/newsletter-congratulate';
 @import 'components-plugin/discounts';
 @import 'components-plugin/review-request';
+@import 'components-plugin/set-from-address-modal';
 @import 'components-plugin/stats';
 @import 'components-plugin/import-export';
 @import 'components-plugin/toggle';

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')}

views/layout.html

@@ -89,6 +89,10 @@ jQuery('.toplevel_page_mailpoet-newsletters.menu-top-last')
   'youNeedToUpgrade': __('You need to upgrade now to be able to continue using MailPoet.'),
   'upgradeNow': __('Upgrade Now'),
   'refreshMySubscribers': __('I’ve upgraded my subscription, refresh subscriber limit'),
+
+  'setFromAddressModalTitle': __('It’s time to set your default FROM address!', 'mailpoet'),
+  'setFromAddressModalDescription': __('Set one of [link]your authorized email addresses[/link] as the default FROM email for your MailPoet emails.', 'mailpoet'),
+  'setFromAddressModalSave': __('Save', 'mailpoet'),
 }) %>
 <% block translations %><% endblock %>