feat: Add CSAT reports (#2608)

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

@@ -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

@@ -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

@@ -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

@@ -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,
+      });
+    });
+  });
+});