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/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;
-      return this.isATwilioChannel && !phoneNumber.startsWith('whatsapp');
+      const { medium: medium = '' } = this.inbox;
+      return this.isATwilioChannel && medium === 'sms';
     },
     isATwilioWhatsappChannel() {
-      const { phone_number: phoneNumber = '' } = this.inbox;
-      return this.isATwilioChannel && phoneNumber.startsWith('whatsapp');
+      const { medium: medium = '' } = this.inbox;
+      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');
+  });
 });