Bugfix: Use server timestamp to set agent_last_seen_at (#1114)

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

@@ -29,10 +29,8 @@ class ConversationApi extends ApiClient {
     );
   }
 
-  markMessageRead({ id, lastSeen }) {
-    return axios.post(`${this.url}/${id}/update_last_seen`, {
-      agent_last_seen_at: lastSeen,
-    });
+  markMessageRead({ id }) {
+    return axios.post(`${this.url}/${id}/update_last_seen`);
   }
 
   toggleTyping({ conversationId, status }) {

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -218,12 +218,7 @@ export default {
     },
 
     makeMessagesRead() {
-      if (this.getUnreadCount !== 0 && this.getMessages !== undefined) {
-        this.$store.dispatch('markMessagesRead', {
-          id: this.currentChat.id,
-          lastSeen: this.getMessages.messages.last().created_at,
-        });
-      }
+      this.$store.dispatch('markMessagesRead', { id: this.currentChat.id });
     },
   },
 };

app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue

@@ -106,6 +106,9 @@ export default {
       this.isEditing = false;
     },
     async fetchLabels(conversationId) {
+      if (!conversationId) {
+        return;
+      }
       this.$store.dispatch('conversationLabels/get', conversationId);
     },
   },

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

@@ -170,11 +170,18 @@ const actions = {
   },
 
   markMessagesRead: async ({ commit }, data) => {
-    setTimeout(() => {
-      commit(types.default.MARK_MESSAGE_READ, data);
-    }, 4000);
     try {
-      await ConversationApi.markMessageRead(data);
+      const {
+        data: { id, agent_last_seen_at: lastSeen },
+      } = await ConversationApi.markMessageRead(data);
+      setTimeout(
+        () =>
+          commit(types.default.MARK_MESSAGE_READ, {
+            id,
+            lastSeen,
+          }),
+        4000
+      );
     } catch (error) {
       // Handle error
     }

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

@@ -134,7 +134,9 @@ export const mutations = {
 
   [types.default.MARK_MESSAGE_READ](_state, { id, lastSeen }) {
     const [chat] = _state.allConversations.filter(c => c.id === id);
-    chat.agent_last_seen_at = lastSeen;
+    if (chat) {
+      chat.agent_last_seen_at = lastSeen;
+    }
   },
 
   [types.default.CHANGE_CHAT_STATUS_FILTER](_state, data) {

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

@@ -153,4 +153,28 @@ describe('#actions', () => {
       expect(commit.mock.calls).toEqual([[types.default.ADD_MESSAGE, message]]);
     });
   });
+
+  describe('#markMessagesRead', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+
+    it('sends correct mutations if api is successful', async () => {
+      const lastSeen = new Date().getTime() / 1000;
+      axios.post.mockResolvedValue({
+        data: { id: 1, agent_last_seen_at: lastSeen },
+      });
+      await actions.markMessagesRead({ commit }, { id: 1 });
+      jest.runAllTimers();
+      expect(commit).toHaveBeenCalledTimes(1);
+      expect(commit.mock.calls).toEqual([
+        [types.default.MARK_MESSAGE_READ, { id: 1, lastSeen }],
+      ]);
+    });
+    it('sends correct mutations if api is unsuccessful', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.markMessagesRead({ commit }, { id: 1 });
+      expect(commit.mock.calls).toEqual([]);
+    });
+  });
 });

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

@@ -20,6 +20,13 @@ describe('#mutations', () => {
         { id: 1, agent_last_seen_at: lastSeen },
       ]);
     });
+
+    it('doesnot send any mutation if chat doesnot exist', () => {
+      const state = { allConversations: [] };
+      const lastSeen = new Date().getTime() / 1000;
+      mutations[types.MARK_MESSAGE_READ](state, { id: 1, lastSeen });
+      expect(state.allConversations).toEqual([]);
+    });
   });
 
   describe('#CLEAR_CURRENT_CHAT_WINDOW', () => {