LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Feature: Contact Panel with conversation details (#397)

Browse Source 
* Add Contact panel changes

* Fix parent iframe blocked

* Add Conversation Panel, Contact messages

* Update contact panel with conversation details

* Update designs in sidebar

* Fix specs

* Specs: Add specs for conversationMetadata and contact modules

* Fix currentUrl issues

* Fix spelling

* Set default to empty string
This commit is contained in:
Pranav Raj S
2020-01-01 22:30:43 +05:30
committed by Sojan Jose
parent 434d6c2656
commit 439e064d90
28 changed files with 662 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
app/javascript/dashboard/store/modules/contacts.js Normal file
View File

@@ -0,0 +1,85 @@
/* eslint no-param-reassign: 0 */
import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
import * as types from '../mutation-types';
import ContactAPI from '../../api/contacts';
const state = {
records: [],
uiFlags: {
isFetching: false,
isFetchingItem: false,
isUpdating: false,
},
};
export const getters = {
getContacts($state) {
return $state.records;
},
getUIFlags($state) {
return $state.uiFlags;
},
getContact: $state => id => {
const [contact = {}] = $state.records.filter(
record => record.id === Number(id)
);
return contact;
},
};
export const actions = {
get: async ({ commit }) => {
commit(types.default.SET_CONTACT_UI_FLAG, { isFetching: true });
try {
const response = await ContactAPI.get();
commit(types.default.SET_CONTACTS, response.data.payload);
commit(types.default.SET_CONTACT_UI_FLAG, { isFetching: false });
} catch (error) {
commit(types.default.SET_CONTACT_UI_FLAG, { isFetching: false });
}
},
show: async ({ commit }, { id }) => {
commit(types.default.SET_CONTACT_UI_FLAG, { isFetchingItem: true });
try {
const response = await ContactAPI.show(id);
commit(types.default.SET_CONTACT_ITEM, response.data.payload);
commit(types.default.SET_CONTACT_UI_FLAG, { isFetchingItem: false });
} catch (error) {
commit(types.default.SET_CONTACT_UI_FLAG, { isFetchingItem: false });
}
},
update: async ({ commit }, { id, ...updateObj }) => {
commit(types.default.SET_CONTACT_UI_FLAG, { isUpdating: true });
try {
const response = await ContactAPI.update(id, updateObj);
commit(types.default.EDIT_CONTACT, response.data.payload);
commit(types.default.SET_CONTACT_UI_FLAG, { isUpdating: false });
} catch (error) {
commit(types.default.SET_CONTACT_UI_FLAG, { isUpdating: false });
throw new Error(error);
}
},
};
export const mutations = {
[types.default.SET_CONTACT_UI_FLAG]($state, data) {
$state.uiFlags = {
...$state.uiFlags,
...data,
};
},
[types.default.SET_CONTACTS]: MutationHelpers.set,
[types.default.SET_CONTACT_ITEM]: MutationHelpers.setSingleRecord,
[types.default.EDIT_CONTACT]: MutationHelpers.update,
};
export default {
namespaced: true,
state,
getters,
actions,
mutations,
};

28
app/javascript/dashboard/store/modules/conversationMetadata.js Normal file
View File

@@ -0,0 +1,28 @@
import Vue from 'vue';
import * as types from '../mutation-types';
const state = {
records: {},
};
export const getters = {
getConversationMetadata: $state => id => {
return $state.records[Number(id)] || {};
},
};
export const actions = {};
export const mutations = {
[types.default.SET_CONVERSATION_METADATA]: ($state, { id, data }) => {
Vue.set($state.records, id, data);
},
};
export default {
namespaced: true,
state,
getters,
actions,
mutations,
};

15
app/javascript/dashboard/store/modules/conversations/actions.js
View File

@@ -31,12 +31,21 @@ const actions = {
fetchPreviousMessages: async ({ commit }, data) => {
try {
const response = await MessageApi.getPreviousMessages(data);
const {
data: { meta, payload },
} = await MessageApi.getPreviousMessages(data);
commit(
`conversationMetadata/${types.default.SET_CONVERSATION_METADATA}`,
{
id: data.conversationId,
data: meta,
}
);
commit(types.default.SET_PREVIOUS_CONVERSATIONS, {
id: data.conversationId,
data: response.data.payload,
data: payload,
});
if (response.data.payload.length < 20) {
if (payload.length < 20) {
commit(types.default.SET_ALL_MESSAGES_LOADED);
}
} catch (error) {

1
app/javascript/dashboard/store/modules/conversations/index.js
View File

@@ -60,7 +60,6 @@ const mutations = {
const [chat] = getSelectedChatConversation(_state);
Vue.set(chat, 'allMessagesLoaded', false);
},
[types.default.CLEAR_CURRENT_CHAT_WINDOW](_state) {
_state.selectedChat.id = null;
_state.selectedChat.agentTyping = 'off';

4
app/javascript/dashboard/store/modules/specs/agents/mutations.spec.js
View File

@@ -36,7 +36,7 @@ describe('#mutations', () => {
});
describe('#EDIT_AGENT', () => {
it('sets allMessagesLoaded flag if payload is empty', () => {
it('update agent record', () => {
const state = {
records: [{ id: 1, name: 'Agent1', email: 'agent1@chatwoot.com' }],
};
@@ -52,7 +52,7 @@ describe('#mutations', () => {
});
describe('#DELETE_AGENT', () => {
it('sets allMessagesLoaded flag if payload is empty', () => {
it('delete agent record', () => {
const state = {
records: [{ id: 1, name: 'Agent1', email: 'agent1@chatwoot.com' }],
};

72
app/javascript/dashboard/store/modules/specs/contacts/actions.spec.js Normal file
View File

@@ -0,0 +1,72 @@
import axios from 'axios';
import { actions } from '../../contacts';
import * as types from '../../../mutation-types';
import contactList from './fixtures';
const commit = jest.fn();
global.axios = axios;
jest.mock('axios');
describe('#actions', () => {
describe('#get', () => {
it('sends correct actions if API is success', async () => {
axios.get.mockResolvedValue({ data: { payload: contactList } });
await actions.get({ commit });
expect(commit.mock.calls).toEqual([
[types.default.SET_CONTACT_UI_FLAG, { isFetching: true }],
[types.default.SET_CONTACTS, contactList],
[types.default.SET_CONTACT_UI_FLAG, { isFetching: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.get.mockRejectedValue({ message: 'Incorrect header' });
await actions.get({ commit });
expect(commit.mock.calls).toEqual([
[types.default.SET_CONTACT_UI_FLAG, { isFetching: true }],
[types.default.SET_CONTACT_UI_FLAG, { isFetching: false }],
]);
});
});
describe('#show', () => {
it('sends correct actions if API is success', async () => {
axios.get.mockResolvedValue({ data: { payload: contactList[0] } });
await actions.show({ commit }, { id: contactList[0].id });
expect(commit.mock.calls).toEqual([
[types.default.SET_CONTACT_UI_FLAG, { isFetchingItem: true }],
[types.default.SET_CONTACT_ITEM, contactList[0]],
[types.default.SET_CONTACT_UI_FLAG, { isFetchingItem: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.get.mockRejectedValue({ message: 'Incorrect header' });
await actions.show({ commit }, { id: contactList[0].id });
expect(commit.mock.calls).toEqual([
[types.default.SET_CONTACT_UI_FLAG, { isFetchingItem: true }],
[types.default.SET_CONTACT_UI_FLAG, { isFetchingItem: false }],
]);
});
});
describe('#update', () => {
it('sends correct actions if API is success', async () => {
axios.patch.mockResolvedValue({ data: { payload: contactList[0] } });
await actions.update({ commit }, contactList[0]);
expect(commit.mock.calls).toEqual([
[types.default.SET_CONTACT_UI_FLAG, { isUpdating: true }],
[types.default.EDIT_CONTACT, contactList[0]],
[types.default.SET_CONTACT_UI_FLAG, { isUpdating: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.patch.mockRejectedValue({ message: 'Incorrect header' });
await expect(actions.update({ commit }, contactList[0])).rejects.toThrow(
Error
);
expect(commit.mock.calls).toEqual([
[types.default.SET_CONTACT_UI_FLAG, { isUpdating: true }],
[types.default.SET_CONTACT_UI_FLAG, { isUpdating: false }],
]);
});
});
});

30
app/javascript/dashboard/store/modules/specs/contacts/fixtures.js Normal file
View File

@@ -0,0 +1,30 @@
export default [
{
id: 1,
name: 'Contact 1',
email: 'contact1@chatwoot.com',
phone_number: '9000000001',
thumbnail: 'contact1.png',
},
{
id: 2,
name: 'Contact 2',
email: 'contact2@chatwoot.com',
phone_number: '9000000002',
thumbnail: 'contact2.png',
},
{
id: 3,
name: 'Contact 3',
email: 'contact3@chatwoot.com',
phone_number: '9000000003',
thumbnail: 'contact3.png',
},
{
id: 4,
name: 'Contact 4',
email: 'contact4@chatwoot.com',
phone_number: '9000000004',
thumbnail: 'contact4.png',
},
];

33
app/javascript/dashboard/store/modules/specs/contacts/getters.spec.js Normal file
View File

@@ -0,0 +1,33 @@
import { getters } from '../../contacts';
import contactList from './fixtures';
describe('#getters', () => {
it('getContacts', () => {
const state = {
records: contactList,
};
expect(getters.getContacts(state)).toEqual(contactList);
});
it('getContact', () => {
const state = {
records: contactList,
};
expect(getters.getContact(state)(2)).toEqual(contactList[1]);
});
it('getUIFlags', () => {
const state = {
uiFlags: {
isFetching: true,
isFetchingItem: true,
isUpdating: false,
},
};
expect(getters.getUIFlags(state)).toEqual({
isFetching: true,
isFetchingItem: true,
isUpdating: false,
});
});
});

53
app/javascript/dashboard/store/modules/specs/contacts/mutations.spec.js Normal file
View File

@@ -0,0 +1,53 @@
import * as types from '../../../mutation-types';
import { mutations } from '../../contacts';
describe('#mutations', () => {
describe('#SET_CONTACTS', () => {
it('set contact records', () => {
const state = { records: [] };
mutations[types.default.SET_CONTACTS](state, [
{ id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
]);
expect(state.records).toEqual([
{
id: 1,
name: 'contact1',
email: 'contact1@chatwoot.com',
},
]);
});
});
describe('#SET_CONTACT_ITEM', () => {
it('push contact data to the store', () => {
const state = {
records: [{ id: 1, name: 'contact1', email: 'contact1@chatwoot.com' }],
};
mutations[types.default.SET_CONTACT_ITEM](state, {
id: 2,
name: 'contact2',
email: 'contact2@chatwoot.com',
});
expect(state.records).toEqual([
{ id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
{ id: 2, name: 'contact2', email: 'contact2@chatwoot.com' },
]);
});
});
describe('#EDIT_CONTACT', () => {
it('update contact', () => {
const state = {
records: [{ id: 1, name: 'contact1', email: 'contact1@chatwoot.com' }],
};
mutations[types.default.EDIT_CONTACT](state, {
id: 1,
name: 'contact2',
email: 'contact2@chatwoot.com',
});
expect(state.records).toEqual([
{ id: 1, name: 'contact2', email: 'contact2@chatwoot.com' },
]);
});
});
});

16
app/javascript/dashboard/store/modules/specs/conversationMetadata/getters.spec.js Normal file
View File

@@ -0,0 +1,16 @@
import { getters } from '../../conversationMetadata';
describe('#getters', () => {
it('getConversationMetadata', () => {
const state = {
records: {
1: {
browser: { name: 'Chrome' },
},
},
};
expect(getters.getConversationMetadata(state)(1)).toEqual({
browser: { name: 'Chrome' },
});
});
});

17
app/javascript/dashboard/store/modules/specs/conversationMetadata/mutations.spec.js Normal file
View File

@@ -0,0 +1,17 @@
import * as types from '../../../mutation-types';
import { mutations } from '../../conversationMetadata';
describe('#mutations', () => {
describe('#SET_INBOXES', () => {
it('set inbox records', () => {
const state = { records: {} };
mutations[types.default.SET_CONVERSATION_METADATA](state, {
id: 1,
data: { browser: { name: 'Chrome' } },
});
expect(state.records).toEqual({
1: { browser: { name: 'Chrome' } },
});
});
});
});