chore: Update availability status everywhere if the user changes the status from the account menu (#2581)

* add agent mixin

* apply agent mixin in components

* review fixes

* fix specs

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

@@ -39,7 +39,7 @@
           :loading="uiFlags.isFetching"
           :allow-empty="true"
           deselect-label=""
-          :options="agentList"
+          :options="agentsList"
           :placeholder="$t('CONVERSATION.ASSIGNMENT.SELECT_AGENT')"
           select-label=""
           label="name"
@@ -67,6 +67,7 @@
 import { mapGetters } from 'vuex';
 import MoreActions from './MoreActions';
 import Thumbnail from '../Thumbnail';
+import agentMixin from '../../../mixins/agentMixin.js';
 import AvailabilityStatusBadge from '../conversation/AvailabilityStatusBadge';
 
 export default {
@@ -75,7 +76,7 @@ export default {
     Thumbnail,
     AvailabilityStatusBadge,
   },
-
+  mixins: [agentMixin],
   props: {
     chat: {
       type: Object,
@@ -90,12 +91,12 @@ export default {
   data() {
     return {
       currentChatAssignee: null,
+      inboxId: null,
     };
   },
 
   computed: {
     ...mapGetters({
-      getAgents: 'inboxAssignableAgents/getAssignableAgents',
       uiFlags: 'inboxAssignableAgents/getUIFlags',
       currentChat: 'getSelectedChat',
     }),
@@ -109,22 +110,10 @@ export default {
         this.chat.meta.sender.id
       );
     },
-
+  },
-    agentList() {
+  mounted() {
-      const { inbox_id: inboxId } = this.chat;
+    const { inbox_id: inboxId } = this.chat;
-      const agents = this.getAgents(inboxId) || [];
+    this.inboxId = inboxId;
-      return [
-        {
-          confirmed: true,
-          name: 'None',
-          id: 0,
-          role: 'agent',
-          account_id: 0,
-          email: 'None',
-        },
-        ...agents,
-      ];
-    },
   },
 
   methods: {

app/javascript/dashboard/mixins/agentMixin.js

@@ -0,0 +1,35 @@
+import { mapGetters } from 'vuex';
+
+export default {
+  computed: {
+    assignableAgents() {
+      return this.$store.getters['inboxAssignableAgents/getAssignableAgents'](
+        this.inboxId
+      );
+    },
+    ...mapGetters({
+      currentUser: 'getCurrentUser',
+    }),
+    agentsList() {
+      const agents = this.assignableAgents || [];
+      return [
+        {
+          confirmed: true,
+          name: 'None',
+          id: 0,
+          role: 'agent',
+          account_id: 0,
+          email: 'None',
+        },
+        ...agents,
+      ].map(item =>
+        item.id === this.currentUser.id
+          ? {
+              ...item,
+              availability_status: this.currentUser.availability_status,
+            }
+          : item
+      );
+    },
+  },
+};

app/javascript/dashboard/mixins/specs/agentFixtures.js

@@ -0,0 +1,54 @@
+export default {
+  allAgents: [
+    {
+      account_id: 1,
+      availability_status: 'online',
+      available_name: 'John K',
+      confirmed: true,
+      email: 'john@chatwoot.com',
+      id: 1,
+      name: 'John Kennady',
+      role: 'administrator',
+    },
+    {
+      account_id: 1,
+      availability_status: 'busy',
+      available_name: 'Samuel K',
+      confirmed: true,
+      email: 'samuel@chatwoot.com',
+      id: 2,
+      name: 'Samuel Keta',
+      role: 'agent',
+    },
+  ],
+  formattedAgents: [
+    {
+      account_id: 0,
+      confirmed: true,
+      email: 'None',
+      id: 0,
+      name: 'None',
+      role: 'agent',
+    },
+    {
+      account_id: 1,
+      availability_status: 'busy',
+      available_name: 'John K',
+      confirmed: true,
+      email: 'john@chatwoot.com',
+      id: 1,
+      name: 'John Kennady',
+      role: 'administrator',
+    },
+    {
+      account_id: 1,
+      availability_status: 'busy',
+      available_name: 'Samuel K',
+      confirmed: true,
+      email: 'samuel@chatwoot.com',
+      id: 2,
+      name: 'Samuel Keta',
+      role: 'agent',
+    },
+  ],
+};

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

@@ -0,0 +1,38 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import agentMixin from '../agentMixin';
+import agentFixtures from './agentFixtures';
+import Vuex from 'vuex';
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('agentMixin', () => {
+  let getters;
+  let store;
+  beforeEach(() => {
+    getters = {
+      getCurrentUser: () => ({
+        id: 1,
+        availability_status: 'busy',
+      }),
+    };
+    store = new Vuex.Store({ getters });
+  });
+
+  it('return formatted agents', () => {
+    const Component = {
+      render() {},
+      title: 'TestComponent',
+      mixins: [agentMixin],
+      data() {
+        return { inboxId: 1 };
+      },
+      computed: {
+        assignableAgents() {
+          return agentFixtures.allAgents;
+        },
+      },
+    };
+    const wrapper = shallowMount(Component, { store, localVue });
+    expect(wrapper.vm.agentsList).toEqual(agentFixtures.formattedAgents);
+  });
+});

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

@@ -131,6 +131,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
+import agentMixin from '../../../mixins/agentMixin';
 
 import ContactConversations from './ContactConversations.vue';
 import ContactDetailsItem from './ContactDetailsItem.vue';
@@ -150,7 +151,7 @@ export default {
     ConversationLabels,
     AvailabilityStatusBadge,
   },
-  mixins: [alertMixin],
+  mixins: [alertMixin, agentMixin],
   props: {
     conversationId: {
       type: [Number, String],
@@ -170,7 +171,6 @@ export default {
       currentChat: 'getSelectedChat',
       teams: 'teams/getTeams',
       currentUser: 'getCurrentUser',
-      getAgents: 'inboxAssignableAgents/getAssignableAgents',
       uiFlags: 'inboxAssignableAgents/getUIFlags',
     }),
     currentConversationMetaData() {
@@ -195,8 +195,9 @@ export default {
       return this.additionalAttributes.initiated_at;
     },
     browserName() {
-      return `${this.browser.browser_name || ''} ${this.browser
+      return `${this.browser.browser_name || ''} ${
-        .browser_version || ''}`;
+        this.browser.browser_version || ''
+      }`;
     },
     contactAdditionalAttributes() {
       return this.contact.additional_attributes || {};
@@ -235,9 +236,6 @@ export default {
     contact() {
       return this.$store.getters['contacts/getContact'](this.contactId);
     },
-    agentsList() {
-      return [{ id: 0, name: 'None' }, ...this.getAgents(this.inboxId)];
-    },
     teamsList() {
       return [{ id: 0, name: 'None' }, ...this.teams];
     },