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

app/javascript/packs/sdk.js

@@ -32,6 +32,24 @@ const runSDK = ({ baseUrl, websiteToken }) => {
       }
     },
 
+    setCustomAttributes(customAttributes = {}) {
+      if (!customAttributes || !Object.keys(customAttributes).length) {
+        throw new Error('Custom attributes should have atleast one key');
+      } else {
+        IFrameHelper.sendMessage('set-custom-attributes', { customAttributes });
+      }
+    },
+
+    deleteCustomAttribute(customAttribute = '') {
+      if (!customAttribute) {
+        throw new Error('Custom attribute is required');
+      } else {
+        IFrameHelper.sendMessage('delete-custom-attribute', {
+          customAttribute,
+        });
+      }
+    },
+
     setLabel(label = '') {
       IFrameHelper.sendMessage('set-label', { label });
     },

app/javascript/widget/App.vue

@@ -15,8 +15,6 @@
 </template>
 
 <script>
-/* global bus */
-
 import Vue from 'vue';
 import { mapGetters, mapActions } from 'vuex';
 import { setHeader } from 'widget/helpers/axios';
@@ -99,6 +97,15 @@ export default {
         this.$store.dispatch('conversationLabels/destroy', message.label);
       } else if (message.event === 'set-user') {
         this.$store.dispatch('contacts/update', message);
+      } else if (message.event === 'set-custom-attributes') {
+        this.$store.dispatch(
+          'contacts/setCustomAttributes',
+          message.customAttributes
+        );
+      } else if (message.event === 'delete-custom-attribute') {
+        this.$store.dispatch('contacts/setCustomAttributes', {
+          [message.customAttribute]: null,
+        });
       } else if (message.event === 'set-locale') {
         this.setLocale(message.locale);
         this.setBubbleLabel();

app/javascript/widget/api/contacts.js

@@ -9,4 +9,9 @@ export default {
       ...userObject,
     });
   },
+  setCustomAttibutes(customAttributes = {}) {
+    return API.patch(buildUrl('widget/contact'), {
+      custom_attributes: customAttributes,
+    });
+  },
 };

app/javascript/widget/store/modules/contacts.js

@@ -17,6 +17,13 @@ export const actions = {
       // Ingore error
     }
   },
+  setCustomAttributes: async (_, customAttributes = {}) => {
+    try {
+      await ContactsAPI.setCustomAttibutes(customAttributes);
+    } catch (error) {
+      // Ingore error
+    }
+  },
 };
 
 export default {