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/modules/contact/ContactMergeModal.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import MergeContact from 'dashboard/modules/contact/components/MergeContact.vue';
 
 import ContactAPI from 'dashboard/api/contacts';
@@ -29,7 +29,6 @@ import { CONTACTS_EVENTS } from '../../helper/AnalyticsHelper/events';
 
 export default {
   components: { MergeContact },
-  mixins: [alertMixin],
   props: {
     primaryContact: {
       type: Object,
@@ -68,7 +67,7 @@ export default {
           contact => contact.id !== this.primaryContact.id
         );
       } catch (error) {
-        this.showAlert(this.$t('MERGE_CONTACTS.SEARCH.ERROR_MESSAGE'));
+        useAlert(this.$t('MERGE_CONTACTS.SEARCH.ERROR_MESSAGE'));
       } finally {
         this.isSearching = false;
       }
@@ -80,10 +79,10 @@ export default {
           childId: this.primaryContact.id,
           parentId: parentContactId,
         });
-        this.showAlert(this.$t('MERGE_CONTACTS.FORM.SUCCESS_MESSAGE'));
+        useAlert(this.$t('MERGE_CONTACTS.FORM.SUCCESS_MESSAGE'));
         this.onClose();
       } catch (error) {
-        this.showAlert(this.$t('MERGE_CONTACTS.FORM.ERROR_MESSAGE'));
+        useAlert(this.$t('MERGE_CONTACTS.FORM.ERROR_MESSAGE'));
       }
     },
   },

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

@@ -21,7 +21,7 @@
         :label="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.LABEL')"
         :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.PLACEHOLDER')"
       />
-      <div class="flex justify-end items-center py-2 px-0 gap-2">
+      <div class="flex items-center justify-end gap-2 px-0 py-2">
         <woot-button
           :is-disabled="$v.attributeName.$invalid || isCreating"
           :is-loading="isCreating"
@@ -38,14 +38,12 @@
 
 <script>
 import Modal from 'dashboard/components/Modal.vue';
-import alertMixin from 'shared/mixins/alertMixin';
 import { required, minLength } from 'vuelidate/lib/validators';
 
 export default {
   components: {
     Modal,
   },
-  mixins: [alertMixin],
   props: {
     show: {
       type: Boolean,

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

@@ -57,7 +57,7 @@
           </span>
         </div>
       </div>
-      <div class="multiselect-wrap--medium flex">
+      <div class="flex multiselect-wrap--medium">
         <div
           class="w-8 relative text-base text-slate-100 dark:text-slate-600 after:content-[''] after:h-12 after:w-0 after:left-4 after:absolute after:border-l after:border-solid after:border-slate-100 after:dark:border-slate-600 before:content-[''] before:h-0 before:w-4 before:left-4 before:top-12 before:absolute before:border-b before:border-solid before:border-slate-100 before:dark:border-slate-600"
         >
@@ -102,7 +102,7 @@
       :primary-contact-name="primaryContact.name"
       :parent-contact-name="parentContactName"
     />
-    <div class="mt-6 flex gap-2 justify-end">
+    <div class="flex justify-end gap-2 mt-6">
       <woot-button variant="clear" @click.prevent="onCancel">
         {{ $t('MERGE_CONTACTS.FORM.CANCEL') }}
       </woot-button>
@@ -114,7 +114,6 @@
 </template>
 
 <script>
-import alertMixin from 'shared/mixins/alertMixin';
 import { required } from 'vuelidate/lib/validators';
 
 import MergeContactSummary from 'dashboard/modules/contact/components/MergeContactSummary.vue';
@@ -122,7 +121,6 @@ import ContactDropdownItem from './ContactDropdownItem.vue';
 
 export default {
   components: { MergeContactSummary, ContactDropdownItem },
-  mixins: [alertMixin],
   props: {
     primaryContact: {
       type: Object,

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

@@ -104,7 +104,7 @@
   </div>
 </template>
 <script>
-import alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import { mapGetters } from 'vuex';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import AddCannedModal from 'dashboard/routes/dashboard/settings/canned/AddCanned.vue';
@@ -123,7 +123,7 @@ export default {
     TranslateModal,
     MenuItem,
   },
-  mixins: [alertMixin, messageFormatterMixin],
+  mixins: [messageFormatterMixin],
   props: {
     message: {
       type: Object,
@@ -183,12 +183,12 @@ export default {
       await copyTextToClipboard(
         `${fullConversationURL}?messageId=${this.messageId}`
       );
-      this.showAlert(this.$t('CONVERSATION.CONTEXT_MENU.LINK_COPIED'));
+      useAlert(this.$t('CONVERSATION.CONTEXT_MENU.LINK_COPIED'));
       this.handleClose();
     },
     async handleCopy() {
       await copyTextToClipboard(this.plainTextContent);
-      this.showAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
+      useAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
       this.handleClose();
     },
     showCannedResponseModal() {
@@ -233,10 +233,10 @@ export default {
           conversationId: this.conversationId,
           messageId: this.messageId,
         });
-        this.showAlert(this.$t('CONVERSATION.SUCCESS_DELETE_MESSAGE'));
+        useAlert(this.$t('CONVERSATION.SUCCESS_DELETE_MESSAGE'));
         this.handleClose();
       } catch (error) {
-        this.showAlert(this.$t('CONVERSATION.FAIL_DELETE_MESSSAGE'));
+        useAlert(this.$t('CONVERSATION.FAIL_DELETE_MESSSAGE'));
       }
     },
     closeDeleteModal() {