Display unapproved key notice for sending step, disable send buttons

[MAILPOET-2729]

assets/js/src/newsletters/send.jsx

@@ -454,6 +454,9 @@ class NewsletterSend extends React.Component {
       'send'
     );
 
+    const sendingDisabled = window.mailpoet_subscribers_limit_reached
+      || window.mailpoet_mss_key_pending_approval;
+
     return (
       <div>
         <h1>{MailPoet.I18n.t('finalNewsletterStep')}</h1>
@@ -479,7 +482,7 @@ class NewsletterSend extends React.Component {
                     type="button"
                     onClick={this.handleResume}
                     value={MailPoet.I18n.t('resume')}
-                    disabled={window.mailpoet_subscribers_limit_reached}
+                    disabled={sendingDisabled}
                   />
                 )
                 : (
@@ -489,7 +492,7 @@ class NewsletterSend extends React.Component {
                     onClick={this.handleSend}
                     value={MailPoet.I18n.t('send')}
                     {...sendButtonOptions} // eslint-disable-line react/jsx-props-no-spreading
-                    disabled={window.mailpoet_subscribers_limit_reached}
+                    disabled={sendingDisabled}
                   />
                 )
             }
@@ -518,6 +521,26 @@ class NewsletterSend extends React.Component {
               tooltipId="helpTooltipSendEmail"
             />
           ) }
+          { window.mailpoet_mss_key_pending_approval && (
+            <div className="mailpoet_error">
+              {
+                ReactStringReplace(
+                  MailPoet.I18n.t('pendingKeyApprovalNotice'),
+                  /\[link\](.*?)\[\/link\]/g,
+                  (match) => (
+                    <a
+                      key="pendingKeyApprovalNoticeLink"
+                      href="https://account.mailpoet.com/authorization"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {match}
+                    </a>
+                  )
+                )
+              }
+            </div>
+          ) }
         </Form>
       </div>
     );

lib/AdminPages/Pages/Newsletters.php

@@ -6,6 +6,7 @@ use MailPoet\AdminPages\PageRenderer;
 use MailPoet\Config\Env;
 use MailPoet\Config\Installer;
 use MailPoet\Config\Menu;
+use MailPoet\Config\ServicesChecker;
 use MailPoet\Features\FeaturesController;
 use MailPoet\Listing\PageLimit;
 use MailPoet\Models\Newsletter;
@@ -50,6 +51,9 @@ class Newsletters {
   /** @var SubscribersFeature */
   private $subscribersFeature;
 
+  /** @var ServicesChecker */
+  private $servicesChecker;
+
   public function __construct(
     PageRenderer $pageRenderer,
     PageLimit $listingPageLimit,
@@ -59,7 +63,8 @@ class Newsletters {
     WooCommerceHelper $woocommerceHelper,
     Installation $installation,
     FeaturesController $featuresController,
-    SubscribersFeature $subscribersFeature
+    SubscribersFeature $subscribersFeature,
+    ServicesChecker $servicesChecker
   ) {
     $this->pageRenderer = $pageRenderer;
     $this->listingPageLimit = $listingPageLimit;
@@ -70,6 +75,7 @@ class Newsletters {
     $this->installation = $installation;
     $this->featuresController = $featuresController;
     $this->subscribersFeature = $subscribersFeature;
+    $this->servicesChecker = $servicesChecker;
   }
 
   public function render() {
@@ -102,6 +108,11 @@ class Newsletters {
     $data['roles'] = $wp_roles->get_names(); // phpcs:ignore Squiz.NamingConventions.ValidVariableName.NotCamelCaps
     $data['roles']['mailpoet_all'] = $this->wp->__('In any WordPress role', 'mailpoet');
 
+    $mssActive = Bridge::isMPSendingServiceEnabled();
+    $mssKeyValid = $this->servicesChecker->isMailPoetAPIKeyValid();
+    $mssKeyPendingApproval = $this->settings->get('mta.mailpoet_api_key_state.data.is_approved') === false;
+    $data['mss_key_pending_approval'] = $mssActive && $mssKeyValid && $mssKeyPendingApproval;
+
     $installedAtDateTime = new \DateTime($data['settings']['installed_at']);
     $data['installed_days_ago'] = (int)$installedAtDateTime->diff(new \DateTime())->format('%a');
     $data['subscribers_limit'] = $this->subscribersFeature->getSubscribersLimit();

views/newsletter/templates/components/sidebar/preview.hbs

@@ -18,7 +18,7 @@
 
     {{#if mssKeyPendingApproval }}
     <div class="mailpoet_error">
-      <%= __('You’ll soon be able to send once our team reviews your account. In the meantime, you can send previews to [link]your authorized emails[/link].')|replaceLinkTags('https://account.mailpoet.com/authorization', {'target': '_blank'})|raw %>
+      <%= __('You’ll soon be able to send once our team reviews your account. In the meantime, you can send previews to [link]your authorized emails[/link].')|replaceLinkTags('https://account.mailpoet.com/authorization', {'target': '_blank', 'rel': 'noopener noreferrer'})|raw %>
     </div>
     {{/if}}
 

views/newsletters.html

@@ -58,6 +58,7 @@
       <% endif %>
     <% endautoescape %>
     var mailpoet_beacon_articles = ['57fdc312c697911f2d324fd7', '5a0257ac2c7d3a272c0d7ad6', '58f671152c7d3a057f8858e8'];
+    var mailpoet_mss_key_pending_approval = '<%= mss_key_pending_approval %>';
   </script>
 <% endblock %>
 
@@ -241,6 +242,7 @@
     'finalNewsletterStep': __('Final Step: Last Details'),
     'saveDraftAndClose': __('Save as draft and close'),
     'helpTooltipSendEmail': __('You cannot send the same email twice, as that would be considered spam. <br /> If you must send the same email more than one time, simply duplicate this email first.'),
+    'pendingKeyApprovalNotice': __('You’ll soon be able to send once our team reviews your account. In the meantime, you can send previews to [link]your authorized emails[/link].'),
     'orSimply': __('or simply'),
     'goBackToDesign': __('go back to the Design page'),
     'websiteTimeIs': __("Your website’s time is"),