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

Feature: View a contact's previous conversation (#422)

Browse Source 
* Add API to fetch conversations of a contact

* Add conversation list in sidebar
This commit is contained in:
Pranav Raj S
2020-01-13 11:17:03 +05:30
committed by Sojan Jose
parent fc6a8c2601
commit 655c585358
19 changed files with 491 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/dashboard/api/contacts.js
View File

@@ -1,9 +1,14 @@
/* global axios */
import ApiClient from './ApiClient';
class ContactAPI extends ApiClient {
constructor() {
super('contacts');
}
getConversations(contactId) {
return axios.get(`${this.url}/${contactId}/conversations`);
}
}
export default new ContactAPI();

14
app/javascript/dashboard/api/specs/contacts.spec.js Normal file
View File

@@ -0,0 +1,14 @@
import agents from '../contacts';
import ApiClient from '../ApiClient';
describe('#ContactsAPI', () => {
it('creates correct instance', () => {
expect(agents).toBeInstanceOf(ApiClient);
expect(agents).toHaveProperty('get');
expect(agents).toHaveProperty('show');
expect(agents).toHaveProperty('create');
expect(agents).toHaveProperty('update');
expect(agents).toHaveProperty('delete');
expect(agents).toHaveProperty('getConversations');
});
});

9
app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
View File

@@ -41,6 +41,7 @@
color: $color-body;
width: 27rem;
white-space: nowrap;
max-width: 96%;
}
.conversation--meta {
@@ -91,4 +92,12 @@
font-weight: $font-weight-medium;
}
}
&.compact {
padding-left: 0;
.conversation--details {
margin-left: 0;
}
}
}

11
app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
View File

@@ -5,6 +5,7 @@
@click="cardClick(chat)"
>
<Thumbnail
v-if="!hideThumbnail"
:src="chat.meta.sender.thumbnail"
:badge="chat.meta.sender.channel"
class="columns"
@@ -15,7 +16,7 @@
<h4 class="conversation--user">
{{ chat.meta.sender.name }}
<span
v-if="isInboxNameVisible"
v-if="!hideInboxName && isInboxNameVisible"
v-tooltip.bottom="inboxName(chat.inbox_id)"
class="label"
>
@@ -58,6 +59,14 @@ export default {
type: Object,
default: () => {},
},
hideInboxName: {
type: Boolean,
default: false,
},
hideThumbnail: {
type: Boolean,
default: false,
},
},
computed: {

6
app/javascript/dashboard/i18n/locale/en/contact.json
View File

@@ -3,6 +3,10 @@
"BROWSER": "Browser",
"OS": "Operating System",
"INITIATED_FROM": "Initiated from",
"INITIATED_AT": "Initiated at"
"INITIATED_AT": "Initiated at",
"CONVERSATIONS": {
"NO_RECORDS_FOUND": "There are no previous conversations associated to this contact.",
"TITLE": "Previous Conversations"
}
}
}

88
app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue Normal file
View File

@@ -0,0 +1,88 @@
<template>
<div class="contact-conversation--panel">
<contact-details-item
icon="ion-chatbubbles"
:title="$t('CONTACT_PANEL.CONVERSATIONS.TITLE')"
/>
<div v-if="!uiFlags.isFetching">
<i v-if="!previousConversations.length">
{{ $t('CONTACT_PANEL.CONVERSATIONS.NO_RECORDS_FOUND') }}
</i>
<div v-else class="contact-conversation--list">
<conversation-card
v-for="conversation in previousConversations"
:key="conversation.id"
:chat="conversation"
:hide-inbox-name="true"
:hide-thumbnail="true"
class="compact"
/>
</div>
</div>
<spinner v-else></spinner>
</div>
</template>
<script>
import ConversationCard from 'dashboard/components/widgets/conversation/ConversationCard.vue';
import { mapGetters } from 'vuex';
import Spinner from 'shared/components/Spinner.vue';
import ContactDetailsItem from './ContactDetailsItem.vue';
export default {
components: {
ConversationCard,
ContactDetailsItem,
Spinner,
},
props: {
contactId: {
type: [String, Number],
required: true,
},
conversationId: {
type: [String, Number],
required: true,
},
},
computed: {
conversations() {
return this.$store.getters['contactConversations/getContactConversation'](
this.contactId
);
},
previousConversations() {
return this.conversations.filter(
conversation => conversation.id !== Number(this.conversationId)
);
},
...mapGetters({
uiFlags: 'contactConversations/getUIFlags',
}),
},
watch: {
contactId(newContactId, prevContactId) {
if (newContactId && newContactId !== prevContactId) {
this.$store.dispatch('contactConversations/get', newContactId);
}
},
},
mounted() {
this.$store.dispatch('contactConversations/get', this.contactId);
},
};
</script>
<style lang="scss" scoped>
@import '~dashboard/assets/scss/variables';
@import '~dashboard/assets/scss/mixins';
.contact-conversation--panel {
@include border-normal-top;
padding: $space-medium;
}
.contact-conversation--list {
margin-top: -$space-normal;
}
</style>

