feat: Replace alertMixin usage with useAlert (#9793)

# Pull Request Template

## Description

This PR will replace the usage of `alertMixin` from the code base with
the `useAlert` composable.

Fixes
https://linear.app/chatwoot/issue/CW-3462/replace-alertmixin-usage-with-usealert

## Type of change

- [x] Breaking change (fix or feature that would cause existing
functionality not to work as expected)

## How Has This Been Tested?

Please refer this issue description

https://linear.app/chatwoot/issue/CW-3462/replace-alertmixin-usage-with-usealert


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Sojan Jose <sojan@pepalo.com>

app/javascript/dashboard/mixins/aiMixin.js

@@ -1,10 +1,9 @@
 import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
 import { OPEN_AI_EVENTS } from '../helper/AnalyticsHelper/events';
 import OpenAPI from '../api/integrations/openapi';
-import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
-  mixins: [alertMixin],
   mounted() {
     this.fetchIntegrationsIfRequired();
   },
@@ -101,7 +100,7 @@ export default {
         } = result;
         return generatedMessage;
       } catch (error) {
-        this.showAlert(this.$t('INTEGRATION_SETTINGS.OPEN_AI.GENERATE_ERROR'));
+        useAlert(this.$t('INTEGRATION_SETTINGS.OPEN_AI.GENERATE_ERROR'));
         return '';
       }
     },

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

@@ -17,6 +17,7 @@ import {
   generateCustomAttributes,
 } from 'dashboard/helper/automationHelper';
 import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
 
 export default {
   computed: {
@@ -138,14 +139,14 @@ export default {
     },
     removeFilter(index) {
       if (this.automation.conditions.length <= 1) {
-        this.showAlert(this.$t('AUTOMATION.CONDITION.DELETE_MESSAGE'));
+        useAlert(this.$t('AUTOMATION.CONDITION.DELETE_MESSAGE'));
       } else {
         this.automation.conditions.splice(index, 1);
       }
     },
     removeAction(index) {
       if (this.automation.actions.length <= 1) {
-        this.showAlert(this.$t('AUTOMATION.ACTION.DELETE_MESSAGE'));
+        useAlert(this.$t('AUTOMATION.ACTION.DELETE_MESSAGE'));
       } else {
         this.automation.actions.splice(index, 1);
       }

app/javascript/dashboard/mixins/fileUploadMixin.js

@@ -1,3 +1,4 @@
+import { useAlert } from 'dashboard/composables';
 import {
   MAXIMUM_FILE_UPLOAD_SIZE,
   MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL,
@@ -38,13 +39,13 @@ export default {
 
         upload.create((error, blob) => {
           if (error) {
-            this.showAlert(error);
+            useAlert(error);
           } else {
             this.attachFile({ file, blob });
           }
         });
       } else {
-        this.showAlert(
+        useAlert(
           this.$t('CONVERSATION.FILE_SIZE_LIMIT', {
             MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE,
           })
@@ -61,7 +62,7 @@ export default {
       if (checkFileSizeLimit(file, MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE)) {
         this.attachFile({ file });
       } else {
-        this.showAlert(
+        useAlert(
           this.$t('CONVERSATION.FILE_SIZE_LIMIT', {
             MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE,
           })

app/javascript/dashboard/mixins/isAdmin.js

@@ -1,12 +0,0 @@
-import { mapGetters } from 'vuex';
-
-export default {
-  computed: {
-    ...mapGetters({
-      currentUserRole: 'getCurrentRole',
-    }),
-    isAdmin() {
-      return this.currentUserRole === 'administrator';
-    },
-  },
-};

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

@@ -1,5 +1,6 @@
-import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
 import Vue from 'vue';
+import { useAlert } from 'dashboard/composables';
+import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
 
 vi.mock('shared/helpers/FileHelper', () => ({
   checkFileSizeLimit: vi.fn(),
@@ -11,6 +12,10 @@ vi.mock('activestorage', () => ({
   })),
 }));
 
+vi.mock('dashboard/composables', () => ({
+  useAlert: vi.fn(),
+}));
+
 describe('FileUploadMixin', () => {
   let vm;
 
@@ -53,9 +58,8 @@ describe('FileUploadMixin', () => {
 
     it('shows an alert if the file size exceeds the maximum limit', () => {
       const fakeFile = { size: 999999999 };
-      vm.showAlert = vi.fn();
       vm.onDirectFileUpload(fakeFile);
-      expect(vm.showAlert).toHaveBeenCalledWith(expect.any(String));
+      expect(useAlert).toHaveBeenCalledWith(expect.any(String));
     });
   });
 
@@ -67,9 +71,8 @@ describe('FileUploadMixin', () => {
 
     it('shows an alert if the file size exceeds the maximum limit', () => {
       const fakeFile = { size: 999999999 };
-      vm.showAlert = vi.fn();
       vm.onIndirectFileUpload(fakeFile);
-      expect(vm.showAlert).toHaveBeenCalledWith(expect.any(String));
+      expect(useAlert).toHaveBeenCalledWith(expect.any(String));
     });
   });
 });

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

@@ -1,28 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import isAdminMixin from '../isAdmin';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-describe('isAdminMixin', () => {
-  let getters;
-  let store;
-
-  beforeEach(() => {
-    getters = {
-      getCurrentRole: () => 'administrator',
-    };
-
-    store = new Vuex.Store({ getters });
-  });
-  it('set accountId properly', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [isAdminMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.isAdmin).toBe(true);
-  });
-});