chore: Clean up

2024-11-19 22:03:54 +05:30
parent ca46ed9bca
commit 1982cb159c
4 changed files with 95 additions and 82 deletions
@@ -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>
@@ -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);
@@ -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"
@@ -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">