feat: Add rich template preview for WhatsApp & Twilio Templates (#13206)
This PR introduces a comprehensive, display-only template preview system for both WhatsApp and Twilio templates rendering of all supported template types. This lays the foundation for rich template previews across: - Template selection modals - Campaign creation flows - Message composer - Message screen. <img width="1818" height="2058" alt="template-preview" src="https://github.com/user-attachments/assets/9833b28c-f824-4568-8f74-6da09ac61f62" /> --------- Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: iamsivin <iamsivin@gmail.com> Co-authored-by: Muhsin <12408980+muhsin-k@users.noreply.github.com>
This commit is contained in:
Muhsin Keloth
co-authored by
Sivin Varghese
iamsivin
Muhsin
Sivin Varghese
iamsivin
Muhsin
parent
353089473e
commit
517b67dfd6
@@ -0,0 +1,58 @@
|
||||
export const PLATFORMS = {
|
||||
WHATSAPP: 'whatsapp',
|
||||
TWILIO: 'twilio',
|
||||
};
|
||||
|
||||
export const WA_COMPONENT_TYPES = {
|
||||
HEADER: 'HEADER',
|
||||
BODY: 'BODY',
|
||||
FOOTER: 'FOOTER',
|
||||
BUTTONS: 'BUTTONS',
|
||||
};
|
||||
|
||||
export const WA_HEADER_FORMATS = {
|
||||
TEXT: 'TEXT',
|
||||
IMAGE: 'IMAGE',
|
||||
VIDEO: 'VIDEO',
|
||||
DOCUMENT: 'DOCUMENT',
|
||||
};
|
||||
|
||||
export const WA_MEDIA_FORMATS = [
|
||||
WA_HEADER_FORMATS.IMAGE,
|
||||
WA_HEADER_FORMATS.VIDEO,
|
||||
WA_HEADER_FORMATS.DOCUMENT,
|
||||
];
|
||||
|
||||
export const WA_BUTTON_TYPES = {
|
||||
COPY_CODE: 'COPY_CODE',
|
||||
};
|
||||
|
||||
export const WA_PARAM_FORMATS = {
|
||||
POSITIONAL: 'POSITIONAL',
|
||||
NAMED: 'NAMED',
|
||||
};
|
||||
|
||||
export const TWILIO_TYPE_PREFIX = 'twilio/';
|
||||
|
||||
export const TWILIO_TYPES = {
|
||||
TEXT: 'text',
|
||||
MEDIA: 'media',
|
||||
QUICK_REPLY: 'quick_reply',
|
||||
CALL_TO_ACTION: 'call_to_action',
|
||||
CATALOG: 'catalog',
|
||||
};
|
||||
|
||||
export const TEMPLATE_TYPES = {
|
||||
WHATSAPP_TEXT: 'whatsapp-text',
|
||||
WHATSAPP_TEXT_HEADER: 'whatsapp-text-header',
|
||||
WHATSAPP_MEDIA_IMAGE: 'whatsapp-media-image',
|
||||
WHATSAPP_MEDIA_VIDEO: 'whatsapp-media-video',
|
||||
WHATSAPP_MEDIA_DOCUMENT: 'whatsapp-media-document',
|
||||
WHATSAPP_INTERACTIVE: 'whatsapp-interactive',
|
||||
WHATSAPP_COPY_CODE: 'whatsapp-copy-code',
|
||||
TWILIO_TEXT: 'twilio-text',
|
||||
TWILIO_MEDIA: 'twilio-media',
|
||||
TWILIO_QUICK_REPLY: 'twilio-quick-reply',
|
||||
TWILIO_CALL_TO_ACTION: 'twilio-call-to-action',
|
||||
TWILIO_CARD: 'twilio-card',
|
||||
};
|
||||
@@ -0,0 +1,114 @@
|
||||
import { TemplateTypeDetector } from './TemplateTypeDetector';
|
||||
import {
|
||||
PLATFORMS,
|
||||
TWILIO_TYPE_PREFIX,
|
||||
WA_COMPONENT_TYPES,
|
||||
WA_PARAM_FORMATS,
|
||||
} from './TemplateConstants';
|
||||
|
||||
/**
|
||||
* TemplateNormalizer - Convert platform-specific formats to unified structure
|
||||
*/
|
||||
export class TemplateNormalizer {
|
||||
static normalizeWhatsApp(template) {
|
||||
const components = template.components || [];
|
||||
|
||||
return {
|
||||
id: template.id,
|
||||
name: template.name,
|
||||
platform: PLATFORMS.WHATSAPP,
|
||||
type: TemplateTypeDetector.detectWhatsAppType(template),
|
||||
parameterFormat: template.parameter_format || WA_PARAM_FORMATS.POSITIONAL,
|
||||
header: components.find(c => c.type === WA_COMPONENT_TYPES.HEADER),
|
||||
body: components.find(c => c.type === WA_COMPONENT_TYPES.BODY),
|
||||
footer: components.find(c => c.type === WA_COMPONENT_TYPES.FOOTER),
|
||||
buttons:
|
||||
components.find(c => c.type === WA_COMPONENT_TYPES.BUTTONS)?.buttons ||
|
||||
[],
|
||||
variables: this.extractWhatsAppVariables(template),
|
||||
category: template.category,
|
||||
language: template.language,
|
||||
originalTemplate: template,
|
||||
};
|
||||
}
|
||||
|
||||
static normalizeTwilio(template) {
|
||||
const typeKey =
|
||||
template.template_type?.replace(TWILIO_TYPE_PREFIX, '') ||
|
||||
Object.keys(template.types || {})
|
||||
.map(key => key.replace(TWILIO_TYPE_PREFIX, ''))
|
||||
.find(key => key);
|
||||
|
||||
const hyphenatedKey = `${TWILIO_TYPE_PREFIX}${(typeKey || '').replace(/_/g, '-')}`;
|
||||
const underscoreKey = `${TWILIO_TYPE_PREFIX}${(typeKey || '').replace(/-/g, '_')}`;
|
||||
const typeData =
|
||||
template.types?.[hyphenatedKey] || template.types?.[underscoreKey] || {};
|
||||
|
||||
return {
|
||||
contentSid: template.content_sid,
|
||||
name: template.friendly_name,
|
||||
platform: PLATFORMS.TWILIO,
|
||||
type: TemplateTypeDetector.detectTwilioType(template),
|
||||
body: template.body || typeData.body,
|
||||
media: typeData.media || [],
|
||||
mediaType: template.media_type || null,
|
||||
actions: typeData.actions || [],
|
||||
variables: template.variables || {},
|
||||
category: template.category || 'utility',
|
||||
language: template.language || 'en',
|
||||
originalTemplate: template,
|
||||
};
|
||||
}
|
||||
|
||||
static extractWhatsAppVariables(template) {
|
||||
const variables = {};
|
||||
const components = template.components || [];
|
||||
|
||||
components.forEach(component => {
|
||||
if (component.text) {
|
||||
const matches = component.text.match(/\{\{([^}]+)\}\}/g) || [];
|
||||
matches.forEach(match => {
|
||||
const variable = match.replace(/[{}]/g, '');
|
||||
|
||||
if (template.parameter_format === WA_PARAM_FORMATS.NAMED) {
|
||||
const example =
|
||||
component.example?.body_text_named_params?.find(
|
||||
p => p.param_name === variable
|
||||
)?.example || '';
|
||||
variables[variable] = example;
|
||||
} else {
|
||||
const position = parseInt(variable, 10) - 1;
|
||||
const example = component.example?.body_text?.[0]?.[position] || '';
|
||||
variables[variable] = example;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (component.buttons) {
|
||||
component.buttons.forEach(button => {
|
||||
if (button.url) {
|
||||
const matches = button.url.match(/\{\{([^}]+)\}\}/g) || [];
|
||||
matches.forEach(match => {
|
||||
const variable = match.replace(/[{}]/g, '');
|
||||
const example = button.example?.[0] || '';
|
||||
variables[variable] = example;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return variables;
|
||||
}
|
||||
|
||||
static normalize(template, platform) {
|
||||
switch (platform) {
|
||||
case PLATFORMS.WHATSAPP:
|
||||
return this.normalizeWhatsApp(template);
|
||||
case PLATFORMS.TWILIO:
|
||||
return this.normalizeTwilio(template);
|
||||
default:
|
||||
throw new Error(`Unsupported platform: ${platform}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
// @vitest-environment node
|
||||
|
||||
import { describe, it, expect } from 'vitest';
|
||||
|
||||
import { TemplateNormalizer } from './TemplateNormalizer';
|
||||
|
||||
describe('TemplateNormalizer', () => {
|
||||
it('normalizes Twilio call-to-action templates with hyphenated keys', () => {
|
||||
const template = {
|
||||
types: {
|
||||
'twilio/call-to-action': {
|
||||
body: 'CTA body for {{date}}',
|
||||
actions: [
|
||||
{
|
||||
id: null,
|
||||
title: 'Pay now',
|
||||
type: 'URL',
|
||||
url: 'https://payments.example.com/pay',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
variables: {
|
||||
date: '01-Jan-2026',
|
||||
},
|
||||
content_sid: 'HX123',
|
||||
friendly_name: 'cta_example',
|
||||
template_type: 'call-to-action',
|
||||
};
|
||||
|
||||
const normalized = TemplateNormalizer.normalizeTwilio(template);
|
||||
|
||||
expect(normalized.type).toBe('twilio-call-to-action');
|
||||
expect(normalized.body).toBe('CTA body for {{date}}');
|
||||
expect(normalized.actions).toHaveLength(1);
|
||||
expect(normalized.variables).toEqual({ date: '01-Jan-2026' });
|
||||
});
|
||||
|
||||
it('normalizes Twilio quick replies', () => {
|
||||
const template = {
|
||||
template_type: 'quick_reply',
|
||||
types: {
|
||||
'twilio/quick-reply': {
|
||||
body: 'Pick an option',
|
||||
actions: [{ id: 'a', title: 'Option A' }],
|
||||
},
|
||||
},
|
||||
variables: {},
|
||||
};
|
||||
|
||||
const normalized = TemplateNormalizer.normalizeTwilio(template);
|
||||
|
||||
expect(normalized.type).toBe('twilio-quick-reply');
|
||||
expect(normalized.body).toBe('Pick an option');
|
||||
expect(normalized.actions).toEqual([{ id: 'a', title: 'Option A' }]);
|
||||
});
|
||||
|
||||
it('normalizes Twilio media templates', () => {
|
||||
const template = {
|
||||
template_type: 'media',
|
||||
body: 'Media body {{1}}',
|
||||
types: {
|
||||
'twilio/media': {
|
||||
body: 'Media body {{1}}',
|
||||
media: ['https://example.com/image.jpg'],
|
||||
},
|
||||
},
|
||||
variables: { 1: 'value' },
|
||||
};
|
||||
|
||||
const normalized = TemplateNormalizer.normalizeTwilio(template);
|
||||
|
||||
expect(normalized.type).toBe('twilio-media');
|
||||
expect(normalized.media).toEqual(['https://example.com/image.jpg']);
|
||||
expect(normalized.body).toBe('Media body {{1}}');
|
||||
});
|
||||
|
||||
it('extracts WhatsApp named variables', () => {
|
||||
const template = {
|
||||
parameter_format: 'NAMED',
|
||||
components: [
|
||||
{
|
||||
type: 'BODY',
|
||||
text: 'Hi {{name}}',
|
||||
example: {
|
||||
body_text_named_params: [{ param_name: 'name', example: 'John' }],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const variables = TemplateNormalizer.extractWhatsAppVariables(template);
|
||||
|
||||
expect(variables).toMatchObject({
|
||||
name: 'John',
|
||||
});
|
||||
});
|
||||
|
||||
it('extracts WhatsApp positional variables', () => {
|
||||
const template = {
|
||||
parameter_format: 'POSITIONAL',
|
||||
components: [
|
||||
{
|
||||
type: 'BODY',
|
||||
text: 'Hi {{1}}',
|
||||
example: {
|
||||
body_text: [['positional']],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const variables = TemplateNormalizer.extractWhatsAppVariables(template);
|
||||
|
||||
expect(variables).toMatchObject({
|
||||
1: 'positional',
|
||||
});
|
||||
});
|
||||
|
||||
it('normalizes WhatsApp media image templates', () => {
|
||||
const template = {
|
||||
id: '1',
|
||||
name: 'order_confirmation',
|
||||
parameter_format: 'POSITIONAL',
|
||||
components: [
|
||||
{
|
||||
type: 'HEADER',
|
||||
format: 'IMAGE',
|
||||
example: { header_handle: ['https://example.com/image.jpg'] },
|
||||
},
|
||||
{ type: 'BODY', text: 'Hi {{1}}', example: { body_text: [['John']] } },
|
||||
],
|
||||
language: 'en',
|
||||
};
|
||||
|
||||
const normalized = TemplateNormalizer.normalizeWhatsApp(template);
|
||||
|
||||
expect(normalized.type).toBe('whatsapp-media-image');
|
||||
expect(normalized.header.format).toBe('IMAGE');
|
||||
expect(normalized.body.text).toBe('Hi {{1}}');
|
||||
expect(normalized.variables).toMatchObject({ 1: 'John' });
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,63 @@
|
||||
import {
|
||||
TEMPLATE_TYPES,
|
||||
TWILIO_TYPE_PREFIX,
|
||||
TWILIO_TYPES,
|
||||
WA_BUTTON_TYPES,
|
||||
WA_COMPONENT_TYPES,
|
||||
WA_HEADER_FORMATS,
|
||||
} from './TemplateConstants';
|
||||
|
||||
/**
|
||||
* TemplateTypeDetector - Unified service to identify template types across platforms
|
||||
*/
|
||||
export class TemplateTypeDetector {
|
||||
static detectWhatsAppType(template) {
|
||||
const components = template.components || [];
|
||||
const header = components.find(c => c.type === WA_COMPONENT_TYPES.HEADER);
|
||||
const buttons = components.find(c => c.type === WA_COMPONENT_TYPES.BUTTONS);
|
||||
|
||||
if (header?.format === WA_HEADER_FORMATS.IMAGE)
|
||||
return TEMPLATE_TYPES.WHATSAPP_MEDIA_IMAGE;
|
||||
if (header?.format === WA_HEADER_FORMATS.VIDEO)
|
||||
return TEMPLATE_TYPES.WHATSAPP_MEDIA_VIDEO;
|
||||
if (header?.format === WA_HEADER_FORMATS.DOCUMENT)
|
||||
return TEMPLATE_TYPES.WHATSAPP_MEDIA_DOCUMENT;
|
||||
|
||||
if (buttons) {
|
||||
const hasCopyCode = buttons.buttons?.some(
|
||||
b => b.type === WA_BUTTON_TYPES.COPY_CODE
|
||||
);
|
||||
if (hasCopyCode) return TEMPLATE_TYPES.WHATSAPP_COPY_CODE;
|
||||
return TEMPLATE_TYPES.WHATSAPP_INTERACTIVE;
|
||||
}
|
||||
|
||||
if (header?.format === WA_HEADER_FORMATS.TEXT)
|
||||
return TEMPLATE_TYPES.WHATSAPP_TEXT_HEADER;
|
||||
return TEMPLATE_TYPES.WHATSAPP_TEXT;
|
||||
}
|
||||
|
||||
static detectTwilioType(template) {
|
||||
const typeFromTemplate =
|
||||
template.template_type?.replace(TWILIO_TYPE_PREFIX, '') ||
|
||||
Object.keys(template.types || {})
|
||||
.map(key => key.replace(TWILIO_TYPE_PREFIX, ''))
|
||||
.find(typeKey => typeKey);
|
||||
|
||||
const templateType = (typeFromTemplate || '')
|
||||
.replace(/-/g, '_')
|
||||
.replace(/__/g, '_');
|
||||
|
||||
switch (templateType) {
|
||||
case TWILIO_TYPES.MEDIA:
|
||||
return TEMPLATE_TYPES.TWILIO_MEDIA;
|
||||
case TWILIO_TYPES.QUICK_REPLY:
|
||||
return TEMPLATE_TYPES.TWILIO_QUICK_REPLY;
|
||||
case TWILIO_TYPES.CALL_TO_ACTION:
|
||||
return TEMPLATE_TYPES.TWILIO_CALL_TO_ACTION;
|
||||
case TWILIO_TYPES.CATALOG:
|
||||
return TEMPLATE_TYPES.TWILIO_CARD;
|
||||
default:
|
||||
return TEMPLATE_TYPES.TWILIO_TEXT;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
// @vitest-environment node
|
||||
|
||||
import { describe, it, expect } from 'vitest';
|
||||
|
||||
import { TemplateTypeDetector } from './TemplateTypeDetector';
|
||||
|
||||
describe('TemplateTypeDetector', () => {
|
||||
it('detects Twilio call-to-action from hyphenated template_type', () => {
|
||||
const template = {
|
||||
template_type: 'call-to-action',
|
||||
types: {
|
||||
'twilio/call-to-action': {},
|
||||
},
|
||||
};
|
||||
|
||||
expect(TemplateTypeDetector.detectTwilioType(template)).toBe(
|
||||
'twilio-call-to-action'
|
||||
);
|
||||
});
|
||||
|
||||
it('detects Twilio call-to-action when only types key is present', () => {
|
||||
const template = {
|
||||
types: {
|
||||
'twilio/call_to_action': {},
|
||||
},
|
||||
};
|
||||
|
||||
expect(TemplateTypeDetector.detectTwilioType(template)).toBe(
|
||||
'twilio-call-to-action'
|
||||
);
|
||||
});
|
||||
|
||||
it('detects Twilio quick reply', () => {
|
||||
const template = {
|
||||
template_type: 'quick_reply',
|
||||
types: {
|
||||
'twilio/quick-reply': {},
|
||||
},
|
||||
};
|
||||
|
||||
expect(TemplateTypeDetector.detectTwilioType(template)).toBe(
|
||||
'twilio-quick-reply'
|
||||
);
|
||||
});
|
||||
|
||||
it('detects WhatsApp text-with-header and media', () => {
|
||||
const base = {
|
||||
components: [
|
||||
{ type: 'HEADER', format: 'TEXT', text: 'Header' },
|
||||
{ type: 'BODY', text: 'Body' },
|
||||
],
|
||||
};
|
||||
|
||||
expect(TemplateTypeDetector.detectWhatsAppType(base)).toBe(
|
||||
'whatsapp-text-header'
|
||||
);
|
||||
|
||||
const withImage = {
|
||||
...base,
|
||||
components: [{ type: 'HEADER', format: 'IMAGE' }, base.components[1]],
|
||||
};
|
||||
expect(TemplateTypeDetector.detectWhatsAppType(withImage)).toBe(
|
||||
'whatsapp-media-image'
|
||||
);
|
||||
});
|
||||
|
||||
it('detects WhatsApp copy code vs call-to-action buttons', () => {
|
||||
const copyCode = {
|
||||
components: [
|
||||
{ type: 'BODY', text: 'Hi' },
|
||||
{
|
||||
type: 'BUTTONS',
|
||||
buttons: [{ type: 'COPY_CODE', text: 'Copy offer code' }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const callToAction = {
|
||||
components: [
|
||||
{ type: 'BODY', text: 'Hi' },
|
||||
{
|
||||
type: 'BUTTONS',
|
||||
buttons: [{ type: 'URL', text: 'Visit website' }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
expect(TemplateTypeDetector.detectWhatsAppType(copyCode)).toBe(
|
||||
'whatsapp-copy-code'
|
||||
);
|
||||
expect(TemplateTypeDetector.detectWhatsAppType(callToAction)).toBe(
|
||||
'whatsapp-interactive'
|
||||
);
|
||||
});
|
||||
|
||||
it('detects Twilio media', () => {
|
||||
const template = {
|
||||
template_type: 'media',
|
||||
types: { 'twilio/media': {} },
|
||||
};
|
||||
|
||||
expect(TemplateTypeDetector.detectTwilioType(template)).toBe(
|
||||
'twilio-media'
|
||||
);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user