Feature: Ability to mute contacts (#891)

fixes: #867

app/javascript/dashboard/api/inbox/conversation.js

@@ -39,6 +39,10 @@ class ConversationApi extends ApiClient {
       typing_status: status,
     });
   }
+
+  mute(conversationId) {
+    return axios.post(`${this.url}/${conversationId}/mute`);
+  }
 }
 
 export default new ConversationApi();

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

@@ -15,6 +15,7 @@
       "UPDATE_ERROR": "Couldn't update labels, try again.",
       "TAG_PLACEHOLDER": "Add new label",
       "PLACEHOLDER": "Search or add a label"
-    }
+    },
+    "MUTE_CONTACT": "Mute Contact"
   }
 }

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

@@ -90,10 +90,14 @@
         icon="ion-clock"
       />
     </div>
+    <a v-show="!currentChat.muted" class="contact--mute" @click="mute">
+      {{ $t('CONTACT_PANEL.MUTE_CONTACT') }}
+    </a>
   </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import ContactConversations from './ContactConversations.vue';
 import ContactDetailsItem from './ContactDetailsItem.vue';
@@ -117,6 +121,9 @@ export default {
     },
   },
   computed: {
+    ...mapGetters({
+      currentChat: 'getSelectedChat',
+    }),
     currentConversationMetaData() {
       return this.$store.getters[
         'conversationMetadata/getConversationMetadata'
@@ -166,6 +173,9 @@ export default {
     onPanelToggle() {
       this.onToggle();
     },
+    mute() {
+      this.$store.dispatch('muteConversation', this.conversationId);
+    },
   },
 };
 </script>
@@ -248,4 +258,10 @@ export default {
     padding: 0.2rem;
   }
 }
+
+.contact--mute {
+  color: $alert-color;
+  display: block;
+  text-align: center;
+}
 </style>

app/javascript/dashboard/store/modules/conversations/actions.js

@@ -215,6 +215,15 @@ const actions = {
       // Handle error
     }
   },
+
+  muteConversation: async ({ commit }, conversationId) => {
+    try {
+      await ConversationApi.mute(conversationId);
+      commit(types.default.MUTE_CONVERSATION);
+    } catch (error) {
+      //
+    }
+  },
 };
 
 export default actions;

app/javascript/dashboard/store/modules/conversations/index.js

@@ -10,6 +10,7 @@ const initialSelectedChat = {
   id: null,
   meta: {},
   status: null,
+  muted: false,
   seen: false,
   agentTyping: 'off',
   dataFetched: false,
@@ -116,6 +117,12 @@ const mutations = {
     _state.selectedChat.status = status;
   },
 
+  [types.default.MUTE_CONVERSATION](_state) {
+    const [chat] = getSelectedChatConversation(_state);
+    chat.muted = true;
+    _state.selectedChat.muted = true;
+  },
+
   [types.default.SEND_MESSAGE](_state, currentMessage) {
     const [chat] = getSelectedChatConversation(_state);
     const allMessagesExceptCurrent = (chat.messages || []).filter(

app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js

@@ -21,4 +21,16 @@ describe('#actions', () => {
       expect(commit.mock.calls).toEqual([]);
     });
   });
+  describe('#muteConversation', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue(null);
+      await actions.muteConversation({ commit }, 1);
+      expect(commit.mock.calls).toEqual([[types.default.MUTE_CONVERSATION]]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.getConversation({ commit });
+      expect(commit.mock.calls).toEqual([]);
+    });
+  });
 });

app/javascript/dashboard/store/mutation-types.js

@@ -22,6 +22,7 @@ export default {
   RESOLVE_CONVERSATION: 'RESOLVE_CONVERSATION',
   ADD_CONVERSATION: 'ADD_CONVERSATION',
   UPDATE_CONVERSATION: 'UPDATE_CONVERSATION',
+  MUTE_CONVERSATION: 'MUTE_CONVERSATION',
   SEND_MESSAGE: 'SEND_MESSAGE',
   ASSIGN_AGENT: 'ASSIGN_AGENT',
   SET_CHAT_META: 'SET_CHAT_META',