Feature: Send images from widget

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

@@ -1,6 +1,10 @@
 /* eslint-disable no-param-reassign */
 import Vue from 'vue';
-import { sendMessageAPI, getConversationAPI } from 'widget/api/conversation';
+import {
+  sendMessageAPI,
+  getConversationAPI,
+  sendAttachmentAPI,
+} from 'widget/api/conversation';
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import { playNotificationAudio } from 'shared/helpers/AudioNotificationHelper';
 import getUuid from '../../helpers/uuid';
@@ -8,11 +12,12 @@ import DateHelper from '../../../shared/helpers/DateHelper';
 
 const groupBy = require('lodash.groupby');
 
-export const createTemporaryMessage = content => {
+export const createTemporaryMessage = ({ attachment, content }) => {
   const timestamp = new Date().getTime() / 1000;
   return {
     id: getUuid(),
     content,
+    attachment,
     status: 'in_progress',
     created_at: timestamp,
     message_type: MESSAGE_TYPE.INCOMING,
@@ -78,10 +83,29 @@ export const getters = {
 export const actions = {
   sendMessage: async ({ commit }, params) => {
     const { content } = params;
-    commit('pushMessageToConversation', createTemporaryMessage(content));
+    commit('pushMessageToConversation', createTemporaryMessage({ content }));
     await sendMessageAPI(content);
   },
 
+  sendAttachment: async ({ commit }, params) => {
+    const { attachment } = params;
+    const { thumbUrl } = attachment;
+    const attachmentBlob = {
+      thumb_url: thumbUrl,
+      data_url: thumbUrl,
+      file_type: 'image',
+      status: 'in_progress',
+    };
+    const tempMessage = createTemporaryMessage({ attachment: attachmentBlob });
+    commit('pushMessageToConversation', tempMessage);
+    try {
+      const { data } = await sendAttachmentAPI(params);
+      commit('setMessageStatus', { message: data, tempId: tempMessage.id });
+    } catch (error) {
+      // Show error
+    }
+  },
+
   fetchOldConversations: async ({ commit }, { before } = {}) => {
     try {
       commit('setConversationListLoading', true);
@@ -126,6 +150,19 @@ export const mutations = {
     }
   },
 
+  setMessageStatus($state, { message, tempId }) {
+    const { status, id } = message;
+    const messagesInbox = $state.conversations;
+
+    const messageInConversation = messagesInbox[tempId];
+
+    if (messageInConversation) {
+      Vue.delete(messagesInbox, tempId);
+      const newMessage = { ...messageInConversation };
+      Vue.set(messagesInbox, id, { ...newMessage, id, status });
+    }
+  },
+
   setConversationListLoading($state, status) {
     $state.uiFlags.isFetchingList = status;
   },

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

@@ -42,4 +42,30 @@ describe('#actions', () => {
       });
     });
   });
+
+  describe('#sendAttachment', () => {
+    it('sends correct mutations', () => {
+      const mockDate = new Date(1466424490000);
+      getUuid.mockImplementationOnce(() => '1111');
+      const spy = jest.spyOn(global, 'Date').mockImplementation(() => mockDate);
+      const thumbUrl = '';
+      const attachment = { thumbUrl };
+
+      actions.sendAttachment({ commit }, { attachment });
+      spy.mockRestore();
+      expect(commit).toBeCalledWith('pushMessageToConversation', {
+        id: '1111',
+        content: undefined,
+        status: 'in_progress',
+        created_at: 1466424490,
+        message_type: 0,
+        attachment: {
+          thumb_url: '',
+          data_url: '',
+          file_type: 'image',
+          status: 'in_progress',
+        },
+      });
+    });
+  });
 });

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

@@ -92,4 +92,29 @@ describe('#mutations', () => {
       expect(state.uiFlags.allMessagesLoaded).toEqual(false);
     });
   });
+
+  describe('#setMessageStatus', () => {
+    it('Updates status of loading messages if payload is not empty', () => {
+      const state = {
+        conversations: {
+          rand_id_123: {
+            content: '',
+            id: 'rand_id_123',
+            message_type: 0,
+            status: 'in_progress',
+          },
+        },
+      };
+      const message = {
+        id: '1',
+        content: '',
+        status: 'sent',
+      };
+      mutations.setMessageStatus(state, { message, tempId: 'rand_id_123' });
+
+      expect(state.conversations).toEqual({
+        1: { id: '1', content: '', message_type: 0, status: 'sent' },
+      });
+    });
+  });
 });

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

@@ -30,7 +30,7 @@ describe('#findUndeliveredMessage', () => {
 
 describe('#createTemporaryMessage', () => {
   it('returns message object', () => {
-    const message = createTemporaryMessage('hello');
+    const message = createTemporaryMessage({ content: 'hello' });
     expect(message.content).toBe('hello');
     expect(message.status).toBe('in_progress');
   });