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/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
-        .browser_version || ''}`;
+      return `${this.browser.browser_name || ''} ${
+        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];
     },