2
app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
View File

@@ -4,7 +4,7 @@
<i :class="icon" class="conv-details--item__icon"></i>
{{ title }}
</div>
<div class="conv-details--item__value">
<div v-if="value" class="conv-details--item__value">
{{ value }}
</div>
</div>

9
app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
View File

@@ -54,15 +54,22 @@
icon="ion-clock"
/>
</div>
<contact-conversations
v-if="contact.id"
:contact-id="contact.id"
:conversation-id="conversationId"
/>
</div>
</template>
<script>
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
import ContactDetailsItem from './ContactDetailsItem.vue';
import ContactConversations from './ContactConversations.vue';
export default {
components: {
ContactConversations,
ContactDetailsItem,
Thumbnail,
},
@@ -179,7 +186,7 @@ export default {
}
.conversation--details {
padding: $space-normal $space-medium;
padding: $space-medium;
width: 100%;
}

2
app/javascript/dashboard/store/index.js
View File

@@ -7,6 +7,7 @@ import billing from './modules/billing';
import cannedResponse from './modules/cannedResponse';
import Channel from './modules/channels';
import contacts from './modules/contacts';
import contactConversations from './modules/contactConversations';
import conversationMetadata from './modules/conversationMetadata';
import conversations from './modules/conversations';
import inboxes from './modules/inboxes';
@@ -22,6 +23,7 @@ export default new Vuex.Store({
cannedResponse,
Channel,
contacts,
contactConversations,
conversationMetadata,
conversations,
inboxes,

64
app/javascript/dashboard/store/modules/contactConversations.js Normal file
View File

@@ -0,0 +1,64 @@
import Vue from 'vue';
import * as types from '../mutation-types';
import ContactAPI from '../../api/contacts';
const state = {
records: {},
uiFlags: {
isFetching: false,
},
};
export const getters = {
getUIFlags($state) {
return $state.uiFlags;
},
getContactConversation: $state => id => {
return $state.records[Number(id)] || [];
},
};
export const actions = {
get: async ({ commit }, contactId) => {
commit(types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG, {
isFetching: true,
});
try {
const response = await ContactAPI.getConversations(contactId);
commit(types.default.SET_CONTACT_CONVERSATIONS, {
id: contactId,
data: response.data.payload,
});
commit(types.default.SET_ALL_CONVERSATION, response.data.payload, {
root: true,
});
commit(types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG, {
isFetching: false,
});
} catch (error) {
commit(types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG, {
isFetching: false,
});
}
},
};
export const mutations = {
[types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG]($state, data) {
$state.uiFlags = {
...$state.uiFlags,
...data,
};
},
[types.default.SET_CONTACT_CONVERSATIONS]: ($state, { id, data }) => {
Vue.set($state.records, id, data);
},
};
export default {
namespaced: true,
state,
getters,
actions,
mutations,
};

41
app/javascript/dashboard/store/modules/specs/contactConversations/actions.spec.js Normal file
View File

@@ -0,0 +1,41 @@
import axios from 'axios';
import { actions } from '../../contactConversations';
import * as types from '../../../mutation-types';
import conversationList 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: conversationList } });
await actions.get({ commit }, 1);
expect(commit.mock.calls).toEqual([
[types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG, { isFetching: true }],
[
types.default.SET_CONTACT_CONVERSATIONS,
{ id: 1, data: conversationList },
],
[types.default.SET_ALL_CONVERSATION, conversationList, { root: true }],
[
types.default.SET_CONTACT_CONVERSATIONS_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_CONVERSATIONS_UI_FLAG, { isFetching: true }],
[
types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG,
{ isFetching: false },
],
]);
});
});
});

