-
diff --git a/app/javascript/widget/store/modules/conversation.js b/app/javascript/widget/store/modules/conversation.js
index 47ed94656..09d172ab9 100755
--- a/app/javascript/widget/store/modules/conversation.js
+++ b/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;
},
diff --git a/app/javascript/widget/store/modules/specs/conversation/actions.spec.js b/app/javascript/widget/store/modules/specs/conversation/actions.spec.js
index 1482d276c..c2f8c9a90 100644
--- a/app/javascript/widget/store/modules/specs/conversation/actions.spec.js
+++ b/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',
+ },
+ });
+ });
+ });
});
diff --git a/app/javascript/widget/store/modules/specs/conversation/mutations.spec.js b/app/javascript/widget/store/modules/specs/conversation/mutations.spec.js
index b465ac92e..4c3c7ae18 100644
--- a/app/javascript/widget/store/modules/specs/conversation/mutations.spec.js
+++ b/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' },
+ });
+ });
+ });
});
diff --git a/app/javascript/widget/store/modules/specs/conversation/utils.spec.js b/app/javascript/widget/store/modules/specs/conversation/utils.spec.js
index f7843de5c..1a09f3f64 100644
--- a/app/javascript/widget/store/modules/specs/conversation/utils.spec.js
+++ b/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');
});
diff --git a/app/javascript/widget/views/Home.vue b/app/javascript/widget/views/Home.vue
index 20d86fdd7..c523a1c6c 100755
--- a/app/javascript/widget/views/Home.vue
+++ b/app/javascript/widget/views/Home.vue
@@ -8,7 +8,7 @@
@@ -16,7 +16,7 @@