### Description
When integrating the web widget via the JS SDK, customers call
setConversationCustomAttributes and setLabel on chatwoot:ready — before
any conversation exists. These API calls silently fail because the
backend endpoints require an existing conversation. When the visitor
sends their first message, the conversation is created without those
attributes/labels, so the message_created webhook payload is missing the
expected metadata.
This change queues SDK-set conversation custom attributes and labels in
the widget store when no conversation exists yet, and includes them in
the API request when the first message (or attachment) creates the
conversation. The backend now permits and applies these params during
conversation creation — before the message is saved and webhooks fire.
### How to test
1. Configure a web widget without a pre-chat form.
2. Open the widget on a test page and run the following in the browser
console after chatwoot:ready:
`window.$chatwoot.setConversationCustomAttributes({ plan: 'enterprise'
});`
`window.$chatwoot.setLabel('vip');` // must be a label that exists in
the account
3. Send the first message from the widget.
4. Verify in the Chatwoot dashboard that the conversation has plan:
enterprise in custom attributes and the vip label applied.
5. Set up a webhook subscriber for `message_created` confirm the first
payload includes the conversation metadata.
6. Verify that calling `setConversationCustomAttributes` / `setLabel` on
an existing conversation still works as before (direct API path, no
regression).
7. Verify the pre-chat form flow still works as expected.
155 lines
3.7 KiB
JavaScript
155 lines
3.7 KiB
JavaScript
import endPoints from '../endPoints';
|
|
|
|
describe('#sendMessage', () => {
|
|
it('returns correct payload', () => {
|
|
const spy = vi.spyOn(global, 'Date').mockImplementation(() => ({
|
|
toString: () => 'mock date',
|
|
}));
|
|
vi.spyOn(window, 'location', 'get').mockReturnValue({
|
|
...window.location,
|
|
search: '?param=1',
|
|
});
|
|
|
|
window.WOOT_WIDGET = {
|
|
$root: {
|
|
$i18n: {
|
|
locale: 'ar',
|
|
},
|
|
},
|
|
};
|
|
|
|
expect(endPoints.sendMessage('hello')).toEqual({
|
|
url: `/api/v1/widget/messages?param=1&locale=ar`,
|
|
params: {
|
|
message: {
|
|
content: 'hello',
|
|
referer_url: '',
|
|
timestamp: 'mock date',
|
|
},
|
|
},
|
|
});
|
|
spy.mockRestore();
|
|
});
|
|
});
|
|
|
|
describe('#sendMessage with pending metadata', () => {
|
|
it('includes custom_attributes and labels in payload', () => {
|
|
const spy = vi.spyOn(global, 'Date').mockImplementation(() => ({
|
|
toString: () => 'mock date',
|
|
}));
|
|
vi.spyOn(window, 'location', 'get').mockReturnValue({
|
|
...window.location,
|
|
search: '?param=1',
|
|
});
|
|
|
|
window.WOOT_WIDGET = {
|
|
$root: { $i18n: { locale: 'ar' } },
|
|
};
|
|
|
|
const result = endPoints.sendMessage('hello', null, {
|
|
customAttributes: { plan: 'enterprise' },
|
|
labels: ['vip'],
|
|
});
|
|
|
|
expect(result.params.custom_attributes).toEqual({ plan: 'enterprise' });
|
|
expect(result.params.labels).toEqual(['vip']);
|
|
spy.mockRestore();
|
|
});
|
|
|
|
it('does not include metadata keys when not provided', () => {
|
|
const spy = vi.spyOn(global, 'Date').mockImplementation(() => ({
|
|
toString: () => 'mock date',
|
|
}));
|
|
vi.spyOn(window, 'location', 'get').mockReturnValue({
|
|
...window.location,
|
|
search: '?param=1',
|
|
});
|
|
|
|
window.WOOT_WIDGET = {
|
|
$root: { $i18n: { locale: 'ar' } },
|
|
};
|
|
|
|
const result = endPoints.sendMessage('hello');
|
|
expect(result.params.custom_attributes).toBeUndefined();
|
|
expect(result.params.labels).toBeUndefined();
|
|
spy.mockRestore();
|
|
});
|
|
});
|
|
|
|
describe('#getConversation', () => {
|
|
it('returns correct payload', () => {
|
|
vi.spyOn(window, 'location', 'get').mockReturnValue({
|
|
...window.location,
|
|
search: '',
|
|
});
|
|
expect(endPoints.getConversation({ before: 123 })).toEqual({
|
|
url: `/api/v1/widget/messages`,
|
|
params: {
|
|
before: 123,
|
|
},
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('#triggerCampaign', () => {
|
|
it('should returns correct payload', () => {
|
|
const spy = vi.spyOn(global, 'Date').mockImplementation(() => ({
|
|
toString: () => 'mock date',
|
|
}));
|
|
vi.spyOn(window, 'location', 'get').mockReturnValue({
|
|
...window.location,
|
|
search: '',
|
|
});
|
|
const websiteToken = 'ADSDJ2323MSDSDFMMMASDM';
|
|
const campaignId = 12;
|
|
expect(
|
|
endPoints.triggerCampaign({
|
|
websiteToken,
|
|
campaignId,
|
|
})
|
|
).toEqual({
|
|
url: `/api/v1/widget/events`,
|
|
data: {
|
|
name: 'campaign.triggered',
|
|
event_info: {
|
|
campaign_id: campaignId,
|
|
referer: '',
|
|
initiated_at: {
|
|
timestamp: 'mock date',
|
|
},
|
|
},
|
|
},
|
|
params: {
|
|
website_token: websiteToken,
|
|
},
|
|
});
|
|
|
|
spy.mockRestore();
|
|
});
|
|
});
|
|
|
|
describe('#getConversation', () => {
|
|
it('should returns correct payload', () => {
|
|
const spy = vi.spyOn(global, 'Date').mockImplementation(() => ({
|
|
toString: () => 'mock date',
|
|
}));
|
|
vi.spyOn(window, 'location', 'get').mockReturnValue({
|
|
...window.location,
|
|
search: '',
|
|
});
|
|
expect(
|
|
endPoints.getConversation({
|
|
after: 123,
|
|
})
|
|
).toEqual({
|
|
url: `/api/v1/widget/messages`,
|
|
params: {
|
|
after: 123,
|
|
before: undefined,
|
|
},
|
|
});
|
|
|
|
spy.mockRestore();
|
|
});
|
|
});
|