feat: Create a new conversation from the contact panel (#2019)

* Chore: Improve button component styles

app/javascript/dashboard/store/modules/contactConversations.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import * as types from '../mutation-types';
 import ContactAPI from '../../api/contacts';
+import ConversationApi from '../../api/conversations';
 
 const state = {
   records: {},
@@ -19,6 +20,30 @@ export const getters = {
 };
 
 export const actions = {
+  create: async ({ commit }, params) => {
+    commit(types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG, {
+      isCreating: true,
+    });
+    const { inboxId, message, contactId, sourceId } = params;
+    try {
+      const { data } = await ConversationApi.create({
+        inbox_id: inboxId,
+        contact_id: contactId,
+        source_id: sourceId,
+        message,
+      });
+      commit(types.default.ADD_CONTACT_CONVERSATION, {
+        id: contactId,
+        data,
+      });
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      commit(types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG, {
+        isCreating: false,
+      });
+    }
+  },
   get: async ({ commit }, contactId) => {
     commit(types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG, {
       isFetching: true,
@@ -53,6 +78,10 @@ export const mutations = {
   [types.default.SET_CONTACT_CONVERSATIONS]: ($state, { id, data }) => {
     Vue.set($state.records, id, data);
   },
+  [types.default.ADD_CONTACT_CONVERSATION]: ($state, { id, data }) => {
+    const conversations = $state.records[id] || [];
+    Vue.set($state.records, id, [...conversations, data]);
+  },
 };
 
 export default {

app/javascript/dashboard/store/modules/contacts/actions.js

@@ -83,6 +83,26 @@ export const actions = {
     }
   },
 
+  fetchContactableInbox: async ({ commit }, id) => {
+    commit(types.SET_CONTACT_UI_FLAG, { isFetchingInboxes: true });
+    try {
+      const response = await ContactAPI.getContactableInboxes(id);
+      const contact = {
+        id,
+        contactableInboxes: response.data.payload,
+      };
+      commit(types.SET_CONTACT_ITEM, contact);
+    } catch (error) {
+      if (error.response?.data?.message) {
+        throw new ExceptionWithMessage(error.response.data.message);
+      } else {
+        throw new Error(error);
+      }
+    } finally {
+      commit(types.SET_CONTACT_UI_FLAG, { isFetchingInboxes: false });
+    }
+  },
+
   updatePresence: ({ commit }, data) => {
     commit(types.UPDATE_CONTACTS_PRESENCE, data);
   },

app/javascript/dashboard/store/modules/contacts/index.js

@@ -11,6 +11,7 @@ const state = {
   uiFlags: {
     isFetching: false,
     isFetchingItem: false,
+    isFetchingInboxes: false,
     isUpdating: false,
   },
 };

app/javascript/dashboard/store/modules/inboxes.js

@@ -1,5 +1,6 @@
 import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 import * as types from '../mutation-types';
+import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
 import InboxesAPI from '../../api/inboxes';
 import WebChannel from '../../api/channel/webChannel';
 import FBChannel from '../../api/channel/fbChannel';
@@ -41,6 +42,20 @@ export const getters = {
   getInboxes($state) {
     return $state.records;
   },
+  getNewConversationInboxes($state) {
+    return $state.records.filter(inbox => {
+      const {
+        channel_type: channelType,
+        phone_number: phoneNumber = '',
+      } = inbox;
+
+      const isEmailChannel = channelType === INBOX_TYPES.EMAIL;
+      const isSmsChannel =
+        channelType === INBOX_TYPES.TWILIO &&
+        phoneNumber.startsWith('whatsapp');
+      return isEmailChannel || isSmsChannel;
+    });
+  },
   getInbox: $state => inboxId => {
     const [inbox] = $state.records.filter(
       record => record.id === Number(inboxId)

app/javascript/dashboard/store/modules/specs/contactConversations/actions.spec.js

@@ -38,4 +38,43 @@ describe('#actions', () => {
       ]);
     });
   });
+
+  describe('#create', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({ data: conversationList[0] });
+      await actions.create(
+        { commit },
+        { inboxId: 1, message: { content: 'hi' }, contactId: 4, sourceId: 5 }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG, { isCreating: true }],
+
+        [
+          types.default.ADD_CONTACT_CONVERSATION,
+          { id: 4, data: conversationList[0] },
+        ],
+        [
+          types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG,
+          { isCreating: false },
+        ],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+
+      await expect(
+        actions.create(
+          { commit },
+          { inboxId: 1, message: { content: 'hi' }, contactId: 4, sourceId: 5 }
+        )
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG, { isCreating: true }],
+        [
+          types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG,
+          { isCreating: false },
+        ],
+      ]);
+    });
+  });
 });

app/javascript/dashboard/store/modules/specs/contactConversations/mutations.spec.js

@@ -26,4 +26,17 @@ describe('#mutations', () => {
       });
     });
   });
+
+  describe('#ADD_CONTACT_CONVERSATION', () => {
+    it('Adds new contact conversation to records', () => {
+      const state = { records: {} };
+      mutations[types.default.ADD_CONTACT_CONVERSATION](state, {
+        id: 1,
+        data: { id: 1, contact_id: 1, message: 'hello' },
+      });
+      expect(state.records).toEqual({
+        1: [{ id: 1, contact_id: 1, message: 'hello' }],
+      });
+    });
+  });
 });