Feature: Support file type messages on widget and dashboard (#659)

- Adds support for file upload

Co-authored-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>
Co-authored-by: Sojan <sojan@pepalo.com>

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

@@ -88,15 +88,16 @@ export const actions = {
   },
 
   sendAttachment: async ({ commit }, params) => {
-    const { attachment } = params;
-    const { thumbUrl } = attachment;
-    const attachmentBlob = {
+    const {
+      attachment: { thumbUrl, fileType },
+    } = params;
+    const attachment = {
       thumb_url: thumbUrl,
       data_url: thumbUrl,
-      file_type: 'image',
+      file_type: fileType,
       status: 'in_progress',
     };
-    const tempMessage = createTemporaryMessage({ attachment: attachmentBlob });
+    const tempMessage = createTemporaryMessage({ attachment });
     commit('pushMessageToConversation', tempMessage);
     try {
       const { data } = await sendAttachmentAPI(params);
@@ -158,8 +159,16 @@ export const mutations = {
 
     if (messageInConversation) {
       Vue.delete(messagesInbox, tempId);
-      const newMessage = { ...messageInConversation };
-      Vue.set(messagesInbox, id, { ...newMessage, id, status });
+      const { attachment } = messageInConversation;
+      if (attachment.file_type === 'file') {
+        attachment.data_url = message.attachment.data_url;
+      }
+      Vue.set(messagesInbox, id, {
+        ...messageInConversation,
+        attachment,
+        id,
+        status,
+      });
     }
   },
 

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

@@ -49,7 +49,7 @@ describe('#actions', () => {
       getUuid.mockImplementationOnce(() => '1111');
       const spy = jest.spyOn(global, 'Date').mockImplementation(() => mockDate);
       const thumbUrl = '';
-      const attachment = { thumbUrl };
+      const attachment = { thumbUrl, fileType: 'file' };
 
       actions.sendAttachment({ commit }, { attachment });
       spy.mockRestore();
@@ -62,7 +62,7 @@ describe('#actions', () => {
         attachment: {
           thumb_url: '',
           data_url: '',
-          file_type: 'image',
+          file_type: 'file',
           status: 'in_progress',
         },
       });

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

@@ -102,6 +102,10 @@ describe('#mutations', () => {
             id: 'rand_id_123',
             message_type: 0,
             status: 'in_progress',
+            attachment: {
+              file: '',
+              file_type: 'image',
+            },
           },
         },
       };
@@ -109,11 +113,24 @@ describe('#mutations', () => {
         id: '1',
         content: '',
         status: 'sent',
+        attachment: {
+          file: '',
+          file_type: 'image',
+        },
       };
       mutations.setMessageStatus(state, { message, tempId: 'rand_id_123' });
 
       expect(state.conversations).toEqual({
-        1: { id: '1', content: '', message_type: 0, status: 'sent' },
+        1: {
+          id: '1',
+          content: '',
+          message_type: 0,
+          status: 'sent',
+          attachment: {
+            file: '',
+            file_type: 'image',
+          },
+        },
       });
     });
   });