From 2d702dd5d3a284a338c31f45646828de593fff6e Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Tue, 1 Aug 2017 16:27:27 +0200
Subject: [PATCH] Add simple tooltip to help

[MAILPOET-976]
---
 assets/css/src/settings.styl   |  3 +++
 assets/js/src/help-tooltip.js  | 32 +++++++++++++++++++++++++
 assets/js/src/help-tooltip.jsx | 44 ++++++++++++++++++++++++++++++++++
 views/settings/mta.html        | 11 +++++++++
 webpack.config.js              |  2 ++
 5 files changed, 92 insertions(+)
 create mode 100644 assets/js/src/help-tooltip.js
 create mode 100644 assets/js/src/help-tooltip.jsx

diff --git a/assets/css/src/settings.styl b/assets/css/src/settings.styl
index 5bdf6be5c7..dc795fc268 100644
--- a/assets/css/src/settings.styl
+++ b/assets/css/src/settings.styl
@@ -54,6 +54,9 @@
       #mailpoet_mta_activate
         visibility hidden
 
+  .tooltip.dashicons.dashicons-editor-help
+    font-size: 30px
+
   ul.sending-method-benefits
     list-style-type: none
     margin-bottom: 2em
diff --git a/assets/js/src/help-tooltip.js b/assets/js/src/help-tooltip.js
new file mode 100644
index 0000000000..e8796b6172
--- /dev/null
+++ b/assets/js/src/help-tooltip.js
@@ -0,0 +1,32 @@
+define('helpTooltip', ['mailpoet', 'React', 'react-dom', 'help-tooltip.jsx'],
+  function (MailPoet, React, ReactDOM, TooltipComponent) {
+    'use strict';
+
+    MailPoet.helpTooltip = {
+      show: function (domContainerNode, opts) {
+
+        var tooltipText = React.createElement(
+          "span",
+          {
+            style: {
+              pointerEvents: "all",
+            },
+            "dangerouslySetInnerHTML": {
+              __html: opts.tooltip,
+            },
+          },
+          null
+        );
+
+        ReactDOM.render(React.createElement(
+          TooltipComponent, {
+            tooltip: tooltipText,
+            tooltipId: opts.tooltipId,
+          }
+        ), domContainerNode);
+      },
+    };
+
+  }
+);
+
diff --git a/assets/js/src/help-tooltip.jsx b/assets/js/src/help-tooltip.jsx
new file mode 100644
index 0000000000..dcf553732d
--- /dev/null
+++ b/assets/js/src/help-tooltip.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import ReactTooltip from 'react-tooltip';
+
+function Tooltip(props) {
+  let tooltipId = props.tooltipId;
+  // tooltip ID must be unique, defaults to tooltip text
+  if(!props.tooltipId && typeof props.tooltip === "string") {
+    tooltipId = props.tooltip;
+  }
+
+  return (
+    <span>
+      <span
+        style={{
+          cursor: "help",
+        }}
+        className="tooltip dashicons dashicons-editor-help"
+        data-event="click"
+        data-tip
+        data-for={tooltipId}
+      >
+      </span>
+        <ReactTooltip
+          globalEventOff="click"
+          multiline={true}
+          id={tooltipId}
+          efect="solid"
+        >
+          {props.tooltip}
+        </ReactTooltip>
+    </span>
+  );
+}
+
+Tooltip.propTypes = {
+  tooltipId: React.PropTypes.string,
+  tooltip: React.PropTypes.node.isRequired,
+};
+
+Tooltip.defaultProps = {
+  tooltipId: undefined,
+};
+
+module.exports = Tooltip;
diff --git a/views/settings/mta.html b/views/settings/mta.html
index 7fde74eaa0..831ff0a0e4 100644
--- a/views/settings/mta.html
+++ b/views/settings/mta.html
@@ -637,6 +637,8 @@
               id="mailpoet_mta_test"
               class="button-secondary"
             ><%= __('Send a test email') %></a>
+
+            <span id="tooltip-test"></span>
           </p>
         </td>
       </tr>
@@ -663,6 +665,15 @@
 
 <script type="text/javascript">
   jQuery(function($) {
+    var tooltip = '<%= __("Didn't receive the test email? Read our [link]quick guide[/link] to sending issues.")
+      |replaceLinkTags('http://beta.docs.mailpoet.com/article/146-my-newsletters-are-not-being-received', {'target' : '_blank'})
+      |escape('js') %>'
+
+    MailPoet.helpTooltip.show(document.getElementById("tooltip-test"), {
+      tooltipId: "tooltip-settings-test",
+      tooltip: tooltip,
+    });
+
     var sending_frequency_template =
       Handlebars.compile($('#mailpoet_sending_frequency_template').html());
 
diff --git a/webpack.config.js b/webpack.config.js
index 54a14408a8..7d04a8bbb8 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -151,6 +151,8 @@ var adminConfig = {
       'jquery.serialize_object',
       'parsleyjs',
       'analytics_event',
+      'help-tooltip.jsx',
+      'help-tooltip',
     ],
     admin_vendor: [
       'react',