feat: Add Instagram Channel (#2955)

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

@@ -6,7 +6,7 @@
   >
     <img
       v-if="channel.key === 'facebook'"
-      src="~dashboard/assets/images/channels/facebook.png"
+      src="~dashboard/assets/images/channels/messenger.png"
     />
     <img
       v-if="channel.key === 'twitter'"

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

@@ -14,12 +14,19 @@
       color="white"
       :size="avatarSize"
     />
+    <img
+      v-if="badge === 'instagram_direct_message'"
+      id="badge"
+      class="source-badge"
+      :style="badgeStyle"
+      src="~dashboard/assets/images/instagram_direct.png"
+    />
     <img
       v-if="badge === 'Channel::FacebookPage'"
       id="badge"
       class="source-badge"
       :style="badgeStyle"
-      src="~dashboard/assets/images/fb-badge.png"
+      src="~dashboard/assets/images/messenger_direct.png"
     />
     <img
       v-if="badge === 'twitter-tweet'"

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

@@ -11,7 +11,7 @@
     <thumbnail
       v-if="!hideThumbnail"
       :src="currentContact.thumbnail"
-      :badge="inboxBadge"
+      :badge="chatBadge"
       class="columns"
       :username="currentContact.name"
       :status="currentContact.availability_status"
@@ -119,6 +119,10 @@ export default {
       accountId: 'getCurrentAccountId',
     }),
 
+    chatExtraAttributes() {
+      return this.chat.additional_attributes;
+    },
+
     chatMetadata() {
       return this.chat.meta || {};
     },
@@ -127,6 +131,14 @@ export default {
       return this.chatMetadata.assignee || {};
     },
 
+    chatBadge() {
+      if(this.chatExtraAttributes['type']){
+        return this.chatExtraAttributes['type']
+      } else {
+        return this.chatMetadata.channel
+      }
+    },
+
     currentContact() {
       return this.$store.getters['contacts/getContact'](
         this.chatMetadata.sender.id

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

@@ -4,7 +4,7 @@
       <Thumbnail
         :src="currentContact.thumbnail"
         size="40px"
-        :badge="inboxBadge"
+        :badge="chatBadge"
         :username="currentContact.name"
         :status="currentContact.availability_status"
       />
@@ -73,9 +73,23 @@ export default {
       uiFlags: 'inboxAssignableAgents/getUIFlags',
       currentChat: 'getSelectedChat',
     }),
+
+    chatExtraAttributes() {
+      return this.chat.additional_attributes;
+    },
+
     chatMetadata() {
       return this.chat.meta;
     },
+
+    chatBadge() {
+      if(this.chatExtraAttributes['type']){
+        return this.chatExtraAttributes['type']
+      } else {
+        return this.chatMetadata.channel
+      }
+    },
+
     currentContact() {
       return this.$store.getters['contacts/getContact'](
         this.chat.meta.sender.id

app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue

@@ -40,7 +40,7 @@ export default {
       const { apiChannelName, apiChannelThumbnail } = this.globalConfig;
       return [
         { key: 'website', name: 'Website' },
-        { key: 'facebook', name: 'Facebook' },
+        { key: 'facebook', name: 'Messenger' },
         { key: 'twitter', name: 'Twitter' },
         { key: 'whatsapp', name: 'WhatsApp via Twilio' },
         { key: 'sms', name: 'SMS via Twilio' },

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue

@@ -206,7 +206,7 @@ export default {
           }
         },
         {
-          scope: 'pages_manage_metadata,pages_messaging',
+          scope: 'pages_manage_metadata,pages_messaging,instagram_basic,pages_show_list,instagram_manage_messages',
         }
       );
     },