From 58ce9bfc19fb0b73548df34814595764bfb3ebe8 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Wed, 4 Oct 2023 19:25:09 +0530 Subject: [PATCH] refactor: move methods out to mixin --- .../widgets/conversation/ReplyBox.vue | 137 +----------------- .../dashboard/mixins/audioRecordingMixin.js | 58 ++++++++ .../dashboard/mixins/emailEditorMixin.js | 54 +++++++ .../dashboard/mixins/replyDraftMixin.js | 37 +++++ 4 files changed, 155 insertions(+), 131 deletions(-) create mode 100644 app/javascript/dashboard/mixins/audioRecordingMixin.js create mode 100644 app/javascript/dashboard/mixins/emailEditorMixin.js create mode 100644 app/javascript/dashboard/mixins/replyDraftMixin.js diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue index 4b9193c3c..f2f78f093 100644 --- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue +++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue @@ -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(', '); - }, }, }; diff --git a/app/javascript/dashboard/mixins/audioRecordingMixin.js b/app/javascript/dashboard/mixins/audioRecordingMixin.js new file mode 100644 index 000000000..6c8659468 --- /dev/null +++ b/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); + }, + }, +}; diff --git a/app/javascript/dashboard/mixins/emailEditorMixin.js b/app/javascript/dashboard/mixins/emailEditorMixin.js new file mode 100644 index 000000000..dfd47a2f6 --- /dev/null +++ b/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 = ''; + }, + }, +}; diff --git a/app/javascript/dashboard/mixins/replyDraftMixin.js b/app/javascript/dashboard/mixins/replyDraftMixin.js new file mode 100644 index 000000000..fe9f81254 --- /dev/null +++ b/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 = ''; + }, + }, +};