yelda-webchat 1.1.5 → 1.1.9

package/dist/js/yeldaWebchatInjector.js

@@ -823,27 +823,68 @@ var YeldaChat = function () {
 
     /**
      * Create an assistantBubbleText component and add it to webChatContainer element
+     * @param {String} text - default null
+     * @param {String} cssClass - default ''
      */
 
   }, {
     key: 'addAssistantBubbleText',
     value: function addAssistantBubbleText() {
-      if (!this.webChatContainer || !this.webchatSettings || !this.webchatSettings.bubbleText) {
+      var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      var cssClass = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+
+      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.setAttribute('class', cssClass);
+      this.assistantBubbleText.innerText = text;
+      this.addCloseButtonForBubbleText();
 
       // 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);
     }
 
+    /**
+     * Add close button for bubble text
+     */
+
+  }, {
+    key: 'addCloseButtonForBubbleText',
+    value: function addCloseButtonForBubbleText() {
+      // Create close button and add it to the bubble text container
+      var closeButton = document.createElement('a');
+      closeButton.setAttribute('class', 'bubbleCloseButton');
+      closeButton.setAttribute('id', 'yelda_assistant_bubble_text_close');
+      closeButton.setAttribute('href', '#');
+      closeButton.innerHTML = '×';
+      closeButton.onclick = this.closeBubbleText.bind(this);
+      this.assistantBubbleText.prepend(closeButton);
+    }
+
+    /**
+     * Callback function for bubble text close button
+     * @param {Event} event
+     */
+
+  }, {
+    key: 'closeBubbleText',
+    value: function closeBubbleText(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.removeElement('yelda_assistant_bubble_text');
+      this.assistantBubbleText = null;
+    }
+
     /**
      * Create assistantImage element and add it to webChatContainer element
      */
@@ -878,7 +919,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();
@@ -999,6 +1040,46 @@ var YeldaChat = function () {
       return url;
     }
 
+    /**
+     * Add 'y_active' class to the webChatContainer if required
+     *
+     * To control the opacity of the iframe container (.yelda_iframe_container) and the assistant image (.yelda_assistant_img),
+      * We add and remove the "y_active" CSS class to the webChatContainer (.yelda_container) which is always visible
+      * By default
+      * - yelda_iframe_container is hidden (opacity: 0;)
+      * - assistant image is visible (opacity: 1 for yelda_assistant_img)
+      *
+      * When we add the class "y_active" to  (webChatContainer)
+      * - yelda_iframe_container is now visible (.y_active .yelda_iframe_container => opacity: 1)
+      * - the assistant image is hidden (.yelda_container.y_active .yelda_assistant_img => opacity: 0
+      *
+      * @param {Boolean} data.shouldBeOpened
+      * @param {Boolean} data.isStartBtn
+      * @param {Boolean} data.canBeClosed
+      */
+
+  }, {
+    key: 'initWebChatContainerYActiveClass',
+    value: function initWebChatContainerYActiveClass(data) {
+      // should be opened on load OR has a start button
+      var shoulBeOpened = data.shouldBeOpened || data.isStartBtn;
+
+      // cannot be closed (canBeClosed explicitly set to false)
+      var cantBeClosed = data.hasOwnProperty('canBeClosed') && !data.canBeClosed;
+
+      /**
+       * If we are sure that the webchat should be opened from the creation and displayed all the time
+       * we add the y_active class to webChatContainer at the creation
+       *
+       * Otherwise yelda_assistant_img click event management will take care of showing and hiding the webchat
+       * - closeChat() remove "y_active" from the yelda container
+       * - openChat() add y_active" to the yelda container
+       */
+      if (shoulBeOpened && cantBeClosed) {
+        this.webChatContainer.classList.add('y_active');
+      }
+    }
+
     /**
      * Create iframeContainer and it's child webchat iframe, and add it to webChatContainer
      * @param {String} url webchat url
@@ -1028,24 +1109,7 @@ var YeldaChat = function () {
           classList += ' inner';
         }
 
-        /**
-         * 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 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,
-         */
-        if ((data.shouldBeOpened || data.isStartBtn) && data.hasOwnProperty('canBeClosed') && !data.canBeClosed) {
-          classList += ' y_active';
-        } else {
-          /**
-           * If the iframe can be closed, hide it by default
-           * yelda_assistant_img click event management will take care of showing and hiding the webchat
-           * And if it should be opened, the webchat will trigger the 'openChat' event on its own
-           */
-          this.iframeContainer.style.cssText = 'display: none;';
-        }
+        this.initWebChatContainerYActiveClass(data);
 
         this.iframeContainer.setAttribute('class', classList);
         this.webChatContainer.appendChild(this.iframeContainer);
@@ -1161,6 +1225,20 @@ var YeldaChat = function () {
             // 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;
         }
         return;
       }
@@ -1187,6 +1265,11 @@ var YeldaChat = function () {
             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:
+          if (!this.configurationData.hasOwnProperty('canBeClosed') || this.configurationData.canBeClosed) {
+            this.addAssistantBubbleText(eventData.text, 'y_notification');
+          }
+          break;
       }
     }
 
