fix: Use canned response menu from the editor in contact messages (#6109)
This commit is contained in:
parent
2c2c47d7fd
commit
3c6bd2c8fd
1 changed files with 20 additions and 5 deletions
|
@ -66,7 +66,7 @@
|
||||||
@click="replaceTextWithCannedResponse"
|
@click="replaceTextWithCannedResponse"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="isAnEmailInbox || isAnWebWidgetInbox">
|
<div v-if="isEmailOrWebWidgetInbox">
|
||||||
<label>
|
<label>
|
||||||
{{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
|
{{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
|
||||||
<reply-email-head
|
<reply-email-head
|
||||||
|
@ -80,6 +80,7 @@
|
||||||
class="message-editor"
|
class="message-editor"
|
||||||
:class="{ editor_warning: $v.message.$error }"
|
:class="{ editor_warning: $v.message.$error }"
|
||||||
:placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
|
:placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
|
||||||
|
@toggle-canned-menu="toggleCannedMenu"
|
||||||
@blur="$v.message.$touch"
|
@blur="$v.message.$touch"
|
||||||
/>
|
/>
|
||||||
<span v-if="$v.message.$error" class="editor-warning__message">
|
<span v-if="$v.message.$error" class="editor-warning__message">
|
||||||
|
@ -229,13 +230,16 @@ export default {
|
||||||
this.selectedInbox.inbox.channel_type === INBOX_TYPES.WEB
|
this.selectedInbox.inbox.channel_type === INBOX_TYPES.WEB
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
isEmailOrWebWidgetInbox() {
|
||||||
|
return this.isAnEmailInbox || this.isAnWebWidgetInbox;
|
||||||
|
},
|
||||||
hasWhatsappTemplates() {
|
hasWhatsappTemplates() {
|
||||||
return !!this.selectedInbox.inbox?.message_templates;
|
return !!this.selectedInbox.inbox?.message_templates;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
message(value) {
|
message(value) {
|
||||||
this.hasSlashCommand = value[0] === '/';
|
this.hasSlashCommand = value[0] === '/' && !this.isEmailOrWebWidgetInbox;
|
||||||
const hasNextWord = value.includes(' ');
|
const hasNextWord = value.includes(' ');
|
||||||
const isShortCodeActive = this.hasSlashCommand && !hasNextWord;
|
const isShortCodeActive = this.hasSlashCommand && !hasNextWord;
|
||||||
if (isShortCodeActive) {
|
if (isShortCodeActive) {
|
||||||
|
@ -259,6 +263,9 @@ export default {
|
||||||
this.message = message;
|
this.message = message;
|
||||||
}, 50);
|
}, 50);
|
||||||
},
|
},
|
||||||
|
toggleCannedMenu(value) {
|
||||||
|
this.showCannedMenu = value;
|
||||||
|
},
|
||||||
prepareWhatsAppMessagePayload({ message: content, templateParams }) {
|
prepareWhatsAppMessagePayload({ message: content, templateParams }) {
|
||||||
const payload = {
|
const payload = {
|
||||||
inboxId: this.targetInbox.inbox.id,
|
inboxId: this.targetInbox.inbox.id,
|
||||||
|
@ -315,12 +322,10 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.canned-response {
|
.canned-response {
|
||||||
position: relative;
|
|
||||||
top: var(--space-medium);
|
|
||||||
|
|
||||||
::v-deep .mention--box {
|
::v-deep .mention--box {
|
||||||
border-left: 1px solid var(--color-border);
|
border-left: 1px solid var(--color-border);
|
||||||
border-right: 1px solid var(--color-border);
|
border-right: 1px solid var(--color-border);
|
||||||
|
top: var(--space-jumbo) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -355,4 +360,14 @@ export default {
|
||||||
.row.gutter-small {
|
.row.gutter-small {
|
||||||
gap: var(--space-small);
|
gap: var(--space-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::v-deep .mention--box {
|
||||||
|
border-left: 1px solid var(--color-border);
|
||||||
|
border-right: 1px solid var(--color-border);
|
||||||
|
left: 0;
|
||||||
|
margin: auto;
|
||||||
|
right: 0;
|
||||||
|
top: 18rem !important;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue