Add feedback tooltips

[MAILPOET-1320]

assets/css/src/admin.styl

@@ -2,6 +2,7 @@
 
 @require 'select2/dist/css/select2.css'
 @require 'datepicker/datepicker'
+@require 'badge'
 
 @require 'common'
 @require 'modal'
@@ -30,4 +31,4 @@
 
 @require '../../../node_modules/react-confirm-alert/src/react-confirm-alert.css'
 
-@require 'newsletter_templates'
+@require 'newsletter_templates'

assets/css/src/badge.styl

@@ -0,0 +1,9 @@
+badge()
+  text-transform uppercase
+  cursor pointer
+  color white
+  font-size 0.5625rem
+  font-weight 500
+  border-radius 3px
+  letter-spacing 1px
+  vertical-align middle

assets/css/src/common.styl

@@ -71,3 +71,10 @@ progress::-webkit-progress-value
 progress::-moz-progress-bar
   background-color: progress-foreground
   border-radius: progress-border-radius
+
+span.feedback-tooltip
+  badge()
+  display inline-block
+  padding 0 4px
+  background-color #ca4a1f
+

assets/css/src/listing/newsletters.styl

@@ -31,14 +31,8 @@ $green-badge-color = #55bd56
 
 .mailpoet_badge
   padding: 4px 6px 3px 6px
-  color: #FFFFFF
   margin-right: 4px
-  text-transform: uppercase
-  font-size: 0.5625rem
-  font-weight: 500
-  border-radius: 3px
-  letter-spacing: 1px
-  vertical-align: middle
+  badge()
 
   &_excellent, &_teal
     background: $excellent-badge-color

assets/css/src/newsletter_templates.styl

@@ -6,4 +6,7 @@
   top: 0
   left: 0
   width: $newsletter-width
-  max-width: $newsletter-width
+  max-width: $newsletter-width
+
+.newsletter-templates-feedback
+  margin: 0 10px

assets/js/src/newsletters/templates/tabs.jsx

@@ -1,5 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import ReactTooltip from 'react-tooltip';
+import MailPoet from 'mailpoet';
+import ReactStringReplace from 'react-string-replace';
+
+const tooltipText = ReactStringReplace(
+  MailPoet.I18n.t('tooltipTemplateTabs'),
+  /\[link\](.*?)\[\/link\]/g,
+  match => (
+    <a
+      href="https://mailpoet.polldaddy.com/s/select-template-feedback"
+      key="feedback"
+      target="_blank"
+      rel="noopener noreferrer"
+    >{ match }</a>
+  )
+);
 
 const Tabs = ({ tabs, selected, select }) => (
   <div className="wp-filter hide-if-no-js">
@@ -13,6 +29,28 @@ const Tabs = ({ tabs, selected, select }) => (
         </a></li>
       ))}
     </ul>
+    <span
+      className="feedback-tooltip newsletter-templates-feedback"
+      data-event="click"
+      data-tip
+      data-for="feedback-newsletter-templates-tabs"
+    >{MailPoet.I18n.t('feedback')}</span>
+    <ReactTooltip
+      globalEventOff="click"
+      multiline
+      id="feedback-newsletter-templates-tabs"
+      efect="solid"
+      place="bottom"
+    >
+      <span
+        style={{
+          pointerEvents: 'all',
+          display: 'inline-block',
+        }}
+      >
+        {tooltipText}
+      </span>
+    </ReactTooltip>
   </div>
 );
 

views/newsletters.html

@@ -190,6 +190,8 @@
     'websiteTimeIs': __("Your website’s time is"),
     'noScheduledDateError': __('Please enter the scheduled date.'),
     'schedule': __('Schedule'),
+    'feedback': __('Feedback?'),
+    'tooltipTemplateTabs': __("Click [link]here[/link] to give your feedback on this feature. We’d love to hear from you."),
 
     'close': __('Close'),
     'today': __('Today'),

webpack.config.js

@@ -73,6 +73,10 @@ var baseConfig = {
         include: require.resolve('underscore'),
         loader: 'expose-loader?_',
       },
+      {
+        include: require.resolve('react-tooltip'),
+        loader: 'expose-loader?' + globalPrefix + '.ReactTooltip',
+      },
       {
         include: require.resolve('history'),
         loader: 'expose-loader?' + globalPrefix + '.History',