From 3c6bd2c8fd0fc18cfaba527b744de561d9805efc Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 21 Dec 2022 16:01:50 +0530
Subject: [PATCH] fix: Use canned response menu from the editor in contact
 messages (#6109)

---
 .../conversation/contact/ConversationForm.vue | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
index b56bc3490..ff20d7c23 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
@@ -66,7 +66,7 @@
               @click="replaceTextWithCannedResponse"
             />
           </div>
-          <div v-if="isAnEmailInbox || isAnWebWidgetInbox">
+          <div v-if="isEmailOrWebWidgetInbox">
             <label>
               {{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
               <reply-email-head
@@ -80,6 +80,7 @@
                   class="message-editor"
                   :class="{ editor_warning: $v.message.$error }"
                   :placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
+                  @toggle-canned-menu="toggleCannedMenu"
                   @blur="$v.message.$touch"
                 />
                 <span v-if="$v.message.$error" class="editor-warning__message">
@@ -229,13 +230,16 @@ export default {
         this.selectedInbox.inbox.channel_type === INBOX_TYPES.WEB
       );
     },
+    isEmailOrWebWidgetInbox() {
+      return this.isAnEmailInbox || this.isAnWebWidgetInbox;
+    },
     hasWhatsappTemplates() {
       return !!this.selectedInbox.inbox?.message_templates;
     },
   },
   watch: {
     message(value) {
-      this.hasSlashCommand = value[0] === '/';
+      this.hasSlashCommand = value[0] === '/' && !this.isEmailOrWebWidgetInbox;
       const hasNextWord = value.includes(' ');
       const isShortCodeActive = this.hasSlashCommand && !hasNextWord;
       if (isShortCodeActive) {
@@ -259,6 +263,9 @@ export default {
         this.message = message;
       }, 50);
     },
+    toggleCannedMenu(value) {
+      this.showCannedMenu = value;
+    },
     prepareWhatsAppMessagePayload({ message: content, templateParams }) {
       const payload = {
         inboxId: this.targetInbox.inbox.id,
@@ -315,12 +322,10 @@ export default {
 }
 
 .canned-response {
-  position: relative;
-  top: var(--space-medium);
-
   ::v-deep .mention--box {
     border-left: 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 {
   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>