akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: Add CSAT reports (#2608)

Browse Source
This commit is contained in:
Pranav Raj S
2021-07-14 10:20:06 +05:30
committed by GitHub
parent b7806fc210
commit cb44eb2964
34 changed files with 1120 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/store/index.js
+16 -14
View File
@@ -4,11 +4,12 @@ import Vuex from 'vuex';
import accounts from './modules/accounts';
import agents from './modules/agents';
import auth from './modules/auth';
import campaigns from './modules/campaigns';
import cannedResponse from './modules/cannedResponse';
import contactConversations from './modules/contactConversations';
import contacts from './modules/contacts';
import contactLabels from './modules/contactLabels';
import notifications from './modules/notifications';
import contactNotes from './modules/contactNotes';
import contacts from './modules/contacts';
import conversationLabels from './modules/conversationLabels';
import conversationMetadata from './modules/conversationMetadata';
import conversationPage from './modules/conversationPage';
@@ -16,19 +17,19 @@ import conversations from './modules/conversations';
import conversationSearch from './modules/conversationSearch';
import conversationStats from './modules/conversationStats';
import conversationTypingStatus from './modules/conversationTypingStatus';
import csat from './modules/csat';
import globalConfig from 'shared/store/globalConfig';
import inboxAssignableAgents from './modules/inboxAssignableAgents';
import inboxes from './modules/inboxes';
import inboxMembers from './modules/inboxMembers';
import inboxAssignableAgents from './modules/inboxAssignableAgents';
import integrations from './modules/integrations';
import labels from './modules/labels';
import notifications from './modules/notifications';
import reports from './modules/reports';
import teamMembers from './modules/teamMembers';
import teams from './modules/teams';
import userNotificationSettings from './modules/userNotificationSettings';
import webhooks from './modules/webhooks';
import teams from './modules/teams';
import teamMembers from './modules/teamMembers';
import campaigns from './modules/campaigns';
import contactNotes from './modules/contactNotes';
Vue.use(Vuex);
export default new Vuex.Store({
@@ -36,11 +37,12 @@ export default new Vuex.Store({
accounts,
agents,
auth,
campaigns,
cannedResponse,
contactConversations,
contacts,
contactLabels,
notifications,
contactNotes,
contacts,
conversationLabels,
conversationMetadata,
conversationPage,
@@ -48,18 +50,18 @@ export default new Vuex.Store({
conversationSearch,
conversationStats,
conversationTypingStatus,
csat,
globalConfig,
inboxAssignableAgents,
inboxes,
inboxMembers,
inboxAssignableAgents,
integrations,
labels,
notifications,
reports,
teamMembers,
teams,
userNotificationSettings,
webhooks,
teams,
teamMembers,
campaigns,
contactNotes,
},
});
app/javascript/dashboard/store/modules/csat.js
+144
View File
@@ -0,0 +1,144 @@
import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
import types from '../mutation-types';
import CSATReports from '../../api/csatReports';
const computeDistribution = (value, total) =>
((value * 100) / total).toFixed(2);
export const state = {
records: [],
metrics: {
totalResponseCount: 0,
ratingsCount: {
1: 0,
2: 0,
3: 0,
4: 0,
5: 0,
},
totalSentMessagesCount: 0,
},
uiFlags: {
isFetching: false,
isFetchingMetrics: false,
},
};
export const getters = {
getCSATResponses(_state) {
return _state.records;
},
getMetrics(_state) {
return _state.metrics;
},
getUIFlags(_state) {
return _state.uiFlags;
},
getSatisfactionScore(_state) {
if (!_state.metrics.totalResponseCount) {
return 0;
}
return computeDistribution(
_state.metrics.ratingsCount[4] + _state.metrics.ratingsCount[5],
_state.metrics.totalResponseCount
);
},
getResponseRate(_state) {
if (!_state.metrics.totalSentMessagesCount) {
return 0;
}
return computeDistribution(
_state.metrics.totalResponseCount,
_state.metrics.totalSentMessagesCount
);
},
getRatingPercentage(_state) {
if (!_state.metrics.totalResponseCount) {
return { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 };
}
return {
1: computeDistribution(
_state.metrics.ratingsCount[1],
_state.metrics.totalResponseCount
),
2: computeDistribution(
_state.metrics.ratingsCount[2],
_state.metrics.totalResponseCount
),
3: computeDistribution(
_state.metrics.ratingsCount[3],
_state.metrics.totalResponseCount
),
4: computeDistribution(
_state.metrics.ratingsCount[4],
_state.metrics.totalResponseCount
),
5: computeDistribution(
_state.metrics.ratingsCount[5],
_state.metrics.totalResponseCount
),
};
},
};
export const actions = {
get: async function getResponses({ commit }, { page = 1 } = {}) {
commit(types.SET_CSAT_RESPONSE_UI_FLAG, { isFetching: true });
try {
const response = await CSATReports.get({ page });
commit(types.SET_CSAT_RESPONSE, response.data);
} catch (error) {
// Ignore error
} finally {
commit(types.SET_CSAT_RESPONSE_UI_FLAG, { isFetching: false });
}
},
getMetrics: async function getMetrics({ commit }) {
commit(types.SET_CSAT_RESPONSE_UI_FLAG, { isFetchingMetrics: true });
try {
const response = await CSATReports.getMetrics();
commit(types.SET_CSAT_RESPONSE_METRICS, response.data);
} catch (error) {
// Ignore error
} finally {
commit(types.SET_CSAT_RESPONSE_UI_FLAG, { isFetchingMetrics: false });
}
},
};
export const mutations = {
[types.SET_CSAT_RESPONSE_UI_FLAG](_state, data) {
_state.uiFlags = {
..._state.uiFlags,
...data,
};
},
[types.SET_CSAT_RESPONSE]: MutationHelpers.set,
[types.SET_CSAT_RESPONSE_METRICS](
_state,
{
total_count: totalResponseCount,
ratings_count: ratingsCount,
total_sent_messages_count: totalSentMessagesCount,
}
) {
_state.metrics.totalResponseCount = totalResponseCount || 0;
_state.metrics.ratingsCount = {
1: ratingsCount['1'] || 0,
2: ratingsCount['2'] || 0,
3: ratingsCount['3'] || 0,
4: ratingsCount['4'] || 0,
5: ratingsCount['5'] || 0,
};
_state.metrics.totalSentMessagesCount = totalSentMessagesCount || 0;
},
};
export default {
namespaced: true,
state,
getters,
actions,
mutations,
};
app/javascript/dashboard/store/modules/specs/csat/actions.spec.js
+64
View File
@@ -0,0 +1,64 @@
import axios from 'axios';
import { actions } from '../../csat';
import types from '../../../mutation-types';
const commit = jest.fn();
global.axios = axios;
jest.mock('axios');
describe('#actions', () => {
describe('#get', () => {
it('sends correct mutations if API is success', async () => {
axios.get.mockResolvedValue({
data: [{ id: 1, rating: 1, feedback_text: 'Bad' }],
});
await actions.get({ commit }, { page: 1 });
expect(commit.mock.calls).toEqual([
[types.SET_CSAT_RESPONSE_UI_FLAG, { isFetching: true }],
[types.SET_CSAT_RESPONSE, [{ id: 1, rating: 1, feedback_text: 'Bad' }]],
[types.SET_CSAT_RESPONSE_UI_FLAG, { isFetching: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.get.mockRejectedValue({ message: 'Incorrect header' });
await actions.get({ commit }, { page: 1 });
expect(commit.mock.calls).toEqual([
[types.SET_CSAT_RESPONSE_UI_FLAG, { isFetching: true }],
[types.SET_CSAT_RESPONSE_UI_FLAG, { isFetching: false }],
]);
});
});
describe('#getMetrics', () => {
it('sends correct mutations if API is success', async () => {
axios.get.mockResolvedValue({
data: {
total_count: 29,
ratings_count: { 1: 10, 2: 10, 3: 3, 4: 3, 5: 3 },
total_sent_messages_count: 120,
},
});
await actions.getMetrics({ commit }, { page: 1 });
expect(commit.mock.calls).toEqual([
[types.SET_CSAT_RESPONSE_UI_FLAG, { isFetchingMetrics: true }],
[
types.SET_CSAT_RESPONSE_METRICS,
{
total_count: 29,
ratings_count: { 1: 10, 2: 10, 3: 3, 4: 3, 5: 3 },
total_sent_messages_count: 120,
},
],
[types.SET_CSAT_RESPONSE_UI_FLAG, { isFetchingMetrics: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.get.mockRejectedValue({ message: 'Incorrect header' });
await actions.getMetrics({ commit }, { page: 1 });
expect(commit.mock.calls).toEqual([
[types.SET_CSAT_RESPONSE_UI_FLAG, { isFetchingMetrics: true }],
[types.SET_CSAT_RESPONSE_UI_FLAG, { isFetchingMetrics: false }],
]);
});
});
});
app/javascript/dashboard/store/modules/specs/csat/getters.spec.js
+89
View File
@@ -0,0 +1,89 @@
import { getters } from '../../csat';
describe('#getters', () => {
it('getUIFlags', () => {
const state = { uiFlags: { isFetching: false } };
expect(getters.getUIFlags(state)).toEqual({ isFetching: false });
});
it('getCSATResponses', () => {
const state = { records: [{ id: 1, raring: 1, feedback_text: 'Bad' }] };
expect(getters.getCSATResponses(state)).toEqual([
{ id: 1, raring: 1, feedback_text: 'Bad' },
]);
});
it('getMetrics', () => {
const state = {
metrics: {
totalResponseCount: 0,
ratingsCount: { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 },
},
};
expect(getters.getMetrics(state)).toEqual(state.metrics);
});
it('getRatingPercentage', () => {
let state = {
metrics: {
totalResponseCount: 0,
ratingsCount: { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 },
},
};
expect(getters.getRatingPercentage(state)).toEqual({
1: 0,
2: 0,
3: 0,
4: 0,
5: 0,
});
state = {
metrics: {
totalResponseCount: 50,
ratingsCount: { 1: 10, 2: 20, 3: 15, 4: 3, 5: 2 },
},
};
expect(getters.getRatingPercentage(state)).toEqual({
1: '20.00',
2: '40.00',
3: '30.00',
4: '6.00',
5: '4.00',
});
});
it('getResponseRate', () => {
expect(
getters.getResponseRate({
metrics: { totalResponseCount: 0, totalSentMessagesCount: 0 },
})
).toEqual(0);
expect(
getters.getResponseRate({
metrics: { totalResponseCount: 20, totalSentMessagesCount: 50 },
})
).toEqual('40.00');
});
it('getSatisfactionScore', () => {
expect(
getters.getSatisfactionScore({
metrics: {
totalResponseCount: 0,
ratingsCount: { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 },
},
})
).toEqual(0);
expect(
getters.getSatisfactionScore({
metrics: {
totalResponseCount: 54,
ratingsCount: { 1: 0, 2: 0, 3: 0, 4: 12, 5: 15 },
},
})
).toEqual('50.00');
});
});
app/javascript/dashboard/store/modules/specs/csat/mutations.spec.js
+52
View File
@@ -0,0 +1,52 @@
import types from '../../../mutation-types';
import { mutations } from '../../csat';
describe('#mutations', () => {
describe('#SET_CSAT_RESPONSE_UI_FLAG', () => {
it('set uiFlags correctly', () => {
const state = { uiFlags: { isFetching: true } };
mutations[types.SET_CSAT_RESPONSE_UI_FLAG](state, { isFetching: false });
expect(state.uiFlags).toEqual({ isFetching: false });
});
});
describe('#SET_CSAT_RESPONSE', () => {
it('set records correctly', () => {
const state = { records: [] };
mutations[types.SET_CSAT_RESPONSE](state, [
{ id: 1, rating: 1, feedback_text: 'Bad' },
]);
expect(state.records).toEqual([
{ id: 1, rating: 1, feedback_text: 'Bad' },
]);
});
});
describe('#SET_CSAT_RESPONSE_METRICS', () => {
it('set metrics correctly', () => {
const state = { metrics: {} };
mutations[types.SET_CSAT_RESPONSE_METRICS](state, {
total_count: 29,
ratings_count: { 1: 10, 2: 10, 3: 3, 4: 3, 5: 3 },
total_sent_messages_count: 120,
});
expect(state.metrics).toEqual({
totalResponseCount: 29,
ratingsCount: { 1: 10, 2: 10, 3: 3, 4: 3, 5: 3 },
totalSentMessagesCount: 120,
});
});
it('set ratingsCount correctly', () => {
const state = { metrics: {} };
mutations[types.SET_CSAT_RESPONSE_METRICS](state, {
ratings_count: { 1: 5 },
});
expect(state.metrics).toEqual({
totalResponseCount: 0,
ratingsCount: { 1: 5, 2: 0, 3: 0, 4: 0, 5: 0 },
totalSentMessagesCount: 0,
});
});
});
});
app/javascript/dashboard/store/mutation-types.js
+5
View File
@@ -167,4 +167,9 @@ export default {
ADD_CONTACT_NOTE: 'ADD_CONTACT_NOTE',
EDIT_CONTACT_NOTE: 'EDIT_CONTACT_NOTE',
DELETE_CONTACT_NOTE: 'DELETE_CONTACT_NOTE',
// CSAT Responses
SET_CSAT_RESPONSE_UI_FLAG: 'SET_CSAT_RESPONSE_UI_FLAG',
SET_CSAT_RESPONSE: 'SET_CSAT_RESPONSE',
SET_CSAT_RESPONSE_METRICS: 'SET_CSAT_RESPONSE_METRICS',
};