From 12af2fe026c909afc35f6bde7305dcd4eaf9c8d9 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 30 Apr 2024 10:35:14 +0530
Subject: [PATCH] feat: Remove the usage of clickAway mixin with directive
 (#9323)

---
 .../dashboard/components/buttons/ResolveAction.vue        | 3 +--
 .../dashboard/components/layout/AvailabilityStatus.vue    | 3 +--
 .../components/layout/sidebarComponents/OptionsMenu.vue   | 2 --
 .../dashboard/components/widgets/ColorPicker.vue          | 2 --
 .../dashboard/components/widgets/LabelSelector.vue        | 3 +--
 .../widgets/conversation/ConversationBasicFilter.vue      | 3 +--
 .../components/widgets/conversation/MoreActions.vue       | 3 +--
 .../components/widgets/conversation/ReplyBox.vue          | 2 --
 .../widgets/conversation/components/GalleryView.vue       | 3 +--
 .../widgets/conversation/components/SLACardLabel.vue      | 2 --
 .../conversationBulkActions/AgentSelector.vue             | 2 --
 .../conversation/conversationBulkActions/LabelActions.vue | 2 --
 .../conversation/conversationBulkActions/TeamActions.vue  | 2 --
 .../conversationBulkActions/UpdateActions.vue             | 2 --
 .../components/widgets/modal/WootKeyShortcutModal.vue     | 2 --
 .../conversations/components/MessageContextMenu.vue       | 3 +--
 .../dashboard/modules/search/components/SearchView.vue    | 2 --
 .../dashboard/contacts/components/ContactsTable.vue       | 3 +--
 .../dashboard/conversation/ConversationParticipant.vue    | 3 +--
 .../routes/dashboard/conversation/Macros/MacroItem.vue    | 3 +--
 .../routes/dashboard/conversation/contact/ContactInfo.vue | 3 +--
 .../routes/dashboard/conversation/labels/LabelBox.vue     | 8 +-------
 .../dashboard/conversation/search/PopOverSearch.vue       | 3 +--
 .../helpcenter/components/ArticleSearch/SearchPopover.vue | 3 +--
 .../helpcenter/components/Header/ArticleHeader.vue        | 3 ---
 .../helpcenter/components/Header/EditArticleHeader.vue    | 3 +--
 .../dashboard/helpcenter/components/PortalPopover.vue     | 2 --
 .../helpcenter/pages/categories/NameEmojiInput.vue        | 3 ---
 .../routes/dashboard/inbox/components/InboxListHeader.vue | 3 +--
 .../notifications/components/NotificationPanel.vue        | 3 +--
 .../dashboard/settings/campaigns/CampaignsTable.vue       | 3 +--
 .../settings/reports/components/SLA/SLAViewDetails.vue    | 3 ---
 app/javascript/portal/components/PublicArticleSearch.vue  | 3 ---
 .../shared/components/ui/MultiselectDropdown.vue          | 2 --
 app/javascript/widget/components/ChatInputWrap.vue        | 3 +--
 app/javascript/widget/components/Form/PhoneInput.vue      | 8 +-------
 36 files changed, 20 insertions(+), 86 deletions(-)

diff --git a/app/javascript/dashboard/components/buttons/ResolveAction.vue b/app/javascript/dashboard/components/buttons/ResolveAction.vue
index 9a70a7f19..61375dc21 100644
--- a/app/javascript/dashboard/components/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@@ -88,7 +88,6 @@
 <script>
 import { getUnixTime } from 'date-fns';
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
@@ -109,7 +108,7 @@ export default {
     WootDropdownMenu,
     CustomSnoozeModal,
   },
-  mixins: [clickaway, alertMixin, keyboardEventListenerMixins],
+  mixins: [alertMixin, keyboardEventListenerMixins],
   props: { conversationId: { type: [String, Number], required: true } },
   data() {
     return {
diff --git a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
index afada52b6..63f216058 100644
--- a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
+++ b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
@@ -47,7 +47,6 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
@@ -67,7 +66,7 @@ export default {
     AvailabilityStatusBadge,
   },
 
-  mixins: [clickaway, alertMixin],
+  mixins: [alertMixin],
 
   data() {
     return {
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
index 1c336cbb5..01dce6bf1 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
@@ -106,7 +106,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import Auth from '../../../api/auth';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
@@ -119,7 +118,6 @@ export default {
     WootDropdownItem,
     AvailabilityStatus,
   },
-  mixins: [clickaway],
   props: {
     show: {
       type: Boolean,
diff --git a/app/javascript/dashboard/components/widgets/ColorPicker.vue b/app/javascript/dashboard/components/widgets/ColorPicker.vue
index 8e8ac89b5..12b9124cf 100644
--- a/app/javascript/dashboard/components/widgets/ColorPicker.vue
+++ b/app/javascript/dashboard/components/widgets/ColorPicker.vue
@@ -18,13 +18,11 @@
 
 <script>
 import { Chrome } from 'vue-color';
-import { mixin as clickaway } from 'vue-clickaway';
 
 export default {
   components: {
     Chrome,
   },
-  mixins: [clickaway],
   props: {
     value: {
       type: String,
diff --git a/app/javascript/dashboard/components/widgets/LabelSelector.vue b/app/javascript/dashboard/components/widgets/LabelSelector.vue
index 67aa55030..97da49ac7 100644
--- a/app/javascript/dashboard/components/widgets/LabelSelector.vue
+++ b/app/javascript/dashboard/components/widgets/LabelSelector.vue
@@ -33,7 +33,6 @@
 import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
-import { mixin as clickaway } from 'vue-clickaway';
 import adminMixin from 'dashboard/mixins/isAdmin';
 
 export default {
@@ -42,7 +41,7 @@ export default {
     LabelDropdown,
   },
 
-  mixins: [clickaway, adminMixin, keyboardEventListenerMixins],
+  mixins: [adminMixin, keyboardEventListenerMixins],
 
   props: {
     allLabels: {
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
index f424fb693..fbf99a631 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
@@ -45,7 +45,6 @@
 <script>
 import wootConstants from 'dashboard/constants/globals';
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import FilterItem from './FilterItem.vue';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 
@@ -53,7 +52,7 @@ export default {
   components: {
     FilterItem,
   },
-  mixins: [clickaway, uiSettingsMixin],
+  mixins: [uiSettingsMixin],
   data() {
     return {
       showActionsDropdown: false,
diff --git a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
index 85136cedf..78435144d 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
@@ -37,7 +37,6 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import EmailTranscriptModal from './EmailTranscriptModal.vue';
 import ResolveAction from '../../buttons/ResolveAction.vue';
@@ -52,7 +51,7 @@ export default {
     EmailTranscriptModal,
     ResolveAction,
   },
-  mixins: [alertMixin, clickaway],
+  mixins: [alertMixin],
   data() {
     return {
       showEmailActionsModal: false,
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 38fc1c1fe..43ecda954 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -153,7 +153,6 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 
@@ -218,7 +217,6 @@ export default {
     ArticleSearchPopover,
   },
   mixins: [
-    clickaway,
     inboxMixin,
     uiSettingsMixin,
     alertMixin,
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
index 946bdfb09..08f77be9a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
@@ -180,7 +180,6 @@
   </woot-modal>
 </template>
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import timeMixin from 'dashboard/mixins/time';
@@ -200,7 +199,7 @@ export default {
   components: {
     Thumbnail,
   },
-  mixins: [keyboardEventListenerMixins, clickaway, timeMixin],
+  mixins: [keyboardEventListenerMixins, timeMixin],
   props: {
     show: {
       type: Boolean,
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue b/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
index bdffc7e78..57ddd451e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
@@ -51,7 +51,6 @@
 <script>
 import { evaluateSLAStatus } from '../helpers/SLAHelper';
 import SLAPopoverCard from './SLAPopoverCard.vue';
-import { mixin as clickaway } from 'vue-clickaway';
 
 const REFRESH_INTERVAL = 60000;
 
@@ -59,7 +58,6 @@ export default {
   components: {
     SLAPopoverCard,
   },
-  mixins: [clickaway],
   props: {
     chat: {
       type: Object,
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
index 1a4b4febe..4dd06f673 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
@@ -101,14 +101,12 @@
 import { mapGetters } from 'vuex';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import Spinner from 'shared/components/Spinner.vue';
-import { mixin as clickaway } from 'vue-clickaway';
 
 export default {
   components: {
     Thumbnail,
     Spinner,
   },
-  mixins: [clickaway],
   props: {
     selectedInboxes: {
       type: Array,
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
index 5118ec69c..80224532a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
@@ -74,11 +74,9 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 
 export default {
-  mixins: [clickaway],
   data() {
     return {
       query: '',
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
index bd02306e6..fcfaa61df 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
@@ -59,10 +59,8 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 export default {
-  mixins: [clickaway],
   data() {
     return {
       query: '',
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
index 38e13ac30..5e3523af7 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
@@ -36,7 +36,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 
@@ -45,7 +44,6 @@ export default {
     WootDropdownItem,
     WootDropdownMenu,
   },
-  mixins: [clickaway],
   props: {
     selectedInboxes: {
       type: Array,
diff --git a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
index 75b18607d..ffaab7e61 100644
--- a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
@@ -87,7 +87,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { SHORTCUT_KEYS } from './constants';
 import Hotkey from 'dashboard/components/base/Hotkey.vue';
 
@@ -95,7 +94,6 @@ export default {
   components: {
     Hotkey,
   },
-  mixins: [clickaway],
   props: {
     show: {
       type: Boolean,
diff --git a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
index 9adb9b2eb..4e45508ee 100644
--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@@ -106,7 +106,6 @@
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import AddCannedModal from 'dashboard/routes/dashboard/settings/canned/AddCanned.vue';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
@@ -124,7 +123,7 @@ export default {
     TranslateModal,
     MenuItem,
   },
-  mixins: [alertMixin, clickaway, messageFormatterMixin],
+  mixins: [alertMixin, messageFormatterMixin],
   props: {
     message: {
       type: Object,
diff --git a/app/javascript/dashboard/modules/search/components/SearchView.vue b/app/javascript/dashboard/modules/search/components/SearchView.vue
index 1706bc45e..c9b122b32 100644
--- a/app/javascript/dashboard/modules/search/components/SearchView.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchView.vue
@@ -73,7 +73,6 @@ import SearchResultConversationsList from './SearchResultConversationsList.vue';
 import SearchResultMessagesList from './SearchResultMessagesList.vue';
 import SearchResultContactsList from './SearchResultContactsList.vue';
 
-import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 export default {
@@ -84,7 +83,6 @@ export default {
     SearchResultConversationsList,
     SearchResultMessagesList,
   },
-  mixins: [clickaway],
   data() {
     return {
       selectedTab: 'all',
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
index 6c00f9901..2ca3f595f 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -28,7 +28,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { VeTable } from 'vue-easytable';
 import { getCountryFlag } from 'dashboard/helper/flag';
 
@@ -45,7 +44,7 @@ export default {
     Spinner,
     VeTable,
   },
-  mixins: [clickaway, timeMixin, rtlMixin],
+  mixins: [timeMixin, rtlMixin],
   props: {
     contacts: {
       type: Array,
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
index 2daf16c3f..820295b57 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
@@ -78,7 +78,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import Spinner from 'shared/components/Spinner.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import { mapGetters } from 'vuex';
@@ -92,7 +91,7 @@ export default {
     ThumbnailGroup,
     MultiselectDropdownItems,
   },
-  mixins: [alertMixin, agentMixin, clickaway],
+  mixins: [alertMixin, agentMixin],
   props: {
     conversationId: {
       type: [Number, String],
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
index 9a1883a24..38650bee0 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
@@ -34,7 +34,6 @@
 
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import { mixin as clickaway } from 'vue-clickaway';
 import MacroPreview from './MacroPreview.vue';
 import { CONVERSATION_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 
@@ -42,7 +41,7 @@ export default {
   components: {
     MacroPreview,
   },
-  mixins: [alertMixin, clickaway],
+  mixins: [alertMixin],
   props: {
     macro: {
       type: Object,
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index 380b4afd3..316352c7a 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -166,7 +166,6 @@
   </div>
 </template>
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import timeMixin from 'dashboard/mixins/time';
 import ContactInfoRow from './ContactInfoRow.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
@@ -195,7 +194,7 @@ export default {
     NewConversation,
     ContactMergeModal,
   },
-  mixins: [alertMixin, adminMixin, clickaway, timeMixin],
+  mixins: [alertMixin, adminMixin, timeMixin],
   props: {
     contact: {
       type: Object,
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
index eafa19655..df0d6d7ec 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
@@ -48,7 +48,6 @@ import { mapGetters } from 'vuex';
 import Spinner from 'shared/components/Spinner.vue';
 import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
 import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
-import { mixin as clickaway } from 'vue-clickaway';
 import adminMixin from 'dashboard/mixins/isAdmin';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import conversationLabelMixin from 'dashboard/mixins/conversation/labelMixin';
@@ -60,12 +59,7 @@ export default {
     AddLabel,
   },
 
-  mixins: [
-    clickaway,
-    conversationLabelMixin,
-    adminMixin,
-    keyboardEventListenerMixins,
-  ],
+  mixins: [conversationLabelMixin, adminMixin, keyboardEventListenerMixins],
   props: {
     conversationId: {
       type: Number,
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
index 2e94c7112..d84158477 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
@@ -33,7 +33,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import timeMixin from '../../../../mixins/time';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
@@ -50,7 +49,7 @@ export default {
       },
     },
   },
-  mixins: [timeMixin, messageFormatterMixin, clickaway],
+  mixins: [timeMixin, messageFormatterMixin],
   props: {
     isOnExpandedLayout: {
       type: Boolean,
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
index c455bebbe..b7370939f 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
@@ -34,7 +34,6 @@
 
 <script>
 import { debounce } from '@chatwoot/utils';
-import { mixin as clickaway } from 'vue-clickaway';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 
 import SearchHeader from './Header.vue';
@@ -52,7 +51,7 @@ export default {
     SearchResults,
     ArticleView,
   },
-  mixins: [clickaway, portalMixin, alertMixin, keyboardEventListenerMixins],
+  mixins: [portalMixin, alertMixin, keyboardEventListenerMixins],
   props: {
     selectedPortalSlug: {
       type: String,
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
index 4235d9d9f..d946b1b11 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
@@ -138,8 +138,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
-
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
@@ -152,7 +150,6 @@ export default {
     WootDropdownMenu,
     MultiselectDropdownItems,
   },
-  mixins: [clickaway],
   props: {
     headerTitle: {
       type: String,
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
index b22d9b562..67b9ccc61 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
@@ -109,14 +109,13 @@
 
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import { mixin as clickaway } from 'vue-clickaway';
 import wootConstants from 'dashboard/constants/globals';
 import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
 
 const { ARTICLE_STATUS_TYPES } = wootConstants;
 
 export default {
-  mixins: [alertMixin, clickaway],
+  mixins: [alertMixin],
   props: {
     isSidebarOpen: {
       type: Boolean,
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
index 47a1c59b5..3de2a6f52 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
@@ -47,13 +47,11 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import PortalSwitch from './PortalSwitch.vue';
 export default {
   components: {
     PortalSwitch,
   },
-  mixins: [clickaway],
   props: {
     portals: {
       type: Array,
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
index 5d6862758..b888a5440 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
@@ -36,13 +36,10 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
-
 const EmojiInput = () => import('shared/components/emoji/EmojiInput');
 
 export default {
   components: { EmojiInput },
-  mixins: [clickaway],
   props: {
     label: {
       type: String,
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
index 35411f546..556a22de0 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
@@ -57,7 +57,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import InboxOptionMenu from './InboxOptionMenu.vue';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import InboxDisplayMenu from './InboxDisplayMenu.vue';
@@ -68,7 +67,7 @@ export default {
     InboxOptionMenu,
     InboxDisplayMenu,
   },
-  mixins: [clickaway, alertMixin],
+  mixins: [alertMixin],
   props: {
     isContextMenuOpen: {
       type: Boolean,
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
index d18e0ccdc..459f9aaef 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
@@ -115,7 +115,6 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import rtlMixin from 'shared/mixins/rtlMixin';
 import NotificationPanelList from './NotificationPanelList.vue';
 
@@ -125,7 +124,7 @@ export default {
   components: {
     NotificationPanelList,
   },
-  mixins: [clickaway, rtlMixin],
+  mixins: [rtlMixin],
   data() {
     return {
       pageSize: 15,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
index cf900d1a8..3c73cbf77 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
@@ -21,7 +21,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import campaignMixin from 'shared/mixins/campaignMixin';
@@ -34,7 +33,7 @@ export default {
     CampaignCard,
   },
 
-  mixins: [clickaway, campaignMixin],
+  mixins: [campaignMixin],
 
   props: {
     campaigns: {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
index cdeda0af2..be40349fe 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
@@ -22,14 +22,11 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import SLAPopoverCard from 'dashboard/components/widgets/conversation/components/SLAPopoverCard.vue';
 export default {
   components: {
     SLAPopoverCard,
   },
-  mixins: [clickaway],
-
   props: {
     slaEvents: {
       type: Array,
diff --git a/app/javascript/portal/components/PublicArticleSearch.vue b/app/javascript/portal/components/PublicArticleSearch.vue
index f75c9e644..1174c636c 100644
--- a/app/javascript/portal/components/PublicArticleSearch.vue
+++ b/app/javascript/portal/components/PublicArticleSearch.vue
@@ -23,8 +23,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
-
 import SearchSuggestions from './SearchSuggestions.vue';
 import PublicSearchInput from './PublicSearchInput.vue';
 
@@ -35,7 +33,6 @@ export default {
     PublicSearchInput,
     SearchSuggestions,
   },
-  mixins: [clickaway],
   props: {
     value: {
       type: [String, Number],
diff --git a/app/javascript/shared/components/ui/MultiselectDropdown.vue b/app/javascript/shared/components/ui/MultiselectDropdown.vue
index 78b817ce0..fe6a4f2f8 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdown.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdown.vue
@@ -74,13 +74,11 @@
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
-import { mixin as clickaway } from 'vue-clickaway';
 export default {
   components: {
     Thumbnail,
     MultiselectDropdownItems,
   },
-  mixins: [clickaway],
   props: {
     options: {
       type: Array,
diff --git a/app/javascript/widget/components/ChatInputWrap.vue b/app/javascript/widget/components/ChatInputWrap.vue
index 1d68a9263..7fed572e7 100755
--- a/app/javascript/widget/components/ChatInputWrap.vue
+++ b/app/javascript/widget/components/ChatInputWrap.vue
@@ -49,7 +49,6 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 
 import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
 import ChatSendButton from 'widget/components/ChatSendButton.vue';
@@ -69,7 +68,7 @@ export default {
     FluentIcon,
     ResizableTextArea,
   },
-  mixins: [clickaway, configMixin, darkModeMixin],
+  mixins: [configMixin, darkModeMixin],
   props: {
     onSendMessage: {
       type: Function,
diff --git a/app/javascript/widget/components/Form/PhoneInput.vue b/app/javascript/widget/components/Form/PhoneInput.vue
index 258880d28..8a37d02c9 100644
--- a/app/javascript/widget/components/Form/PhoneInput.vue
+++ b/app/javascript/widget/components/Form/PhoneInput.vue
@@ -83,7 +83,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import countries from 'shared/constants/countries.js';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import mentionSelectionKeyboardMixin from 'dashboard/components/widgets/mentions/mentionSelectionKeyboardMixin.js';
@@ -94,12 +93,7 @@ export default {
   components: {
     FluentIcon,
   },
-  mixins: [
-    mentionSelectionKeyboardMixin,
-    FormulateInputMixin,
-    darkModeMixin,
-    clickaway,
-  ],
+  mixins: [mentionSelectionKeyboardMixin, FormulateInputMixin, darkModeMixin],
   props: {
     placeholder: {
       type: String,