feat: show ReplyTo in widget UI (#8094)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

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

@@ -28,18 +28,17 @@ export const actions = {
     }
   },
   sendMessage: async ({ dispatch }, params) => {
-    const { content } = params;
-    const message = createTemporaryMessage({ content });
-
+    const { content, replyTo } = params;
+    const message = createTemporaryMessage({ content, replyTo });
     dispatch('sendMessageWithData', message);
   },
   sendMessageWithData: async ({ commit }, message) => {
-    const { id, content, meta = {} } = message;
+    const { id, content, replyTo, meta = {} } = message;
 
     commit('pushMessageToConversation', message);
     commit('updateMessageMeta', { id, meta: { ...meta, error: '' } });
     try {
-      const { data } = await sendMessageAPI(content);
+      const { data } = await sendMessageAPI(content, replyTo);
 
       commit('deleteMessage', message.id);
       commit('pushMessageToConversation', { ...data, status: 'sent' });
@@ -69,6 +68,7 @@ export const actions = {
     };
     const tempMessage = createTemporaryMessage({
       attachments: [attachment],
+      replyTo: params.replyTo,
     });
     commit('pushMessageToConversation', tempMessage);
     try {

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

@@ -2,13 +2,14 @@ import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
 
 import getUuid from '../../../helpers/uuid';
-export const createTemporaryMessage = ({ attachments, content }) => {
+export const createTemporaryMessage = ({ attachments, content, replyTo }) => {
   const timestamp = new Date().getTime() / 1000;
   return {
     id: getUuid(),
     content,
     attachments,
     status: 'in_progress',
+    replyTo,
     created_at: timestamp,
     message_type: MESSAGE_TYPE.INCOMING,
   };

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

@@ -110,7 +110,10 @@ describe('#actions', () => {
           search: '?param=1',
         },
       }));
-      await actions.sendMessage({ commit, dispatch }, { content: 'hello' });
+      await actions.sendMessage(
+        { commit, dispatch },
+        { content: 'hello', replyTo: 124 }
+      );
       spy.mockRestore();
       windowSpy.mockRestore();
       expect(dispatch).toBeCalledWith('sendMessageWithData', {
@@ -119,6 +122,7 @@ describe('#actions', () => {
         created_at: 1466424490,
         id: '1111',
         message_type: 0,
+        replyTo: 124,
         status: 'in_progress',
       });
     });
@@ -132,7 +136,10 @@ describe('#actions', () => {
       const thumbUrl = '';
       const attachment = { thumbUrl, fileType: 'file' };
 
-      actions.sendAttachment({ commit, dispatch }, { attachment });
+      actions.sendAttachment(
+        { commit, dispatch },
+        { attachment, replyTo: 135 }
+      );
       spy.mockRestore();
       expect(commit).toBeCalledWith('pushMessageToConversation', {
         id: '1111',
@@ -140,6 +147,7 @@ describe('#actions', () => {
         status: 'in_progress',
         created_at: 1466424490,
         message_type: 0,
+        replyTo: 135,
         attachments: [
           {
             thumb_url: '',

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

@@ -35,6 +35,15 @@ describe('#createTemporaryMessage', () => {
     expect(message.content).toBe('hello');
     expect(message.status).toBe('in_progress');
   });
+  it('returns message object with reply to', () => {
+    const message = createTemporaryMessage({
+      content: 'hello',
+      replyTo: 124,
+    });
+    expect(message.content).toBe('hello');
+    expect(message.status).toBe('in_progress');
+    expect(message.replyTo).toBe(124);
+  });
 });
 
 describe('#getNonDeletedMessages', () => {