[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

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) => {
+    return axios.get(urlData.url);
-      axios
-        .get(urlData.url)
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
-    });
-    return fetchPromise;
   },
-  // Get Inbox related to the account
+
   getInboxes() {
     const urlData = endPoints('fetchInboxes');
-    const fetchPromise = new Promise((resolve, reject) => {
+    return axios.get(urlData.url);
-      axios
-        .get(urlData.url)
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
-    });
-    return fetchPromise;
   },
 
   deleteInbox(id) {
     const urlData = endPoints('inbox').delete(id);
-    const fetchPromise = new Promise((resolve, reject) => {
+    return axios.delete(urlData.url);
-      axios
-        .delete(urlData.url)
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
-    });
-    return fetchPromise;
   },
 
   listInboxAgents(id) {
     const urlData = endPoints('inbox').agents.get(id);
-    const fetchPromise = new Promise((resolve, reject) => {
+    return axios.get(urlData.url);
-      axios
-        .get(urlData.url)
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
-    });
-    return fetchPromise;
   },
 
   updateInboxAgents(inboxId, agentList) {
     const urlData = endPoints('inbox').agents.post();
-    const fetchPromise = new Promise((resolve, reject) => {
+    return axios.post(urlData.url, {
-      axios
-        .post(urlData.url, {
       user_ids: agentList,
       inbox_id: inboxId,
-        })
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
     });
-    });
-    return fetchPromise;
   },
 };

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();

app/javascript/dashboard/api/auth.js

@@ -9,12 +9,7 @@ import Cookies from 'js-cookie';
 import endPoints from './endPoints';
 import { frontendURL } from '../helper/URLHelper';
 
