From ae6044b6b81d66d9a85bc63fa9261a5e83dc7232 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Jakes=CC=8C?= <jan@jakes.pro>
Date: Tue, 24 Mar 2020 17:06:14 +0100
Subject: [PATCH] Add new modal for authorizing FROM address

[MAILPOET-2804]
---
 .../_set-from-address-modal.scss              | 15 ++++++
 assets/css/src/mailpoet-plugin.scss           |  1 +
 .../js/src/common/set_from_address_modal.tsx  | 47 +++++++++++++++++++
 .../old_settings/premium_tab/premium_tab.jsx  | 18 +++++++
 views/layout.html                             |  4 ++
 5 files changed, 85 insertions(+)
 create mode 100644 assets/css/src/components-plugin/_set-from-address-modal.scss
 create mode 100644 assets/js/src/common/set_from_address_modal.tsx

diff --git a/assets/css/src/components-plugin/_set-from-address-modal.scss b/assets/css/src/components-plugin/_set-from-address-modal.scss
new file mode 100644
index 0000000000..fa57f7c78b
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/assets/css/src/mailpoet-plugin.scss b/assets/css/src/mailpoet-plugin.scss
index 7121c240e7..00aa8c4f4e 100644
--- a/assets/css/src/mailpoet-plugin.scss
+++ b/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';
diff --git a/assets/js/src/common/set_from_address_modal.tsx b/assets/js/src/common/set_from_address_modal.tsx
new file mode 100644
index 0000000000..5c12250178
--- /dev/null
+++ b/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;
diff --git a/assets/js/src/old_settings/premium_tab/premium_tab.jsx b/assets/js/src/old_settings/premium_tab/premium_tab.jsx
index 7cc05a3096..5f4daa850d 100644
--- a/assets/js/src/old_settings/premium_tab/premium_tab.jsx
+++ b/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')}
diff --git a/views/layout.html b/views/layout.html
index bc6dd4ef1e..627fa264cd 100644
--- a/views/layout.html
+++ b/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 %>