From c98907db499563a4dd08761c69b7ead59d21be17 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Sat, 4 Jul 2020 11:42:47 +0530
Subject: [PATCH] Feature: Availability Statuses (#874)

Co-authored-by: Pranav Raj S <pranav@thoughtwoot.com>
---
 app/channels/room_channel.rb                  | 40 ++++++++++++--
 app/controllers/api/v1/profiles_controller.rb |  2 +-
 app/javascript/dashboard/api/auth.js          | 17 +++---
 .../dashboard/components/layout/Sidebar.vue   |  6 ++-
 .../components/widgets/Thumbnail.vue          | 25 ++++++---
 .../widgets/conversation/ConversationCard.vue |  1 +
 .../conversation/ConversationHeader.vue       |  1 +
 .../dashboard/helper/actionCable.js           |  6 +++
 .../dashboard/i18n/locale/en/settings.json    | 17 ++++++
 .../dashboard/settings/profile/Index.vue      | 29 +++++++---
 .../dashboard/store/modules/agents.js         |  8 +++
 .../dashboard/store/modules/contacts.js       | 19 +++++++
 .../modules/specs/agents/actions.spec.js      | 12 +++++
 .../modules/specs/agents/mutations.spec.js    | 36 +++++++++++++
 .../dashboard/store/mutation-types.js         |  2 +
 .../helpers/BaseActionCableConnector.js       | 13 ++++-
 .../shared/helpers/vuex/mutationHelpers.js    | 11 ++++
 app/javascript/widget/helpers/actionCable.js  |  5 ++
 app/javascript/widget/store/modules/agent.js  |  5 ++
 .../store/modules/specs/agent/actions.spec.js |  5 ++
 .../modules/specs/agent/mutations.spec.js     | 33 +++++++++++-
 .../concerns/availability_statusable.rb       | 15 ++++--
 app/models/user.rb                            | 15 +++++-
 .../v1/accounts/contacts/index.json.jbuilder  |  7 +--
 .../v1/accounts/contacts/show.json.jbuilder   |  8 +--
 .../v1/accounts/contacts/update.json.jbuilder |  7 +--
 .../api/v1/models/_contact.json.jbuilder      |  7 +++
 app/views/api/v1/models/_user.json.jbuilder   |  1 +
 config/cable.yml                              | 15 +++---
 ...20200629122646_add_availability_to_user.rb |  5 ++
 db/schema.rb                                  |  3 +-
 lib/online_status_tracker.rb                  | 53 +++++++++++++++----
 lib/redis/alfred.rb                           | 45 ++++++++++++++++
 spec/channels/room_channel_spec.rb            |  6 +--
 .../api/v1/profiles_controller_spec.rb        | 10 ++++
 35 files changed, 413 insertions(+), 77 deletions(-)
 create mode 100644 app/views/api/v1/models/_contact.json.jbuilder
 create mode 100644 db/migrate/20200629122646_add_availability_to_user.rb

diff --git a/app/channels/room_channel.rb b/app/channels/room_channel.rb
index df1a05d6b..1a0cbb434 100644
--- a/app/channels/room_channel.rb
+++ b/app/channels/room_channel.rb
@@ -1,10 +1,42 @@
 class RoomChannel < ApplicationCable::Channel
   def subscribed
-    stream_from params[:pubsub_token]
-    ::OnlineStatusTracker.add_subscription(params[:pubsub_token])
+    ensure_stream
+    current_user
+    current_account
+    update_subscription
   end
 
-  def unsubscribed
-    ::OnlineStatusTracker.remove_subscription(params[:pubsub_token])
+  def update_presence
+    update_subscription
+    data = { account_id: @current_account.id, users: ::OnlineStatusTracker.get_available_users(@current_account.id) }
+    data[:contacts] = ::OnlineStatusTracker.get_available_contacts(@current_account.id) if @current_user.is_a? User
+    ActionCable.server.broadcast(@pubsub_token, { event: 'presence.update', data: data })
+  end
+
+  private
+
+  def ensure_stream
+    @pubsub_token = params[:pubsub_token]
+    stream_from @pubsub_token
+  end
+
+  def update_subscription
+    ::OnlineStatusTracker.update_presence(@current_account.id, @current_user.class.name, @current_user.id)
+  end
+
+  def current_user
+    @current_user ||= if params[:user_id].blank?
+                        Contact.find_by!(pubsub_token: @pubsub_token)
+                      else
+                        User.find_by!(pubsub_token: @pubsub_token, id: params[:user_id])
+                      end
+  end
+
+  def current_account
+    @current_account ||= if @current_user.is_a? Contact
+                           @current_user.account
+                         else
+                           @current_user.accounts.find(params[:account_id])
+                         end
   end
 end
diff --git a/app/controllers/api/v1/profiles_controller.rb b/app/controllers/api/v1/profiles_controller.rb
index bd415ffeb..38f1a9b3b 100644
--- a/app/controllers/api/v1/profiles_controller.rb
+++ b/app/controllers/api/v1/profiles_controller.rb
@@ -16,6 +16,6 @@ class Api::V1::ProfilesController < Api::BaseController
   end
 
   def profile_params
-    params.require(:profile).permit(:email, :name, :password, :password_confirmation, :avatar)
+    params.require(:profile).permit(:email, :name, :password, :password_confirmation, :avatar, :availability)
   end
 end
diff --git a/app/javascript/dashboard/api/auth.js b/app/javascript/dashboard/api/auth.js
index f247089cd..42d1fbc41 100644
--- a/app/javascript/dashboard/api/auth.js
+++ b/app/javascript/dashboard/api/auth.js
@@ -118,21 +118,18 @@ export default {
     return axios.post(urlData.url, { email });
   },
 
-  profileUpdate({ name, email, password, password_confirmation, avatar }) {
+  profileUpdate({ password, password_confirmation, ...profileAttributes }) {
     const formData = new FormData();
-    if (name) {
-      formData.append('profile[name]', name);
-    }
-    if (email) {
-      formData.append('profile[email]', email);
-    }
+    Object.keys(profileAttributes).forEach(key => {
+      const value = profileAttributes[key];
+      if (value) {
+        formData.append(`profile[${key}]`, value);
+      }
+    });
     if (password && password_confirmation) {
       formData.append('profile[password]', password);
       formData.append('profile[password_confirmation]', password_confirmation);
     }
-    if (avatar) {
-      formData.append('profile[avatar]', avatar);
-    }
     return axios.put(endPoints('profileUpdate').url, formData);
   },
 };
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index 4ec6c239f..d6ab8a75d 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -56,7 +56,11 @@
         </div>
       </transition>
       <div class="current-user" @click.prevent="showOptions()">
-        <thumbnail :src="currentUser.avatar_url" :username="currentUser.name" />
+        <thumbnail
+          :src="currentUser.avatar_url"
+          :username="currentUser.name"
+          :status="currentUser.availability_status"
+        />
         <div class="current-user--data">
           <h3 class="current-user--name">
             {{ currentUser.name }}
diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index 25b707c04..2d1c3e200 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -21,11 +21,6 @@
       :style="badgeStyle"
       src="~dashboard/assets/images/fb-badge.png"
     />
-    <div
-      v-else-if="status === 'online'"
-      class="source-badge user--online"
-      :style="statusStyle"
-    ></div>
     <img
       v-if="badge === 'Channel::TwitterProfile'"
       id="badge"
@@ -33,7 +28,6 @@
       :style="badgeStyle"
       src="~dashboard/assets/images/twitter-badge.png"
     />
-
     <img
       v-if="badge === 'Channel::TwilioSms'"
       id="badge"
@@ -41,6 +35,11 @@
       :style="badgeStyle"
       src="~dashboard/assets/images/channels/whatsapp.png"
     />
+    <div
+      v-if="showStatusIndicator"
+      :class="`source-badge user-online-status user-online-status--${status}`"
+      :style="statusStyle"
+    />
   </div>
 </template>
 <script>
@@ -89,6 +88,9 @@ export default {
     };
   },
   computed: {
+    showStatusIndicator() {
+      return this.status === 'online' || this.status === 'busy';
+    },
     avatarSize() {
       return Number(this.size.replace(/\D+/g, ''));
     },
@@ -150,8 +152,7 @@ export default {
     width: $space-slab;
   }
 
-  .user--online {
-    background: $success-color;
+  .user-online-status {
     border-radius: 50%;
     bottom: $space-micro;
 
@@ -159,5 +160,13 @@ export default {
       content: ' ';
     }
   }
+
+  .user-online-status--online {
+    background: $success-color;
+  }
+
+  .user-online-status--busy {
+    background: $warning-color;
+  }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index 4e1d631b9..301717b51 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -10,6 +10,7 @@
       :badge="currentContact.channel"
       class="columns"
       :username="currentContact.name"
+      :status="currentContact.availability_status"
       size="40px"
     />
     <div class="conversation--details columns">
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 8be30ff68..90409a1fc 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -6,6 +6,7 @@
         size="40px"
         :badge="currentContact.channel"
         :username="currentContact.name"
+        :status="currentContact.availability_status"
       />
       <div class="user--profile__meta">
         <h3 v-if="!isContactPanelOpen" class="user--name text-truncate">
diff --git a/app/javascript/dashboard/helper/actionCable.js b/app/javascript/dashboard/helper/actionCable.js
index 107f85637..5d6abf359 100644
--- a/app/javascript/dashboard/helper/actionCable.js
+++ b/app/javascript/dashboard/helper/actionCable.js
@@ -18,6 +18,7 @@ class ActionCableConnector extends BaseActionCableConnector {
       'conversation.typing_on': this.onTypingOn,
       'conversation.typing_off': this.onTypingOff,
       'conversation.contact_changed': this.onConversationContactChange,
+      'presence.update': this.onPresenceUpdate,
     };
   }
 
@@ -29,6 +30,11 @@ class ActionCableConnector extends BaseActionCableConnector {
     this.app.$store.dispatch('updateMessage', data);
   };
 
+  onPresenceUpdate = data => {
+    this.app.$store.dispatch('contacts/updatePresence', data.contacts);
+    this.app.$store.dispatch('agents/updatePresence', data.users);
+  };
+
   onConversationContactChange = payload => {
     const { meta = {}, id: conversationId } = payload;
     const { sender } = meta || {};
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 67470727f..6ab397d63 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -48,6 +48,23 @@
         "ERROR": "Please enter a valid name",
         "PLACEHOLDER": "Please enter your name, this would be displayed in conversations"
       },
+      "AVAILABILITY": {
+        "LABEL": "Availability",
+        "STATUSES_LIST": [
+          {
+            "value": "online",
+            "label": "Online"
+          },
+          {
+            "value": "busy",
+            "label": "Busy"
+          },
+          {
+            "value": "offline",
+            "label": "Offline"
+          }
+        ]
+      },
       "EMAIL": {
         "LABEL": "Your email address",
         "ERROR": "Please enter a valid email address",
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index 03944cd2a..17d7ed037 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -38,6 +38,19 @@
               {{ $t('PROFILE_SETTINGS.FORM.EMAIL.ERROR') }}
             </span>
           </label>
+          <label>
+            {{ $t('PROFILE_SETTINGS.FORM.AVAILABILITY.LABEL') }}
+            <select v-model="availability">
+              <option
+                v-for="status in availabilityStatuses"
+                :key="status.key"
+                class="text-capitalize"
+                :value="status.value"
+              >
+                {{ status.label }}
+              </option>
+            </select>
+          </label>
         </div>
       </div>
       <div class="profile--settings--row row">
@@ -99,16 +112,17 @@
 </template>
 
 <script>
-/* global bus */
 import { required, minLength, email } from 'vuelidate/lib/validators';
 import { mapGetters } from 'vuex';
 import { clearCookiesOnLogout } from '../../../../store/utils/api';
 import NotificationSettings from './NotificationSettings';
+import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   components: {
     NotificationSettings,
   },
+  mixin: [alertMixin],
   data() {
     return {
       avatarFile: '',
@@ -117,7 +131,11 @@ export default {
       email: '',
       password: '',
       passwordConfirmation: '',
+      availability: 'online',
       isUpdating: false,
+      availabilityStatuses: this.$t(
+        'PROFILE_SETTINGS.FORM.AVAILABILITY.STATUSES_LIST'
+      ),
     };
   },
   validations: {
@@ -164,11 +182,12 @@ export default {
       this.name = this.currentUser.name;
       this.email = this.currentUser.email;
       this.avatarUrl = this.currentUser.avatar_url;
+      this.availability = this.currentUser.availability_status;
     },
     async updateUser() {
       this.$v.$touch();
       if (this.$v.$invalid) {
-        bus.$emit('newToastMessage', this.$t('PROFILE_SETTINGS.FORM.ERROR'));
+        this.showAlert(this.$t('PROFILE_SETTINGS.FORM.ERROR'));
         return;
       }
       this.isUpdating = true;
@@ -179,15 +198,13 @@ export default {
           email: this.email,
           avatar: this.avatarFile,
           password: this.password,
+          availability: this.availability,
           password_confirmation: this.passwordConfirmation,
         });
         this.isUpdating = false;
         if (hasEmailChanged) {
           clearCookiesOnLogout();
-          bus.$emit(
-            'newToastMessage',
-            this.$t('PROFILE_SETTINGS.AFTER_EMAIL_CHANGED')
-          );
+          this.showAlert(this.$t('PROFILE_SETTINGS.AFTER_EMAIL_CHANGED'));
         }
       } catch (error) {
         this.isUpdating = false;
diff --git a/app/javascript/dashboard/store/modules/agents.js b/app/javascript/dashboard/store/modules/agents.js
index 6807a6c45..61be40559 100644
--- a/app/javascript/dashboard/store/modules/agents.js
+++ b/app/javascript/dashboard/store/modules/agents.js
@@ -57,6 +57,13 @@ export const actions = {
       throw new Error(error);
     }
   },
+
+  updatePresence: async ({ commit }, data) => {
+    commit(types.default.SET_AGENT_UPDATING_STATUS, true);
+    commit(types.default.UPDATE_AGENTS_PRESENCE, data);
+    commit(types.default.SET_AGENT_UPDATING_STATUS, false);
+  },
+
   delete: async ({ commit }, agentId) => {
     commit(types.default.SET_AGENT_DELETING_STATUS, true);
     try {
@@ -88,6 +95,7 @@ export const mutations = {
   [types.default.ADD_AGENT]: MutationHelpers.create,
   [types.default.EDIT_AGENT]: MutationHelpers.update,
   [types.default.DELETE_AGENT]: MutationHelpers.destroy,
+  [types.default.UPDATE_AGENTS_PRESENCE]: MutationHelpers.updatePresence,
 };
 
 export default {
diff --git a/app/javascript/dashboard/store/modules/contacts.js b/app/javascript/dashboard/store/modules/contacts.js
index ba2ca8484..8f88639ea 100644
--- a/app/javascript/dashboard/store/modules/contacts.js
+++ b/app/javascript/dashboard/store/modules/contacts.js
@@ -59,6 +59,10 @@ export const actions = {
       throw new Error(error);
     }
   },
+
+  updatePresence: ({ commit }, data) => {
+    commit(types.default.UPDATE_CONTACTS_PRESENCE, data);
+  },
 };
 
 export const mutations = {
@@ -88,6 +92,21 @@ export const mutations = {
   [types.default.EDIT_CONTACT]: ($state, data) => {
     Vue.set($state.records, data.id, data);
   },
+
+  [types.default.UPDATE_CONTACTS_PRESENCE]: ($state, data) => {
+    Object.values($state.records).forEach(element => {
+      const availabilityStatus = data[element.id];
+      if (availabilityStatus) {
+        Vue.set(
+          $state.records[element.id],
+          'availability_status',
+          availabilityStatus
+        );
+      } else {
+        Vue.delete($state.records[element.id], 'availability_status');
+      }
+    });
+  },
 };
 
 export default {
diff --git a/app/javascript/dashboard/store/modules/specs/agents/actions.spec.js b/app/javascript/dashboard/store/modules/specs/agents/actions.spec.js
index 54d55bacf..206ae9dfe 100644
--- a/app/javascript/dashboard/store/modules/specs/agents/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/agents/actions.spec.js
@@ -93,4 +93,16 @@ describe('#actions', () => {
       ]);
     });
   });
+
+  describe('#updatePresence', () => {
+    it('sends correct actions if API is success', async () => {
+      const data = { users: { 1: 'online' }, contacts: { 2: 'online' } };
+      actions.updatePresence({ commit }, data);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_AGENT_UPDATING_STATUS, true],
+        [types.default.UPDATE_AGENTS_PRESENCE, data],
+        [types.default.SET_AGENT_UPDATING_STATUS, false],
+      ]);
+    });
+  });
 });
