Merge branch 'develop' of github.com:chatwoot/chatwoot into chore/vuelidate-v2-migration

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="app-wrapper h-full flex-grow-0 min-h-0 w-full max-w-full ml-auto mr-auto flex flex-wrap dark:text-slate-300"
+    class="flex flex-wrap flex-grow-0 w-full h-full max-w-full min-h-0 ml-auto mr-auto app-wrapper dark:text-slate-300"
   >
     <sidebar
       :route="currentRoute"
@@ -11,7 +11,7 @@
       @close-key-shortcut-modal="closeKeyShortcutModal"
       @show-add-label-popup="showAddLabelPopup"
     />
-    <section class="flex h-full min-h-0 overflow-hidden flex-1 px-0">
+    <section class="flex flex-1 h-full min-h-0 px-0 overflow-hidden">
       <router-view />
       <command-bar />
       <account-selector
@@ -47,7 +47,7 @@ import AddAccountModal from 'dashboard/components/layout/sidebarComponents/AddAc
 import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector.vue';
 import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel.vue';
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import wootConstants from 'dashboard/constants/globals';
 const CommandBar = () => import('./commands/commandbar.vue');
 
@@ -61,7 +61,14 @@ export default {
     AddLabelModal,
     NotificationPanel,
   },
-  mixins: [uiSettingsMixin],
+  setup() {
+    const { uiSettings, updateUISettings } = useUISettings();
+
+    return {
+      uiSettings,
+      updateUISettings,
+    };
+  },
   data() {
     return {
       showAccountModal: false,

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

@@ -86,7 +86,7 @@ import ContactInfo from 'dashboard/routes/dashboard/conversation/contact/Contact
 import ContactLabel from 'dashboard/routes/dashboard/contacts/components/ContactLabels.vue';
 import CustomAttributes from 'dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue';
 import draggable from 'vuedraggable';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 
 export default {
   components: {
@@ -97,7 +97,6 @@ export default {
     CustomAttributes,
     draggable,
   },
-  mixins: [uiSettingsMixin],
   props: {
     contact: {
       type: Object,
@@ -116,6 +115,21 @@ export default {
       default: true,
     },
   },
+  setup() {
+    const {
+      updateUISettings,
+      isContactSidebarItemOpen,
+      contactSidebarItemsOrder,
+      toggleSidebarUIState,
+    } = useUISettings();
+
+    return {
+      updateUISettings,
+      isContactSidebarItemOpen,
+      contactSidebarItemsOrder,
+      toggleSidebarUIState,
+    };
+  },
   data() {
     return {
       dragEnabled: true,

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

@@ -133,6 +133,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import AccordionItem from 'dashboard/components/Accordion/AccordionItem.vue';
 import ContactConversations from './ContactConversations.vue';
 import ConversationAction from './ConversationAction.vue';
@@ -142,7 +143,6 @@ import ContactInfo from './contact/ContactInfo.vue';
 import ConversationInfo from './ConversationInfo.vue';
 import CustomAttributes from './customAttributes/CustomAttributes.vue';
 import draggable from 'vuedraggable';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import MacrosList from './Macros/List.vue';
 export default {
   components: {
@@ -156,7 +156,6 @@ export default {
     draggable,
     MacrosList,
   },
-  mixins: [uiSettingsMixin],
   props: {
     conversationId: {
       type: [Number, String],
@@ -171,6 +170,21 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    const {
+      updateUISettings,
+      isContactSidebarItemOpen,
+      conversationSidebarItemsOrder,
+      toggleSidebarUIState,
+    } = useUISettings();
+
+    return {
+      updateUISettings,
+      isContactSidebarItemOpen,
+      conversationSidebarItemsOrder,
+      toggleSidebarUIState,
+    };
+  },
   data() {
     return {
       dragEnabled: true,

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

@@ -37,12 +37,12 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import { getUnixTime } from 'date-fns';
 import ChatList from '../../../components/ChatList.vue';
 import ConversationBox from '../../../components/widgets/conversation/ConversationBox.vue';
 import PopOverSearch from './search/PopOverSearch.vue';
 import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import wootConstants from 'dashboard/constants/globals';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { CMD_SNOOZE_CONVERSATION } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
@@ -55,7 +55,6 @@ export default {
     PopOverSearch,
     CustomSnoozeModal,
   },
-  mixins: [uiSettingsMixin],
   props: {
     inboxId: {
       type: [String, Number],
@@ -82,6 +81,14 @@ export default {
       default: 0,
     },
   },
+  setup() {
+    const { uiSettings, updateUISettings } = useUISettings();
+
+    return {
+      uiSettings,
+      updateUISettings,
+    };
+  },
   data() {
     return {
       showSearchModal: false,

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

@@ -240,6 +240,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import ReplyEmailHead from 'dashboard/components/widgets/conversation/ReplyEmailHead.vue';
@@ -261,7 +262,6 @@ import {
   appendSignature,
   removeSignature,
 } from 'dashboard/helper/editorHelper';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 
 export default {
   components: {
@@ -275,7 +275,7 @@ export default {
     AttachmentPreview,
     MessageSignatureMissingAlert,
   },
-  mixins: [uiSettingsMixin, inboxMixin, fileUploadMixin],
+  mixins: [inboxMixin, fileUploadMixin],
   props: {
     contact: {
       type: Object,
@@ -291,7 +291,11 @@ export default {
     },
   },
   setup() {
-    return { v$: useVuelidate() };
+    const { fetchSignatureFlagFromUISettings, setSignatureFlagForInbox } =
+      useUISettings();
+    const v$ = useVuelidate();
+
+    return { fetchSignatureFlagFromUISettings, setSignatureFlagForInbox, v$ };
   },
   data() {
     return {
@@ -327,7 +331,7 @@ export default {
       messageSignature: 'getMessageSignature',
     }),
     sendWithSignature() {
-      return this.fetchSignatureFlagFromUiSettings(this.channelType);
+      return this.fetchSignatureFlagFromUISettings(this.channelType);
     },
     signatureToApply() {
       return this.messageSignature;

app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue

@@ -41,17 +41,17 @@
 </template>
 
 <script>
-import CustomAttribute from 'dashboard/components/CustomAttribute.vue';
 import { useAlert } from 'dashboard/composables';
-import attributeMixin from 'dashboard/mixins/attributeMixin';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import CustomAttribute from 'dashboard/components/CustomAttribute.vue';
+import attributeMixin from 'dashboard/mixins/attributeMixin';
 
 export default {
   components: {
     CustomAttribute,
   },
-  mixins: [attributeMixin, uiSettingsMixin],
+  mixins: [attributeMixin],
   props: {
     attributeType: {
       type: String,
@@ -71,6 +71,14 @@ export default {
       default: '',
     },
   },
+  setup() {
+    const { uiSettings, updateUISettings } = useUISettings();
+
+    return {
+      uiSettings,
+      updateUISettings,
+    };
+  },
   data() {
     return {
       showAllAttributes: false,

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-wrapper flex h-full flex-grow-0 min-h-0 w-full">
+  <div class="flex flex-grow-0 w-full h-full min-h-0 app-wrapper">
     <sidebar
       :route="currentRoute"
       @toggle-account-modal="toggleAccountModal"
@@ -20,7 +20,7 @@
     />
     <section
       v-if="isHelpCenterEnabled"
-      class="flex h-full min-h-0 overflow-hidden flex-1 px-0 bg-white dark:bg-slate-900"
+      class="flex flex-1 h-full min-h-0 px-0 overflow-hidden bg-white dark:bg-slate-900"
     >
       <router-view @reload-locale="fetchPortalAndItsCategories" />
       <command-bar />
@@ -68,7 +68,7 @@ import HelpCenterSidebar from '../components/Sidebar/Sidebar.vue';
 import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal.vue';
 import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector.vue';
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import portalMixin from '../mixins/portalMixin';
 import AddCategory from '../pages/categories/AddCategory.vue';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
@@ -87,7 +87,15 @@ export default {
     UpgradePage,
     WootKeyShortcutModal,
   },
-  mixins: [portalMixin, uiSettingsMixin],
+  mixins: [portalMixin],
+  setup() {
+    const { uiSettings, updateUISettings } = useUISettings();
+
+    return {
+      uiSettings,
+      updateUISettings,
+    };
+  },
   data() {
     return {
       isOnDesktop: true,

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

@@ -191,9 +191,9 @@
 
 <script>
 import { useAlert } from 'dashboard/composables';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import LocaleItemTable from './PortalListItemTable.vue';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { PORTALS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 
 export default {
@@ -201,7 +201,6 @@ export default {
     thumbnail,
     LocaleItemTable,
   },
-  mixins: [uiSettingsMixin],
   props: {
     portal: {
       type: Object,
@@ -213,6 +212,13 @@ export default {
       values: ['archived', 'draft', 'published'],
     },
   },
+  setup() {
+    const { updateUISettings } = useUISettings();
+
+    return {
+      updateUISettings,
+    };
+  },
   data() {
     return {
       showDeleteConfirmationPopup: false,

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue

@@ -1,17 +1,23 @@
 <template>
   <div
-    class="text-slate-600 dark:text-slate-200 flex items-center justify-center w-full"
+    class="flex items-center justify-center w-full text-slate-600 dark:text-slate-200"
   >
     Loading...
   </div>
 </template>
 
 <script>
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { mapGetters } from 'vuex';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 
 export default {
-  mixins: [uiSettingsMixin],
+  setup() {
+    const { uiSettings } = useUISettings();
+
+    return {
+      uiSettings,
+    };
+  },
   computed: {
     ...mapGetters({ portals: 'portals/allPortals' }),
   },

app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue

@@ -47,13 +47,13 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import wootConstants from 'dashboard/constants/globals';
 
 import InboxCard from './components/InboxCard.vue';
 import InboxListHeader from './components/InboxListHeader.vue';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import IntersectionObserver from 'dashboard/components/IntersectionObserver.vue';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 
 export default {
   components: {
@@ -61,7 +61,13 @@ export default {
     InboxListHeader,
     IntersectionObserver,
   },
-  mixins: [uiSettingsMixin],
+  setup() {
+    const { uiSettings } = useUISettings();
+
+    return {
+      uiSettings,
+    };
+  },
   data() {
     return {
       infiniteLoaderOptions: {

app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue

@@ -5,7 +5,7 @@
         :empty-state-message="$t('INBOX.LIST.NO_MESSAGES_AVAILABLE')"
       />
     </div>
-    <div v-else class="flex flex-col h-full w-full">
+    <div v-else class="flex flex-col w-full h-full">
       <inbox-item-header
         class="flex-1"
         :total-length="totalNotificationCount"
@@ -18,7 +18,7 @@
         v-if="isConversationLoading"
         class="flex items-center h-[calc(100%-56px)] justify-center bg-slate-25 dark:bg-slate-800"
       >
-        <span class="spinner my-4" />
+        <span class="my-4 spinner" />
       </div>
       <conversation-box
         v-else
@@ -38,7 +38,7 @@ import { mapGetters } from 'vuex';
 import InboxItemHeader from './components/InboxItemHeader.vue';
 import ConversationBox from 'dashboard/components/widgets/conversation/ConversationBox.vue';
 import InboxEmptyState from './InboxEmptyState.vue';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 
@@ -48,7 +48,14 @@ export default {
     InboxEmptyState,
     ConversationBox,
   },
-  mixins: [uiSettingsMixin],
+  setup() {
+    const { uiSettings, updateUISettings } = useUISettings();
+
+    return {
+      uiSettings,
+      updateUISettings,
+    };
+  },
   data() {
     return {
       isConversationLoading: false,

app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue

@@ -2,7 +2,7 @@
   <div
     class="flex flex-col bg-white z-50 dark:bg-slate-900 w-[170px] border shadow-md border-slate-100 dark:border-slate-700/50 rounded-xl divide-y divide-slate-100 dark:divide-slate-700/50"
   >
-    <div class="flex items-center justify-between h-11 p-3 rounded-t-lg">
+    <div class="flex items-center justify-between p-3 rounded-t-lg h-11">
       <div class="flex gap-1.5">
         <fluent-icon
           icon="arrow-sort"
@@ -10,7 +10,7 @@
           size="16"
           class="text-slate-700 dark:text-slate-100"
         />
-        <span class="font-medium text-xs text-slate-800 dark:text-slate-100">
+        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">
           {{ $t('INBOX.DISPLAY_MENU.SORT') }}
         </span>
       </div>
@@ -64,7 +64,7 @@
     </div>
     <div>
       <span
-        class="font-medium text-xs py-4 px-3 text-slate-400 dark:text-slate-400"
+        class="px-3 py-4 text-xs font-medium text-slate-400 dark:text-slate-400"
       >
         {{ $t('INBOX.DISPLAY_MENU.DISPLAY') }}
       </span>
@@ -98,10 +98,17 @@
 
 <script>
 import wootConstants from 'dashboard/constants/globals';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 
 export default {
-  mixins: [uiSettingsMixin],
+  setup() {
+    const { uiSettings, updateUISettings } = useUISettings();
+
+    return {
+      uiSettings,
+      updateUISettings,
+    };
+  },
   data() {
     return {
       showSortMenu: false,

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

@@ -133,17 +133,20 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, minValue, maxValue } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import configMixin from 'shared/mixins/configMixin';
 import accountMixin from '../../../../mixins/account';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
 import semver from 'semver';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { getLanguageDirection } from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 
 export default {
-  mixins: [accountMixin, configMixin, uiSettingsMixin],
+  mixins: [accountMixin, configMixin],
   setup() {
-    return { v$: useVuelidate() };
+    const { updateUISettings } = useUISettings();
+    const v$ = useVuelidate();
+
+    return { updateUISettings, v$ };
   },
   data() {
     return {

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue

@@ -2,7 +2,10 @@
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <div v-if="!hasLoginStarted" class="pt-[30%] h-full">
+    <div
+      v-if="!hasLoginStarted"
+      class="flex flex-col items-center justify-center h-full text-center"
+    >
       <a href="#" @click="startLogin()">
         <img
           class="w-auto h-10"

app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationItem.vue

@@ -2,7 +2,7 @@
   <div class="flex">
     <div class="flex h-[6.25rem] w-[6.25rem]">
       <img
-        :src="'/dashboard/images/integrations/' + integrationLogo"
+        :src="`/dashboard/images/integrations/${integrationId}.png`"
         class="max-w-full p-6"
       />
     </div>

app/javascript/dashboard/routes/dashboard/settings/integrationapps/SingleIntegrationHooks.vue

@@ -7,7 +7,7 @@
         <div class="flex">
           <div class="flex h-[6.25rem] w-[6.25rem]">
             <img
-              :src="'/dashboard/images/integrations/' + integration.logo"
+              :src="`/dashboard/images/integrations/${integration.id}.png`"
               class="max-w-full p-6"
             />
           </div>

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

@@ -21,8 +21,7 @@
             class="bg-white dark:bg-slate-800 border border-solid border-slate-75 dark:border-slate-700/50 rounded-sm mb-4 p-4"
           >
             <integration
-              integration-id="dashboard-apps"
-              integration-logo="dashboard-apps.svg"
+              integration-id="dashboard_apps"
               :integration-name="
                 $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.TITLE')
               "

app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue

@@ -4,7 +4,7 @@
   >
     <div class="flex items-center justify-start m-0 mx-4 flex-1">
       <img
-        :src="'/dashboard/images/integrations/' + integrationLogo"
+        :src="`/dashboard/images/integrations/${integrationId}.png`"
         class="p-2 h-16 w-16 mr-4"
       />
       <div>

app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js

@@ -43,7 +43,7 @@ export default {
           },
         },
         {
-          path: 'dashboard-apps',
+          path: 'dashboard_apps',
           component: DashboardApps,
           name: 'settings_integrations_dashboard_apps',
           meta: {

app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue

@@ -32,7 +32,7 @@
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import configMixin from 'shared/mixins/configMixin';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import AudioAlertTone from './AudioAlertTone.vue';
 import AudioAlertEvent from './AudioAlertEvent.vue';
 import AudioAlertCondition from './AudioAlertCondition.vue';
@@ -43,7 +43,15 @@ export default {
     AudioAlertTone,
     AudioAlertCondition,
   },
-  mixins: [configMixin, uiSettingsMixin],
+  mixins: [configMixin],
+  setup() {
+    const { uiSettings, updateUISettings } = useUISettings();
+
+    return {
+      uiSettings,
+      updateUISettings,
+    };
+  },
   data() {
     return {
       audioAlert: '',
@@ -56,7 +64,6 @@ export default {
   computed: {
     ...mapGetters({
       accountId: 'getCurrentAccountId',
-      uiSettings: 'getUISettings',
     }),
   },
   watch: {

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

@@ -47,7 +47,7 @@
             :description="hotKey.description"
             :light-image="hotKey.lightImage"
             :dark-image="hotKey.darkImage"
-            :active="isEditorHotKeyEnabled(uiSettings, hotKey.key)"
+            :active="isEditorHotKeyEnabled(hotKey.key)"
             @click="toggleHotKey(hotKey.key)"
           />
         </button>
@@ -81,15 +81,12 @@
   </div>
 </template>
 <script>
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import uiSettingsMixin, {
-  isEditorHotKeyEnabled,
-} from 'dashboard/mixins/uiSettings';
-import { useAlert } from 'dashboard/composables';
 import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import { clearCookiesOnLogout } from 'dashboard/store/utils/api.js';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
-
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import UserProfilePicture from './UserProfilePicture.vue';
 import UserBasicDetails from './UserBasicDetails.vue';
 import MessageSignature from './MessageSignature.vue';
@@ -112,7 +109,17 @@ export default {
     AudioNotifications,
     AccessToken,
   },
-  mixins: [globalConfigMixin, uiSettingsMixin],
+  mixins: [globalConfigMixin],
+  setup() {
+    const { uiSettings, updateUISettings, isEditorHotKeyEnabled } =
+      useUISettings();
+
+    return {
+      uiSettings,
+      updateUISettings,
+      isEditorHotKeyEnabled,
+    };
+  },
   data() {
     return {
       avatarFile: '',
@@ -168,7 +175,6 @@ export default {
       this.displayName = this.currentUser.display_name;
       this.messageSignature = this.currentUser.message_signature;
     },
-    isEditorHotKeyEnabled,
     async dispatchUpdate(payload, successMessage, errorMessage) {
       let alertMessage = '';
       try {

app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue

@@ -134,7 +134,6 @@
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import configMixin from 'shared/mixins/configMixin';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import TableHeaderCell from 'dashboard/components/widgets/TableHeaderCell.vue';
 import CheckBox from 'v3/components/Form/CheckBox.vue';
 import {
@@ -152,7 +151,7 @@ export default {
     FormSwitch,
     CheckBox,
   },
-  mixins: [configMixin, uiSettingsMixin],
+  mixins: [configMixin],
   data() {
     return {
       selectedEmailFlags: [],
@@ -167,7 +166,6 @@ export default {
       accountId: 'getCurrentAccountId',
       emailFlags: 'userNotificationSettings/getSelectedEmailFlags',
       pushFlags: 'userNotificationSettings/getSelectedPushFlags',
-      uiSettings: 'getUISettings',
       isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
     hasPushAPISupport() {
@@ -242,31 +240,6 @@ export default {
         useAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_ERROR'));
       }
     },
-
-    handleAudioInput(e) {
-      this.enableAudioAlerts = e.target.value;
-      this.updateUISettings({
-        enable_audio_alerts: this.enableAudioAlerts,
-      });
-      useAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
-    },
-    handleAudioAlertConditions(e) {
-      let condition = e.target.value;
-      if (condition === 'tab_is_inactive') {
-        this.updateUISettings({
-          always_play_audio_alert: !e.target.checked,
-        });
-      } else if (condition === 'conversations_are_read') {
-        this.updateUISettings({
-          alert_if_unread_assigned_conversation_exist: e.target.checked,
-        });
-      }
-      useAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
-    },
-    handleAudioToneChange(value) {
-      this.updateUISettings({ notification_tone: value });
-      useAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
-    },
     handleInput(type, id) {
       if (type === 'email') {
         this.handleEmailInput(id);