Feat: Assign conversations to teams. (#1849)

app/javascript/dashboard/api/inbox/conversation.js

@@ -33,12 +33,17 @@ class ConversationApi extends ApiClient {
   }
 
   assignAgent({ conversationId, agentId }) {
-    axios.post(
+    return axios.post(
       `${this.url}/${conversationId}/assignments?assignee_id=${agentId}`,
       {}
     );
   }
 
+  assignTeam({ conversationId, teamId }) {
+    const params = { team_id: teamId };
+    return axios.post(`${this.url}/${conversationId}/assignments`, params);
+  }
+
   markMessageRead({ id }) {
     return axios.post(`${this.url}/${id}/update_last_seen`);
   }

app/javascript/dashboard/api/specs/inbox/conversation.spec.js

@@ -11,6 +11,7 @@ describe('#ConversationAPI', () => {
     expect(conversationAPI).toHaveProperty('delete');
     expect(conversationAPI).toHaveProperty('toggleStatus');
     expect(conversationAPI).toHaveProperty('assignAgent');
+    expect(conversationAPI).toHaveProperty('assignTeam');
     expect(conversationAPI).toHaveProperty('markMessageRead');
     expect(conversationAPI).toHaveProperty('toggleTyping');
     expect(conversationAPI).toHaveProperty('mute');

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -16,7 +16,7 @@
   margin-bottom: var(--space-normal);
 
   .multiselect--active {
-    > .multiselect__tags {
+    >.multiselect__tags {
       border-color: $color-woot;
     }
   }
@@ -124,6 +124,7 @@
 }
 
 .sidebar-labels-wrap {
+
   &.has-edited,
   &:hover {
     .multiselect {
@@ -132,16 +133,48 @@
   }
 
   .multiselect {
-    > .multiselect__select {
+    >.multiselect__select {
       visibility: hidden;
     }
 
-    > .multiselect__tags {
+    >.multiselect__tags {
       border-color: transparent;
     }
 
-    &.multiselect--active > .multiselect__tags {
+    &.multiselect--active>.multiselect__tags {
       border-color: $color-woot;
     }
   }
 }
+
+
+.multiselect-wrap--small {
+  $multiselect-height: 3.8rem;
+
+  .multiselect__tags,
+  .multiselect__input,
+  .multiselect {
+    background: var(--white);
+    font-size: var(--font-size-small);
+    height: $multiselect-height;
+    min-height: $multiselect-height;
+  }
+
+  .multiselect__input {
+    height: $multiselect-height - $space-micro;
+    min-height: $multiselect-height - $space-micro;
+  }
+
+  .multiselect__single {
+    font-size: var(--font-size-small);
+    padding: var(--space-small) 0;
+  }
+
+  .multiselect__placeholder {
+    padding: var(--space-small) 0;
+  }
+
+  .multiselect__select {
+    min-height: $multiselect-height;
+  }
+}

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -51,6 +51,7 @@
     "VISIBLE_TO_AGENTS": "Private Note: Only visible to you and your team",
     "CHANGE_STATUS": "Conversation status changed",
     "CHANGE_AGENT": "Conversation Assignee changed",
+    "CHANGE_TEAM": "Conversation team changed",
     "SENT_BY": "Sent by:",
     "ASSIGNMENT": {
       "SELECT_AGENT": "Select Agent",
@@ -98,5 +99,14 @@
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
     }
+  },
+  "CONVERSATION_SIDEBAR": {
+    "DETAILS_TITLE": "Conversations Details",
+    "ASSIGNEE_LABEL": "Assigned Agent",
+    "TEAM_LABEL": "Assigned Team",
+    "SELECT": {
+      "PLACEHOLDER": "None"
+    }
   }
+
 }

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

@@ -4,6 +4,43 @@
       <i class="ion-chevron-right" />
     </span>
     <contact-info :contact="contact" :channel-type="channelType" />
+    <div class="conversation--actions">
+      <h4 class="sub-block-title">
+        {{ $t('CONVERSATION_SIDEBAR.DETAILS_TITLE') }}
+      </h4>
+      <div class="multiselect-wrap--small">
+        <label class="multiselect__label">
+          {{ $t('CONVERSATION_SIDEBAR.ASSIGNEE_LABEL') }}
+        </label>
+        <multiselect
+          v-model="assignedAgent"
+          :options="agentsList"
+          label="name"
+          track-by="id"
+          deselect-label=""
+          select-label=""
+          selected-label=""
+          :placeholder="$t('CONVERSATION_SIDEBAR.SELECT.PLACEHOLDER')"
+          :allow-empty="true"
+        />
+      </div>
+      <div class="multiselect-wrap--small">
+        <label class="multiselect__label">
+          {{ $t('CONVERSATION_SIDEBAR.TEAM_LABEL') }}
+        </label>
+        <multiselect
+          v-model="assignedTeam"
+          :options="teamsList"
+          label="name"
+          track-by="id"
+          deselect-label=""
+          select-label=""
+          selected-label=""
+          :placeholder="$t('CONVERSATION_SIDEBAR.SELECT.PLACEHOLDER')"
+          :allow-empty="true"
+        />
+      </div>
+    </div>
     <div v-if="browser.browser_name" class="conversation--details">
       <contact-details-item
         v-if="location"
@@ -67,6 +104,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
 
 import ContactConversations from './ContactConversations.vue';
 import ContactDetailsItem from './ContactDetailsItem.vue';
@@ -83,6 +121,7 @@ export default {
     ContactInfo,
     ConversationLabels,
   },
+  mixins: [alertMixin],
   props: {
     conversationId: {
       type: [Number, String],
@@ -96,6 +135,8 @@ export default {
   computed: {
     ...mapGetters({
       currentChat: 'getSelectedChat',
+      agents: 'agents/getVerifiedAgents',
+      teams: 'teams/getTeams',
     }),
     currentConversationMetaData() {
       return this.$store.getters[
@@ -159,6 +200,46 @@ export default {
     contact() {
       return this.$store.getters['contacts/getContact'](this.contactId);
     },
+    agentsList() {
+      return [{ id: 0, name: 'None' }, ...this.agents];
+    },
+    teamsList() {
+      return [{ id: 0, name: 'None' }, ...this.teams];
+    },
+    assignedAgent: {
+      get() {
+        return this.currentChat.meta.assignee;
+      },
+      set(agent) {
+        const agentId = agent ? agent.id : 0;
+        this.$store.dispatch('setCurrentChatAssignee', agent);
+        this.$store
+          .dispatch('assignAgent', {
+            conversationId: this.currentChat.id,
+            agentId,
+          })
+          .then(() => {
+            this.showAlert(this.$t('CONVERSATION.CHANGE_AGENT'));
+          });
+      },
+    },
+    assignedTeam: {
+      get() {
+        return this.currentChat.meta.team;
+      },
+      set(team) {
+        const teamId = team ? team.id : 0;
+        this.$store.dispatch('setCurrentChatTeam', team);
+        this.$store
+          .dispatch('assignTeam', {
+            conversationId: this.currentChat.id,
+            teamId,
+          })
+          .then(() => {
+            this.showAlert(this.$t('CONVERSATION.CHANGE_TEAM'));
+          });
+      },
+    },
   },
   watch: {
     conversationId(newConversationId, prevConversationId) {
@@ -191,12 +272,10 @@ export default {
 
 <style lang="scss" scoped>
 @import '~dashboard/assets/scss/variables';
-@import '~dashboard/assets/scss/mixins';
 
 .contact--panel {
-  @include border-normal-left;
-
   background: white;
+  border-left: 1px solid var(--color-border);
   font-size: $font-size-small;
   overflow-y: auto;
   overflow: auto;
@@ -246,4 +325,16 @@ export default {
   flex-direction: column;
   justify-content: center;
 }
+
+.sub-block-title {
+  margin-bottom: var(--space-small);
+}
+
+.conversation--actions {
+  padding: 0 var(--space-normal) var(--space-small);
+}
+
+.multiselect__label {
+  margin-bottom: var(--space-smaller);
+}
 </style>

app/javascript/dashboard/store/modules/conversations/actions.js

@@ -103,18 +103,38 @@ const actions = {
     }
   },
 
-  assignAgent: async ({ commit }, { conversationId, agentId }) => {
+  assignAgent: async ({ dispatch }, { conversationId, agentId }) => {
     try {
       const response = await ConversationApi.assignAgent({
         conversationId,
         agentId,
       });
-      commit(types.default.ASSIGN_AGENT, response.data);
+      dispatch('setCurrentChatAssignee', response.data);
     } catch (error) {
       // Handle error
     }
   },
 
+  setCurrentChatAssignee({ commit }, assignee) {
+    commit(types.default.ASSIGN_AGENT, assignee);
+  },
+
+  assignTeam: async ({ dispatch }, { conversationId, teamId }) => {
+    try {
+      const response = await ConversationApi.assignTeam({
+        conversationId,
+        teamId,
+      });
+      dispatch('setCurrentChatTeam', response.data);
+    } catch (error) {
+      // Handle error
+    }
+  },
+
+  setCurrentChatTeam({ commit }, team) {
+    commit(types.default.ASSIGN_TEAM, team);
+  },
+
   toggleStatus: async ({ commit }, data) => {
     try {
       const response = await ConversationApi.toggleStatus(data);

app/javascript/dashboard/store/modules/conversations/index.js

@@ -61,7 +61,12 @@ export const mutations = {
 
   [types.default.ASSIGN_AGENT](_state, assignee) {
     const [chat] = getSelectedChatConversation(_state);
-    chat.meta.assignee = assignee;
+    Vue.set(chat.meta, 'assignee', assignee);
+  },
+
+  [types.default.ASSIGN_TEAM](_state, team) {
+    const [chat] = getSelectedChatConversation(_state);
+    Vue.set(chat.meta, 'team', team);
   },
 
   [types.default.RESOLVE_CONVERSATION](_state, status) {
@@ -145,7 +150,7 @@ export const mutations = {
   // Update assignee on action cable message
   [types.default.UPDATE_ASSIGNEE](_state, payload) {
     const [chat] = _state.allConversations.filter(c => c.id === payload.id);
-    chat.meta.assignee = payload.assignee;
+    Vue.set(chat.meta, 'assignee', payload.assignee);
   },
 
   [types.default.UPDATE_CONVERSATION_CONTACT](

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

@@ -189,4 +189,52 @@ describe('#actions', () => {
       expect(commit.mock.calls).toEqual([]);
     });
   });
+
+  describe('#assignAgent', () => {
+    it('sends correct mutations if assignment is successful', async () => {
+      axios.post.mockResolvedValue({
+        data: { id: 1, name: 'User' },
+      });
+      await actions.assignAgent({ commit }, { conversationId: 1, agentId: 1 });
+      expect(commit).toHaveBeenCalledTimes(0);
+      expect(commit.mock.calls).toEqual([]);
+    });
+  });
+
+  describe('#setCurrentChatAssignee', () => {
+    it('sends correct mutations if assignment is successful', async () => {
+      axios.post.mockResolvedValue({
+        data: { id: 1, name: 'User' },
+      });
+      await actions.setCurrentChatAssignee({ commit }, { id: 1, name: 'User' });
+      expect(commit).toHaveBeenCalledTimes(1);
+      expect(commit.mock.calls).toEqual([
+        ['ASSIGN_AGENT', { id: 1, name: 'User' }],
+      ]);
+    });
+  });
+
+  describe('#assignTeam', () => {
+    it('sends correct mutations if assignment is successful', async () => {
+      axios.post.mockResolvedValue({
+        data: { id: 1, name: 'Team' },
+      });
+      await actions.assignTeam({ commit }, { conversationId: 1, teamId: 1 });
+      expect(commit).toHaveBeenCalledTimes(0);
+      expect(commit.mock.calls).toEqual([]);
+    });
+  });
+
+  describe('#setCurrentChatTeam', () => {
+    it('sends correct mutations if assignment is successful', async () => {
+      axios.post.mockResolvedValue({
+        data: { id: 1, name: 'Team' },
+      });
+      await actions.setCurrentChatTeam({ commit }, { id: 1, name: 'Team' });
+      expect(commit).toHaveBeenCalledTimes(1);
+      expect(commit.mock.calls).toEqual([
+        ['ASSIGN_TEAM', { id: 1, name: 'Team' }],
+      ]);
+    });
+  });
 });

app/javascript/dashboard/store/mutation-types.js

@@ -28,6 +28,7 @@ export default {
   MUTE_CONVERSATION: 'MUTE_CONVERSATION',
   UNMUTE_CONVERSATION: 'UNMUTE_CONVERSATION',
   ASSIGN_AGENT: 'ASSIGN_AGENT',
+  ASSIGN_TEAM: 'ASSIGN_TEAM',
   SET_CHAT_META: 'SET_CHAT_META',
   ADD_MESSAGE: 'ADD_MESSAGE',
   ADD_PENDING_MESSAGE: 'ADD_PENDING_MESSAGE',

app/views/api/v1/conversations/partials/_conversation.json.jbuilder

@@ -8,6 +8,11 @@ json.meta do
       json.partial! 'api/v1/models/agent.json.jbuilder', resource: conversation.assignee
     end
   end
+  if conversation.team.present?
+    json.team do
+      json.partial! 'api/v1/models/team.json.jbuilder', resource: conversation.team
+    end
+  end
 end
 
 json.id conversation.display_id