[Bug] Remove toggle_typing API call for channels except Facebook (#211)

app/javascript/dashboard/assets/scss/widgets/_emojiinput.scss

@@ -1,10 +1,7 @@
 .emoji-dialog {
   @include elegant-card;
   background: $color-white;
-  border-radius: 2px;
   box-sizing: content-box;
-  height: 20rem;
-  padding-bottom: $space-two;
   position: absolute;
   right: 0;
   top: -22rem;
@@ -19,7 +16,7 @@
 
   .emojione {
     @include margin($zero);
-    font-size: $font-size-small;
+    font-size: $font-size-medium;
   }
 
   .emoji-row {
@@ -27,7 +24,6 @@
     box-sizing: border-box;
     height: 180px;
     overflow-y: scroll;
-    padding-bottom: 0;
 
     .emoji {
       border-radius: 4px;
@@ -67,7 +63,7 @@
     padding: $space-smaller 0 0;
 
     > li {
-      @include padding($space-small $space-small);
+      @include padding($space-smaller $space-small);
       box-sizing: border-box;
       cursor: pointer;
       display: inline-block;
@@ -99,8 +95,3 @@
     vertical-align: middle;
   }
 }
-
-.emoji-dialog .emoji-row,
-.emoji-dialog .emoji-row .emoji:hover {
-  background: $color-extra-light-blue;
-}

app/javascript/dashboard/components/widgets/Thumbnail.vue

@@ -17,7 +17,7 @@
     >
     </Avatar>
     <img
-      v-if="badge === 'Facebook'"
+      v-if="badge === 'Channel::FacebookPage'"
       id="badge"
       class="source-badge"
       :style="badgeStyle"

app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue

@@ -1,17 +1,23 @@
 <template>
-  <div>
-  <ul class="vertical dropdown menu canned" id="canned-list"  v-bind:style="{ top: getTopPadding() + 'rem'}">
+  <ul
+    v-if="cannedMessages.length"
+    id="canned-list"
+    class="vertical dropdown menu canned"
+    :style="{ top: getTopPadding() + 'rem' }"
+  >
     <li
       v-for="(item, index) in cannedMessages"
       :id="`canned-${index}`"
-      :class="{'active': index === selectedIndex}"
-      v-on:click="onListItemSelection(index)"
-      v-on:mouseover="onHover(index)"
+      :key="item.short_code"
+      :class="{ active: index === selectedIndex }"
+      @click="onListItemSelection(index)"
+      @mouseover="onHover(index)"
     >
-      <a><strong>{{item.short_code}}</strong> - {{item.content}}</a>
+      <a class="text-truncate">
+        <strong>{{ item.short_code }}</strong> - {{ item.content }}
+      </a>
     </li>
   </ul>
-</div>
 </template>
 
 <script>
@@ -30,9 +36,11 @@ export default {
     }),
   },
   mounted() {
-    /* eslint-disable no-confusing-arrow */
     document.addEventListener('keydown', this.keyListener);
   },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.keyListener);
