feat: Show links for custom attributes (#2723)

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>
 

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 || {};