refactor: move methods out to mixin

2023-10-04 19:26:18 +05:30
parent 63a071f0d3
commit 58ce9bfc19
4 changed files with 155 additions and 131 deletions
@@ -152,11 +152,13 @@ import inboxMixin from 'shared/mixins/inboxMixin';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import rtlMixin from 'shared/mixins/rtlMixin';
 import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
+import replyDraftMixin from 'dashboard/mixins/replyDraftMixin';
+import audioRecordingMixin from 'dashboard/mixins/audioRecordingMixin';
+import emailEditorMixin from 'dashboard/mixins/emailEditorMixin';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';

 // constants
 import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
-import { AUDIO_FORMATS } from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { MESSAGE_MAX_LENGTH } from 'shared/helpers/MessageTypeHelper';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
@@ -189,7 +191,6 @@ import {
  getMessageVariables,
  getUndefinedVariablesInMessage,
  replaceVariablesInMessage,
-  trimContent,
  debounce,
 } from '@chatwoot/utils';

@@ -216,6 +217,9 @@ export default {
    messageFormatterMixin,
    rtlMixin,
    fileUploadMixin,
+    replyDraftMixin,
+    audioRecordingMixin,
+    emailEditorMixin,
  ],
  props: {
    selectedTweet: {
@@ -237,16 +241,10 @@ export default {
      isFocused: false,
      showEmojiPicker: false,
      attachedFiles: [],
-      isRecordingAudio: false,
-      recordingAudioState: '',
-      recordingAudioDurationText: '',
      isUploading: false,
      replyType: REPLY_EDITOR_MODES.REPLY,
      mentionSearchKey: '',
      hasSlashCommand: false,
-      bccEmails: '',
-      ccEmails: '',
-      toEmails: '',
      doAutoSaveDraft: () => {},
      showWhatsAppTemplatesModal: false,
      updateEditorSelectionWith: '',
@@ -415,12 +413,6 @@ export default {
    isRichEditorEnabled() {
      return this.isAWebWidgetInbox || this.isAnEmailChannel;
    },
-    showAudioRecorder() {
-      return !this.isOnPrivateNote && this.showFileUpload;
-    },
-    showAudioRecorderEditor() {
-      return this.showAudioRecorder && this.isRecordingAudio;
-    },
    isOnPrivateNote() {
      return this.replyType === REPLY_EDITOR_MODES.NOTE;
    },
@@ -500,12 +492,6 @@ export default {
    editorStateId() {
      return `draft-${this.conversationIdByRoute}-${this.replyType}`;
    },
-    audioRecordFormat() {
-      if (this.isAWhatsAppChannel || this.isAPIInbox) {
-        return AUDIO_FORMATS.OGG;
-      }
-      return AUDIO_FORMATS.WAV;
-    },
    messageVariables() {
      const variables = getMessageVariables({
        conversation: this.currentChat,
@@ -603,31 +589,6 @@ export default {
        );
      }
    },
-    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 = '';
-    },
-    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);
-      }
-    },
    toggleSignatureForDraft(message) {
      if (this.isPrivate) {
        return message;
@@ -637,12 +598,6 @@ export default {
        ? appendSignature(message, this.signatureToApply)
        : removeSignature(message, this.signatureToApply);
    },
-    removeFromDraft() {
-      if (this.conversationIdByRoute) {
-        const key = `draft-${this.conversationIdByRoute}-${this.replyType}`;
-        this.$store.dispatch('draftMessages/delete', { key });
-      }
-    },
    handleKeyEvents(e) {
      const keyCode = buildHotKeys(e);
      if (keyCode === 'escape') {
@@ -864,32 +819,9 @@ export default {
      this.attachedFiles = [];
      this.isRecordingAudio = false;
    },
-    clearEmailField() {
-      this.ccEmails = '';
-      this.bccEmails = '';
-      this.toEmails = '';
-    },
    toggleEmojiPicker() {
      this.showEmojiPicker = !this.showEmojiPicker;
    },
-    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();
-        }
-      }
-    },
    hideEmojiPicker() {
      if (this.showEmojiPicker) {
        this.toggleEmojiPicker();
@@ -911,18 +843,6 @@ export default {
    onFocus() {
      this.isFocused = true;
    },
-    onStateProgressRecorderChanged(duration) {
-      this.recordingAudioDurationText = duration;
-    },
-    onStateRecorderChanged(state) {
-      this.recordingAudioState = state;
-      if (state && 'notallowederror'.includes(state)) {
-        this.toggleAudioRecorder();
-      }
-    },
-    onFinishRecorder(file) {
-      return file && this.onFileUpload(file);
-    },
    toggleTyping(status) {
      const conversationId = this.currentChat.id;
      const isPrivate = this.isPrivate;
@@ -1023,51 +943,6 @@ export default {

      return messagePayload;
    },
-    setCcEmails(value) {
-      this.bccEmails = value.bccEmails;
-      this.ccEmails = value.ccEmails;
-    },
-    setCCAndToEmailsFromLastChat() {
-      if (!this.lastEmail) return;
-
-      const {
-        content_attributes: { email: emailAttributes = {} },
-      } = this.lastEmail;
-
-      // Retrieve the email of the current conversation's sender
-      const conversationContact = this.currentChat?.meta?.sender?.email || '';
-      let cc = emailAttributes.cc ? [...emailAttributes.cc] : [];
-      let to = [];
-
-      // there might be a situation where the current conversation will include a message from a third person,
-      // and the current conversation contact is in CC.
-      // This is an edge-case, reported here: CW-1511 [ONLY FOR INTERNAL REFERENCE]
-      // So we remove the current conversation contact's email from the CC list if present
-      if (cc.includes(conversationContact)) {
-        cc = cc.filter(email => email !== conversationContact);
-      }
-
-      // If the last incoming message sender is different from the conversation contact, add them to the "to"
-      // and add the conversation contact to the CC
-      if (!emailAttributes.from.includes(conversationContact)) {
-        to.push(...emailAttributes.from);
-        cc.push(conversationContact);
-      }
-
-      // Remove the conversation contact's email from the BCC list if present
-      let bcc = (emailAttributes.bcc || []).filter(
-        email => email !== conversationContact
-      );
-
-      // Ensure only unique email addresses are in the CC list
-      bcc = [...new Set(bcc)];
-      cc = [...new Set(cc)];
-      to = [...new Set(to)];
-
-      this.ccEmails = cc.join(', ');
-      this.bccEmails = bcc.join(', ');
-      this.toEmails = to.join(', ');
-    },
  },
 };
 </script>
@@ -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);
+    },
+  },
+};
@@ -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 = '';
+    },
+  },
+};
@@ -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 = '';
+    },
+  },
+};