fix: Add background to inbox channel badges (#3152)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

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

@@ -19,56 +19,56 @@
       id="badge"
       class="source-badge"
       :style="badgeStyle"
-      src="~dashboard/assets/images/instagram_direct.png"
+      src="/integrations/channels/badges/instagram-dm.png"
     />
     <img
-      v-if="badge === 'Channel::FacebookPage'"
+      v-else-if="badge === 'facebook'"
       id="badge"
       class="source-badge"
       :style="badgeStyle"
-      src="~dashboard/assets/images/messenger_direct.png"
+      src="/integrations/channels/badges/messenger.png"
     />
     <img
-      v-if="badge === 'twitter-tweet'"
+      v-else-if="badge === 'twitter-tweet'"
       id="badge"
       class="source-badge"
       :style="badgeStyle"
-      src="~dashboard/assets/images/twitter-badge.png"
+      src="/integrations/channels/badges/twitter-tweet.png"
     />
     <img
-      v-if="badge === 'twitter-chat'"
+      v-else-if="badge === 'twitter-dm'"
       id="badge"
       class="source-badge"
       :style="badgeStyle"
-      src="~dashboard/assets/images/twitter-chat-badge.png"
+      src="/integrations/channels/badges/twitter-dm.png"
     />
     <img
-      v-if="badge === 'whatsapp'"
+      v-else-if="badge === 'whatsapp'"
       id="badge"
       class="source-badge"
       :style="badgeStyle"
-      src="~dashboard/assets/images/channels/whatsapp.png"
+      src="/integrations/channels/badges/whatsapp.png"
     />
     <img
-      v-if="badge === 'sms'"
+      v-else-if="badge === 'sms'"
       id="badge"
       class="source-badge"
       :style="badgeStyle"
-      src="~dashboard/assets/images/channels/sms.png"
+      src="/integrations/channels/badges/sms.png"
     />
     <img
-      v-if="badge === 'Channel::Line'"
+      v-else-if="badge === 'Channel::Line'"
       id="badge"
       class="source-badge"
       :style="badgeStyle"
-      src="~dashboard/assets/images/channels/line.png"
+      src="/integrations/channels/badges/line.png"
     />
     <img
-      v-if="badge === 'Channel::Telegram'"
+      v-else-if="badge === 'Channel::Telegram'"
       id="badge"
       class="source-badge"
       :style="badgeStyle"
-      src="~dashboard/assets/images/channels/telegram.png"
+      src="/integrations/channels/badges/telegram.png"
     />
     <div
       v-if="showStatusIndicator"
@@ -130,8 +130,10 @@ export default {
       return Number(this.size.replace(/\D+/g, ''));
     },
     badgeStyle() {
-      const badgeSize = `${this.avatarSize / 3}px`;
-      return { width: badgeSize, height: badgeSize };
+      const size = Math.floor(this.avatarSize / 3);
+      const badgeSize = `${size + 2}px`;
+      const borderRadius = `${size / 2}px`;
+      return { width: badgeSize, height: badgeSize, borderRadius };
     },
     statusStyle() {
       const statusSize = `${this.avatarSize / 4}px`;
@@ -181,8 +183,12 @@ export default {
   }
 
   .source-badge {
+    background: white;
+    border-radius: var(--border-radius-small);
     bottom: -$space-micro;
+    box-shadow: var(--shadow-small);
     height: $space-slab;
+    padding: var(--space-micro);
     position: absolute;
     right: $zero;
     width: $space-slab;

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

@@ -11,7 +11,7 @@
     <thumbnail
       v-if="!hideThumbnail"
       :src="currentContact.thumbnail"
-      :badge="chatBadge"
+      :badge="inboxBadge"
       class="columns"
       :username="currentContact.name"
       :status="currentContact.availability_status"
@@ -21,7 +21,7 @@
       <div class="conversation--metadata">
         <inbox-name v-if="showInboxName" :inbox="inbox" />
         <span
-          v-if="showAssignee && assignee"
+          v-if="showAssignee && assignee.name"
           class="label assignee-label text-truncate"
         >
           <i class="ion-person" />
@@ -119,10 +119,6 @@ export default {
       accountId: 'getCurrentAccountId',
     }),
 
-    chatExtraAttributes() {
-      return this.chat.additional_attributes;
-    },
-
     chatMetadata() {
       return this.chat.meta || {};
     },
@@ -131,14 +127,6 @@ 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="chatBadge"
+        :badge="inboxBadge"
         :username="currentContact.name"
         :status="currentContact.availability_status"
       />
@@ -74,22 +74,10 @@ export default {
       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/shared/mixins/inboxMixin.js

@@ -47,23 +47,29 @@ export default {
       const { medium: medium = '' } = this.inbox;
       return this.isATwilioChannel && medium === 'whatsapp';
     },
+    chatAdditionalAttributes() {
+      const { additional_attributes: additionalAttributes } = this.chat || {};
+      return additionalAttributes || {};
+    },
     isTwitterInboxTweet() {
-      return (
-        this.chat &&
-        this.chat.additional_attributes &&
-        this.chat.additional_attributes.type === 'tweet'
-      );
+      return this.chatAdditionalAttributes.type === 'tweet';
     },
     twilioBadge() {
       return `${this.isATwilioSMSChannel ? 'sms' : 'whatsapp'}`;
     },
     twitterBadge() {
-      return `${this.isTwitterInboxTweet ? 'twitter-tweet' : 'twitter-chat'}`;
+      return `${this.isTwitterInboxTweet ? 'twitter-tweet' : 'twitter-dm'}`;
+    },
+    facebookBadge() {
+      return this.chatAdditionalAttributes.type || 'facebook';
     },
     inboxBadge() {
       if (this.isATwitterInbox) {
         return this.twitterBadge;
       }
+      if (this.isAFacebookInbox) {
+        return this.facebookBadge;
+      }
       if (this.isATwilioChannel) {
         return this.twilioBadge;
       }

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2021_09_23_132659) do
+ActiveRecord::Schema.define(version: 2021_09_29_150415) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "pg_stat_statements"
@@ -61,6 +61,14 @@ ActiveRecord::Schema.define(version: 2021_09_23_132659) do
     t.index ["message_id", "message_checksum"], name: "index_action_mailbox_inbound_emails_uniqueness", unique: true
   end
 
+  create_table "actions", force: :cascade do |t|
+    t.string "name", null: false
+    t.jsonb "execution_list", default: {}, null: false
+    t.datetime "created_at", precision: 6, null: false
+    t.datetime "updated_at", precision: 6, null: false
+    t.index ["name"], name: "index_actions_on_name"
+  end
+
   create_table "active_storage_attachments", force: :cascade do |t|
     t.string "name", null: false
     t.string "record_type", null: false
@@ -300,7 +308,7 @@ ActiveRecord::Schema.define(version: 2021_09_23_132659) do
     t.datetime "agent_last_seen_at"
     t.jsonb "additional_attributes", default: {}
     t.bigint "contact_inbox_id"
-    t.uuid "uuid", default: -> { "gen_random_uuid()" }, null: false
+    t.uuid "uuid", default: -> { "public.gen_random_uuid()" }, null: false
     t.string "identifier"
     t.datetime "last_activity_at", default: -> { "CURRENT_TIMESTAMP" }, null: false
     t.bigint "team_id"