From 0874aeee2d2c69ee08f73ff713b474329f01b7bd Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Mon, 24 Apr 2023 19:00:08 +0530 Subject: [PATCH] feat: priority UI (#6966) --- .../widgets/conversation/ConversationCard.vue | 24 ++-- .../widgets/conversation/PriorityMark.vue | 113 ++++++++++++++++++ .../i18n/locale/en/conversation.json | 17 +++ .../conversation/ConversationAction.vue | 90 +++++++++++++- .../store/modules/conversations/actions.js | 21 ++++ .../store/modules/conversations/index.js | 5 + .../dashboard/store/mutation-types.js | 1 + .../partials/_conversation.json.jbuilder | 1 + .../assets/images/dashboard/priority/high.svg | 6 + .../assets/images/dashboard/priority/low.svg | 4 + .../images/dashboard/priority/medium.svg | 5 + .../assets/images/dashboard/priority/none.svg | 4 + .../images/dashboard/priority/urgent.svg | 9 ++ 13 files changed, 292 insertions(+), 8 deletions(-) create mode 100644 app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue create mode 100644 public/assets/images/dashboard/priority/high.svg create mode 100644 public/assets/images/dashboard/priority/low.svg create mode 100644 public/assets/images/dashboard/priority/medium.svg create mode 100644 public/assets/images/dashboard/priority/none.svg create mode 100644 public/assets/images/dashboard/priority/urgent.svg diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue index 67cd10a5a..397928e75 100644 --- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue +++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue @@ -33,13 +33,16 @@
- - - {{ assignee.name }} - +
+ + + {{ assignee.name }} + + +

{{ currentContact.name }} @@ -131,6 +134,7 @@ import ConversationContextMenu from './contextMenu/Index.vue'; import alertMixin from 'shared/mixins/alertMixin'; import TimeAgo from 'dashboard/components/ui/TimeAgo'; import CardLabels from './conversationCardComponents/CardLabels.vue'; +import PriorityMark from './PriorityMark.vue'; const ATTACHMENT_ICONS = { image: 'image', audio: 'headphones-sound-wave', @@ -147,6 +151,7 @@ export default { Thumbnail, ConversationContextMenu, TimeAgo, + PriorityMark, }, mixins: [ @@ -429,6 +434,11 @@ export default { padding: var(--space-micro) 0 var(--space-micro) 0; } + .conversation-metadata-attributes { + display: flex; + gap: var(--space-small); + } + .assignee-label { display: inline-flex; margin-left: var(--space-small); diff --git a/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue b/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue new file mode 100644 index 000000000..7d0105b9d --- /dev/null +++ b/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue @@ -0,0 +1,113 @@ + + + + + diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json index 597799c15..78b7e660c 100644 --- a/app/javascript/dashboard/i18n/locale/en/conversation.json +++ b/app/javascript/dashboard/i18n/locale/en/conversation.json @@ -66,6 +66,23 @@ "NEXT_WEEK": "Next week" } }, + "PRIORITY": { + "TITLE": "Priority", + "OPTIONS": { + "NONE": "None", + "URGENT": "Urgent", + "HIGH": "High", + "MEDIUM": "Medium", + "LOW": "Low" + }, + "CHANGE_PRIORITY": { + "SELECT_PLACEHOLDER": "None", + "INPUT_PLACEHOLDER": "Select priority", + "NO_RESULTS": "No results found", + "SUCCESSFUL": "Changed priority of conversation id %{conversationId} to %{priority}", + "FAILED": "Couldn't change priority. Please try again." + } + }, "CARD_CONTEXT_MENU": { "PENDING": "Mark as pending", "RESOLVED": "Mark as resolved", diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue index d71a397c5..c55ebed6a 100644 --- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue +++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue @@ -45,11 +45,32 @@ $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.NO_RESULTS.TEAM') " :input-placeholder=" - $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.PLACEHOLDER.TEAM') + $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.PLACEHOLDER.INPUT_PLACEHOLDER') " @click="onClickAssignTeam" />

+
+ + +
opt.id === this.currentChat.priority + ); + + return selectedOption || this.priorityOptions[0]; + }, + set(priorityItem) { + const conversationId = this.currentChat.id; + const priority = priorityItem ? priorityItem.id : null; + this.$store.dispatch('setCurrentChatPriority', { + priority, + conversationId, + }); + this.$store + .dispatch('assignPriority', { conversationId, priority }) + .then(() => { + this.showAlert( + this.$t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.SUCCESSFUL', { + priority: priorityItem.name, + conversationId, + }) + ); + }); + }, + }, showSelfAssign() { if (!this.assignedAgent) { return true; @@ -170,6 +250,14 @@ export default { this.assignedTeam = selectedItemTeam; } }, + + onClickAssignPriority(selectedPriorityItem) { + const isSamePriority = + this.assignedPriority && + this.assignedPriority.id === selectedPriorityItem.id; + + this.assignedPriority = isSamePriority ? null : selectedPriorityItem; + }, }, }; diff --git a/app/javascript/dashboard/store/modules/conversations/actions.js b/app/javascript/dashboard/store/modules/conversations/actions.js index c2715a093..c801e6162 100644 --- a/app/javascript/dashboard/store/modules/conversations/actions.js +++ b/app/javascript/dashboard/store/modules/conversations/actions.js @@ -403,6 +403,27 @@ const actions = { clearConversationFilters({ commit }) { commit(types.CLEAR_CONVERSATION_FILTERS); }, + + assignPriority: async ({ dispatch }, { conversationId, priority }) => { + try { + await ConversationApi.togglePriority({ + conversationId, + priority, + }); + + dispatch('setCurrentChatPriority', { + priority, + conversationId, + }); + } catch (error) { + // Handle error + } + }, + + setCurrentChatPriority({ commit }, { priority, conversationId }) { + commit(types.ASSIGN_PRIORITY, { priority, conversationId }); + }, + ...messageReadActions, ...messageTranslateActions, }; diff --git a/app/javascript/dashboard/store/modules/conversations/index.js b/app/javascript/dashboard/store/modules/conversations/index.js index 6ba2fb2b9..8e68071ef 100644 --- a/app/javascript/dashboard/store/modules/conversations/index.js +++ b/app/javascript/dashboard/store/modules/conversations/index.js @@ -77,6 +77,11 @@ export const mutations = { Vue.set(chat.meta, 'team', team); }, + [types.ASSIGN_PRIORITY](_state, { priority, conversationId }) { + const [chat] = _state.allConversations.filter(c => c.id === conversationId); + Vue.set(chat, 'priority', priority); + }, + [types.UPDATE_CONVERSATION_CUSTOM_ATTRIBUTES](_state, custom_attributes) { const [chat] = getSelectedChatConversation(_state); Vue.set(chat, 'custom_attributes', custom_attributes); diff --git a/app/javascript/dashboard/store/mutation-types.js b/app/javascript/dashboard/store/mutation-types.js index c7f4087c5..bb9d8221f 100644 --- a/app/javascript/dashboard/store/mutation-types.js +++ b/app/javascript/dashboard/store/mutation-types.js @@ -35,6 +35,7 @@ export default { UNMUTE_CONVERSATION: 'UNMUTE_CONVERSATION', ASSIGN_AGENT: 'ASSIGN_AGENT', ASSIGN_TEAM: 'ASSIGN_TEAM', + ASSIGN_PRIORITY: 'ASSIGN_PRIORITY', SET_CHAT_META: 'SET_CHAT_META', ADD_MESSAGE: 'ADD_MESSAGE', DELETE_MESSAGE: 'DELETE_MESSAGE', diff --git a/app/views/api/v1/conversations/partials/_conversation.json.jbuilder b/app/views/api/v1/conversations/partials/_conversation.json.jbuilder index 1f3bca044..15cae0b07 100644 --- a/app/views/api/v1/conversations/partials/_conversation.json.jbuilder +++ b/app/views/api/v1/conversations/partials/_conversation.json.jbuilder @@ -42,3 +42,4 @@ json.timestamp conversation.last_activity_at.to_i json.first_reply_created_at conversation.first_reply_created_at.to_i json.unread_count conversation.unread_incoming_messages.count json.last_non_activity_message conversation.messages.non_activity_messages.first.try(:push_event_data) +json.priority conversation.priority diff --git a/public/assets/images/dashboard/priority/high.svg b/public/assets/images/dashboard/priority/high.svg new file mode 100644 index 000000000..9196db1b7 --- /dev/null +++ b/public/assets/images/dashboard/priority/high.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/images/dashboard/priority/low.svg b/public/assets/images/dashboard/priority/low.svg new file mode 100644 index 000000000..5b6d70a69 --- /dev/null +++ b/public/assets/images/dashboard/priority/low.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/images/dashboard/priority/medium.svg b/public/assets/images/dashboard/priority/medium.svg new file mode 100644 index 000000000..ffb17d44c --- /dev/null +++ b/public/assets/images/dashboard/priority/medium.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/images/dashboard/priority/none.svg b/public/assets/images/dashboard/priority/none.svg new file mode 100644 index 000000000..e215fda39 --- /dev/null +++ b/public/assets/images/dashboard/priority/none.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/images/dashboard/priority/urgent.svg b/public/assets/images/dashboard/priority/urgent.svg new file mode 100644 index 000000000..fc4f16b50 --- /dev/null +++ b/public/assets/images/dashboard/priority/urgent.svg @@ -0,0 +1,9 @@ + + + + + + + + +