feat: Custom Attributes for contacts (#1158)

Co-authored-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>

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

@@ -9,6 +9,9 @@
       "NO_RECORDS_FOUND": "There are no previous conversations associated to this contact.",
       "TITLE": "Previous Conversations"
     },
+    "CUSTOM_ATTRIBUTES": {
+      "TITLE": "Custom Attributes"
+    },
     "LABELS": {
       "TITLE": "Conversation Labels",
       "MODAL": {

app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="custom-attributes--panel">
+    <contact-details-item
+      :title="$t('CONTACT_PANEL.CUSTOM_ATTRIBUTES.TITLE')"
+      icon="ion-code"
+    />
+    <div
+      v-for="attribute in listOfAttributes"
+      :key="attribute"
+      class="custom-attribute--row"
+    >
+      <div class="custom-attribute--row__attribute">
+        {{ attribute }}
+      </div>
+      <div>
+        {{ customAttributes[attribute] }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ContactDetailsItem from './ContactDetailsItem.vue';
+
+export default {
+  components: {
+    ContactDetailsItem,
+  },
+  props: {
+    customAttributes: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    listOfAttributes() {
+      return Object.keys(this.customAttributes).filter(key => {
+        const value = this.customAttributes[key];
+        return value !== null && value !== undefined && value !== '';
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.custom-attributes--panel {
+  border-top: 1px solid var(--b-100);
+  padding: var(--space-normal);
+}
+
+.custom-attribute--row {
+  margin-bottom: var(--space-small);
+}
+
+.custom-attribute--row__attribute {
+  font-weight: 500;
+}
+</style>

app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue

@@ -36,7 +36,7 @@ export default {
 @import '~dashboard/assets/scss/mixins';
 
 .conv-details--item {
-  padding-bottom: $space-normal;
+  padding-bottom: var(--space-slab);
 
   &:last-child {
     padding-bottom: 0;

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -84,6 +84,10 @@
         icon="ion-clock"
       />
     </div>
+    <contact-custom-attributes
+      v-if="hasContactAttributes"
+      :custom-attributes="contact.custom_attributes"
+    />
     <conversation-labels :conversation-id="conversationId" />
     <contact-conversations
       v-if="contact.id"
@@ -99,9 +103,11 @@ import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import ContactConversations from './ContactConversations.vue';
 import ContactDetailsItem from './ContactDetailsItem.vue';
 import ConversationLabels from './labels/LabelBox.vue';
+import ContactCustomAttributes from './ContactCustomAttributes';
 
 export default {
   components: {
+    ContactCustomAttributes,
     ContactConversations,
     ContactDetailsItem,
     ConversationLabels,
@@ -129,6 +135,10 @@ export default {
     additionalAttributes() {
       return this.currentConversationMetaData.additional_attributes || {};
     },
+    hasContactAttributes() {
+      const { custom_attributes: customAttributes } = this.contact;
+      return customAttributes && Object.keys(customAttributes).length;
+    },
     browser() {
       return this.additionalAttributes.browser || {};
     },