fix: Use canned response menu from the editor in contact messages (#6109)

This commit is contained in:
Sivin Varghese 2022-12-21 16:01:50 +05:30 committed by GitHub
parent 2c2c47d7fd
commit 3c6bd2c8fd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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>