From 5c6958482f55c5fe0ac1e0cb2674ba2cade517e7 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Thu, 3 Feb 2022 12:14:34 +0530
Subject: [PATCH] fix: Shows tooltip and avatar for template messages (#3898)

---
 .../widgets/conversation/Message.vue          | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 97fda5bcf..a71ba13d0 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -64,7 +64,7 @@
       >
         <woot-thumbnail
           :src="sender.thumbnail"
-          :username="sender.name"
+          :username="senderNameForAvatar"
           size="16px"
         />
         <a
@@ -248,6 +248,9 @@ export default {
     isOutgoing() {
       return this.data.message_type === MESSAGE_TYPE.OUTGOING;
     },
+    isTemplate() {
+      return this.data.message_type === MESSAGE_TYPE.TEMPLATE;
+    },
     emailHeadAttributes() {
       return {
         email: this.contentAttributes.email,
@@ -265,8 +268,12 @@ export default {
       return !!this.data.content;
     },
     tooltipForSender() {
-      const { name = this.$t('CONVERSATION.BOT') } = this.sender || {};
-      return this.data.message_type === MESSAGE_TYPE.OUTGOING
+      const name = this.senderNameForAvatar;
+      const { message_type: messageType } = this.data;
+      const showTooltip =
+        messageType === MESSAGE_TYPE.OUTGOING ||
+        messageType === MESSAGE_TYPE.TEMPLATE;
+      return showTooltip
         ? {
             content: `${this.$t('CONVERSATION.SENT_BY')} ${name}`,
             classes: 'top',
@@ -323,11 +330,18 @@ export default {
       return meta ? meta.error : '';
     },
     showAvatar() {
-      if (this.isOutgoing) {
-        return this.sender;
+      if (this.isOutgoing || this.isTemplate) {
+        return true;
       }
       return this.isATweet && this.isIncoming && this.sender;
     },
+    senderNameForAvatar() {
+      if (this.isOutgoing || this.isTemplate) {
+        const { name = this.$t('CONVERSATION.BOT') } = this.sender || {};
+        return name;
+      }
+      return '';
+    },
   },
   watch: {
     data() {