Add an intermediate pending state for widget messages (#323)

* Add an intermediate pending state for widget messages

* Remove unnecessary setTimeout

* Rename method

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

@@ -1,6 +1,24 @@
 /* eslint-disable no-param-reassign */
 import Vue from 'vue';
 import { sendMessageAPI, getConversationAPI } from 'widget/api/conversation';
+import { MESSAGE_TYPE } from 'widget/helpers/constants';
+import getUuid from '../../helpers/uuid';
+
+export const createTemporaryMessage = content => {
+  const timestamp = new Date().getTime();
+  return {
+    id: getUuid(),
+    content,
+    status: 'in_progress',
+    created_at: timestamp,
+    message_type: MESSAGE_TYPE.INCOMING,
+  };
+};
+
+export const findUndeliveredMessage = (messageInbox, { content }) =>
+  Object.values(messageInbox).filter(
+    message => message.content === content && message.status === 'in_progress'
+  );
 
 export const DEFAULT_CONVERSATION = 'default';
 const state = {
@@ -13,8 +31,9 @@ const getters = {
 };
 
 const actions = {
-  sendMessage: async (_, params) => {
+  sendMessage: async ({ commit }, params) => {
     const { content } = params;
+    commit('pushMessageToConversations', createTemporaryMessage(content));
     await sendMessageAPI(content);
   },
 
@@ -38,9 +57,27 @@ const mutations = {
   },
 
   pushMessageToConversations($state, message) {
-    const { id } = message;
+    const { id, status, message_type: type } = message;
     const messagesInbox = $state.conversations;
-    Vue.set(messagesInbox, id, message);
+    const isMessageIncoming = type === MESSAGE_TYPE.INCOMING;
+    const isTemporaryMessage = status === 'in_progress';
+
+    if (!isMessageIncoming || isTemporaryMessage) {
+      Vue.set(messagesInbox, id, message);
+      return;
+    }
+
+    const [messageInConversation] = findUndeliveredMessage(
+      messagesInbox,
+      message
+    );
+
+    if (!messageInConversation) {
+      Vue.set(messagesInbox, id, message);
+    } else {
+      Vue.delete(messagesInbox, messageInConversation.id);
+      Vue.set(messagesInbox, id, message);
+    }
   },
 
   initMessagesInConversation(_state, payload) {

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

@@ -0,0 +1,37 @@
+import {
+  findUndeliveredMessage,
+  createTemporaryMessage,
+} from '../conversation';
+
+describe('#findUndeliveredMessage', () => {
+  it('returns message objects if exist', () => {
+    const conversation = {
+      1: {
+        id: 1,
+        content: 'Hello',
+        status: 'in_progress',
+      },
+      2: {
+        id: 2,
+        content: 'Hello',
+        status: 'sent',
+      },
+      3: {
+        id: 3,
+        content: 'How may I help you',
+        status: 'sent',
+      },
+    };
+    expect(
+      findUndeliveredMessage(conversation, { content: 'Hello' })
+    ).toStrictEqual([{ id: 1, content: 'Hello', status: 'in_progress' }]);
+  });
+});
+
+describe('#createTemporaryMessage', () => {
+  it('returns message object', () => {
+    const message = createTemporaryMessage('hello');
+    expect(message.content).toBe('hello');
+    expect(message.status).toBe('in_progress');
+  });
+});