feat: Add support for Whatsapp template messages in the UI (#4711)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -101,7 +101,7 @@
       :toggle-audio-recorder="toggleAudioRecorder"
       :toggle-audio-recorder-play-pause="toggleAudioRecorderPlayPause"
       :show-emoji-picker="showEmojiPicker"
-      :on-send="sendMessage"
+      :on-send="onSendReply"
       :is-send-disabled="isReplyButtonDisabled"
       :recording-audio-duration-text="recordingAudioDurationText"
       :recording-audio-state="recordingAudioState"
@@ -112,7 +112,16 @@
       :enable-rich-editor="isRichEditorEnabled"
       :enter-to-send-enabled="enterToSendEnabled"
       :enable-multiple-file-upload="enableMultipleFileUpload"
+      :has-whatsapp-templates="hasWhatsappTemplates"
       @toggleEnterToSend="toggleEnterToSend"
+      @selectWhatsappTemplate="openWhatsappTemplateModal"
+    />
+    <whatsapp-templates
+      :inbox-id="inbox.id"
+      :show="showWhatsAppTemplatesModal"
+      @close="hideWhatsappTemplatesModal"
+      @on-send="onSendWhatsAppReply"
+      @cancel="hideWhatsappTemplatesModal"
     />
   </div>
 </template>
@@ -137,7 +146,7 @@ import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { MAXIMUM_FILE_UPLOAD_SIZE } from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
-
+import WhatsappTemplates from './WhatsappTemplates/Modal.vue';
 import {
   isEscape,
   isEnter,
@@ -162,6 +171,7 @@ export default {
     WootMessageEditor,
     WootAudioRecorder,
     Banner,
+    WhatsappTemplates,
   },
   mixins: [
     clickaway,
@@ -201,6 +211,7 @@ export default {
       hasSlashCommand: false,
       bccEmails: '',
       ccEmails: '',
+      showWhatsAppTemplatesModal: false,
     };
   },
   computed: {
@@ -212,7 +223,6 @@ export default {
       globalConfig: 'globalConfig/get',
       accountId: 'getCurrentAccountId',
     }),
-
     showRichContentEditor() {
       if (this.isOnPrivateNote) {
         return true;
@@ -256,7 +266,9 @@ export default {
 
       return false;
     },
-
+    hasWhatsappTemplates() {
+      return !!this.inbox.message_templates;
+    },
     enterToSendEnabled() {
       return !!this.uiSettings.enter_to_send_enabled;
     },
@@ -484,7 +496,7 @@ export default {
           hasSendOnEnterEnabled && !hasPressedShift(e) && this.isFocused;
         if (shouldSendMessage) {
           e.preventDefault();
-          this.sendMessage();
+          this.onSendReply();
         }
       } else if (hasPressedCommandPlusKKey(e)) {
         this.openCommandBar();
@@ -497,6 +509,12 @@ export default {
     toggleEnterToSend(enterToSendEnabled) {
       this.updateUISettings({ enter_to_send_enabled: enterToSendEnabled });
     },
+    openWhatsappTemplateModal() {
+      this.showWhatsAppTemplatesModal = true;
+    },
+    hideWhatsappTemplatesModal() {
+      this.showWhatsAppTemplatesModal = false;
+    },
     onClickSelfAssign() {
       const {
         account_id,
@@ -520,7 +538,7 @@ export default {
       };
       this.assignedAgent = selfAssign;
     },
-    async sendMessage() {
+    async onSendReply() {
       if (this.isReplyButtonDisabled) {
         return;
       }
@@ -531,22 +549,31 @@ export default {
         }
         const messagePayload = this.getMessagePayload(newMessage);
         this.clearMessage();
-        try {
-          await this.$store.dispatch(
-            'createPendingMessageAndSend',
-            messagePayload
-          );
-          bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
-        } catch (error) {
-          const errorMessage =
-            error?.response?.data?.error ||
-            this.$t('CONVERSATION.MESSAGE_ERROR');
-          this.showAlert(errorMessage);
-        }
+        this.sendMessage(messagePayload);
         this.hideEmojiPicker();
         this.$emit('update:popoutReplyBox', false);
       }
     },
+    async sendMessage(messagePayload) {
+      try {
+        await this.$store.dispatch(
+          'createPendingMessageAndSend',
+          messagePayload
+        );
+        bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
+      } catch (error) {
+        const errorMessage =
+          error?.response?.data?.error || this.$t('CONVERSATION.MESSAGE_ERROR');
+        this.showAlert(errorMessage);
+      }
+    },
+    async onSendWhatsAppReply(messagePayload) {
+      this.sendMessage({
+        conversationId: this.currentChat.id,
+        ...messagePayload,
+      });
+      this.hideWhatsappTemplatesModal();
+    },
     replaceText(message) {
       setTimeout(() => {
         this.message = message;