@hellotext/hellotext 2.3.9 → 2.4.0

package/lib/controllers/webchat_controller.cjs

@@ -11,8 +11,10 @@ var _webchat_channel = _interopRequireDefault(require("../channels/webchat_chann
 var _hellotext = _interopRequireDefault(require("../hellotext"));
 var _core = require("../core");
 var _webchat = require("../core/configuration/webchat");
-var _logo_builder = require("../builders/logo_builder");
 var _usePopover = require("./mixins/usePopover");
+var _useBehaviour = require("./webchat/useBehaviour");
+var _useOpeningSequence = require("./webchat/useOpeningSequence");
+var _useTeaser = require("./webchat/useTeaser");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
@@ -41,6 +43,7 @@ let _default = /*#__PURE__*/function (_Controller) {
       this.messagesAPI = new _messages.default(this.idValue);
       this.webChatChannel = new _webchat_channel.default(this.idValue, _hellotext.default.session, this.conversationIdValue);
       this.files = [];
+      this.messageIds = new Set();
       this.onMessageReceived = this.onMessageReceived.bind(this);
       this.onMessageReaction = this.onMessageReaction.bind(this);
       this.onTypingStart = this.onTypingStart.bind(this);
@@ -52,30 +55,41 @@ let _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "connect",
     value: function connect() {
+      (0, _useBehaviour.useBehaviour)(this);
       (0, _usePopover.usePopover)(this);
-      this.popoverTarget.classList.add(..._webchat.Webchat.classes);
-      this.triggerTarget.classList.add(..._webchat.Webchat.triggerClasses);
+      (0, _useOpeningSequence.useOpeningSequence)(this);
+      (0, _useTeaser.useTeaser)(this);
       this.setupFloatingUI({
         trigger: this.triggerTarget,
         popover: this.popoverTarget
       });
+      if (this.hasTeaserTarget) {
+        this.setupFloatingUI({
+          trigger: this.triggerTarget,
+          popover: this.teaserTarget,
+          strategy: 'absolute'
+        });
+      }
+      this.setupTeaser();
+      this.setupOpeningSequence();
       this.webChatChannel.onMessage(this.onMessageReceived);
       this.webChatChannel.onTypingStart(this.onTypingStart);
       this.webChatChannel.onReaction(this.onMessageReaction);
       this.messagesContainerTarget.addEventListener('scroll', this.onScroll);
-      if (!_hellotext.default.business.features.white_label) {
-        this.toolbarTarget.appendChild(_logo_builder.LogoBuilder.build());
-      }
       if (this.shouldOpenOnMount) {
         this.openValue = true;
       }
       _hellotext.default.eventEmitter.dispatch('webchat:mounted');
       this.broadcastChannel.addEventListener('message', this.onOutboundMessageSent);
+      this.scheduleBehaviourOpen();
       _get(_getPrototypeOf(_default.prototype), "connect", this).call(this);
     }
   }, {
     key: "disconnect",
     value: function disconnect() {
+      this.cancelBehaviourOpen();
+      this.teardownTeaser();
+      this.teardownOpeningSequence();
       this.broadcastChannel.removeEventListener('message', this.onOutboundMessageSent);
       this.messagesContainerTarget.removeEventListener('scroll', this.onScroll);
 
@@ -221,11 +235,12 @@ let _default = /*#__PURE__*/function (_Controller) {
         }
         if (attachments) {
           attachments.forEach(attachmentUrl => {
+            var _this$messageAttachme;
             const image = this.attachmentImageTarget.cloneNode(true);
             image.removeAttribute('data-hellotext--webchat-target');
             image.src = attachmentUrl;
             image.style.display = 'block';
-            element.querySelector('[data-attachment-container]').appendChild(image);
+            (_this$messageAttachme = this.messageAttachmentsContainer(element)) === null || _this$messageAttachme === void 0 ? void 0 : _this$messageAttachme.appendChild(image);
           });
         }
         element.setAttribute('data-body', body);
@@ -240,7 +255,7 @@ let _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "onClickOutside",
     value: function onClickOutside(event) {
-      if (_webchat.Webchat.behaviour === _webchat.behaviors.POPOVER && this.openValue && event.target.nodeType && this.element.contains(event.target) === false) {
+      if (_webchat.Webchat.mode === _webchat.modes.POPOVER && this.openValue && event.target.nodeType && this.element.contains(event.target) === false) {
         this.openValue = false;
       }
     }
@@ -255,7 +270,9 @@ let _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "onPopoverOpened",
     value: function onPopoverOpened() {
+      var _this$dismissTeaserFo;
       this.popoverTarget.classList.remove(...this.fadeOutClasses);
+      (_this$dismissTeaserFo = this.dismissTeaserForSession) === null || _this$dismissTeaserFo === void 0 ? void 0 : _this$dismissTeaserFo.call(this);
       if (!this.onMobile) {
         this.inputTarget.focus();
       }
@@ -270,6 +287,10 @@ let _default = /*#__PURE__*/function (_Controller) {
       }
       _hellotext.default.eventEmitter.dispatch('webchat:opened');
       localStorage.setItem(`hellotext--webchat--${this.idValue}`, 'opened');
+      if (this.messageTeaserValue) {
+        this.messageTeaserValue = null;
+      }
+      this.startOpeningSequence();
       if (this.unreadCounterTarget.style.display === 'none') return;
       this.unreadCounterTarget.style.display = 'none';
       this.unreadCounterTarget.innerText = '0';
@@ -308,11 +329,15 @@ let _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "onMessageReceived",
     value: function onMessageReceived(message) {
+      var _this$hideTeaser;
       const {
         id,
         body,
-        attachments
+        attachments,
+        teaser
       } = message;
+      if (!this.claimMessageId(id)) return;
+      (_this$hideTeaser = this.hideTeaser) === null || _this$hideTeaser === void 0 ? void 0 : _this$hideTeaser.call(this);
       if (message.carousel) {
         return this.insertCarouselMessage(message);
       }
@@ -321,13 +346,15 @@ let _default = /*#__PURE__*/function (_Controller) {
       const element = this.messageTemplateTarget.cloneNode(true);
       element.style.display = 'flex';
       element.querySelector('[data-body]').innerHTML = div.innerHTML;
+      element.setAttribute('data-id', id);
       element.setAttribute('data-hellotext--webchat-target', 'message');
       if (attachments) {
         attachments.forEach(attachmentUrl => {
+          var _this$messageAttachme2;
           const image = this.attachmentImageTarget.cloneNode(true);
           image.src = attachmentUrl;
           image.style.display = 'block';
-          element.querySelector('[data-attachment-container]').appendChild(image);
+          (_this$messageAttachme2 = this.messageAttachmentsContainer(element)) === null || _this$messageAttachme2 === void 0 ? void 0 : _this$messageAttachme2.appendChild(image);
         });
       }
       this.clearTypingIndicator();
@@ -339,13 +366,33 @@ let _default = /*#__PURE__*/function (_Controller) {
       element.scrollIntoView({
         behavior: 'smooth'
       });
+      this.updateMessageTeaser(teaser);
       if (this.openValue) {
         this.messagesAPI.markAsSeen(id);
         return;
       }
-      this.unreadCounterTarget.style.display = 'flex';
-      const unreadCount = (parseInt(this.unreadCounterTarget.innerText) || 0) + 1;
-      this.unreadCounterTarget.innerText = unreadCount > 99 ? '99+' : unreadCount;
+      this.incrementUnreadCounter();
+    }
+
+    // TCP broadcasts may deliver the same incoming message twice before Stimulus
+    // has connected the appended message target. Claiming the id in memory closes
+    // that window, while the target check still drops messages rendered earlier.
+  }, {
+    key: "claimMessageId",
+    value: function claimMessageId(id) {
+      const messageTargets = this.messageTargets || [];
+      if (this.messageIds.has(id)) return false;
+      this.messageIds.add(id);
+      return !messageTargets.some(element => element.dataset.id === id);
+    }
+  }, {
+    key: "updateMessageTeaser",
+    value: function updateMessageTeaser(teaser) {
+      this.messageTeaserValue = teaser;
+      if (this.messageTeaserValue && this.hasTeaserTarget) {
+        this.teaserTarget.innerHTML = this.messageTeaserValue;
+        this.teaserTarget.classList.toggle('invisible', this.openValue);
+      }
     }
   }, {
     key: "insertCarouselMessage",
@@ -353,6 +400,8 @@ let _default = /*#__PURE__*/function (_Controller) {
       var _element$querySelecto;
       const html = message.html;
       const element = new DOMParser().parseFromString(html, 'text/html').body.firstElementChild;
+      element.setAttribute('data-id', message.id);
+      element.setAttribute('data-hellotext--webchat-target', 'message');
       this.clearTypingIndicator();
       this.messagesContainerTarget.appendChild(element);
       element.scrollIntoView({
@@ -362,13 +411,12 @@ let _default = /*#__PURE__*/function (_Controller) {
         ...message,
         body: ((_element$querySelecto = element.querySelector('[data-body]')) === null || _element$querySelecto === void 0 ? void 0 : _element$querySelecto.innerText) || ''
       });
+      this.updateMessageTeaser(message.teaser);
       if (this.openValue) {
         this.messagesAPI.markAsSeen(message.id);
         return;
       }
-      this.unreadCounterTarget.style.display = 'flex';
-      const unreadCount = (parseInt(this.unreadCounterTarget.innerText) || 0) + 1;
-      this.unreadCounterTarget.innerText = unreadCount > 99 ? '99+' : unreadCount;
+      this.incrementUnreadCounter();
     }
   }, {
     key: "resizeInput",
@@ -394,7 +442,8 @@ let _default = /*#__PURE__*/function (_Controller) {
         cardElement
       }
     }) {
-      var _cardElement$querySel;
+      var _this$dismissTeaserFo2, _cardElement$querySel;
+      (_this$dismissTeaserFo2 = this.dismissTeaserForSession) === null || _this$dismissTeaserFo2 === void 0 ? void 0 : _this$dismissTeaserFo2.call(this);
       const formData = new FormData();
       formData.append('message[body]', body);
       formData.append('message[replied_to]', id);
@@ -402,13 +451,15 @@ let _default = /*#__PURE__*/function (_Controller) {
       formData.append('message[button]', buttonId);
       formData.append('session', _hellotext.default.session);
       formData.append('locale', _core.Locale.toString());
+      this.appendOpeningSequenceMessageIds(formData);
       const element = this.buildMessageElement();
       const attachment = (_cardElement$querySel = cardElement.querySelector('img')) === null || _cardElement$querySel === void 0 ? void 0 : _cardElement$querySel.cloneNode(true);
       element.querySelector('[data-body]').innerText = body;
       if (attachment) {
+        var _this$messageAttachme3;
         attachment.removeAttribute('width');
         attachment.removeAttribute('height');
-        element.querySelector('[data-attachment-container]').appendChild(attachment);
+        (_this$messageAttachme3 = this.messageAttachmentsContainer(element)) === null || _this$messageAttachme3 === void 0 ? void 0 : _this$messageAttachme3.appendChild(attachment);
       }
       if (this.typingIndicatorVisible && this.hasTypingIndicatorTarget) {
         this.messagesContainerTarget.insertBefore(element, this.typingIndicatorTarget);
@@ -437,6 +488,7 @@ let _default = /*#__PURE__*/function (_Controller) {
         target: element,
         detail: data.id
       });
+      this.clearRevealedOpeningSequenceMessageIds();
       const message = {
         id: data.id,
         body: body,
@@ -448,10 +500,80 @@ let _default = /*#__PURE__*/function (_Controller) {
       };
       _hellotext.default.eventEmitter.dispatch('webchat:message:sent', message);
     }
+  }, {
+    key: "sendTeaserQuickReply",
+    value: async function sendTeaserQuickReply(event) {
+      var _this$dismissTeaserFo3;
+      event.preventDefault();
+      event.stopPropagation();
+      const button = event.currentTarget;
+      const value = (button.dataset.value || '').trim();
+      const label = [button.dataset.text, button.textContent].map(text => (text || '').trim()).find(text => text.length > 0);
+      const text = value || label;
+      if (!text) return;
+      (_this$dismissTeaserFo3 = this.dismissTeaserForSession) === null || _this$dismissTeaserFo3 === void 0 ? void 0 : _this$dismissTeaserFo3.call(this);
+      this.show();
+      const buttonType = (button.dataset.type || '').trim() || 'quick_reply';
+      const formData = new FormData();
+      formData.append('message[body]', text);
+      formData.append('session', _hellotext.default.session);
+      formData.append('locale', _core.Locale.toString());
+      this.appendOpeningSequenceMessageIds(formData);
+      const element = this.buildMessageElement();
+      element.querySelector('[data-body]').innerText = text;
+      if (this.typingIndicatorVisible && this.hasTypingIndicatorTarget) {
+        this.messagesContainerTarget.insertBefore(element, this.typingIndicatorTarget);
+      } else {
+        this.messagesContainerTarget.appendChild(element);
+      }
+      element.scrollIntoView({
+        behavior: 'smooth'
+      });
+      this.broadcastChannel.postMessage({
+        type: 'message:sent',
+        element: element.outerHTML
+      });
+      if (!this.typingIndicatorVisible) {
+        clearTimeout(this.optimisticTypingTimeout);
+        this.optimisticTypingTimeout = setTimeout(() => {
+          this.showOptimisticTypingIndicator();
+        }, this.optimisticTypingIndicatorWaitValue);
+      }
+      const response = await this.messagesAPI.create(formData);
+      if (response.failed) {
+        clearTimeout(this.optimisticTypingTimeout);
+        this.broadcastChannel.postMessage({
+          type: 'message:failed',
+          id: element.id
+        });
+        return element.classList.add('failed');
+      }
+      const data = await response.json();
+      element.setAttribute('data-id', data.id);
+      this.clearRevealedOpeningSequenceMessageIds();
+      _hellotext.default.eventEmitter.dispatch('webchat:message:sent', {
+        id: data.id,
+        body: text,
+        attachments: [],
+        type: 'quick_reply',
+        teaser: {
+          text: label || text,
+          value: value || text,
+          type: buttonType
+        }
+      });
+      if (data.conversation && data.conversation !== this.conversationIdValue) {
+        this.conversationIdValue = data.conversation;
+        this.webChatChannel.updateSubscriptionWith(this.conversationIdValue);
+      }
+      if (this.typingIndicatorVisible) {
+        this.resetTypingIndicatorTimer();
+      }
+    }
   }, {
     key: "sendMessage",
     value: async function sendMessage(e) {
-      const formData = new FormData();
+      var _this$dismissTeaserFo4;
       const message = {
         body: this.inputTarget.value,
         attachments: this.files
@@ -462,6 +584,8 @@ let _default = /*#__PURE__*/function (_Controller) {
         }
         return;
       }
+      (_this$dismissTeaserFo4 = this.dismissTeaserForSession) === null || _this$dismissTeaserFo4 === void 0 ? void 0 : _this$dismissTeaserFo4.call(this);
+      const formData = new FormData();
       if (this.inputTarget.value.trim().length > 0) {
         formData.append('message[body]', this.inputTarget.value);
       } else {
@@ -472,6 +596,7 @@ let _default = /*#__PURE__*/function (_Controller) {
       });
       formData.append('session', _hellotext.default.session);
       formData.append('locale', _core.Locale.toString());
+      this.appendOpeningSequenceMessageIds(formData);
       const element = this.buildMessageElement();
       if (this.inputTarget.value.trim().length > 0) {
         element.querySelector('[data-body]').innerText = this.inputTarget.value;
@@ -481,7 +606,8 @@ let _default = /*#__PURE__*/function (_Controller) {
       const attachments = this.attachmentContainerTarget.querySelectorAll('img');
       if (attachments.length > 0) {
         attachments.forEach(attachment => {
-          element.querySelector('[data-attachment-container]').appendChild(attachment.cloneNode(true));
+          var _this$messageAttachme4;
+          (_this$messageAttachme4 = this.messageAttachmentsContainer(element)) === null || _this$messageAttachme4 === void 0 ? void 0 : _this$messageAttachme4.appendChild(attachment.cloneNode(true));
         });
       }
 
@@ -528,6 +654,7 @@ let _default = /*#__PURE__*/function (_Controller) {
       const data = await response.json();
       element.setAttribute('data-id', data.id);
       message.id = data.id;
+      this.clearRevealedOpeningSequenceMessageIds();
       _hellotext.default.eventEmitter.dispatch('webchat:message:sent', message);
       if (data.conversation !== this.conversationIdValue) {
         this.conversationIdValue = data.conversation;
@@ -551,6 +678,18 @@ let _default = /*#__PURE__*/function (_Controller) {
       element.setAttribute('data-hellotext--webchat-target', 'message');
       return element;
     }
+  }, {
+    key: "messageAttachmentsContainer",
+    value: function messageAttachmentsContainer(element) {
+      return element.querySelector('[data-attachments-container], [data-attachment-container]');
+    }
+  }, {
+    key: "incrementUnreadCounter",
+    value: function incrementUnreadCounter() {
+      this.unreadCounterTarget.style.display = 'flex';
+      const unreadCount = (parseInt(this.unreadCounterTarget.innerText) || 0) + 1;
+      this.unreadCounterTarget.innerText = Math.min(unreadCount, 9);
+    }
   }, {
     key: "openAttachment",
     value: function openAttachment() {
@@ -716,7 +855,11 @@ _default.values = {
   optimisticTypingIndicatorWait: {
     type: Number,
     default: 1000
-  } // 1 second
+  },
+  // 1 second,
+  teaser: Object,
+  messageTeaser: String,
+  behaviour: Object
 };
 _default.classes = ['fadeOut'];
-_default.targets = ['trigger', 'popover', 'input', 'attachmentInput', 'attachmentButton', 'errorMessageContainer', 'attachmentTemplate', 'attachmentContainer', 'attachment', 'messageTemplate', 'messagesContainer', 'title', 'attachmentImage', 'footer', 'toolbar', 'message', 'unreadCounter', 'typingIndicator', 'typingIndicatorTemplate'];
+_default.targets = ['trigger', 'popover', 'input', 'attachmentInput', 'attachmentButton', 'errorMessageContainer', 'attachmentTemplate', 'attachmentContainer', 'attachment', 'messageTemplate', 'messagesContainer', 'title', 'attachmentImage', 'footer', 'toolbar', 'message', 'unreadCounter', 'typingIndicator', 'typingIndicatorTemplate', 'teaser', 'openingSequence', 'openingSequenceMessage'];