feat: Add assign to me button next to assign agents. (#2414)

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

@@ -110,6 +110,7 @@
   "CONVERSATION_SIDEBAR": {
     "DETAILS_TITLE": "Conversations Details",
     "ASSIGNEE_LABEL": "Assigned Agent",
+    "SELF_ASSIGN": "Assign to me",
     "TEAM_LABEL": "Assigned Team",
     "SELECT": {
       "PLACEHOLDER": "None"

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -9,9 +9,20 @@
         {{ $t('CONVERSATION_SIDEBAR.DETAILS_TITLE') }}
       </h4>
       <div class="multiselect-wrap--small">
-        <label class="multiselect__label">
-          {{ $t('CONVERSATION_SIDEBAR.ASSIGNEE_LABEL') }}
-        </label>
+        <div class="self-assign">
+          <label class="multiselect__label">
+            {{ $t('CONVERSATION_SIDEBAR.ASSIGNEE_LABEL') }}
+          </label>
+          <woot-button
+            v-if="showSelfAssign"
+            icon="ion-arrow-right-c"
+            variant="link"
+            class-names="button-content"
+            @click="onSelfAssign"
+          >
+            {{ $t('CONVERSATION_SIDEBAR.SELF_ASSIGN') }}
+          </woot-button>
+        </div>
         <multiselect
           v-model="assignedAgent"
           :options="agentsList"
@@ -155,6 +166,7 @@ export default {
     ...mapGetters({
       currentChat: 'getSelectedChat',
       teams: 'teams/getTeams',
+      currentUser: 'getCurrentUser',
       getAgents: 'inboxAssignableAgents/getAssignableAgents',
       uiFlags: 'inboxAssignableAgents/getUIFlags',
     }),
@@ -260,6 +272,15 @@ export default {
           });
       },
     },
+    showSelfAssign() {
+      if (!this.assignedAgent) {
+        return true;
+      }
+      if (this.assignedAgent.id !== this.currentUser.id) {
+        return true;
+      }
+      return false;
+    },
   },
   watch: {
     conversationId(newConversationId, prevConversationId) {
@@ -286,6 +307,29 @@ export default {
     openTranscriptModal() {
       this.showTranscriptModal = true;
     },
+    onSelfAssign() {
+      const {
+        account_id,
+        availability_status,
+        available_name,
+        email,
+        id,
+        name,
+        role,
+        thumbnail,
+      } = this.currentUser;
+      const selfAssign = {
+        account_id,
+        availability_status,
+        available_name,
+        email,
+        id,
+        name,
+        role,
+        thumbnail,
+      };
+      this.assignedAgent = selfAssign;
+    },
   },
 };
 </script>
@@ -375,4 +419,12 @@ export default {
     flex-shrink: 0;
   }
 }
+.self-assign {
+  display: flex;
+  justify-content: space-between;
+
+  .button-content {
+    margin-bottom: var(--space-small);
+  }
+}
 </style>