82
app/javascript/dashboard/store/modules/specs/contactConversations/fixtures.js Normal file
View File

@@ -0,0 +1,82 @@
export default [
{
meta: {
sender: {
id: 1,
name: 'sender1',
thumbnail: '',
channel: 'Channel::WebWidget',
},
assignee: null,
},
id: 1,
messages: [
{
id: 1,
content: 'Hello',
account_id: 1,
inbox_id: 1,
conversation_id: 1,
message_type: 1,
created_at: 1578555084,
updated_at: '2020-01-09T07:31:24.419Z',
private: false,
user_id: 1,
status: 'sent',
fb_id: null,
content_type: 'text',
content_attributes: {},
sender: {
name: 'Sender 1',
avatar_url: 'random_url',
},
},
],
inbox_id: 1,
status: 0,
timestamp: 1578555084,
user_last_seen_at: 0,
agent_last_seen_at: 1578555084,
unread_count: 0,
},
{
meta: {
sender: {
id: 2,
name: 'sender1',
thumbnail: '',
channel: 'Channel::WebWidget',
},
assignee: null,
},
id: 2,
messages: [
{
id: 2,
content: 'Hello',
account_id: 1,
inbox_id: 2,
conversation_id: 2,
message_type: 1,
created_at: 1578555084,
updated_at: '2020-01-09T07:31:24.419Z',
private: false,
user_id: 2,
status: 'sent',
fb_id: null,
content_type: 'text',
content_attributes: {},
sender: {
name: 'Sender 1',
avatar_url: 'random_url',
},
},
],
inbox_id: 2,
status: 0,
timestamp: 1578555084,
user_last_seen_at: 0,
agent_last_seen_at: 1578555084,
unread_count: 0,
},
];

23
app/javascript/dashboard/store/modules/specs/contactConversations/getters.spec.js Normal file
View File

@@ -0,0 +1,23 @@
import { getters } from '../../contactConversations';
describe('#getters', () => {
it('getContactConversation', () => {
const state = {
records: { 1: [{ id: 1, contact_id: 1, message: 'Hello' }] },
};
expect(getters.getContactConversation(state)(1)).toEqual([
{ id: 1, contact_id: 1, message: 'Hello' },
]);
});
it('getUIFlags', () => {
const state = {
uiFlags: {
isFetching: true,
},
};
expect(getters.getUIFlags(state)).toEqual({
isFetching: true,
});
});
});

29
app/javascript/dashboard/store/modules/specs/contactConversations/mutations.spec.js Normal file
View File

@@ -0,0 +1,29 @@
import * as types from '../../../mutation-types';
import { mutations } from '../../contactConversations';
describe('#mutations', () => {
describe('#SET_CONTACT_CONVERSATIONS_UI_FLAG', () => {
it('set ui flags', () => {
const state = { uiFlags: { isFetching: true } };
mutations[types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG](state, {
isFetching: false,
});
expect(state.uiFlags).toEqual({
isFetching: false,
});
});
});
describe('#SET_CONTACT_CONVERSATIONS', () => {
it('set contact conversation records', () => {
const state = { records: {} };
mutations[types.default.SET_CONTACT_CONVERSATIONS](state, {
id: 1,
data: [{ id: 1, contact_id: 1, message: 'hello' }],
});
expect(state.records).toEqual({
1: [{ id: 1, contact_id: 1, message: 'hello' }],
});
});
});
});

4
app/javascript/dashboard/store/mutation-types.js
View File

@@ -62,6 +62,10 @@ export default {
SET_CONTACTS: 'SET_CONTACTS',
EDIT_CONTACT: 'EDIT_CONTACT',
// Contact Conversation
SET_CONTACT_CONVERSATIONS_UI_FLAG: 'SET_CONTACT_CONVERSATIONS_UI_FLAG',
SET_CONTACT_CONVERSATIONS: 'SET_CONTACT_CONVERSATIONS',
// Reports
SET_ACCOUNT_REPORTS: 'SET_ACCOUNT_REPORTS',
SET_ACCOUNT_SUMMARY: 'SET_ACCOUNT_SUMMARY',