Add and display global key status

[MAILPOET-2431]

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

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import MailPoet from 'mailpoet';
+
+const keyValidMessage = (
+  <div className="mailpoet_success_item mailpoet_success">
+    {MailPoet.I18n.t('premiumTabKeyValidMessage')}
+  </div>
+);
+
+const keyNotValidMessage = (
+  <div className="mailpoet_error_item mailpoet_error">
+    {MailPoet.I18n.t('premiumTabKeyNotValidMessage')}
+  </div>
+);
+
+const KeyMessages = (props) => (props.keyValid ? keyValidMessage : keyNotValidMessage);
+
+KeyMessages.propTypes = {
+  keyValid: PropTypes.bool.isRequired,
+};
+
+export default KeyMessages;

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

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
+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 { PremiumStatus, PremiumMessages } from 'settings/premium_tab/messages/premium_messages.jsx';
 import { PremiumInstallationStatus } from 'settings/premium_tab/messages/premium_installation_messages.jsx';
@@ -32,6 +33,14 @@ const PremiumTab = (props) => {
 
   let premiumActivateUrl = props.premiumActivateUrl;
 
+  // key is considered valid if either Premium or MSS check passes
+  const keyValid = useMemo(() => {
+    if (premiumStatus > PremiumStatus.KEY_INVALID || mssKeyValid) {
+      return true;
+    }
+    return (premiumStatus === null || mssKeyValid === null) ? null : false;
+  }, [premiumStatus, mssKeyValid]);
+
   const activatePremiumPlugin = async (isAfterInstall = false) => {
     const status = PremiumInstallationStatus;
     const activateStatus = isAfterInstall ? status.INSTALL_ACTIVATING : status.ACTIVATE_ACTIVATING;
@@ -157,20 +166,25 @@ const PremiumTab = (props) => {
                 {MailPoet.I18n.t('premiumTabVerifyButton')}
               </button>
             </div>
-            {mssKeyValid !== null && (
+            {keyValid !== null && (
-              <MssMessages
+              <>
-                keyValid={mssKeyValid}
+                <KeyMessages keyValid={keyValid} />
-                keyMessage={mssKeyMessage}
+                {mssKeyValid !== null && (
-              />
+                  <MssMessages
-            )}
+                    keyValid={mssKeyValid}
-            {premiumStatus !== null && (
+                    keyMessage={mssKeyMessage}
-              <PremiumMessages
+                  />
-                keyStatus={premiumStatus}
+                )}
-                keyMessage={premiumMessage}
+                {premiumStatus !== null && (
-                installationStatus={premiumInstallationStatus}
+                  <PremiumMessages
-                installationCallback={installPremiumPlugin}
+                    keyStatus={premiumStatus}
-                activationCallback={() => activatePremiumPlugin()}
+                    keyMessage={premiumMessage}
-              />
+                    installationStatus={premiumInstallationStatus}
+                    installationCallback={installPremiumPlugin}
+                    activationCallback={() => activatePremiumPlugin()}
+                  />
+                )}
+              </>
             )}
           </td>
         </tr>

views/settings.html

@@ -302,6 +302,8 @@
     'premiumTabDescription': __('This key is used to validate your free or paid subscription. Paying customers will enjoy automatic upgrades of their Premium plugin and access to faster support.', 'mailpoet'),
     'premiumTabNoKeyNotice': __('Please specify a license key before validating it.', 'mailpoet'),
     'premiumTabVerifyButton': __('Verify', 'mailpoet'),
+    'premiumTabKeyValidMessage': __('Your key is valid', 'mailpoet'),
+    'premiumTabKeyNotValidMessage': __('Your key is not valid', 'mailpoet'),
     'premiumTabPremiumActiveMessage': __('MailPoet Premium is active', 'mailpoet'),
     'premiumTabPremiumInstallingMessage': __('MailPoet Premium plugin is being installed', 'mailpoet'),
     'premiumTabPremiumActivatingMessage': __('MailPoet Premium plugin is being activated', 'mailpoet'),