feat: allow adding custom attributes to conversations from the SDK (#6782)

* feat: add conversation attributes method to sdk and widget app

* feat: add endpoints to update custom attributes

* refactor: update SDK api

* feat: add api and actions for conversation updates

* fix: error message

* test: custom attributes on conversations controller

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/packs/sdk.js

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

app/javascript/widget/App.vue

@@ -274,6 +274,16 @@ export default {
             'contacts/deleteCustomAttribute',
             message.customAttribute
           );
+        } else if (message.event === 'set-conversation-custom-attributes') {
+          this.$store.dispatch(
+            'conversation/setCustomAttributes',
+            message.customAttributes
+          );
+        } else if (message.event === 'delete-conversation-custom-attribute') {
+          this.$store.dispatch(
+            'conversation/deleteCustomAttribute',
+            message.customAttribute
+          );
         } else if (message.event === 'set-locale') {
           this.setLocale(message.locale);
           this.setBubbleLabel();

app/javascript/widget/api/conversation.js

@@ -50,6 +50,24 @@ const toggleStatus = async () => {
   );
 };
 
+const setCustomAttributes = async customAttributes => {
+  return API.post(
+    `/api/v1/widget/conversations/set_custom_attributes${window.location.search}`,
+    {
+      custom_attributes: customAttributes,
+    }
+  );
+};
+
+const deleteCustomAttribute = async customAttribute => {
+  return API.post(
+    `/api/v1/widget/conversations/destroy_custom_attributes${window.location.search}`,
+    {
+      custom_attribute: [customAttribute],
+    }
+  );
+};
+
 export {
   createConversationAPI,
   sendMessageAPI,
@@ -60,4 +78,6 @@ export {
   setUserLastSeenAt,
   sendEmailTranscript,
   toggleStatus,
+  setCustomAttributes,
+  deleteCustomAttribute,
 };

app/javascript/widget/store/modules/conversation/actions.js

@@ -6,6 +6,8 @@ import {
   toggleTyping,
   setUserLastSeenAt,
   toggleStatus,
+  setCustomAttributes,
+  deleteCustomAttribute,
 } from 'widget/api/conversation';
 
 import { createTemporaryMessage, getNonDeletedMessages } from './helpers';
@@ -139,4 +141,20 @@ export const actions = {
   resolveConversation: async () => {
     await toggleStatus();
   },
+
+  setCustomAttributes: async (_, customAttributes = {}) => {
+    try {
+      await setCustomAttributes(customAttributes);
+    } catch (error) {
+      // IgnoreError
+    }
+  },
+
+  deleteCustomAttribute: async (_, customAttribute) => {
+    try {
+      await deleteCustomAttribute(customAttribute);
+    } catch (error) {
+      // IgnoreError
+    }
+  },
 };