diff --git a/app/javascript/dashboard/components-next/NewConversation/ComposeNewConversation.vue b/app/javascript/dashboard/components-next/NewConversation/ComposeNewConversation.vue index de2377d8b..552553f74 100644 --- a/app/javascript/dashboard/components-next/NewConversation/ComposeNewConversation.vue +++ b/app/javascript/dashboard/components-next/NewConversation/ComposeNewConversation.vue @@ -25,6 +25,7 @@ import InboxSelector from './components/InboxSelector.vue'; import EmailOptions from './components/EmailOptions.vue'; import MessageEditor from './components/MessageEditor.vue'; import ActionButtons from './components/ActionButtons.vue'; +import InboxEmptyState from './components/InboxEmptyState.vue'; const props = defineProps({ contacts: { @@ -51,8 +52,10 @@ const showInboxesDropdown = ref(false); const showCcEmailsDropdown = ref(false); const showBccEmailsDropdown = ref(false); const isCreatingContact = ref(false); +const isFetchingInboxes = ref(false); const contactById = useMapGetter('contacts/getContactById'); +const contactsUiFlags = useMapGetter('contacts/getUIFlags'); const currentUser = useMapGetter('getCurrentUser'); const globalConfig = useMapGetter('globalConfig/get'); const uiFlags = useMapGetter('contactConversations/getUIFlags'); @@ -139,6 +142,15 @@ const contactableInboxesList = computed(() => { return buildContactableInboxesList(selectedContact.value?.contactInboxes); }); +const showNoInboxAlert = computed(() => { + return ( + selectedContact.value && + contactableInboxesList.value.length === 0 && + !contactsUiFlags.value.isFetchingInboxes && + !isFetchingInboxes.value + ); +}); + const handleContactSearch = value => { emit('searchContacts', value); }; @@ -189,9 +201,11 @@ const setSelectedContact = async ({ value, action, ...rest }) => { // Only proceed with fetching inboxes if we have a contact if (contact?.id) { + isFetchingInboxes.value = true; const contactableInboxes = await fetchContactableInboxes(contact.id); selectedContact.value.contactInboxes = contactableInboxes; showInboxesDropdown.value = true; + isFetchingInboxes.value = false; } } catch (error) { // Reset states in case of error @@ -329,8 +343,9 @@ watch( @clear-selected-contact="clearSelectedContact" @update-dropdown="handleDropdownUpdate" /> - +
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/InboxEmptyState.vue b/app/javascript/dashboard/components-next/NewConversation/components/InboxEmptyState.vue new file mode 100644 index 000000000..7fed98806 --- /dev/null +++ b/app/javascript/dashboard/components-next/NewConversation/components/InboxEmptyState.vue @@ -0,0 +1,9 @@ + diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json index 5093cfc3d..ec55111e8 100644 --- a/app/javascript/dashboard/i18n/locale/en/contact.json +++ b/app/javascript/dashboard/i18n/locale/en/contact.json @@ -607,6 +607,7 @@ "GO_TO_CONVERSATION": "View", "SUCCESS_MESSAGE": "Conversation created successfully", "ERROR_MESSAGE": "Could not create conversation. Please try again later.", + "NO_INBOX_ALERT": "Couldn't find an inbox to initiate a new conversation with this contact.", "CONTACT_SELECTOR": { "LABEL": "To :", "TAG_INPUT_PLACEHOLDER": "Search or enter email and press Enter",