Add missing MSS not activated message & activation button

[MAILPOET-2431]

assets/js/src/settings/premium_tab/messages/mss_messages.jsx

@@ -2,9 +2,15 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import MailPoet from 'mailpoet';
 
-const validMessage = () => (
+const MssStatus = {
+  KEY_INVALID: 0,
+  KEY_VALID_MSS_NOT_ACTIVE: 1,
+  KEY_VALID_MSS_ACTIVE: 2,
+};
+
+const activeMessage = () => (
   <div className="mailpoet_success mailpoet_mss_key_valid">
-    {MailPoet.I18n.t('premiumTabMssValidMessage')}
+    {MailPoet.I18n.t('premiumTabMssActiveMessage')}
   </div>
 );
 
@@ -14,20 +20,38 @@ const notValidMessage = (message) => (
   </div>
 );
 
+const mssNotActiveMessage = (activationCallback) => (
+  <div className="mailpoet_error">
+    {MailPoet.I18n.t('premiumTabMssNotActiveMessage')}
+    {' '}
+    <button type="button" className="button-link" onClick={activationCallback}>
+      {MailPoet.I18n.t('premiumTabMssActivateMessage')}
+    </button>
+  </div>
+);
+
+
 const MssMessages = (props) => {
-  if (props.keyValid) {
-    return validMessage();
-  }
+  switch (props.keyStatus) {
+    case MssStatus.KEY_VALID_MSS_ACTIVE:
+      return activeMessage();
+    case MssStatus.KEY_VALID_MSS_NOT_ACTIVE:
+      return mssNotActiveMessage(props.activationCallback);
+    case MssStatus.KEY_INVALID:
       return props.keyMessage ? notValidMessage(props.keyMessage) : null;
+    default:
+      return null;
+  }
 };
 
 MssMessages.propTypes = {
-  keyValid: PropTypes.bool.isRequired,
+  keyStatus: PropTypes.number.isRequired,
   keyMessage: PropTypes.string,
+  activationCallback: PropTypes.func.isRequired,
 };
 
 MssMessages.defaultProps = {
   keyMessage: null,
 };
 
-export default MssMessages;
+export { MssStatus, MssMessages };

assets/js/src/settings/premium_tab/premium_tab.jsx

@@ -3,7 +3,7 @@ import React, { useMemo, useState } from 'react';
 import ReactDOM from 'react-dom';
 import MailPoet from 'mailpoet';
 import KeyMessages from 'settings/premium_tab/messages/key_messages.jsx';
-import MssMessages from 'settings/premium_tab/messages/mss_messages.jsx';
+import { MssStatus, MssMessages } from 'settings/premium_tab/messages/mss_messages.jsx';
 import { PremiumStatus, PremiumMessages } from 'settings/premium_tab/messages/premium_messages.jsx';
 import { PremiumInstallationStatus } from 'settings/premium_tab/messages/premium_installation_messages.jsx';
 
@@ -41,16 +41,16 @@ const PremiumTab = (props) => {
   const [premiumStatus, setPremiumStatus] = useState(key ? props.premiumStatus : null);
   const [premiumMessage, setPremiumMessage] = useState(null);
   const [premiumInstallationStatus, setPremiumInstallationStatus] = useState(null);
-  const [mssKeyValid, setMssKeyValid] = useState(key ? props.mssKeyValid : null);
+  const [mssStatus, setMssStatus] = useState(key ? props.mssStatus : null);
   const [mssKeyMessage, setMssKeyMessage] = useState(null);
 
   // key is considered valid if either Premium or MSS check passes
   const keyValid = useMemo(() => {
-    if (premiumStatus > PremiumStatus.KEY_INVALID || mssKeyValid) {
+    if (premiumStatus > PremiumStatus.KEY_INVALID || mssStatus > MssStatus.KEY_INVALID) {
       return true;
     }
-    return (premiumStatus === null || mssKeyValid === null) ? null : false;
-  }, [premiumStatus, mssKeyValid]);
+    return (premiumStatus === null || mssStatus === null) ? null : false;
+  }, [premiumStatus, mssStatus]);
 
   const activatePremiumPlugin = async (isAfterInstall = false) => {
     const status = PremiumInstallationStatus;
@@ -120,14 +120,15 @@ const PremiumTab = (props) => {
   async function verifyMailPoetSendingServiceKey(activateMssIfKeyValid) {
     try {
       const response = await requestServicesApi(key, 'checkMSSKey');
-      setMssKeyValid(true);
+      setMssStatus(MssStatus.KEY_VALID_MSS_NOT_ACTIVE);
       setMssKeyMessage(response.data.message || null);
 
       if (activateMssIfKeyValid) {
         await activateMss(key);
+        setMssStatus(MssStatus.KEY_VALID_MSS_ACTIVE);
       }
     } catch (error) {
-      setMssKeyValid(false);
+      setMssStatus(MssStatus.KEY_INVALID);
       setMssKeyMessage(error.errors.map((e) => e.message).join(' ') || null);
     }
     window.updateMSSActivationUI();
@@ -157,7 +158,7 @@ const PremiumTab = (props) => {
                   setKey(event.target.value.trim() || null);
                   setPremiumStatus(null);
                   setPremiumInstallationStatus(null);
-                  setMssKeyValid(null);
+                  setMssStatus(null);
                 }}
               />
               <button
@@ -175,7 +176,7 @@ const PremiumTab = (props) => {
 
                   setPremiumStatus(null);
                   setPremiumInstallationStatus(null);
-                  setMssKeyValid(null);
+                  setMssStatus(null);
 
                   MailPoet.Modal.loading(true);
                   const isUserTriggered = event.isTrusted;
@@ -190,10 +191,11 @@ const PremiumTab = (props) => {
             {keyValid !== null && (
               <div className="key-activation-messages">
                 <KeyMessages keyValid={keyValid} />
-                {mssKeyValid !== null && (
+                {mssStatus !== null && (
                   <MssMessages
-                    keyValid={mssKeyValid}
+                    keyStatus={mssStatus}
                     keyMessage={mssKeyMessage}
+                    activationCallback={() => verifyMailPoetSendingServiceKey(true)}
                   />
                 )}
                 {premiumStatus !== null && (
@@ -217,7 +219,7 @@ const PremiumTab = (props) => {
 PremiumTab.propTypes = {
   activationKey: PropTypes.string,
   premiumStatus: PropTypes.number.isRequired,
-  mssKeyValid: PropTypes.bool.isRequired,
+  mssStatus: PropTypes.number.isRequired,
   premiumPluginActive: PropTypes.bool.isRequired,
 };
 
@@ -242,11 +244,20 @@ if (container) {
       : PremiumStatus.KEY_VALID_PREMIUM_PLUGIN_NOT_INSTALLED;
   };
 
+  const getMssStatus = () => {
+    const keyValid = window.mailpoet_mss_key_valid;
+    const mssActive = window.mailpoet_mss_active;
+    if (!keyValid) {
+      return MssStatus.KEY_INVALID;
+    }
+    return mssActive ? MssStatus.KEY_VALID_MSS_ACTIVE : MssStatus.KEY_VALID_MSS_NOT_ACTIVE;
+  };
+
   ReactDOM.render(
     <PremiumTab
       activationKey={window.mailpoet_activation_key}
       premiumStatus={getPremiumStatus()}
-      mssKeyValid={window.mailpoet_mss_key_valid}
+      mssStatus={getMssStatus()}
       premiumPluginActive={!!window.mailpoet_premium_version}
     />,
     container

tests/DataFactories/Settings.php

@@ -109,6 +109,12 @@ class Settings {
     return $this;
   }
 
+  public function withValidMssKey($key) {
+    $this->settings->set(Bridge::API_KEY_SETTING_NAME, $key);
+    $this->settings->set(Bridge::API_KEY_STATE_SETTING_NAME, ['state' => Bridge::KEY_VALID]);
+    return $this;
+  }
+
   public function withSendingMethodSmtpMailhog() {
     $this->settings->set('mta_group', 'smtp');
     $this->settings->set('mta.method', Mailer::METHOD_SMTP);

tests/acceptance/AddSendingKeyCest.php

@@ -83,4 +83,29 @@ class AddSendingKeyCest {
     $i->waitForText('MailPoet Premium is active!');
     $i->dontSee('downloading MailPoet Premium…');
   }
+
+  public function activateMss(\AcceptanceTester $i, Scenario $scenario) {
+    $i->wantTo('Activate MSS');
+
+    $mailPoetSendingKey = getenv('WP_TEST_MAILER_MAILPOET_API');
+    if (!$mailPoetSendingKey) {
+      $scenario->skip("Skipping, 'WP_TEST_MAILER_MAILPOET_API' not set.");
+    }
+
+    $settings = new Settings();
+    $settings->withValidMssKey($mailPoetSendingKey);
+
+    $keyActivationTab = '[data-automation-id="activation_settings_tab"]';
+    $i->login();
+    $i->amOnMailPoetPage('Settings');
+    $i->click($keyActivationTab);
+
+    // MSS not activated
+    $i->waitForText('Your key is valid');
+    $i->waitForText('MailPoet Sending Service is not active. Activate MailPoet Sending Service');
+
+    // activate MSS
+    $i->click('Activate MailPoet Sending Service');
+    $i->waitForText('MailPoet Sending Service is active');
+  }
 }

views/settings.html

@@ -315,6 +315,8 @@
     'premiumTabPremiumInstallationActivatingMessage': __('activating MailPoet Premium…', 'mailpoet'),
     'premiumTabPremiumInstallationActiveMessage': __('MailPoet Premium is active!', 'mailpoet'),
     'premiumTabPremiumInstallationErrorMessage': __('Something went wrong. Please [link]download the Premium plugin from your account[/link] and [link]contact our support team[/link].', 'mailpoet'),
-    'premiumTabMssValidMessage': __('MailPoet Sending Service is active', 'mailpoet'),
+    'premiumTabMssActiveMessage': __('MailPoet Sending Service is active', 'mailpoet'),
+    'premiumTabMssNotActiveMessage': __('MailPoet Sending Service is not active.', 'mailpoet'),
+    'premiumTabMssActivateMessage': __('Activate MailPoet Sending Service', 'mailpoet'),
   }) %>
 <% endblock %>

views/settings/premium.html

@@ -4,6 +4,7 @@
     var mailpoet_premium_key_valid = <%= json_encode(premium_key_valid) %>;
     var mailpoet_premium_plugin_installed = <%= json_encode(premium_plugin_installed) %>;
     var mailpoet_mss_key_valid = <%= json_encode(mss_key_valid) %>;
+    var mailpoet_mss_active = <%= json_encode(mss_active) %>;
   <% endautoescape %>
 </script>