Feature: As an end-user, I should be able to see the list of agents in the widget. (#461)

Co-authored-by: Pranav Raj S <pranavrajs@gmail.com>

app/javascript/widget/store/modules/agent.js

@@ -0,0 +1,50 @@
+import Vue from 'vue';
+import { getAvailableAgents } from 'widget/api/agent';
+
+const state = {
+  records: [],
+  uiFlags: {
+    isError: false,
+    hasFetched: false,
+  },
+};
+
+export const getters = {
+  availableAgents: $state =>
+    $state.records.filter(agent => agent.availability_status === 'online'),
+};
+
+export const actions = {
+  fetchAvailableAgents: async ({ commit }, websiteToken) => {
+    try {
+      const { data } = await getAvailableAgents(websiteToken);
+      const { payload = [] } = data;
+      commit('setAgents', payload);
+      commit('setError', false);
+      commit('setHasFetched', true);
+    } catch (error) {
+      commit('setError', true);
+      commit('setHasFetched', true);
+    }
+  },
+};
+
+export const mutations = {
+  setAgents($state, data) {
+    Vue.set($state, 'records', data);
+  },
+  setError($state, value) {
+    Vue.set($state.uiFlags, 'isError', value);
+  },
+  setHasFetched($state, value) {
+    Vue.set($state.uiFlags, 'hasFetched', value);
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

app/javascript/widget/store/modules/specs/agent/actions.spec.js

@@ -0,0 +1,28 @@
+import { API } from 'widget/helpers/axios';
+import { actions } from '../../agent';
+import { agents } from './data';
+
+const commit = jest.fn();
+jest.mock('widget/helpers/axios');
+
+describe('#actions', () => {
+  describe('#fetchAvailableAgents', () => {
+    it('sends correct actions if API is success', async () => {
+      API.get.mockResolvedValue({ data: { payload: agents } });
+      await actions.fetchAvailableAgents({ commit }, 'Hi');
+      expect(commit.mock.calls).toEqual([
+        ['setAgents', agents],
+        ['setError', false],
+        ['setHasFetched', true],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      API.get.mockRejectedValue({ message: 'Authentication required' });
+      await actions.fetchAvailableAgents({ commit }, 'Hi');
+      expect(commit.mock.calls).toEqual([
+        ['setError', true],
+        ['setHasFetched', true],
+      ]);
+    });
+  });
+});

app/javascript/widget/store/modules/specs/agent/data.js

@@ -0,0 +1,26 @@
+export const agents = [
+  {
+    id: 1,
+    name: 'John',
+    avatar_url: '',
+    availability_status: 'online',
+  },
+  {
+    id: 2,
+    name: 'Xavier',
+    avatar_url: '',
+    availability_status: 'offline',
+  },
+  {
+    id: 3,
+    name: 'Pranav',
+    avatar_url: '',
+    availability_status: 'online',
+  },
+  {
+    id: 4,
+    name: 'Nithin',
+    avatar_url: '',
+    availability_status: 'online',
+  },
+];

app/javascript/widget/store/modules/specs/agent/getters.spec.js

@@ -0,0 +1,30 @@
+import { getters } from '../../agent';
+import { agents } from './data';
+
+describe('#getters', () => {
+  it('availableAgents', () => {
+    const state = {
+      records: agents,
+    };
+    expect(getters.availableAgents(state)).toEqual([
+      {
+        id: 1,
+        name: 'John',
+        avatar_url: '',
+        availability_status: 'online',
+      },
+      {
+        id: 3,
+        name: 'Pranav',
+        avatar_url: '',
+        availability_status: 'online',
+      },
+      {
+        id: 4,
+        name: 'Nithin',
+        avatar_url: '',
+        availability_status: 'online',
+      },
+    ]);
+  });
+});

app/javascript/widget/store/modules/specs/agent/mutations.spec.js

@@ -0,0 +1,28 @@
+import { mutations } from '../../agent';
+import agents from './data';
+
+describe('#mutations', () => {
+  describe('#setAgents', () => {
+    it('set agent records', () => {
+      const state = { records: [] };
+      mutations.setAgents(state, agents);
+      expect(state.records).toEqual(agents);
+    });
+  });
+
+  describe('#setError', () => {
+    it('set error flag', () => {
+      const state = { records: [], uiFlags: {} };
+      mutations.setError(state, true);
+      expect(state.uiFlags.isError).toEqual(true);
+    });
+  });
+
+  describe('#setError', () => {
+    it('set fetched flag', () => {
+      const state = { records: [], uiFlags: {} };
+      mutations.setHasFetched(state, true);
+      expect(state.uiFlags.hasFetched).toEqual(true);
+    });
+  });
+});