diff --git a/app/javascript/dashboard/store/modules/specs/agents/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/agents/mutations.spec.js
index d019f337b..00b569aaf 100644
--- a/app/javascript/dashboard/store/modules/specs/agents/mutations.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/agents/mutations.spec.js
@@ -60,4 +60,40 @@ describe('#mutations', () => {
       expect(state.records).toEqual([]);
     });
   });
+
+  describe('#UPDATE_AGENTS_PRESENCE', () => {
+    it('updates agent presence', () => {
+      const state = {
+        records: [
+          {
+            id: 1,
+            name: 'Agent1',
+            email: 'agent1@chatwoot.com',
+            availability_status: 'offline',
+          },
+          {
+            id: 2,
+            name: 'Agent1',
+            email: 'agent1@chatwoot.com',
+            availability_status: 'online',
+          },
+        ],
+      };
+
+      mutations[types.default.UPDATE_AGENTS_PRESENCE](state, { '1': 'busy' });
+      expect(state.records).toEqual([
+        {
+          id: 1,
+          name: 'Agent1',
+          email: 'agent1@chatwoot.com',
+          availability_status: 'busy',
+        },
+        {
+          id: 2,
+          name: 'Agent1',
+          email: 'agent1@chatwoot.com',
+        },
+      ]);
+    });
+  });
 });
