From a47ca9cf4b6b15dceb75a723ae7385a95210431d Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 28 Jul 2021 14:43:44 +0530
Subject: [PATCH] feat: Show e-mail meta data for conversations (#2708)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 .../widgets/conversation/Message.vue          |  7 ++
 .../widgets/conversation/bubble/MailHead.vue  | 82 +++++++++++++++++++
 .../i18n/locale/en/conversation.json          |  6 ++
 3 files changed, 95 insertions(+)
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue

diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 58ef6e216..c757b37a0 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -2,6 +2,11 @@
   <li v-if="hasAttachments || data.content" :class="alignBubble">
     <div :class="wrapClass">
       <div v-tooltip.top-start="sentByMessage" :class="bubbleClass">
+        <bubble-mail-head
+          v-if="isEmailContentType"
+          :email-attributes="contentAttributes.email"
+          :is-incoming="isIncoming"
+        />
         <bubble-text
           v-if="data.content"
           :message="message"
@@ -79,6 +84,7 @@ import copy from 'copy-text-to-clipboard';
 
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import timeMixin from '../../../mixins/time';
+import BubbleMailHead from './bubble/MailHead';
 import BubbleText from './bubble/Text';
 import BubbleImage from './bubble/Image';
 import BubbleFile from './bubble/File';
@@ -98,6 +104,7 @@ export default {
     BubbleText,
     BubbleImage,
     BubbleFile,
+    BubbleMailHead,
     ContextMenu,
     Spinner,
   },
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue
new file mode 100644
index 000000000..33af50f18
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue
@@ -0,0 +1,82 @@
+<template>
+  <div
+    v-if="showHead"
+    class="message__mail-head"
+    :class="{ 'is-incoming': isIncoming }"
+  >
+    <div v-if="toMails" class="meta-wrap">
+      <span class="message__content--type">{{ $t('EMAIL_HEADER.TO') }}:</span>
+      <span>{{ toMails }}</span>
+    </div>
+    <div v-if="ccMails" class="meta-wrap">
+      <span class="message__content--type">{{ $t('EMAIL_HEADER.CC') }}:</span>
+      <span>{{ ccMails }}</span>
+    </div>
+    <div v-if="bccMails" class="meta-wrap">
+      <span class="message__content--type">{{ $t('EMAIL_HEADER.BCC') }}:</span>
+      <span>{{ bccMails }}</span>
+    </div>
+    <div v-if="subject" class="meta-wrap">
+      <span class="message__content--type">
+        {{ $t('EMAIL_HEADER.SUBJECT') }}:
+      </span>
+      <span>{{ subject }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    emailAttributes: {
+      type: Array,
+      default: () => ({}),
+    },
+    isIncoming: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    toMails() {
+      const to = this.emailAttributes.to || [];
+      return to.join(', ');
+    },
+    ccMails() {
+      const cc = this.emailAttributes.cc || [];
+      return cc.join(', ');
+    },
+    bccMails() {
+      const bcc = this.emailAttributes.bcc || [];
+      return bcc.join(', ');
+    },
+    subject() {
+      return this.emailAttributes.subject || '';
+    },
+    showHead() {
+      return this.toMails || this.ccMails || this.bccMails;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.message__mail-head {
+  padding-bottom: var(--space-small);
+  margin-bottom: var(--space-small);
+  border-bottom: 1px solid var(--w-300);
+
+  &.is-incoming {
+    border-bottom: 1px solid var(--color-border-light);
+  }
+}
+
+.meta-wrap {
+  .message__content--type {
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-mini);
+  }
+  span {
+    font-size: var(--font-size-mini);
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index 7f724f28e..7ea1d7e25 100644
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@@ -130,5 +130,11 @@
     "SELECT": {
       "PLACEHOLDER": "None"
     }
+  },
+  "EMAIL_HEADER": {
+    "TO": "To",
+    "BCC": "Bcc",
+    "CC": "Cc",
+    "SUBJECT": "Subject"
   }
 }