feat: Updated conversation list UI (#12971)

2025-12-03 15:46:16 +05:30
parent eccf3dd8f6
commit 99f17891d0
30 changed files with 1670 additions and 1628 deletions
@@ -1,8 +1,15 @@
 <script setup>
-import { inject } from 'vue';
+import { inject, ref } from 'vue';
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { CONVERSATION_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import { useBulkActions } from 'dashboard/composables/chatlist/useBulkActions';
 import ConversationCard from 'dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';

-defineProps({
+const props = defineProps({
  source: {
    type: Object,
    required: true,
@@ -33,18 +40,126 @@ defineProps({
  },
 });

+const store = useStore();
+const router = useRouter();
+const { t } = useI18n();
+
 const selectConversation = inject('selectConversation');
 const deSelectConversation = inject('deSelectConversation');
-const assignAgent = inject('assignAgent');
-const assignTeam = inject('assignTeam');
-const assignLabels = inject('assignLabels');
-const updateConversationStatus = inject('updateConversationStatus');
 const toggleContextMenu = inject('toggleContextMenu');
-const markAsUnread = inject('markAsUnread');
-const markAsRead = inject('markAsRead');
-const assignPriority = inject('assignPriority');
 const isConversationSelected = inject('isConversationSelected');
-const deleteConversation = inject('deleteConversation');
+
+const deleteConversationDialogRef = ref(null);
+
+const { onAssignAgent, onAssignLabels } = useBulkActions();
+
+async function assignTeam(team, conversationId = null) {
+  try {
+    await store.dispatch('assignTeam', {
+      conversationId,
+      teamId: team.id,
+    });
+    useAlert(
+      t('CONVERSATION.CARD_CONTEXT_MENU.API.TEAM_ASSIGNMENT.SUCCESFUL', {
+        team: team.name,
+        conversationId,
+      })
+    );
+  } catch (error) {
+    useAlert(t('CONVERSATION.CARD_CONTEXT_MENU.API.TEAM_ASSIGNMENT.FAILED'));
+  }
+}
+
+function updateConversationStatus(conversationId, status, snoozedUntil) {
+  store
+    .dispatch('toggleStatus', {
+      conversationId,
+      status,
+      snoozedUntil,
+    })
+    .then(() => {
+      useAlert(t('CONVERSATION.CHANGE_STATUS'));
+    });
+}
+
+async function assignPriority(priority, conversationId = null) {
+  store.dispatch('setCurrentChatPriority', {
+    priority,
+    conversationId,
+  });
+  store.dispatch('assignPriority', { conversationId, priority }).then(() => {
+    useTrack(CONVERSATION_EVENTS.CHANGE_PRIORITY, {
+      newValue: priority,
+      from: 'Context menu',
+    });
+    useAlert(
+      t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.SUCCESSFUL', {
+        priority,
+        conversationId,
+      })
+    );
+  });
+}
+
+function redirectToConversationList() {
+  const accountId = store.getters.getCurrentAccountId;
+  const conversationType = props.conversationType || '';
+  const inboxId = store.getters.getSelectedInbox?.id;
+
+  let path = `/app/accounts/${accountId}/conversations`;
+
+  if (conversationType === 'mention') {
+    path = `/app/accounts/${accountId}/mentions/conversations`;
+  } else if (conversationType === 'unattended') {
+    path = `/app/accounts/${accountId}/unattended/conversations`;
+  } else if (props.foldersId) {
+    path = `/app/accounts/${accountId}/custom_view/${props.foldersId}`;
+  } else if (inboxId) {
+    path = `/app/accounts/${accountId}/inbox/${inboxId}`;
+  } else if (props.teamId) {
+    path = `/app/accounts/${accountId}/team/${props.teamId}`;
+  } else if (props.label) {
+    path = `/app/accounts/${accountId}/label/${props.label}`;
+  }
+
+  router.push(path);
+}
+
+async function markAsUnread(conversationId) {
+  try {
+    await store.dispatch('markMessagesUnread', {
+      id: conversationId,
+    });
+    redirectToConversationList();
+  } catch (error) {
+    // Ignore error
+  }
+}
+
+async function markAsRead(conversationId) {
+  try {
+    await store.dispatch('markMessagesRead', {
+      id: conversationId,
+    });
+  } catch (error) {
+    // Ignore error
+  }
+}
+
+function handleDelete() {
+  deleteConversationDialogRef.value.open();
+}
+
+async function deleteConversation() {
+  try {
+    await store.dispatch('deleteConversation', props.source.id);
+    redirectToConversationList();
+    deleteConversationDialogRef.value.close();
+    useAlert(t('CONVERSATION.SUCCESS_DELETE_CONVERSATION'));
+  } catch (error) {
+    useAlert(t('CONVERSATION.FAIL_DELETE_CONVERSATION'));
+  }
+}
 </script>

 <template>
@@ -61,14 +176,27 @@ const deleteConversation = inject('deleteConversation');
    enable-context-menu
    @select-conversation="selectConversation"
    @de-select-conversation="deSelectConversation"
-    @assign-agent="assignAgent"
+    @assign-agent="onAssignAgent"
    @assign-team="assignTeam"
-    @assign-label="assignLabels"
+    @assign-label="onAssignLabels"
    @update-conversation-status="updateConversationStatus"
    @context-menu-toggle="toggleContextMenu"
    @mark-as-unread="markAsUnread"
    @mark-as-read="markAsRead"
    @assign-priority="assignPriority"
-    @delete-conversation="deleteConversation"
+    @delete-conversation="handleDelete"
+  />
+
+  <Dialog
+    ref="deleteConversationDialogRef"
+    type="alert"
+    :title="
+      $t('CONVERSATION.DELETE_CONVERSATION.TITLE', {
+        conversationId: source.id,
+      })
+    "
+    :description="$t('CONVERSATION.DELETE_CONVERSATION.DESCRIPTION')"
+    :confirm-button-label="$t('CONVERSATION.DELETE_CONVERSATION.CONFIRM')"
+    @confirm="deleteConversation"
  />
 </template>