Feature: Website SDK (#653)

Add SDK functions

Co-authored-by: Sojan <sojan@pepalo.com>

app/javascript/widget/App.vue

@@ -47,6 +47,12 @@ export default {
         window.refererURL = message.refererURL;
       } else if (message.event === 'toggle-close-button') {
         this.isMobile = message.showClose;
+      } else if (message.event === 'set-label') {
+        this.$store.dispatch('conversationLabels/create', message.label);
+      } else if (message.event === 'remove-label') {
+        this.$store.dispatch('conversationLabels/destroy', message.label);
+      } else if (message.event === 'set-user') {
+        this.$store.dispatch('contacts/update', message);
       }
     });
   },

app/javascript/widget/api/contact.js

@@ -1,10 +0,0 @@
-import authEndPoint from 'widget/api/endPoints';
-import { API } from 'widget/helpers/axios';
-
-export const updateContact = async ({ messageId, email }) => {
-  const urlData = authEndPoint.updateContact(messageId);
-  const result = await API.patch(urlData.url, {
-    contact: { email },
-  });
-  return result;
-};

app/javascript/widget/api/contacts.js

@@ -0,0 +1,12 @@
+import { API } from 'widget/helpers/axios';
+
+const buildUrl = endPoint => `/api/v1/${endPoint}${window.location.search}`;
+
+export default {
+  update(identifier, userObject) {
+    return API.patch(buildUrl('widget/contact'), {
+      identifier,
+      ...userObject,
+    });
+  },
+};

app/javascript/widget/api/conversationLabels.js

@@ -0,0 +1,12 @@
+import { API } from 'widget/helpers/axios';
+
+const buildUrl = endPoint => `/api/v1/${endPoint}${window.location.search}`;
+
+export default {
+  create(label) {
+    return API.post(buildUrl('widget/labels'), { label });
+  },
+  destroy(label) {
+    return API.delete(buildUrl(`widget/labels/${label}`));
+  },
+};

app/javascript/widget/api/message.js

@@ -0,0 +1,11 @@
+import authEndPoint from 'widget/api/endPoints';
+import { API } from 'widget/helpers/axios';
+
+export default {
+  update: ({ messageId, email }) => {
+    const urlData = authEndPoint.updateContact(messageId);
+    return API.patch(urlData.url, {
+      contact: { email },
+    });
+  },
+};

app/javascript/widget/components/template/EmailInput.vue

@@ -53,7 +53,7 @@ export default {
   },
   computed: {
     ...mapGetters({
-      uiFlags: 'contact/getUIFlags',
+      uiFlags: 'message/getUIFlags',
       widgetColor: 'appConfig/getWidgetColor',
     }),
     hasSubmitted() {
@@ -71,7 +71,7 @@ export default {
   },
   methods: {
     onSubmit() {
-      this.$store.dispatch('contact/updateContactAttributes', {
+      this.$store.dispatch('message/updateContactAttributes', {
         email: this.email,
         messageId: this.messageId,
       });

app/javascript/widget/helpers/actionCable.js

@@ -13,4 +13,13 @@ class ActionCableConnector extends BaseActionCableConnector {
   };
 }
 
+export const refreshActionCableConnector = pubsubToken => {
+  window.chatwootPubsubToken = pubsubToken;
+  window.actionCable.disconnect();
+  window.actionCable = new ActionCableConnector(
+    window.WOOT_WIDGET,
+    window.chatwootPubsubToken
+  );
+};
+
 export default ActionCableConnector;

app/javascript/widget/store/index.js

@@ -1,17 +1,21 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
-import appConfig from 'widget/store/modules/appConfig';
-import contact from 'widget/store/modules/contact';
-import conversation from 'widget/store/modules/conversation';
 import agent from 'widget/store/modules/agent';
+import appConfig from 'widget/store/modules/appConfig';
+import contacts from 'widget/store/modules/contacts';
+import conversation from 'widget/store/modules/conversation';
+import conversationLabels from 'widget/store/modules/conversationLabels';
+import message from 'widget/store/modules/message';
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   modules: {
-    appConfig,
-    contact,
-    conversation,
     agent,
+    appConfig,
+    message,
+    contacts,
+    conversation,
+    conversationLabels,
   },
 });

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

@@ -0,0 +1,28 @@
+import ContactsAPI from '../../api/contacts';
+import { refreshActionCableConnector } from '../../helpers/actionCable';
+
+export const actions = {
+  update: async (_, { identifier, user: userObject }) => {
+    try {
+      const user = {
+        email: userObject.email,
+        name: userObject.name,
+        avatar_url: userObject.avatar_url,
+      };
+      const {
+        data: { pubsub_token: pubsubToken },
+      } = await ContactsAPI.update(identifier, user);
+      refreshActionCableConnector(pubsubToken);
+    } catch (error) {
+      // Ingore error
+    }
+  },
+};
+
+export default {
+  namespaced: true,
+  state: {},
+  getters: {},
+  actions,
+  mutations: {},
+};

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

@@ -0,0 +1,32 @@
+import conversationLabels from '../../api/conversationLabels';
+
+const state = {};
+
+export const getters = {};
+
+export const actions = {
+  create: async (_, label) => {
+    try {
+      await conversationLabels.create(label);
+    } catch (error) {
+      // Ingore error
+    }
+  },
+  destroy: async (_, label) => {
+    try {
+      await conversationLabels.destroy(label);
+    } catch (error) {
+      // Ingore error
+    }
+  },
+};
+
+export const mutations = {};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

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

@@ -1,4 +1,5 @@
-import { updateContact } from 'widget/api/contact';
+import MessageAPI from 'widget/api/message';
+import { refreshActionCableConnector } from '../../helpers/actionCable';
 
 const state = {
   uiFlags: {
@@ -14,7 +15,11 @@ const actions = {
   updateContactAttributes: async ({ commit }, { email, messageId }) => {
     commit('toggleUpdateStatus', true);
     try {
-      await updateContact({ email, messageId });
+      const {
+        data: {
+          contact: { pubsub_token: pubsubToken },
+        },
+      } = await MessageAPI.update({ email, messageId });
       commit(
         'conversation/updateMessage',
         {
@@ -23,6 +28,7 @@ const actions = {
         },
         { root: true }
       );
+      refreshActionCableConnector(pubsubToken);
     } catch (error) {
       // Ignore error
     }