feat: Display sent status of emails in email channel (#3125)

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

@@ -22,8 +22,8 @@
       />
       <reply-email-head
         v-if="showReplyHead"
-        @set-emails="setCcEmails"
         :clear-mails="clearMails"
+        @set-emails="setCcEmails"
       />
       <resizable-text-area
         v-if="!showRichContentEditor"
@@ -278,8 +278,8 @@ export default {
       }
       return !this.message.trim().replace(/\n/g, '').length;
     },
-    showReplyHead(){
-      return this.isAnEmailChannel;
+    showReplyHead() {
+      return !this.isOnPrivateNote && this.isAnEmailChannel;
     },
   },
   watch: {
@@ -465,11 +465,11 @@ export default {
         messagePayload.file = attachment.resource.file;
       }
 
-      if(this.ccEmails) {
+      if (this.ccEmails) {
         messagePayload.ccEmails = this.ccEmails;
       }
 
-      if(this.bccEmails) {
+      if (this.bccEmails) {
         messagePayload.bccEmails = this.bccEmails;
       }
 
@@ -480,8 +480,8 @@ export default {
     },
     setCcEmails(value) {
       this.bccEmails = value.bccEmails;
-      this.ccEmails = value.ccEmails
-    }
+      this.ccEmails = value.ccEmails;
+    },
   },
 };
 </script>

app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="message-text--metadata">
     <span class="time">{{ readableTime }}</span>
+    <span v-if="showSentIndicator" class="time">
+      <i
+        v-tooltip.top-start="$t('CHAT_LIST.SENT')"
+        class="icon ion-checkmark"
+      />
+    </span>
     <i
       v-if="isEmail"
       v-tooltip.top-start="$t('CHAT_LIST.RECEIVED_VIA_EMAIL')"
@@ -36,8 +42,10 @@
 <script>
 import { MESSAGE_TYPE } from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
+import inboxMixin from 'shared/mixins/inboxMixin';
 
 export default {
+  mixins: [inboxMixin],
   props: {
     sender: {
       type: Object,
@@ -99,6 +107,9 @@ export default {
       return `https://twitter.com/${screenName ||
         this.inbox.name}/status/${sourceId}`;
     },
+    showSentIndicator() {
+      return this.isOutgoing && this.sourceId && this.isAnEmailChannel;
+    },
   },
   methods: {
     onTweetReply() {
@@ -128,8 +139,7 @@ export default {
 }
 
 .right {
-  .ion-reply,
-  .ion-android-open {
+  .icon {
     color: var(--white);
   }
 }
@@ -201,4 +211,8 @@ export default {
     }
   }
 }
+
+.delivered-icon {
+  margin-left: -var(--space-normal);
+}
 </style>

app/javascript/dashboard/i18n/locale/en/chatlist.json

@@ -85,6 +85,7 @@
     "RECEIVED_VIA_EMAIL": "Received via email",
     "VIEW_TWEET_IN_TWITTER": "View tweet in Twitter",
     "REPLY_TO_TWEET": "Reply to this tweet",
+    "SENT": "Sent successfully",
     "NO_MESSAGES": "No Messages",
     "NO_CONTENT": "No content available",
     "HIDE_QUOTED_TEXT": "Hide Quoted Text",

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

@@ -486,6 +486,9 @@ export default {
       if (this.isATwilioSMSChannel || this.isATwilioWhatsappChannel) {
         return `${this.inbox.name} (${this.inbox.phone_number})`;
       }
+      if (this.isAnEmailChannel) {
+        return `${this.inbox.name} (${this.inbox.email})`;
+      }
       return this.inbox.name;
     },
     messengerScript() {

app/javascript/shared/mixins/inboxMixin.js

@@ -64,16 +64,17 @@ export default {
       return this.chatAdditionalAttributes.type || 'facebook';
     },
     inboxBadge() {
+      const badgeKey = '';
       if (this.isATwitterInbox) {
-        return this.twitterBadge;
+        badgeKey = this.twitterBadge;
+      } else if (this.isAFacebookInbox) {
+        badgeKey = this.facebookBadge;
+      } else if (this.isATwilioChannel) {
+        badgeKey = this.twilioBadge;
+      } else if (this.isAWhatsappChannel) {
+        badgeKey = 'whatsapp';
       }
-      if (this.isAFacebookInbox) {
-        return this.facebookBadge;
-      }
-      if (this.isATwilioChannel) {
-        return this.twilioBadge;
-      }
-      return this.channelType;
+      return badgeKey || this.channelType;
     },
     isAWhatsappChannel() {
       return (