fix: Hide deleted messages on widget side (#2614)

app/javascript/widget/store/modules/conversation/actions.js

@@ -8,7 +8,7 @@ import {
 } from 'widget/api/conversation';
 import { refreshActionCableConnector } from '../../../helpers/actionCable';
 
-import { createTemporaryMessage } from './helpers';
+import { createTemporaryMessage, getNonDeletedMessages } from './helpers';
 
 export const actions = {
   createConversation: async ({ commit, dispatch }, params) => {
@@ -60,12 +60,12 @@ export const actions = {
       // Show error
     }
   },
-
   fetchOldConversations: async ({ commit }, { before } = {}) => {
     try {
       commit('setConversationListLoading', true);
       const { data } = await getMessagesAPI({ before });
-      commit('setMessagesInConversation', data);
+      const formattedMessages = getNonDeletedMessages({ messages: data });
+      commit('setMessagesInConversation', formattedMessages);
       commit('setConversationListLoading', false);
     } catch (error) {
       commit('setConversationListLoading', false);
@@ -76,11 +76,12 @@ export const actions = {
     commit('clearConversations');
   },
 
-  addMessage: async ({ commit }, data) => {
-    commit('pushMessageToConversation', data);
-  },
-
-  updateMessage({ commit }, data) {
+  addOrUpdateMessage: async ({ commit }, data) => {
+    const { id, content_attributes } = data;
+    if (content_attributes && content_attributes.deleted) {
+      commit('deleteMessage', id);
+      return;
+    }
     commit('pushMessageToConversation', data);
   },
 

app/javascript/widget/store/modules/conversation/helpers.js

@@ -46,3 +46,9 @@ export const findUndeliveredMessage = (messageInbox, { content }) =>
   Object.values(messageInbox).filter(
     message => message.content === content && message.status === 'in_progress'
   );
+
+export const getNonDeletedMessages = ({ messages }) => {
+  return messages.filter(
+    item => !(item.content_attributes && item.content_attributes.deleted)
+  );
+};

app/javascript/widget/store/modules/conversation/mutations.js

@@ -8,6 +8,7 @@ export const mutations = {
   },
   pushMessageToConversation($state, message) {
     const { id, status, message_type: type } = message;
+
     const messagesInbox = $state.conversations;
     const isMessageIncoming = type === MESSAGE_TYPE.INCOMING;
     const isTemporaryMessage = status === 'in_progress';
@@ -71,6 +72,11 @@ export const mutations = {
     };
   },
 
+  deleteMessage($state, id) {
+    const messagesInbox = $state.conversations;
+    Vue.delete(messagesInbox, id);
+  },
+
   toggleAgentTypingStatus($state, { status }) {
     const isTyping = status === 'on';
     $state.uiFlags.isAgentTyping = isTyping;