diff --git a/app/javascript/dashboard/store/mutation-types.js b/app/javascript/dashboard/store/mutation-types.js
index d6e22726a..473304986 100755
--- a/app/javascript/dashboard/store/mutation-types.js
+++ b/app/javascript/dashboard/store/mutation-types.js
@@ -59,6 +59,7 @@ export default {
   ADD_AGENT: 'ADD_AGENT',
   EDIT_AGENT: 'EDIT_AGENT',
   DELETE_AGENT: 'DELETE_AGENT',
+  UPDATE_AGENTS_PRESENCE: 'UPDATE_AGENTS_PRESENCE',
 
   // Canned Response
   SET_CANNED_UI_FLAG: 'SET_CANNED_UI_FLAG',
@@ -91,6 +92,7 @@ export default {
   SET_CONTACT_ITEM: 'SET_CONTACT_ITEM',
   SET_CONTACTS: 'SET_CONTACTS',
   EDIT_CONTACT: 'EDIT_CONTACT',
+  UPDATE_CONTACTS_PRESENCE: 'UPDATE_CONTACTS_PRESENCE',
 
   // Contact Conversation
   SET_CONTACT_CONVERSATIONS_UI_FLAG: 'SET_CONTACT_CONVERSATIONS_UI_FLAG',
diff --git a/app/javascript/shared/helpers/BaseActionCableConnector.js b/app/javascript/shared/helpers/BaseActionCableConnector.js
index c601d4164..ed0c1bb65 100644
--- a/app/javascript/shared/helpers/BaseActionCableConnector.js
+++ b/app/javascript/shared/helpers/BaseActionCableConnector.js
@@ -1,20 +1,31 @@
 import { createConsumer } from '@rails/actioncable';
 
+const PRESENCE_INTERVAL = 60000;
+
 class BaseActionCableConnector {
   constructor(app, pubsubToken) {
     this.consumer = createConsumer();
-    this.consumer.subscriptions.create(
+    this.subscription = this.consumer.subscriptions.create(
       {
         channel: 'RoomChannel',
         pubsub_token: pubsubToken,
+        account_id: app.$store.getters.getCurrentAccountId,
+        user_id: app.$store.getters.getCurrentUserID,
       },
       {
+        updatePresence() {
+          this.perform('update_presence');
+        },
         received: this.onReceived,
       }
     );
     this.app = app;
     this.events = {};
     this.isAValidEvent = () => true;
+
+    setInterval(() => {
+      this.subscription.updatePresence();
+    }, PRESENCE_INTERVAL);
   }
 
   disconnect() {
diff --git a/app/javascript/shared/helpers/vuex/mutationHelpers.js b/app/javascript/shared/helpers/vuex/mutationHelpers.js
index 577d02bef..9822c0224 100644
--- a/app/javascript/shared/helpers/vuex/mutationHelpers.js
+++ b/app/javascript/shared/helpers/vuex/mutationHelpers.js
@@ -34,6 +34,17 @@ export const updateAttributes = (state, data) => {
   });
 };
 
+export const updatePresence = (state, data) => {
+  state.records.forEach((element, index) => {
+    const availabilityStatus = data[element.id];
+    if (availabilityStatus) {
+      Vue.set(state.records[index], 'availability_status', availabilityStatus);
+    } else {
+      Vue.delete(state.records[index], 'availability_status');
+    }
+  });
+};
+
 export const destroy = (state, id) => {
   state.records = state.records.filter(record => record.id !== id);
 };
diff --git a/app/javascript/widget/helpers/actionCable.js b/app/javascript/widget/helpers/actionCable.js
index c4ab32b27..35ca89bfd 100644
--- a/app/javascript/widget/helpers/actionCable.js
+++ b/app/javascript/widget/helpers/actionCable.js
@@ -10,6 +10,7 @@ class ActionCableConnector extends BaseActionCableConnector {
       'conversation.typing_off': this.onTypingOff,
       'conversation.resolved': this.onStatusChange,
       'conversation.opened': this.onStatusChange,
+      'presence.update': this.onPresenceUpdate,
     };
   }
 
@@ -25,6 +26,10 @@ class ActionCableConnector extends BaseActionCableConnector {
     this.app.$store.dispatch('conversation/updateMessage', data);
   };
 
+  onPresenceUpdate = data => {
+    this.app.$store.dispatch('agent/updatePresence', data.users);
+  };
+
   onTypingOn = () => {
     this.clearTimer();
     this.app.$store.dispatch('conversation/toggleAgentTyping', {
diff --git a/app/javascript/widget/store/modules/agent.js b/app/javascript/widget/store/modules/agent.js
index 2cdde0e0c..85b44bac8 100644
--- a/app/javascript/widget/store/modules/agent.js
+++ b/app/javascript/widget/store/modules/agent.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import { getAvailableAgents } from 'widget/api/agent';
+import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 
 const state = {
   records: [],
@@ -27,12 +28,16 @@ export const actions = {
       commit('setHasFetched', true);
     }
   },
+  updatePresence: async ({ commit }, data) => {
+    commit('updatePresence', data);
+  },
 };
 
 export const mutations = {
   setAgents($state, data) {
     Vue.set($state, 'records', data);
   },
+  updatePresence: MutationHelpers.updatePresence,
   setError($state, value) {
     Vue.set($state.uiFlags, 'isError', value);
   },
diff --git a/app/javascript/widget/store/modules/specs/agent/actions.spec.js b/app/javascript/widget/store/modules/specs/agent/actions.spec.js
index 5f1400dee..4e61b18d6 100644
--- a/app/javascript/widget/store/modules/specs/agent/actions.spec.js
+++ b/app/javascript/widget/store/modules/specs/agent/actions.spec.js
@@ -25,4 +25,9 @@ describe('#actions', () => {
       ]);
     });
   });
+
+  describe('#updatePresence', () => {
+    actions.updatePresence({ commit }, { 1: 'online' });
+    expect(commit.mock.calls).toEqual([['updatePresence', { 1: 'online' }]]);
+  });
 });
