feat: Rewrite uiSettings mixin to a composable (#9819)

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

@@ -80,8 +80,7 @@ import {
   hasPressedCommandAndEnter,
 } from 'shared/helpers/KeyboardHelpers';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
-import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import {
   replaceVariablesInMessage,
   createTypingIndicator,
@@ -119,7 +118,7 @@ const createState = (
 export default {
   name: 'WootMessageEditor',
   components: { TagAgents, CannedResponse, VariableList },
-  mixins: [keyboardEventListenerMixins, uiSettingsMixin],
+  mixins: [keyboardEventListenerMixins],
   props: {
     value: { type: String, default: '' },
     editorId: { type: String, default: '' },
@@ -139,6 +138,19 @@ export default {
     channelType: { type: String, default: '' },
     showImageResizeToolbar: { type: Boolean, default: false }, // A kill switch to show or hide the image toolbar
   },
+  setup() {
+    const {
+      uiSettings,
+      isEditorHotKeyEnabled,
+      fetchSignatureFlagFromUISettings,
+    } = useUISettings();
+
+    return {
+      uiSettings,
+      isEditorHotKeyEnabled,
+      fetchSignatureFlagFromUISettings,
+    };
+  },
   data() {
     return {
       typingIndicator: createTypingIndicator(
@@ -278,7 +290,7 @@ export default {
       // this is considered the source of truth, we watch this property
       // on change, we toggle the signature in the editor
       if (this.allowSignature && !this.isPrivate && this.channelType) {
-        return this.fetchSignatureFlagFromUiSettings(this.channelType);
+        return this.fetchSignatureFlagFromUISettings(this.channelType);
       }
 
       return false;
@@ -521,10 +533,10 @@ export default {
       }
     },
     isEnterToSendEnabled() {
-      return isEditorHotKeyEnabled(this.uiSettings, 'enter');
+      return this.isEditorHotKeyEnabled('enter');
     },
     isCmdPlusEnterToSendEnabled() {
-      return isEditorHotKeyEnabled(this.uiSettings, 'cmd_enter');
+      return this.isEditorHotKeyEnabled('cmd_enter');
     },
     getKeyboardEvents() {
       return {

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

@@ -25,8 +25,8 @@ import {
 } from '@chatwoot/prosemirror-schema';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { useAlert } from 'dashboard/composables';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 
 const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
 const createState = (
@@ -51,13 +51,21 @@ const createState = (
 };
 
 export default {
-  mixins: [keyboardEventListenerMixins, uiSettingsMixin],
+  mixins: [keyboardEventListenerMixins],
   props: {
     value: { type: String, default: '' },
     editorId: { type: String, default: '' },
     placeholder: { type: String, default: '' },
     enabledMenuOptions: { type: Array, default: () => [] },
   },
+  setup() {
+    const { uiSettings, updateUISettings } = useUISettings();
+
+    return {
+      uiSettings,
+      updateUISettings,
+    };
+  },
   data() {
     return {
       editorView: null,

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

@@ -134,10 +134,10 @@
 </template>
 
 <script>
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import FileUpload from 'vue-upload-component';
 import * as ActiveStorage from 'activestorage';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import {
@@ -153,7 +153,7 @@ import { mapGetters } from 'vuex';
 export default {
   name: 'ReplyBottomPanel',
   components: { FileUpload, VideoCallButton, AIAssistanceButton },
-  mixins: [keyboardEventListenerMixins, uiSettingsMixin, inboxMixin],
+  mixins: [keyboardEventListenerMixins, inboxMixin],
   props: {
     mode: {
       type: String,
@@ -248,6 +248,15 @@ export default {
       required: true,
     },
   },
+  setup() {
+    const { setSignatureFlagForInbox, fetchSignatureFlagFromUISettings } =
+      useUISettings();
+
+    return {
+      setSignatureFlagForInbox,
+      fetchSignatureFlagFromUISettings,
+    };
+  },
   computed: {
     ...mapGetters({
       accountId: 'getCurrentAccountId',
@@ -320,7 +329,7 @@ export default {
     },
     sendWithSignature() {
       // channelType is sourced from inboxMixin
-      return this.fetchSignatureFlagFromUiSettings(this.channelType);
+      return this.fetchSignatureFlagFromUISettings(this.channelType);
     },
     signatureToggleTooltip() {
       return this.sendWithSignature