Suggest to activate MSS after a successful key check [MAILPOET-937]

assets/css/src/common.styl

@@ -17,6 +17,10 @@ a:focus
 .mailpoet_hidden
   display: none
 
+// add margins to a div
+.mailpoet_spaced_block
+  margin: 1em 0
+
 // select 2
 .select2-container
   width: 25em !important

lib/Config/Menu.php

@@ -11,6 +11,7 @@ use MailPoet\Models\Segment;
 use MailPoet\Models\Setting;
 use MailPoet\Models\Subscriber;
 use MailPoet\Newsletter\Shortcodes\ShortcodesHelper;
+use MailPoet\Services\Bridge;
 use MailPoet\Settings\Hosts;
 use MailPoet\Settings\Pages;
 use MailPoet\Subscribers\ImportExport\ImportExportFactory;
@@ -362,6 +363,7 @@ class Menu {
       'total_subscribers' => Subscriber::getTotalSubscribers(),
       'premium_plugin_active' => License::getLicense(),
       'premium_key_valid' => !empty($this->premium_key_valid),
+      'mss_active' => Bridge::isMPSendingServiceEnabled(),
       'mss_key_valid' => !empty($mp_api_key_valid),
       'pages' => Pages::getAll(),
       'flags' => $flags,

views/settings/mta.html

@@ -829,7 +829,7 @@
         // Hide server error notices
         $('.mailpoet_notice_server').hide();
 
-        updateMailPoetMethodButton();
+        updateMSSActivationUI();
       }
 
       function getMethodFromGroup(group) {
@@ -1020,14 +1020,15 @@
     });
   });
 
-  // enable/disable MSS method activate button
-  function updateMailPoetMethodButton() {
+  // enable/disable MSS method activate button and notice
+  function updateMSSActivationUI() {
     var $ = jQuery;
     var group = $('.mailpoet_sending_methods .mailpoet_active').data('group');
-    var key_invalid = $('.mailpoet_mss_key_valid').hasClass('mailpoet_hidden');
-    $('.mailpoet_sending_service_activate').prop('disabled', group === 'mailpoet' || key_invalid);
+    var key_valid = !$('.mailpoet_mss_key_valid').hasClass('mailpoet_hidden');
+    var activation_possible = group !== 'mailpoet' && key_valid;
+    $('.mailpoet_sending_service_activate').prop('disabled', !activation_possible);
+    $('.mailpoet_mss_activate_notice').toggle(activation_possible);
   }
-
 </script>
 
 <%= partial(

views/settings/premium.html

@@ -44,9 +44,8 @@
         >
           <%= __('Your MailPoet Sending Service key is invalid.') %>
         </div>
-        <br/>
         <div
-          class="mailpoet_premium_download"
+          class="mailpoet_premium_download mailpoet_spaced_block"
           <% if premium_plugin_installed or not(premium_key_valid) %>
             style="display: none;"
           <% endif %>
@@ -67,7 +66,7 @@
            </span>
         </div>
         <div
-          class="mailpoet_premium_activate"
+          class="mailpoet_premium_activate mailpoet_spaced_block"
           <% if not(premium_plugin_installed) or premium_plugin_active or not(premium_key_valid) %>
             style="display: none;"
           <% endif %>
@@ -78,6 +77,22 @@
             href="<%= premium_activate_url | default('#') %>"
           ><%= __('Activate Premium.') %></a>
         </div>
+        <div
+          class="mailpoet_mss_activate_notice mailpoet_spaced_block"
+          <% if mss_active or not(mss_key_valid) %>
+            style="display: none;"
+          <% endif %>
+        >
+          <span>
+            <%= __("Don't forget to activate the MailPoet Sending Service in the [link]Send with...[/link] tab above.")
+              |replace({
+                '[link]': '<a href="#mta">',
+                '[/link]': '</a>'
+                })
+              |raw
+            %>
+          </span>
+        </div>
       </td>
     </tr>
   </tbody>
@@ -149,6 +164,7 @@
 
       function verifyMailPoetSendingServiceKey(key) {
         $('.mailpoet_mss_key_valid, .mailpoet_mss_key_invalid').addClass('mailpoet_hidden');
+        $('.mailpoet_mss_activate_notice').hide();
 
         return MailPoet.Ajax.post({
           api_version: window.mailpoet_api_version,
@@ -162,14 +178,14 @@
           $('.mailpoet_notice_server').hide();
           $('.mailpoet_mss_key_valid').text(response.data.message);
           $('.mailpoet_mss_key_valid').removeClass('mailpoet_hidden');
-          updateMailPoetMethodButton();
+          updateMSSActivationUI();
         }).fail(function(response) {
           if (response.errors.length > 0) {
             $('.mailpoet_mss_key_invalid').text(
               response.errors.map(function(error) { return error.message; }).join(' ')
             );
             $('.mailpoet_mss_key_invalid').removeClass('mailpoet_hidden');
-            updateMailPoetMethodButton();
+            updateMSSActivationUI();
           }
         });
       }