diff --git a/app/javascript/widget/store/modules/specs/agent/mutations.spec.js b/app/javascript/widget/store/modules/specs/agent/mutations.spec.js
index 77bf5ac18..5d1ddaaa7 100644
--- a/app/javascript/widget/store/modules/specs/agent/mutations.spec.js
+++ b/app/javascript/widget/store/modules/specs/agent/mutations.spec.js
@@ -1,5 +1,5 @@
 import { mutations } from '../../agent';
-import agents from './data';
+import { agents } from './data';
 
 describe('#mutations', () => {
   describe('#setAgents', () => {
@@ -25,4 +25,35 @@ describe('#mutations', () => {
       expect(state.uiFlags.hasFetched).toEqual(true);
     });
   });
+
+  describe('#updatePresence', () => {
+    it('updates agent presence', () => {
+      const state = { records: agents };
+      mutations.updatePresence(state, { 1: 'busy', 2: 'online' });
+      expect(state.records).toEqual([
+        {
+          id: 1,
+          name: 'John',
+          avatar_url: '',
+          availability_status: 'busy',
+        },
+        {
+          id: 2,
+          name: 'Xavier',
+          avatar_url: '',
+          availability_status: 'online',
+        },
+        {
+          id: 3,
+          name: 'Pranav',
+          avatar_url: '',
+        },
+        {
+          id: 4,
+          name: 'Nithin',
+          avatar_url: '',
+        },
+      ]);
+    });
+  });
 });
