yelda-webchat 1.1.2 → 1.1.7

package/dist/js/yeldaWebchatInjector.js

@@ -776,7 +776,7 @@ var YeldaChat = function () {
      * get Specific parameter from the url
      * @param {*} parameter
      * @param {*} defaultValue, default empty string
-     * @return {String} urlParamter
+     * @return {String} urlParameter
      */
 
   }, {
@@ -823,22 +823,28 @@ var YeldaChat = function () {
 
     /**
      * Create an assistantBubbleText component and add it to webChatContainer element
+     * @param {String} text - default null
      */
 
   }, {
     key: 'addAssistantBubbleText',
     value: function addAssistantBubbleText() {
-      if (!this.webChatContainer || !this.webchatSettings || !this.webchatSettings.bubbleText) {
+      var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+
+      text = text || this.webchatSettings && this.webchatSettings.bubbleText;
+      if (!this.webChatContainer || !text) {
         return;
       }
 
+      // Remove the assistant bubble text element before adding a new one
+      this.removeElement('yelda_assistant_bubble_text');
       // create assistantBubbleText element and set the text
       this.assistantBubbleText = document.createElement('span');
       this.assistantBubbleText.setAttribute('id', 'yelda_assistant_bubble_text');
-      this.assistantBubbleText.innerText = this.webchatSettings.bubbleText;
+      this.assistantBubbleText.innerText = text || this.webchatSettings.bubbleText;
 
       // Add click event to assistant text
-      this.assistantBubbleText.addEventListener('click', this.openChat);
+      this.assistantBubbleText.addEventListener('click', this.openChat.bind(this));
 
       // add assistant text to webChatContainer using the webchatSettings
       this.webChatContainer.appendChild(this.assistantBubbleText);
@@ -878,7 +884,7 @@ var YeldaChat = function () {
       this.assistantImage.innerHTML = '<i class="fas fa-comment"></i>';
 
       // Add click event to assistant image
-      this.assistantImage.addEventListener('click', this.openChat);
+      this.assistantImage.addEventListener('click', this.openChat.bind(this));
 
       // add assistantImage to webChatContainer using the webchatSettings
       this.updateAssistantImageWithAssistantSettings();
@@ -1031,7 +1037,7 @@ var YeldaChat = function () {
         /**
          * add CSS class which controls the opacity of the frame container if the iframe:
          * - should be opened on load OR has a start button
-         * - cannot be closed (canBeClosed explicitely set to false)
+         * - cannot be closed (canBeClosed explicitly set to false)
          *
          * If we are sure that the webchat should be opened and displayed all the time, we can add the y_active class right away
          * Otherwise,
@@ -1126,7 +1132,7 @@ var YeldaChat = function () {
     }
 
     /**
-     * Handles communcation between parent window and iframe, mainly for open and closing the chat
+     * Handles communication between parent window and iframe, mainly for open and closing the chat
      * handles also the chat bubble style
      * @param {event} event
      */
@@ -1134,36 +1140,76 @@ var YeldaChat = function () {
   }, {
     key: 'messageListener',
     value: function messageListener(event) {
-      if (event.data === 'closeChat' || event.message === 'closeChat') {
-        this.closeChat();
-        return;
-      }
-
-      if (event.data === 'openChat' || event.message === 'openChat') {
-        this.openChat();
+      // event.message is only there to support IE11.
+      var eventData = event.data || event.message;
+      if (!eventData) {
         return;
       }
 
-      if (event.data && event.data.event && event.data.event === 'openLightGallery') {
-        if (!event.data.mediaSources || !event.data.mediaSources.length) {
-          return;
+      /*
+       * Simple event management parent.postMessage('string message')
+       */
+      if (!eventData.event) {
+        switch (eventData) {
+          case _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.RECEIVED.OPEN_CHAT:
+            // 'openChat' event triggered from webchat
+            this.openChat();
+            break;
+          case _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.RECEIVED.CLOSE_CHAT:
+            // 'closeChat' event triggered from webchat
+            this.closeChat();
+            break;
+          case _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.RECEIVED.ABSTAIN_LEAVE_VIEWPORT:
+            // 'abstainLeaveViewport' event triggered from webchat to stop listening to the leave viewport event
+            this.listenLeaveViewport(true);
+            break;
+          case _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.RECEIVED.LISTEN_LEAVE_VIEWPORT:
+            // Triggered from webchat to listen leave viewport event
+            this.listenLeaveViewport();
+            break;
+          case _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.RECEIVED.LISTEN_URL_UPDATE:
+            // Triggered from webchat to listen for url update
+            this.listenUrlUpdate();
+            break;
+          case _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.RECEIVED.ABSTAIN_URL_UPDATE:
+            // Triggered form webchat to stop listening for url update
+            this.listenUrlUpdate(true);
+            break;
+          case _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.RECEIVED.ADD_BUBBLE_TEXT:
+            // Triggered from webchat to add assistant bubble text if possible
+            if (!this.configurationData.hasOwnProperty('canBeClosed') || this.configurationData.canBeClosed) {
+              this.addAssistantBubbleText();
+            }
+            break;
         }
-
-        this.handleLightGallery(event.data);
         return;
       }
 
-      /**
-       * Custom event to send to Yelda to keep track of the webchat ability to receive a new message
-       * If isSendingMessage data is true, it means that a user message has already been sent to the webchat and
-       * is still waiting for an answer
-       * If isSendingMessage data is false, the webchat is ready to receive new user messages
+      /*
+       * Complex event management parent.postMessage({ event: 'xxxx', data: yyyy })
        */
-      if (event.data && event.data.event && event.data.event === 'isSendingMessage') {
-        if (event.data.hasOwnProperty('data')) {
-          window.dispatchEvent(new CustomEvent('isSendingMessage', { detail: event.data.data }));
-        }
-        return;
+      switch (eventData.event) {
+        case _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.RECEIVED.OPEN_LIGHT_GALLERY:
+          if (!eventData.mediaSources || !eventData.mediaSources.length) {
+            return;
+          }
+
+          this.handleLightGallery(eventData);
+          break;
+        case _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.RECEIVED.IS_SENDING_MESSAGE:
+          /**
+           * Custom event to send to Yelda to keep track of the webchat ability to receive a new message
+           * If isSendingMessage data is true, it means that a user message has already been sent to the webchat and
+           * is still waiting for an answer
+           * If isSendingMessage data is false, the webchat is ready to receive new user messages
+           */
+          if (eventData.hasOwnProperty('data')) {
+            window.dispatchEvent(new CustomEvent('isSendingMessage', { detail: eventData.data }));
+          }
+          break;
+        case _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.RECEIVED.ADD_MINIMAL_NOTIFICATION_TEXT:
+          this.addAssistantBubbleText(eventData.text);
+          break;
       }
     }
 
@@ -1257,8 +1303,16 @@ var YeldaChat = function () {
         yeldaIframeContainerElement.classList.add('y_active');
       }
 
+      // hide the assistant bubble text while opening the webchat window
+      if (this.assistantBubbleText) {
+        this.assistantBubbleText = null;
+      }
+
+      // Remove assistant bubble text while opening the webchat window
+      this.removeElement('yelda_assistant_bubble_text');
+
       // Propagate the event to the webchat
-      document.getElementById('web_chat_frame').contentWindow.postMessage('openChat', '*');
+      document.getElementById('web_chat_frame').contentWindow.postMessage(_config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.SENT.OPEN_CHAT, '*');
     }
 
     /**
@@ -1288,7 +1342,7 @@ var YeldaChat = function () {
     }
 
     /**
-     * Load CSS asynchroneously
+     * Load CSS asynchronously
      */
 
   }, {
@@ -1305,7 +1359,7 @@ var YeldaChat = function () {
     }
 
     /**
-     * Gererate webchatURL and create webchatIframe
+     * Generate webchatURL and create webchatIframe
      * @param {Object} data { chatUrl, assistantId, assistantSlug, shouldBeOpened, isStartBtn, canBeClosed }
      */
 
@@ -1355,7 +1409,7 @@ var YeldaChat = function () {
           }, _callee, _this2);
         }));
 
-        return function (_x4) {
+        return function (_x5) {
           return _ref.apply(this, arguments);
         };
       }());
@@ -1498,10 +1552,10 @@ var YeldaChat = function () {
     }
 
     /**
-    * return getAssistantSettings endpoint URL from data
-    * @param {Object} data { assistantUrl, assistantId, settingId }
-    * @return {String} url
-    */
+     * return getAssistantSettings endpoint URL from data
+     * @param {Object} data { assistantUrl, assistantId, settingId }
+     * @return {String} url
+     */
 
   }, {
     key: 'getAssistantSettingsUrl',
@@ -1587,41 +1641,53 @@ var YeldaChat = function () {
                   return _context2.abrupt('return', resolve());
 
                 case 9:
-                  _context2.prev = 9;
-                  _context2.next = 12;
+
+                  // These data will be needed to avoid loading outdated data in the chat (in case of multiple chat load requests)
+                  _this4.assistantId = data.assistantId;
+                  _this4.locale = data.locale;
+                  _this4.settingId = data.settingId;
+
+                  // Get assistant settings from backend
+                  _context2.prev = 12;
+                  _context2.next = 15;
                   return _this4.getAssistantSettings(data);
 
-                case 12:
+                case 15:
                   _this4.webchatSettings = _context2.sent;
 
-
                   // Webchat can be loaded thanks to a single settingId or group of data : {assistantId, assistantSlug, locale}
                   // If only settingId is provided, then we will fill {assistantId, assistantSlug, locale} thanks to the assistant settings
                   data = _this4.updateAssistantData(data, _this4.webchatSettings);
 
-                  _context2.next = 19;
+                  _context2.next = 22;
                   break;
 
-                case 16:
-                  _context2.prev = 16;
-                  _context2.t0 = _context2['catch'](9);
+                case 19:
+                  _context2.prev = 19;
+                  _context2.t0 = _context2['catch'](12);
 
                   _this4.webchatSettings = null;
 
-                case 19:
+                case 22:
+
+                  // Remove event listeners when switching bots
+                  _this4.listenLeaveViewport(true);
+                  _this4.listenUrlUpdate(true);
 
                   _this4.loadChat(data);
+
+                  _this4.configurationData = data;
                   return _context2.abrupt('return', resolve());
 
-                case 21:
+                case 27:
                 case 'end':
                   return _context2.stop();
               }
             }
-          }, _callee2, _this4, [[9, 16]]);
+          }, _callee2, _this4, [[12, 19]]);
         }));
 
