fix: New compose conversation form (#10548)

app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue

@@ -2,7 +2,7 @@
 import { ref, computed, onMounted, watch } from 'vue';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { vOnClickOutside } from '@vueuse/components';
 import { useAlert } from 'dashboard/composables';
 import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
 import { debounce } from '@chatwoot/utils';
@@ -21,9 +21,12 @@ const props = defineProps({
     type: String,
     default: 'left',
   },
+  contactId: {
+    type: String,
+    default: null,
+  },
 });
 
-const route = useRoute();
 const store = useStore();
 const { t } = useI18n();
 
@@ -44,8 +47,8 @@ const uiFlags = useMapGetter('contactConversations/getUIFlags');
 const directUploadsEnabled = computed(
   () => globalConfig.value.directUploadsEnabled
 );
-const contactId = computed(() => route.params.contactId || null);
-const activeContact = computed(() => contactById.value(contactId.value));
+
+const activeContact = computed(() => contactById.value(props.contactId));
 
 const composePopoverClass = computed(() => {
   return props.alignPosition === 'right'
@@ -149,7 +152,7 @@ const toggle = () => {
 watch(
   activeContact,
   () => {
-    if (activeContact.value && contactId.value) {
+    if (activeContact.value && props.contactId) {
       // Add null check for contactInboxes
       const contactInboxes = activeContact.value?.contactInboxes || [];
       selectedContact.value = {
@@ -177,7 +180,10 @@ useKeyboardEvents(keyboardEvents);
 </script>
 
 <template>
-  <div class="relative z-40">
+  <div
+    v-on-click-outside="() => (showComposeNewConversation = false)"
+    class="relative z-40"
+  >
     <slot
       name="trigger"
       :is-open="showComposeNewConversation"

app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue

@@ -65,7 +65,14 @@ const contactsList = computed(() => {
 });
 
 const selectedContactLabel = computed(() => {
-  return `${props.selectedContact?.name} (${props.selectedContact?.email})`;
+  const { name, email = '', phoneNumber = '' } = props.selectedContact || {};
+  if (email) {
+    return `${name} (${email})`;
+  }
+  if (phoneNumber) {
+    return `${name} (${phoneNumber})`;
+  }
+  return name || '';
 });
 
 const errorClass = computed(() => {

app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js

@@ -154,7 +154,12 @@ export const searchContacts = async ({ keys, query }) => {
     'name',
     generateContactQuery({ keys, query })
   );
-  return camelcaseKeys(payload, { deep: true });
+  const camelCasedPayload = camelcaseKeys(payload, { deep: true });
+  // Filter contacts that have either phone_number or email
+  const filteredPayload = camelCasedPayload?.filter(
+    contact => contact.phoneNumber || contact.email
+  );
+  return filteredPayload || [];
 };
 
 export const createNewContact = async email => {

app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js

@@ -297,6 +297,70 @@ describe('composeConversationHelper', () => {
         });
       });
 
+      it('searches contacts and returns only contacts with email or phone number', async () => {
+        const mockPayload = [
+          {
+            id: 1,
+            name: 'John Doe',
+            email: 'john@example.com',
+            phone_number: '+1234567890',
+            created_at: '2023-01-01',
+          },
+          {
+            id: 2,
+            name: 'Jane Doe',
+            email: null,
+            phone_number: null,
+            created_at: '2023-01-01',
+          },
+          {
+            id: 3,
+            name: 'Bob Smith',
+            email: 'bob@example.com',
+            phone_number: null,
+            created_at: '2023-01-01',
+          },
+        ];
+
+        ContactAPI.filter.mockResolvedValue({
+          data: { payload: mockPayload },
+        });
+
+        const result = await helpers.searchContacts({
+          keys: ['email'],
+          query: 'john',
+        });
+
+        // Should only return contacts with either email or phone number
+        expect(result).toEqual([
+          {
+            id: 1,
+            name: 'John Doe',
+            email: 'john@example.com',
+            phoneNumber: '+1234567890',
+            createdAt: '2023-01-01',
+          },
+          {
+            id: 3,
+            name: 'Bob Smith',
+            email: 'bob@example.com',
+            phoneNumber: null,
+            createdAt: '2023-01-01',
+          },
+        ]);
+
+        expect(ContactAPI.filter).toHaveBeenCalledWith(undefined, 'name', {
+          payload: [
+            {
+              attribute_key: 'email',
+              filter_operator: 'contains',
+              values: ['john'],
+              attribute_model: 'standard',
+            },
+          ],
+        });
+      });
+
       it('handles empty search results', async () => {
         ContactAPI.filter.mockResolvedValue({
           data: { payload: [] },
@@ -310,6 +374,8 @@ describe('composeConversationHelper', () => {
         const mockPayload = [
           {
             id: 1,
+            name: 'John Doe',
+            phone_number: '+1234567890',
             contact_inboxes: [
               {
                 inbox_id: 1,
@@ -332,6 +398,8 @@ describe('composeConversationHelper', () => {
         expect(result).toEqual([
           {
             id: 1,
+            name: 'John Doe',
+            phoneNumber: '+1234567890',
             contactInboxes: [
               {
                 inboxId: 1,