diff --git a/app/javascript/dashboard/assets/images/twitter-chat-badge.png b/app/javascript/dashboard/assets/images/twitter-chat-badge.png
new file mode 100644
index 000000000..987ed3d07
Binary files /dev/null and b/app/javascript/dashboard/assets/images/twitter-chat-badge.png differ
diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index 6fe83720b..517950ea0 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -22,19 +22,33 @@
src="~dashboard/assets/images/fb-badge.png"
/>
+ 
+ 
![]()
@@ -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
diff --git a/app/javascript/shared/components/ui/MultiselectDropdown.vue b/app/javascript/shared/components/ui/MultiselectDropdown.vue
index 0d0d67296..687b7bf90 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdown.vue
+++ b/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"
/>
diff --git a/app/javascript/shared/mixins/inboxMixin.js b/app/javascript/shared/mixins/inboxMixin.js
index 3afd16508..5ff8509fe 100644
--- a/app/javascript/shared/mixins/inboxMixin.js
+++ b/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;
},
},
};
diff --git a/app/javascript/shared/mixins/specs/inboxMixin.spec.js b/app/javascript/shared/mixins/specs/inboxMixin.spec.js
index 093f36b57..f128a44d8 100644
--- a/app/javascript/shared/mixins/specs/inboxMixin.spec.js
+++ b/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');
+ });
});