feat: Add assign agent option in macro (#5821)

Co-authored-by: fayazara <fayazara@gmail.com>

app/javascript/dashboard/helper/specs/macrosFixtures.js

@@ -70,6 +70,34 @@ export const labels = [
   },
 ];
 
+export const agents = [
+  {
+    id: 1,
+    account_id: 1,
+    availability_status: 'offline',
+    auto_offline: true,
+    confirmed: true,
+    email: 'john@doe.com',
+    available_name: 'John Doe',
+    name: 'John Doe',
+    role: 'agent',
+    thumbnail:
+      'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBUZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--746506837470c1a3dd063e90211ba2386963d52f/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2QzNKbGMybDZaVWtpRERJMU1IZ3lOVEFHT3daVSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--e0e35266e8ed66e90c51be02408be8a022aca545/batman_90804.png',
+  },
+  {
+    id: 9,
+    account_id: 1,
+    availability_status: 'offline',
+    auto_offline: true,
+    confirmed: true,
+    email: 'clark@kent.com',
+    available_name: 'Clark Kent',
+    name: 'Clark Kent',
+    role: 'agent',
+    thumbnail: '',
+  },
+];
+
 export const files = [
   {
     id: 76,

app/javascript/dashboard/helper/specs/macrosHelper.spec.js

@@ -4,9 +4,10 @@ import {
   resolveLabels,
   resolveTeamIds,
   getFileName,
+  resolveAgents,
 } from '../../routes/dashboard/settings/macros/macroHelper';
 import { MACRO_ACTION_TYPES } from '../../routes/dashboard/settings/macros/constants';
-import { teams, labels, files } from './macrosFixtures';
+import { teams, labels, files, agents } from './macrosFixtures';
 
 describe('#emptyMacro', () => {
   const defaultMacro = {
@@ -52,6 +53,13 @@ describe('#resolveLabels', () => {
   });
 });
 
+describe('#resolveAgents', () => {
+  it('resolves agents names from ids and returns a joined string', () => {
+    const resolvedAgents = 'John Doe';
+    expect(resolveAgents(agents, [1])).toEqual(resolvedAgents);
+  });
+});
+
 describe('#getFileName', () => {
   it('returns the correct file name from the list of files', () => {
     expect(getFileName(files[0].blob_id, 'send_attachment', files)).toEqual(

app/javascript/dashboard/mixins/macrosMixin.js

@@ -5,6 +5,8 @@ export default {
         case 'assign_team':
         case 'send_email_to_team':
           return this.teams;
+        case 'assign_best_agent':
+          return this.agents;
         case 'add_label':
           return this.labels.map(i => {
             return {

app/javascript/dashboard/mixins/specs/macros.spec.js

@@ -1,7 +1,7 @@
 import { createWrapper } from '@vue/test-utils';
 import macrosMixin from '../macrosMixin';
 import Vue from 'vue';
-import { teams, labels } from '../../helper/specs/macrosFixtures';
+import { teams, labels, agents } from '../../helper/specs/macrosFixtures';
 describe('webhookMixin', () => {
   describe('#getEventLabel', () => {
     it('returns correct i18n translation:', () => {
@@ -13,6 +13,7 @@ describe('webhookMixin', () => {
           return {
             teams,
             labels,
+            agents,
           };
         },
         methods: {
@@ -35,6 +36,7 @@ describe('webhookMixin', () => {
       expect(wrapper.vm.getDropdownValues('assign_team')).toEqual(teams);
       expect(wrapper.vm.getDropdownValues('send_email_to_team')).toEqual(teams);
       expect(wrapper.vm.getDropdownValues('add_label')).toEqual(resolvedLabels);
+      expect(wrapper.vm.getDropdownValues('assign_best_agent')).toEqual(agents);
       expect(wrapper.vm.getDropdownValues()).toEqual([]);
     });
   });

app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue

@@ -15,6 +15,7 @@ import {
   resolveActionName,
   resolveTeamIds,
   resolveLabels,
+  resolveAgents,
 } from 'dashboard/routes/dashboard/settings/macros/macroHelper';
 import { mapGetters } from 'vuex';
 
@@ -40,6 +41,7 @@ export default {
     ...mapGetters({
       labels: 'labels/getLabels',
       teams: 'teams/getTeams',
+      agents: 'agents/getAgents',
     }),
   },
   methods: {
@@ -47,6 +49,7 @@ export default {
       const actionsMap = {
         assign_team: resolveTeamIds(this.teams, params),
         add_label: resolveLabels(this.labels, params),
+        assign_best_agent: resolveAgents(this.agents, params),
         mute_conversation: null,
         snooze_conversation: null,
         resolve_conversation: null,

app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue

@@ -42,6 +42,7 @@ export default {
       uiFlags: 'macros/getUIFlags',
       labels: 'labels/getLabels',
       teams: 'teams/getTeams',
+      agents: 'agents/getAgents',
     }),
     macroId() {
       return this.$route.params.macroId;
@@ -50,6 +51,7 @@ export default {
   watch: {
     $route: {
       handler() {
+        this.fetchDropdownData();
         if (this.$route.params.macroId) {
           this.fetchMacro();
         } else {
@@ -60,11 +62,13 @@ export default {
     },
   },
   methods: {
-    fetchMacro() {
-      this.mode = 'EDIT';
+    fetchDropdownData() {
       this.$store.dispatch('agents/get');
       this.$store.dispatch('teams/get');
       this.$store.dispatch('labels/get');
+    },
+    fetchMacro() {
+      this.mode = 'EDIT';
       this.manifestMacro();
     },
     async manifestMacro() {

app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue

@@ -70,6 +70,7 @@ export default {
     ...mapGetters({
       labels: 'labels/getLabels',
       teams: 'teams/getTeams',
+      agents: 'agents/getAgents',
     }),
     actionData: {
       get() {

app/javascript/dashboard/routes/dashboard/settings/macros/constants.js

@@ -4,6 +4,11 @@ export const MACRO_ACTION_TYPES = [
     label: 'Assign a team',
     inputType: 'multi_select',
   },
+  {
+    key: 'assign_best_agent',
+    label: 'Assign an agent',
+    inputType: 'multi_select',
+  },
   {
     key: 'add_label',
     label: 'Add a label',

app/javascript/dashboard/routes/dashboard/settings/macros/macroHelper.js

@@ -32,6 +32,15 @@ export const resolveLabels = (labels, ids) => {
     .join(', ');
 };
 
+export const resolveAgents = (agents, ids) => {
+  return ids
+    .map(id => {
+      const agent = agents.find(i => i.id === id);
+      return agent ? agent.name : '';
+    })
+    .join(', ');
+};
+
 export const getFileName = (id, actionType, files) => {
   if (!id || !files) return '';
   if (actionType === 'send_attachment') {