-export default {
+const setAuthCredentials = response => {
-  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'),
@@ -22,6 +17,21 @@ export default {
   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 => {
+          setAuthCredentials(response);
           resolve();
         })
         .catch(error => {
@@ -39,13 +49,7 @@ export default {
           email: creds.email,
         })
         .then(response => {
-          const expiryDate = moment.unix(response.headers.expiry);
+          setAuthCredentials(response);
-          Cookies.set('auth_data', response.headers, {
-            expires: expiryDate.diff(moment(), 'days'),
-          });
-          Cookies.set('user', response.data.data, {
-            expires: expiryDate.diff(moment(), 'days'),
-          });
           resolve(response);
         })
         .catch(error => {
@@ -64,9 +68,7 @@ export default {
         })
         .catch(error => {
           if (error.response.status === 401) {
-            Cookies.remove('auth_data');
+            clearCookiesOnLogout();
-            Cookies.remove('user');
-            window.location = frontendURL('login');
           }
           reject(error);
         });
@@ -79,9 +81,7 @@ export default {
       axios
         .delete(urlData.url)
         .then(response => {
-          Cookies.remove('auth_data');
+          clearCookiesOnLogout();
-          Cookies.remove('user');
-          window.location = frontendURL('login');
           resolve(response);
         })
         .catch(error => {
@@ -122,17 +122,8 @@ export default {
   },
 
   verifyPasswordToken({ confirmationToken }) {
-    return new Promise((resolve, reject) => {
+    return axios.post('auth/confirmation', {
-      axios
-        .post('auth/confirmation', {
       confirmation_token: confirmationToken,
-        })
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(error.response);
-        });
     });
   },
 
@@ -162,15 +153,6 @@ export default {
 
   resetPassword({ email }) {
     const urlData = endPoints('resetPassword');
-    return new Promise((resolve, reject) => {
+    return axios.post(urlData.url, { email });
-      axios
-        .post(urlData.url, { email })
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(error.response);
-        });
-    });
   },
 };

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) => {
+    return axios.post(urlData.url, urlData.params);
-      axios
-        .post(urlData.url, urlData.params)
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
-    });
-    return fetchPromise;
   },
 
   addAgentsToChannel(inboxId, agentsId) {
     const urlData = endPoints('addAgentsToChannel');
     urlData.params.inbox_id = inboxId;
     urlData.params.user_ids = agentsId;
-    const fetchPromise = new Promise((resolve, reject) => {
+    return axios.post(urlData.url, urlData.params);
-      axios
-        .post(urlData.url, urlData.params)
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
-    });
-    return fetchPromise;
   },
 
   fetchFacebookPages(token) {
     const urlData = endPoints('fetchFacebookPages');
     urlData.params.omniauth_token = token;
-    const fetchPromise = new Promise((resolve, reject) => {
+    return axios.post(urlData.url, urlData.params);
-      axios
-        .post(urlData.url, urlData.params)
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
-    });
-    return fetchPromise;
   },
 };

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`,

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 { url } = endPoints('reports').account(metric, from, to);
-    const fetchPromise = new Promise((resolve, reject) => {
+    return axios.get(url);
-      axios
-        .get(urlData.url)
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
-    });
-    return fetchPromise;
   },
   getAccountSummary(accountId, from, to) {
     const urlData = endPoints('reports').accountSummary(accountId, from, to);
-    const fetchPromise = new Promise((resolve, reject) => {
+    return axios.get(urlData.url);
-      axios
-        .get(urlData.url)
-        .then(response => {
-          resolve(response);
-        })
-        .catch(error => {
-          reject(Error(error));
-        });
-    });
-    return fetchPromise;
   },
 };

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

app/javascript/dashboard/components/ChatList.vue

@@ -71,7 +71,7 @@ export default {
 
     this.$store.dispatch('emptyAllConversations');
     this.fetchData();
-    this.$store.dispatch('fetchAgents');
+    this.$store.dispatch('agents/get');
   },
   computed: {
     ...mapGetters({

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -76,7 +76,7 @@ export default {
 
   computed: {
     ...mapGetters({
-      agents: 'getVerifiedAgents',
+      agents: 'agents/getVerifiedAgents',
       currentChat: 'getSelectedChat',
     }),
     agentList() {

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 { mapGetters } from 'vuex';
-import PageHeader from '../SettingsSubPageHeader';
 
 const agentImg = require('assets/images/agent.svg');
 
 export default {
-  props: [
+  props: ['onClose'],
-    'onClose',
-  ],
-  components: {
-    PageHeader,
-  },
   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() {
+    showAlert(message) {
-      bus.$emit('newToastMessage', this.addAgentsApi.message);
+      bus.$emit('newToastMessage', message);
     },
-    resetForm() {
+    async addAgent() {
-      this.agentName = this.agentEmail = '';
+      try {
-      this.$v.agentName.$reset();
+        await this.$store.dispatch('agents/create', {
-      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();
-        this.onClose();
-      })
-      .catch(() => {
-        this.addAgentsApi.showLoading = false;
-        this.addAgentsApi.message = this.$t('AGENT_MGMT.ADD.API.ERROR_MESSAGE');
-        this.showAlert();
         });
+        this.showAlert(this.$t('AGENT_MGMT.ADD.API.SUCCESS_MESSAGE'));
+        this.onClose();
+      } catch (error) {
+        this.showAlert(this.$t('AGENT_MGMT.ADD.API.ERROR_MESSAGE'));
+      }
     },
   },
 };

app/javascript/dashboard/routes/dashboard/settings/agents/DeleteAgent.vue

@@ -1,12 +1,6 @@
 <template>
-  <modal
+  <modal :show.sync="show" :on-close="onClose">
-    :show.sync="show"
+    <woot-modal-header :header-title="title" :header-content="message" />
-    :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,

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() {
+    showAlert(message) {
-      bus.$emit('newToastMessage', this.editAgentsApi.message);
+      bus.$emit('newToastMessage', message);
     },
-    resetForm() {
+    async editAgent() {
-      this.agentName = '';
+      try {
-      this.agentType = '';
+        await this.$store.dispatch('agents/update', {
-      this.$v.agentName.$reset();
-      this.$v.agentType.$reset();
-    },
-    editAgent() {
-      // Show loading on button
-      this.editAgentsApi.showLoading = true;
-      // Make API Calls
-      this.$store
-        .dispatch('editAgent', {
           id: this.id,
           name: this.agentName,
           role: this.agentType.name.toLowerCase(),
-        })
+        });
-        .then(() => {
+        this.showAlert(this.$t('AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE'));
-          // 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 (error) {
-        })
+        console.log(error);
-        .catch(() => {
+        this.showAlert(this.$t('AGENT_MGMT.EDIT.API.ERROR_MESSAGE'));
-          this.editAgentsApi.showLoading = false;
+      }
-          this.editAgentsApi.message = this.$t(
-            'AGENT_MGMT.EDIT.API.ERROR_MESSAGE'
-          );
-          this.showAlert();
-        });
     },
-    resetPassword() {
+    async resetPassword() {
-      // Call resetPassword from Auth Service
+      try {
-      Auth.resetPassword(this.agentCredentials)
+        await Auth.resetPassword(this.agentCredentials);
-        .then(() => {
+        this.showAlert(
-          this.editAgentsApi.message = this.$t(
+          this.$t('AGENT_MGMT.EDIT.PASSWORD_RESET.ADMIN_SUCCESS_MESSAGE')
-            'AGENT_MGMT.EDIT.PASSWORD_RESET.ADMIN_SUCCESS_MESSAGE'
         );
-          this.showAlert();
+      } catch (error) {
-        })
+        this.showAlert(this.$t('AGENT_MGMT.EDIT.PASSWORD_RESET.ERROR_MESSAGE'));
-        .catch(() => {
+      }
-          this.editAgentsApi.message = this.$t(
-            'AGENT_MGMT.EDIT.PASSWORD_RESET.ERROR_MESSAGE'
-          );
-          this.showAlert();
-        });
     },
   },
 };

app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue

@@ -13,17 +13,17 @@
     <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">
+        <div v-else>
+          <p v-if="!agentList.length">
             {{ $t('AGENT_MGMT.LIST.404') }}
           </p>
-        <table v-if="!fetchStatus && agentList.length" class="woot-table">
+          <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)"
@@ -49,28 +49,29 @@
                 </td>
                 <!-- Actions -->
                 <td>
-                <div v-if="showActions(agent)" class="button-wrapper">
+                  <div class="button-wrapper">
-                  <div @click="openEditPopup(agent)">
                     <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>
         </div>
+      </div>
       <div class="small-4 columns">
         <span v-html="$t('AGENT_MGMT.SIDEBAR_TXT')"></span>
       </div>
@@ -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',
+      agentList: 'agents/getAgents',
-      fetchStatus: 'getAgentFetchStatus',
+      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(
+        return this.verifiedAdministrators().length !== 1;
-          item => item.role === 'administrator'
-        );
-        return adminList.length !== 1;
       }
       return true;
     },
-    // List Functions
+    verifiedAdministrators() {
-    // Gravatar URL
+      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) {
+    async deleteAgent(id) {
-      this.$store
+      try {
-        .dispatch('deleteAgent', {
+        await this.$store.dispatch('agents/delete', id);
-          id,
-        })
-        .then(() => {
         this.showAlert(this.$t('AGENT_MGMT.DELETE.API.SUCCESS_MESSAGE'));
-        })
+      } catch (error) {
-        .catch(() => {
         this.showAlert(this.$t('AGENT_MGMT.DELETE.API.ERROR_MESSAGE'));
-        });
+      }
     },
     // Show SnackBar
     showAlert(message) {

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: {

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

app/javascript/dashboard/store/getters.js

@@ -1,4 +0,0 @@
-/* eslint arrow-body-style: ["error", "always"] */
-// export default (state) => {
-
-// };

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

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,
-};

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

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

@@ -1,6 +1,4 @@
-/* eslint no-console: 0 */
+import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
-/* eslint no-param-reassign: 0 */
-/* eslint no-shadow: 0 */
 import * as types from '../mutation-types';
 import CannedResponseAPI from '../../api/cannedResponse';
 
@@ -87,27 +85,10 @@ const mutations = {
     };
   },
 
-  [types.default.SET_CANNED](_state, data) {
+  [types.default.SET_CANNED]: MutationHelpers.set,
-    _state.records = data;
+  [types.default.ADD_CANNED]: MutationHelpers.create,
-  },
+  [types.default.EDIT_CANNED]: MutationHelpers.update,
-
+  [types.default.DELETE_CANNED]: MutationHelpers.destroy,
-  [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
-    );
-  },
 };
 
 export default {

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

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

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

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([]);
+    });
+  });
+});

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',

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