diff --git a/app/models/concerns/availability_statusable.rb b/app/models/concerns/availability_statusable.rb
index c7a3541e2..2f1589bc3 100644
--- a/app/models/concerns/availability_statusable.rb
+++ b/app/models/concerns/availability_statusable.rb
@@ -1,11 +1,20 @@
 module AvailabilityStatusable
   extend ActiveSupport::Concern
 
-  def online?
-    ::OnlineStatusTracker.subscription_count(pubsub_token) != 0
+  def online_presence?
+    ::OnlineStatusTracker.get_presence(availability_account_id, self.class.name, id)
   end
 
   def availability_status
-    online? ? 'online' : 'offline'
+    return 'offline' unless online_presence?
+    return 'online' if is_a? Contact
+
+    ::OnlineStatusTracker.get_status(availability_account_id, id) || 'online'
+  end
+
+  def availability_account_id
+    return account_id if is_a? Contact
+
+    Current.account.present? ? Current.account.id : accounts.first.id
   end
 end
diff --git a/app/models/user.rb b/app/models/user.rb
index aa014852a..b025fabea 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -3,6 +3,7 @@
 # Table name: users
 #
 #  id                     :integer          not null, primary key
+#  availability           :integer          default(0)
 #  confirmation_sent_at   :datetime
 #  confirmation_token     :string
 #  confirmed_at           :datetime
