bug: Fixes Incorrect badge for Twilio SMS inbox and adds the ability to differentiate Twitter tweets and chats (#3003)

* bug: Fixes Incorrect badge in the thumbnail for Twilio SMS inbox

* Minor fixes

* Minor fixes

* Review fixes

* Minor fixes

* fixes codeclimate error

* Minor fixes

* Minor fixes

* Minor fixes

* Review fixes

* Minor fixes

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

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

@@ -22,19 +22,33 @@
       src="~dashboard/assets/images/fb-badge.png"
     />
     <img
-      v-if="badge === 'Channel::TwitterProfile'"
+      v-if="badge === 'twitter-tweet'"
       id="badge"
       class="source-badge"
       :style="badgeStyle"
       src="~dashboard/assets/images/twitter-badge.png"
     />
     <img
-      v-if="badge === 'Channel::TwilioSms'"
+      v-if="badge === 'twitter-chat'"
+      id="badge"
+      class="source-badge"
+      :style="badgeStyle"
+      src="~dashboard/assets/images/twitter-chat-badge.png"
+    />
+    <img
+      v-if="badge === 'whatsapp'"
       id="badge"
       class="source-badge"
       :style="badgeStyle"
       src="~dashboard/assets/images/channels/whatsapp.png"
     />
+    <img
+      v-if="badge === 'sms'"
+      id="badge"
+      class="source-badge"
+      :style="badgeStyle"
+      src="~dashboard/assets/images/channels/sms.png"
+    />
     <img
       v-if="badge === 'Channel::Line'"
       id="badge"

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

@@ -11,7 +11,7 @@
     <Thumbnail
       v-if="!hideThumbnail"
       :src="currentContact.thumbnail"
-      :badge="chatMetadata.channel"
+      :badge="inboxBadge"
       class="columns"
       :username="currentContact.name"
       :status="currentContact.availability_status"
@@ -68,13 +68,14 @@ import conversationMixin from '../../../mixins/conversations';
 import timeMixin from '../../../mixins/time';
 import router from '../../../routes';
 import { frontendURL, conversationUrl } from '../../../helper/URLHelper';
+import inboxMixin from 'shared/mixins/inboxMixin';
 
 export default {
   components: {
     Thumbnail,
   },
 
-  mixins: [timeMixin, conversationMixin, messageFormatterMixin],
+  mixins: [inboxMixin, timeMixin, conversationMixin, messageFormatterMixin],
   props: {
     activeLabel: {
       type: String,
@@ -167,14 +168,14 @@ export default {
       return this.getPlainText(subject || this.lastMessageInChat.content);
     },
 
-    chatInbox() {
+    inbox() {
       const { inbox_id: inboxId } = this.chat;
       const stateInbox = this.$store.getters['inboxes/getInbox'](inboxId);
       return stateInbox;
     },
 
     computedInboxClass() {
-      const { phone_number: phoneNumber, channel_type: type } = this.chatInbox;
+      const { phone_number: phoneNumber, channel_type: type } = this.inbox;
       const classByType = getInboxClassByType(type, phoneNumber);
       return classByType;
     },
@@ -187,11 +188,10 @@ export default {
       );
     },
     inboxName() {
-      const stateInbox = this.chatInbox;
+      const stateInbox = this.inbox;
       return stateInbox.name || '';
     },
   },
-
   methods: {
     cardClick(chat) {
       const { activeInbox } = this;

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

@@ -4,7 +4,7 @@
       <Thumbnail
         :src="currentContact.thumbnail"
         size="40px"
-        :badge="chatMetadata.channel"
+        :badge="inboxBadge"
         :username="currentContact.name"
         :status="currentContact.availability_status"
       />
@@ -42,6 +42,7 @@ import MoreActions from './MoreActions';
 import Thumbnail from '../Thumbnail';
 import agentMixin from '../../../mixins/agentMixin.js';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import inboxMixin from 'shared/mixins/inboxMixin';
 import { hasPressedAltAndOKey } from 'shared/helpers/KeyboardHelpers';
 
 export default {
@@ -49,7 +50,7 @@ export default {
     MoreActions,
     Thumbnail,
   },
-  mixins: [agentMixin, eventListenerMixins],
+  mixins: [inboxMixin, agentMixin, eventListenerMixins],
   props: {
     chat: {
       type: Object,
@@ -78,6 +79,12 @@ export default {
       return this.chat.meta;
     },
 
+    inbox() {
+      const { inbox_id: inboxId } = this.chat;
+      const stateInbox = this.$store.getters['inboxes/getInbox'](inboxId);
+      return stateInbox;
+    },
+
     currentContact() {
       return this.$store.getters['contacts/getContact'](
         this.chat.meta.sender.id

app/javascript/shared/components/ui/MultiselectDropdown.vue

@@ -16,7 +16,6 @@
           :src="selectedItem.thumbnail"
           size="24px"
           :status="selectedItem.availability_status"
-          :badge="selectedItem.channel"
           :username="selectedItem.name"
         />
         <div class="selector-name-wrap">

app/javascript/shared/mixins/inboxMixin.js

@@ -36,12 +36,34 @@ export default {
       return this.channelType === INBOX_TYPES.EMAIL;
     },
     isATwilioSMSChannel() {
-      const { phone_number: phoneNumber = '' } = this.inbox;
+      const { medium: medium = '' } = this.inbox;
-      return this.isATwilioChannel && !phoneNumber.startsWith('whatsapp');
+      return this.isATwilioChannel && medium === 'sms';
     },
     isATwilioWhatsappChannel() {
-      const { phone_number: phoneNumber = '' } = this.inbox;
+      const { medium: medium = '' } = this.inbox;
-      return this.isATwilioChannel && phoneNumber.startsWith('whatsapp');
+      return this.isATwilioChannel && medium === 'whatsapp';
+    },
+    isTwitterInboxTweet() {
+      return (
+        this.chat &&
+        this.chat.additional_attributes &&
+        this.chat.additional_attributes.type === 'tweet'
+      );
+    },
+    twilioBadge() {
+      return `${this.isATwilioSMSChannel ? 'sms' : 'whatsapp'}`;
+    },
+    twitterBadge() {
+      return `${this.isTwitterInboxTweet ? 'twitter-tweet' : 'twitter-chat'}`;
+    },
+    inboxBadge() {
+      if (this.isATwitterInbox) {
+        return this.twitterBadge;
+      }
+      if (this.isATwilioChannel) {
+        return this.twilioBadge;
+      }
+      return this.channelType;
     },
   },
 };

app/javascript/shared/mixins/specs/inboxMixin.spec.js

@@ -70,7 +70,23 @@ describe('inboxMixin', () => {
         return {
           inbox: {
             channel_type: 'Channel::TwilioSms',
-            phone_number: '+91944444444',
+          },
+        };
+      },
+    };
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.isATwilioChannel).toBe(true);
+  });
+
+  it('isATwilioSMSChannel returns true if channel type is Twilio and medium is SMS', () => {
+    const Component = {
+      render() {},
+      mixins: [inboxMixin],
+      data() {
+        return {
+          inbox: {
+            channel_type: 'Channel::TwilioSms',
+            medium: 'sms',
           },
         };
       },
@@ -80,7 +96,7 @@ describe('inboxMixin', () => {
     expect(wrapper.vm.isATwilioSMSChannel).toBe(true);
   });
 
-  it('isATwilioWhatsappChannel returns true if channel type is Twilio and phonenumber is a whatsapp number', () => {
+  it('isATwilioWhatsappChannel returns true if channel type is Twilio and medium is whatsapp', () => {
     const Component = {
       render() {},
       mixins: [inboxMixin],
@@ -88,7 +104,7 @@ describe('inboxMixin', () => {
         return {
           inbox: {
             channel_type: 'Channel::TwilioSms',
-            phone_number: 'whatsapp:+91944444444',
+            medium: 'whatsapp',
           },
         };
       },
@@ -111,4 +127,79 @@ describe('inboxMixin', () => {
     const wrapper = shallowMount(Component);
     expect(wrapper.vm.isAnEmailChannel).toBe(true);
   });
+
+  it('isTwitterInboxTweet returns true if Twitter channel type is tweet', () => {
+    const Component = {
+      render() {},
+      mixins: [inboxMixin],
+      data() {
+        return {
+          chat: {
+            channel_type: 'Channel::TwitterProfile',
+            additional_attributes: {
+              type: 'tweet',
+            },
+          },
+        };
+      },
+    };
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.isTwitterInboxTweet).toBe(true);
+  });
+
+  it('twilioBadge returns string sms if channel type is Twilio and medium is sms', () => {
+    const Component = {
+      render() {},
+      mixins: [inboxMixin],
+      data() {
+        return {
+          inbox: {
+            channel_type: 'Channel::TwilioSms',
+            medium: 'sms',
+          },
+        };
+      },
+    };
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.isATwilioSMSChannel).toBe(true);
+    expect(wrapper.vm.twilioBadge).toBe('sms');
+  });
+
+  it('twitterBadge returns string twitter-tweet if Twitter channel type is tweet', () => {
+    const Component = {
+      render() {},
+      mixins: [inboxMixin],
+      data() {
+        return {
+          chat: {
+            id: 1,
+            additional_attributes: {
+              type: 'tweet',
+            },
+          },
+        };
+      },
+    };
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.isTwitterInboxTweet).toBe(true);
+    expect(wrapper.vm.twitterBadge).toBe('twitter-tweet');
+  });
+
+  it('inboxBadge returns string Channel::Telegram if isATwilioChannel and isATwitterInbox is false', () => {
+    const Component = {
+      render() {},
+      mixins: [inboxMixin],
+      data() {
+        return {
+          inbox: {
+            channel_type: 'Channel::Telegram',
+          },
+        };
+      },
+    };
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.isATwilioChannel).toBe(false);
+    expect(wrapper.vm.isATwitterInbox).toBe(false);
+    expect(wrapper.vm.channelType).toBe('Channel::Telegram');
+  });
 });