-        return function (_x5) {
+        return function (_x6) {
           return _ref2.apply(this, arguments);
         };
       }());
@@ -1643,7 +1709,9 @@ var YeldaChat = function () {
         return false;
       }
 
-      // if webchatSettings is null load the chat
+      // if webchatSettings is null, it means that the admins didn't created custom webchat settings or
+      // or that the API call to get the settings failed
+      // In this case we can still load the webchat with the default settings
       if (!webchatSettings) {
         return true;
       }
@@ -1662,14 +1730,57 @@ var YeldaChat = function () {
       return true;
     }
 
+    /**
+     * Return if the webchat loadChat settings are different from the yeldaChat global assistant settings
+     *
+     * - yeldaChat can be init (and reset) either with the settingId parameter or the pair (assistantId, locale) that we store globally
+     * - Each new webchat loading request implies a "getAssistantSettings" async API call,
+     * => If multiple new webchat loading requests are done in a short amount of time,
+     * "getAssistantSettings" response can be subject to a race condition issue:
+     * The latest requested answer received might not be the latest API call answer.
+     *
+     * isDataOutdated checks if one of the global parameter is different the ones from the webchat settings we got from the "getAssistantSettings" API call
+     * so the "loadChat" function can be informed that the latest request is not the one currently handled
+     * And can stop the current process to let the chat load with the global latest requested settings
+     *
+     * @param {Object} webchatSettings - current settings from the reset or init yeldaChat request
+     * @param {String} webchatSettings.settingId
+     * @param {String} webchatSettings.assistantId
+     * @param {String} webchatSettings.locale
+     * @param {Object} globalData - latest globally stored settings from the reset or init yeldaChat request
+     * @param {String} globalData.settingId
+     * @param {String} globalData.assistantId
+     * @param {String} globalData.locale
+     * @returns {Boolean}
+     */
+
+  }, {
+    key: 'isDataOutdated',
+    value: function isDataOutdated(data, _ref3) {
+      var settingId = _ref3.settingId,
+          assistantId = _ref3.assistantId,
+          locale = _ref3.locale;
+
+      if (data.settingId && data.settingId !== settingId) {
+        return true;
+      }
+      if (!data.settingId && (data.assistantId !== assistantId || data.locale !== locale)) {
+        return true;
+      }
+      return false;
+    }
+
     /**
      * Load the chat after getting the webchat settings if publication is enabled
-     * @param {Object} data { data.assistantUrl, data.assistantId }
+     * @param {Object} data { data.assistantUrl, data.assistantId, data.locale }
      */
 
   }, {
     key: 'loadChat',
     value: function loadChat(data) {
+      if (this.isDataOutdated(data, this)) {
+        return;
+      }
       if (!this.shouldChatBeLoaded(this.webchatSettings, data)) {
         this.unLoadChat();
         return;
@@ -1697,7 +1808,6 @@ var YeldaChat = function () {
       // because the assistant image containing the openChat event wouldn't have been created
       if (!data.hasOwnProperty('canBeClosed') || data.canBeClosed) {
         this.addAssistantImage();
-        this.addAssistantBubbleText();
       }
 
       // add the frame lister to receive message from iframe to the parent
@@ -1718,7 +1828,7 @@ var YeldaChat = function () {
         if (this.bubbleContainer) {
           this.assistantImage.removeAttribute('id', 'yelda_assistant_img');
           this.assistantImage.removeAttribute('class', 'yelda_assistant_img default');
-          this.assistantImage.removeEventListener('click', this.openChat);
+          this.assistantImage.removeEventListener('click', this.openChat.bind(this));
           this.assistantImage.replaceWith(this.bubbleContainerClone);
         } else {
           this.removeElement('yelda_assistant_img');
@@ -1766,7 +1876,7 @@ var YeldaChat = function () {
       var _this5 = this;
 
       return new babel_runtime_core_js_promise__WEBPACK_IMPORTED_MODULE_2___default.a(function () {
-        var _ref3 = babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1___default()( /*#__PURE__*/babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(function _callee4(resolve) {
+        var _ref4 = babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1___default()( /*#__PURE__*/babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(function _callee4(resolve) {
           return babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.wrap(function _callee4$(_context4) {
             while (1) {
               switch (_context4.prev = _context4.next) {
@@ -1820,8 +1930,8 @@ var YeldaChat = function () {
           }, _callee4, _this5);
         }));
 
-        return function (_x6) {
-          return _ref3.apply(this, arguments);
+        return function (_x7) {
+          return _ref4.apply(this, arguments);
         };
       }());
     }
@@ -1836,9 +1946,110 @@ var YeldaChat = function () {
       var webchatFrame = document.getElementById('web_chat_frame');
       if (webchatFrame) {
         this.openChat();
-        webchatFrame.contentWindow.postMessage({ event: 'sendUserMessage', data: message });
+        webchatFrame.contentWindow.postMessage({ event: _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.SENT.SEND_USER_MESSAGE, data: message });
       }
     }
+
+    /**
+     * Listen to url update on the page
+     * @param {Boolean} shouldRemoveEvent
+     */
+
+  }, {
+    key: 'listenUrlUpdate',
+    value: function listenUrlUpdate() {
+      var _this6 = this;
+
+      var shouldRemoveEvent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+      if (shouldRemoveEvent && this.urlObserver) {
+        this.urlObserver.disconnect();
+        this.urlObserver = null;
+        return;
+      }
+
+      try {
+        this.previousUrl = '';
+        this.urlObserver = new MutationObserver(function () {
+          if (location.href === _this6.previousUrl) {
+            return;
+          }
+          _this6.previousUrl = location.href;
+          _this6.urlUpdateListener();
+        });
+
+        this.urlObserver.observe(document, { childList: true, subtree: true });
+      } catch (err) {
+        console.warn('listenUrlUpdate error', err);
+      }
+    }
+
+    /**
+     * Callback for url update listener
+     */
+
+  }, {
+    key: 'urlUpdateListener',
+    value: function urlUpdateListener() {
+      var webchatFrame = document.getElementById('web_chat_frame');
+
+      if (!webchatFrame) {
+        return;
+      }
+      webchatFrame.contentWindow.postMessage({ event: _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.SENT.URL_UPDATE, data: window.location.href }, '*');
+    }
+
+    /**
+     * Listen leave viewport event handling
+     * @param {Boolean} shouldRemoveEvent - default false
+     */
+
+  }, {
+    key: 'listenLeaveViewport',
+    value: function listenLeaveViewport() {
+      var shouldRemoveEvent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+      var md = new mobile_detect__WEBPACK_IMPORTED_MODULE_7___default.a(navigator.userAgent);
+      var isMobile = md.mobile() !== null;
+
+      /**
+       * Not needed to listen on mobile since webchat covers the full page of the site
+       * and we can't able to detect mouseout events
+       */
+      if (isMobile) {
+        return;
+      }
+
+      var eventHandler = window[shouldRemoveEvent ? 'removeEventListener' : 'addEventListener'];
+
+      if (!this.viewportListenerBind) {
+        this.viewportListenerBind = this.viewportListener.bind(this);
+      }
+      // mouseout event is used to listen leave viewport
+      eventHandler('mouseout', this.viewportListenerBind);
+    }
+
+    /**
+     * Callback for leave viewport listener
+     * @param {Event} event
+     */
+
+  }, {
+    key: 'viewportListener',
+    value: function viewportListener(event) {
+      /**
+       * when mouse moves between dom elements mouseout event is trigged but we need to trigger
+       * the event when mouse moves out of the viewport so toElement and relatedTarget is checked
+       */
+      if (event.toElement || event.relatedTarget) {
+        return;
+      }
+
+      // When mouse leaves the viewport send 'leaveViewPort' to webchat
+      document.getElementById('web_chat_frame').contentWindow.postMessage({
+        event: _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.SENT.LEAVE_VIEWPORT
+      }, '*');
+    }
   }]);
 
   return YeldaChat;
@@ -2335,6 +2546,26 @@ module.exports = {
   HOST: {
     PRODUCTION: 'app.yelda.ai',
     STAGING: 'staging.yelda.ai'
+  },
+  FRAME_EVENT_TYPES: {
+    SENT: {
+      OPEN_CHAT: 'openChat',
+      LEAVE_VIEWPORT: 'leaveViewPort',
+      SEND_USER_MESSAGE: 'sendUserMessage',
+      URL_UPDATE: 'urlUpdate'
+    },
+    RECEIVED: {
+      OPEN_CHAT: 'openChat',
+      CLOSE_CHAT: 'closeChat',
+      ABSTAIN_LEAVE_VIEWPORT: 'abstainLeaveViewport',
+      OPEN_LIGHT_GALLERY: 'openLightGallery',
+      IS_SENDING_MESSAGE: 'isSendingMessage',
+      LISTEN_LEAVE_VIEWPORT: 'listenLeaveViewport',
+      LISTEN_URL_UPDATE: 'listenUrlUpdate',
+      ABSTAIN_URL_UPDATE: 'abstainUrlUpdate',
+      ADD_BUBBLE_TEXT: 'addBubbleText',
+      ADD_MINIMAL_NOTIFICATION_TEXT: 'addMinimalNotificationText'
+    }
   }
 };