Enhancement: Ability to assign administrators as conversation assignees (#2142)

* Enhancement: Ability to assign administrators as conversation assignee

Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/api/inboxes.js

@@ -1,9 +1,14 @@
+/* global axios */
 import ApiClient from './ApiClient';
 
 class Inboxes extends ApiClient {
   constructor() {
     super('inboxes', { accountScoped: true });
   }
+
+  getAssignableAgents(inboxId) {
+    return axios.get(`${this.url}/${inboxId}/assignable_agents`);
+  }
 }
 
 export default new Inboxes();

app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue

@@ -63,7 +63,7 @@ export default {
   watch: {
     'currentChat.inbox_id'(inboxId) {
       if (inboxId) {
-        this.$store.dispatch('inboxMembers/fetch', { inboxId });
+        this.$store.dispatch('inboxAssignableAgents/fetch', { inboxId });
       }
     },
   },

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -93,8 +93,8 @@ export default {
 
   computed: {
     ...mapGetters({
-      getAgents: 'inboxMembers/getMembersByInbox',
+      getAgents: 'inboxAssignableAgents/getAssignableAgents',
-      uiFlags: 'inboxMembers/getUIFlags',
+      uiFlags: 'inboxAssignableAgents/getUIFlags',
       currentChat: 'getSelectedChat',
     }),
 

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -155,8 +155,8 @@ export default {
     ...mapGetters({
       currentChat: 'getSelectedChat',
       teams: 'teams/getTeams',
-      getAgents: 'inboxMembers/getMembersByInbox',
+      getAgents: 'inboxAssignableAgents/getAssignableAgents',
-      uiFlags: 'inboxMembers/getUIFlags',
+      uiFlags: 'inboxAssignableAgents/getUIFlags',
     }),
     currentConversationMetaData() {
       return this.$store.getters[

app/javascript/dashboard/store/index.js

@@ -18,6 +18,7 @@ import conversationTypingStatus from './modules/conversationTypingStatus';
 import globalConfig from 'shared/store/globalConfig';
 import inboxes from './modules/inboxes';
 import inboxMembers from './modules/inboxMembers';
+import inboxAssignableAgents from './modules/inboxAssignableAgents';
 import integrations from './modules/integrations';
 import labels from './modules/labels';
 import reports from './modules/reports';
@@ -46,6 +47,7 @@ export default new Vuex.Store({
     globalConfig,
     inboxes,
     inboxMembers,
+    inboxAssignableAgents,
     integrations,
     labels,
     reports,

app/javascript/dashboard/store/modules/inboxAssignableAgents.js

@@ -0,0 +1,62 @@
+import Vue from 'vue';
+
+import InboxesAPI from 'dashboard/api/inboxes.js';
+
+const state = {
+  records: {},
+  uiFlags: {
+    isFetching: false,
+  },
+};
+
+export const types = {
+  SET_INBOX_ASSIGNABLE_AGENTS_UI_FLAG: 'SET_INBOX_ASSIGNABLE_AGENTS_UI_FLAG',
+  SET_INBOX_ASSIGNABLE_AGENTS: 'SET_INBOX_ASSIGNABLE_AGENTS',
+};
+
+export const getters = {
+  getAssignableAgents: $state => inboxId => {
+    const allAgents = $state.records[inboxId] || [];
+    const verifiedAgents = allAgents.filter(record => record.confirmed);
+    return verifiedAgents;
+  },
+  getUIFlags($state) {
+    return $state.uiFlags;
+  },
+};
+
+export const actions = {
+  async fetch({ commit }, { inboxId }) {
+    commit(types.SET_INBOX_ASSIGNABLE_AGENTS_UI_FLAG, { isFetching: true });
+    try {
+      const {
+        data: { payload },
+      } = await InboxesAPI.getAssignableAgents(inboxId);
+      commit(types.SET_INBOX_ASSIGNABLE_AGENTS, { inboxId, members: payload });
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      commit(types.SET_INBOX_ASSIGNABLE_AGENTS_UI_FLAG, { isFetching: false });
+    }
+  },
+};
+
+export const mutations = {
+  [types.SET_INBOX_ASSIGNABLE_AGENTS_UI_FLAG]($state, data) {
+    $state.uiFlags = {
+      ...$state.uiFlags,
+      ...data,
+    };
+  },
+  [types.SET_INBOX_ASSIGNABLE_AGENTS]: ($state, { inboxId, members }) => {
+    Vue.set($state.records, inboxId, members);
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

app/javascript/dashboard/store/modules/specs/inboxAssignableMembers/actions.spec.js

@@ -0,0 +1,36 @@
+import axios from 'axios';
+import { actions, types } from '../../inboxAssignableAgents';
+import agentsData from './fixtures';
+
+const commit = jest.fn();
+global.axios = axios;
+jest.mock('axios');
+
+describe('#actions', () => {
+  describe('#fetch', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({
+        data: { payload: agentsData },
+      });
+      await actions.fetch({ commit }, { inboxId: 1 });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_INBOX_ASSIGNABLE_AGENTS_UI_FLAG, { isFetching: true }],
+        [
+          types.SET_INBOX_ASSIGNABLE_AGENTS,
+          { inboxId: 1, members: agentsData },
+        ],
+        [types.SET_INBOX_ASSIGNABLE_AGENTS_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.fetch({ commit }, { inboxId: 1 })).rejects.toThrow(
+        Error
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.SET_INBOX_ASSIGNABLE_AGENTS_UI_FLAG, { isFetching: true }],
+        [types.SET_INBOX_ASSIGNABLE_AGENTS_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+});

app/javascript/dashboard/store/modules/specs/inboxAssignableMembers/fixtures.js

@@ -0,0 +1,28 @@
+export default [
+  {
+    id: 1,
+    provider: 'email',
+    uid: 'agent1@chatwoot.com',
+    name: 'Agent1',
+    email: 'agent1@chatwoot.com',
+    account_id: 1,
+    created_at: '2019-11-18T02:21:06.225Z',
+    updated_at: '2019-12-20T07:43:35.794Z',
+    pubsub_token: 'random-1',
+    role: 'agent',
+    confirmed: true,
+  },
+  {
+    id: 2,
+    provider: 'email',
+    uid: 'agent2@chatwoot.com',
+    name: 'Agent2',
+    email: 'agent2@chatwoot.com',
+    account_id: 1,
+    created_at: '2019-11-18T02:21:06.225Z',
+    updated_at: '2019-12-20T07:43:35.794Z',
+    pubsub_token: 'random-2',
+    role: 'agent',
+    confirmed: true,
+  },
+];

app/javascript/dashboard/store/modules/specs/inboxAssignableMembers/getters.spec.js

@@ -0,0 +1,24 @@
+import { getters } from '../../teamMembers';
+import agentsData from './fixtures';
+
+describe('#getters', () => {
+  it('getAssignableAgents', () => {
+    const state = {
+      records: {
+        1: [agentsData[0]],
+      },
+    };
+    expect(getters.getTeamMembers(state)(1)).toEqual([agentsData[0]]);
+  });
+
+  it('getUIFlags', () => {
+    const state = {
+      uiFlags: {
+        isFetching: false,
+      },
+    };
+    expect(getters.getUIFlags(state)).toEqual({
+      isFetching: false,
+    });
+  });
+});

app/javascript/dashboard/store/modules/specs/inboxAssignableMembers/mutations.spec.js

@@ -0,0 +1,16 @@
+import { mutations, types } from '../../inboxAssignableAgents';
+import agentsData from './fixtures';
+
+describe('#mutations', () => {
+  describe('#SET_INBOX_ASSIGNABLE_AGENTS', () => {
+    it('Adds inbox members to records', () => {
+      const state = { records: {} };
+      mutations[types.SET_INBOX_ASSIGNABLE_AGENTS](state, {
+        members: [...agentsData],
+        inboxId: 1,
+      });
+
+      expect(state.records).toEqual({ 1: agentsData });
+    });
+  });
+});