Fix: Populate only agents part of the inbox in conversations (#2060)

* Fix: Show only agents part of the inbox in conversations

* Show only verified agents

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

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

@@ -19,6 +19,7 @@
         <contact-panel
           v-if="showContactPanel"
           :conversation-id="currentChat.id"
+          :inbox-id="currentChat.inbox_id"
           :on-toggle="onToggleContactPanel"
         />
       </div>
@@ -59,6 +60,13 @@ export default {
       return this.isContactPanelOpen && this.currentChat.id;
     },
   },
+  watch: {
+    'currentChat.inbox_id'(inboxId) {
+      if (inboxId) {
+        this.$store.dispatch('inboxMembers/fetch', { inboxId });
+      }
+    },
+  },
   methods: {
     onToggleContactPanel() {
       this.$emit('contact-panel-toggle');

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

@@ -34,6 +34,7 @@
         <i class="icon ion-headphone" />
         <multiselect
           v-model="currentChat.meta.assignee"
+          :loading="uiFlags.isFetching"
           :allow-empty="true"
           :deselect-label="$t('CONVERSATION.ASSIGNMENT.REMOVE')"
           :options="agentList"
@@ -82,7 +83,8 @@ export default {
 
   computed: {
     ...mapGetters({
-      agents: 'agents/getVerifiedAgents',
+      getAgents: 'inboxMembers/getMembersByInbox',
+      uiFlags: 'inboxMembers/getUIFlags',
       currentChat: 'getSelectedChat',
     }),
 
@@ -97,6 +99,8 @@ export default {
     },
 
     agentList() {
+      const { inbox_id: inboxId } = this.chat;
+      const agents = this.getAgents(inboxId) || [];
       return [
         {
           confirmed: true,
@@ -106,7 +110,7 @@ export default {
           account_id: 0,
           email: 'None',
         },
-        ...this.agents,
+        ...agents,
       ];
     },
   },

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

@@ -127,6 +127,10 @@ export default {
       type: [Number, String],
       required: true,
     },
+    inboxId: {
+      type: Number,
+      default: undefined,
+    },
     onToggle: {
       type: Function,
       default: () => {},
@@ -135,8 +139,9 @@ export default {
   computed: {
     ...mapGetters({
       currentChat: 'getSelectedChat',
-      agents: 'agents/getVerifiedAgents',
       teams: 'teams/getTeams',
+      getAgents: 'inboxMembers/getMembersByInbox',
+      uiFlags: 'inboxMembers/getUIFlags',
     }),
     currentConversationMetaData() {
       return this.$store.getters[
@@ -201,7 +206,7 @@ export default {
       return this.$store.getters['contacts/getContact'](this.contactId);
     },
     agentsList() {
-      return [{ id: 0, name: 'None' }, ...this.agents];
+      return [{ id: 0, name: 'None' }, ...this.getAgents(this.inboxId)];
     },
     teamsList() {
       return [{ id: 0, name: 'None' }, ...this.teams];

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

@@ -1,10 +1,44 @@
+import Vue from 'vue';
+
 import InboxMembersAPI from '../../api/inboxMembers';
 
-const state = {};
+const state = {
+  records: {},
+  uiFlags: {
+    isFetching: false,
+  },
+};
 
-const getters = {};
+export const types = {
+  SET_INBOX_MEMBERS_UI_FLAG: 'SET_INBOX_MEMBERS_UI_FLAG',
+  SET_INBOX_MEMBERS: 'SET_INBOX_MEMBERS',
+};
 
-const actions = {
+export const getters = {
+  getMembersByInbox: $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_MEMBERS_UI_FLAG, { isFetching: true });
+    try {
+      const {
+        data: { payload },
+      } = await InboxMembersAPI.show(inboxId);
+      commit(types.SET_INBOX_MEMBERS, { inboxId, members: payload });
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      commit(types.SET_INBOX_MEMBERS_UI_FLAG, { isFetching: false });
+    }
+  },
   get(_, { inboxId }) {
     return InboxMembersAPI.show(inboxId);
   },
@@ -13,7 +47,17 @@ const actions = {
   },
 };
 
-const mutations = {};
+export const mutations = {
+  [types.SET_INBOX_MEMBERS_UI_FLAG]($state, data) {
+    $state.uiFlags = {
+      ...$state.uiFlags,
+      ...data,
+    };
+  },
+  [types.SET_INBOX_MEMBERS]: ($state, { inboxId, members }) => {
+    Vue.set($state.records, inboxId, members);
+  },
+};
 
 export default {
   namespaced: true,

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

@@ -0,0 +1,31 @@
+import axios from 'axios';
+import { actions, types } from '../../inboxMembers';
+import inboxMembers 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: inboxMembers } });
+      await actions.fetch({ commit }, { inboxId: 1 });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_INBOX_MEMBERS_UI_FLAG, { isFetching: true }],
+        [types.SET_INBOX_MEMBERS, { inboxId: 1, members: inboxMembers }],
+        [types.SET_INBOX_MEMBERS_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_MEMBERS_UI_FLAG, { isFetching: true }],
+        [types.SET_INBOX_MEMBERS_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+});

app/javascript/dashboard/store/modules/specs/inboxMembers/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/inboxMembers/getters.spec.js

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

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

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