refactor: move methods out to mixin

app/javascript/dashboard/mixins/audioRecordingMixin.js

@@ -0,0 +1,58 @@
+import { AUDIO_FORMATS } from 'shared/constants/messages';
+
+export default {
+  data() {
+    return {
+      isRecordingAudio: false,
+      isRecorderAudioStopped: false,
+      recordingAudioState: '',
+      recordingAudioDurationText: '',
+    };
+  },
+  computed: {
+    audioRecordFormat() {
+      if (this.isAWhatsAppChannel || this.isAPIInbox) {
+        return AUDIO_FORMATS.OGG;
+      }
+      return AUDIO_FORMATS.WAV;
+    },
+    showAudioRecorder() {
+      return !this.isOnPrivateNote && this.showFileUpload;
+    },
+    showAudioRecorderEditor() {
+      return this.showAudioRecorder && this.isRecordingAudio;
+    },
+  },
+  methods: {
+    toggleAudioRecorder() {
+      this.isRecordingAudio = !this.isRecordingAudio;
+      this.isRecorderAudioStopped = !this.isRecordingAudio;
+      if (!this.isRecordingAudio) {
+        this.clearMessage();
+        this.clearEmailField();
+      }
+    },
+    toggleAudioRecorderPlayPause() {
+      if (this.isRecordingAudio) {
+        if (!this.isRecorderAudioStopped) {
+          this.isRecorderAudioStopped = true;
+          this.$refs.audioRecorderInput.stopAudioRecording();
+        } else if (this.isRecorderAudioStopped) {
+          this.$refs.audioRecorderInput.playPause();
+        }
+      }
+    },
+    onStateProgressRecorderChanged(duration) {
+      this.recordingAudioDurationText = duration;
+    },
+    onStateRecorderChanged(state) {
+      this.recordingAudioState = state;
+      if (state && 'notallowederror'.includes(state)) {
+        this.toggleAudioRecorder();
+      }
+    },
+    onFinishRecorder(file) {
+      return file && this.onFileUpload(file);
+    },
+  },
+};

app/javascript/dashboard/mixins/emailEditorMixin.js

@@ -0,0 +1,54 @@
+// emailHandlingMixin.js
+
+export default {
+  data() {
+    return {
+      ccEmails: '',
+      bccEmails: '',
+      toEmails: '',
+    };
+  },
+  methods: {
+    setCcEmails(value) {
+      this.bccEmails = value.bccEmails;
+      this.ccEmails = value.ccEmails;
+    },
+    setCCAndToEmailsFromLastChat() {
+      if (!this.lastEmail) return;
+
+      const {
+        content_attributes: { email: emailAttributes = {} },
+      } = this.lastEmail;
+
+      const conversationContact = this.currentChat?.meta?.sender?.email || '';
+      let cc = emailAttributes.cc ? [...emailAttributes.cc] : [];
+      let to = [];
+
+      if (cc.includes(conversationContact)) {
+        cc = cc.filter(email => email !== conversationContact);
+      }
+
+      if (!emailAttributes.from.includes(conversationContact)) {
+        to.push(...emailAttributes.from);
+        cc.push(conversationContact);
+      }
+
+      let bcc = (emailAttributes.bcc || []).filter(
+        email => email !== conversationContact
+      );
+
+      bcc = [...new Set(bcc)];
+      cc = [...new Set(cc)];
+      to = [...new Set(to)];
+
+      this.ccEmails = cc.join(', ');
+      this.bccEmails = bcc.join(', ');
+      this.toEmails = to.join(', ');
+    },
+    clearEmailField() {
+      this.ccEmails = '';
+      this.bccEmails = '';
+      this.toEmails = '';
+    },
+  },
+};

app/javascript/dashboard/mixins/replyDraftMixin.js

@@ -0,0 +1,37 @@
+import { trimContent } from '@chatwoot/utils';
+
+export default {
+  methods: {
+    getFromDraft() {
+      if (this.conversationIdByRoute) {
+        const key = `draft-${this.conversationIdByRoute}-${this.replyType}`;
+        const messageFromStore =
+          this.$store.getters['draftMessages/get'](key) || '';
+
+        // ensure that the message has signature set based on the ui setting
+        this.message = this.toggleSignatureForDraft(messageFromStore);
+      }
+    },
+    removeFromDraft() {
+      if (this.conversationIdByRoute) {
+        const key = `draft-${this.conversationIdByRoute}-${this.replyType}`;
+        this.$store.dispatch('draftMessages/delete', { key });
+      }
+    },
+    saveDraft(conversationId, replyType) {
+      if (this.message || this.message === '') {
+        const key = `draft-${conversationId}-${replyType}`;
+        const draftToSave = trimContent(this.message || '');
+
+        this.$store.dispatch('draftMessages/set', {
+          key,
+          message: draftToSave,
+        });
+      }
+    },
+    setToDraft(conversationId, replyType) {
+      this.saveDraft(conversationId, replyType);
+      this.message = '';
+    },
+  },
+};