feat: Add advanced contact filters (#3471)

Co-authored-by: Tejaswini <tejaswini@chatwoot.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

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

@@ -6,9 +6,21 @@ import {
   DuplicateContactException,
   ExceptionWithMessage,
 } from '../../../../../shared/helpers/CustomErrors';
+import { filterApiResponse } from './filterApiResponse';
 
 const { actions } = Contacts;
 
+const filterQueryData = {
+  payload: [
+    {
+      attribute_key: 'email',
+      filter_operator: 'contains',
+      values: ['fayaz'],
+      query_operator: null,
+    },
+  ],
+};
+
 const commit = jest.fn();
 global.axios = axios;
 jest.mock('axios');
@@ -228,7 +240,7 @@ describe('#actions', () => {
       ]);
     });
   });
-   describe('#deleteCustomAttributes', () => {
+  describe('#deleteCustomAttributes', () => {
     it('sends correct mutations if API is success', async () => {
       axios.post.mockResolvedValue({ data: { payload: contactList[0] } });
       await actions.deleteCustomAttributes(
@@ -247,4 +259,43 @@ describe('#actions', () => {
       ).rejects.toThrow(Error);
     });
   });
+
+  describe('#fetchFilteredContacts', () => {
+    it('fetches filtered conversations with a mock commit', async () => {
+      axios.post.mockResolvedValue({
+        data: filterApiResponse,
+      });
+      await actions.filter({ commit }, filterQueryData);
+      expect(commit).toHaveBeenCalledTimes(5);
+      expect(commit.mock.calls).toEqual([
+        ['SET_CONTACT_UI_FLAG', { isFetching: true }],
+        ['CLEAR_CONTACTS'],
+        ['SET_CONTACTS', filterApiResponse.payload],
+        ['SET_CONTACT_META', filterApiResponse.meta],
+        ['SET_CONTACT_UI_FLAG', { isFetching: false }],
+      ]);
+    });
+  });
+
+  describe('#setContactsFilter', () => {
+    it('commits the correct mutation and sets filter state', () => {
+      const filters = [
+        {
+          attribute_key: 'email',
+          filter_operator: 'contains',
+          values: ['fayaz'],
+          query_operator: 'and',
+        },
+      ];
+      actions.setContactFilters({ commit }, filters);
+      expect(commit.mock.calls).toEqual([[types.SET_CONTACT_FILTERS, filters]]);
+    });
+  });
+
+  describe('#clearContactFilters', () => {
+    it('commits the correct mutation and clears filter state', () => {
+      actions.clearContactFilters({ commit });
+      expect(commit.mock.calls).toEqual([[types.CLEAR_CONTACT_FILTERS]]);
+    });
+  });
 });

app/javascript/dashboard/store/modules/specs/contacts/filterApiResponse.js

@@ -0,0 +1,38 @@
+export const filterApiResponse = {
+  meta: {
+    count: {
+      all_count: 2,
+    },
+    current_page: '1',
+  },
+  payload: [
+    {
+      additional_attributes: {},
+      availability_status: 'offline',
+      email: 'fayaz@g.com',
+      id: 8,
+      name: 'fayaz',
+      phone_number: null,
+      identifier: null,
+      thumbnail:
+        'https://www.gravatar.com/avatar/f2e86d3a78353cdf51002f44cf6ea846?d=404',
+      custom_attributes: {},
+      conversations_count: 1,
+      last_activity_at: 1631081845,
+    },
+    {
+      additional_attributes: {},
+      availability_status: 'offline',
+      email: 'fayaz@gma.com',
+      id: 9,
+      name: 'fayaz',
+      phone_number: null,
+      identifier: null,
+      thumbnail:
+        'https://www.gravatar.com/avatar/792af86e3ad4591552e1025a6415baa6?d=404',
+      custom_attributes: {},
+      conversations_count: 1,
+      last_activity_at: 1631614585,
+    },
+  ],
+};

app/javascript/dashboard/store/modules/specs/contacts/getters.spec.js

@@ -36,4 +36,18 @@ describe('#getters', () => {
       isUpdating: false,
     });
   });
+  it('getAppliedContactFilters', () => {
+    const filters = [
+      {
+        attribute_key: 'email',
+        filter_operator: 'contains',
+        values: 'a',
+        query_operator: null,
+      },
+    ];
+    const state = {
+      appliedFilters: filters,
+    };
+    expect(getters.getAppliedContactFilters(state)).toEqual(filters);
+  });
 });

app/javascript/dashboard/store/modules/specs/contacts/mutations.spec.js

@@ -64,4 +64,42 @@ describe('#mutations', () => {
       });
     });
   });
+
+  describe('#SET_CONTACT_FILTERS', () => {
+    it('set contact filter', () => {
+      const appliedFilters = [
+        {
+          attribute_key: 'name',
+          filter_operator: 'equal_to',
+          values: ['fayaz'],
+          query_operator: 'and',
+        },
+      ];
+      mutations[types.SET_CONTACT_FILTERS](appliedFilters);
+      expect(appliedFilters).toEqual([
+        {
+          attribute_key: 'name',
+          filter_operator: 'equal_to',
+          values: ['fayaz'],
+          query_operator: 'and',
+        },
+      ]);
+    });
+  });
+  describe('#CLEAR_CONTACT_FILTERS', () => {
+    it('clears applied contact filters', () => {
+      const state = {
+        appliedFilters: [
+          {
+            attribute_key: 'name',
+            filter_operator: 'equal_to',
+            values: ['fayaz'],
+            query_operator: 'and',
+          },
+        ],
+      };
+      mutations[types.CLEAR_CONTACT_FILTERS](state);
+      expect(state.appliedFilters).toEqual([]);
+    });
+  });
 });

app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js

@@ -115,8 +115,8 @@ describe('#getters', () => {
     });
   });
 
-  describe('#getAppliedFilters', () => {
-    it('getAppliedFilters', () => {
+  describe('#getAppliedConversationFilters', () => {
+    it('getAppliedConversationFilters', () => {
       const filtersList = [
         {
           attribute_key: 'status',
@@ -128,7 +128,7 @@ describe('#getters', () => {
       const state = {
         appliedFilters: filtersList,
       };
-      expect(getters.getAppliedFilters(state)).toEqual(filtersList);
+      expect(getters.getAppliedConversationFilters(state)).toEqual(filtersList);
     });
   });
 });