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/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);
+  });
+});