chore: Use availability in dashboard presence toggle (#3212)

app/javascript/dashboard/components/layout/AvailabilityStatus.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="status">
     <div class="status-view">
-      <availability-status-badge :status="currentUserAvailabilityStatus" />
+      <availability-status-badge :status="currentUserAvailability" />
       <div class="status-view--title">
         {{ availabilityDisplayLabel }}
       </div>
@@ -77,12 +77,12 @@ export default {
 
   computed: {
     ...mapGetters({
-      getCurrentUserAvailabilityStatus: 'getCurrentUserAvailabilityStatus',
+      getCurrentUserAvailability: 'getCurrentUserAvailability',
       getCurrentAccountId: 'getCurrentAccountId',
     }),
     availabilityDisplayLabel() {
       const availabilityIndex = AVAILABILITY_STATUS_KEYS.findIndex(
-        key => key === this.currentUserAvailabilityStatus
+        key => key === this.currentUserAvailability
       );
       return this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUSES_LIST')[
         availabilityIndex
@@ -91,8 +91,8 @@ export default {
     currentAccountId() {
       return this.getCurrentAccountId;
     },
-    currentUserAvailabilityStatus() {
+    currentUserAvailability() {
-      return this.getCurrentUserAvailabilityStatus;
+      return this.getCurrentUserAvailability;
     },
     availabilityStatuses() {
       return this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUSES_LIST').map(
@@ -100,7 +100,7 @@ export default {
           label: statusLabel,
           value: AVAILABILITY_STATUS_KEYS[index],
           disabled:
-            this.currentUserAvailabilityStatus ===
+            this.currentUserAvailability ===
             AVAILABILITY_STATUS_KEYS[index],
         })
       );

app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js

@@ -17,7 +17,7 @@ const i18nConfig = new VueI18n({
 });
 
 describe('AvailabilityStatus', () => {
-  const currentAvailabilityStatus =  'online' ;
+  const currentAvailability = 'online';
   const currentAccountId = '1';
   let store = null;
   let actions = null;
@@ -34,7 +34,7 @@ describe('AvailabilityStatus', () => {
     modules = {
       auth: {
         getters: {
-          getCurrentUserAvailabilityStatus: () => currentAvailabilityStatus,
+          getCurrentUserAvailability: () => currentAvailability,
           getCurrentAccountId: () => currentAccountId,
         },
       },

app/javascript/dashboard/helper/actionCable.js

@@ -34,7 +34,7 @@ class ActionCableConnector extends BaseActionCableConnector {
   onPresenceUpdate = data => {
     this.app.$store.dispatch('contacts/updatePresence', data.contacts);
     this.app.$store.dispatch('agents/updatePresence', data.users);
-    this.app.$store.dispatch('setCurrentUserAvailabilityStatus', data.users);
+    this.app.$store.dispatch('setCurrentUserAvailability', data.users);
   };
 
   onConversationContactChange = payload => {

app/javascript/dashboard/store/modules/auth.js

@@ -39,12 +39,12 @@ export const getters = {
     return _state.currentUser.ui_settings || {};
   },
 
-  getCurrentUserAvailabilityStatus(_state) {
+  getCurrentUserAvailability(_state) {
     const { accounts = [] } = _state.currentUser;
     const [currentAccount = {}] = accounts.filter(
       account => account.id === _state.currentAccountId
     );
-    return currentAccount.availability_status;
+    return currentAccount.availability;
   },
 
   getCurrentAccountId(_state) {
@@ -146,7 +146,7 @@ export const actions = {
     commit(types.default.SET_CURRENT_ACCOUNT_ID, accountId);
   },
 
-  setCurrentUserAvailabilityStatus({ commit, state: $state }, data) {
+  setCurrentUserAvailability({ commit, state: $state }, data) {
     if (data[$state.currentUser.id]) {
       commit(
         types.default.SET_CURRENT_USER_AVAILABILITY,
@@ -158,8 +158,8 @@ export const actions = {
 
 // mutations
 export const mutations = {
-  [types.default.SET_CURRENT_USER_AVAILABILITY](_state, status) {
+  [types.default.SET_CURRENT_USER_AVAILABILITY](_state, availability) {
-    Vue.set(_state.currentUser, 'availability_status', status);
+    Vue.set(_state.currentUser, 'availability', availability);
   },
   [types.default.CLEAR_USER](_state) {
     _state.currentUser.id = null;

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

@@ -115,9 +115,9 @@ describe('#actions', () => {
     });
   });
 
-  describe('#setCurrentUserAvailabilityStatus', () => {
+  describe('#setCurrentUserAvailability', () => {
     it('sends correct mutations if user id is available', async () => {
-      actions.setCurrentUserAvailabilityStatus(
+      actions.setCurrentUserAvailability(
         {
           commit,
           state: { currentUser: { id: 1 } },
@@ -130,7 +130,7 @@ describe('#actions', () => {
     });
 
     it('does not send correct mutations if user id is not available', async () => {
-      actions.setCurrentUserAvailabilityStatus(
+      actions.setCurrentUserAvailability(
         {
           commit,
           state: { currentUser: { id: 1 } },

app/javascript/dashboard/store/modules/specs/auth/getters.spec.js

@@ -20,11 +20,11 @@ describe('#getters', () => {
 
   it('get', () => {
     expect(
-      getters.getCurrentUserAvailabilityStatus({
+      getters.getCurrentUserAvailability({
         currentAccountId: 1,
         currentUser: {
           id: 1,
-          accounts: [{ id: 1, availability_status: 'busy' }],
+          accounts: [{ id: 1, availability: 'busy' }],
         },
       })
     ).toEqual('busy');

app/views/api/v1/models/_user.json.jbuilder

@@ -21,6 +21,9 @@ json.accounts do
     json.name account_user.account.name
     json.active_at account_user.active_at
     json.role account_user.role
+    # the actual availability user has configured
+    json.availability account_user.availability
+    # availability derived from presence
     json.availability_status account_user.availability_status
     json.auto_offline account_user.auto_offline
   end