feat: Adds the ability to have custom view for conversations (#3666)

* feat: Adds the ability to save custom filters and display folders on the sidebar * Minor fixes * Review fixes * Review fixes * i18n fixes * Shows conversations when the user click on the folder sidebar item * Spacing fixes * Review fixes Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
2022-01-17 09:18:54 +05:30 · 2022-01-17 09:18:54 +05:30 · 4398734bdf
commit 4398734bdf
parent 290196d43b
21 changed files with 594 additions and 23 deletions
--- a/app/javascript/dashboard/api/customViews.js
+++ b/app/javascript/dashboard/api/customViews.js
@ -0,0 +1,14 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class CustomViewsAPI extends ApiClient {
+  constructor() {
+    super('custom_filters', { accountScoped: true });
+  }
+
+  getCustomViews() {
+    return axios.get(this.url);
+  }
+}
+
+export default new CustomViewsAPI();
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@ -1,26 +1,39 @@
-l<template>
+<template>
  <div class="conversations-list-wrap">
    <slot></slot>
-    <div class="chat-list__top" :class="{ filter__applied: hasAppliedFilters }">
+    <div
+      class="chat-list__top"
+      :class="{ filter__applied: hasAppliedFiltersOrActiveCustomViews }"
+    >
      <h1 class="page-title text-truncate" :title="pageTitle">
        {{ pageTitle }}
      </h1>

      <div class="filter--actions">
        <chat-filter
-          v-if="!hasAppliedFilters"
+          v-if="!hasAppliedFiltersOrActiveCustomViews"
          @statusFilterChange="updateStatusType"
        />
+        <div v-if="hasAppliedFilters && !hasActiveCustomViews">
+          <woot-button
+            v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON')"
+            size="tiny"
+            variant="smooth"
+            color-scheme="secondary"
+            icon="save"
+            @click="onClickOpenAddCustomViewsModal"
+          />
+          <woot-button
+            v-tooltip.top-end="$t('FILTER.CLEAR_BUTTON_LABEL')"
+            size="tiny"
+            variant="smooth"
+            color-scheme="alert"
+            icon="dismiss-circle"
+            @click="resetAndFetchData"
+          />
+        </div>
        <woot-button
-          v-else
-          size="small"
-          variant="clear"
-          color-scheme="alert"
-          @click="resetAndFetchData"
-        >
-          {{ $t('FILTER.CLEAR_BUTTON_LABEL') }}
-        </woot-button>
-        <woot-button
+          v-if="!hasActiveCustomViews"
          v-tooltip.top-end="$t('FILTER.TOOLTIP_LABEL')"
          variant="clear"
          color-scheme="secondary"
@ -33,8 +46,14 @@ l<template>
      </div>
    </div>

+    <add-custom-views
+      v-if="showAddCustomViewsModal"
+      :custom-views-query="customViewsQuery"
+      @close="onCloseAddCustomViewsModal"
+    />
+
    <chat-type-tabs
-      v-if="!hasAppliedFilters"
+      v-if="!hasAppliedFiltersOrActiveCustomViews"
      :items="assigneeTabItems"
      :active-tab="activeAssigneeTab"
      class="tab--chat-type"
@ -51,6 +70,7 @@ l<template>
        :key="chat.id"
        :active-label="label"
        :team-id="teamId"
+        :custom-views-id="customViewsId"
        :chat="chat"
        :conversation-type="conversationType"
        :show-assignee="showAssigneeInConversationCard"
@ -108,6 +128,7 @@ import conversationMixin from '../mixins/conversations';
 import wootConstants from '../constants';
 import advancedFilterTypes from './widgets/conversation/advancedFilterItems';
 import filterQueryGenerator from '../helper/filterQueryGenerator.js';
+import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews';

 import {
  hasPressedAltAndJKey,
@ -116,6 +137,7 @@ import {

 export default {
  components: {
+    AddCustomViews,
    ChatTypeTabs,
    ConversationCard,
    ChatFilter,
@ -139,6 +161,10 @@ export default {
      type: String,
      default: '',
    },
+    customViewsId: {
+      type: [String, Number],
+      default: 0,
+    },
  },
  data() {
    return {
@ -149,6 +175,8 @@ export default {
        ...filter,
        attributeName: this.$t(`FILTER.ATTRIBUTES.${filter.attributeI18nKey}`),
      })),
+      customViewsQuery: {},
+      showAddCustomViewsModal: false,
    };
  },
  computed: {
@ -163,10 +191,24 @@ export default {
      activeInbox: 'getSelectedInbox',
      conversationStats: 'conversationStats/getStats',
      appliedFilters: 'getAppliedConversationFilters',
+      customViews: 'customViews/getCustomViews',
    }),
    hasAppliedFilters() {
      return this.appliedFilters.length;
    },
+    hasActiveCustomViews() {
+      return this.activeCustomView.length > 0 && this.customViewsId !== 0;
+    },
+    hasAppliedFiltersOrActiveCustomViews() {
+      return this.hasAppliedFilters || this.hasActiveCustomViews;
+    },
+    savedCustomViewsValue() {
+      if (this.hasActiveCustomViews) {
+        const payload = this.activeCustomView[0].query;
+        this.fetchSavedFilteredConversations(payload);
+      }
+      return {};
+    },
    assigneeTabItems() {
      return this.$t('CHAT_LIST.ASSIGNEE_TYPE_TABS').map(item => {
        const count = this.conversationStats[item.COUNT_KEY] || 0;
@ -189,7 +231,9 @@ export default {
      );
    },
    currentPageFilterKey() {
-      return this.hasAppliedFilters ? 'appliedFilters' : this.activeAssigneeTab;
+      return this.hasAppliedFiltersOrActiveCustomViews
+        ? 'appliedFilters'
+        : this.activeAssigneeTab;
    },
    currentFiltersPage() {
      return this.$store.getters['conversationPage/getCurrentPageFilter'](
@ -212,6 +256,9 @@ export default {
        conversationType: this.conversationType
          ? this.conversationType
          : undefined,
+        customViews: this.hasActiveCustomViews
+          ? this.savedCustomViewsValue
+          : undefined,
      };
    },
    pageTitle() {
@ -227,11 +274,14 @@ export default {
      if (this.conversationType === 'mention') {
        return this.$t('CHAT_LIST.MENTION_HEADING');
      }
+      if (this.hasActiveCustomViews) {
+        return this.activeCustomView[0].name;
+      }
      return this.$t('CHAT_LIST.TAB_HEADING');
    },
    conversationList() {
      let conversationList = [];
-      if (!this.hasAppliedFilters) {
+      if (!this.hasAppliedFiltersOrActiveCustomViews) {
        const filters = this.conversationFilters;
        if (this.activeAssigneeTab === 'me') {
          conversationList = [...this.mineChatsList(filters)];
@ -246,6 +296,14 @@ export default {

      return conversationList;
    },
+    activeCustomView() {
+      if (this.customViewsId) {
+        return this.customViews.filter(
+          view => view.id === Number(this.customViewsId)
+        );
+      }
+      return [];
+    },
    activeTeam() {
      if (this.teamId) {
        return this.$store.getters['teams/getTeam'](this.teamId);
@ -266,6 +324,9 @@ export default {
    conversationType() {
      this.resetAndFetchData();
    },
+    activeCustomView() {
+      this.resetAndFetchData();
+    },
  },
  mounted() {
    this.$store.dispatch('setChatFilter', this.activeStatus);
@ -280,10 +341,17 @@ export default {
      if (this.$route.name !== 'home') {
        this.$router.push({ name: 'home' });
      }
+      this.customViewsQuery = { payload: payload };
      this.$store.dispatch('conversationPage/reset');
      this.$store.dispatch('emptyAllConversations');
      this.fetchFilteredConversations(payload);
    },
+    onClickOpenAddCustomViewsModal() {
+      this.showAddCustomViewsModal = true;
+    },
+    onCloseAddCustomViewsModal() {
+      this.showAddCustomViewsModal = false;
+    },
    onToggleAdvanceFiltersModal() {
      this.showAdvancedFilters = !this.showAdvancedFilters;
    },
@ -335,6 +403,13 @@ export default {
      this.$store.dispatch('conversationPage/reset');
      this.$store.dispatch('emptyAllConversations');
      this.$store.dispatch('clearConversationFilters');
+      if (this.hasActiveCustomViews) {
+        const payload = this.activeCustomView[0].query;
+        this.fetchSavedFilteredConversations(payload);
+      }
+      if (this.customViewsId) {
+        return;
+      }
      this.fetchConversations();
    },
    fetchConversations() {
@ -343,8 +418,12 @@ export default {
        .then(() => this.$emit('conversation-load'));
    },
    loadMoreConversations() {
-      if (!this.hasAppliedFilters) {
+      if (!this.hasAppliedFiltersOrActiveCustomViews) {
        this.fetchConversations();
+      }
+      if (this.hasActiveCustomViews) {
+        const payload = this.activeCustomView[0].query;
+        this.fetchSavedFilteredConversations(payload);
      } else {
        this.fetchFilteredConversations(this.appliedFilters);
      }
@ -359,6 +438,15 @@ export default {
        .then(() => this.$emit('conversation-load'));
      this.showAdvancedFilters = false;
    },
+    fetchSavedFilteredConversations(payload) {
+      let page = this.currentFiltersPage + 1;
+      this.$store
+        .dispatch('fetchFilteredConversations', {
+          queryData: payload,
+          page,
+        })
+        .then(() => this.$emit('conversation-load'));
+    },
    updateAssigneeTab(selectedTab) {
      if (this.activeAssigneeTab !== selectedTab) {
        bus.$emit('clearSearchInput');
@ -413,7 +501,7 @@ export default {
 }

 .filter__applied {
-  padding: var(--space-slab) 0 !important;
+  padding: 0 0 var(--space-slab) 0 !important;
  border-bottom: 1px solid var(--color-border);
 }
 </style>
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@ -14,6 +14,7 @@
      :inboxes="inboxes"
      :labels="labels"
      :teams="teams"
+      :custom-views="customViews"
      :menu-config="activeSecondaryMenu"
      :current-role="currentRole"
      @add-label="showAddLabelPopup"
@ -87,6 +88,7 @@ export default {
      currentUser: 'getCurrentUser',
      globalConfig: 'globalConfig/get',
      inboxes: 'inboxes/getInboxes',
+      customViews: 'customViews/getCustomViews',
      accountId: 'getCurrentAccountId',
      currentRole: 'getCurrentRole',
      labels: 'labels/getLabelsOnSidebar',
@ -122,6 +124,7 @@ export default {
  mounted() {
    this.$store.dispatch('labels/get');
    this.$store.dispatch('inboxes/get');
+    this.$store.dispatch('customViews/get');
    this.$store.dispatch('notifications/unReadCount');
    this.$store.dispatch('teams/get');
    this.$store.dispatch('attributes/get');
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/conversations.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/conversations.js
@ -14,6 +14,8 @@ const conversations = accountId => ({
    'conversations_through_team',
    'conversation_mentions',
    'conversation_through_mentions',
+    'custom_view_conversations',
+    'conversations_through_custom_view',
  ],
  menuItems: [
    {
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
@ -40,6 +40,10 @@ export default {
      type: Array,
      default: () => [],
    },
+    customViews: {
+      type: Array,
+      default: () => [],
+    },
    menuConfig: {
      type: Object,
      default: () => {},
@ -150,11 +154,35 @@ export default {
        })),
      };
    },
+    customViewsSection() {
+      return {
+        icon: 'folder',
+        label: 'CUSTOM_VIEWS',
+        hasSubMenu: true,
+        key: 'custom_view',
+        children: this.customViews
+          .filter(view => view.filter_type === 'conversation')
+          .map(view => ({
+            id: view.id,
+            label: view.name,
+            truncateLabel: true,
+            toState: frontendURL(
+              `accounts/${this.accountId}/custom_view/${view.id}`
+            ),
+          })),
+      };
+    },
    additionalSecondaryMenuItems() {
      let conversationMenuItems = [this.inboxSection, this.labelSection];
      if (this.teams.length) {
        conversationMenuItems = [this.teamSection, ...conversationMenuItems];
      }
+      if (this.customViews.length) {
+        conversationMenuItems = [
+          this.customViewsSection,
+          ...conversationMenuItems,
+        ];
+      }
      return {
        conversations: conversationMenuItems,
        contacts: [this.contactLabelSection],
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@ -7,7 +7,7 @@
      v-else
      class="secondary-menu--title secondary-menu--link fs-small"
      :class="computedClass"
-      :to="menuItem.toState"
+      :to="menuItem && menuItem.toState"
    >
      <fluent-icon
        :icon="menuItem.icon"
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@ -130,6 +130,10 @@ export default {
      type: [String, Number],
      default: 0,
    },
+    customViewsId: {
+      type: [String, Number],
+      default: 0,
+    },
    showAssignee: {
      type: Boolean,
      default: false,
@ -248,6 +252,7 @@ export default {
        id: chat.id,
        label: this.activeLabel,
        teamId: this.teamId,
+        customViewsId: this.customViewsId,
        conversationType: this.conversationType,
      });
      router.push({ path: frontendURL(path) });
--- a/app/javascript/dashboard/helper/URLHelper.js
+++ b/app/javascript/dashboard/helper/URLHelper.js
@ -12,6 +12,7 @@ export const conversationUrl = ({
  label,
  teamId,
  conversationType = '',
+  customViewsId,
 }) => {
  let url = `accounts/${accountId}/conversations/${id}`;
  if (activeInbox) {
@ -20,6 +21,8 @@ export const conversationUrl = ({
    url = `accounts/${accountId}/label/${label}/conversations/${id}`;
  } else if (teamId) {
    url = `accounts/${accountId}/team/${teamId}/conversations/${id}`;
+  } else if (customViewsId && customViewsId !== 0) {
+    url = `accounts/${accountId}/custom_view/${customViewsId}/conversations/${id}`;
  } else if (conversationType === 'mention') {
    url = `accounts/${accountId}/mentions/conversations/${id}`;
  }
--- a/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
@ -32,6 +32,20 @@
      "BROWSER_LANGUAGE": "Browser Language",
      "COUNTRY_NAME": "Country Name",
      "REFERER_LINK": "Referer link"
+    },
+    "CUSTOM_VIEWS": {
+      "ADD": {
+        "TITLE": "Do you want to save this filter?",
+        "LABEL": "Name this filter",
+        "PLACEHOLDER": "Enter a name for this filter",
+        "ERROR_MESSAGE": "Name is required",
+        "SAVE_BUTTON": "Save filter",
+        "CANCEL_BUTTON": "Cancel",
+        "API": {
+          "SUCCESS_MESSAGE": "Custom view created successfully",
+          "ERROR_MESSAGE": "Error while creating custom view"
+        }
+      }
    }
  }
 }
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@ -72,11 +72,7 @@
      },
      "AVAILABILITY": {
        "LABEL": "Availability",
-        "STATUSES_LIST": [
-          "Online",
-          "Busy",
-          "Offline"
-        ]
+        "STATUSES_LIST": ["Online", "Busy", "Offline"]
      },
      "EMAIL": {
        "LABEL": "Your email address",
@ -153,6 +149,7 @@
    "CUSTOM_ATTRIBUTES": "Custom Attributes",
    "AUTOMATION": "Automation",
    "TEAMS": "Teams",
+    "CUSTOM_VIEWS": "Folders",
    "ALL_CONTACTS": "All Contacts",
    "TAGGED_WITH": "Tagged with",
    "NEW_LABEL": "New label",
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@ -5,6 +5,7 @@
      :label="label"
      :team-id="teamId"
      :conversation-type="conversationType"
+      :custom-views-id="customViewsId"
      @conversation-load="onConversationLoad"
    >
      <pop-over-search />
@ -54,6 +55,10 @@ export default {
      type: String,
      default: '',
    },
+    customViewsId: {
+      type: [String, Number],
+      default: 0,
+    },
  },
  data() {
    return {
--- a/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
@ -83,6 +83,25 @@ export default {
        teamId: route.params.teamId,
      }),
    },
+    {
+      path: frontendURL('accounts/:accountId/custom_view/:id'),
+      name: 'custom_view_conversations',
+      roles: ['administrator', 'agent'],
+      component: ConversationView,
+      props: route => ({ customViewsId: route.params.id }),
+    },
+    {
+      path: frontendURL(
+        'accounts/:accountId/custom_view/:id/conversations/:conversation_id'
+      ),
+      name: 'conversations_through_custom_view',
+      roles: ['administrator', 'agent'],
+      component: ConversationView,
+      props: route => ({
+        conversationId: route.params.conversation_id,
+        customViewsId: route.params.id,
+      }),
+    },
    {
      path: frontendURL('accounts/:accountId/mentions/conversations'),
      name: 'conversation_mentions',
--- a/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
+++ b/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
@ -0,0 +1,97 @@
+<template>
+  <woot-modal :show.sync="show" :on-close="onClose">
+    <woot-modal-header :header-title="$t('FILTER.CUSTOM_VIEWS.ADD.TITLE')" />
+    <form class="row" @submit.prevent="saveCustomViews">
+      <div class="medium-12 columns">
+        <woot-input
+          v-model="name"
+          :label="$t('FILTER.CUSTOM_VIEWS.ADD.LABEL')"
+          type="text"
+          :error="
+            $v.name.$error ? $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE') : ''
+          "
+          :class="{ error: $v.name.$error }"
+          :placeholder="$t('FILTER.CUSTOM_VIEWS.ADD.PLACEHOLDER')"
+          @blur="$v.name.$touch"
+        />
+
+        <div class="modal-footer">
+          <woot-button :disabled="isButtonDisabled">
+            {{ $t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON') }}
+          </woot-button>
+          <woot-button variant="clear" @click.prevent="onClose">
+            {{ $t('FILTER.CUSTOM_VIEWS.ADD.CANCEL_BUTTON') }}
+          </woot-button>
+        </div>
+      </div>
+    </form>
+  </woot-modal>
+</template>
+
+<script>
+import { required, minLength } from 'vuelidate/lib/validators';
+import alertMixin from 'shared/mixins/alertMixin';
+
+export default {
+  mixins: [alertMixin],
+  props: {
+    filterType: {
+      type: Number,
+      default: 0,
+    },
+    customViewsQuery: {
+      type: Object,
+      default: () => {},
+    },
+  },
+
+  data() {
+    return {
+      show: true,
+      name: '',
+    };
+  },
+
+  computed: {
+    isButtonDisabled() {
+      return this.$v.name.$invalid;
+    },
+  },
+
+  validations: {
+    name: {
+      required,
+      minLength: minLength(1),
+    },
+  },
+
+  methods: {
+    onClose() {
+      this.$emit('close');
+    },
+    async saveCustomViews() {
+      this.$v.$touch();
+      if (this.$v.$invalid) {
+        return;
+      }
+      try {
+        await this.$store.dispatch('customViews/create', {
+          name: this.name,
+          filter_type: this.filterType,
+          query: this.customViewsQuery,
+        });
+        this.alertMessage = this.$t(
+          'FILTER.CUSTOM_VIEWS.ADD.API.SUCCESS_MESSAGE'
+        );
+        this.onClose();
+      } catch (error) {
+        const errorMessage = error?.message;
+        this.alertMessage =
+          errorMessage || this.$t('FILTER.CUSTOM_VIEWS.ADD.API.ERROR_MESSAGE');
+      } finally {
+        this.showAlert(this.alertMessage);
+      }
+    },
+  },
+};
+</script>
--- a/app/javascript/dashboard/store/index.js
+++ b/app/javascript/dashboard/store/index.js
@ -31,6 +31,7 @@ import teams from './modules/teams';
 import userNotificationSettings from './modules/userNotificationSettings';
 import webhooks from './modules/webhooks';
 import attributes from './modules/attributes';
+import customViews from './modules/customViews';

 Vue.use(Vuex);
 export default new Vuex.Store({
@ -65,5 +66,6 @@ export default new Vuex.Store({
    userNotificationSettings,
    webhooks,
    attributes,
+    customViews,
  },
 });
--- a/app/javascript/dashboard/store/modules/customViews.js
+++ b/app/javascript/dashboard/store/modules/customViews.js
@ -0,0 +1,79 @@
+import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
+import types from '../mutation-types';
+import CustomViewsAPI from '../../api/customViews';
+
+export const state = {
+  records: [],
+  uiFlags: {
+    isFetching: false,
+    isCreating: false,
+    isDeleting: false,
+  },
+};
+
+export const getters = {
+  getUIFlags(_state) {
+    return _state.uiFlags;
+  },
+  getCustomViews(_state) {
+    return _state.records;
+  },
+};
+
+export const actions = {
+  get: async function getCustomViews({ commit }) {
+    commit(types.SET_CUSTOM_VIEW_UI_FLAG, { isFetching: true });
+    try {
+      const response = await CustomViewsAPI.getCustomViews();
+      commit(types.SET_CUSTOM_VIEW, response.data);
+    } catch (error) {
+      // Ignore error
+    } finally {
+      commit(types.SET_CUSTOM_VIEW_UI_FLAG, { isFetching: false });
+    }
+  },
+  create: async function createCustomViews({ commit }, obj) {
+    commit(types.SET_CUSTOM_VIEW_UI_FLAG, { isCreating: true });
+    try {
+      const response = await CustomViewsAPI.create(obj);
+      commit(types.ADD_CUSTOM_VIEW, response.data);
+    } catch (error) {
+      const errorMessage = error?.response?.data?.message;
+      throw new Error(errorMessage);
+    } finally {
+      commit(types.SET_CUSTOM_VIEW_UI_FLAG, { isCreating: false });
+    }
+  },
+  delete: async ({ commit }, id) => {
+    commit(types.SET_CUSTOM_VIEW_UI_FLAG, { isDeleting: true });
+    try {
+      await CustomViewsAPI.delete(id);
+      commit(types.DELETE_CUSTOM_VIEW, id);
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      commit(types.SET_CUSTOM_VIEW_UI_FLAG, { isDeleting: false });
+    }
+  },
+};
+
+export const mutations = {
+  [types.SET_CUSTOM_VIEW_UI_FLAG](_state, data) {
+    _state.uiFlags = {
+      ..._state.uiFlags,
+      ...data,
+    };
+  },
+
+  [types.ADD_CUSTOM_VIEW]: MutationHelpers.create,
+  [types.SET_CUSTOM_VIEW]: MutationHelpers.set,
+  [types.DELETE_CUSTOM_VIEW]: MutationHelpers.destroy,
+};
+
+export default {
+  namespaced: true,
+  actions,
+  state,
+  getters,
+  mutations,
+};
--- a/app/javascript/dashboard/store/modules/specs/customViews/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/customViews/actions.spec.js
@ -0,0 +1,72 @@
+import axios from 'axios';
+import { actions } from '../../customViews';
+import * as types from '../../../mutation-types';
+import customViewList 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: customViewList });
+      await actions.get({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isFetching: true }],
+        [types.default.SET_CUSTOM_VIEW, customViewList],
+        [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+    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_CUSTOM_VIEW_UI_FLAG, { isFetching: true }],
+        [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+
+  describe('#create', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({ data: customViewList[0] });
+      await actions.create({ commit }, customViewList[0]);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isCreating: true }],
+        [types.default.ADD_CUSTOM_VIEW, customViewList[0]],
+        [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isCreating: 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_CUSTOM_VIEW_UI_FLAG, { isCreating: true }],
+        [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+  });
+
+  describe('#delete', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.delete.mockResolvedValue({ data: customViewList[0] });
+      await actions.delete({ commit }, customViewList[0].id);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isDeleting: true }],
+        [types.default.DELETE_CUSTOM_VIEW, customViewList[0].id],
+        [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.delete({ commit }, customViewList[0].id)
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isDeleting: true }],
+        [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+  });
+});
--- a/app/javascript/dashboard/store/modules/specs/customViews/fixtures.js
+++ b/app/javascript/dashboard/store/modules/specs/customViews/fixtures.js
@ -0,0 +1,42 @@
+export default [
+  {
+    name: 'Custom view',
+    filter_type: 'conversation',
+    query: {
+      payload: [
+        {
+          attribute_key: 'assignee_id',
+          filter_operator: 'equal_to',
+          values: [45],
+          query_operator: 'and',
+        },
+        {
+          attribute_key: 'inbox_id',
+          filter_operator: 'equal_to',
+          values: [144],
+          query_operator: 'and',
+        },
+      ],
+    },
+  },
+  {
+    name: 'Custom view 1',
+    filter_type: 'conversation',
+    query: {
+      payload: [
+        {
+          attribute_key: 'browser_language',
+          filter_operator: 'equal_to',
+          values: ['eng'],
+          query_operator: 'or',
+        },
+        {
+          attribute_key: 'campaign_id',
+          filter_operator: 'equal_to',
+          values: [15],
+          query_operator: 'and',
+        },
+      ],
+    },
+  },
+];
--- a/app/javascript/dashboard/store/modules/specs/customViews/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/customViews/getters.spec.js
@ -0,0 +1,65 @@
+import { getters } from '../../customViews';
+import customViewList from './fixtures';
+
+describe('#getters', () => {
+  it('getCustomViews', () => {
+    const state = { records: customViewList };
+    expect(getters.getCustomViews(state)).toEqual([
+      {
+        name: 'Custom view',
+        filter_type: 'conversation',
+        query: {
+          payload: [
+            {
+              attribute_key: 'assignee_id',
+              filter_operator: 'equal_to',
+              values: [45],
+              query_operator: 'and',
+            },
+            {
+              attribute_key: 'inbox_id',
+              filter_operator: 'equal_to',
+              values: [144],
+              query_operator: 'and',
+            },
+          ],
+        },
+      },
+      {
+        name: 'Custom view 1',
+        filter_type: 'conversation',
+        query: {
+          payload: [
+            {
+              attribute_key: 'browser_language',
+              filter_operator: 'equal_to',
+              values: ['eng'],
+              query_operator: 'or',
+            },
+            {
+              attribute_key: 'campaign_id',
+              filter_operator: 'equal_to',
+              values: [15],
+              query_operator: 'and',
+            },
+          ],
+        },
+      },
+    ]);
+  });
+
+  it('getUIFlags', () => {
+    const state = {
+      uiFlags: {
+        isFetching: true,
+        isCreating: false,
+        isDeleting: false,
+      },
+    };
+    expect(getters.getUIFlags(state)).toEqual({
+      isFetching: true,
+      isCreating: false,
+      isDeleting: false,
+    });
+  });
+});
--- a/app/javascript/dashboard/store/modules/specs/customViews/mutations.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/customViews/mutations.spec.js
@ -0,0 +1,29 @@
+import types from '../../../mutation-types';
+import { mutations } from '../../customViews';
+import customViewList from './fixtures';
+
+describe('#mutations', () => {
+  describe('#SET_CUSTOM_VIEW', () => {
+    it('set custom view records', () => {
+      const state = { records: [] };
+      mutations[types.SET_CUSTOM_VIEW](state, customViewList);
+      expect(state.records).toEqual(customViewList);
+    });
+  });
+
+  describe('#ADD_CUSTOM_VIEW', () => {
+    it('push newly created custom views to the store', () => {
+      const state = { records: [customViewList] };
+      mutations[types.ADD_CUSTOM_VIEW](state, customViewList[0]);
+      expect(state.records).toEqual([customViewList, customViewList[0]]);
+    });
+  });
+
+  describe('#DELETE_CUSTOM_VIEW', () => {
+    it('delete custom view record', () => {
+      const state = { records: [customViewList[0]] };
+      mutations[types.DELETE_CUSTOM_VIEW](state, customViewList[0]);
+      expect(state.records).toEqual([customViewList[0]]);
+    });
+  });
+});
--- a/app/javascript/dashboard/store/mutation-types.js
+++ b/app/javascript/dashboard/store/mutation-types.js
@ -188,4 +188,10 @@ export default {
  ADD_CUSTOM_ATTRIBUTE: 'ADD_CUSTOM_ATTRIBUTE',
  EDIT_CUSTOM_ATTRIBUTE: 'EDIT_CUSTOM_ATTRIBUTE',
  DELETE_CUSTOM_ATTRIBUTE: 'DELETE_CUSTOM_ATTRIBUTE',
+
+  // Custom Views
+  SET_CUSTOM_VIEW_UI_FLAG: 'SET_CUSTOM_VIEW_UI_FLAG',
+  SET_CUSTOM_VIEW: 'SET_CUSTOM_VIEW',
+  ADD_CUSTOM_VIEW: 'ADD_CUSTOM_VIEW',
+  DELETE_CUSTOM_VIEW: 'DELETE_CUSTOM_VIEW',
 };
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@ -71,6 +71,7 @@
  "power-outline": "M8.204 4.82a.75.75 0 0 1 .634 1.36A7.51 7.51 0 0 0 4.5 12.991c0 4.148 3.358 7.51 7.499 7.51s7.499-3.362 7.499-7.51a7.51 7.51 0 0 0-4.323-6.804.75.75 0 1 1 .637-1.358 9.01 9.01 0 0 1 5.186 8.162c0 4.976-4.029 9.01-9 9.01C7.029 22 3 17.966 3 12.99a9.01 9.01 0 0 1 5.204-8.17ZM12 2.496a.75.75 0 0 1 .743.648l.007.102v7.5a.75.75 0 0 1-1.493.102l-.007-.102v-7.5a.75.75 0 0 1 .75-.75Z",
  "quote-outline": "M7.5 6a2.5 2.5 0 0 1 2.495 2.336l.005.206c-.01 3.555-1.24 6.614-3.705 9.223a.75.75 0 1 1-1.09-1.03c1.64-1.737 2.66-3.674 3.077-5.859A2.5 2.5 0 1 1 7.5 6Zm9 0a2.5 2.5 0 0 1 2.495 2.336l.005.206c-.01 3.56-1.238 6.614-3.705 9.223a.75.75 0 1 1-1.09-1.03c1.643-1.738 2.662-3.672 3.078-5.859A2.5 2.5 0 1 1 16.5 6Zm-9 1.5a1 1 0 1 0 .993 1.117l.007-.124a1 1 0 0 0-1-.993Zm9 0a1 1 0 1 0 .993 1.117l.007-.124a1 1 0 0 0-1-.993Z",
  "resize-large-outline": "M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v1.5a.75.75 0 0 1-1.5 0v-1.5A3.25 3.25 0 0 1 6.25 3h1.5a.75.75 0 0 1 0 1.5h-1.5ZM19.5 6.25a1.75 1.75 0 0 0-1.75-1.75h-1.5a.75.75 0 0 1 0-1.5h1.5A3.25 3.25 0 0 1 21 6.25v1.5a.75.75 0 0 1-1.5 0v-1.5ZM19.5 17.75a1.75 1.75 0 0 1-1.75 1.75h-1.5a.75.75 0 0 0 0 1.5h1.5A3.25 3.25 0 0 0 21 17.75v-1.5a.75.75 0 0 0-1.5 0v1.5ZM4.5 17.75c0 .966.784 1.75 1.75 1.75h1.5a.75.75 0 0 1 0 1.5h-1.5A3.25 3.25 0 0 1 3 17.75v-1.5a.75.75 0 0 1 1.5 0v1.5ZM8.25 6A2.25 2.25 0 0 0 6 8.25v7.5A2.25 2.25 0 0 0 8.25 18h7.5A2.25 2.25 0 0 0 18 15.75v-7.5A2.25 2.25 0 0 0 15.75 6h-7.5ZM7.5 8.25a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-.75.75h-7.5a.75.75 0 0 1-.75-.75v-7.5Z",
+  "save-outline": "M3 5.75A2.75 2.75 0 0 1 5.75 3h9.964a3.25 3.25 0 0 1 2.299.952l2.035 2.035c.61.61.952 1.437.952 2.299v9.964A2.75 2.75 0 0 1 18.25 21H5.75A2.75 2.75 0 0 1 3 18.25V5.75ZM5.75 4.5c-.69 0-1.25.56-1.25 1.25v12.5c0 .69.56 1.25 1.25 1.25H6v-5.25A2.25 2.25 0 0 1 8.25 12h7.5A2.25 2.25 0 0 1 18 14.25v5.25h.25c.69 0 1.25-.56 1.25-1.25V8.286c0-.465-.184-.91-.513-1.238l-2.035-2.035a1.75 1.75 0 0 0-.952-.49V7.25a2.25 2.25 0 0 1-2.25 2.25h-4.5A2.25 2.25 0 0 1 7 7.25V4.5H5.75Zm10.75 15v-5.25a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0-.75.75v5.25h9Zm-8-15v2.75c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75V4.5h-6Z",
  "search-outline": "M10 2.75a7.25 7.25 0 0 1 5.63 11.819l4.9 4.9a.75.75 0 0 1-.976 1.134l-.084-.073-4.901-4.9A7.25 7.25 0 1 1 10 2.75Zm0 1.5a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5Z",
  "send-outline": "M5.694 12 2.299 3.272c-.236-.607.356-1.188.942-.982l.093.04 18 9a.75.75 0 0 1 .097 1.283l-.097.058-18 9c-.583.291-1.217-.244-1.065-.847l.03-.096L5.694 12 2.299 3.272 5.694 12ZM4.402 4.54l2.61 6.71h6.627a.75.75 0 0 1 .743.648l.007.102a.75.75 0 0 1-.649.743l-.101.007H7.01l-2.609 6.71L19.322 12 4.401 4.54Z",
  "send-clock-outline": "M5.694 12 2.299 3.272c-.236-.608.356-1.189.942-.982l.093.04 18 9a.752.752 0 0 1 .264 1.124 6.473 6.473 0 0 0-4.272-1.452L4.402 4.54l2.61 6.71h6.627a.75.75 0 0 1 .724.556c-.472.26-.909.578-1.3.944H7.011l-2.609 6.71 6.753-3.377a6.522 6.522 0 0 0-.147 1.75l-7.674 3.838c-.583.291-1.217-.245-1.065-.847l.03-.096L5.694 12ZM23 17.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0Zm-5.5 0h2a.5.5 0 1 1 0 1H17a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 1 0v2.5Z",