feat: Custom Attributes for contacts (#1158)

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

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 {