735 lines
31 KiB
JavaScript
735 lines
31 KiB
JavaScript
import { useState, useEffect } from 'react';
|
||
import {
|
||
listTemplates,
|
||
saveTemplate,
|
||
updateTemplate,
|
||
deleteTemplate,
|
||
submitTemplateToMeta,
|
||
syncTemplatesFromMeta,
|
||
} from '../services/templateService';
|
||
|
||
// ── Constants ──────────────────────────────────────────────────────────────
|
||
|
||
const META_STATUS_MAP = {
|
||
APPROVED: { label: 'Aprovado', color: '#1a7a44', bg: '#edfaf3', border: '#b6e8c8' },
|
||
PENDING: { label: 'Aguardando Meta', color: '#a05a00', bg: '#fff8f0', border: '#f5d9a8' },
|
||
REJECTED: { label: 'Rejeitado', color: '#b00020', bg: '#fff2f2', border: '#f5c6c6' },
|
||
PAUSED: { label: 'Pausado', color: '#6b4700', bg: '#fffbf0', border: '#f5e0a8' },
|
||
DISABLED: { label: 'Desabilitado', color: '#555', bg: '#f5f5f5', border: '#ddd' },
|
||
};
|
||
|
||
const DRAFT_STATUS = { label: 'Rascunho', color: '#555', bg: '#f0f2f5', border: '#dde1e7' };
|
||
|
||
function getMetaStatus(t) {
|
||
return t.meta_status ? (META_STATUS_MAP[t.meta_status] || DRAFT_STATUS) : DRAFT_STATUS;
|
||
}
|
||
|
||
const CATEGORIES = [
|
||
{ value: 'UTILITY', label: 'Utilidade' },
|
||
{ value: 'MARKETING', label: 'Marketing' },
|
||
{ value: 'AUTHENTICATION', label: 'Autenticação' },
|
||
];
|
||
|
||
const LANGUAGES = [
|
||
{ value: 'pt_BR', label: 'Português (Brasil)' },
|
||
{ value: 'en_US', label: 'English (US)' },
|
||
{ value: 'es', label: 'Español' },
|
||
];
|
||
|
||
const BUTTON_TYPES = [
|
||
{ value: 'QUICK_REPLY', label: 'Resposta rápida' },
|
||
{ value: 'URL', label: 'Abrir URL' },
|
||
{ value: 'PHONE_NUMBER', label: 'Ligar' },
|
||
];
|
||
|
||
const EMPTY_FORM = {
|
||
name: '', language: 'pt_BR', category: 'UTILITY', areaId: '',
|
||
headerType: '', headerText: '', content: '',
|
||
bodyVariables: [], footerText: '', buttons: [],
|
||
};
|
||
|
||
// ── Helpers ─────────────────────────────────────────────────────────────────
|
||
|
||
function toMetaName(name) {
|
||
return String(name || '')
|
||
.normalize('NFD').replace(/[̀-ͯ]/g, '')
|
||
.toLowerCase()
|
||
.replace(/[^a-z0-9]+/g, '_')
|
||
.replace(/^_+|_+$/g, '')
|
||
.substring(0, 60) || '';
|
||
}
|
||
|
||
function syncBodyVars(content, prevVars) {
|
||
const matches = [...content.matchAll(/\{\{(\d+)\}\}/g)];
|
||
const indices = [...new Set(matches.map(m => Number(m[1])))].sort((a, b) => a - b);
|
||
return indices.map(i => prevVars.find(v => v.index === i) || { index: i, label: '', example: '' });
|
||
}
|
||
|
||
function renderPreviewBody(content, bodyVariables) {
|
||
return content.replace(/\{\{(\d+)\}\}/g, (_, n) => {
|
||
const v = bodyVariables.find(v => v.index === Number(n));
|
||
return v?.example || (v?.label ? `[${v.label}]` : `{{${n}}}`);
|
||
});
|
||
}
|
||
|
||
// ── Styles ────────────────────────────────────────────────────────────────
|
||
|
||
const fieldStyle = {
|
||
width: '100%', border: '1px solid var(--color-border)', borderRadius: 8,
|
||
padding: '0.6rem 0.75rem', fontSize: '0.9rem', fontWeight: 600,
|
||
color: 'var(--color-text)', background: '#fff', boxSizing: 'border-box',
|
||
};
|
||
|
||
const labelStyle = {
|
||
display: 'block', fontSize: '0.78rem', fontWeight: 800,
|
||
color: 'var(--color-text-soft)', textTransform: 'uppercase',
|
||
letterSpacing: '0.04em', marginBottom: '0.3rem',
|
||
};
|
||
|
||
function pill(bg, color) {
|
||
return { fontSize: '0.7rem', fontWeight: 700, background: bg, color, borderRadius: 6, padding: '0.15rem 0.45rem' };
|
||
}
|
||
|
||
function actionBtn(bg, color, disabled = false) {
|
||
return {
|
||
border: 'none', borderRadius: 6, padding: '0.4rem 0.75rem',
|
||
background: disabled ? '#f0f2f5' : bg, color: disabled ? '#aaa' : color,
|
||
fontWeight: 800, fontSize: '0.8rem', cursor: disabled ? 'not-allowed' : 'pointer',
|
||
};
|
||
}
|
||
|
||
// ── WhatsApp Preview ──────────────────────────────────────────────────────
|
||
|
||
function WhatsAppPreview({ form }) {
|
||
const { headerType, headerText, content, bodyVariables, footerText, buttons } = form;
|
||
const bodyText = renderPreviewBody(content || '', bodyVariables);
|
||
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.65rem' }}>
|
||
<span style={{ ...labelStyle, marginBottom: 0 }}>Pré-visualização</span>
|
||
<div style={{
|
||
width: 272, background: '#ece5dd', borderRadius: 15,
|
||
border: '7px solid #1a1a1a', padding: '1rem 0.65rem',
|
||
boxShadow: '0 6px 24px rgba(0,0,0,0.18)', minHeight: 160,
|
||
}}>
|
||
<div style={{ height: 6, background: '#1a1a1a', borderRadius: 3, marginBottom: '0.65rem', opacity: 0.12 }} />
|
||
<div style={{
|
||
background: '#fff', borderRadius: '4px 14px 14px 14px', padding: '0.5rem 0.6rem',
|
||
maxWidth: '88%', boxShadow: '0 1px 3px rgba(0,0,0,0.1)', position: 'relative',
|
||
}}>
|
||
<div style={{
|
||
position: 'absolute', top: 0, left: -7, width: 0, height: 0,
|
||
borderTop: '7px solid #fff', borderLeft: '7px solid transparent',
|
||
}} />
|
||
|
||
{headerType === 'TEXT' && headerText && (
|
||
<p style={{ margin: '0 0 0.3rem', fontWeight: 800, fontSize: '0.82rem', color: '#111' }}>
|
||
{headerText}
|
||
</p>
|
||
)}
|
||
|
||
{headerType === 'IMAGE' && (
|
||
<div style={{
|
||
height: 80, borderRadius: 6, background: '#d0e8ff',
|
||
display: 'grid', placeItems: 'center', marginBottom: '0.35rem',
|
||
color: '#5588bb', fontWeight: 700, fontSize: '0.75rem',
|
||
}}>
|
||
📷 Imagem
|
||
</div>
|
||
)}
|
||
|
||
<p style={{
|
||
margin: 0, fontSize: '0.8rem',
|
||
color: bodyText ? '#111' : '#aaa',
|
||
fontStyle: bodyText ? 'normal' : 'italic',
|
||
lineHeight: 1.45, whiteSpace: 'pre-wrap', wordBreak: 'break-word',
|
||
}}>
|
||
{bodyText || 'Corpo do template…'}
|
||
</p>
|
||
|
||
{footerText && (
|
||
<p style={{ margin: '0.3rem 0 0', fontSize: '0.71rem', color: '#888', fontWeight: 500 }}>
|
||
{footerText}
|
||
</p>
|
||
)}
|
||
|
||
<p style={{ margin: '0.25rem 0 0', fontSize: '0.68rem', color: '#aaa', textAlign: 'right' }}>
|
||
12:00
|
||
</p>
|
||
</div>
|
||
|
||
{buttons.length > 0 && (
|
||
<div style={{ marginTop: '0.3rem', display: 'flex', flexDirection: 'column', gap: '0.2rem' }}>
|
||
{buttons.map((b, i) => (
|
||
<div key={i} style={{
|
||
background: '#fff', borderRadius: 6, padding: '0.35rem 0.55rem',
|
||
textAlign: 'center', fontSize: '0.77rem', fontWeight: 700,
|
||
color: '#00a5f4', boxShadow: '0 1px 2px rgba(0,0,0,0.08)',
|
||
}}>
|
||
{b.type === 'URL' ? '🔗 ' : b.type === 'PHONE_NUMBER' ? '📞 ' : '↩ '}
|
||
{b.text || '(sem texto)'}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Template Card ─────────────────────────────────────────────────────────
|
||
|
||
function TemplateCard({ t, onEdit, onSubmit, onDelete, submitting, deleting }) {
|
||
const ms = getMetaStatus(t);
|
||
const btns = Array.isArray(t.buttons) ? t.buttons : [];
|
||
const isSubmitting = submitting === t.id;
|
||
const isDeleting = deleting === t.id;
|
||
const canSubmit = t.meta_status !== 'PENDING';
|
||
|
||
return (
|
||
<div style={{
|
||
border: '1px solid var(--color-border)', borderRadius: 12,
|
||
padding: '1rem', background: '#fff',
|
||
display: 'flex', flexDirection: 'column', gap: '0.5rem',
|
||
}}>
|
||
<div style={{ display: 'flex', alignItems: 'flex-start', gap: '0.5rem', flexWrap: 'wrap' }}>
|
||
<strong style={{ flex: 1, fontSize: '0.95rem', color: 'var(--color-text)', lineHeight: 1.3 }}>
|
||
{t.name}
|
||
</strong>
|
||
<span style={{
|
||
fontSize: '0.72rem', fontWeight: 800, padding: '0.2rem 0.55rem', borderRadius: 15,
|
||
background: ms.bg, color: ms.color, border: `1px solid ${ms.border}`, whiteSpace: 'nowrap',
|
||
}}>
|
||
{ms.label}
|
||
</span>
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', gap: '0.35rem', flexWrap: 'wrap', alignItems: 'center' }}>
|
||
<span style={pill('#f0f2f5', '#444')}>{t.category || 'UTILITY'}</span>
|
||
<span style={pill('#f0f2f5', '#444')}>{t.language || 'pt_BR'}</span>
|
||
{t.area_nome && <span style={pill('#e8f0ff', '#2244aa')}>{t.area_nome}</span>}
|
||
</div>
|
||
|
||
<p style={{
|
||
margin: 0, fontSize: '0.83rem', color: 'var(--color-text-soft)', lineHeight: 1.4,
|
||
overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
|
||
}}>
|
||
{t.content || '(sem corpo)'}
|
||
</p>
|
||
|
||
{(t.header_type || t.footer_text || btns.length > 0) && (
|
||
<div style={{ display: 'flex', gap: '0.3rem', flexWrap: 'wrap' }}>
|
||
{t.header_type && <span style={pill('#f0f2f5', '#555')}>Header: {t.header_type}</span>}
|
||
{t.footer_text && <span style={pill('#f0f2f5', '#555')}>Footer</span>}
|
||
{btns.length > 0 && (
|
||
<span style={pill('#e8f4ff', '#0055bb')}>
|
||
{btns.length} botão{btns.length > 1 ? 'ões' : ''}
|
||
</span>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{t.meta_template_name && (
|
||
<p style={{ margin: 0, fontSize: '0.7rem', color: '#999', fontFamily: 'monospace' }}>
|
||
{t.meta_template_name}
|
||
</p>
|
||
)}
|
||
|
||
<div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap', marginTop: '0.2rem' }}>
|
||
<button type="button" onClick={() => onEdit(t)} style={actionBtn('#f0f2f5', '#333')}>
|
||
Editar
|
||
</button>
|
||
<button type="button" onClick={() => onSubmit(t.id)} disabled={!canSubmit || isSubmitting}
|
||
style={actionBtn(canSubmit ? '#e8f4ff' : '#f5f5f5', canSubmit ? '#0066cc' : '#aaa', !canSubmit || isSubmitting)}>
|
||
{isSubmitting ? 'Enviando…' : t.meta_status === 'APPROVED' ? 'Reenviar' : 'Enviar para Meta'}
|
||
</button>
|
||
<button type="button" onClick={() => onDelete(t.id)} disabled={isDeleting}
|
||
style={{ ...actionBtn('#fff2f2', '#b00020', isDeleting), marginLeft: 'auto' }}>
|
||
{isDeleting ? '…' : 'Excluir'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Template Form ─────────────────────────────────────────────────────────
|
||
|
||
function TemplateFormView({ form, setForm, editingId, onSave, saving, error, success, onBack, areas }) {
|
||
function handleContent(e) {
|
||
const content = e.target.value;
|
||
setForm(f => ({ ...f, content, bodyVariables: syncBodyVars(content, f.bodyVariables) }));
|
||
}
|
||
|
||
function insertVar() {
|
||
const nextIdx = form.bodyVariables.length > 0
|
||
? Math.max(...form.bodyVariables.map(v => v.index)) + 1
|
||
: 1;
|
||
const ta = document.getElementById('tpl-body');
|
||
const pos = ta ? (ta.selectionStart ?? form.content.length) : form.content.length;
|
||
const tag = `{{${nextIdx}}}`;
|
||
const newContent = form.content.slice(0, pos) + tag + form.content.slice(pos);
|
||
setForm(f => ({ ...f, content: newContent, bodyVariables: syncBodyVars(newContent, f.bodyVariables) }));
|
||
setTimeout(() => {
|
||
if (ta) { ta.focus(); ta.setSelectionRange(pos + tag.length, pos + tag.length); }
|
||
}, 0);
|
||
}
|
||
|
||
function setVar(index, field, value) {
|
||
setForm(f => ({
|
||
...f,
|
||
bodyVariables: f.bodyVariables.map(v => v.index === index ? { ...v, [field]: value } : v),
|
||
}));
|
||
}
|
||
|
||
function addButton(type) {
|
||
setForm(f => ({ ...f, buttons: [...f.buttons, { type, text: '', url: '', phone: '' }] }));
|
||
}
|
||
|
||
function updateBtn(i, field, value) {
|
||
setForm(f => ({ ...f, buttons: f.buttons.map((b, j) => j === i ? { ...b, [field]: value } : b) }));
|
||
}
|
||
|
||
function removeBtn(i) {
|
||
setForm(f => ({ ...f, buttons: f.buttons.filter((_, j) => j !== i) }));
|
||
}
|
||
|
||
const metaNamePreview = toMetaName(form.name);
|
||
|
||
return (
|
||
<div style={{ display: 'grid', gap: '1.1rem', padding: '1.75rem 2rem' }}>
|
||
{/* Header */}
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<strong style={{ fontSize: '1.15rem', color: 'var(--color-text)' }}>
|
||
{editingId ? 'Editar template' : 'Novo template'}
|
||
</strong>
|
||
<button type="button" onClick={onBack} aria-label="Fechar" style={{
|
||
border: 'none', background: 'rgba(0,0,0,0.06)', cursor: 'pointer',
|
||
width: 34, height: 34, borderRadius: '50%', display: 'grid', placeItems: 'center',
|
||
fontSize: '1.1rem', color: 'var(--color-text-soft)', lineHeight: 1,
|
||
}}>
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
{/* Two-column */}
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 290px', gap: '1.5rem', alignItems: 'start' }}>
|
||
|
||
{/* ── Form column ── */}
|
||
<div style={{ display: 'grid', gap: '0.9rem' }}>
|
||
|
||
{/* Nome */}
|
||
<div>
|
||
<label style={labelStyle} htmlFor="tpl-name">Nome do template *</label>
|
||
<input id="tpl-name" type="text" value={form.name}
|
||
onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
|
||
placeholder="ex: Boas Vindas Suporte" style={fieldStyle} />
|
||
{metaNamePreview && (
|
||
<p style={{ margin: '0.2rem 0 0', fontSize: '0.74rem', color: '#888' }}>
|
||
Nome Meta:{' '}
|
||
<code style={{ fontFamily: 'monospace', background: '#f0f2f5', padding: '0.1rem 0.3rem', borderRadius: 4 }}>
|
||
{metaNamePreview}
|
||
</code>
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
{/* Categoria / Idioma / Área */}
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '0.6rem' }}>
|
||
<div>
|
||
<label style={labelStyle}>Categoria</label>
|
||
<select value={form.category} onChange={e => setForm(f => ({ ...f, category: e.target.value }))} style={fieldStyle}>
|
||
{CATEGORIES.map(c => <option key={c.value} value={c.value}>{c.label}</option>)}
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label style={labelStyle}>Idioma</label>
|
||
<select value={form.language} onChange={e => setForm(f => ({ ...f, language: e.target.value }))} style={fieldStyle}>
|
||
{LANGUAGES.map(l => <option key={l.value} value={l.value}>{l.label}</option>)}
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label style={labelStyle}>Área</label>
|
||
<select value={form.areaId} onChange={e => setForm(f => ({ ...f, areaId: e.target.value }))} style={fieldStyle}>
|
||
<option value="">Todas</option>
|
||
{areas.map(a => <option key={a.id} value={String(a.id)}>{a.nome}</option>)}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Header */}
|
||
<div style={{ border: '1px solid var(--color-border)', borderRadius: 9, padding: '0.75rem', display: 'grid', gap: '0.5rem' }}>
|
||
<label style={{ ...labelStyle, marginBottom: 0 }}>Header (opcional)</label>
|
||
<div style={{ display: 'grid', gridTemplateColumns: '140px 1fr', gap: '0.5rem' }}>
|
||
<select value={form.headerType}
|
||
onChange={e => setForm(f => ({ ...f, headerType: e.target.value, headerText: '' }))}
|
||
style={fieldStyle}>
|
||
<option value="">Sem header</option>
|
||
<option value="TEXT">Texto</option>
|
||
<option value="IMAGE">Imagem (URL)</option>
|
||
</select>
|
||
{form.headerType && (
|
||
<input type="text" value={form.headerText}
|
||
onChange={e => setForm(f => ({ ...f, headerText: e.target.value }))}
|
||
placeholder={form.headerType === 'TEXT' ? 'Texto do cabeçalho' : 'URL da imagem'}
|
||
style={fieldStyle} />
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Corpo */}
|
||
<div>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.3rem' }}>
|
||
<label style={{ ...labelStyle, marginBottom: 0 }} htmlFor="tpl-body">Corpo *</label>
|
||
<button type="button" onClick={insertVar} style={{
|
||
border: '1px solid var(--color-border)', borderRadius: 6, padding: '0.2rem 0.6rem',
|
||
background: '#fff', color: 'var(--color-text-soft)', fontWeight: 800, fontSize: '0.75rem', cursor: 'pointer',
|
||
}}>
|
||
+ Variável
|
||
</button>
|
||
</div>
|
||
<textarea id="tpl-body" value={form.content} onChange={handleContent} rows={5}
|
||
placeholder={'Olá {{1}}, tudo bem?\n\nEntramos em contato referente ao seu pedido {{2}}.'}
|
||
style={{ ...fieldStyle, resize: 'vertical', fontFamily: 'inherit', lineHeight: 1.5 }} />
|
||
<p style={{ margin: '0.2rem 0 0', fontSize: '0.74rem', color: '#888' }}>
|
||
Use {'{{1}}'}, {'{{2}}'}, etc. As variáveis são substituídas no envio.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Variáveis detectadas */}
|
||
{form.bodyVariables.length > 0 && (
|
||
<div style={{ border: '1px solid #e0e4ec', borderRadius: 9, padding: '0.75rem', background: '#fafbfc' }}>
|
||
<p style={{ ...labelStyle, marginBottom: '0.5rem' }}>Variáveis do corpo</p>
|
||
<div style={{ display: 'grid', gap: '0.4rem' }}>
|
||
<div style={{ display: 'grid', gridTemplateColumns: '64px 1fr 1fr', gap: '0.4rem' }}>
|
||
<span style={{ fontSize: '0.73rem', fontWeight: 800, color: '#888' }}>Var</span>
|
||
<span style={{ fontSize: '0.73rem', fontWeight: 800, color: '#888' }}>Rótulo</span>
|
||
<span style={{ fontSize: '0.73rem', fontWeight: 800, color: '#888' }}>Exemplo (obrigatório)</span>
|
||
</div>
|
||
{form.bodyVariables.map(v => (
|
||
<div key={v.index} style={{ display: 'grid', gridTemplateColumns: '64px 1fr 1fr', gap: '0.4rem', alignItems: 'center' }}>
|
||
<span style={{
|
||
...fieldStyle, padding: '0.4rem 0.5rem', textAlign: 'center',
|
||
background: '#e8eaed', fontFamily: 'monospace', fontSize: '0.82rem',
|
||
}}>
|
||
{`{{${v.index}}}`}
|
||
</span>
|
||
<input type="text" placeholder="ex: nome" value={v.label}
|
||
onChange={e => setVar(v.index, 'label', e.target.value)}
|
||
style={{ ...fieldStyle, fontSize: '0.83rem', padding: '0.4rem 0.6rem' }} />
|
||
<input type="text" placeholder="ex: Rafael" value={v.example}
|
||
onChange={e => setVar(v.index, 'example', e.target.value)}
|
||
style={{ ...fieldStyle, fontSize: '0.83rem', padding: '0.4rem 0.6rem' }} />
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Footer */}
|
||
<div>
|
||
<label style={labelStyle} htmlFor="tpl-footer">Footer (opcional)</label>
|
||
<input id="tpl-footer" type="text" value={form.footerText}
|
||
onChange={e => setForm(f => ({ ...f, footerText: e.target.value }))}
|
||
placeholder="ex: Não responda a esta mensagem" style={fieldStyle} />
|
||
</div>
|
||
|
||
{/* Botões */}
|
||
<div style={{ border: '1px solid var(--color-border)', borderRadius: 9, padding: '0.75rem', display: 'grid', gap: '0.6rem' }}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||
<label style={{ ...labelStyle, marginBottom: 0 }}>Botões (opcional)</label>
|
||
<div style={{ display: 'flex', gap: '0.3rem', flexWrap: 'wrap' }}>
|
||
{BUTTON_TYPES.map(bt => (
|
||
<button key={bt.value} type="button" onClick={() => addButton(bt.value)}
|
||
disabled={form.buttons.length >= 10}
|
||
style={{
|
||
border: '1px solid #dde1e7', borderRadius: 6, padding: '0.2rem 0.55rem',
|
||
background: '#fff', color: '#333', fontWeight: 700, fontSize: '0.73rem', cursor: 'pointer',
|
||
}}>
|
||
+ {bt.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{form.buttons.length > 0 && (
|
||
<div style={{ display: 'grid', gap: '0.4rem' }}>
|
||
{form.buttons.map((b, i) => (
|
||
<div key={i} style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: b.type === 'QUICK_REPLY' ? '1fr auto' : '1fr 1fr auto',
|
||
gap: '0.4rem', alignItems: 'center',
|
||
}}>
|
||
<input type="text" placeholder="Texto do botão" value={b.text}
|
||
onChange={e => updateBtn(i, 'text', e.target.value)}
|
||
style={{ ...fieldStyle, fontSize: '0.83rem', padding: '0.4rem 0.6rem' }} />
|
||
{b.type === 'URL' && (
|
||
<input type="text" placeholder="URL (https://…)" value={b.url}
|
||
onChange={e => updateBtn(i, 'url', e.target.value)}
|
||
style={{ ...fieldStyle, fontSize: '0.83rem', padding: '0.4rem 0.6rem' }} />
|
||
)}
|
||
{b.type === 'PHONE_NUMBER' && (
|
||
<input type="text" placeholder="Número (55119…)" value={b.phone}
|
||
onChange={e => updateBtn(i, 'phone', e.target.value)}
|
||
style={{ ...fieldStyle, fontSize: '0.83rem', padding: '0.4rem 0.6rem' }} />
|
||
)}
|
||
<button type="button" onClick={() => removeBtn(i)} style={{
|
||
border: 'none', background: '#fff2f2', color: '#b00020',
|
||
borderRadius: 6, padding: '0.4rem 0.55rem', fontWeight: 800, cursor: 'pointer',
|
||
}}>✕</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Feedback */}
|
||
{error && <p style={{ margin: 0, color: '#b00020', fontWeight: 700, fontSize: '0.88rem' }}>{error}</p>}
|
||
{success && <p style={{ margin: 0, color: '#1a7a44', fontWeight: 700, fontSize: '0.88rem' }}>{success}</p>}
|
||
|
||
{/* Actions */}
|
||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.65rem' }}>
|
||
<button type="button" onClick={onBack} style={{
|
||
border: '1px solid var(--color-border)', borderRadius: 9, padding: '0.6rem 1rem',
|
||
background: '#fff', color: 'var(--color-text-soft)', fontWeight: 800, cursor: 'pointer',
|
||
}}>
|
||
Cancelar
|
||
</button>
|
||
<button type="button" onClick={onSave} disabled={saving} style={{
|
||
border: 'none', borderRadius: 9, padding: '0.6rem 1.25rem',
|
||
background: saving ? 'var(--color-border)' : 'var(--color-primary)',
|
||
color: '#fff', fontWeight: 800, cursor: saving ? 'not-allowed' : 'pointer',
|
||
}}>
|
||
{saving ? 'Salvando…' : editingId ? 'Salvar alterações' : 'Salvar rascunho'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── Preview column ── */}
|
||
<WhatsAppPreview form={form} />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Main Component ─────────────────────────────────────────────────────────
|
||
|
||
export function TemplateManagementPanel({ areas = [] }) {
|
||
const [templates, setTemplates] = useState([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [modalOpen, setModalOpen] = useState(false);
|
||
const [editingId, setEditingId] = useState(null);
|
||
const [form, setForm] = useState(EMPTY_FORM);
|
||
const [saving, setSaving] = useState(false);
|
||
const [submitting, setSubmitting] = useState(null);
|
||
const [syncing, setSyncing] = useState(false);
|
||
const [deleting, setDeleting] = useState(null);
|
||
const [error, setError] = useState('');
|
||
const [success, setSuccess] = useState('');
|
||
|
||
useEffect(() => { load(); }, []);
|
||
|
||
async function load() {
|
||
setLoading(true);
|
||
try {
|
||
const data = await listTemplates();
|
||
setTemplates(Array.isArray(data) ? data : []);
|
||
} catch {
|
||
setError('Erro ao carregar templates.');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
|
||
function openNew() {
|
||
setForm(EMPTY_FORM); setEditingId(null);
|
||
setError(''); setSuccess(''); setModalOpen(true);
|
||
}
|
||
|
||
function openEdit(t) {
|
||
setForm({
|
||
name: t.name || '',
|
||
language: t.language || 'pt_BR',
|
||
category: t.category || 'UTILITY',
|
||
areaId: t.area_id ? String(t.area_id) : '',
|
||
headerType: t.header_type || '',
|
||
headerText: t.header_text || '',
|
||
content: t.content || '',
|
||
bodyVariables: Array.isArray(t.body_variables) ? t.body_variables : [],
|
||
footerText: t.footer_text || '',
|
||
buttons: Array.isArray(t.buttons) ? t.buttons : [],
|
||
});
|
||
setEditingId(t.id); setError(''); setSuccess(''); setModalOpen(true);
|
||
}
|
||
|
||
async function handleSave() {
|
||
if (!form.name.trim() || !form.content.trim()) {
|
||
setError('Nome e Corpo são obrigatórios.');
|
||
return;
|
||
}
|
||
setSaving(true); setError(''); setSuccess('');
|
||
try {
|
||
const payload = {
|
||
name: form.name.trim(),
|
||
content: form.content,
|
||
language: form.language,
|
||
category: form.category,
|
||
areaId: form.areaId ? Number(form.areaId) : null,
|
||
headerType: form.headerType || null,
|
||
headerText: form.headerText.trim() || null,
|
||
footerText: form.footerText.trim() || null,
|
||
buttons: form.buttons.length ? form.buttons : null,
|
||
bodyVariables: form.bodyVariables.length ? form.bodyVariables : null,
|
||
};
|
||
if (editingId) await updateTemplate(editingId, payload);
|
||
else await saveTemplate(payload);
|
||
setSuccess('Template salvo! Clique em "Enviar para Meta" para submeter à aprovação.');
|
||
await load();
|
||
setTimeout(() => { setModalOpen(false); setSuccess(''); }, 2500);
|
||
} catch (err) {
|
||
setError(err?.message || 'Erro ao salvar.');
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
}
|
||
|
||
async function handleSubmit(id) {
|
||
setSubmitting(id); setError(''); setSuccess('');
|
||
try {
|
||
const result = await submitTemplateToMeta(id);
|
||
setSuccess(`Enviado para Meta! Status: ${result.status || 'PENDING'}. Clique "Sincronizar" para atualizar.`);
|
||
await load();
|
||
} catch (err) {
|
||
setError(err?.message || 'Erro ao enviar para Meta. Verifique o WABA ID em Admin → WhatsApp → Configurar.');
|
||
} finally {
|
||
setSubmitting(null);
|
||
}
|
||
}
|
||
|
||
async function handleSync() {
|
||
setSyncing(true); setError('');
|
||
try {
|
||
const result = await syncTemplatesFromMeta();
|
||
const parts = [];
|
||
if (result.imported) parts.push(`${result.imported} importado(s)`);
|
||
if (result.synced) parts.push(`${result.synced} atualizado(s)`);
|
||
setSuccess(`Sincronizado com a Meta! ${parts.length ? parts.join(', ') + '.' : 'Nenhuma alteração.'}`);
|
||
await load();
|
||
} catch (err) {
|
||
setError(err?.message || 'Erro ao sincronizar com a Meta.');
|
||
} finally {
|
||
setSyncing(false);
|
||
}
|
||
}
|
||
|
||
async function handleDelete(id) {
|
||
if (!window.confirm('Excluir este template? A remoção na Meta também será tentada.')) return;
|
||
setDeleting(id); setError('');
|
||
try {
|
||
await deleteTemplate(id);
|
||
await load();
|
||
} catch (err) {
|
||
setError(err?.message || 'Erro ao excluir.');
|
||
} finally {
|
||
setDeleting(null);
|
||
}
|
||
}
|
||
|
||
function goBack() { setModalOpen(false); setError(''); setSuccess(''); }
|
||
|
||
// ── List view (sempre renderizado) ──
|
||
return (
|
||
<>
|
||
{/* Modal do formulário */}
|
||
{modalOpen && (
|
||
<div
|
||
onClick={goBack}
|
||
style={{
|
||
position: 'fixed', inset: 0, zIndex: 50,
|
||
background: 'rgba(0, 49, 80, 0.28)',
|
||
display: 'grid', placeItems: 'center', padding: '1rem',
|
||
}}
|
||
>
|
||
<div
|
||
onClick={e => e.stopPropagation()}
|
||
style={{
|
||
background: '#fff', borderRadius: '20px',
|
||
width: '100%', maxWidth: '1040px',
|
||
maxHeight: '92vh', overflowY: 'auto',
|
||
boxShadow: '0 8px 40px rgba(0,0,0,0.18)',
|
||
}}
|
||
>
|
||
<TemplateFormView
|
||
form={form} setForm={setForm} editingId={editingId}
|
||
onSave={handleSave} saving={saving} error={error} success={success}
|
||
onBack={goBack} areas={areas}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div style={{ display: 'grid', gap: '1rem' }}>
|
||
{/* Toolbar */}
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', flexWrap: 'wrap', justifyContent: 'flex-end' }}>
|
||
<button type="button" onClick={handleSync} disabled={syncing} style={{
|
||
border: '1px solid var(--color-border)', borderRadius: 8, padding: '0.45rem 0.85rem',
|
||
background: '#fff', color: 'var(--color-text-soft)', fontWeight: 800, fontSize: '0.82rem',
|
||
cursor: syncing ? 'not-allowed' : 'pointer',
|
||
}}>
|
||
{syncing ? 'Sincronizando…' : '↻ Sincronizar'}
|
||
</button>
|
||
<button type="button" onClick={openNew} style={{
|
||
border: 'none', borderRadius: 8, padding: '0.45rem 0.85rem',
|
||
background: 'var(--color-primary)', color: '#fff', fontWeight: 800,
|
||
fontSize: '0.82rem', cursor: 'pointer',
|
||
}}>
|
||
+ Novo template
|
||
</button>
|
||
</div>
|
||
|
||
{/* Info banner */}
|
||
<div style={{ background: '#f0f4ff', borderRadius: 9, padding: '0.7rem 0.9rem', border: '1px solid #dde4f5' }}>
|
||
<p style={{ margin: 0, fontSize: '0.8rem', color: '#334', fontWeight: 600, lineHeight: 1.55 }}>
|
||
<strong>Templates HSM</strong> são aprovados pela Meta para iniciar conversas fora da janela de 24h.
|
||
Crie → Salve → <strong>Envie para Meta</strong> → aguarde aprovação →{' '}
|
||
<strong>Sincronize</strong> para atualizar o status. Templates <strong>Aprovados</strong> ficam
|
||
disponíveis em Atendimento Ativo.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Feedback */}
|
||
{error && <p style={{ margin: 0, color: '#b00020', fontWeight: 700, fontSize: '0.88rem' }}>{error}</p>}
|
||
{success && <p style={{ margin: 0, color: '#1a7a44', fontWeight: 700, fontSize: '0.88rem' }}>{success}</p>}
|
||
|
||
{/* List */}
|
||
{loading && (
|
||
<p style={{ margin: 0, color: 'var(--color-text-soft)', fontWeight: 700 }}>Carregando…</p>
|
||
)}
|
||
|
||
{!loading && templates.length === 0 && (
|
||
<div style={{ textAlign: 'center', padding: '2.5rem 1rem', color: 'var(--color-text-soft)' }}>
|
||
<p style={{ fontSize: '2rem', margin: '0 0 0.5rem' }}>📝</p>
|
||
<p style={{ margin: 0, fontWeight: 700, fontSize: '0.95rem' }}>Nenhum template cadastrado.</p>
|
||
<p style={{ margin: '0.3rem 0 0', fontSize: '0.85rem' }}>
|
||
Clique em <strong>"+ Novo template"</strong> para criar o primeiro.
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{!loading && templates.length > 0 && (
|
||
<div style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
|
||
gap: '0.75rem',
|
||
}}>
|
||
{templates.map(t => (
|
||
<TemplateCard key={t.id} t={t}
|
||
onEdit={openEdit} onSubmit={handleSubmit} onDelete={handleDelete}
|
||
submitting={submitting} deleting={deleting} />
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</>
|
||
);
|
||
}
|