@@ -1250,15 +1333,11 @@ var YeldaChat = function () {
   }, {
     key: 'closeChat',
     value: function closeChat() {
-      var assistantImgElement = document.getElementById('yelda_assistant_img');
-      if (assistantImgElement !== null) {
-        assistantImgElement.style.display = 'inline-block';
-      }
-
-      var yeldaIframeContainerElement = document.getElementById('yelda_iframe_container');
-      if (yeldaIframeContainerElement !== null) {
-        yeldaIframeContainerElement.classList.remove('y_active');
-        yeldaIframeContainerElement.style.display = 'none';
+      // Closing the webchat = remove the y_active class on #yelda_container
+      // Hiding the iframe + showing back the bubble + animation  => All is done in CSS
+      var yeldaContainerElement = document.getElementById('yelda_container');
+      if (yeldaContainerElement !== null) {
+        yeldaContainerElement.classList.remove('y_active');
       }
     }
 
@@ -1269,17 +1348,28 @@ var YeldaChat = function () {
   }, {
     key: 'openChat',
     value: function openChat() {
+      // Adding the class "activated" allows the CSS to change the transition/animation after the first opening
       var assistantImgElement = document.getElementById('yelda_assistant_img');
       if (assistantImgElement !== null) {
-        assistantImgElement.style.display = 'none';
+        assistantImgElement.classList.add('activated');
+      }
+
+      // Opening the webchat = adding the y_active class on #yelda_container
+      // Showing the iframe + hiding bubble + hiding minimal notification + animation => All is done in CSS
+      var yeldaContainerElement = document.getElementById('yelda_container');
+      if (yeldaContainerElement !== null) {
+        yeldaContainerElement.classList.add('y_active');
       }
 
-      var yeldaIframeContainerElement = document.getElementById('yelda_iframe_container');
-      if (yeldaIframeContainerElement !== null) {
-        yeldaIframeContainerElement.style.display = 'block';
-        yeldaIframeContainerElement.classList.add('y_active');
+      // Hide the assistant bubble text while opening the webchat window
+      // Note :  bubble text container is also hidden in CSS
+      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(_config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.SENT.OPEN_CHAT, '*');
     }
@@ -1378,7 +1468,7 @@ var YeldaChat = function () {
           }, _callee, _this2);
         }));
 
-        return function (_x4) {
+        return function (_x6) {
           return _ref.apply(this, arguments);
         };
       }());
@@ -1641,11 +1731,14 @@ var YeldaChat = function () {
 
                   // Remove event listeners when switching bots
                   _this4.listenLeaveViewport(true);
+                  _this4.listenUrlUpdate(true);
 
                   _this4.loadChat(data);
+
+                  _this4.configurationData = data;
                   return _context2.abrupt('return', resolve());
 
-                case 25:
+                case 27:
                 case 'end':
                   return _context2.stop();
               }
@@ -1653,7 +1746,7 @@ var YeldaChat = function () {
           }, _callee2, _this4, [[12, 19]]);
         }));
 
-        return function (_x5) {
+        return function (_x7) {
           return _ref2.apply(this, arguments);
         };
       }());
@@ -1774,7 +1867,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
@@ -1795,7 +1887,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');
@@ -1897,7 +1989,7 @@ var YeldaChat = function () {
           }, _callee4, _this5);
         }));
 
-        return function (_x6) {
+        return function (_x8) {
           return _ref4.apply(this, arguments);
         };
       }());
@@ -1917,6 +2009,55 @@ var YeldaChat = function () {
       }
     }
 
+    /**
+     * 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
@@ -2470,7 +2611,8 @@ module.exports = {
     SENT: {
       OPEN_CHAT: 'openChat',
       LEAVE_VIEWPORT: 'leaveViewPort',
-      SEND_USER_MESSAGE: 'sendUserMessage'
+      SEND_USER_MESSAGE: 'sendUserMessage',
+      URL_UPDATE: 'urlUpdate'
     },
     RECEIVED: {
       OPEN_CHAT: 'openChat',
@@ -2478,7 +2620,11 @@ module.exports = {
       ABSTAIN_LEAVE_VIEWPORT: 'abstainLeaveViewport',
       OPEN_LIGHT_GALLERY: 'openLightGallery',
       IS_SENDING_MESSAGE: 'isSendingMessage',
-      LISTEN_LEAVE_VIEWPORT: 'listenLeaveViewport'
+      LISTEN_LEAVE_VIEWPORT: 'listenLeaveViewport',
+      LISTEN_URL_UPDATE: 'listenUrlUpdate',
+      ABSTAIN_URL_UPDATE: 'abstainUrlUpdate',
+      ADD_BUBBLE_TEXT: 'addBubbleText',
+      ADD_MINIMAL_NOTIFICATION_TEXT: 'addMinimalNotificationText'
     }
   }
 };