From 4398734bdfd8e59df33a5e75896c8b4aa0062dd9 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 17 Jan 2022 09:18:54 +0530
Subject: [PATCH] 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>
---
 app/javascript/dashboard/api/customViews.js   |  14 ++
 .../dashboard/components/ChatList.vue         | 122 +++++++++++++++---
 .../dashboard/components/layout/Sidebar.vue   |   3 +
 .../config/sidebarItems/conversations.js      |   2 +
 .../layout/sidebarComponents/Secondary.vue    |  28 ++++
 .../sidebarComponents/SecondaryNavItem.vue    |   2 +-
 .../widgets/conversation/ConversationCard.vue |   5 +
 app/javascript/dashboard/helper/URLHelper.js  |   3 +
 .../i18n/locale/en/advancedFilters.json       |  14 ++
 .../dashboard/i18n/locale/en/settings.json    |   7 +-
 .../conversation/ConversationView.vue         |   5 +
 .../conversation/conversation.routes.js       |  19 +++
 .../dashboard/customviews/AddCustomViews.vue  |  97 ++++++++++++++
 app/javascript/dashboard/store/index.js       |   2 +
 .../dashboard/store/modules/customViews.js    |  79 ++++++++++++
 .../modules/specs/customViews/actions.spec.js |  72 +++++++++++
 .../modules/specs/customViews/fixtures.js     |  42 ++++++
 .../modules/specs/customViews/getters.spec.js |  65 ++++++++++
 .../specs/customViews/mutations.spec.js       |  29 +++++
 .../dashboard/store/mutation-types.js         |   6 +
 .../FluentIcon/dashboard-icons.json           |   1 +
 21 files changed, 594 insertions(+), 23 deletions(-)
 create mode 100644 app/javascript/dashboard/api/customViews.js
 create mode 100644 app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
 create mode 100644 app/javascript/dashboard/store/modules/customViews.js
 create mode 100644 app/javascript/dashboard/store/modules/specs/customViews/actions.spec.js
 create mode 100644 app/javascript/dashboard/store/modules/specs/customViews/fixtures.js
 create mode 100644 app/javascript/dashboard/store/modules/specs/customViews/getters.spec.js
 create mode 100644 app/javascript/dashboard/store/modules/specs/customViews/mutations.spec.js

diff --git a/app/javascript/dashboard/api/customViews.js b/app/javascript/dashboard/api/customViews.js
new file mode 100644
index 000000000..bb09047ba
--- /dev/null
+++ 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();
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index bb7858e6c..8affb6066 100644
--- 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>
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index cd0d0a08e..448603c6f 100644
--- 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');
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/conversations.js b/app/javascript/dashboard/components/layout/config/sidebarItems/conversations.js
index 550a9f1d5..c19cc1846 100644
--- 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: [
     {
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
index 328bda1b5..72f559fc1 100644
--- 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],
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
index 281a1394e..fe8e6d69f 100644
--- 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"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index 3a4c0d7d2..3e509eb9f 100644
--- 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) });
diff --git a/app/javascript/dashboard/helper/URLHelper.js b/app/javascript/dashboard/helper/URLHelper.js
index f50b3f6dc..120d6f2de 100644
--- 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}`;
   }
diff --git a/app/javascript/dashboard/i18n/locale/en/advancedFilters.json b/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
index f2292db8e..92a69f0b7 100644
--- 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"
+        }
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index ffe89678c..ceacb2486 100644
--- 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",
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
index 72aa2d44b..b1a88223d 100644
--- 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 {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js b/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
index 01efb32ba..45e05b489 100644
--- 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',
diff --git a/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue b/app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
new file mode 100644
index 000000000..319dbab24
--- /dev/null
+++ 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>
diff --git a/app/javascript/dashboard/store/index.js b/app/javascript/dashboard/store/index.js
index b14b9d0b0..77c62848a 100755
--- 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,
   },
 });
diff --git a/app/javascript/dashboard/store/modules/customViews.js b/app/javascript/dashboard/store/modules/customViews.js
new file mode 100644
index 000000000..f1c04f01c
--- /dev/null
+++ 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,
+};
diff --git a/app/javascript/dashboard/store/modules/specs/customViews/actions.spec.js b/app/javascript/dashboard/store/modules/specs/customViews/actions.spec.js
new file mode 100644
index 000000000..32d748a1b
--- /dev/null
+++ 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 }],
+      ]);
+    });
+  });
+});
diff --git a/app/javascript/dashboard/store/modules/specs/customViews/fixtures.js b/app/javascript/dashboard/store/modules/specs/customViews/fixtures.js
new file mode 100644
index 000000000..54917a0b0
--- /dev/null
+++ 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',
+        },
+      ],
+    },
+  },
+];
diff --git a/app/javascript/dashboard/store/modules/specs/customViews/getters.spec.js b/app/javascript/dashboard/store/modules/specs/customViews/getters.spec.js
new file mode 100644
index 000000000..e71e8fd58
--- /dev/null
+++ 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,
+    });
+  });
+});
diff --git a/app/javascript/dashboard/store/modules/specs/customViews/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/customViews/mutations.spec.js
new file mode 100644
index 000000000..05da48b6d
--- /dev/null
+++ 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]]);
+    });
+  });
+});
diff --git a/app/javascript/dashboard/store/mutation-types.js b/app/javascript/dashboard/store/mutation-types.js
index b723776c5..e99412c60 100755
--- 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',
 };
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index 5f8a72633..a8840937c 100644
--- 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",