feat: update tool-chain to latest (#7975)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

.eslintrc.js

@@ -6,7 +6,7 @@ module.exports = {
     'plugin:storybook/recommended',
   ],
   parserOptions: {
-    parser: 'babel-eslint',
+    parser: '@babel/eslint-parser',
     ecmaVersion: 2020,
     sourceType: 'module',
   },
@@ -24,13 +24,16 @@ module.exports = {
     'jsx-a11y/label-has-for': 'off',
     'jsx-a11y/anchor-is-valid': 'off',
     'import/no-unresolved': 'off',
+    'vue/html-indent': 'off',
+    'vue/multi-word-component-names': 'off',
     'vue/max-attributes-per-line': [
       'error',
       {
-        singleline: 20,
+        singleline: {
+          max: 20,
+        },
         multiline: {
           max: 1,
-          allowFirstLine: false,
         },
       },
     ],
@@ -47,6 +50,7 @@ module.exports = {
       },
     ],
     'vue/no-v-html': 'off',
+    'vue/component-definition-name-casing': 'off',
     'vue/singleline-html-element-content-newline': 'off',
     'import/extensions': ['off'],
     'no-console': 'error',

app/javascript/dashboard/App.vue

@@ -111,10 +111,8 @@ export default {
       this.$store.dispatch('setActiveAccount', {
         accountId: this.currentAccountId,
       });
-      const {
+      const { locale, latest_chatwoot_version: latestChatwootVersion } =
-        locale,
+        this.getAccount(this.currentAccountId);
-        latest_chatwoot_version: latestChatwootVersion,
-      } = this.getAccount(this.currentAccountId);
       const { pubsub_token: pubsubToken } = this.currentUser || {};
       this.setLocale(locale);
       this.updateRTLDirectionView(locale);

app/javascript/dashboard/api/ApiClient.js

@@ -15,9 +15,8 @@ class ApiClient {
 
   // eslint-disable-next-line class-methods-use-this
   get accountIdFromRoute() {
-    const isInsideAccountScopedURLs = window.location.pathname.includes(
+    const isInsideAccountScopedURLs =
-      '/app/accounts'
+      window.location.pathname.includes('/app/accounts');
-    );
 
     if (isInsideAccountScopedURLs) {
       return window.location.pathname.split('/')[3];

app/javascript/dashboard/api/contacts.js

@@ -53,6 +53,7 @@ class ContactAPI extends ApiClient {
     return axios.get(requestURL);
   }
 
+  // eslint-disable-next-line default-param-last
   filter(page = 1, sortAttr = 'name', queryPayload) {
     let requestURL = `${this.url}/filter?${buildContactParams(page, sortAttr)}`;
     return axios.post(requestURL, queryPayload);

app/javascript/dashboard/api/enterprise/specs/account.spec.js

@@ -1,6 +1,5 @@
 import accountAPI from '../account';
 import ApiClient from '../../ApiClient';
-import describeWithAPIMock from '../../specs/apiSpecHelper';
 
 describe('#enterpriseAccountAPI', () => {
   it('creates correct instance', () => {
@@ -13,17 +12,33 @@ describe('#enterpriseAccountAPI', () => {
     expect(accountAPI).toHaveProperty('checkout');
   });
 
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#checkout', () => {
       accountAPI.checkout();
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/enterprise/api/v1/checkout'
       );
     });
 
     it('#subscription', () => {
       accountAPI.subscription();
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/enterprise/api/v1/subscription'
       );
     });

app/javascript/dashboard/api/reports.js

@@ -31,6 +31,7 @@ class ReportsAPI extends ApiClient {
     });
   }
 
+  // eslint-disable-next-line default-param-last
   getSummary(since, until, type = 'account', id, groupBy, businessHours) {
     return axios.get(`${this.url}/summary`, {
       params: {

app/javascript/dashboard/api/specs/account.spec.js

@@ -1,6 +1,5 @@
 import accountAPI from '../account';
 import ApiClient from '../ApiClient';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#accountAPI', () => {
   it('creates correct instance', () => {
@@ -13,12 +12,28 @@ describe('#accountAPI', () => {
     expect(accountAPI).toHaveProperty('createAccount');
   });
 
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#createAccount', () => {
       accountAPI.createAccount({
         name: 'Chatwoot',
       });
-      expect(context.axiosMock.post).toHaveBeenCalledWith('/api/v1/accounts', {
+      expect(axiosMock.post).toHaveBeenCalledWith('/api/v1/accounts', {
         name: 'Chatwoot',
       });
     });

app/javascript/dashboard/api/specs/accountActions.spec.js

@@ -1,6 +1,5 @@
 import accountActionsAPI from '../accountActions';
 import ApiClient from '../ApiClient';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#ContactsAPI', () => {
   it('creates correct instance', () => {
@@ -8,10 +7,26 @@ describe('#ContactsAPI', () => {
     expect(accountActionsAPI).toHaveProperty('merge');
   });
 
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#merge', () => {
       accountActionsAPI.merge(1, 2);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/actions/contact_merge',
         {
           base_contact_id: 1,

app/javascript/dashboard/api/specs/apiSpecHelper.js

@@ -1,27 +0,0 @@
-function apiSpecHelper() {
-  beforeEach(() => {
-    this.originalAxios = window.axios;
-    this.axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-    window.axios = this.axiosMock;
-  });
-
-  afterEach(() => {
-    window.axios = this.originalAxios;
-  });
-}
-// https://stackoverflow.com/a/59344023/3901856
-const sharedWrapper = describe('sharedWrapper', () => {});
-export default function describeWithAPIMock(skillName, testFn) {
-  return describe(skillName, function configureContext() {
-    function Context() {}
-    Context.prototype = sharedWrapper.ctx;
-    this.ctx = new Context();
-    apiSpecHelper.call(this);
-    testFn.call(this, this);
-  });
-}

app/javascript/dashboard/api/specs/article.spec.js

@@ -1,6 +1,5 @@
 import articlesAPI from '../helpCenter/articles';
 import ApiClient from 'dashboard/api/helpCenter/portals';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#PortalAPI', () => {
   it('creates correct instance', () => {
@@ -12,7 +11,23 @@ describe('#PortalAPI', () => {
     expect(articlesAPI).toHaveProperty('delete');
     expect(articlesAPI).toHaveProperty('getArticles');
   });
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#getArticles', () => {
       articlesAPI.getArticles({
         pageNumber: 1,
@@ -21,30 +36,62 @@ describe('#PortalAPI', () => {
         status: 'published',
         author_id: '1',
       });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/portals/room-rental/articles?page=1&locale=en-US&status=published&author_id=1'
       );
     });
   });
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#getArticle', () => {
       articlesAPI.getArticle({
         id: 1,
         portalSlug: 'room-rental',
       });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/portals/room-rental/articles/1'
       );
     });
   });
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#updateArticle', () => {
       articlesAPI.updateArticle({
         articleId: 1,
         portalSlug: 'room-rental',
         articleObj: { title: 'Update shipping address' },
       });
-      expect(context.axiosMock.patch).toHaveBeenCalledWith(
+      expect(axiosMock.patch).toHaveBeenCalledWith(
         '/api/v1/portals/room-rental/articles/1',
         {
           title: 'Update shipping address',
@@ -52,13 +99,29 @@ describe('#PortalAPI', () => {
       );
     });
   });
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#deleteArticle', () => {
       articlesAPI.deleteArticle({
         articleId: 1,
         portalSlug: 'room-rental',
       });
-      expect(context.axiosMock.delete).toHaveBeenCalledWith(
+      expect(axiosMock.delete).toHaveBeenCalledWith(
         '/api/v1/portals/room-rental/articles/1'
       );
     });

app/javascript/dashboard/api/specs/assignableAgents.spec.js

@@ -1,18 +1,30 @@
 import assignableAgentsAPI from '../assignableAgents';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#AssignableAgentsAPI', () => {
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#getAssignableAgents', () => {
       assignableAgentsAPI.get([1]);
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/assignable_agents', {
-        '/api/v1/assignable_agents',
+        params: {
-        {
+          inbox_ids: [1],
-          params: {
+        },
-            inbox_ids: [1],
+      });
-          },
-        }
-      );
     });
   });
 });

app/javascript/dashboard/api/specs/channel/fbChannel.spec.js

@@ -1,6 +1,5 @@
 import fbChannel from '../../channel/fbChannel';
 import ApiClient from '../../ApiClient';
