Feature: Add ability to disable auto assignment of conversations (#513)

2020-02-19 10:10:03 +01:00
parent e0afb84502
commit 30e5edf6dc
15 changed files with 377 additions and 230 deletions
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -74,7 +74,12 @@
    "EDIT": {
      "API": {
        "SUCCESS_MESSAGE": "Widget color updated successfully",
+        "AUTO_ASSIGNMENT_SUCCESS_MESSAGE": "Auto assignment updated successfully",
        "ERROR_MESSAGE": "Could not update widget color. Please try again later."
+      },
+      "AUTO_ASSIGNMENT": {
+        "ENABLED": "Enabled",
+        "DISABLED": "Disabled"
      }
    },
    "DELETE": {
@@ -96,7 +101,9 @@
      "MESSENGER_SUB_HEAD": "Place this button inside your body tag",
      "INBOX_AGENTS": "Agents",
      "INBOX_AGENTS_SUB_TEXT": "Add or remove agents from this inbox",
-      "UPDATE": "Update"
+      "UPDATE": "Update",
+      "AUTO_ASSIGNMENT": "Enable auto assignment",
+      "AUTO_ASSIGNMENT_SUB_TEXT": "Enable or disable the automatic assignment of available agents on new conversations"
    }
  }
 }
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -60,6 +60,20 @@
        @select="$v.selectedAgents.$touch"
      />
    </div>
+    <div class="settings--content">
+      <settings-form-header
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT')"
+        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT_SUB_TEXT')"
+        :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+        :is-updating="uiFlags.isUpdatingAutoAssignment"
+        @update="updateAutoAssignment"
+      >
+      </settings-form-header>
+      <select v-model="autoAssignment">
+        <option value="true">{{ $t('INBOX_MGMT.EDIT.AUTO_ASSIGNMENT.ENABLED') }}</option>
+        <option value="false">{{ $t('INBOX_MGMT.EDIT.AUTO_ASSIGNMENT.DISABLED') }}</option>
+      </select>
+    </div>
  </div>
 </template>

@@ -82,6 +96,7 @@ export default {
  data() {
    return {
      selectedAgents: [],
+      autoAssignment: false,
      isUpdating: false,
      isAgentListUpdating: false,
    };
@@ -123,6 +138,7 @@ export default {
      this.$store.dispatch('agents/get');
      this.$store.dispatch('inboxes/get').then(() => {
        this.fetchAttachedAgents();
+        this.autoAssignment = this.inbox.enable_auto_assignment;
      });
    },
    async fetchAttachedAgents() {
@@ -172,6 +188,19 @@ export default {
        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
      }
    },
+    async updateAutoAssignment() {
+      try {
+        await this.$store.dispatch('inboxes/updateAutoAssignment', {
+          id: this.currentInboxId,
+          inbox: {
+            enable_auto_assignment: this.autoAssignment,
+          },
+        });
+        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.AUTO_ASSIGNMENT_SUCCESS_MESSAGE'));
+      } catch (error) {
+        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.AUTO_ASSIGNMENT_SUCCESS_MESSAGE'));
+      }
+    },
    getWidgetColor() {
      return typeof this.inbox.widget_color !== 'object'
        ? this.inbox.widget_color
--- a/app/javascript/dashboard/store/modules/inboxes.js
+++ b/app/javascript/dashboard/store/modules/inboxes.js
@@ -11,6 +11,7 @@ export const state = {
    isFetchingItem: false,
    isCreating: false,
    isUpdating: false,
+    isUpdatingAutoAssignment: false,
    isDeleting: false,
  },
 };
@@ -76,6 +77,17 @@ export const actions = {
      throw new Error(error);
    }
  },
+  updateAutoAssignment: async ({ commit }, { id, ...inboxParams }) => {
+    commit(types.default.SET_INBOXES_UI_FLAG, { isUpdatingAutoAssignment: true });
+    try {
+      const response = await InboxesAPI.update(id, inboxParams);
+      commit(types.default.EDIT_INBOXES, response.data);
+      commit(types.default.SET_INBOXES_UI_FLAG, { isUpdatingAutoAssignment: false });
+    } catch (error) {
+      commit(types.default.SET_INBOXES_UI_FLAG, { isUpdatingAutoAssignment: false });
+      throw new Error(error);
+    }
+  },
  delete: async ({ commit }, inboxId) => {
    commit(types.default.SET_INBOXES_UI_FLAG, { isDeleting: true });
    try {
--- a/app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js
@@ -91,6 +91,31 @@ describe('#actions', () => {
      ]);
    });
  });
+  
+  describe('#updateAutoAssignment', () => {
+    it('sends correct actions if API is success', async () => {
+      let updatedInbox = inboxList[0];
+      updatedInbox.enable_auto_assignment = false;
+
+      axios.patch.mockResolvedValue({ data: updatedInbox });
+      await actions.updateAutoAssignment({ commit }, { id: updatedInbox.id, inbox: { enable_auto_assignment: false} });
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdatingAutoAssignment: true }],
+        [types.default.EDIT_INBOXES, updatedInbox],
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdatingAutoAssignment: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.patch.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.updateAutoAssignment({ commit }, { id: inboxList[0].id, inbox: { enable_auto_assignment: false} })
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdatingAutoAssignment: true }],
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdatingAutoAssignment: false }],
+      ]);
+    });
+  });

  describe('#delete', () => {
    it('sends correct actions if API is success', async () => {
--- a/app/javascript/dashboard/store/modules/specs/inboxes/fixtures.js
+++ b/app/javascript/dashboard/store/modules/specs/inboxes/fixtures.js
@@ -8,6 +8,7 @@ export default [
    page_id: '12345',
    widget_color: null,
    website_token: null,
+    enable_auto_assignment: true,
  },
  {
    id: 2,
@@ -18,6 +19,7 @@ export default [
    page_id: null,
    widget_color: '#7B64FF',
    website_token: 'randomid123',
+    enable_auto_assignment: true,
  },
  {
    id: 3,
@@ -28,6 +30,7 @@ export default [
    page_id: null,
    widget_color: '#68BC00',
    website_token: 'randomid124',
+    enable_auto_assignment: true,
  },
  {
    id: 4,
@@ -38,5 +41,6 @@ export default [
    page_id: null,
    widget_color: '#68BC00',
    website_token: 'randomid125',
+    enable_auto_assignment: true,
  },
 ];
--- a/app/javascript/dashboard/store/modules/specs/inboxes/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/inboxes/getters.spec.js
@@ -22,6 +22,7 @@ describe('#getters', () => {
      page_id: '12345',
      widget_color: null,
      website_token: null,
+      enable_auto_assignment: true,
    });
  });

@@ -32,6 +33,7 @@ describe('#getters', () => {
        isFetchingItem: false,
        isCreating: false,
        isUpdating: false,
+        isUpdatingAutoAssignment: false,
        isDeleting: false,
      },
    };
@@ -40,6 +42,7 @@ describe('#getters', () => {
      isFetchingItem: false,
      isCreating: false,
      isUpdating: false,
+      isUpdatingAutoAssignment: false,
      isDeleting: false,
    });
  });