Feature: Availability Statuses (#874)

Co-authored-by: Pranav Raj S <pranav@thoughtwoot.com>

app/javascript/widget/helpers/actionCable.js

@@ -10,6 +10,7 @@ class ActionCableConnector extends BaseActionCableConnector {
       'conversation.typing_off': this.onTypingOff,
       'conversation.resolved': this.onStatusChange,
       'conversation.opened': this.onStatusChange,
+      'presence.update': this.onPresenceUpdate,
     };
   }
 
@@ -25,6 +26,10 @@ class ActionCableConnector extends BaseActionCableConnector {
     this.app.$store.dispatch('conversation/updateMessage', data);
   };
 
+  onPresenceUpdate = data => {
+    this.app.$store.dispatch('agent/updatePresence', data.users);
+  };
+
   onTypingOn = () => {
     this.clearTimer();
     this.app.$store.dispatch('conversation/toggleAgentTyping', {

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

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import { getAvailableAgents } from 'widget/api/agent';
+import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 
 const state = {
   records: [],
@@ -27,12 +28,16 @@ export const actions = {
       commit('setHasFetched', true);
     }
   },
+  updatePresence: async ({ commit }, data) => {
+    commit('updatePresence', data);
+  },
 };
 
 export const mutations = {
   setAgents($state, data) {
     Vue.set($state, 'records', data);
   },
+  updatePresence: MutationHelpers.updatePresence,
   setError($state, value) {
     Vue.set($state.uiFlags, 'isError', value);
   },

app/javascript/widget/store/modules/specs/agent/actions.spec.js

@@ -25,4 +25,9 @@ describe('#actions', () => {
       ]);
     });
   });
+
+  describe('#updatePresence', () => {
+    actions.updatePresence({ commit }, { 1: 'online' });
+    expect(commit.mock.calls).toEqual([['updatePresence', { 1: 'online' }]]);
+  });
 });

app/javascript/widget/store/modules/specs/agent/mutations.spec.js

@@ -1,5 +1,5 @@
 import { mutations } from '../../agent';
-import agents from './data';
+import { agents } from './data';
 
 describe('#mutations', () => {
   describe('#setAgents', () => {
@@ -25,4 +25,35 @@ describe('#mutations', () => {
       expect(state.uiFlags.hasFetched).toEqual(true);
     });
   });
+
+  describe('#updatePresence', () => {
+    it('updates agent presence', () => {
+      const state = { records: agents };
+      mutations.updatePresence(state, { 1: 'busy', 2: 'online' });
+      expect(state.records).toEqual([
+        {
+          id: 1,
+          name: 'John',
+          avatar_url: '',
+          availability_status: 'busy',
+        },
+        {
+          id: 2,
+          name: 'Xavier',
+          avatar_url: '',
+          availability_status: 'online',
+        },
+        {
+          id: 3,
+          name: 'Pranav',
+          avatar_url: '',
+        },
+        {
+          id: 4,
+          name: 'Nithin',
+          avatar_url: '',
+        },
+      ]);
+    });
+  });
 });