Merge pull request #964 from mailpoet/add-help

Add help [MAILPOET-949]

assets/js/src/help/help.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+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 SystemInfo from 'help/system_info.jsx'
+
+const history = useRouterHistory(createHashHistory)({ queryKey: false });
+
+const App = React.createClass({
+  render() {
+    return this.props.children;
+  }
+});
+
+const container = document.getElementById('help_container');
+
+if(container) {
+
+  ReactDOM.render((
+    <Router history={ history }>
+      <Route path="/" component={ App }>
+        <IndexRedirect to="knowledgeBase" />
+        {/* Pages */}
+        <Route path="knowledgeBase(/)**" params={{ tab: 'knowledgeBase' }} component={ KnowledgeBase } />
+        <Route path="systemInfo(/)**" params={{ tab: 'systemInfo' }} component={ SystemInfo } />
+      </Route>
+    </Router>
+  ), container);
+
+}

assets/js/src/help/knowledge_base.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import MailPoet from 'mailpoet'
+
+import Tabs from './tabs.jsx'
+
+function KnowledgeBase() {
+
+  return (
+    <div>
+
+      <Tabs tab="knowledgeBase" />
+
+      <p>{MailPoet.I18n.t('knowledgeBaseIntro')}</p>
+      <ul>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/116-common-problems">Common Problems</a></li>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/165-newsletters">Newsletters</a></li>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/156-migration-questions">Migration Questions</a></li>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/149-sending-methods">Sending Methods</a></li>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/139-subscription-forms">Subscription Forms</a></li>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/114-getting-started">Getting Started</a></li>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/123-newsletter-designer">Newsletter Designer</a></li>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/121-subscribers-and-lists">Subscribers and Lists</a></li>
+      </ul>
+      <a target="_blank" href="http://beta.docs.mailpoet.com/" className="button button-primary">{MailPoet.I18n.t('knowledgeBaseButton')}</a>
+    </div>
+  );
+};
+
+module.exports = KnowledgeBase;

assets/js/src/help/system_info.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import MailPoet from 'mailpoet'
+import _ from 'underscore'
+
+import Tabs from './tabs.jsx'
+
+function handleFocus(event) {
+  event.target.select();
+}
+
+function printData(data) {
+  if (_.isObject(data)) {
+    const printableData = Object.keys(data).map((key) => {
+      return `${key}: ${data[key]}`;
+    });
+
+    return (<textarea
+      readOnly={true}
+      onFocus={handleFocus}
+      value={printableData.join("\n")}
+      style={{
+        width: "100%",
+        height: "400px",
+      }}
+    />);
+  } else {
+    return (<p>{MailPoet.I18n.t('systemInfoDataError')}</p>);
+  }
+}
+
+function KnowledgeBase() {
+  const data = window.help_scout_data;
+  return (
+    <div>
+
+      <Tabs tab="systemInfo" />
+
+      <div className="mailpoet_notice notice inline notice-success" style={{marginTop: "1em"}}>
+        <p>{MailPoet.I18n.t('systemInfoIntro')}</p>
+      </div>
+
+      {printData(data)}
+    </div>
+  );
+};
+
+module.exports = KnowledgeBase;

assets/js/src/help/tabs.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { Link } from 'react-router'
+import classNames from 'classnames'
+import MailPoet from 'mailpoet'
+
+const tabs = [
+  {
+    name: 'knowledgeBase',
+    label: MailPoet.I18n.t('tabKnowledgeBaseTitle'),
+    link: '/knowledgeBase'
+  },
+  {
+    name: 'systemInfo',
+    label: MailPoet.I18n.t('tabSystemInfoTitle'),
+    link: '/systemInfo'
+  },
+];
+
+function Tabs(props) {
+
+  const tabLinks = tabs.map((tab, index) => {
+    const tabClasses = classNames(
+      'nav-tab',
+      { 'nav-tab-active': (props.tab === tab.name) }
+    );
+
+    return (
+      <Link
+        key={ 'tab-'+index }
+        className={ tabClasses }
+        to={ tab.link }
+      >{ tab.label }</Link>
+    );
+  });
+
+  return (
+    <h2 className="nav-tab-wrapper">
+      { tabLinks }
+    </h2>
+  );
+};
+
+Tabs.propTypes = { tab: React.PropTypes.string };
+Tabs.defaultProps = { tab: "knowledgeBase" };
+
+module.exports = Tabs;

lib/Config/Menu.php

@@ -4,6 +4,7 @@ namespace MailPoet\Config;
 use MailPoet\Cron\CronTrigger;
 use MailPoet\Form\Block;
 use MailPoet\Form\Renderer as FormRenderer;
+use MailPoet\Helpscout\Beacon;
 use MailPoet\Listing;
 use MailPoet\Models\CustomField;
 use MailPoet\Models\Form;
@@ -167,6 +168,18 @@ class Menu {
       )
     );
 
+    add_submenu_page(
+      $main_page_slug,
+      $this->setPageTitle(__('Help', 'mailpoet')),
+      __('Help', 'mailpoet'),
+      Env::$required_permission,
+      'mailpoet-help',
+      array(
+        $this,
+        'help'
+      )
+    );
+
     // Only show this page in menu if the Premium plugin is not activated
     add_submenu_page(
       License::getLicense() ? true : $main_page_slug,
@@ -377,6 +390,10 @@ class Menu {
     $this->displayPage('settings.html', $data);
   }
 
+  function help() {
+    $this->displayPage('help.html', array('data' => Beacon::getData()));
+  }
+
   private function _getFlags() {
     // flags (available features on WP install)
     $flags = array();

views/help.html

@@ -0,0 +1,28 @@
+<% extends 'layout.html' %>
+
+<% block content %>
+
+<h1 class="title"><%= __('Help') %></h1>
+
+<div id="mailpoet_help">
+
+  <script type="text/javascript">
+    var help_scout_data = <%= json_encode(data) %>;
+  </script>
+
+  <div id="help_container"></div>
+
+</div>
+
+<% endblock %>
+<% block translations %>
+<%= localize({
+  'tabKnowledgeBaseTitle': __('Knowledge Base'),
+  'tabSystemInfoTitle': __('System Info'),
+  '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.'),
+  'systemInfoDataError': __('Sorry, there was an error, please try again later.'),
+}) %>
+<% endblock %>
+

webpack.config.js

@@ -168,6 +168,7 @@ var adminConfig = {
       'segments/segments.jsx',
       'forms/forms.jsx',
       'settings/tabs.js',
+      'help/help.jsx',
       'settings/reinstall_from_scratch.js',
       'subscribers/importExport/import.js',
       'subscribers/importExport/export.js',