Add basic intro.js onboarding & its initialization

[MAILPOET-1446]

assets/js/src/intro.jsx

@@ -0,0 +1,37 @@
+import introJs from 'intro.js';
+import MailPoet from 'mailpoet';
+
+const introSteps = [
+  {
+    element: document.querySelector('#toplevel_page_mailpoet-newsletters > ul > li > a[href*=mailpoet-segments]').parentNode,
+    intro: 'Create your lists here. Subscribers can be added to one or many of lists.',
+  },
+  {
+    element: document.querySelector('#toplevel_page_mailpoet-newsletters > ul > li > a[href*=mailpoet-forms]').parentNode,
+    intro: 'Create a form and add it to your website so your visitors can subscribe to your list.',
+  },
+  {
+    element: '.mailpoet-chat',
+    intro: 'You have a question? Start a chat or send a message to get an answer from our support team.',
+  },
+  {
+    element: '#mailpoet-new-email',
+    intro: 'We suggest you begin by creating a newsletter, a welcome email or a post notification. Enjoy!',
+  },
+];
+
+function Intro() {
+  const intro = introJs();
+  intro.setOptions({
+    steps: introSteps,
+    nextLabel: 'Next' + ' →',
+    prevLabel: '← ' + 'Back',
+    skipLabel: 'Skip',
+    doneLabel: 'Done',
+    positionPrecedence: ['right', 'left', 'bottom', 'top'],
+  });
+
+  intro.start();
+}
+
+MailPoet.showIntro = Intro;

assets/js/src/newsletters/listings/heading.jsx

@@ -6,6 +6,7 @@ const ListingHeading = () => (
   <h1 className="title">
     {MailPoet.I18n.t('pageTitle')}
     <Link
+      id="mailpoet-new-email"
       className="page-title-action"
       to="/new"
       onClick={() => MailPoet.trackEvent(

views/newsletters.html

@@ -294,3 +294,19 @@
 <% block after_translations %>
   <%= do_action('mailpoet_newsletters_translations_after') %>
 <% endblock %>
+
+<% block after_javascript %>
+<script>
+  if (typeof olark !== 'undefined') {
+    olark('api.box.onShow', function() {
+      document.querySelector('.olark-launch-button').classList.add('mailpoet-chat');
+      MailPoet.showIntro();
+    });
+  } else {
+    HS.beacon.ready(function () {
+      document.querySelector('#hs-beacon iframe').classList.add('mailpoet-chat');
+      MailPoet.showIntro();
+    });
+  }
+</script>
+<% endblock %>

webpack.config.js

@@ -255,6 +255,7 @@ var adminConfig = {
       'react-string-replace',
       'listing/listing.jsx',
       'form/form.jsx',
+      'intro.js',
       'newsletters/badges/stats.jsx',
       'newsletters/breadcrumb.jsx',
       'newsletters/listings/tabs.jsx',
@@ -274,6 +275,7 @@ var adminConfig = {
       'forms/forms.jsx',
       'settings/tabs.js',
       'help/help.jsx',
+      'intro.jsx',
       'settings/reinstall_from_scratch.js',
       'subscribers/importExport/import.js',
       'subscribers/importExport/export.js',