From 88a16b8e967401251d8b33c4db4b76e192064acc Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 4 Oct 2024 20:31:25 +0530
Subject: [PATCH] fix: submit pre chat triggering native submit event (#10224)

---
 app/javascript/shared/components/emoji/EmojiInput.vue | 7 ++++---
 app/javascript/widget/components/PreChat/Form.vue     | 5 +++--
 app/javascript/widget/views/PreChatForm.vue           | 2 +-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/javascript/shared/components/emoji/EmojiInput.vue b/app/javascript/shared/components/emoji/EmojiInput.vue
index 72a101b8d..e27c4ec2a 100644
--- a/app/javascript/shared/components/emoji/EmojiInput.vue
+++ b/app/javascript/shared/components/emoji/EmojiInput.vue
@@ -1,10 +1,11 @@
 <script>
 import emojis from './emojisGroup.json';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import WootButton from 'dashboard/components/ui/WootButton.vue';
 const SEARCH_KEY = 'Search';
 
 export default {
-  components: { FluentIcon },
+  components: { FluentIcon, WootButton },
   props: {
     onClick: {
       type: Function,
@@ -97,7 +98,7 @@ export default {
           class="emoji-search--input focus:box-shadow-blue dark:focus:box-shadow-dark !mb-0 !h-8 !text-sm"
           :placeholder="$t('EMOJI.PLACEHOLDER')"
         />
-        <woot-button
+        <WootButton
           v-if="showRemoveButton"
           size="small"
           variant="smooth"
@@ -106,7 +107,7 @@ export default {
           @click="onClick('')"
         >
           {{ $t('EMOJI.REMOVE') }}
-        </woot-button>
+        </WootButton>
       </div>
       <div v-if="hasNoSearch" ref="emojiItem" class="emoji-item">
         <h5 class="emoji-category--title">
diff --git a/app/javascript/widget/components/PreChat/Form.vue b/app/javascript/widget/components/PreChat/Form.vue
index ff3a285d1..6b2c93cd6 100644
--- a/app/javascript/widget/components/PreChat/Form.vue
+++ b/app/javascript/widget/components/PreChat/Form.vue
@@ -25,7 +25,7 @@ export default {
       default: () => {},
     },
   },
-  emits: ['submit'],
+  emits: ['submitPreChat'],
   setup() {
     const phoneInput = createInput(PhoneInput, {
       props: ['hasErrorInPhoneInput'],
@@ -252,7 +252,7 @@ export default {
     },
     onSubmit() {
       const { emailAddress, fullName, phoneNumber, message } = this.formValues;
-      this.$emit('submit', {
+      this.$emit('submitPreChat', {
         fullName,
         phoneNumber,
         emailAddress,
@@ -277,6 +277,7 @@ export default {
       inputClass: 'hidden',
       wrapperClass: 'hidden',
     }"
+    @submit="onSubmit"
   >
     <div
       v-if="shouldShowHeaderMessage"
diff --git a/app/javascript/widget/views/PreChatForm.vue b/app/javascript/widget/views/PreChatForm.vue
index e1389a21f..d47e03736 100644
--- a/app/javascript/widget/views/PreChatForm.vue
+++ b/app/javascript/widget/views/PreChatForm.vue
@@ -61,6 +61,6 @@ export default {
 
 <template>
   <div class="flex flex-1 overflow-auto">
-    <PreChatForm :options="preChatFormOptions" @submit="onSubmit" />
+    <PreChatForm :options="preChatFormOptions" @submit-pre-chat="onSubmit" />
   </div>
 </template>