+  },
   methods: {
     getTopPadding() {
       if (this.cannedMessages.length <= 4) {
@@ -41,10 +49,10 @@ export default {
       return -14;
     },
     isUp(e) {
-      return e.keyCode === 38 || (e.ctrlKey && e.keyCode === 80);  // UP, Ctrl-P
+      return e.keyCode === 38 || (e.ctrlKey && e.keyCode === 80); // UP, Ctrl-P
     },
     isDown(e) {
-      return e.keyCode === 40 || (e.ctrlKey && e.keyCode === 78);  // DOWN, Ctrl-N
+      return e.keyCode === 40 || (e.ctrlKey && e.keyCode === 78); // DOWN, Ctrl-N
     },
     isEnter(e) {
       return e.keyCode === 13;
@@ -67,7 +75,8 @@ export default {
       if (this.isEnter(e)) {
         this.onKeyenter(this.cannedMessages[this.selectedIndex].content);
       }
-      this.$el.querySelector('#canned-list').scrollTop = 34 * this.selectedIndex;
+      this.$el.querySelector('#canned-list').scrollTop =
+        34 * this.selectedIndex;
     },
     onHover(index) {
       this.selectedIndex = index;
@@ -77,8 +86,13 @@ export default {
       this.onClick(this.cannedMessages[this.selectedIndex].content);
     },
   },
-  beforeDestroy() {
-    document.removeEventListener('keydown', this.keyListener);
-  },
 };
 </script>
+
+<style lang="scss" scoped>
+.text-truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -2,7 +2,7 @@
   <div class="reply-box">
     <div class="reply-box__top" :class="{ 'is-private': isPrivate }">
       <canned-response
-        v-if="showCannedModal"
+        v-if="showCannedResponsesList"
         v-on-clickaway="hideCannedResponse"
         data-dropdown-menu
         :on-keyenter="replaceText"
@@ -88,12 +88,22 @@ export default {
       message: '',
       isPrivate: false,
       showEmojiPicker: false,
-      showCannedModal: false,
+      showCannedResponsesList: false,
     };
   },
-  computed: mapGetters({
-    currentChat: 'getSelectedChat',
-  }),
+  computed: {
+    ...mapGetters({
+      currentChat: 'getSelectedChat',
+    }),
+    channelType() {
+      const {
+        meta: {
+          sender: { channel },
+        },
+      } = this.currentChat;
+      return channel;
+    },
+  },
   components: {
     EmojiInput,
     CannedResponse,
@@ -107,7 +117,7 @@ export default {
       const hasNextWord = val.indexOf(' ') > -1;
       const isShortCodeActive = isSlashCommand && !hasNextWord;
       if (isShortCodeActive) {
-        this.showCannedModal = true;
+        this.showCannedResponsesList = true;
         if (val.length > 1) {
           const searchKey = val.substr(1, val.length);
           this.$store.dispatch('getCannedResponse', {
@@ -117,26 +127,28 @@ export default {
           this.$store.dispatch('getCannedResponse');
         }
       } else {
-        this.showCannedModal = false;
+        this.showCannedResponsesList = false;
       }
     },
   },
   mounted() {
-    /* eslint-disable no-confusing-arrow */
-    document.addEventListener('keydown', e => {
+    document.addEventListener('keydown', this.handleKeyEvents);
+  },
+  destroyed() {
+    document.removeEventListener('keydown', this.handleKeyEvents);
+  },
+  methods: {
+    handleKeyEvents(e) {
       if (this.isEscape(e)) {
         this.hideEmojiPicker();
         this.hideCannedResponse();
-      }
-      if (this.isEnter(e)) {
+      } else if (this.isEnter(e)) {
         if (!e.shiftKey) {
           e.preventDefault();
           this.sendMessage();
         }
       }
-    });
-  },
-  methods: {
+    },
     isEnter(e) {
       return e.keyCode === 13;
     },
@@ -144,11 +156,11 @@ export default {
       return e.keyCode === 27; // ESCAPE
     },
     sendMessage() {
-      const messageHasOnlyNewLines = !this.message.replace(/\n/g, '').length;
-      if (messageHasOnlyNewLines) {
+      const isMessageEmpty = !this.message.replace(/\n/g, '').length;
+      if (isMessageEmpty) {
         return;
       }
-      if (this.message.length !== 0 && !this.showCannedModal) {
+      if (!this.showCannedResponsesList) {
         this.$store
           .dispatch('sendMessage', {
             conversationId: this.currentChat.id,
@@ -165,7 +177,7 @@ export default {
     replaceText(message) {
       setTimeout(() => {
         this.message = message;
-      }, 200);
+      }, 100);
     },
     makePrivate() {
       this.isPrivate = true;
@@ -192,7 +204,7 @@ export default {
       }
     },
     hideCannedResponse() {
-      this.showCannedModal = false;
+      this.showCannedResponsesList = false;
     },
 
     onBlur() {
@@ -203,18 +215,22 @@ export default {
       this.toggleTyping('on');
     },
     markSeen() {
-      this.$store.dispatch('markSeen', {
-        inboxId: this.currentChat.inbox_id,
-        contactId: this.currentChat.meta.sender.id,
-      });
+      if (this.channelType !== 'Channel::FacebookPage') {
+        this.$store.dispatch('markSeen', {
+          inboxId: this.currentChat.inbox_id,
+          contactId: this.currentChat.meta.sender.id,
+        });
+      }
     },
 
     toggleTyping(status) {
-      this.$store.dispatch('toggleTyping', {
-        status,
-        inboxId: this.currentChat.inbox_id,
-        contactId: this.currentChat.meta.sender.id,
-      });
+      if (this.channelType !== 'Channel::FacebookPage') {
+        this.$store.dispatch('toggleTyping', {
+          status,
+          inboxId: this.currentChat.inbox_id,
+          contactId: this.currentChat.meta.sender.id,
+        });
+      }
     },
     disableButton() {
       const messageHasOnlyNewLines = !this.message.replace(/\n/g, '').length;

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -14,7 +14,7 @@
     },
     "FOOTER": {
       "MSG_INPUT": "Shift + enter for new line. Start with '/' to select a Canned Response.",
-      "PRIVATE_MSG_INPUT": "Shift + enter for new line.This will be visible only to Agents"
+      "PRIVATE_MSG_INPUT": "Shift + enter for new line. This will be visible only to Agents"
     },
     "REPLYBOX": {
       "SEND": "Send",

app/models/channel/web_widget.rb

@@ -9,6 +9,10 @@ module Channel
     has_one :inbox, as: :channel, dependent: :destroy
     has_secure_token :website_token
 
+    def name
+      'Website'
+    end
+
     def create_contact_inbox
       ActiveRecord::Base.transaction do
         contact = inbox.account.contacts.create!(name: ::Haikunator.haikunate(1000))

app/models/facebook_page.rb

@@ -1,22 +0,0 @@
-class FacebookPage < ApplicationRecord
-  validates :account_id, presence: true
-  validates_uniqueness_of :page_id, scope: :account_id
-  mount_uploader :avatar, AvatarUploader
-  belongs_to :account
-
-  has_one :inbox, as: :channel, dependent: :destroy
-
-  before_destroy :unsubscribe
-
-  def name
-    'Facebook'
-  end
-
-  private
-
-  def unsubscribe
-    Facebook::Messenger::Subscriptions.unsubscribe(access_token: page_access_token)
-  rescue StandardError => e
-    true
-  end
-end

app/views/api/v1/conversations/index.json.jbuilder

@@ -12,7 +12,7 @@ json.data do
           json.id conversation.contact.id
           json.name conversation.contact.name
           json.thumbnail conversation.contact.avatar.thumb.url
-          json.channel conversation.inbox.try(:channel).try(:name)
+          json.channel conversation.inbox.try(:channel_type)
         end
         json.assignee conversation.assignee
       end