Feature: Customise widget for bot conversations (#834)

* Feature: Customise widget for bot conversations

app/javascript/widget/store/index.js

@@ -4,6 +4,7 @@ import agent from 'widget/store/modules/agent';
 import appConfig from 'widget/store/modules/appConfig';
 import contacts from 'widget/store/modules/contacts';
 import conversation from 'widget/store/modules/conversation';
+import conversationAttributes from 'widget/store/modules/conversationAttributes';
 import conversationLabels from 'widget/store/modules/conversationLabels';
 import events from 'widget/store/modules/events';
 import message from 'widget/store/modules/message';
@@ -16,6 +17,7 @@ export default new Vuex.Store({
     appConfig,
     contacts,
     conversation,
+    conversationAttributes,
     conversationLabels,
     events,
     message,

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

@@ -2,7 +2,7 @@
 import Vue from 'vue';
 import {
   sendMessageAPI,
-  getConversationAPI,
+  getMessagesAPI,
   sendAttachmentAPI,
   toggleTyping,
 } from 'widget/api/conversation';
@@ -116,7 +116,7 @@ export const actions = {
   fetchOldConversations: async ({ commit }, { before } = {}) => {
     try {
       commit('setConversationListLoading', true);
-      const { data } = await getConversationAPI({ before });
+      const { data } = await getMessagesAPI({ before });
       commit('setMessagesInConversation', data);
       commit('setConversationListLoading', false);
     } catch (error) {

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

@@ -0,0 +1,49 @@
+import {
+  SET_CONVERSATION_ATTRIBUTES,
+  UPDATE_CONVERSATION_ATTRIBUTES,
+} from '../types';
+import { getConversationAPI } from '../../api/conversation';
+
+const state = {
+  id: '',
+  status: '',
+};
+
+export const getters = {
+  getConversationParams: $state => $state,
+};
+
+export const actions = {
+  get: async ({ commit }) => {
+    try {
+      const { data } = await getConversationAPI();
+      commit(SET_CONVERSATION_ATTRIBUTES, data);
+    } catch (error) {
+      // Ignore error
+    }
+  },
+  update({ commit }, data) {
+    commit(UPDATE_CONVERSATION_ATTRIBUTES, data);
+  },
+};
+
+export const mutations = {
+  [SET_CONVERSATION_ATTRIBUTES]($state, data) {
+    $state.id = data.id;
+    $state.status = data.status;
+  },
+  [UPDATE_CONVERSATION_ATTRIBUTES]($state, data) {
+    if (data.id === $state.id) {
+      $state.id = data.id;
+      $state.status = data.status;
+    }
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

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

@@ -0,0 +1,32 @@
+import { actions } from '../../conversationAttributes';
+import { API } from 'widget/helpers/axios';
+
+const commit = jest.fn();
+jest.mock('widget/helpers/axios');
+
+describe('#actions', () => {
+  describe('#update', () => {
+    it('sends mutation if api is success', async () => {
+      API.get.mockResolvedValue({ data: { id: 1, status: 'bot' } });
+      await actions.get({ commit });
+      expect(commit.mock.calls).toEqual([
+        ['SET_CONVERSATION_ATTRIBUTES', { id: 1, status: 'bot' }],
+      ]);
+    });
+    it('doesnot send mutation if api is error', async () => {
+      API.get.mockRejectedValue({ message: 'Invalid Headers' });
+      await actions.get({ commit });
+      expect(commit.mock.calls).toEqual([]);
+    });
+  });
+
+  describe('#update', () => {
+    it('sends correct mutations', () => {
+      actions.update({ commit }, { id: 1, status: 'bot' });
+      expect(commit).toBeCalledWith('UPDATE_CONVERSATION_ATTRIBUTES', {
+        id: 1,
+        status: 'bot',
+      });
+    });
+  });
+});

app/javascript/widget/store/modules/specs/conversationAttributes/getters.spec.js

@@ -0,0 +1,14 @@
+import { getters } from '../../conversationAttributes';
+
+describe('#getters', () => {
+  it('getConversationParams', () => {
+    const state = {
+      id: 1,
+      status: 'bot',
+    };
+    expect(getters.getConversationParams(state)).toEqual({
+      id: 1,
+      status: 'bot',
+    });
+  });
+});

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

@@ -0,0 +1,33 @@
+import { mutations } from '../../conversationAttributes';
+
+describe('#mutations', () => {
+  describe('#SET_CONVERSATION_ATTRIBUTES', () => {
+    it('set status of the conversation', () => {
+      const state = { id: '', status: '' };
+      mutations.SET_CONVERSATION_ATTRIBUTES(state, {
+        id: 1,
+        status: 'open',
+      });
+      expect(state).toEqual({ id: 1, status: 'open' });
+    });
+  });
+
+  describe('#UPDATE_CONVERSATION_ATTRIBUTES', () => {
+    it('update status if it is same conversation', () => {
+      const state = { id: 1, status: 'bot' };
+      mutations.UPDATE_CONVERSATION_ATTRIBUTES(state, {
+        id: 1,
+        status: 'open',
+      });
+      expect(state).toEqual({ id: 1, status: 'open' });
+    });
+    it('doesnot update status if it is not the same conversation', () => {
+      const state = { id: 1, status: 'bot' };
+      mutations.UPDATE_CONVERSATION_ATTRIBUTES(state, {
+        id: 2,
+        status: 'open',
+      });
+      expect(state).toEqual({ id: 1, status: 'bot' });
+    });
+  });
+});

app/javascript/widget/store/types.js

@@ -1 +1,3 @@
 export const SET_WIDGET_COLOR = 'SET_WIDGET_COLOR';
+export const SET_CONVERSATION_ATTRIBUTES = 'SET_CONVERSATION_ATTRIBUTES';
+export const UPDATE_CONVERSATION_ATTRIBUTES = 'UPDATE_CONVERSATION_ATTRIBUTES';