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(