-import describeWithAPIMock from '../apiSpecHelper';
 
 describe('#FBChannel', () => {
   it('creates correct instance', () => {
@@ -11,10 +10,26 @@ describe('#FBChannel', () => {
     expect(fbChannel).toHaveProperty('update');
     expect(fbChannel).toHaveProperty('delete');
   });
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#create', () => {
       fbChannel.create({ omniauthToken: 'ASFM131CSF@#@$', appId: 'chatwoot' });
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/callbacks/register_facebook_page',
         {
           omniauthToken: 'ASFM131CSF@#@$',
@@ -27,7 +42,7 @@ describe('#FBChannel', () => {
         omniauthToken: 'ASFM131CSF@#@$',
         inboxId: 1,
       });
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/callbacks/reauthorize_page',
         {
           omniauth_token: 'ASFM131CSF@#@$',

app/javascript/dashboard/api/specs/contacts.spec.js

@@ -1,6 +1,5 @@
 import contactAPI, { buildContactParams } from '../contacts';
 import ApiClient from '../ApiClient';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#ContactsAPI', () => {
   it('creates correct instance', () => {
@@ -15,56 +14,67 @@ describe('#ContactsAPI', () => {
     expect(contactAPI).toHaveProperty('destroyAvatar');
   });
 
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#get', () => {
       contactAPI.get(1, 'name', 'customer-support');
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/contacts?include_contact_inboxes=false&page=1&sort=name&labels[]=customer-support'
       );
     });
 
     it('#getConversations', () => {
       contactAPI.getConversations(1);
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/contacts/1/conversations'
       );
     });
 
     it('#getContactableInboxes', () => {
       contactAPI.getContactableInboxes(1);
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/contacts/1/contactable_inboxes'
       );
     });
 
     it('#getContactLabels', () => {
       contactAPI.getContactLabels(1);
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/contacts/1/labels');
-        '/api/v1/contacts/1/labels'
-      );
     });
 
     it('#updateContactLabels', () => {
       const labels = ['support-query'];
       contactAPI.updateContactLabels(1, labels);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith('/api/v1/contacts/1/labels', {
-        '/api/v1/contacts/1/labels',
+        labels,
-        {
+      });
-          labels,
-        }
-      );
     });
 
     it('#search', () => {
       contactAPI.search('leads', 1, 'date', 'customer-support');
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/contacts/search?include_contact_inboxes=false&page=1&sort=date&q=leads&labels[]=customer-support'
       );
     });
 
     it('#destroyCustomAttributes', () => {
       contactAPI.destroyCustomAttributes(1, ['cloudCustomer']);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/contacts/1/destroy_custom_attributes',
         {
           custom_attributes: ['cloudCustomer'],
@@ -75,7 +85,7 @@ describe('#ContactsAPI', () => {
     it('#importContacts', () => {
       const file = 'file';
       contactAPI.importContacts(file);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/contacts/import',
         expect.any(FormData),
         {
@@ -96,7 +106,7 @@ describe('#ContactsAPI', () => {
         ],
       };
       contactAPI.filter(1, 'name', queryPayload);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/contacts/filter?include_contact_inboxes=false&page=1&sort=name',
         queryPayload
       );
@@ -104,7 +114,7 @@ describe('#ContactsAPI', () => {
 
     it('#destroyAvatar', () => {
       contactAPI.destroyAvatar(1);
-      expect(context.axiosMock.delete).toHaveBeenCalledWith(
+      expect(axiosMock.delete).toHaveBeenCalledWith(
         '/api/v1/contacts/1/avatar'
       );
     });

app/javascript/dashboard/api/specs/conversations.spec.js

@@ -1,6 +1,5 @@
 import conversationsAPI from '../conversations';
 import ApiClient from '../ApiClient';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#ConversationApi', () => {
   it('creates correct instance', () => {
@@ -14,10 +13,26 @@ describe('#ConversationApi', () => {
     expect(conversationsAPI).toHaveProperty('updateLabels');
   });
 
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#getLabels', () => {
       conversationsAPI.getLabels(1);
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/conversations/1/labels'
       );
     });
@@ -25,7 +40,7 @@ describe('#ConversationApi', () => {
     it('#updateLabels', () => {
       const labels = ['support-query'];
       conversationsAPI.updateLabels(1, labels);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/conversations/1/labels',
         {
           labels,

app/javascript/dashboard/api/specs/csatReports.spec.js

@@ -1,6 +1,5 @@
 import csatReportsAPI from '../csatReports';
 import ApiClient from '../ApiClient';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#Reports API', () => {
   it('creates correct instance', () => {
@@ -9,10 +8,26 @@ describe('#Reports API', () => {
     expect(csatReportsAPI).toHaveProperty('get');
     expect(csatReportsAPI).toHaveProperty('getMetrics');
   });
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#get', () => {
       csatReportsAPI.get({ page: 1, from: 1622485800, to: 1623695400 });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/csat_survey_responses',
         {
           params: {
@@ -26,7 +41,7 @@ describe('#Reports API', () => {
     });
     it('#getMetrics', () => {
       csatReportsAPI.getMetrics({ from: 1622485800, to: 1623695400 });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/csat_survey_responses/metrics',
         {
           params: { since: 1622485800, until: 1623695400 },
@@ -39,7 +54,7 @@ describe('#Reports API', () => {
         to: 1623695400,
         user_ids: 1,
       });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/csat_survey_responses/download',
         {
           params: {

app/javascript/dashboard/api/specs/inbox/conversation.spec.js

@@ -1,6 +1,5 @@
 import conversationAPI from '../../inbox/conversation';
 import ApiClient from '../../ApiClient';
-import describeWithAPIMock from '../apiSpecHelper';
 
 describe('#ConversationAPI', () => {
   it('creates correct instance', () => {
@@ -22,7 +21,23 @@ describe('#ConversationAPI', () => {
     expect(conversationAPI).toHaveProperty('filter');
   });
 
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#get conversations', () => {
       conversationAPI.get({
         inboxId: 1,
@@ -32,19 +47,16 @@ describe('#ConversationAPI', () => {
         labels: [],
         teamId: 1,
       });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/conversations', {
-        '/api/v1/conversations',
+        params: {
-        {
+          inbox_id: 1,
-          params: {
+          team_id: 1,
-            inbox_id: 1,
+          status: 'open',
-            team_id: 1,
+          assignee_type: 'me',
-            status: 'open',
+          page: 1,
-            assignee_type: 'me',
+          labels: [],
-            page: 1,
+        },
-            labels: [],
+      });
-          },
-        }
-      );
     });
 
     it('#search', () => {
@@ -53,7 +65,7 @@ describe('#ConversationAPI', () => {
         page: 1,
       });
 
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/conversations/search',
         {
           params: {
@@ -66,7 +78,7 @@ describe('#ConversationAPI', () => {
 
     it('#toggleStatus', () => {
       conversationAPI.toggleStatus({ conversationId: 12, status: 'online' });
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         `/api/v1/conversations/12/toggle_status`,
         {
           status: 'online',
@@ -77,7 +89,7 @@ describe('#ConversationAPI', () => {
 
     it('#assignAgent', () => {
       conversationAPI.assignAgent({ conversationId: 12, agentId: 34 });
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         `/api/v1/conversations/12/assignments?assignee_id=34`,
         {}
       );
@@ -85,7 +97,7 @@ describe('#ConversationAPI', () => {
 
     it('#assignTeam', () => {
       conversationAPI.assignTeam({ conversationId: 12, teamId: 1 });
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         `/api/v1/conversations/12/assignments`,
         {
           team_id: 1,
@@ -95,7 +107,7 @@ describe('#ConversationAPI', () => {
 
     it('#markMessageRead', () => {
       conversationAPI.markMessageRead({ id: 12 });
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         `/api/v1/conversations/12/update_last_seen`
       );
     });
@@ -105,7 +117,7 @@ describe('#ConversationAPI', () => {
         conversationId: 12,
         status: 'typing_on',
       });
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         `/api/v1/conversations/12/toggle_typing_status`,
         {
           typing_status: 'typing_on',
@@ -115,14 +127,14 @@ describe('#ConversationAPI', () => {
 
     it('#mute', () => {
       conversationAPI.mute(45);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/conversations/45/mute'
       );
     });
 
     it('#unmute', () => {
       conversationAPI.unmute(45);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/conversations/45/unmute'
       );
     });
@@ -135,18 +147,15 @@ describe('#ConversationAPI', () => {
         labels: [],
         teamId: 1,
       });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/conversations/meta', {
-        '/api/v1/conversations/meta',
+        params: {
-        {
+          inbox_id: 1,
-          params: {
+          team_id: 1,
-            inbox_id: 1,
+          status: 'open',
-            team_id: 1,
+          assignee_type: 'me',
-            status: 'open',
+          labels: [],
-            assignee_type: 'me',
+        },
-            labels: [],
+      });
-          },
-        }
-      );
     });
 
     it('#sendEmailTranscript', () => {
@@ -154,7 +163,7 @@ describe('#ConversationAPI', () => {
         conversationId: 45,
         email: 'john@acme.inc',
       });
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/conversations/45/transcript',
         {
           email: 'john@acme.inc',
@@ -167,7 +176,7 @@ describe('#ConversationAPI', () => {
         conversationId: 45,
         customAttributes: { order_d: '1001' },
       });
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/conversations/45/custom_attributes',
         {
           custom_attributes: { order_d: '1001' },
@@ -202,9 +211,7 @@ describe('#ConversationAPI', () => {
         },
       };
       conversationAPI.filter(payload);
-      expect(
+      expect(axiosMock.post).toHaveBeenCalledWith(
-        context.axiosMock.post
-      ).toHaveBeenCalledWith(
         '/api/v1/conversations/filter',
         payload.queryData,
         { params: { page: payload.page } }
@@ -213,7 +220,7 @@ describe('#ConversationAPI', () => {
 
     it('#getAllAttachments', () => {
       conversationAPI.getAllAttachments(1);
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/conversations/1/attachments'
       );
     });

app/javascript/dashboard/api/specs/inbox/message.spec.js

@@ -1,6 +1,5 @@
 import messageAPI, { buildCreatePayload } from '../../inbox/message';
 import ApiClient from '../../ApiClient';
-import describeWithAPIMock from '../apiSpecHelper';
 
 describe('#ConversationAPI', () => {
   it('creates correct instance', () => {
@@ -13,13 +12,29 @@ describe('#ConversationAPI', () => {
     expect(messageAPI).toHaveProperty('getPreviousMessages');
   });
 
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#getPreviousMessages', () => {
       messageAPI.getPreviousMessages({
         conversationId: 12,
         before: 4573,
       });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         `/api/v1/conversations/12/messages`,
         {
           params: {
@@ -35,7 +50,6 @@ describe('#ConversationAPI', () => {
         message: 'test content',
         echoId: 12,
         isPrivate: true,
-
         files: [new Blob(['test-content'], { type: 'application/pdf' })],
       });
       expect(formPayload).toBeInstanceOf(FormData);
@@ -58,8 +72,10 @@ describe('#ConversationAPI', () => {
         private: false,
         echo_id: 12,
         content_attributes: { in_reply_to: 12 },
-        bcc_emails: '',
         cc_emails: '',
+        bcc_emails: '',
+        to_emails: '',
+        template_params: undefined,
       });
     });
   });

app/javascript/dashboard/api/specs/inboxes.spec.js

@@ -1,6 +1,5 @@
 import inboxesAPI from '../inboxes';
 import ApiClient from '../ApiClient';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#InboxesAPI', () => {
   it('creates correct instance', () => {
@@ -14,19 +13,32 @@ describe('#InboxesAPI', () => {
     expect(inboxesAPI).toHaveProperty('getAgentBot');
     expect(inboxesAPI).toHaveProperty('setAgentBot');
   });
-  describeWithAPIMock('API calls', context => {
+
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#getCampaigns', () => {
       inboxesAPI.getCampaigns(2);
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/inboxes/2/campaigns');
-        '/api/v1/inboxes/2/campaigns'
-      );
     });
 
     it('#deleteInboxAvatar', () => {
       inboxesAPI.deleteInboxAvatar(2);
-      expect(context.axiosMock.delete).toHaveBeenCalledWith(
+      expect(axiosMock.delete).toHaveBeenCalledWith('/api/v1/inboxes/2/avatar');
-        '/api/v1/inboxes/2/avatar'
-      );
     });
   });
 });

app/javascript/dashboard/api/specs/integrations.spec.js

@@ -1,6 +1,5 @@
 import integrationAPI from '../integrations';
 import ApiClient from '../ApiClient';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#integrationAPI', () => {
   it('creates correct instance', () => {
@@ -16,11 +15,27 @@ describe('#integrationAPI', () => {
     expect(integrationAPI).toHaveProperty('listAllSlackChannels');
     expect(integrationAPI).toHaveProperty('deleteHook');
   });
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#connectSlack', () => {
       const code = 'SDNFJNSDFNDSJN';
       integrationAPI.connectSlack(code);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/integrations/slack',
         {
           code,
@@ -31,7 +46,7 @@ describe('#integrationAPI', () => {
     it('#updateSlack', () => {
       const updateObj = { referenceId: 'SDFSDGSVE' };
       integrationAPI.updateSlack(updateObj);
-      expect(context.axiosMock.patch).toHaveBeenCalledWith(
+      expect(axiosMock.patch).toHaveBeenCalledWith(
         '/api/v1/integrations/slack',
         {
           reference_id: updateObj.referenceId,
@@ -41,16 +56,14 @@ describe('#integrationAPI', () => {
 
     it('#listAllSlackChannels', () => {
       integrationAPI.listAllSlackChannels();
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/integrations/slack/list_all_channels'
       );
     });
 
     it('#delete', () => {
       integrationAPI.delete(2);
-      expect(context.axiosMock.delete).toHaveBeenCalledWith(
+      expect(axiosMock.delete).toHaveBeenCalledWith('/api/v1/integrations/2');
-        '/api/v1/integrations/2'
-      );
     });
 
     it('#createHook', () => {
@@ -59,7 +72,7 @@ describe('#integrationAPI', () => {
         settings: { api_key: 'SDFSDGSVE' },
       };
       integrationAPI.createHook(hookData);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/integrations/hooks',
         hookData
       );
@@ -67,7 +80,7 @@ describe('#integrationAPI', () => {
 
     it('#deleteHook', () => {
       integrationAPI.deleteHook(2);
-      expect(context.axiosMock.delete).toHaveBeenCalledWith(
+      expect(axiosMock.delete).toHaveBeenCalledWith(
         '/api/v1/integrations/hooks/2'
       );
     });

app/javascript/dashboard/api/specs/integrations/dyte.spec.js

@@ -1,6 +1,5 @@
 import DyteAPIClient from '../../integrations/dyte';
 import ApiClient from '../../ApiClient';
-import describeWithAPIMock from '../apiSpecHelper';
 
 describe('#accountAPI', () => {
   it('creates correct instance', () => {
@@ -9,10 +8,26 @@ describe('#accountAPI', () => {
     expect(DyteAPIClient).toHaveProperty('addParticipantToMeeting');
   });
 
-  describeWithAPIMock('createAMeeting', context => {
+  describe('createAMeeting', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('creates a valid request', () => {
       DyteAPIClient.createAMeeting(1);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/integrations/dyte/create_a_meeting',
         {
           conversation_id: 1,
@@ -21,10 +36,26 @@ describe('#accountAPI', () => {
     });
   });
 
-  describeWithAPIMock('addParticipantToMeeting', context => {
+  describe('addParticipantToMeeting', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('creates a valid request', () => {
       DyteAPIClient.addParticipantToMeeting(1);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/integrations/dyte/add_participant_to_meeting',
         {
           message_id: 1,

app/javascript/dashboard/api/specs/notifications.spec.js

@@ -1,6 +1,5 @@
 import notificationsAPI from '../notifications';
 import ApiClient from '../ApiClient';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#NotificationAPI', () => {
   it('creates correct instance', () => {
@@ -11,31 +10,47 @@ describe('#NotificationAPI', () => {
     expect(notificationsAPI).toHaveProperty('read');
     expect(notificationsAPI).toHaveProperty('readAll');
   });
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#get', () => {
       notificationsAPI.get(1);
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/notifications?page=1'
       );
     });
 
     it('#getNotifications', () => {
       notificationsAPI.getNotifications(1);
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/notifications/1/notifications'
       );
     });
 
     it('#getUnreadCount', () => {
       notificationsAPI.getUnreadCount();
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/notifications/unread_count'
       );
     });
 
     it('#read', () => {
       notificationsAPI.read(48670, 'Conversation');
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/notifications/read_all',
         {
           primary_actor_id: 'Conversation',
@@ -46,7 +61,7 @@ describe('#NotificationAPI', () => {
 
     it('#readAll', () => {
       notificationsAPI.readAll();
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/notifications/read_all'
       );
     });

app/javascript/dashboard/api/specs/reports.spec.js

@@ -1,6 +1,5 @@
 import reportsAPI from '../reports';
 import ApiClient from '../ApiClient';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#Reports API', () => {
   it('creates correct instance', () => {
@@ -18,14 +17,30 @@ describe('#Reports API', () => {
     expect(reportsAPI).toHaveProperty('getInboxReports');
     expect(reportsAPI).toHaveProperty('getTeamReports');
   });
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#getAccountReports', () => {
       reportsAPI.getReports({
         metric: 'conversations_count',
         from: 1621103400,
         to: 1621621800,
       });
-      expect(context.axiosMock.get).toHaveBeenCalledWith('/api/v2/reports', {
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports', {
         params: {
           metric: 'conversations_count',
           since: 1621103400,
@@ -38,20 +53,17 @@ describe('#Reports API', () => {
 
     it('#getAccountSummary', () => {
       reportsAPI.getSummary(1621103400, 1621621800);
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/summary', {
-        '/api/v2/reports/summary',
+        params: {
-        {
+          business_hours: undefined,
-          params: {
+          group_by: undefined,
-            business_hours: undefined,
+          id: undefined,
-            group_by: undefined,
+          since: 1621103400,
-            id: undefined,
+          timezone_offset: -0,
-            since: 1621103400,
+          type: 'account',
-            timezone_offset: -0,
+          until: 1621621800,
-            type: 'account',
+        },
-            until: 1621621800,
+      });
-          },
-        }
-      );
     });
 
     it('#getAgentReports', () => {
@@ -60,60 +72,48 @@ describe('#Reports API', () => {
         to: 1621621800,
         businessHours: true,
       });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/agents', {
-        '/api/v2/reports/agents',
+        params: {
-        {
+          since: 1621103400,
-          params: {
+          until: 1621621800,
-            since: 1621103400,
+          business_hours: true,
-            until: 1621621800,
+        },
-            business_hours: true,
+      });
-          },
-        }
-      );
     });
 
     it('#getLabelReports', () => {
       reportsAPI.getLabelReports({ from: 1621103400, to: 1621621800 });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/labels', {
-        '/api/v2/reports/labels',
+        params: {
-        {
+          since: 1621103400,
-          params: {
+          until: 1621621800,
-            since: 1621103400,
+        },
-            until: 1621621800,
+      });
-          },
-        }
-      );
     });
 
     it('#getInboxReports', () => {
       reportsAPI.getInboxReports({ from: 1621103400, to: 1621621800 });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/inboxes', {
-        '/api/v2/reports/inboxes',
+        params: {
-        {
+          since: 1621103400,
-          params: {
+          until: 1621621800,
-            since: 1621103400,
+        },
-            until: 1621621800,
+      });
-          },
-        }
-      );
     });
 
     it('#getTeamReports', () => {
       reportsAPI.getTeamReports({ from: 1621103400, to: 1621621800 });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/teams', {
-        '/api/v2/reports/teams',
+        params: {
-        {
+          since: 1621103400,
-          params: {
+          until: 1621621800,
-            since: 1621103400,
+        },
-            until: 1621621800,
+      });
-          },
-        }
-      );
     });
 
     it('#getConversationMetric', () => {
       reportsAPI.getConversationMetric('account');
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v2/reports/conversations',
         {
           params: {

app/javascript/dashboard/api/specs/teams.spec.js

@@ -1,6 +1,5 @@
 import teamsAPI from '../teams';
 import ApiClient from '../ApiClient';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#TeamsAPI', () => {
   it('creates correct instance', () => {
@@ -14,17 +13,33 @@ describe('#TeamsAPI', () => {
     expect(teamsAPI).toHaveProperty('addAgents');
     expect(teamsAPI).toHaveProperty('updateAgents');
   });
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#getAgents', () => {
       teamsAPI.getAgents({ teamId: 1 });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/teams/1/team_members'
       );
     });
 
     it('#addAgents', () => {
       teamsAPI.addAgents({ teamId: 1, agentsList: { user_ids: [1, 10, 21] } });
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/teams/1/team_members',
         {
           user_ids: { user_ids: [1, 10, 21] },
@@ -38,7 +53,7 @@ describe('#TeamsAPI', () => {
         teamId: 1,
         agentsList,
       });
-      expect(context.axiosMock.patch).toHaveBeenCalledWith(
+      expect(axiosMock.patch).toHaveBeenCalledWith(
         '/api/v1/teams/1/team_members',
         {
           user_ids: agentsList,

app/javascript/dashboard/components/ChatList.vue

@@ -10,7 +10,8 @@
     <div
       class="flex items-center justify-between py-0 px-4"
       :class="{
-        'pb-3 border-b border-slate-75 dark:border-slate-700': hasAppliedFiltersOrActiveFolders,
+        'pb-3 border-b border-slate-75 dark:border-slate-700':
+          hasAppliedFiltersOrActiveFolders,
       }"
     >
       <div class="flex max-w-[85%] justify-center items-center">
@@ -24,9 +25,7 @@
           v-if="!hasAppliedFiltersOrActiveFolders"
           class="p-1 my-0.5 mx-1 rounded-md capitalize bg-slate-50 dark:bg-slate-800 text-xxs text-slate-600 dark:text-slate-300"
         >
-          {{
+          {{ $t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`) }}
-            this.$t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`)
-          }}
         </span>
       </div>
       <div class="flex items-center gap-1">
@@ -642,10 +641,8 @@ export default {
     },
     handleKeyEvents(e) {
       if (hasPressedAltAndJKey(e)) {
-        const {
+        const { allConversations, activeConversationIndex } =
-          allConversations,
+          this.getKeyboardListenerParams();
-          activeConversationIndex,
-        } = this.getKeyboardListenerParams();
         if (activeConversationIndex === -1) {
           allConversations[0].click();
         }

app/javascript/dashboard/components/CustomSnoozeModal.vue

@@ -13,10 +13,10 @@
       />
       <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
         <woot-button variant="clear" @click.prevent="onClose">
-          {{ this.$t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
+          {{ $t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
         </woot-button>
         <woot-button>
-          {{ this.$t('CONVERSATION.CUSTOM_SNOOZE.APPLY') }}
+          {{ $t('CONVERSATION.CUSTOM_SNOOZE.APPLY') }}
         </woot-button>
       </div>
     </form>

app/javascript/dashboard/components/MaskedText.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="text--container">
-    <woot-button size="small" class=" button--text" @click="onCopy">
+    <woot-button size="small" class="button--text" @click="onCopy">
       {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
     </woot-button>
     <woot-button

app/javascript/dashboard/components/Modal.vue

@@ -66,9 +66,9 @@ export default {
         'right-aligned': 'right-aligned',
       };
 
-      return `modal-mask skip-context-menu ${modalClassNameMap[
+      return `modal-mask skip-context-menu ${
-        this.modalType
+        modalClassNameMap[this.modalType] || ''
-      ] || ''}`;
+      }`;
     },
   },
   mounted() {

app/javascript/dashboard/components/SettingsSection.vue

@@ -2,7 +2,8 @@
   <div
     class="ml-0 mr-0 flex pt-0 pr-4 pb-4 pl-0"
     :class="{
-      'pt-4 border-b border-solid border-slate-50 dark:border-slate-700/30': showBorder,
+      'pt-4 border-b border-solid border-slate-50 dark:border-slate-700/30':
+        showBorder,
     }"
   >
     <div class="w-[30%] min-w-0 max-w-[30%] pr-12">

app/javascript/dashboard/components/app/PaymentPendingBanner.vue

@@ -72,10 +72,8 @@ export default {
       const { custom_attributes: subscription } = account;
       if (!subscription) return EMPTY_SUBSCRIPTION_INFO;
 
-      const {
+      const { subscription_status: status, subscription_ends_on: endsOn } =
-        subscription_status: status,
+        subscription;
-        subscription_ends_on: endsOn,
-      } = subscription;
 
       return { status, endsOn: new Date(endsOn) };
     },

app/javascript/dashboard/components/app/versionCheckHelper.js

@@ -1,4 +1,4 @@
-const semver = require('semver');
+import semver from 'semver';
 
 export const hasAnUpdateAvailable = (latestVersion, currentVersion) => {
   if (!semver.valid(latestVersion)) {

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -10,7 +10,7 @@
         :is-loading="isLoading"
         @click="onCmdResolveConversation"
       >
-        {{ this.$t('CONVERSATION.HEADER.RESOLVE_ACTION') }}
+        {{ $t('CONVERSATION.HEADER.RESOLVE_ACTION') }}
       </woot-button>
       <woot-button
         v-else-if="isResolved"
@@ -21,7 +21,7 @@
         :is-loading="isLoading"
         @click="onCmdOpenConversation"
       >
-        {{ this.$t('CONVERSATION.HEADER.REOPEN_ACTION') }}
+        {{ $t('CONVERSATION.HEADER.REOPEN_ACTION') }}
       </woot-button>
       <woot-button
         v-else-if="showOpenButton"
@@ -31,7 +31,7 @@
         :is-loading="isLoading"
         @click="onCmdOpenConversation"
       >
-        {{ this.$t('CONVERSATION.HEADER.OPEN_ACTION') }}
+        {{ $t('CONVERSATION.HEADER.OPEN_ACTION') }}
       </woot-button>
       <woot-button
         v-if="showAdditionalActions"
@@ -57,7 +57,7 @@
             icon="snooze"
             @click="() => openSnoozeModal()"
           >
-            {{ this.$t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL') }}
+            {{ $t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL') }}
           </woot-button>
         </woot-dropdown-item>
         <woot-dropdown-item v-if="!isPending">
@@ -68,7 +68,7 @@
             icon="book-clock"
             @click="() => toggleStatus(STATUS_TYPE.PENDING)"
           >
-            {{ this.$t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
+            {{ $t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
           </woot-button>
         </woot-dropdown-item>
       </woot-dropdown-menu>

app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue

@@ -34,8 +34,8 @@
             <woot-submit-button
               :disabled="
                 $v.accountName.$invalid ||
-                  $v.accountName.$invalid ||
+                $v.accountName.$invalid ||
-                  uiFlags.isCreating
+                uiFlags.isCreating
               "
               :button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
               :loading="uiFlags.isCreating"

app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue

@@ -3,7 +3,8 @@
     <button
       class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
       :class="{
-        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50': isNotificationPanelActive,
+        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
+          isNotificationPanelActive,
       }"
       @click="openNotificationPanel"
     >

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue

@@ -9,7 +9,8 @@
       class="font-medium h-7 my-1 hover:bg-slate-25 hover:text-bg-50 flex items-center px-2 rounded-md dark:hover:bg-slate-800"
       :class="{
         'bg-woot-25 dark:bg-slate-800': isActive,
-        'text-ellipsis overflow-hidden whitespace-nowrap max-w-full': shouldTruncate,
+        'text-ellipsis overflow-hidden whitespace-nowrap max-w-full':
+          shouldTruncate,
       }"
       @click="navigate"
     >
@@ -44,7 +45,8 @@
             class="text-sm text-slate-700 dark:text-slate-100"
             :class="{
               'text-woot-500 dark:text-woot-500': isActive,
-              'text-ellipsis overflow-hidden whitespace-nowrap max-w-full': shouldTruncate,
+              'text-ellipsis overflow-hidden whitespace-nowrap max-w-full':
+                shouldTruncate,
             }"
           >
             {{ label }}

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue

@@ -35,7 +35,8 @@
         :class="{
           'text-slate-300 dark:text-slate-600': isCountZero && !isActiveView,
           'text-slate-600 dark:text-slate-50': !isCountZero && !isActiveView,
-          'bg-woot-75 dark:bg-woot-200 text-woot-600 dark:text-woot-600': isActiveView,
+          'bg-woot-75 dark:bg-woot-200 text-woot-600 dark:text-woot-600':
+            isActiveView,
           'bg-slate-50 dark:bg-slate-700': !isActiveView,
         }"
       >

app/javascript/dashboard/components/widgets/AILoader.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="animation-container margin-top-1">
-    <div class="ai-typing--wrap ">
+    <div class="ai-typing--wrap">
       <fluent-icon icon="wand" size="14" class="ai-typing--icon" />
       <label>
         {{ $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.AI_WRITING') }}

app/javascript/dashboard/components/widgets/FilterInput/Index.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <div>
     <div
@@ -255,7 +256,9 @@ export default {
           value === 'conversation_attribute' ||
           value === 'contact_attribute'
         ) {
+          // eslint-disable-next-line vue/no-mutating-props
           this.value.custom_attribute_type = this.customAttributeType;
+          // eslint-disable-next-line vue/no-mutating-props
         } else this.value.custom_attribute_type = '';
       },
       immediate: true,

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -72,7 +72,9 @@ import { MESSAGE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
 const createState = (
   content,
   placeholder,
+  // eslint-disable-next-line default-param-last
   plugins = [],
+  // eslint-disable-next-line default-param-last
   methods = {},
   enabledMenuOptions
 ) => {

app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue

@@ -32,7 +32,9 @@ const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
 const createState = (
   content,
   placeholder,
+  // eslint-disable-next-line default-param-last
   plugins = [],
+  // eslint-disable-next-line default-param-last
   methods = {},
   enabledMenuOptions
 ) => {

app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue

@@ -1,8 +1,6 @@
 <template>
   <div
-    :class="
+    :class="`status-badge status-badge__${status} rounded-full w-2.5 h-2.5 mr-0.5 rtl:mr-0 rtl:ml-0.5 inline-flex`"
-      `status-badge status-badge__${status} rounded-full w-2.5 h-2.5 mr-0.5 rtl:mr-0 rtl:ml-0.5 inline-flex`
-    "
   />
 </template>
 <script>

app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue

@@ -16,7 +16,7 @@
     >
       <div class="items-center flex justify-between last:mt-4">
         <span class="text-slate-800 dark:text-slate-100 text-xs font-medium">{{
-          this.$t('CHAT_LIST.CHAT_SORT.STATUS')
+          $t('CHAT_LIST.CHAT_SORT.STATUS')
         }}</span>
         <filter-item
           type="status"
@@ -28,7 +28,7 @@
       </div>
       <div class="items-center flex justify-between last:mt-4">
         <span class="text-slate-800 dark:text-slate-100 text-xs font-medium">{{
-          this.$t('CHAT_LIST.CHAT_SORT.ORDER_BY')
+          $t('CHAT_LIST.CHAT_SORT.ORDER_BY')
         }}</span>
         <filter-item
           type="sort"

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -87,7 +87,7 @@
             class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
             :icon="attachmentIcon"
           />
-          {{ this.$t(`${attachmentMessageContent}`) }}
+          {{ $t(`${attachmentMessageContent}`) }}
         </span>
         <span v-else>
           {{ $t('CHAT_LIST.NO_CONTENT') }}
@@ -103,7 +103,7 @@
           icon="info"
         />
         <span>
-          {{ this.$t(`CHAT_LIST.NO_MESSAGES`) }}
+          {{ $t(`CHAT_LIST.NO_MESSAGES`) }}
         </span>
       </p>
       <div class="conversation--meta flex flex-col absolute right-4 top-4">

app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <woot-modal :show.sync="show" :on-close="onCancel">
     <div class="h-auto overflow-auto flex flex-col">

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -450,16 +450,14 @@ export default {
 
       // label suggestions are not part of the messages list
       // so we need to handle them separately
-      let labelSuggestions = this.conversationPanel.querySelector(
+      let labelSuggestions =
-        '.label-suggestion'
+        this.conversationPanel.querySelector('.label-suggestion');
-      );
 
       // if there are unread messages, scroll to the first unread message
       if (this.unreadMessageCount > 0) {
         // capturing only the unread messages
-        relevantMessages = this.conversationPanel.querySelectorAll(
+        relevantMessages =
-          '.message--unread'
+          this.conversationPanel.querySelectorAll('.message--unread');
-        );
       } else if (labelSuggestions) {
         // when scrolling to the bottom, the label suggestions is below the last message
         // so we scroll there if there are no unread messages

app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue

@@ -8,8 +8,10 @@
     }"
     class="shrink-0 rounded-sm inline-flex w-3.5 h-3.5"
     :class="{
-      'bg-red-50 dark:bg-red-700 dark:bg-opacity-30 text-red-500 dark:text-red-600': isUrgent,
+      'bg-red-50 dark:bg-red-700 dark:bg-opacity-30 text-red-500 dark:text-red-600':
-      'bg-slate-50 dark:bg-slate-700 text-slate-600 dark:text-slate-200': !isUrgent,
+        isUrgent,
+      'bg-slate-50 dark:bg-slate-700 text-slate-600 dark:text-slate-200':
+        !isUrgent,
     }"
   >
     <fluent-icon

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -431,9 +431,8 @@ export default {
       const {
         LAYOUT_TYPES: { CONDENSED },
       } = wootConstants;
-      const {
+      const { conversation_display_type: conversationDisplayType = CONDENSED } =
-        conversation_display_type: conversationDisplayType = CONDENSED,
+        this.uiSettings;
-      } = this.uiSettings;
       return conversationDisplayType !== CONDENSED;
     },
     emojiDialogClassOnExpandedLayoutAndRTLView() {

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <woot-modal :show.sync="show" :on-close="onClose" size="modal-big">
     <woot-modal-header

app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue

@@ -187,8 +187,9 @@ export default {
         return '';
       }
       const { screenName, sourceId } = this;
-      return `https://twitter.com/${screenName ||
+      return `https://twitter.com/${
-        this.inbox.name}/status/${sourceId}`;
+        screenName || this.inbox.name
+      }/status/${sourceId}`;
     },
     linkToStory() {
       if (!this.storyId || !this.storySender) {

app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue

@@ -57,9 +57,8 @@ export default {
     async joinTheCall() {
       this.isLoading = true;
       try {
-        const {
+        const { data: { authResponse: { authToken } = {} } = {} } =
-          data: { authResponse: { authToken } = {} } = {},
+          await DyteAPI.addParticipantToMeeting(this.messageId);
-        } = await DyteAPI.addParticipantToMeeting(this.messageId);
         this.dyteAuthToken = authToken;
       } catch (err) {
         this.showAlert(this.$t('INTEGRATION_SETTINGS.DYTE.JOIN_ERROR'));

app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <woot-modal
     full-width
@@ -212,8 +213,13 @@ export default {
       return this.activeFileType === ALLOWED_FILE_TYPES.AUDIO;
     },
     senderDetails() {
-      const { name, available_name: availableName, avatar_url, thumbnail, id } =
+      const {
-        this.activeAttachment?.sender || this.attachment?.sender;
+        name,
+        available_name: availableName,
+        avatar_url,
+        thumbnail,
+        id,
+      } = this.activeAttachment?.sender || this.attachment?.sender || {};
       const currentUserID = this.currentUser?.id;
       return {
         name: currentUserID === id ? 'You' : name || availableName || '',

app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue

@@ -34,15 +34,13 @@
       :option="labelMenuConfig"
       :sub-menu-available="!!labels.length"
     >
-      <template>
+      <menu-item
-        <menu-item
+        v-for="label in labels"
-          v-for="label in labels"
+        :key="label.id"
-          :key="label.id"
+        :option="generateMenuLabelConfig(label, 'label')"
-          :option="generateMenuLabelConfig(label, 'label')"
+        variant="label"
-          variant="label"
+        @click="$emit('assign-label', label)"
-          @click="$emit('assign-label', label)"
+      />
-        />
-      </template>
     </menu-item-with-submenu>
     <menu-item-with-submenu
       :option="agentMenuConfig"

app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue

@@ -17,7 +17,7 @@
         type="button"
         @click="onAvatarDelete"
       >
-        {{ this.$t('INBOX_MGMT.DELETE.AVATAR_DELETE_BUTTON_TEXT') }}
+        {{ $t('INBOX_MGMT.DELETE.AVATAR_DELETE_BUTTON_TEXT') }}
       </woot-button>
     </div>
     <label>

app/javascript/dashboard/components/widgets/forms/PhoneInput.vue

@@ -63,8 +63,9 @@
       <div v-if="filteredCountriesBySearch.length === 0">
         <span
           class="flex items-center justify-center text-sm text-slate-500 dark:text-slate-300 mt-4"
-          >No results found</span
         >
+          No results found
+        </span>
       </div>
     </div>
   </div>

app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <modal :show.sync="show" :on-close="closeModal">
     <woot-modal-header :header-title="title" :header-content="message" />

app/javascript/dashboard/components/widgets/modal/DeleteModal.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <modal :show.sync="show" :on-close="onClose">
     <woot-modal-header

app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue

@@ -30,9 +30,7 @@
               <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
                 {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
               </hotkey>
-              <hotkey custom-class="min-h-[28px] w-9 key">
+              <hotkey custom-class="min-h-[28px] w-9 key"> J </hotkey>
-                J
-              </hotkey>
               <span
                 class="flex items-center font-semibold text-sm text-slate-800 dark:text-slate-100"
               >
@@ -42,9 +40,7 @@
             <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
             </hotkey>
-            <hotkey custom-class="w-9 key">
+            <hotkey custom-class="w-9 key"> K </hotkey>
-              K
-            </hotkey>
           </div>
         </div>
 
@@ -59,9 +55,7 @@
             <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
             </hotkey>
-            <hotkey custom-class="w-9 key">
+            <hotkey custom-class="w-9 key"> E </hotkey>
-              E
-            </hotkey>
           </div>
         </div>
         <div

app/javascript/dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper.js

@@ -97,6 +97,7 @@ class DashboardAudioNotificationHelper {
     return conversationAssigneeId === this.currentUserId;
   };
 
+  // eslint-disable-next-line class-methods-use-this
   isMessageFromCurrentConversation = message => {
     return (
       window.WOOT.$store.getters.getSelectedChat?.id === message.conversation_id

app/javascript/dashboard/helper/URLHelper.js

@@ -60,6 +60,7 @@ export const conversationListPageURL = ({
 
 export const isValidURL = value => {
   /* eslint-disable no-useless-escape */
-  const URL_REGEX = /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/gm;
+  const URL_REGEX =
+    /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/gm;
   return URL_REGEX.test(value);
 };

app/javascript/dashboard/helper/actionCable.js

@@ -102,6 +102,7 @@ class ActionCableConnector extends BaseActionCableConnector {
     this.app.$store.dispatch('updateConversation', data);
   };
 
+  // eslint-disable-next-line class-methods-use-this
   onLogout = () => AuthAPI.logout();
 
   onMessageCreated = data => {
@@ -117,6 +118,7 @@ class ActionCableConnector extends BaseActionCableConnector {
     });
   };
 
+  // eslint-disable-next-line class-methods-use-this
   onReload = () => window.location.reload();
 
   onStatusChange = data => {
@@ -171,6 +173,7 @@ class ActionCableConnector extends BaseActionCableConnector {
     }, 30000);
   };
 
+  // eslint-disable-next-line class-methods-use-this
   fetchConversationStats = () => {
     bus.$emit('fetch_conversation_stats');
     bus.$emit('fetch_overview_reports');
@@ -192,6 +195,7 @@ class ActionCableConnector extends BaseActionCableConnector {
     this.app.$store.dispatch('notifications/addNotification', data);
   };
 
+  // eslint-disable-next-line class-methods-use-this
   onFirstReplyCreated = () => {
     bus.$emit('fetch_overview_reports');
   };

app/javascript/dashboard/helper/automationHelper.js

@@ -259,7 +259,9 @@ export const isCustomAttribute = (attrs, key) => {
 };
 
 export const generateCustomAttributes = (
+  // eslint-disable-next-line default-param-last
   conversationAttributes = [],
+  // eslint-disable-next-line default-param-last
   contactAttributes = [],
   conversationlabel,
   contactlabel

app/javascript/dashboard/helper/customViewsHelper.js

@@ -70,15 +70,8 @@ const getValuesForCountries = (values, countries) => {
 
 export const getValuesForFilter = (filter, params) => {
   const { attribute_key, values } = filter;
-  const {
+  const { languages, countries, agents, inboxes, teams, campaigns, labels } =
-    languages,
+    params;
-    countries,
-    agents,
-    inboxes,
-    teams,
-    campaigns,
-    labels,
-  } = params;
   switch (attribute_key) {
     case 'status':
       return getValuesForStatus(values);

app/javascript/dashboard/helper/routeHelpers.js

@@ -1,7 +1,9 @@
+// eslint-disable-next-line default-param-last
 export const getCurrentAccount = ({ accounts } = {}, accountId) => {
   return accounts.find(account => account.id === accountId);
 };
 
+// eslint-disable-next-line default-param-last
 export const getUserRole = ({ accounts } = {}, accountId) => {
   const currentAccount = getCurrentAccount({ accounts }, accountId) || {};
   return currentAccount.role || null;

app/javascript/dashboard/helper/specs/auditlogHelper.spec.js

@@ -16,10 +16,8 @@ describe('Helper functions', () => {
       const changes = {
         role: [0, 1],
       };
-      const {
+      const { changes: extractedChanges, values } =
-        changes: extractedChanges,
+        extractChangedAccountUserValues(changes);
-        values,
-      } = extractChangedAccountUserValues(changes);
       expect(extractedChanges).toEqual(['role']);
       expect(values).toEqual(['administrator']);
     });
@@ -28,10 +26,8 @@ describe('Helper functions', () => {
       const changes = {
         availability: [0, 2],
       };
-      const {
+      const { changes: extractedChanges, values } =
-        changes: extractedChanges,
+        extractChangedAccountUserValues(changes);
-        values,
-      } = extractChangedAccountUserValues(changes);
       expect(extractedChanges).toEqual(['availability']);
       expect(values).toEqual(['busy']);
     });
@@ -41,10 +37,8 @@ describe('Helper functions', () => {
         role: [1, 0],
         availability: [1, 2],
       };
-      const {
+      const { changes: extractedChanges, values } =
-        changes: extractedChanges,
+        extractChangedAccountUserValues(changes);
-        values,
-      } = extractChangedAccountUserValues(changes);
       expect(extractedChanges).toEqual(['role', 'availability']);
       expect(values).toEqual(['agent', 'busy']);
     });

app/javascript/dashboard/helper/specs/editorHelper.spec.js

@@ -97,9 +97,8 @@ describe('removeSignature', () => {
     expect(removeSignature(body, signature)).toBe('This is a test\n\n');
   });
   it('removes signature if present with spaces and new lines', () => {
-    const { body, signature } = HAS_SIGNATURE[
+    const { body, signature } =
-      'signature at end with spaces and new lines'
+      HAS_SIGNATURE['signature at end with spaces and new lines'];
-    ];
     expect(removeSignature(body, signature)).toBe('This is a test\n\n');
   });
   it('removes signature if present without text before it', () => {
@@ -129,9 +128,8 @@ describe('replaceSignature', () => {
     );
   });
   it('removes signature if present with spaces and new lines', () => {
-    const { body, signature } = HAS_SIGNATURE[
+    const { body, signature } =
-      'signature at end with spaces and new lines'
+      HAS_SIGNATURE['signature at end with spaces and new lines'];
-    ];
     expect(replaceSignature(body, signature, NEW_SIGNATURE)).toBe(
       `This is a test\n\n--\n\n${NEW_SIGNATURE}`
     );

app/javascript/dashboard/mixins/automations/methodsMixin.js

@@ -169,8 +169,9 @@ export default {
     showActionInput(action) {
       if (action === 'send_email_to_team' || action === 'send_message')
         return false;
-      const type = this.automationActionTypes.find(i => i.key === action)
+      const type = this.automationActionTypes.find(
-        .inputType;
+        i => i.key === action
+      ).inputType;
       return !!type;
     },
     resetAction(index) {
@@ -264,9 +265,10 @@ export default {
         'attributes/getAttributesByModel'
       ]('conversation_attribute');
 
-      const contactCustomAttributesRaw = this.$store.getters[
+      const contactCustomAttributesRaw =
-        'attributes/getAttributesByModel'
+        this.$store.getters['attributes/getAttributesByModel'](
-      ]('contact_attribute');
+          'contact_attribute'
+        );
       const conversationCustomAttributeTypes = generateCustomAttributeTypes(
         conversationCustomAttributesRaw,
         'conversation_attribute'

app/javascript/dashboard/mixins/specs/uiSettings.spec.js

@@ -19,7 +19,8 @@ describe('uiSettingsMixin', () => {
       getUISettings: () => ({
         enter_to_send_enabled: false,
         is_ct_labels_open: true,
-        conversation_sidebar_items_order: DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
+        conversation_sidebar_items_order:
+          DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
         contact_sidebar_items_order: DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER,
       }),
     };
@@ -36,7 +37,8 @@ describe('uiSettingsMixin', () => {
     expect(wrapper.vm.uiSettings).toEqual({
       enter_to_send_enabled: false,
       is_ct_labels_open: true,
-      conversation_sidebar_items_order: DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
+      conversation_sidebar_items_order:
+        DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
       contact_sidebar_items_order: DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER,
     });
   });
@@ -56,7 +58,8 @@ describe('uiSettingsMixin', () => {
           uiSettings: {
             enter_to_send_enabled: true,
             is_ct_labels_open: true,
-            conversation_sidebar_items_order: DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
+            conversation_sidebar_items_order:
+              DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
             contact_sidebar_items_order: DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER,
           },
         },
@@ -80,7 +83,8 @@ describe('uiSettingsMixin', () => {
           uiSettings: {
             enter_to_send_enabled: false,
             is_ct_labels_open: false,
-            conversation_sidebar_items_order: DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
+            conversation_sidebar_items_order:
+              DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
             contact_sidebar_items_order: DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER,
           },
         },

app/javascript/dashboard/modules/contact/ContactMergeModal.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <woot-modal :show.sync="show" :on-close="onClose">
     <woot-modal-header

app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <modal :show.sync="show" :on-close="onClose">
     <woot-modal-header

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -48,7 +48,7 @@
           v-if="enabledOptions['copy']"
           :option="{
             icon: 'clipboard',
-            label: this.$t('CONVERSATION.CONTEXT_MENU.COPY'),
+            label: $t('CONVERSATION.CONTEXT_MENU.COPY'),
           }"
           variant="icon"
           @click="handleCopy"
@@ -57,7 +57,7 @@
           v-if="enabledOptions['copy']"
           :option="{
             icon: 'translate',
-            label: this.$t('CONVERSATION.CONTEXT_MENU.TRANSLATE'),
+            label: $t('CONVERSATION.CONTEXT_MENU.TRANSLATE'),
           }"
           variant="icon"
           @click="handleTranslate"
@@ -66,7 +66,7 @@
         <menu-item
           :option="{
             icon: 'link',
-            label: this.$t('CONVERSATION.CONTEXT_MENU.COPY_PERMALINK'),
+            label: $t('CONVERSATION.CONTEXT_MENU.COPY_PERMALINK'),
           }"
           variant="icon"
           @click="copyLinkToMessage"
@@ -75,9 +75,7 @@
           v-if="enabledOptions['cannedResponse']"
           :option="{
             icon: 'comment-add',
-            label: this.$t(
+            label: $t('CONVERSATION.CONTEXT_MENU.CREATE_A_CANNED_RESPONSE'),
-              'CONVERSATION.CONTEXT_MENU.CREATE_A_CANNED_RESPONSE'
-            ),
           }"
           variant="icon"
           @click="showCannedResponseModal"
@@ -87,7 +85,7 @@
           v-if="enabledOptions['delete']"
           :option="{
             icon: 'delete',
-            label: this.$t('CONVERSATION.CONTEXT_MENU.DELETE'),
+            label: $t('CONVERSATION.CONTEXT_MENU.DELETE'),
           }"
           variant="icon"
           @click="openDeleteModal"

app/javascript/dashboard/modules/search/components/ReadMore.vue

@@ -3,7 +3,8 @@
     <div
       ref="content"
       :class="{
-        'shrink-container after:shrink-gradient-light dark:after:shrink-gradient-dark': shrink,
+        'shrink-container after:shrink-gradient-light dark:after:shrink-gradient-dark':
+          shrink,
       }"
     >
       <slot />

app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue

@@ -5,7 +5,7 @@
     </div>
     <div class="conversation-details">
       <div class="meta-wrap">
-        <div class="flex-container ">
+        <div class="flex-container">
           <woot-label
             class="conversation-id"
             :title="`#${id}`"

app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue

@@ -70,7 +70,9 @@ export default {
     background: white;
 
     &.is-focused {
-      box-shadow: 0 0 0 1px var(--color-woot), 0 0 2px 2px var(--w-100);
+      box-shadow:
+        0 0 0 1px var(--color-woot),
+        0 0 2px 2px var(--w-100);
     }
   }
 

app/javascript/dashboard/routes/dashboard/Dashboard.vue

@@ -87,9 +87,8 @@ export default {
       return conversationDisplayType;
     },
     previouslyUsedSidebarView() {
-      const {
+      const { previously_used_sidebar_view: showSecondarySidebar } =
-        previously_used_sidebar_view: showSecondarySidebar,
+        this.uiSettings;
-      } = this.uiSettings;
       return showSecondarySidebar;
     },
   },

app/javascript/dashboard/routes/dashboard/commands/appearanceHotKeys.js

@@ -56,8 +56,9 @@ export default {
   methods: {
     setAppearance(theme) {
       LocalStorage.set(LOCAL_STORAGE_KEYS.COLOR_SCHEME, theme);
-      const isOSOnDarkMode = window.matchMedia('(prefers-color-scheme: dark)')
+      const isOSOnDarkMode = window.matchMedia(
-        .matches;
+        '(prefers-color-scheme: dark)'
+      ).matches;
       setColorTheme(isOSOnDarkMode);
     },
   },

app/javascript/dashboard/routes/dashboard/commands/commandbar.vue

@@ -30,13 +30,10 @@ export default {
     appearanceHotKeys,
     goToCommandHotKeys,
   ],
-
-  data() {
-    return {
-      placeholder: this.$t('COMMAND_BAR.SEARCH_PLACEHOLDER'),
-    };
-  },
   computed: {
+    placeholder() {
+      return this.$t('COMMAND_BAR.SEARCH_PLACEHOLDER');
+    },
     accountId() {
       return this.$store.getters.getCurrentAccountId;
     },
@@ -64,9 +61,8 @@ export default {
       this.$refs.ninjakeys.data = this.hotKeys;
     },
     onSelected(item) {
-      const {
+      const { detail: { action: { title = null, section = null } = {} } = {} } =
-        detail: { action: { title = null, section = null } = {} } = {},
+        item;
-      } = item;
       this.$track(GENERAL_EVENTS.COMMAND_BAR, {
         section,
         action: title,

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

@@ -407,9 +407,10 @@ export default {
       const params = {
         countries: countries,
         filterTypes: contactFilterItems,
-        allCustomAttributes: this.$store.getters[
+        allCustomAttributes:
-          'attributes/getAttributesByModel'
+          this.$store.getters['attributes/getAttributesByModel'](
-        ]('contact_attribute'),
+            'contact_attribute'
+          ),
       };
       return params;
     },

app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/v-slot-style -->
 <template>
   <div class="bg-white dark:bg-slate-900">
     <div class="multiselect-wrap--small">

app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue

@@ -117,10 +117,8 @@ export default {
       if (!this.conversationAttributes.browser) {
         return '';
       }
-      const {
+      const { platform_name: platformName, platform_version: platformVersion } =
-        platform_name: platformName,
+        this.conversationAttributes.browser;
-        platform_version: platformVersion,
-      } = this.conversationAttributes.browser;
       return `${platformName || ''} ${platformVersion || ''}`;
     },
     ipAddress() {

app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue

@@ -87,16 +87,14 @@ export default {
       const {
         LAYOUT_TYPES: { CONDENSED },
       } = wootConstants;
-      const {
+      const { conversation_display_type: conversationDisplayType = CONDENSED } =
-        conversation_display_type: conversationDisplayType = CONDENSED,
+        this.uiSettings;
-      } = this.uiSettings;
       return conversationDisplayType !== CONDENSED;
     },
     isContactPanelOpen() {
       if (this.currentChat.id) {
-        const {
+        const { is_contact_sidebar_open: isContactSidebarOpen } =
-          is_contact_sidebar_open: isContactSidebarOpen,
+          this.uiSettings;
-        } = this.uiSettings;
         return isContactSidebarOpen;
       }
       return false;
@@ -127,7 +125,8 @@ export default {
     toggleConversationLayout() {
       const { LAYOUT_TYPES } = wootConstants;
       const {
-        conversation_display_type: conversationDisplayType = LAYOUT_TYPES.CONDENSED,
+        conversation_display_type:
+          conversationDisplayType = LAYOUT_TYPES.CONDENSED,
       } = this.uiSettings;
       const newViewType =
         conversationDisplayType === LAYOUT_TYPES.CONDENSED

app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="macro button secondary clear ">
+  <div class="macro button secondary clear">
     <span class="overflow-hidden whitespace-nowrap text-ellipsis">{{
       macro.name
     }}</span>

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue

@@ -117,9 +117,7 @@
     />
 
     <div class="w-full">
-      <label>
+      <label> Social Profiles </label>
-        Social Profiles
-      </label>
       <div
         v-for="socialProfile in socialProfileKeys"
         :key="socialProfile.key"

app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
     <div class="h-auto overflow-auto flex flex-col">

app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue

@@ -1,10 +1,11 @@
+<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
     <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header
-        :header-title="
+        :header-title="`${$t('EDIT_CONTACT.TITLE')} - ${
-          `${$t('EDIT_CONTACT.TITLE')} - ${contact.name || contact.email}`
+          contact.name || contact.email
-        "
+        }`"
         :header-content="$t('EDIT_CONTACT.DESC')"
       />
       <contact-form

app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <woot-modal :show.sync="show" :on-close="onCancel">
     <div class="h-auto overflow-auto flex flex-col">

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

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <div>
     <woot-delete-modal

app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <modal :show.sync="show" :on-close="onClose">
     <woot-modal-header

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearchResultItem.vue

@@ -10,7 +10,7 @@
         {{ ` / ` }}
         {{
           category ||
-            $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.ARTICLE_SEARCH_RESULT')
+          $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.ARTICLE_SEARCH_RESULT')
         }}
       </p>
       <div class="action-buttons">

app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue

@@ -104,9 +104,8 @@ export default {
       isFetching: 'portals/isFetchingPortals',
     }),
     isSidebarOpen() {
-      const {
+      const { show_help_center_secondary_sidebar: showSecondarySidebar } =
-        show_help_center_secondary_sidebar: showSecondarySidebar,
+        this.uiSettings;
-      } = this.uiSettings;
       return showSecondarySidebar;
     },
     showHelpCenterSidebar() {

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue

@@ -27,13 +27,11 @@
         <ul>
           <li v-for="locale in locales" :key="locale.code">
             <woot-button
-              :variant="
+              :variant="`locale-item ${
-                `locale-item ${
+                isLocaleActive(locale.code, activePortalSlug)
-                  isLocaleActive(locale.code, activePortalSlug)
+                  ? 'smooth'
-                    ? 'smooth'
+                  : 'clear'
-                    : 'clear'
+              }`"
-                }`
-              "
               size="large"
               color-scheme="secondary"
               @click="event => onClick(event, locale.code, portal)"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <woot-modal :show.sync="show" :on-close="onClose">
     <woot-modal-header

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <woot-modal :show.sync="show" :on-close="onClose">
     <woot-modal-header

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-col py-2 px-2.5 overflow-auto h-full flex ">
+  <div class="flex-col py-2 px-2.5 overflow-auto h-full flex">
     <woot-button
       v-for="notificationItem in notifications"
       v-show="!isLoading"
@@ -21,7 +21,7 @@
           class="flex-col ml-2.5 overflow-hidden w-full flex justify-between"
         >
           <div class="flex justify-between">
-            <div class="items-center flex ">
+            <div class="items-center flex">
               <span class="font-bold text-slate-800 dark:text-slate-100">
                 {{
                   `#${
@@ -50,7 +50,7 @@
               />
             </div>
           </div>
-          <div class="w-full flex ">
+          <div class="w-full flex">
             <span
               class="text-slate-700 dark:text-slate-200 font-normal overflow-hidden whitespace-nowrap text-ellipsis"
             >

app/javascript/dashboard/routes/dashboard/settings/account/Index.vue

@@ -135,7 +135,7 @@ import alertMixin from 'shared/mixins/alertMixin';
 import configMixin from 'shared/mixins/configMixin';
 import accountMixin from '../../../../mixins/account';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
-const semver = require('semver');
+import semver from 'semver';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { getLanguageDirection } from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 

app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue

@@ -50,8 +50,8 @@
             <woot-submit-button
               :disabled="
                 $v.agentEmail.$invalid ||
-                  $v.agentName.$invalid ||
+                $v.agentName.$invalid ||
-                  uiFlags.isCreating
+                uiFlags.isCreating
               "
               :button-text="$t('AGENT_MGMT.ADD.FORM.SUBMIT')"
               :loading="uiFlags.isCreating"
@@ -130,9 +130,8 @@ export default {
         this.showAlert(this.$t('AGENT_MGMT.ADD.API.SUCCESS_MESSAGE'));
         this.onClose();
       } catch (error) {
-        const {
+        const { response: { data: { error: errorResponse = '' } = {} } = {} } =
-          response: { data: { error: errorResponse = '' } = {} } = {},
+          error;
-        } = error;
         let errorMessage = '';
         if (error.response.status === 422) {
           errorMessage = this.$t('AGENT_MGMT.ADD.API.EXIST_MESSAGE');

app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue

@@ -51,8 +51,8 @@
             <woot-submit-button
               :disabled="
                 $v.agentType.$invalid ||
-                  $v.agentName.$invalid ||
+                $v.agentName.$invalid ||
-                  uiFlags.isUpdating
+                uiFlags.isUpdating
               "
               :button-text="$t('AGENT_MGMT.EDIT.FORM.SUBMIT')"
               :loading="uiFlags.isUpdating"

app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue

@@ -77,6 +77,12 @@ export default {
     TableFooter,
   },
   mixins: [alertMixin, timeMixin],
+  beforeRouteEnter(to, from, next) {
+    // Fetch Audit Logs on page load without manual refresh
+    next(vm => {
+      vm.fetchAuditLogs();
+    });
+  },
   data() {
     return {
       loading: {},
@@ -85,12 +91,6 @@ export default {
       },
     };
   },
-  beforeRouteEnter(to, from, next) {
-    // Fetch Audit Logs on page load without manual refresh
-    next(vm => {
-      vm.fetchAuditLogs();
-    });
-  },
   computed: {
     ...mapGetters({
       records: 'auditlogs/getAuditLogs',

app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue

@@ -38,8 +38,8 @@
           <woot-submit-button
             :disabled="
               $v.content.$invalid ||
-                $v.shortCode.$invalid ||
+              $v.shortCode.$invalid ||
-                addCanned.showLoading
+              addCanned.showLoading
             "
             :button-text="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
             :loading="addCanned.showLoading"

app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue

@@ -35,8 +35,8 @@
           <woot-submit-button
             :disabled="
               $v.content.$invalid ||
-                $v.shortCode.$invalid ||
+              $v.shortCode.$invalid ||
-                editCanned.showLoading
+              editCanned.showLoading
             "
             :button-text="$t('CANNED_MGMT.EDIT.FORM.SUBMIT')"
             :loading="editCanned.showLoading"

app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue

@@ -61,7 +61,7 @@
             class="button hollow primary"
             :to="{
               name: 'settings_inbox_show',
-              params: { inboxId: this.$route.params.inbox_id },
+              params: { inboxId: $route.params.inbox_id },
             }"
           >
             {{ $t('INBOX_MGMT.FINISH.MORE_SETTINGS') }}
@@ -70,7 +70,7 @@
             class="button success"
             :to="{
               name: 'inbox_dashboard',
-              params: { inboxId: this.$route.params.inbox_id },
+              params: { inboxId: $route.params.inbox_id },
             }"
           >
             {{ $t('INBOX_MGMT.FINISH.BUTTON_TEXT') }}

app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue

@@ -51,9 +51,7 @@
                 <span v-if="item.channel_type === 'Channel::Whatsapp'">
                   Whatsapp
                 </span>
-                <span v-if="item.channel_type === 'Channel::Sms'">
+                <span v-if="item.channel_type === 'Channel::Sms'"> Sms </span>
-                  Sms
-                </span>
                 <span v-if="item.channel_type === 'Channel::Email'">
                   Email
                 </span>