feat(v4): Compose a new conversation from a phone number. (#10568)

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

@@ -1,9 +1,11 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { INPUT_TYPES } from 'dashboard/components-next/taginput/helper/tagInputHelper.js';
 
 import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+
 const props = defineProps({
   contacts: {
     type: Array,
@@ -42,15 +44,19 @@ const props = defineProps({
     default: false,
   },
 });
+
 const emit = defineEmits([
   'searchContacts',
   'setSelectedContact',
   'clearSelectedContact',
   'updateDropdown',
 ]);
+
 const i18nPrefix = 'COMPOSE_NEW_CONVERSATION.FORM.CONTACT_SELECTOR';
 const { t } = useI18n();
 
+const inputType = ref(INPUT_TYPES.EMAIL);
+
 const contactsList = computed(() => {
   return props.contacts?.map(({ name, id, thumbnail, email, ...rest }) => ({
     id,
@@ -80,6 +86,14 @@ const errorClass = computed(() => {
     ? '[&_input]:placeholder:!text-n-ruby-9 [&_input]:dark:placeholder:!text-n-ruby-9'
     : '';
 });
+
+const handleInput = value => {
+  // Update input type based on whether input starts with '+'
+  // If it does, set input type to 'tel'
+  // Otherwise, set input type to 'email'
+  inputType.value = value.startsWith('+') ? INPUT_TYPES.TEL : INPUT_TYPES.EMAIL;
+  emit('searchContacts', value);
+};
 </script>
 
 <template>
@@ -126,11 +140,11 @@ const errorClass = computed(() => {
         :is-loading="isLoading"
         :disabled="contactableInboxesList?.length > 0 && showInboxesDropdown"
         allow-create
-        type="email"
+        :type="inputType"
         class="flex-1 min-h-7"
         :class="errorClass"
         focus-on-mount
-        @input="emit('searchContacts', $event)"
+        @input="handleInput"
         @on-click-outside="emit('updateDropdown', 'contacts', false)"
         @add="emit('setSelectedContact', $event)"
         @remove="emit('clearSelectedContact')"

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

@@ -193,10 +193,12 @@ export const searchContacts = async ({ keys, query }) => {
   return filteredPayload || [];
 };
 
-export const createNewContact = async email => {
+export const createNewContact = async input => {
   const payload = {
-    name: getCapitalizedNameFromEmail(email),
-    email,
+    name: input.startsWith('+')
+      ? input.slice(1) // Remove the '+' prefix if it exists
+      : getCapitalizedNameFromEmail(input),
+    ...(input.startsWith('+') ? { phone_number: input } : { email: input }),
   };
 
   const {

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

@@ -429,6 +429,28 @@ describe('composeConversationHelper', () => {
           email: 'john@example.com',
         });
       });
+
+      it('creates new contact with phone number', async () => {
+        const mockContact = {
+          id: 1,
+          name: '919999999999',
+          phone_number: '+919999999999',
+        };
+        ContactAPI.create.mockResolvedValue({
+          data: { payload: { contact: mockContact } },
+        });
+
+        const result = await helpers.createNewContact('+919999999999');
+        expect(result).toEqual({
+          id: 1,
+          name: '919999999999',
+          phoneNumber: '+919999999999',
+        });
+        expect(ContactAPI.create).toHaveBeenCalledWith({
+          name: '919999999999',
+          phone_number: '+919999999999',
+        });
+      });
     });
 
     describe('fetchContactableInboxes', () => {