From 8f30abb98bcc94cedb8b2f1ddc6172246a7a84dc Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 28 Jul 2021 21:36:35 +0530
Subject: [PATCH] feat: Show links for custom attributes (#2723)

---
 .../dashboard/conversation/ContactCustomAttributes.vue | 10 +++++++++-
 .../routes/dashboard/conversation/ContactPanel.vue     |  5 ++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
index bc3550817..7639e08e3 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
@@ -14,7 +14,7 @@
         {{ attribute }}
       </div>
       <div>
-        {{ customAttributes[attribute] }}
+        <span v-html="valueWithLink(customAttributes[attribute])"></span>
       </div>
     </div>
   </div>
@@ -22,11 +22,13 @@
 
 <script>
 import ContactDetailsItem from './ContactDetailsItem.vue';
+import MessageFormatter from 'shared/helpers/MessageFormatter.js';
 
 export default {
   components: {
     ContactDetailsItem,
   },
+
   props: {
     customAttributes: {
       type: Object,
@@ -41,6 +43,12 @@ export default {
       });
     },
   },
+  methods: {
+    valueWithLink(attribute) {
+      const messageFormatter = new MessageFormatter(attribute);
+      return messageFormatter.formattedMessage;
+    },
+  },
 };
 </script>
 
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index e6cddb584..f2e7a8870 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -195,9 +195,8 @@ export default {
       return this.additionalAttributes.initiated_at;
     },
     browserName() {
-      return `${this.browser.browser_name || ''} ${
-        this.browser.browser_version || ''
-      }`;
+      return `${this.browser.browser_name || ''} ${this.browser
+        .browser_version || ''}`;
     },
     contactAdditionalAttributes() {
       return this.contact.additional_attributes || {};