@@ -53,6 +54,8 @@ class User < ApplicationRecord
          :validatable,
          :confirmable
 
+  enum availability: { online: 0, offline: 1, busy: 2 }
+
   # The validation below has been commented out as it does not
   # work because :validatable in devise overrides this.
   # validates_uniqueness_of :email, scope: :account_id
@@ -75,6 +78,7 @@ class User < ApplicationRecord
   before_validation :set_password_and_uid, on: :create
 
   after_create :create_access_token
+  after_save :update_presence_in_redis, if: :saved_change_to_availability?
 
   def send_devise_notification(notification, *args)
     devise_mailer.send(notification, self, *args).deliver_later
@@ -126,7 +130,8 @@ class User < ApplicationRecord
       id: id,
       name: name,
       avatar_url: avatar_url,
-      type: 'user'
+      type: 'user',
+      availability_status: availability_status
     }
   end
 
@@ -138,4 +143,12 @@ class User < ApplicationRecord
       type: 'user'
     }
   end
+
+  private
+
+  def update_presence_in_redis
+    accounts.each do |account|
+      OnlineStatusTracker.set_status(account.id, id, availability)
+    end
+  end
 end
diff --git a/app/views/api/v1/accounts/contacts/index.json.jbuilder b/app/views/api/v1/accounts/contacts/index.json.jbuilder
index a162fdd82..892e5fbdd 100644
--- a/app/views/api/v1/accounts/contacts/index.json.jbuilder
+++ b/app/views/api/v1/accounts/contacts/index.json.jbuilder
@@ -1,10 +1,5 @@
 json.payload do
   json.array! @contacts do |contact|
-    json.id contact.id
-    json.name contact.name
-    json.email contact.email
-    json.phone_number contact.phone_number
-    json.thumbnail contact.avatar_url
-    json.additional_attributes contact.additional_attributes
+    json.partial! 'api/v1/models/contact.json.jbuilder', resource: contact
   end
 end
diff --git a/app/views/api/v1/accounts/contacts/show.json.jbuilder b/app/views/api/v1/accounts/contacts/show.json.jbuilder
index e4cb9b016..276a6323e 100644
--- a/app/views/api/v1/accounts/contacts/show.json.jbuilder
+++ b/app/views/api/v1/accounts/contacts/show.json.jbuilder
@@ -1,9 +1,3 @@
 json.payload do
-  json.availability_status @contact.availability_status
-  json.email @contact.email
-  json.id @contact.id
-  json.name @contact.name
-  json.phone_number @contact.phone_number
-  json.thumbnail @contact.avatar_url
-  json.additional_attributes @contact.additional_attributes
+  json.partial! 'api/v1/models/contact.json.jbuilder', resource: @contact
 end
diff --git a/app/views/api/v1/accounts/contacts/update.json.jbuilder b/app/views/api/v1/accounts/contacts/update.json.jbuilder
index 086375760..276a6323e 100644
--- a/app/views/api/v1/accounts/contacts/update.json.jbuilder
+++ b/app/views/api/v1/accounts/contacts/update.json.jbuilder
@@ -1,8 +1,3 @@
 json.payload do
-  json.id @contact.id
-  json.name @contact.name
-  json.email @contact.email
-  json.phone_number @contact.phone_number
-  json.thumbnail @contact.avatar_url
-  json.additional_attributes @contact.additional_attributes
+  json.partial! 'api/v1/models/contact.json.jbuilder', resource: @contact
 end
