feat: Add the ability to change the agent availability status (#6855)

* Add the option change agent availability

* Remove callout

* Move `AVAILABILITY_STATUS_KEYS` to constants

* Update app/javascript/dashboard/i18n/locale/en/agentMgmt.json

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

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

@@ -52,8 +52,9 @@ import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
 import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader';
 import WootDropdownDivider from 'shared/components/ui/dropdown/DropdownDivider';
 import AvailabilityStatusBadge from '../widgets/conversation/AvailabilityStatusBadge';
+import wootConstants from 'dashboard/constants';
 
-const AVAILABILITY_STATUS_KEYS = ['online', 'busy', 'offline'];
+const { AVAILABILITY_STATUS_KEYS } = wootConstants;
 
 export default {
   components: {

app/javascript/dashboard/constants.js

@@ -24,5 +24,6 @@ export default {
   DOCS_URL: '//www.chatwoot.com/docs/product/',
   TESTIMONIAL_URL: 'https://testimonials.cdn.chatwoot.com/content.json',
   SMALL_SCREEN_BREAKPOINT: 1024,
+  AVAILABILITY_STATUS_KEYS: ['online', 'busy', 'offline'],
 };
 export const DEFAULT_REDIRECT_URL = '/app/';

app/javascript/dashboard/i18n/locale/en/agentMgmt.json

@@ -33,6 +33,7 @@
           "PLACEHOLDER": "Please select a role",
           "ERROR": "Role is required"
         },
+
         "EMAIL": {
           "LABEL": "Email Address",
           "PLACEHOLDER": "Please enter an email address of the agent"
@@ -74,6 +75,11 @@
           "LABEL": "Email Address",
           "PLACEHOLDER": "Please enter an email address of the agent"
         },
+        "AGENT_AVAILABILITY": {
+          "LABEL": "Availability",
+          "PLACEHOLDER": "Please select an availability status",
+          "ERROR": "Availability is required"
+        },
         "SUBMIT": "Edit Agent"
       },
       "BUTTON_TEXT": "Edit",

app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue

@@ -28,6 +28,24 @@
             </span>
           </label>
         </div>
+
+        <div class="medium-12 columns">
+          <label :class="{ error: $v.agentAvailability.$error }">
+            {{ $t('PROFILE_SETTINGS.FORM.AVAILABILITY.LABEL') }}
+            <select v-model="agentAvailability">
+              <option
+                v-for="role in availabilityStatuses"
+                :key="role.value"
+                :value="role.value"
+              >
+                {{ role.label }}
+              </option>
+            </select>
+            <span v-if="$v.agentAvailability.$error" class="message">
+              {{ $t('AGENT_MGMT.EDIT.FORM.AGENT_AVAILABILITY.ERROR') }}
+            </span>
+          </label>
+        </div>
         <div class="medium-12 modal-footer">
           <div class="medium-6 columns">
             <woot-submit-button
@@ -64,6 +82,9 @@ import { mapGetters } from 'vuex';
 import WootSubmitButton from '../../../../components/buttons/FormSubmitButton';
 import Modal from '../../../../components/Modal';
 import Auth from '../../../../api/auth';
+import wootConstants from 'dashboard/constants';
+
+const { AVAILABILITY_STATUS_KEYS } = wootConstants;
 
 export default {
   components: {
@@ -87,6 +108,10 @@ export default {
       type: String,
       default: '',
     },
+    availability: {
+      type: String,
+      default: '',
+    },
     onClose: {
       type: Function,
       required: true,
@@ -105,6 +130,7 @@ export default {
         },
       ],
       agentName: this.name,
+      agentAvailability: this.availability,
       agentType: this.type,
       agentCredentials: {
         email: this.email,
@@ -120,6 +146,9 @@ export default {
     agentType: {
       required,
     },
+    agentAvailability: {
+      required,
+    },
   },
   computed: {
     pageTitle() {
@@ -128,6 +157,16 @@ export default {
     ...mapGetters({
       uiFlags: 'agents/getUIFlags',
     }),
+    availabilityStatuses() {
+      return this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUSES_LIST').map(
+        (statusLabel, index) => ({
+          label: statusLabel,
+          value: AVAILABILITY_STATUS_KEYS[index],
+          disabled:
+            this.currentUserAvailability === AVAILABILITY_STATUS_KEYS[index],
+        })
+      );
+    },
   },
   methods: {
     showAlert(message) {
@@ -139,6 +178,7 @@ export default {
           id: this.id,
           name: this.agentName,
           role: this.agentType,
+          availability: this.agentAvailability,
         });
         this.showAlert(this.$t('AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE'));
         this.onClose();

app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue

@@ -108,6 +108,7 @@
         :name="currentAgent.name"
         :type="currentAgent.role"
         :email="currentAgent.email"
+        :availability="currentAgent.availability_status"
         :on-close="hideEditPopup"
       />
     </woot-modal>