Adds system status tab to the Help menu

assets/js/src/help/help.jsx

@@ -3,8 +3,9 @@ import ReactDOM from 'react-dom';
 import { Router, Route, IndexRedirect, useRouterHistory } from 'react-router';
 import { createHashHistory } from 'history';
 
-import KnowledgeBase from 'help/knowledge_base.jsx';
+import SystemStatus from 'help/system_status.jsx';
 import SystemInfo from 'help/system_info.jsx';
+import KnowledgeBase from 'help/knowledge_base.jsx';
 
 const history = useRouterHistory(createHashHistory)({ queryKey: false });
 
@@ -20,10 +21,11 @@ if (container) {
   ReactDOM.render((
     <Router history={history}>
       <Route path="/" component={App}>
-        <IndexRedirect to="knowledgeBase" />
+        <IndexRedirect to="systemStatus" />
         {/* Pages */}
-        <Route path="knowledgeBase(/)**" params={{ tab: 'knowledgeBase' }} component={KnowledgeBase} />
+        <Route path="systemStatus(/)**" params={{ tab: 'systemStatus' }} component={SystemStatus} />
         <Route path="systemInfo(/)**" params={{ tab: 'systemInfo' }} component={SystemInfo} />
+        <Route path="knowledgeBase(/)**" params={{ tab: 'knowledgeBase' }} component={KnowledgeBase} />
       </Route>
     </Router>
   ), container);

assets/js/src/help/system_status.jsx

@@ -0,0 +1,71 @@
+import MailPoet from 'mailpoet';
+import React from 'react';
+import ReactStringReplace from 'react-string-replace';
+import Tabs from './tabs.jsx';
+
+function renderStatusMessage(status, error, link) {
+  const noticeType = (status) ? 'success' : 'error';
+  let noticeMessage = (status) ?
+    MailPoet.I18n.t('systemStatusConnectionSuccessful') :
+    `${MailPoet.I18n.t('systemStatusConnectionUnsuccessful')} ${error}`;
+
+  if (link) {
+    noticeMessage = ReactStringReplace(
+      noticeMessage,
+      /\[link\](.*?)\[\/link\]/g,
+      match => (
+        <a href={`${link}`} key="kb-link">{ match }</a>
+      )
+    );
+  }
+
+  return (
+    <div className={'mailpoet_notice notice inline notice-' + noticeType} style={{ marginTop: '1em' }}>
+      <p>{noticeMessage}</p>
+    </div>
+  );
+}
+
+function renderCronSection(data) {
+  const status = data.cron.isReachable;
+  const url = data.cron.url;
+
+  return (
+    <div>
+      <h2>{MailPoet.I18n.t('systemStatusCronTitle')}</h2>
+      <p>
+        <a href={url} target="_blank">{url}</a>
+      </p>
+      {renderStatusMessage(status, MailPoet.I18n.t('systemStatusCronConnectionUnsuccessfulInfo'), '//beta.docs.mailpoet.com/article/231-sending-does-not-work')}
+    </div>
+  );
+}
+
+function renderMSSSection(data) {
+  if (!data.mss.enabled) return;
+
+  const status = data.mss.enabled.isReachable;
+
+  return (
+    <div>
+      <h2>{MailPoet.I18n.t('systemStatusMSSTitle')}</h2>
+      {renderStatusMessage(status, MailPoet.I18n.t('systemStatusMSSConnectionUnsuccessfulInfo'), false)}
+    </div>
+  );
+}
+
+function SystemStatus() {
+  const systemStatusData = window.systemStatusData;
+
+  return (
+    <div>
+      <Tabs tab="systemStatus" />
+      <div className="mailpoet_notice notice inline" style={{ marginTop: '1em' }}>
+        <p>{systemStatusData.mss.enabled ? MailPoet.I18n.t('systemStatusIntroCronMSS') : MailPoet.I18n.t('systemStatusIntroCron')}</p>
+      </div>
+      {renderCronSection(systemStatusData)}
+      {renderMSSSection(systemStatusData)}
+    </div>
+  );
+}
+module.exports = SystemStatus;

assets/js/src/help/tabs.jsx

@@ -5,15 +5,20 @@ import MailPoet from 'mailpoet';
 
 const tabs = [
   {
-    name: 'knowledgeBase',
+    name: 'systemStatus',
-    label: MailPoet.I18n.t('tabKnowledgeBaseTitle'),
+    label: MailPoet.I18n.t('tabSystemStatusTitle'),
-    link: '/knowledgeBase',
+    link: '/systemStatus',
   },
   {
     name: 'systemInfo',
     label: MailPoet.I18n.t('tabSystemInfoTitle'),
     link: '/systemInfo',
   },
+  {
+    name: 'knowledgeBase',
+    label: MailPoet.I18n.t('tabKnowledgeBaseTitle'),
+    link: '/knowledgeBase',
+  },
 ];
 
 function Tabs(props) {
@@ -40,6 +45,6 @@ function Tabs(props) {
 }
 
 Tabs.propTypes = { tab: React.PropTypes.string };
-Tabs.defaultProps = { tab: 'knowledgeBase' };
+Tabs.defaultProps = { tab: 'systemStatus' };
 
 module.exports = Tabs;

lib/Config/Menu.php

@@ -2,6 +2,7 @@
 
 namespace MailPoet\Config;
 
+use MailPoet\Cron\CronHelper;
 use MailPoet\Cron\CronTrigger;
 use MailPoet\Form\Block;
 use MailPoet\Form\Renderer as FormRenderer;
@@ -13,6 +14,7 @@ use MailPoet\Models\Segment;
 use MailPoet\Models\Setting;
 use MailPoet\Models\Subscriber;
 use MailPoet\Newsletter\Shortcodes\ShortcodesHelper;
+use MailPoet\Router\Endpoints\CronDaemon;
 use MailPoet\Services\Bridge;
 use MailPoet\Settings\Hosts;
 use MailPoet\Settings\Pages;
@@ -429,8 +431,27 @@ class Menu {
     $this->displayPage('settings.html', $data);
   }
 
+
   function help() {
-    $this->displayPage('help.html', array('data' => Beacon::getData()));
+    $system_info_data = Beacon::getData();
+    $system_status_data = array(
+      'cron' => array(
+        'url' => CronHelper::getCronUrl(CronDaemon::ACTION_PING),
+        'isReachable' => CronHelper::pingDaemon()
+      ),
+      'mss' => array(
+        'enabled' => (Bridge::isMPSendingServiceEnabled()) ?
+          array('isReachable' => Bridge::pingBridge()) :
+          false
+      )
+    );
+    $this->displayPage(
+      'help.html',
+      array(
+        'systemInfoData' => $system_info_data,
+        'systemStatusData' => $system_status_data
+      )
+    );
   }
 
   private function _getFlags() {

views/help.html

@@ -7,7 +7,8 @@
 <div id="mailpoet_help">
 
   <script type="text/javascript">
-    var help_scout_data = <%= json_encode(data) %>;
+    var systemInfoData = <%= json_encode(systemInfoData) %>;
+    var systemStatusData = <%= json_encode(systemStatusData) %>;
   </script>
 
   <div id="help_container"></div>
@@ -19,6 +20,15 @@
 <%= localize({
   'tabKnowledgeBaseTitle': __('Knowledge Base'),
   'tabSystemInfoTitle': __('System Info'),
+  'tabSystemStatusTitle': __('System Status'),
+  'systemStatusIntroCron': __('For the plugin to work, it must be able to establish connection with the task scheduler.'),
+  'systemStatusIntroCronMSS': __('For the plugin to work, it must be able to establish connection with the task scheduler and the key activation/MailPoet sending service.'),
+  'systemStatusCronTitle': __('Task Scheduler'),
+  'systemStatusMSSTitle': __('Key Activation and MailPoet Sending Service'),
+  'systemStatusConnectionSuccessful': __('Connection successful.'),
+  'systemStatusConnectionUnsuccessful': __('Connection unsuccessful.'),
+  'systemStatusCronConnectionUnsuccessfulInfo': __('Please consult our [link]knowledge base article[/link] for troubleshooting tips.'),
+  'systemStatusMSSConnectionUnsuccessfulInfo': __('Please contact our technical support for assistance.'),
   'knowledgeBaseIntro': __('Click on one of these categories below to find more information:'),
   'knowledgeBaseButton': __('Visit our Knowledge Base for more articles'),
   'systemInfoIntro': __('The information below is useful when you need to get in touch with our support. Just copy all the text below and paste it into a message to us.'),