diff --git a/app/views/api/v1/models/_contact.json.jbuilder b/app/views/api/v1/models/_contact.json.jbuilder
new file mode 100644
index 000000000..a9152712e
--- /dev/null
+++ b/app/views/api/v1/models/_contact.json.jbuilder
@@ -0,0 +1,7 @@
+json.additional_attributes resource.additional_attributes
+json.availability_status resource.availability_status
+json.email resource.email
+json.id resource.id
+json.name resource.name
+json.phone_number resource.phone_number
+json.thumbnail resource.avatar_url
diff --git a/app/views/api/v1/models/_user.json.jbuilder b/app/views/api/v1/models/_user.json.jbuilder
index 5638fc233..3efb6470b 100644
--- a/app/views/api/v1/models/_user.json.jbuilder
+++ b/app/views/api/v1/models/_user.json.jbuilder
@@ -11,6 +11,7 @@ json.inviter_id resource.active_account_user&.inviter_id
 json.confirmed resource.confirmed?
 json.avatar_url resource.avatar_url
 json.access_token resource.access_token.token
+json.availability_status resource.availability_status
 json.accounts do
   json.array! resource.account_users do |account_user|
     json.id account_user.account_id
diff --git a/config/cable.yml b/config/cable.yml
index cd363f0d5..6bb7a7844 100644
--- a/config/cable.yml
+++ b/config/cable.yml
@@ -1,17 +1,18 @@
-development:
+default: &default
   adapter: redis
   url: <%= ENV.fetch('REDIS_URL', 'redis://127.0.0.1:6379') %>
   password: <%= ENV.fetch('REDIS_PASSWORD', nil).presence %>
+  channel_prefix: <%= "chatwoot_#{Rails.env}_action_cable"  %>
+
+development:
+  <<: *default
 
 test:
   adapter: test
+  channel_prefix: <%= "chatwoot_#{Rails.env}_action_cable"  %>
 
 staging:
-  adapter: redis
-  url: <%= ENV.fetch('REDIS_URL', 'redis://127.0.0.1:6379') %>
-  password: <%= ENV.fetch('REDIS_PASSWORD', nil).presence %>
+  <<: *default
 
 production:
-  adapter: redis
-  url: <%= ENV.fetch('REDIS_URL', 'redis://127.0.0.1:6379') %>
-  password: <%= ENV.fetch('REDIS_PASSWORD', nil).presence %>
+  <<: *default
diff --git a/db/migrate/20200629122646_add_availability_to_user.rb b/db/migrate/20200629122646_add_availability_to_user.rb
new file mode 100644
index 000000000..dd062af15
--- /dev/null
+++ b/db/migrate/20200629122646_add_availability_to_user.rb
@@ -0,0 +1,5 @@
+class AddAvailabilityToUser < ActiveRecord::Migration[6.0]
+  def change
+    add_column :users, :availability, :integer, default: 0
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 87d6ea781..6db971114 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2020_06_25_154254) do
+ActiveRecord::Schema.define(version: 2020_06_29_122646) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "pg_stat_statements"
@@ -413,6 +413,7 @@ ActiveRecord::Schema.define(version: 2020_06_25_154254) do
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.string "pubsub_token"
+    t.integer "availability", default: 0
     t.index ["email"], name: "index_users_on_email"
     t.index ["pubsub_token"], name: "index_users_on_pubsub_token", unique: true
     t.index ["reset_password_token"], name: "index_users_on_reset_password_token", unique: true
diff --git a/lib/online_status_tracker.rb b/lib/online_status_tracker.rb
index fa66453ad..32069dd93 100644
--- a/lib/online_status_tracker.rb
+++ b/lib/online_status_tracker.rb
@@ -1,19 +1,50 @@
 module OnlineStatusTracker
-  def self.add_subscription(channel_id)
-    count = subscription_count(channel_id)
-    ::Redis::Alfred.setex(channel_id, count + 1)
+  PRESENCE_DURATION = 60.seconds
+
+  # presence : sorted set with timestamp as the score & object id as value
+
+  # obj_type: Contact | User
+  def self.update_presence(account_id, obj_type, obj_id)
+    ::Redis::Alfred.zadd(presence_key(account_id, obj_type), Time.now.to_i, obj_id)
   end
 
-  def self.remove_subscription(channel_id)
-    count = subscription_count(channel_id)
-    if count == 1
-      ::Redis::Alfred.delete(channel_id)
-    elsif count != 0
-      ::Redis::Alfred.setex(channel_id, count - 1)
+  def self.get_presence(account_id, obj_type, obj_id)
+    connected_time = ::Redis::Alfred.zscore(presence_key(account_id, obj_type), obj_id)
+    connected_time && connected_time > (Time.zone.now - PRESENCE_DURATION).to_i
+  end
+
+  def self.presence_key(account_id, type)
+    case type
+    when 'Contact'
+      Redis::Alfred::ONLINE_PRESENCE_CONTACTS % account_id
+    else
+      Redis::Alfred::ONLINE_PRESENCE_USERS % account_id
     end
   end
 
