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;

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

@@ -8,21 +8,6 @@ jest.mock('widget/helpers/axios');
 const commit = jest.fn();
 
 describe('#actions', () => {
-  describe('#addMessage', () => {
-    it('sends correct mutations', () => {
-      actions.addMessage({ commit }, { id: 1 });
-      expect(commit).toBeCalledWith('pushMessageToConversation', { id: 1 });
-    });
-
-    it('plays audio when agent sends a message', () => {
-      actions.addMessage({ commit }, { id: 1, message_type: 1 });
-      expect(commit).toBeCalledWith('pushMessageToConversation', {
-        id: 1,
-        message_type: 1,
-      });
-    });
-  });
-
   describe('#createConversation', () => {
     it('sends correct mutations', async () => {
       API.post.mockResolvedValue({
@@ -60,10 +45,40 @@ describe('#actions', () => {
     });
   });
 
-  describe('#updateMessage', () => {
-    it('sends correct mutations', () => {
-      actions.updateMessage({ commit }, { id: 1 });
-      expect(commit).toBeCalledWith('pushMessageToConversation', { id: 1 });
+  describe('#addOrUpdateMessage', () => {
+    it('sends correct actions for non-deleted message', () => {
+      actions.addOrUpdateMessage(
+        { commit },
+        {
+          id: 1,
+          content: 'Hey',
+          content_attributes: {},
+        }
+      );
+      expect(commit).toBeCalledWith('pushMessageToConversation', {
+        id: 1,
+        content: 'Hey',
+        content_attributes: {},
+      });
+    });
+    it('sends correct actions for non-deleted message', () => {
+      actions.addOrUpdateMessage(
+        { commit },
+        {
+          id: 1,
+          content: 'Hey',
+          content_attributes: { deleted: true },
+        }
+      );
+      expect(commit).toBeCalledWith('deleteMessage', 1);
+    });
+
+    it('plays audio when agent sends a message', () => {
+      actions.addOrUpdateMessage({ commit }, { id: 1, message_type: 1 });
+      expect(commit).toBeCalledWith('pushMessageToConversation', {
+        id: 1,
+        message_type: 1,
+      });
     });
   });
 
@@ -160,4 +175,38 @@ describe('#actions', () => {
       expect(commit).toBeCalledWith('clearConversations');
     });
   });
+
+  describe('#fetchOldConversations', () => {
+    it('sends correct actions', async () => {
+      API.get.mockResolvedValue({
+        data: [
+          {
+            id: 1,
+            text: 'hey',
+            content_attributes: {},
+          },
+          {
+            id: 2,
+            text: 'welcome',
+            content_attributes: { deleted: true },
+          },
+        ],
+      });
+      await actions.fetchOldConversations({ commit }, {});
+      expect(commit.mock.calls).toEqual([
+        ['setConversationListLoading', true],
+        [
+          'setMessagesInConversation',
+          [
+            {
+              id: 1,
+              text: 'hey',
+              content_attributes: {},
+            },
+          ],
+        ],
+        ['setConversationListLoading', false],
+      ]);
+    });
+  });
 });

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

@@ -1,6 +1,7 @@
 import {
   findUndeliveredMessage,
   createTemporaryMessage,
+  getNonDeletedMessages,
 } from '../../conversation/helpers';
 
 describe('#findUndeliveredMessage', () => {
@@ -35,3 +36,37 @@ describe('#createTemporaryMessage', () => {
     expect(message.status).toBe('in_progress');
   });
 });
+
+describe('#getNonDeletedMessages', () => {
+  it('returns non-deleted messages', () => {
+    const messages = [
+      {
+        id: 1,
+        content: 'Hello',
+        content_attributes: {},
+      },
+      {
+        id: 2,
+        content: 'Hey',
+        content_attributes: { deleted: true },
+      },
+      {
+        id: 3,
+        content: 'How may I help you',
+        content_attributes: {},
+      },
+    ];
+    expect(getNonDeletedMessages({ messages })).toStrictEqual([
+      {
+        id: 1,
+        content: 'Hello',
+        content_attributes: {},
+      },
+      {
+        id: 3,
+        content: 'How may I help you',
+        content_attributes: {},
+      },
+    ]);
+  });
+});

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

@@ -175,4 +175,12 @@ describe('#mutations', () => {
       expect(state.conversations).toEqual({});
     });
   });
+
+  describe('#deleteMessage', () => {
+    it('delete the message from conversation', () => {
+      const state = { conversations: { 1: { id: 1 } } };
+      mutations.deleteMessage(state, 1);
+      expect(state.conversations).toEqual({});
+    });
+  });
 });