Detect HelpScout vs. Olark more securely

Intro target element selectors are now evaluated just before each
intro step - it should ensure HS or Olark will be correctly targeted
depending on which one is shown at that moment.

[MAILPOET-1446]

assets/js/src/intro.jsx

@@ -11,7 +11,7 @@ const introSteps = [
     intro: MailPoet.I18n.t('introForms'),
   },
   {
-    element: '.mailpoet-chat',
+    element: '#hs-beacon:not(.hs-beacon-hidden) iframe, .olark-launch-button',
     intro: MailPoet.I18n.t('introChat'),
   },
   {
@@ -20,7 +20,13 @@ const introSteps = [
   },
 ];
 
+let introActive = false;
+
 function Intro() {
+  if (introActive) {
+    return;
+  }
+
   // don't show on small screens
   if (innerWidth <= 960) {
     return;
@@ -43,9 +49,14 @@ function Intro() {
     tooltipPosition: 'auto',
   });
 
-  intro.onafterchange((targetElement) => {
-    document.body.classList.add('mailpoet-intro-active');
+  intro.onbeforechange(() => {
+    // evaluate step selector again since DOM might have changed (HelpScout -> Olark)
+    const step = intro._currentStep; // eslint-disable-line no-underscore-dangle
+    const element = introSteps[step].element;
+    intro._introItems[step].element = typeof element === 'string' ? document.querySelector(element) : element; // eslint-disable-line no-underscore-dangle
+  });
 
+  intro.onafterchange((targetElement) => {
     // fix for intro.js positioning bug on 'position: fixed' elements
     if (getComputedStyle(targetElement).getPropertyValue('position') === 'fixed') {
       const helperLayer = document.querySelector('.introjs-helperLayer');
@@ -56,6 +67,7 @@ function Intro() {
   });
 
   intro.onexit(() => {
+    introActive = false;
     document.body.classList.remove('mailpoet-intro-active');
   });
 
@@ -72,6 +84,8 @@ function Intro() {
   });
 
   intro.start();
+  introActive = true;
+  document.body.classList.add('mailpoet-intro-active');
 }
 
 MailPoet.showIntro = Intro;

views/layout.html

@@ -113,7 +113,9 @@ jQuery('.toplevel_page_mailpoet-newsletters.menu-top-last')
 
   <script type="text/javascript">
     olark('api.box.onShow', function() {
-        jQuery('#hs-beacon').hide();
+      jQuery('#hs-beacon')
+        .addClass('hs-beacon-hidden')
+        .hide();
     });
   </script>
 <% endif %>

views/newsletters.html

@@ -307,17 +307,9 @@
 <% block after_javascript %>
 <% if settings.show_intro %>
 <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();
-    });
-  }
+  HS.beacon.ready(function () {
+    MailPoet.showIntro();
+  });
 </script>
 <% endif %>
 <% endblock %>