-  def self.subscription_count(channel_id)
-    ::Redis::Alfred.get(channel_id).to_i
+  # online status : online | busy | offline
+  # redis hash with obj_id key && status as value
+
+  def self.set_status(account_id, user_id, status)
+    ::Redis::Alfred.hset(status_key(account_id), user_id, status)
+  end
+
+  def self.get_status(account_id, user_id)
+    ::Redis::Alfred.hget(status_key(account_id), user_id)
+  end
+
+  def self.status_key(account_id)
+    Redis::Alfred::ONLINE_STATUS % account_id
+  end
+
+  def self.get_available_contacts(account_id)
+    contact_ids = ::Redis::Alfred.zrangebyscore(presence_key(account_id, 'Contact'), (Time.zone.now - PRESENCE_DURATION).to_i, Time.now.to_i)
+    contact_ids.index_with { |_id| 'online' }
+  end
+
+  def self.get_available_users(account_id)
+    user_ids = ::Redis::Alfred.zrangebyscore(presence_key(account_id, 'User'), (Time.zone.now - PRESENCE_DURATION).to_i, Time.now.to_i)
+    user_availabilities = ::Redis::Alfred.hmget(status_key(account_id), user_ids)
+    user_ids.map.with_index { |id, index| [id, (user_availabilities[index] || 'online')] }.to_h
   end
 end
diff --git a/lib/redis/alfred.rb b/lib/redis/alfred.rb
index d811df028..e1274a59b 100644
--- a/lib/redis/alfred.rb
+++ b/lib/redis/alfred.rb
@@ -1,6 +1,13 @@
 module Redis::Alfred
   CONVERSATION_MAILER_KEY = 'CONVERSATION::%d'.freeze
 
+  # hash containing user_id key and status as value ONLINE_STATUS::%accountid
+  ONLINE_STATUS = 'ONLINE_STATUS::%s'.freeze
+  # sorted set storing online presense of account contacts : ONLINE_PRESENCE::%accountid::CONTACTS
+  ONLINE_PRESENCE_CONTACTS = 'ONLINE_PRESENCE::%s::CONTACTS'.freeze
+  # sorted set storing online presense of account users : ONLINE_PRESENCE::%accountid::USERS
+  ONLINE_PRESENCE_USERS = 'ONLINE_PRESENCE::%s::USERS'.freeze
+
   class << self
     def rpoplpush(source, destination)
       $alfred.rpoplpush(source, destination)
@@ -22,8 +29,46 @@ module Redis::Alfred
       $alfred.setex(key, expiry, value)
     end
 
+    def set(key, value)
+      $alfred.set(key, value)
+    end
+
     def get(key)
       $alfred.get(key)
     end
+
+    # hash operation
+
+    # add a key value to redis hash
+    def hset(key, field, value)
+      $alfred.hset(key, field, value)
+    end
+
+    # get value from redis hash
+    def hget(key, field)
+      $alfred.hget(key, field)
+    end
+
+    # get values of multiple keys from redis hash
+    def hmget(key, fields)
+      $alfred.hmget(key, *fields)
+    end
+
+    # sorted set functions
+
+    # add score and value for a key
+    def zadd(key, score, value)
+      $alfred.zadd(key, score, value)
+    end
+
+    # get score of a value for key
+    def zscore(key, value)
+      $alfred.zscore(key, value)
+    end
+
+    # get values by score
+    def zrangebyscore(key, range_start, range_end)
+      $alfred.zrangebyscore(key, range_start, range_end)
+    end
   end
 end
diff --git a/spec/channels/room_channel_spec.rb b/spec/channels/room_channel_spec.rb
index e50aaebe4..8cac85ce6 100644
--- a/spec/channels/room_channel_spec.rb
+++ b/spec/channels/room_channel_spec.rb
@@ -1,15 +1,15 @@
 require 'rails_helper'
 
 RSpec.describe RoomChannel, type: :channel do
-  let!(:user) { create(:user) }
+  let!(:contact) { create(:contact) }
 
   before do
     stub_connection
   end
 
   it 'subscribes to a stream when pubsub_token is provided' do
-    subscribe(pubsub_token: user.uid)
+    subscribe(pubsub_token: contact.pubsub_token)
     expect(subscription).to be_confirmed
-    expect(subscription).to have_stream_for(user.uid)
+    expect(subscription).to have_stream_for(contact.pubsub_token)
   end
 end
diff --git a/spec/controllers/api/v1/profiles_controller_spec.rb b/spec/controllers/api/v1/profiles_controller_spec.rb
index a2226d68b..b8e2b60f9 100644
--- a/spec/controllers/api/v1/profiles_controller_spec.rb
+++ b/spec/controllers/api/v1/profiles_controller_spec.rb
@@ -77,6 +77,16 @@ RSpec.describe 'Profile API', type: :request do
         agent.reload
         expect(agent.avatar.attached?).to eq(true)
       end
+
+      it 'updates the availability status' do
+        put '/api/v1/profile',
+            params: { profile: { availability: 'offline' } },
+            headers: agent.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:success)
+        expect(::OnlineStatusTracker.get_status(account.id, agent.id)).to eq('offline')
+      end
     end
   end
 end