[Refactor] Cleanup agent store and actions (#373)

* Cleanup agent store and actions * Move set/create/update/destroy to helpers * Update mutation specs * Add specs for API helper * Fix edit/delete action visibility * Add actions specs * Remove unused API helpers * Remove duplicates * Remove duplicates * Fix duplicate
2019-12-21 22:54:35 +05:30 · 2019-12-21 22:54:35 +05:30 · 2ce7438c79
commit 2ce7438c79
parent a92e3817f8
26 changed files with 613 additions and 576 deletions
--- a/app/javascript/dashboard/api/account.js
+++ b/app/javascript/dashboard/api/account.js
@ -1,142 +1,32 @@
-/* eslint no-console: 0 */
 /* global axios */
-/* eslint no-undef: "error" */
-/* eslint no-unused-expressions: ["error", { "allowShortCircuit": true }] */
 import endPoints from './endPoints';

 export default {
-  getAgents() {
-    const urlData = endPoints('fetchAgents');
-    const fetchPromise = new Promise((resolve, reject) => {
-      axios
-        .get(urlData.url)
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
-    });
-    return fetchPromise;
-  },
-
-  addAgent(agentInfo) {
-    const urlData = endPoints('addAgent');
-    const fetchPromise = new Promise((resolve, reject) => {
-      axios
-        .post(urlData.url, agentInfo)
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
-    });
-    return fetchPromise;
-  },
-  editAgent(agentInfo) {
-    const urlData = endPoints('editAgent')(agentInfo.id);
-    const fetchPromise = new Promise((resolve, reject) => {
-      axios
-        .put(urlData.url, agentInfo)
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
-    });
-    return fetchPromise;
-  },
-  deleteAgent(agentId) {
-    const urlData = endPoints('deleteAgent')(agentId);
-    const fetchPromise = new Promise((resolve, reject) => {
-      axios
-        .delete(urlData.url)
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
-    });
-    return fetchPromise;
-  },
  getLabels() {
    const urlData = endPoints('fetchLabels');
-    const fetchPromise = new Promise((resolve, reject) => {
-      axios
-        .get(urlData.url)
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
-    });
-    return fetchPromise;
+    return axios.get(urlData.url);
  },
-  // Get Inbox related to the account
+
  getInboxes() {
    const urlData = endPoints('fetchInboxes');
-    const fetchPromise = new Promise((resolve, reject) => {
-      axios
-        .get(urlData.url)
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
-    });
-    return fetchPromise;
+    return axios.get(urlData.url);
  },

  deleteInbox(id) {
    const urlData = endPoints('inbox').delete(id);
-    const fetchPromise = new Promise((resolve, reject) => {
-      axios
-        .delete(urlData.url)
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
-    });
-    return fetchPromise;
+    return axios.delete(urlData.url);
  },

  listInboxAgents(id) {
    const urlData = endPoints('inbox').agents.get(id);
-    const fetchPromise = new Promise((resolve, reject) => {
-      axios
-        .get(urlData.url)
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
-    });
-    return fetchPromise;
+    return axios.get(urlData.url);
  },

  updateInboxAgents(inboxId, agentList) {
    const urlData = endPoints('inbox').agents.post();
-    const fetchPromise = new Promise((resolve, reject) => {
-      axios
-        .post(urlData.url, {
-          user_ids: agentList,
-          inbox_id: inboxId,
-        })
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
+    return axios.post(urlData.url, {
+      user_ids: agentList,
+      inbox_id: inboxId,
    });
-    return fetchPromise;
  },
 };
--- a/app/javascript/dashboard/api/agents.js
+++ b/app/javascript/dashboard/api/agents.js
@ -0,0 +1,9 @@
+import ApiClient from './ApiClient';
+
+class Agents extends ApiClient {
+  constructor() {
+    super('agents');
+  }
+}
+
+export default new Agents();
--- a/app/javascript/dashboard/api/auth.js
+++ b/app/javascript/dashboard/api/auth.js
@ -9,19 +9,29 @@ import Cookies from 'js-cookie';
 import endPoints from './endPoints';
 import { frontendURL } from '../helper/URLHelper';

+const setAuthCredentials = response => {
+  const expiryDate = moment.unix(response.headers.expiry);
+  Cookies.set('auth_data', response.headers, {
+    expires: expiryDate.diff(moment(), 'days'),
+  });
+  Cookies.set('user', response.data.data, {
+    expires: expiryDate.diff(moment(), 'days'),
+  });
+};
+
+const clearCookiesOnLogout = () => {
+  Cookies.remove('auth_data');
+  Cookies.remove('user');
+  window.location = frontendURL('login');
+};
+
 export default {
  login(creds) {
    return new Promise((resolve, reject) => {
      axios
        .post('auth/sign_in', creds)
        .then(response => {
-          const expiryDate = moment.unix(response.headers.expiry);
-          Cookies.set('auth_data', response.headers, {
-            expires: expiryDate.diff(moment(), 'days'),
-          });
-          Cookies.set('user', response.data.data, {
-            expires: expiryDate.diff(moment(), 'days'),
-          });
+          setAuthCredentials(response);
          resolve();
        })
        .catch(error => {
@ -39,13 +49,7 @@ export default {
          email: creds.email,
        })
        .then(response => {
-          const expiryDate = moment.unix(response.headers.expiry);
-          Cookies.set('auth_data', response.headers, {
-            expires: expiryDate.diff(moment(), 'days'),
-          });
-          Cookies.set('user', response.data.data, {
-            expires: expiryDate.diff(moment(), 'days'),
-          });
+          setAuthCredentials(response);
          resolve(response);
        })
        .catch(error => {
@ -64,9 +68,7 @@ export default {
        })
        .catch(error => {
          if (error.response.status === 401) {
-            Cookies.remove('auth_data');
-            Cookies.remove('user');
-            window.location = frontendURL('login');
+            clearCookiesOnLogout();
          }
          reject(error);
        });
@ -79,9 +81,7 @@ export default {
      axios
        .delete(urlData.url)
        .then(response => {
-          Cookies.remove('auth_data');
-          Cookies.remove('user');
-          window.location = frontendURL('login');
+          clearCookiesOnLogout();
          resolve(response);
        })
        .catch(error => {
@ -122,17 +122,8 @@ export default {
  },

  verifyPasswordToken({ confirmationToken }) {
-    return new Promise((resolve, reject) => {
-      axios
-        .post('auth/confirmation', {
-          confirmation_token: confirmationToken,
-        })
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(error.response);
-        });
+    return axios.post('auth/confirmation', {
+      confirmation_token: confirmationToken,
    });
  },

@ -162,15 +153,6 @@ export default {

  resetPassword({ email }) {
    const urlData = endPoints('resetPassword');
-    return new Promise((resolve, reject) => {
-      axios
-        .post(urlData.url, { email })
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(error.response);
-        });
-    });
+    return axios.post(urlData.url, { email });
  },
 };
--- a/app/javascript/dashboard/api/channels.js
+++ b/app/javascript/dashboard/api/channels.js
@ -8,49 +8,19 @@ export default {
  // Get Inbox related to the account
  createChannel(channel, channelParams) {
    const urlData = endPoints('createChannel')(channel, channelParams);
-    const fetchPromise = new Promise((resolve, reject) => {
-      axios
-        .post(urlData.url, urlData.params)
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
-    });
-    return fetchPromise;
+    return axios.post(urlData.url, urlData.params);
  },

  addAgentsToChannel(inboxId, agentsId) {
    const urlData = endPoints('addAgentsToChannel');
    urlData.params.inbox_id = inboxId;
    urlData.params.user_ids = agentsId;
-    const fetchPromise = new Promise((resolve, reject) => {
-      axios
-        .post(urlData.url, urlData.params)
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
-    });
-    return fetchPromise;
+    return axios.post(urlData.url, urlData.params);
  },

  fetchFacebookPages(token) {
    const urlData = endPoints('fetchFacebookPages');
    urlData.params.omniauth_token = token;
-    const fetchPromise = new Promise((resolve, reject) => {
-      axios
-        .post(urlData.url, urlData.params)
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
-    });
-    return fetchPromise;
+    return axios.post(urlData.url, urlData.params);
  },
 };
--- a/app/javascript/dashboard/api/endPoints.js
+++ b/app/javascript/dashboard/api/endPoints.js
@ -32,22 +32,6 @@ const endPoints = {
    url: 'api/v1/inboxes.json',
  },

-  fetchAgents: {
-    url: 'api/v1/agents.json',
-  },
-
-  addAgent: {
-    url: 'api/v1/agents.json',
-  },
-
-  editAgent(id) {
-    return { url: `api/v1/agents/${id}` };
-  },
-
-  deleteAgent({ id }) {
-    return { url: `api/v1/agents/${id}` };
-  },
-
  createChannel(channel, channelParams) {
    return {
      url: `api/v1/callbacks/register_${channel}_page.json`,
--- a/app/javascript/dashboard/api/reports.js
+++ b/app/javascript/dashboard/api/reports.js
@ -4,31 +4,11 @@ import endPoints from './endPoints';

 export default {
  getAccountReports(metric, from, to) {
-    const urlData = endPoints('reports').account(metric, from, to);
-    const fetchPromise = new Promise((resolve, reject) => {
-      axios
-        .get(urlData.url)
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
-    });
-    return fetchPromise;
+    const { url } = endPoints('reports').account(metric, from, to);
+    return axios.get(url);
  },
  getAccountSummary(accountId, from, to) {
    const urlData = endPoints('reports').accountSummary(accountId, from, to);
-    const fetchPromise = new Promise((resolve, reject) => {
-      axios
-        .get(urlData.url)
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
-    });
-    return fetchPromise;
+    return axios.get(urlData.url);
  },
 };
--- a/app/javascript/dashboard/api/specs/agents.spec.js
+++ b/app/javascript/dashboard/api/specs/agents.spec.js
@ -0,0 +1,13 @@
+import agents from '../agents';
+import ApiClient from '../ApiClient';
+
+describe('#AgentAPI', () => {
+  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');
+  });
+});
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@ -14,7 +14,7 @@
      class="tab--chat-type"
      @chatTabChange="getDataForTab"
    />
-    
+
    <p
      v-if="!chatListLoading && !getChatsForTab(activeStatus).length"
      class="content-box"
@ -71,7 +71,7 @@ export default {

    this.$store.dispatch('emptyAllConversations');
    this.fetchData();
-    this.$store.dispatch('fetchAgents');
+    this.$store.dispatch('agents/get');
  },
  computed: {
    ...mapGetters({
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@ -76,7 +76,7 @@ export default {

  computed: {
    ...mapGetters({
-      agents: 'getVerifiedAgents',
+      agents: 'agents/getVerifiedAgents',
      currentChat: 'getSelectedChat',
    }),
    agentList() {
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
@ -1,6 +1,5 @@
 <template>
  <woot-modal :show.sync="show" :on-close="onClose">
-
    <div class="column content-box">
      <woot-modal-header
        :header-image="headerImage"
@ -8,15 +7,20 @@
        :header-content="$t('AGENT_MGMT.ADD.DESC')"
      />

-      <form class="row" v-on:submit.prevent="addAgent()">
+      <form class="row" @submit.prevent="addAgent()">
        <div class="medium-12 columns">
-          <label :class="{ 'error': $v.agentName.$error }">
+          <label :class="{ error: $v.agentName.$error }">
            {{ $t('AGENT_MGMT.ADD.FORM.NAME.LABEL') }}
-            <input type="text" v-model.trim="agentName" @input="$v.agentName.$touch" :placeholder="$t('AGENT_MGMT.ADD.FORM.NAME.PLACEHOLDER')">
+            <input
+              v-model.trim="agentName"
+              type="text"
+              :placeholder="$t('AGENT_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
+              @input="$v.agentName.$touch"
+            />
          </label>
        </div>
        <div class="medium-12 columns">
-          <label :class="{ 'error': $v.agentType.$error }">
+          <label :class="{ error: $v.agentType.$error }">
            {{ $t('AGENT_MGMT.ADD.FORM.AGENT_TYPE.LABEL') }}
            <multiselect
              v-model="agentType"
@ -24,27 +28,36 @@
              :searchable="false"
              label="label"
              :placeholder="$t('AGENT_MGMT.ADD.FORM.AGENT_TYPE.PLACEHOLDER')"
-              @select="setPageName"
              :allow-empty="true"
              :close-on-select="true"
+              @select="setPageName"
            />
-            <span class="message" v-if="$v.agentType.$error">
+            <span v-if="$v.agentType.$error" class="message">
              {{ $t('AGENT_MGMT.ADD.FORM.AGENT_TYPE.ERROR') }}
            </span>
          </label>
        </div>
        <div class="medium-12 columns">
-          <label :class="{ 'error': $v.agentEmail.$error }">
+          <label :class="{ error: $v.agentEmail.$error }">
            {{ $t('AGENT_MGMT.ADD.FORM.EMAIL.LABEL') }}
-            <input type="text" v-model.trim="agentEmail" @input="$v.agentEmail.$touch" :placeholder="$t('AGENT_MGMT.ADD.FORM.EMAIL.PLACEHOLDER')">
+            <input
+              v-model.trim="agentEmail"
+              type="text"
+              :placeholder="$t('AGENT_MGMT.ADD.FORM.EMAIL.PLACEHOLDER')"
+              @input="$v.agentEmail.$touch"
+            />
          </label>
        </div>
        <div class="modal-footer">
          <div class="medium-12 columns">
            <woot-submit-button
-              :disabled="$v.agentEmail.$invalid || $v.agentName.$invalid || addAgentsApi.showLoading"
+              :disabled="
+                $v.agentEmail.$invalid ||
+                  $v.agentName.$invalid ||
+                  uiFlags.isCreating
+              "
              :button-text="$t('AGENT_MGMT.ADD.FORM.SUBMIT')"
-              :loading="addAgentsApi.showLoading"
+              :loading="uiFlags.isCreating"
            />
            <a @click="onClose">Cancel</a>
          </div>
@ -58,18 +71,12 @@
 /* global bus */
 /* eslint no-console: 0 */
 import { required, minLength, email } from 'vuelidate/lib/validators';
-
-import PageHeader from '../SettingsSubPageHeader';
+import { mapGetters } from 'vuex';

 const agentImg = require('assets/images/agent.svg');

 export default {
-  props: [
-    'onClose',
-  ],
-  components: {
-    PageHeader,
-  },
+  props: ['onClose'],
  data() {
    return {
      agentName: '',
@ -77,11 +84,6 @@ export default {
      agentType: this.$t('AGENT_MGMT.AGENT_TYPES')[1],
      vertical: 'bottom',
      horizontal: 'center',
-      addAgentsApi: {
-        showAlert: false,
-        showLoading: false,
-        message: '',
-      },
      agentTypeList: this.$t('AGENT_MGMT.AGENT_TYPES'),
      show: true,
    };
@ -90,6 +92,9 @@ export default {
    headerImage() {
      return agentImg;
    },
+    ...mapGetters({
+      uiFlags: 'agents/getUIFlags',
+    }),
  },
  validations: {
    agentName: {
@ -110,36 +115,21 @@ export default {
      this.$v.agentType.$touch();
      this.agentType = name;
    },
-    showAlert() {
-      bus.$emit('newToastMessage', this.addAgentsApi.message);
+    showAlert(message) {
+      bus.$emit('newToastMessage', message);
    },
-    resetForm() {
-      this.agentName = this.agentEmail = '';
-      this.$v.agentName.$reset();
-      this.$v.agentEmail.$reset();
-    },
-    addAgent() {
-      // Show loading on button
-      this.addAgentsApi.showLoading = true;
-      // Make API Calls
-      this.$store.dispatch('addAgent', {
-        name: this.agentName,
-        email: this.agentEmail,
-        role: this.agentType.name.toLowerCase(),
-      })
-      .then(() => {
-        // Reset Form, Show success message
-        this.addAgentsApi.showLoading = false;
-        this.addAgentsApi.message = this.$t('AGENT_MGMT.ADD.API.SUCCESS_MESSAGE');
-        this.showAlert();
-        this.resetForm();
+    async addAgent() {
+      try {
+        await this.$store.dispatch('agents/create', {
+          name: this.agentName,
+          email: this.agentEmail,
+          role: this.agentType.name.toLowerCase(),
+        });
+        this.showAlert(this.$t('AGENT_MGMT.ADD.API.SUCCESS_MESSAGE'));
        this.onClose();
-      })
-      .catch(() => {
-        this.addAgentsApi.showLoading = false;
-        this.addAgentsApi.message = this.$t('AGENT_MGMT.ADD.API.ERROR_MESSAGE');
-        this.showAlert();
-      });
+      } catch (error) {
+        this.showAlert(this.$t('AGENT_MGMT.ADD.API.ERROR_MESSAGE'));
+      }
    },
  },
 };
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/DeleteAgent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/DeleteAgent.vue
@ -1,12 +1,6 @@
 <template>
-  <modal
-    :show.sync="show"
-    :on-close="onClose"
-  >
-    <woot-modal-header
-      :header-title="title"
-      :header-content="message"
-    />
+  <modal :show.sync="show" :on-close="onClose">
+    <woot-modal-header :header-title="title" :header-content="message" />
    <div class="modal-footer delete-item">
      <button class="button" @click="onClose">
        {{ rejectText }}
@ -19,13 +13,11 @@
 </template>

 <script>
-import PageHeader from '../SettingsSubPageHeader';
 import Modal from '../../../../components/Modal';

 export default {
  components: {
    Modal,
-    PageHeader,
  },
  props: {
    show: Boolean,
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
@ -21,9 +21,9 @@
            <multiselect
              v-model.trim="agentType"
              :options="agentTypeList"
-              label="label"
              :placeholder="$t('AGENT_MGMT.EDIT.FORM.AGENT_TYPE.PLACEHOLDER')"
              :searchable="false"
+              label="label"
              @select="setPageName"
            />
            <span v-if="$v.agentType.$error" class="message">
@ -37,10 +37,10 @@
              :disabled="
                $v.agentType.$invalid ||
                  $v.agentName.$invalid ||
-                  editAgentsApi.showLoading
+                  uiFlags.isUpdating
              "
              :button-text="$t('AGENT_MGMT.EDIT.FORM.SUBMIT')"
-              :loading="editAgentsApi.showLoading"
+              :loading="uiFlags.isUpdating"
            />
            <a @click="onClose">
              {{ $t('AGENT_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
@ -62,7 +62,7 @@
 /* global bus */
 /* eslint no-console: 0 */
 import { required, minLength } from 'vuelidate/lib/validators';
-
+import { mapGetters } from 'vuex';
 import WootSubmitButton from '../../../../components/buttons/FormSubmitButton';
 import Modal from '../../../../components/Modal';
 import Auth from '../../../../api/auth';
@ -81,11 +81,6 @@ export default {
  },
  data() {
    return {
-      editAgentsApi: {
-        showAlert: false,
-        showLoading: false,
-        message: '',
-      },
      agentTypeList: this.$t('AGENT_MGMT.AGENT_TYPES'),
      agentName: this.name,
      agentType: {
@ -111,66 +106,41 @@ export default {
    pageTitle() {
      return `${this.$t('AGENT_MGMT.EDIT.TITLE')} - ${this.name}`;
    },
+    ...mapGetters({
+      uiFlags: 'agents/getUIFlags',
+    }),
  },
  methods: {
    setPageName({ name }) {
      this.$v.agentType.$touch();
      this.agentType = name;
    },
-    showAlert() {
-      bus.$emit('newToastMessage', this.editAgentsApi.message);
+    showAlert(message) {
+      bus.$emit('newToastMessage', message);
    },
-    resetForm() {
-      this.agentName = '';
-      this.agentType = '';
-      this.$v.agentName.$reset();
-      this.$v.agentType.$reset();
-    },
-    editAgent() {
-      // Show loading on button
-      this.editAgentsApi.showLoading = true;
-      // Make API Calls
-      this.$store
-        .dispatch('editAgent', {
+    async editAgent() {
+      try {
+        await this.$store.dispatch('agents/update', {
          id: this.id,
          name: this.agentName,
          role: this.agentType.name.toLowerCase(),
-        })
-        .then(() => {
-          // Reset Form, Show success message
-          this.editAgentsApi.showLoading = false;
-          this.editAgentsApi.message = this.$t(
-            'AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE'
-          );
-          this.showAlert();
-          this.resetForm();
-          setTimeout(() => {
-            this.onClose();
-          }, 10);
-        })
-        .catch(() => {
-          this.editAgentsApi.showLoading = false;
-          this.editAgentsApi.message = this.$t(
-            'AGENT_MGMT.EDIT.API.ERROR_MESSAGE'
-          );
-          this.showAlert();
        });
+        this.showAlert(this.$t('AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+        this.onClose();
+      } catch (error) {
+        console.log(error);
+        this.showAlert(this.$t('AGENT_MGMT.EDIT.API.ERROR_MESSAGE'));
+      }
    },
-    resetPassword() {
-      // Call resetPassword from Auth Service
-      Auth.resetPassword(this.agentCredentials)
-        .then(() => {
-          this.editAgentsApi.message = this.$t(
-            'AGENT_MGMT.EDIT.PASSWORD_RESET.ADMIN_SUCCESS_MESSAGE'
-          );
-          this.showAlert();
-        })
-        .catch(() => {
-          this.editAgentsApi.message = this.$t(
-            'AGENT_MGMT.EDIT.PASSWORD_RESET.ERROR_MESSAGE'
-          );
-          this.showAlert();
-        });
+    async resetPassword() {
+      try {
+        await Auth.resetPassword(this.agentCredentials);
+        this.showAlert(
+          this.$t('AGENT_MGMT.EDIT.PASSWORD_RESET.ADMIN_SUCCESS_MESSAGE')
+        );
+      } catch (error) {
+        this.showAlert(this.$t('AGENT_MGMT.EDIT.PASSWORD_RESET.ERROR_MESSAGE'));
+      }
    },
  },
 };
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@ -13,63 +13,64 @@
    <div class="row">
      <div class="small-8 columns">
        <woot-loading-state
-          v-if="fetchStatus"
+          v-if="uiFlags.isFetching"
          :message="$t('AGENT_MGMT.LOADING')"
        />
-        <p v-if="!fetchStatus && !agentList.length">
-          {{ $t('AGENT_MGMT.LIST.404') }}
-        </p>
-        <table v-if="!fetchStatus && agentList.length" class="woot-table">
-          <tbody>
-            <tr v-for="(agent, index) in agentList" :key="agent.email">
-              <!-- Gravtar Image -->
-
-              <td>
-                <thumbnail
-                  :src="gravatarUrl(agent.email)"
-                  class="columns"
-                  :username="agent.name"
-                  size="40px"
-                />
-              </td>
-              <!-- Agent Name + Email -->
-              <td>
-                <span class="agent-name">{{ agent.name }}</span>
-                <span>{{ agent.email }}</span>
-              </td>
-              <!-- Agent Role + Verification Status -->
-              <td>
-                <span class="agent-name">{{ agent.role }}</span>
-                <span v-if="agent.confirmed">
-                  {{ $t('AGENT_MGMT.LIST.VERIFIED') }}
-                </span>
-                <span v-if="!agent.confirmed">
-                  {{ $t('AGENT_MGMT.LIST.VERIFICATION_PENDING') }}
-                </span>
-              </td>
-              <!-- Actions -->
-              <td>
-                <div v-if="showActions(agent)" class="button-wrapper">
-                  <div @click="openEditPopup(agent)">
+        <div v-else>
+          <p v-if="!agentList.length">
+            {{ $t('AGENT_MGMT.LIST.404') }}
+          </p>
+          <table v-else class="woot-table">
+            <tbody>
+              <tr v-for="(agent, index) in agentList" :key="agent.email">
+                <!-- Gravtar Image -->
+                <td>
+                  <thumbnail
+                    :src="gravatarUrl(agent.email)"
+                    class="columns"
+                    :username="agent.name"
+                    size="40px"
+                  />
+                </td>
+                <!-- Agent Name + Email -->
+                <td>
+                  <span class="agent-name">{{ agent.name }}</span>
+                  <span>{{ agent.email }}</span>
+                </td>
+                <!-- Agent Role + Verification Status -->
+                <td>
+                  <span class="agent-name">{{ agent.role }}</span>
+                  <span v-if="agent.confirmed">
+                    {{ $t('AGENT_MGMT.LIST.VERIFIED') }}
+                  </span>
+                  <span v-if="!agent.confirmed">
+                    {{ $t('AGENT_MGMT.LIST.VERIFICATION_PENDING') }}
+                  </span>
+                </td>
+                <!-- Actions -->
+                <td>
+                  <div class="button-wrapper">
                    <woot-submit-button
+                      v-if="showEditAction(agent)"
                      :button-text="$t('AGENT_MGMT.EDIT.BUTTON_TEXT')"
                      icon-class="ion-edit"
                      button-class="link hollow grey-btn"
+                      @click="openEditPopup(agent)"
                    />
-                  </div>
-                  <div @click="openDeletePopup(agent, index)">
                    <woot-submit-button
+                      v-if="showDeleteAction(agent)"
                      :button-text="$t('AGENT_MGMT.DELETE.BUTTON_TEXT')"
                      :loading="loading[agent.id]"
                      icon-class="ion-close-circled"
                      button-class="link hollow grey-btn"
+                      @click="openDeletePopup(agent, index)"
                    />
                  </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
      </div>
      <div class="small-4 columns">
        <span v-html="$t('AGENT_MGMT.SIDEBAR_TXT')"></span>
@ -79,7 +80,6 @@
    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
      <add-agent :on-close="hideAddPopup" />
    </woot-modal>
-
    <!-- Edit Agent -->
    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
      <edit-agent
@ -91,7 +91,6 @@
        :on-close="hideEditPopup"
      />
    </woot-modal>
-
    <!-- Delete Agent -->
    <delete-agent
      :show.sync="showDeletePopup"
@ -102,8 +101,6 @@
      :confirm-text="deleteConfirmText"
      :reject-text="deleteRejectText"
    />
-
-    <!-- Loader Status -->
  </div>
 </template>
 <script>
@ -138,8 +135,9 @@ export default {
  },
  computed: {
    ...mapGetters({
-      agentList: 'getAgents',
-      fetchStatus: 'getAgentFetchStatus',
+      agentList: 'agents/getAgents',
+      uiFlags: 'agents/getUIFlags',
+      currentUserId: 'getCurrentUserID',
    }),
    deleteConfirmText() {
      return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.YES')} ${
@ -158,20 +156,31 @@ export default {
    },
  },
  mounted() {
-    this.$store.dispatch('fetchAgents');
+    this.$store.dispatch('agents/get');
  },
  methods: {
-    showActions(agent) {
+    showEditAction(agent) {
+      return this.currentUserId !== agent.id;
+    },
+    showDeleteAction(agent) {
+      if (this.currentUserId === agent.id) {
+        return false;
+      }
+
+      if (!agent.confirmed) {
+        return true;
+      }
+
      if (agent.role === 'administrator') {
-        const adminList = this.agentList.filter(
-          item => item.role === 'administrator'
-        );
-        return adminList.length !== 1;
+        return this.verifiedAdministrators().length !== 1;
      }
      return true;
    },
-    // List Functions
-    // Gravatar URL
+    verifiedAdministrators() {
+      return this.agentList.filter(
+        agent => agent.role === 'administrator' && agent.confirmed
+      );
+    },
    gravatarUrl(email) {
      const hash = md5(email);
      return `${window.WootConstants.GRAVATAR_URL}${hash}?default=404`;
@ -206,17 +215,13 @@ export default {
      this.closeDeletePopup();
      this.deleteAgent(this.currentAgent.id);
    },
-    deleteAgent(id) {
-      this.$store
-        .dispatch('deleteAgent', {
-          id,
-        })
-        .then(() => {
-          this.showAlert(this.$t('AGENT_MGMT.DELETE.API.SUCCESS_MESSAGE'));
-        })
-        .catch(() => {
-          this.showAlert(this.$t('AGENT_MGMT.DELETE.API.ERROR_MESSAGE'));
-        });
+    async deleteAgent(id) {
+      try {
+        await this.$store.dispatch('agents/delete', id);
+        this.showAlert(this.$t('AGENT_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        this.showAlert(this.$t('AGENT_MGMT.DELETE.API.ERROR_MESSAGE'));
+      }
    },
    // Show SnackBar
    showAlert(message) {
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
@ -73,12 +73,12 @@ export default {

  computed: {
    ...mapGetters({
-      agentList: 'getAgents',
+      agentList: 'agents/getAgents',
    }),
  },

  mounted() {
-    this.$store.dispatch('fetchAgents');
+    this.$store.dispatch('agents/get');
  },

  methods: {
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@ -88,7 +88,7 @@ export default {
  },
  computed: {
    ...mapGetters({
-      agentList: 'getAgents',
+      agentList: 'agents/getAgents',
    }),
    webWidgetScript() {
      return createWebsiteWidgetScript(this.inbox.websiteToken);
@ -98,7 +98,7 @@ export default {
    },
  },
  mounted() {
-    this.$store.dispatch('fetchAgents').then(() => {
+    this.$store.dispatch('agents/get').then(() => {
      this.fetchAttachedAgents();
    });
  },
--- a/app/javascript/dashboard/store/getters.js
+++ b/app/javascript/dashboard/store/getters.js
@ -1,4 +0,0 @@
-/* eslint arrow-body-style: ["error", "always"] */
-// export default (state) => {
-
-// };
--- a/app/javascript/dashboard/store/index.js
+++ b/app/javascript/dashboard/store/index.js
@ -1,28 +1,25 @@
 import Vue from 'vue';
 import Vuex from 'vuex';

-import * as getters from './getters';
-
+import agents from './modules/agents';
 import auth from './modules/auth';
-import conversations from './modules/conversations';
-import sideMenuItems from './modules/sidebar';
-import AccountState from './modules/AccountState';
-import Channel from './modules/channels';
-import cannedResponse from './modules/cannedResponse';
-import reports from './modules/reports';
 import billing from './modules/billing';
+import cannedResponse from './modules/cannedResponse';
+import Channel from './modules/channels';
+import conversations from './modules/conversations';
+import reports from './modules/reports';
+import sideMenuItems from './modules/sidebar';

 Vue.use(Vuex);
 export default new Vuex.Store({
-  getters,
  modules: {
+    agents,
    auth,
-    conversations,
-    sideMenuItems,
-    AccountState,
-    Channel,
-    cannedResponse,
-    reports,
    billing,
+    cannedResponse,
+    Channel,
+    conversations,
+    reports,
+    sideMenuItems,
  },
 });
--- a/app/javascript/dashboard/store/modules/AccountState.js
+++ b/app/javascript/dashboard/store/modules/AccountState.js
@ -1,108 +0,0 @@
-/* eslint no-console: 0 */
-/* eslint no-param-reassign: 0 */
-/* eslint no-shadow: 0 */
-import * as types from '../mutation-types';
-import Account from '../../api/account';
-import { setLoadingStatus, getLoadingStatus } from '../utils/api';
-
-const state = {
-  agents: [],
-  fetchAPIloadingStatus: false,
-};
-
-const getters = {
-  getAgents(_state) {
-    return _state.agents;
-  },
-  getVerifiedAgents(_state) {
-    return _state.agents.filter(element => element.confirmed);
-  },
-  getAgentFetchStatus: getLoadingStatus,
-};
-
-const actions = {
-  fetchAgents({ commit }) {
-    commit(types.default.SET_AGENT_FETCHING_STATUS, true);
-    Account.getAgents()
-      .then(response => {
-        commit(types.default.SET_AGENT_FETCHING_STATUS, false);
-        commit(types.default.SET_AGENTS, response);
-      })
-      .catch();
-  },
-  addAgent({ commit }, agentInfo) {
-    return new Promise((resolve, reject) => {
-      Account.addAgent(agentInfo)
-        .then(response => {
-          commit(types.default.ADD_AGENT, response);
-          resolve();
-        })
-        .catch(response => {
-          reject(response);
-        });
-    });
-  },
-  editAgent({ commit }, agentInfo) {
-    return new Promise((resolve, reject) => {
-      Account.editAgent(agentInfo)
-        .then(response => {
-          commit(types.default.EDIT_AGENT, response, agentInfo.id);
-          resolve();
-        })
-        .catch(response => {
-          reject(response);
-        });
-    });
-  },
-  deleteAgent({ commit }, agentId) {
-    return new Promise((resolve, reject) => {
-      Account.deleteAgent(agentId)
-        .then(response => {
-          if (response.status === 200) {
-            commit(types.default.DELETE_AGENT, agentId);
-          }
-          resolve();
-        })
-        .catch(response => {
-          reject(response);
-        });
-    });
-  },
-};
-
-const mutations = {
-  // List
-  [types.default.SET_AGENT_FETCHING_STATUS]: setLoadingStatus,
-  // List
-  [types.default.SET_AGENTS](_state, response) {
-    _state.agents = response.data;
-  },
-  // Add Agent
-  [types.default.ADD_AGENT](_state, response) {
-    if (response.status === 200) {
-      _state.agents.push(response.data);
-    }
-  },
-  // Edit Agent
-  [types.default.EDIT_AGENT](_state, response) {
-    if (response.status === 200) {
-      _state.agents.forEach((element, index) => {
-        if (element.id === response.data.id) {
-          _state.agents[index] = response.data;
-        }
-      });
-    }
-  },
-
-  // Delete Agent
-  [types.default.DELETE_AGENT](_state, { id }) {
-    _state.agents = _state.agents.filter(agent => agent.id !== id);
-  },
-};
-
-export default {
-  state,
-  getters,
-  actions,
-  mutations,
-};
--- a/app/javascript/dashboard/store/modules/agents.js
+++ b/app/javascript/dashboard/store/modules/agents.js
@ -0,0 +1,99 @@
+import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
+import * as types from '../mutation-types';
+import AgentAPI from '../../api/agents';
+
+export const state = {
+  records: [],
+  uiFlags: {
+    isFetching: false,
+    isCreating: false,
+    isUpdating: false,
+    isDeleting: false,
+  },
+};
+
+export const getters = {
+  getAgents($state) {
+    return $state.records;
+  },
+  getVerifiedAgents($state) {
+    return $state.records.filter(record => record.confirmed);
+  },
+  getUIFlags($state) {
+    return $state.uiFlags;
+  },
+};
+
+export const actions = {
+  get: async ({ commit }) => {
+    commit(types.default.SET_AGENT_FETCHING_STATUS, true);
+    try {
+      const response = await AgentAPI.get();
+      commit(types.default.SET_AGENT_FETCHING_STATUS, false);
+      commit(types.default.SET_AGENTS, response.data);
+    } catch (error) {
+      commit(types.default.SET_AGENT_FETCHING_STATUS, false);
+    }
+  },
+  create: async ({ commit }, agentInfo) => {
+    commit(types.default.SET_AGENT_CREATING_STATUS, true);
+    try {
+      const response = await AgentAPI.create(agentInfo);
+      commit(types.default.ADD_AGENT, response.data);
+      commit(types.default.SET_AGENT_CREATING_STATUS, false);
+    } catch (error) {
+      commit(types.default.SET_AGENT_CREATING_STATUS, false);
+      throw new Error(error);
+    }
+  },
+  update: async ({ commit }, { id, ...agentParams }) => {
+    commit(types.default.SET_AGENT_UPDATING_STATUS, true);
+    try {
+      const response = await AgentAPI.update(id, agentParams);
+      commit(types.default.EDIT_AGENT, response.data);
+      commit(types.default.SET_AGENT_UPDATING_STATUS, false);
+    } catch (error) {
+      commit(types.default.SET_AGENT_UPDATING_STATUS, false);
+      throw new Error(error);
+    }
+  },
+  delete: async ({ commit }, agentId) => {
+    commit(types.default.SET_AGENT_DELETING_STATUS, true);
+    try {
+      await AgentAPI.delete(agentId);
+      commit(types.default.DELETE_AGENT, agentId);
+      commit(types.default.SET_AGENT_DELETING_STATUS, false);
+    } catch (error) {
+      commit(types.default.SET_AGENT_DELETING_STATUS, false);
+      throw new Error(error);
+    }
+  },
+};
+
+export const mutations = {
+  [types.default.SET_AGENT_FETCHING_STATUS]($state, status) {
+    $state.uiFlags.isFetching = status;
+  },
+  [types.default.SET_AGENT_CREATING_STATUS]($state, status) {
+    $state.uiFlags.isCreating = status;
+  },
+  [types.default.SET_AGENT_UPDATING_STATUS]($state, status) {
+    $state.uiFlags.isUpdating = status;
+  },
+  [types.default.SET_AGENT_DELETING_STATUS]($state, status) {
+    $state.uiFlags.isDeleting = status;
+  },
+
+  [types.default.SET_AGENTS]: MutationHelpers.set,
+  [types.default.ADD_AGENT]: MutationHelpers.create,
+  [types.default.EDIT_AGENT]: MutationHelpers.update,
+  [types.default.DELETE_AGENT]: MutationHelpers.destroy,
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};
--- a/app/javascript/dashboard/store/modules/cannedResponse.js
+++ b/app/javascript/dashboard/store/modules/cannedResponse.js
@ -1,6 +1,4 @@
-/* eslint no-console: 0 */
-/* eslint no-param-reassign: 0 */
-/* eslint no-shadow: 0 */
+import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 import * as types from '../mutation-types';
 import CannedResponseAPI from '../../api/cannedResponse';

@ -87,27 +85,10 @@ const mutations = {
    };
  },

-  [types.default.SET_CANNED](_state, data) {
-    _state.records = data;
-  },
-
-  [types.default.ADD_CANNED](_state, data) {
-    _state.records.push(data);
-  },
-
-  [types.default.EDIT_CANNED](_state, data) {
-    _state.records.forEach((element, index) => {
-      if (element.id === data.id) {
-        _state.records[index] = data;
-      }
-    });
-  },
-
-  [types.default.DELETE_CANNED](_state, id) {
-    _state.records = _state.records.filter(
-      cannedResponse => cannedResponse.id !== id
-    );
-  },
+  [types.default.SET_CANNED]: MutationHelpers.set,
+  [types.default.ADD_CANNED]: MutationHelpers.create,
+  [types.default.EDIT_CANNED]: MutationHelpers.update,
+  [types.default.DELETE_CANNED]: MutationHelpers.destroy,
 };

 export default {
--- a/app/javascript/dashboard/store/modules/specs/agents/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/agents/actions.spec.js
@ -0,0 +1,94 @@
+import axios from 'axios';
+import { actions } from '../../agents';
+import * as types from '../../../mutation-types';
+import agentList 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: agentList });
+      await actions.get({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_AGENT_FETCHING_STATUS, true],
+        [types.default.SET_AGENT_FETCHING_STATUS, false],
+        [types.default.SET_AGENTS, agentList],
+      ]);
+    });
+    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_AGENT_FETCHING_STATUS, true],
+        [types.default.SET_AGENT_FETCHING_STATUS, false],
+      ]);
+    });
+  });
+
+  describe('#create', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({ data: agentList[0] });
+      await actions.create({ commit }, agentList[0]);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_AGENT_CREATING_STATUS, true],
+        [types.default.ADD_AGENT, agentList[0]],
+        [types.default.SET_AGENT_CREATING_STATUS, false],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.create({ commit })).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_AGENT_CREATING_STATUS, true],
+        [types.default.SET_AGENT_CREATING_STATUS, false],
+      ]);
+    });
+  });
+
+  describe('#update', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.patch.mockResolvedValue({ data: agentList[0] });
+      await actions.update({ commit }, agentList[0]);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_AGENT_UPDATING_STATUS, true],
+        [types.default.EDIT_AGENT, agentList[0]],
+        [types.default.SET_AGENT_UPDATING_STATUS, false],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.patch.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.update({ commit }, agentList[0])).rejects.toThrow(
+        Error
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_AGENT_UPDATING_STATUS, true],
+        [types.default.SET_AGENT_UPDATING_STATUS, false],
+      ]);
+    });
+  });
+
+  describe('#delete', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.delete.mockResolvedValue({ data: agentList[0] });
+      await actions.delete({ commit }, agentList[0].id);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_AGENT_DELETING_STATUS, true],
+        [types.default.DELETE_AGENT, agentList[0].id],
+        [types.default.SET_AGENT_DELETING_STATUS, false],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.delete({ commit }, agentList[0].id)).rejects.toThrow(
+        Error
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_AGENT_DELETING_STATUS, true],
+        [types.default.SET_AGENT_DELETING_STATUS, false],
+      ]);
+    });
+  });
+});
--- a/app/javascript/dashboard/store/modules/specs/agents/fixtures.js
+++ b/app/javascript/dashboard/store/modules/specs/agents/fixtures.js
@ -0,0 +1,28 @@
+export default [
+  {
+    id: 1,
+    provider: 'email',
+    uid: 'agent1@chatwoot.com',
+    name: 'Agent1',
+    email: 'agent1@chatwoot.com',
+    account_id: 1,
+    created_at: '2019-11-18T02:21:06.225Z',
+    updated_at: '2019-12-20T07:43:35.794Z',
+    pubsub_token: 'random-1',
+    role: 'agent',
+    confirmed: true,
+  },
+  {
+    id: 2,
+    provider: 'email',
+    uid: 'agent2@chatwoot.com',
+    name: 'Agent2',
+    email: 'agent2@chatwoot.com',
+    account_id: 1,
+    created_at: '2019-11-18T02:21:06.225Z',
+    updated_at: '2019-12-20T07:43:35.794Z',
+    pubsub_token: 'random-2',
+    role: 'agent',
+    confirmed: true,
+  },
+];
--- a/app/javascript/dashboard/store/modules/specs/agents/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/agents/getters.spec.js
@ -0,0 +1,80 @@
+import { getters } from '../../agents';
+
+describe('#getters', () => {
+  it('getAgents', () => {
+    const state = {
+      records: [
+        {
+          id: 1,
+          name: 'Agent 1',
+          email: 'agent1@chatwoot.com',
+          confirmed: true,
+        },
+        {
+          id: 2,
+          name: 'Agent 2',
+          email: 'agent2@chatwoot.com',
+          confirmed: false,
+        },
+      ],
+    };
+    expect(getters.getAgents(state)).toEqual([
+      {
+        id: 1,
+        name: 'Agent 1',
+        email: 'agent1@chatwoot.com',
+        confirmed: true,
+      },
+      {
+        id: 2,
+        name: 'Agent 2',
+        email: 'agent2@chatwoot.com',
+        confirmed: false,
+      },
+    ]);
+  });
+
+  it('getVerifiedAgents', () => {
+    const state = {
+      records: [
+        {
+          id: 1,
+          name: 'Agent 1',
+          email: 'agent1@chatwoot.com',
+          confirmed: true,
+        },
+        {
+          id: 2,
+          name: 'Agent 2',
+          email: 'agent2@chatwoot.com',
+          confirmed: false,
+        },
+      ],
+    };
+    expect(getters.getVerifiedAgents(state)).toEqual([
+      {
+        id: 1,
+        name: 'Agent 1',
+        email: 'agent1@chatwoot.com',
+        confirmed: true,
+      },
+    ]);
+  });
+
+  it('getUIFlags', () => {
+    const state = {
+      uiFlags: {
+        isFetching: true,
+        isCreating: false,
+        isUpdating: false,
+        isDeleting: false,
+      },
+    };
+    expect(getters.getUIFlags(state)).toEqual({
+      isFetching: true,
+      isCreating: false,
+      isUpdating: false,
+      isDeleting: false,
+    });
+  });
+});
--- a/app/javascript/dashboard/store/modules/specs/agents/mutations.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/agents/mutations.spec.js
@ -0,0 +1,63 @@
+import * as types from '../../../mutation-types';
+import { mutations } from '../../agents';
+
+describe('#mutations', () => {
+  describe('#SET_AGENTS', () => {
+    it('set agent records', () => {
+      const state = { records: [] };
+      mutations[types.default.SET_AGENTS](state, [
+        { id: 1, name: 'Agent1', email: 'agent1@chatwoot.com' },
+      ]);
+      expect(state.records).toEqual([
+        {
+          id: 1,
+          name: 'Agent1',
+          email: 'agent1@chatwoot.com',
+        },
+      ]);
+    });
+  });
+
+  describe('#ADD_AGENT', () => {
+    it('push newly created agent data to the store', () => {
+      const state = {
+        records: [{ id: 1, name: 'Agent1', email: 'agent1@chatwoot.com' }],
+      };
+      mutations[types.default.ADD_AGENT](state, {
+        id: 2,
+        name: 'Agent2',
+        email: 'agent2@chatwoot.com',
+      });
+      expect(state.records).toEqual([
+        { id: 1, name: 'Agent1', email: 'agent1@chatwoot.com' },
+        { id: 2, name: 'Agent2', email: 'agent2@chatwoot.com' },
+      ]);
+    });
+  });
+
+  describe('#EDIT_AGENT', () => {
+    it('sets allMessagesLoaded flag if payload is empty', () => {
+      const state = {
+        records: [{ id: 1, name: 'Agent1', email: 'agent1@chatwoot.com' }],
+      };
+      mutations[types.default.EDIT_AGENT](state, {
+        id: 1,
+        name: 'Agent2',
+        email: 'agent2@chatwoot.com',
+      });
+      expect(state.records).toEqual([
+        { id: 1, name: 'Agent2', email: 'agent2@chatwoot.com' },
+      ]);
+    });
+  });
+
+  describe('#DELETE_AGENT', () => {
+    it('sets allMessagesLoaded flag if payload is empty', () => {
+      const state = {
+        records: [{ id: 1, name: 'Agent1', email: 'agent1@chatwoot.com' }],
+      };
+      mutations[types.default.DELETE_AGENT](state, 1);
+      expect(state.records).toEqual([]);
+    });
+  });
+});
--- a/app/javascript/dashboard/store/mutation-types.js
+++ b/app/javascript/dashboard/store/mutation-types.js
@ -42,6 +42,9 @@ export default {

  // Agent
  SET_AGENT_FETCHING_STATUS: 'SET_AGENT_FETCHING_STATUS',
+  SET_AGENT_CREATING_STATUS: 'SET_AGENT_CREATING_STATUS',
+  SET_AGENT_UPDATING_STATUS: 'SET_AGENT_UPDATING_STATUS',
+  SET_AGENT_DELETING_STATUS: 'SET_AGENT_DELETING_STATUS',
  SET_AGENTS: 'SET_AGENTS',
  ADD_AGENT: 'ADD_AGENT',
  EDIT_AGENT: 'EDIT_AGENT',
--- a/app/javascript/shared/helpers/vuex/mutationHelpers.js
+++ b/app/javascript/shared/helpers/vuex/mutationHelpers.js
@ -0,0 +1,19 @@
+export const set = (state, data) => {
+  state.records = data;
+};
+
+export const create = (state, data) => {
+  state.records.push(data);
+};
+
+export const update = (state, data) => {
+  state.records.forEach((element, index) => {
+    if (element.id === data.id) {
+      state.records[index] = data;
+    }
+  });
+};
+
+export const destroy = (state, id) => {
+  state.records = state.records.filter(record => record.id !== id);
+};