feat: Adds the ability to delete a segment (#3836)

* feat: Adds the ability to delete a segment

* Minor fixes

* Small changes

app/javascript/dashboard/api/customViews.js

@@ -9,6 +9,10 @@ class CustomViewsAPI extends ApiClient {
   getCustomViewsByFilterType(type) {
     return axios.get(`${this.url}?filter_type=${type}`);
   }
+
+  deleteCustomViews(id, type) {
+    return axios.delete(`${this.url}/${id}?filter_type=${type}`);
+  }
 }
 
 export default new CustomViewsAPI();

app/javascript/dashboard/i18n/locale/en/advancedFilters.json

@@ -52,8 +52,8 @@
           "CONFIRM": {
             "TITLE": "Confirm Deletion",
             "MESSAGE": "Are you sure to delete the filter ",
-            "YES": "Yes, Delete ",
+            "YES": "Yes, Delete",
-            "NO": "No, Keep "
+            "NO": "No, Keep it"
           }
         },
         "API": {

app/javascript/dashboard/i18n/locale/en/contact.json

@@ -180,6 +180,7 @@
     "SEARCH_INPUT_PLACEHOLDER": "Search for contacts",
     "FILTER_CONTACTS": "Filter",
     "FILTER_CONTACTS_SAVE": "Save filter",
+    "FILTER_CONTACTS_DELETE": "Delete filter",
     "LIST": {
       "LOADING_MESSAGE": "Loading contacts...",
       "404": "No contacts matches your search 🔍",

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue

@@ -12,6 +12,7 @@
         :on-toggle-filter="onToggleFilters"
         :header-title="pageTitle"
         @on-toggle-save-filter="onToggleSaveFilters"
+        @on-toggle-delete-filter="onToggleDeleteFilters"
       />
       <contacts-table
         :contacts="records"
@@ -28,12 +29,22 @@
         :total-count="meta.count"
       />
     </div>
+
     <add-custom-views
       v-if="showAddCustomViewsModal"
       :custom-views-query="customViewsQuery"
       :filter-type="filterType"
       @close="onCloseAddCustomViewsModal"
     />
+    <delete-custom-views
+      v-if="showDeleteCustomViewsModal"
+      :show-delete-popup.sync="showDeleteCustomViewsModal"
+      :active-custom-view="activeCustomView"
+      :custom-views-id="customViewsId"
+      :active-filter-type="filterType"
+      @close="onCloseDeleteCustomViewsModal"
+    />
+
     <contact-info-panel
       v-if="showContactViewPane"
       :contact="selectedContact"
@@ -72,6 +83,7 @@ import ContactsAdvancedFilters from './ContactsAdvancedFilters.vue';
 import contactFilterItems from '../contactFilterItems';
 import filterQueryGenerator from '../../../../helper/filterQueryGenerator';
 import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews';
+import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews';
 
 const DEFAULT_PAGE = 1;
 const FILTER_TYPE_CONTACT = 1;
@@ -86,6 +98,7 @@ export default {
     ImportContacts,
     ContactsAdvancedFilters,
     AddCustomViews,
+    DeleteCustomViews,
   },
   props: {
     label: { type: String, default: '' },
@@ -111,6 +124,7 @@ export default {
       customViewsQuery: {},
       filterType: FILTER_TYPE_CONTACT,
       showAddCustomViewsModal: false,
+      showDeleteCustomViewsModal: false,
     };
   },
   computed: {
@@ -272,6 +286,12 @@ export default {
     onCloseAddCustomViewsModal() {
       this.showAddCustomViewsModal = false;
     },
+    onToggleDeleteFilters() {
+      this.showDeleteCustomViewsModal = true;
+    },
+    onCloseDeleteCustomViewsModal() {
+      this.showDeleteCustomViewsModal = false;
+    },
     onToggleImport() {
       this.showImportModal = !this.showImportModal;
     },

app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue

@@ -26,6 +26,17 @@
             {{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
           </woot-button>
         </div>
+
+        <woot-button
+          v-if="hasActiveCustomViews && !hasAppliedFilters"
+          class="margin-right-small clear"
+          color-scheme="alert"
+          icon="delete"
+          @click="onToggleDeleteCustomViewsModal"
+        >
+          {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_DELETE') }}
+        </woot-button>
+
         <div v-if="!hasActiveCustomViews" class="filters__button-wrap">
           <div v-if="hasAppliedFilters" class="filters__applied-indicator" />
           <woot-button
@@ -38,6 +49,7 @@
             {{ $t('CONTACTS_PAGE.FILTER_CONTACTS') }}
           </woot-button>
         </div>
+
         <woot-button
           v-if="hasAppliedFilters && !hasActiveCustomViews"
           class="margin-right-small clear"
@@ -133,6 +145,9 @@ export default {
     onToggleCustomViewsModal() {
       this.$emit('on-toggle-save-filter');
     },
+    onToggleDeleteCustomViewsModal() {
+      this.$emit('on-toggle-delete-filter');
+    },
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/customviews/DeleteCustomViews.vue

@@ -30,31 +30,49 @@ export default {
       type: [String, Number],
       default: 0,
     },
+    activeFilterType: {
+      type: Number,
+      default: 0,
+    },
   },
 
   computed: {
+    activeCustomViews() {
+      if (this.activeFilterType === 0) {
+        return 'conversation';
+      }
+      if (this.activeFilterType === 1) {
+        return 'contact';
+      }
+      return '';
+    },
     deleteMessage() {
       return `${this.$t(
         'FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.MESSAGE'
       )} ${this.activeCustomView && this.activeCustomView.name} ?`;
     },
     deleteConfirmText() {
-      return `${this.$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.YES')} ${this
+      return `${this.$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.YES')}`;
-        .activeCustomView && this.activeCustomView.name}`;
     },
     deleteRejectText() {
-      return `${this.$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.NO')} ${this
+      return `${this.$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.NO')}`;
-        .activeCustomView && this.activeCustomView.name}`;
+    },
+    isFolderSection() {
+      return this.activeFilterType === 0 && this.$route.name !== 'home';
+    },
+    isSegmentSection() {
+      return (
+        this.activeFilterType === 1 && this.$route.name !== 'contacts_dashboard'
+      );
     },
   },
 
   methods: {
     async deleteSavedCustomViews() {
       try {
-        await this.$store.dispatch(
+        const id = Number(this.customViewsId);
-          'customViews/delete',
+        const filterType = this.activeCustomViews;
-          Number(this.customViewsId)
+        await this.$store.dispatch('customViews/delete', { id, filterType });
-        );
         this.closeDeletePopup();
         this.showAlert(
           this.$t('FILTER.CUSTOM_VIEWS.DELETE.API.SUCCESS_MESSAGE')
@@ -65,9 +83,12 @@ export default {
           this.$t('FILTER.CUSTOM_VIEWS.DELETE.API.ERROR_MESSAGE');
         this.showAlert(errorMessage);
       }
-      if (this.$route.name !== 'home') {
+      if (this.isFolderSection) {
         this.$router.push({ name: 'home' });
       }
+      if (this.isSegmentSection) {
+        this.$router.push({ name: 'contacts_dashboard' });
+      }
     },
     closeDeletePopup() {
       this.$emit('close');

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

@@ -49,10 +49,10 @@ export const actions = {
       commit(types.SET_CUSTOM_VIEW_UI_FLAG, { isCreating: false });
     }
   },
-  delete: async ({ commit }, id) => {
+  delete: async ({ commit }, { id, filterType }) => {
     commit(types.SET_CUSTOM_VIEW_UI_FLAG, { isDeleting: true });
     try {
-      await CustomViewsAPI.delete(id);
+      await CustomViewsAPI.deleteCustomViews(id, filterType);
       commit(types.DELETE_CUSTOM_VIEW, id);
     } catch (error) {
       throw new Error(error);

app/javascript/dashboard/store/modules/specs/customViews/actions.spec.js

@@ -51,18 +51,16 @@ describe('#actions', () => {
   describe('#delete', () => {
     it('sends correct actions if API is success', async () => {
       axios.delete.mockResolvedValue({ data: customViewList[0] });
-      await actions.delete({ commit }, customViewList[0].id);
+      await actions.delete({ commit }, { id: 1, filterType: 'contact' });
       expect(commit.mock.calls).toEqual([
         [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isDeleting: true }],
-        [types.default.DELETE_CUSTOM_VIEW, customViewList[0].id],
+        [types.default.DELETE_CUSTOM_VIEW, 1],
         [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(
+      await expect(actions.delete({ commit }, 1)).rejects.toThrow(Error);
-        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 }],