Feature: Availability Statuses (#874)

Co-authored-by: Pranav Raj S <pranav@thoughtwoot.com>

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 }}

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>

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">

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">