From 1982cb159c33457d3cb89feb0c7f5e159729a7b3 Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Tue, 19 Nov 2024 22:03:54 +0530
Subject: [PATCH] chore: Clean up

---
 .../NewConversation/ComposeConversation.vue   |  40 +++++-
 .../components/ActionButtons.vue              |   7 +-
 .../components/ComposeNewConversationForm.vue | 118 ++++++------------
 .../components/ContactSelector.vue            |  12 +-
 4 files changed, 95 insertions(+), 82 deletions(-)

diff --git a/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue b/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
index 50ea86b32..498feacf8 100644
--- a/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
@@ -1,9 +1,10 @@
 <script setup>
 import { ref, computed, onMounted, watch } from 'vue';
-import { useMapGetter } from 'dashboard/composables/store';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { useAlert } from 'dashboard/composables';
+import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
 import { debounce } from '@chatwoot/utils';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import {
@@ -16,6 +17,7 @@ import {
 import ComposeNewConversationForm from 'dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue';
 
 const route = useRoute();
+const store = useStore();
 const { t } = useI18n();
 
 const contacts = ref([]);
@@ -29,6 +31,13 @@ const isSearching = ref(false);
 const showComposeNewConversation = ref(false);
 
 const contactById = useMapGetter('contacts/getContactById');
+const contactsUiFlags = useMapGetter('contacts/getUIFlags');
+const currentUser = useMapGetter('getCurrentUser');
+const globalConfig = useMapGetter('globalConfig/get');
+const directUploadsEnabled = computed(
+  () => globalConfig.value.directUploadsEnabled
+);
+const uiFlags = useMapGetter('contactConversations/getUIFlags');
 const contactId = computed(() => route.params.contactId || null);
 const activeContact = computed(() => contactById.value(contactId.value));
 
@@ -94,6 +103,30 @@ const closeCompose = () => {
   targetInbox.value = null;
 };
 
+const createConversation = async ({ payload, isFromWhatsApp }) => {
+  try {
+    const data = await store.dispatch('contactConversations/create', {
+      params: payload,
+      isFromWhatsApp,
+    });
+    const action = {
+      type: 'link',
+      to: `/app/accounts/${data.account_id}/conversations/${data.id}`,
+      message: t('COMPOSE_NEW_CONVERSATION.FORM.GO_TO_CONVERSATION'),
+    };
+    closeCompose();
+    useAlert(t('COMPOSE_NEW_CONVERSATION.FORM.SUCCESS_MESSAGE'), action);
+    return true; // Return success
+  } catch (error) {
+    useAlert(
+      error instanceof ExceptionWithMessage
+        ? error.data
+        : t('COMPOSE_NEW_CONVERSATION.FORM.ERROR_MESSAGE')
+    );
+    return false; // Return failure
+  }
+};
+
 const toggle = () => {
   showComposeNewConversation.value = !showComposeNewConversation.value;
 };
@@ -142,14 +175,19 @@ useKeyboardEvents(keyboardEvents);
       :contacts="contacts"
       :contact-id="contactId"
       :is-loading="isSearching"
+      :current-user="currentUser"
       :selected-contact="selectedContact"
       :target-inbox="targetInbox"
       :is-creating-contact="isCreatingContact"
       :is-fetching-inboxes="isFetchingInboxes"
+      :is-direct-uploads-enabled="directUploadsEnabled"
+      :contact-conversations-ui-flags="uiFlags"
+      :contacts-ui-flags="contactsUiFlags"
       @search-contacts="onContactSearch"
       @update-selected-contact="handleSelectedContact"
       @update-target-inbox="handleTargetInbox"
       @clear-selected-contact="clearSelectedContact"
+      @create-conversation="createConversation"
       @discard="closeCompose"
     />
   </div>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue b/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
index ebca98b25..77c1ce83b 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
@@ -48,6 +48,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  isDropdownActive: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits([
@@ -123,7 +127,8 @@ const { onFileUpload } = useFileUpload({
 
 const keyboardEvents = {
   Enter: {
-    action: () => !props.isWhatsappInbox && emit('sendMessage'),
+    action: () =>
+      !props.isWhatsappInbox && !props.isDropdownActive && emit('sendMessage'),
   },
 };
 useKeyboardEvents(keyboardEvents);
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
index e5f147118..21a200998 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
@@ -1,9 +1,5 @@
 <script setup>
 import { reactive, ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
 import { useVuelidate } from '@vuelidate/core';
 import { required, requiredIf } from '@vuelidate/validators';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
@@ -26,62 +22,34 @@ import InboxEmptyState from './InboxEmptyState.vue';
 import AttachmentPreviews from './AttachmentPreviews.vue';
 
 const props = defineProps({
-  contacts: {
-    type: Array,
-    default: () => [],
-  },
-  contactId: {
-    type: String,
-    default: null,
-  },
-  selectedContact: {
-    type: Object,
-    default: null,
-  },
-  targetInbox: {
-    type: Object,
-    default: null,
-  },
-  isCreatingContact: {
-    type: Boolean,
-    default: false,
-  },
-  isFetchingInboxes: {
-    type: Boolean,
-    default: false,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
+  contacts: { type: Array, default: () => [] },
+  contactId: { type: String, default: null },
+  selectedContact: { type: Object, default: null },
+  targetInbox: { type: Object, default: null },
+  currentUser: { type: Object, default: null },
+  isCreatingContact: { type: Boolean, default: false },
+  isFetchingInboxes: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  isDirectUploadsEnabled: { type: Boolean, default: false },
+  contactConversationsUiFlags: { type: Object, default: null },
+  contactsUiFlags: { type: Object, default: null },
 });
 
 const emit = defineEmits([
   'searchContacts',
   'discard',
-  'success',
   'updateSelectedContact',
   'updateTargetInbox',
   'clearSelectedContact',
+  'createConversation',
 ]);
 
-const store = useStore();
-const { t } = useI18n();
-
 const showContactsDropdown = ref(false);
 const showInboxesDropdown = ref(false);
 const showCcEmailsDropdown = ref(false);
 const showBccEmailsDropdown = ref(false);
 
-const contactsUiFlags = useMapGetter('contacts/getUIFlags');
-const currentUser = useMapGetter('getCurrentUser');
-const globalConfig = useMapGetter('globalConfig/get');
-const uiFlags = useMapGetter('contactConversations/getUIFlags');
-const directUploadsEnabled = computed(
-  () => globalConfig.value.directUploadsEnabled
-);
-
-const isCreating = computed(() => uiFlags.value.isCreating);
+const isCreating = computed(() => props.contactConversationsUiFlags.isCreating);
 
 const state = reactive({
   message: '',
@@ -146,9 +114,9 @@ const newMessagePayload = () => {
     subject,
     ccEmails,
     bccEmails,
-    currentUser: currentUser.value,
+    currentUser: props.currentUser,
     attachedFiles,
-    directUploadsEnabled: directUploadsEnabled.value,
+    directUploadsEnabled: props.isDirectUploadsEnabled,
   });
 };
 
@@ -160,11 +128,20 @@ const showNoInboxAlert = computed(() => {
   return (
     props.selectedContact &&
     contactableInboxesList.value.length === 0 &&
-    !contactsUiFlags.value.isFetchingInboxes &&
+    !props.contactsUiFlags.isFetchingInboxes &&
     !props.isFetchingInboxes
   );
 });
 
+const isAnyDropdownActive = computed(() => {
+  return (
+    showContactsDropdown.value ||
+    showInboxesDropdown.value ||
+    showCcEmailsDropdown.value ||
+    showBccEmailsDropdown.value
+  );
+});
+
 const handleContactSearch = value => {
   emit('searchContacts', value);
 };
@@ -245,38 +222,21 @@ const clearForm = () => {
   v$.value.$reset();
 };
 
-const createConversation = async ({ payload, isFromWhatsApp }) => {
-  try {
-    const data = await store.dispatch('contactConversations/create', {
-      params: payload,
-      isFromWhatsApp,
-    });
-    const action = {
-      type: 'link',
-      to: `/app/accounts/${data.account_id}/conversations/${data.id}`,
-      message: t('COMPOSE_NEW_CONVERSATION.FORM.GO_TO_CONVERSATION'),
-    };
-    emit('success');
-    useAlert(t('COMPOSE_NEW_CONVERSATION.FORM.SUCCESS_MESSAGE'), action);
-  } catch (error) {
-    useAlert(
-      error instanceof ExceptionWithMessage
-        ? error.data
-        : t('COMPOSE_NEW_CONVERSATION.FORM.ERROR_MESSAGE')
-    );
-  }
-};
-
 const handleSendMessage = async () => {
   const isValid = await v$.value.$validate();
   if (!isValid) return;
 
-  await createConversation({
-    payload: newMessagePayload(),
-    isFromWhatsApp: false,
-  });
-  emit('discard');
-  clearForm();
+  try {
+    const success = await emit('createConversation', {
+      payload: newMessagePayload(),
+      isFromWhatsApp: false,
+    });
+    if (success) {
+      clearForm();
+    }
+  } catch (error) {
+    // Form will not be cleared if conversation creation fails
+  }
 };
 
 const handleSendWhatsappMessage = async ({ message, templateParams }) => {
@@ -285,13 +245,12 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
     selectedContact: props.selectedContact,
     message,
     templateParams,
-    currentUser: currentUser.value,
+    currentUser: props.currentUser,
   });
-  await createConversation({
+  await emit('createConversation', {
     payload: whatsappMessagePayload,
     isFromWhatsApp: true,
   });
-  emit('discard');
 };
 </script>
 
@@ -368,6 +327,7 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
       :is-loading="isCreating"
       :disable-send-button="isCreating"
       :has-no-inbox="showNoInboxAlert"
+      :is-dropdown-active="isAnyDropdownActive"
       @insert-emoji="onClickInsertEmoji"
       @add-signature="handleAddSignature"
       @remove-signature="handleRemoveSignature"
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue b/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue
index e994443b4..744018764 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue
@@ -79,7 +79,17 @@ const selectedContactLabel = computed(() => {
       </label>
 
       <div
-        v-if="selectedContact"
+        v-if="isCreatingContact"
+        class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 px-3 min-h-7 min-w-0"
+      >
+        <span class="text-sm truncate text-n-slate-12">
+          {{
+            t('COMPOSE_NEW_CONVERSATION.FORM.CONTACT_SELECTOR.CONTACT_CREATING')
+          }}
+        </span>
+      </div>
+      <div
+        v-else-if="selectedContact"
         class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 px-3 min-h-7 min-w-0"
       >
         <span class="text-sm truncate text-n-slate-12">