feat(v4): Compose new conversation without multiple clicks (#10545)
--------- Co-authored-by: Pranav <pranav@chatwoot.com> Co-authored-by: Pranav <pranavrajs@gmail.com>
This commit is contained in:
Sivin Varghese
co-authored by
Pranav
Pranav
Pranav
Pranav
parent
67c90231b6
commit
b116ab5ad3
+68
@@ -1,4 +1,6 @@
|
||||
import { INBOX_TYPES } from 'dashboard/helper/inbox';
|
||||
import camelcaseKeys from 'camelcase-keys';
|
||||
import ContactAPI from 'dashboard/api/contacts';
|
||||
|
||||
export const convertChannelTypeToLabel = channelType => {
|
||||
const [, type] = channelType.split('::');
|
||||
@@ -45,6 +47,18 @@ export const buildContactableInboxesList = contactInboxes => {
|
||||
);
|
||||
};
|
||||
|
||||
export const getCapitalizedNameFromEmail = email => {
|
||||
const name = email.match(/^([^@]*)@/)?.[1] || email.split('@')[0];
|
||||
return name.charAt(0).toUpperCase() + name.slice(1);
|
||||
};
|
||||
|
||||
export const processContactableInboxes = inboxes => {
|
||||
return inboxes.map(inbox => ({
|
||||
...inbox.inbox,
|
||||
sourceId: inbox.sourceId,
|
||||
}));
|
||||
};
|
||||
|
||||
export const prepareAttachmentPayload = (
|
||||
attachedFiles,
|
||||
directUploadsEnabled
|
||||
@@ -116,3 +130,57 @@ export const prepareWhatsAppMessagePayload = ({
|
||||
assigneeId: currentUser.id,
|
||||
};
|
||||
};
|
||||
|
||||
export const generateContactQuery = ({ keys = ['email'], query }) => {
|
||||
return {
|
||||
payload: keys.map(key => {
|
||||
const filterPayload = {
|
||||
attribute_key: key,
|
||||
filter_operator: 'contains',
|
||||
values: [query],
|
||||
attribute_model: 'standard',
|
||||
};
|
||||
if (keys.findIndex(k => k === key) !== keys.length - 1) {
|
||||
filterPayload.query_operator = 'or';
|
||||
}
|
||||
return filterPayload;
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
// API Calls
|
||||
export const searchContacts = async ({ keys, query }) => {
|
||||
const {
|
||||
data: { payload },
|
||||
} = await ContactAPI.filter(
|
||||
undefined,
|
||||
'name',
|
||||
generateContactQuery({ keys, query })
|
||||
);
|
||||
return camelcaseKeys(payload, { deep: true });
|
||||
};
|
||||
|
||||
export const createNewContact = async email => {
|
||||
const payload = {
|
||||
name: getCapitalizedNameFromEmail(email),
|
||||
email,
|
||||
};
|
||||
|
||||
const {
|
||||
data: {
|
||||
payload: { contact: newContact },
|
||||
},
|
||||
} = await ContactAPI.create(payload);
|
||||
|
||||
return camelcaseKeys(newContact, { deep: true });
|
||||
};
|
||||
|
||||
export const fetchContactableInboxes = async contactId => {
|
||||
const {
|
||||
data: { payload: inboxes = [] },
|
||||
} = await ContactAPI.getContactableInboxes(contactId);
|
||||
|
||||
const convertInboxesToCamelKeys = camelcaseKeys(inboxes, { deep: true });
|
||||
|
||||
return processContactableInboxes(convertInboxesToCamelKeys);
|
||||
};
|
||||
|
||||
+239
-1
@@ -1,7 +1,10 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { INBOX_TYPES } from 'dashboard/helper/inbox';
|
||||
import ContactAPI from 'dashboard/api/contacts';
|
||||
import * as helpers from '../composeConversationHelper';
|
||||
|
||||
vi.mock('dashboard/api/contacts');
|
||||
|
||||
describe('composeConversationHelper', () => {
|
||||
describe('convertChannelTypeToLabel', () => {
|
||||
it('converts channel type with namespace to capitalized label', () => {
|
||||
@@ -90,6 +93,35 @@ describe('composeConversationHelper', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('getCapitalizedNameFromEmail', () => {
|
||||
it('extracts and capitalizes name from email', () => {
|
||||
expect(helpers.getCapitalizedNameFromEmail('john.doe@example.com')).toBe(
|
||||
'John.doe'
|
||||
);
|
||||
expect(helpers.getCapitalizedNameFromEmail('jane@example.com')).toBe(
|
||||
'Jane'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('processContactableInboxes', () => {
|
||||
it('processes inboxes with correct structure', () => {
|
||||
const inboxes = [
|
||||
{
|
||||
inbox: { id: 1, name: 'Inbox 1' },
|
||||
sourceId: 'source1',
|
||||
},
|
||||
];
|
||||
|
||||
const result = helpers.processContactableInboxes(inboxes);
|
||||
expect(result[0]).toEqual({
|
||||
id: 1,
|
||||
name: 'Inbox 1',
|
||||
sourceId: 'source1',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('prepareAttachmentPayload', () => {
|
||||
it('prepares direct upload files', () => {
|
||||
const files = [{ blobSignedId: 'signed1' }];
|
||||
@@ -168,4 +200,210 @@ describe('composeConversationHelper', () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('generateContactQuery', () => {
|
||||
it('generates correct query structure for contact search', () => {
|
||||
const query = 'test@example.com';
|
||||
const expected = {
|
||||
payload: [
|
||||
{
|
||||
attribute_key: 'email',
|
||||
filter_operator: 'contains',
|
||||
values: [query],
|
||||
attribute_model: 'standard',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
expect(helpers.generateContactQuery({ keys: ['email'], query })).toEqual(
|
||||
expected
|
||||
);
|
||||
});
|
||||
|
||||
it('handles empty query', () => {
|
||||
const expected = {
|
||||
payload: [
|
||||
{
|
||||
attribute_key: 'email',
|
||||
filter_operator: 'contains',
|
||||
values: [''],
|
||||
attribute_model: 'standard',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
expect(
|
||||
helpers.generateContactQuery({ keys: ['email'], query: '' })
|
||||
).toEqual(expected);
|
||||
});
|
||||
|
||||
it('handles mutliple keys', () => {
|
||||
const expected = {
|
||||
payload: [
|
||||
{
|
||||
attribute_key: 'email',
|
||||
filter_operator: 'contains',
|
||||
values: ['john'],
|
||||
attribute_model: 'standard',
|
||||
query_operator: 'or',
|
||||
},
|
||||
{
|
||||
attribute_key: 'phone_number',
|
||||
filter_operator: 'contains',
|
||||
values: ['john'],
|
||||
attribute_model: 'standard',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
expect(
|
||||
helpers.generateContactQuery({
|
||||
keys: ['email', 'phone_number'],
|
||||
query: 'john',
|
||||
})
|
||||
).toEqual(expected);
|
||||
});
|
||||
});
|
||||
|
||||
describe('API calls', () => {
|
||||
describe('searchContacts', () => {
|
||||
it('searches contacts and returns camelCase results', async () => {
|
||||
const mockPayload = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'John Doe',
|
||||
email: 'john@example.com',
|
||||
phone_number: '+1234567890',
|
||||
created_at: '2023-01-01',
|
||||
},
|
||||
];
|
||||
|
||||
ContactAPI.filter.mockResolvedValue({
|
||||
data: { payload: mockPayload },
|
||||
});
|
||||
|
||||
const result = await helpers.searchContacts({
|
||||
keys: ['email'],
|
||||
query: 'john',
|
||||
});
|
||||
|
||||
expect(result).toEqual([
|
||||
{
|
||||
id: 1,
|
||||
name: 'John Doe',
|
||||
email: 'john@example.com',
|
||||
phoneNumber: '+1234567890',
|
||||
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: [] },
|
||||
});
|
||||
|
||||
const result = await helpers.searchContacts('nonexistent');
|
||||
expect(result).toEqual([]);
|
||||
});
|
||||
|
||||
it('transforms nested objects to camelCase', async () => {
|
||||
const mockPayload = [
|
||||
{
|
||||
id: 1,
|
||||
contact_inboxes: [
|
||||
{
|
||||
inbox_id: 1,
|
||||
source_id: 'source1',
|
||||
created_at: '2023-01-01',
|
||||
},
|
||||
],
|
||||
custom_attributes: {
|
||||
custom_field_name: 'value',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
ContactAPI.filter.mockResolvedValue({
|
||||
data: { payload: mockPayload },
|
||||
});
|
||||
|
||||
const result = await helpers.searchContacts('test');
|
||||
|
||||
expect(result).toEqual([
|
||||
{
|
||||
id: 1,
|
||||
contactInboxes: [
|
||||
{
|
||||
inboxId: 1,
|
||||
sourceId: 'source1',
|
||||
createdAt: '2023-01-01',
|
||||
},
|
||||
],
|
||||
customAttributes: {
|
||||
customFieldName: 'value',
|
||||
},
|
||||
},
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('createNewContact', () => {
|
||||
it('creates new contact with capitalized name', async () => {
|
||||
const mockContact = { id: 1, name: 'John', email: 'john@example.com' };
|
||||
ContactAPI.create.mockResolvedValue({
|
||||
data: { payload: { contact: mockContact } },
|
||||
});
|
||||
|
||||
const result = await helpers.createNewContact('john@example.com');
|
||||
expect(result).toEqual(mockContact);
|
||||
expect(ContactAPI.create).toHaveBeenCalledWith({
|
||||
name: 'John',
|
||||
email: 'john@example.com',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('fetchContactableInboxes', () => {
|
||||
it('fetches and processes contactable inboxes', async () => {
|
||||
const mockInboxes = [
|
||||
{
|
||||
inbox: { id: 1, name: 'Inbox 1' },
|
||||
sourceId: 'source1',
|
||||
},
|
||||
];
|
||||
ContactAPI.getContactableInboxes.mockResolvedValue({
|
||||
data: { payload: mockInboxes },
|
||||
});
|
||||
|
||||
const result = await helpers.fetchContactableInboxes(1);
|
||||
expect(result[0]).toEqual({
|
||||
id: 1,
|
||||
name: 'Inbox 1',
|
||||
sourceId: 'source1',
|
||||
});
|
||||
expect(ContactAPI.getContactableInboxes).toHaveBeenCalledWith(1);
|
||||
});
|
||||
|
||||
it('returns empty array when no inboxes found', async () => {
|
||||
ContactAPI.getContactableInboxes.mockResolvedValue({
|
||||
data: { payload: [] },
|
||||
});
|
||||
|
||||
const result = await helpers.fetchContactableInboxes(1);
|
||||
expect(result).toEqual([]);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user