Add detailed premium installation messages

[MAILPOET-2431]

assets/css/src/components/_settings.scss

@@ -137,6 +137,10 @@
     content: '✗ ';
   }
 
+  .mailpoet_subitem {
+    margin-left: 2em;
+  }
+
   .mailpoet_woocommerce_editor_button {
     margin-top: 10px;
   }

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

@@ -0,0 +1,88 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ReactStringReplace from 'react-string-replace';
+import MailPoet from 'mailpoet';
+
+const PremiumInstallationStatus = {
+  INSTALL_INSTALLING: 0,
+  INSTALL_ACTIVATING: 1,
+  INSTALL_DONE: 2,
+  INSTALL_INSTALLING_ERROR: 3,
+  INSTALL_ACTIVATING_ERROR: 4,
+  ACTIVATE_ACTIVATING: 5,
+  ACTIVATE_DONE: 6,
+  ACTIVATE_ERROR: 7,
+};
+
+const keyPrefix = 'premium-installation-message';
+
+const installingMessage = (
+  <div className="mailpoet_subitem" key={`${keyPrefix}-installing`}>
+    {MailPoet.I18n.t('premiumTabPremiumInstallationInstallingMessage')}
+  </div>
+);
+
+const activatingMessage = (
+  <div className="mailpoet_subitem" key={`${keyPrefix}-activating`}>
+    {MailPoet.I18n.t('premiumTabPremiumInstallationActivatingMessage')}
+  </div>
+);
+
+const doneMessage = (
+  <div className="mailpoet_subitem" key={`${keyPrefix}-done`}>
+    <strong>{MailPoet.I18n.t('premiumTabPremiumInstallationActiveMessage')}</strong>
+  </div>
+);
+
+const errorMessage = () => {
+  const links = ['https://account.mailpoet.com', 'https://www.mailpoet.com/support/'];
+  const message = ReactStringReplace(
+    MailPoet.I18n.t('premiumTabPremiumInstallationErrorMessage'),
+    /\[link\](.*?)\[\/link\]/g,
+    (match, i) => (
+      <a
+        key={i}
+        href={links.shift()}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {match}
+      </a>
+    )
+  );
+
+  return (
+    <div className="mailpoet_subitem" key={`${keyPrefix}-error`}>
+      <strong>{message}</strong>
+    </div>
+  );
+};
+
+const PremiumInstallationMessages = (props) => {
+  switch (props.installationStatus) {
+    case PremiumInstallationStatus.INSTALL_INSTALLING:
+      return installingMessage;
+    case PremiumInstallationStatus.INSTALL_ACTIVATING:
+      return [installingMessage, activatingMessage];
+    case PremiumInstallationStatus.INSTALL_DONE:
+      return [installingMessage, activatingMessage, doneMessage];
+    case PremiumInstallationStatus.INSTALL_INSTALLING_ERROR:
+      return [installingMessage, errorMessage()];
+    case PremiumInstallationStatus.INSTALL_ACTIVATING_ERROR:
+      return [installingMessage, activatingMessage, errorMessage()];
+    case PremiumInstallationStatus.ACTIVATE_ACTIVATING:
+      return activatingMessage;
+    case PremiumInstallationStatus.ACTIVATE_DONE:
+      return [activatingMessage, doneMessage];
+    case PremiumInstallationStatus.ACTIVATE_ERROR:
+      return [activatingMessage, errorMessage()];
+    default:
+      return null;
+  }
+};
+
+PremiumInstallationMessages.propTypes = {
+  installationStatus: PropTypes.number,
+};
+
+export { PremiumInstallationStatus, PremiumInstallationMessages };

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

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import MailPoet from 'mailpoet';
+import { PremiumInstallationMessages } from 'settings/premium_tab/messages/premium_installation_messages.jsx';
 
 const PremiumStatus = {
   KEY_INVALID: 0,
@@ -86,18 +87,25 @@ const PremiumMessages = (props) => {
     return null;
   }
 
-  return <PremiumInstallationMessages installationStatus={props.installationStatus} />;
+  return (
+    <>
+      {message}
+      <PremiumInstallationMessages installationStatus={props.installationStatus} />
+    </>
+  );
 };
 
 PremiumMessages.propTypes = {
   keyStatus: PropTypes.number.isRequired,
   keyMessage: PropTypes.string,
+  installationStatus: PropTypes.number,
   installationCallback: PropTypes.func.isRequired,
   activationCallback: PropTypes.func.isRequired,
 };
 
 PremiumMessages.defaultProps = {
   keyMessage: null,
+  installationStatus: null,
 };
 
 export { PremiumStatus, PremiumMessages };

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

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
 import MailPoet from 'mailpoet';
 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';
 
 const requestServicesApi = async (key, action) => MailPoet.Ajax.post({
   api_version: window.mailpoet_api_version,
@@ -16,6 +17,7 @@ const PremiumTab = (props) => {
   const [key, setKey] = useState(props.activationKey);
   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 [mssKeyMessage, setMssKeyMessage] = useState(null);
 
@@ -122,6 +124,7 @@ const PremiumTab = (props) => {
               <PremiumMessages
                 keyStatus={premiumStatus}
                 keyMessage={premiumMessage}
+                installationStatus={premiumInstallationStatus}
                 installationCallback="" //TODO
                 activationCallback="" //TODO
               />

views/settings.html

@@ -309,6 +309,10 @@
     'premiumTabPremiumInstallMessage': __('Install MailPoet Premium plugin', 'mailpoet'),
     'premiumTabPremiumNotActiveMessage': __('MailPoet Premium is not active.', 'mailpoet'),
     'premiumTabPremiumActivateMessage': __('Activate MailPoet Premium plugin', 'mailpoet'),
+    'premiumTabPremiumInstallationInstallingMessage': __('downloading MailPoet Premium…', 'mailpoet'),
+    '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': __('Your MailPoet Sending Service key has been successfully validated.', 'mailpoet'),
     'premiumTabMssNotValidMessage': __('Your key is not valid for the MailPoet Sending Service.', 'mailpoet'),
   }) %>