371 lines
12 KiB
React
371 lines
12 KiB
React
|
import { useEffect, useState } from 'react';
|
|||
|
|
import {
|
|||
|
|
getWhatsappConfig,
|
|||
|
|
saveWhatsappConfig,
|
|||
|
|
validateWhatsappConfig,
|
|||
|
|
} from '../services/whatsappConfigService';
|
|||
|
|
|
|||
|
|
const fieldStyle = {
|
|||
|
|
width: '100%',
|
|||
|
|
border: '1px solid var(--color-border)',
|
|||
|
|
borderRadius: 12,
|
|||
|
|
padding: '0.7rem 0.85rem',
|
|||
|
|
background: '#fff',
|
|||
|
|
color: 'var(--color-text)',
|
|||
|
|
fontWeight: 600,
|
|||
|
|
fontSize: '0.92rem',
|
|||
|
|
boxSizing: 'border-box',
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const labelStyle = {
|
|||
|
|
display: 'block',
|
|||
|
|
fontSize: '0.8rem',
|
|||
|
|
fontWeight: 800,
|
|||
|
|
color: 'var(--color-text-soft)',
|
|||
|
|
marginBottom: '0.35rem',
|
|||
|
|
letterSpacing: '0.03em',
|
|||
|
|
textTransform: 'uppercase',
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export function WhatsappConfigModal({ onClose }) {
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
const [currentConfig, setCurrentConfig] = useState(null);
|
|||
|
|
const [saving, setSaving] = useState(false);
|
|||
|
|
const [validating, setValidating] = useState(false);
|
|||
|
|
const [validation, setValidation] = useState(null);
|
|||
|
|
const [saveSuccess, setSaveSuccess] = useState(false);
|
|||
|
|
const [error, setError] = useState('');
|
|||
|
|
|
|||
|
|
const [form, setForm] = useState({
|
|||
|
|
access_token: '',
|
|||
|
|
phone_number_id: '',
|
|||
|
|
api_version: 'v25.0',
|
|||
|
|
webhook_token: '',
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
getWhatsappConfig()
|
|||
|
|
.then((data) => {
|
|||
|
|
setCurrentConfig(data);
|
|||
|
|
setForm((f) => ({
|
|||
|
|
...f,
|
|||
|
|
phone_number_id: data.phone_number_id || '',
|
|||
|
|
api_version: data.api_version || 'v25.0',
|
|||
|
|
webhook_token: data.webhook_token || '',
|
|||
|
|
}));
|
|||
|
|
})
|
|||
|
|
.catch(() => setError('Não foi possível carregar a configuração atual.'))
|
|||
|
|
.finally(() => setLoading(false));
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
function handleChange(field, value) {
|
|||
|
|
setValidation(null);
|
|||
|
|
setSaveSuccess(false);
|
|||
|
|
setError('');
|
|||
|
|
setForm((f) => ({ ...f, [field]: value }));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleValidate() {
|
|||
|
|
if (!form.access_token || !form.phone_number_id) return;
|
|||
|
|
setValidating(true);
|
|||
|
|
setValidation(null);
|
|||
|
|
try {
|
|||
|
|
const result = await validateWhatsappConfig({
|
|||
|
|
access_token: form.access_token,
|
|||
|
|
phone_number_id: form.phone_number_id,
|
|||
|
|
api_version: form.api_version || 'v25.0',
|
|||
|
|
});
|
|||
|
|
setValidation(result);
|
|||
|
|
} catch {
|
|||
|
|
setValidation({ valid: false, error: 'Erro de conexão com a Meta API' });
|
|||
|
|
} finally {
|
|||
|
|
setValidating(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleSave() {
|
|||
|
|
setSaving(true);
|
|||
|
|
setSaveSuccess(false);
|
|||
|
|
setError('');
|
|||
|
|
try {
|
|||
|
|
await saveWhatsappConfig(form);
|
|||
|
|
setSaveSuccess(true);
|
|||
|
|
setTimeout(onClose, 1200);
|
|||
|
|
} catch {
|
|||
|
|
setError('Erro ao salvar. Verifique os campos e tente novamente.');
|
|||
|
|
} finally {
|
|||
|
|
setSaving(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const canValidate = !!(form.access_token && form.phone_number_id);
|
|||
|
|
const canSave = !!(form.access_token || form.phone_number_id) && !saving;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
role="dialog"
|
|||
|
|
aria-modal="true"
|
|||
|
|
aria-labelledby="wa-config-title"
|
|||
|
|
style={{
|
|||
|
|
position: 'fixed',
|
|||
|
|
inset: 0,
|
|||
|
|
background: 'rgba(0, 20, 32, 0.42)',
|
|||
|
|
display: 'grid',
|
|||
|
|
placeItems: 'center',
|
|||
|
|
padding: '1rem',
|
|||
|
|
zIndex: 50,
|
|||
|
|
}}
|
|||
|
|
onClick={onClose}
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
onClick={(e) => e.stopPropagation()}
|
|||
|
|
style={{
|
|||
|
|
width: 'min(540px, 100%)',
|
|||
|
|
borderRadius: 22,
|
|||
|
|
border: '1px solid var(--color-border)',
|
|||
|
|
background: '#fff',
|
|||
|
|
padding: '1.4rem',
|
|||
|
|
display: 'grid',
|
|||
|
|
gap: '1rem',
|
|||
|
|
boxShadow: 'var(--shadow-lg)',
|
|||
|
|
maxHeight: '90vh',
|
|||
|
|
overflowY: 'auto',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{/* Header */}
|
|||
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.85rem' }}>
|
|||
|
|
<div
|
|||
|
|
aria-hidden="true"
|
|||
|
|
style={{
|
|||
|
|
width: 46,
|
|||
|
|
height: 46,
|
|||
|
|
borderRadius: 14,
|
|||
|
|
display: 'grid',
|
|||
|
|
placeItems: 'center',
|
|||
|
|
background: '#20a45b',
|
|||
|
|
color: '#fff',
|
|||
|
|
fontWeight: 900,
|
|||
|
|
fontSize: '1rem',
|
|||
|
|
flexShrink: 0,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
WA
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<strong id="wa-config-title" style={{ display: 'block', fontSize: '1.05rem' }}>
|
|||
|
|
Configurar WhatsApp
|
|||
|
|
</strong>
|
|||
|
|
<span style={{ color: 'var(--color-text-soft)', fontWeight: 700, fontSize: '0.88rem' }}>
|
|||
|
|
Meta Cloud API
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
aria-label="Fechar"
|
|||
|
|
onClick={onClose}
|
|||
|
|
style={{
|
|||
|
|
marginLeft: 'auto',
|
|||
|
|
border: 'none',
|
|||
|
|
background: 'none',
|
|||
|
|
fontSize: '1.3rem',
|
|||
|
|
cursor: 'pointer',
|
|||
|
|
color: 'var(--color-text-soft)',
|
|||
|
|
lineHeight: 1,
|
|||
|
|
padding: '0.2rem 0.4rem',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
×
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Status atual */}
|
|||
|
|
{!loading && currentConfig && (
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
borderRadius: 12,
|
|||
|
|
padding: '0.7rem 0.9rem',
|
|||
|
|
background: currentConfig.is_configured ? '#f0faf4' : '#fff8f0',
|
|||
|
|
border: `1px solid ${currentConfig.is_configured ? '#b6e8c8' : '#f5d9a8'}`,
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
gap: '0.6rem',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<span style={{ fontSize: '1.1rem' }}>{currentConfig.is_configured ? '✅' : '⚠️'}</span>
|
|||
|
|
<div>
|
|||
|
|
<strong style={{ fontSize: '0.88rem', color: currentConfig.is_configured ? '#1a7a44' : '#a05a00' }}>
|
|||
|
|
{currentConfig.is_configured ? 'Integração configurada' : 'Configuração incompleta'}
|
|||
|
|
</strong>
|
|||
|
|
{currentConfig.is_configured && (
|
|||
|
|
<span style={{ display: 'block', fontSize: '0.8rem', color: 'var(--color-text-soft)', fontWeight: 600 }}>
|
|||
|
|
Token via {currentConfig.token_source === 'database' ? 'banco de dados' : 'variável de ambiente'}
|
|||
|
|
{currentConfig.phone_number_id ? ` · ID: ${currentConfig.phone_number_id}` : ''}
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
{!currentConfig.is_configured && (
|
|||
|
|
<span style={{ display: 'block', fontSize: '0.8rem', color: 'var(--color-text-soft)', fontWeight: 600 }}>
|
|||
|
|
Preencha o Token e o Phone Number ID abaixo
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{loading && (
|
|||
|
|
<p style={{ margin: 0, color: 'var(--color-text-soft)', fontWeight: 700, fontSize: '0.9rem' }}>
|
|||
|
|
Carregando configuração atual…
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Formulário */}
|
|||
|
|
<div style={{ display: 'grid', gap: '0.75rem' }}>
|
|||
|
|
<div>
|
|||
|
|
<label htmlFor="wa-token" style={labelStyle}>
|
|||
|
|
Access Token{currentConfig?.has_token ? ' (deixe vazio para manter o atual)' : ''}
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
id="wa-token"
|
|||
|
|
type="password"
|
|||
|
|
autoComplete="off"
|
|||
|
|
placeholder={currentConfig?.has_token ? '•••••••• (configurado)' : 'EAAxxxxxxx...'}
|
|||
|
|
value={form.access_token}
|
|||
|
|
onChange={(e) => handleChange('access_token', e.target.value)}
|
|||
|
|
style={fieldStyle}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label htmlFor="wa-phone-id" style={labelStyle}>
|
|||
|
|
Phone Number ID
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
id="wa-phone-id"
|
|||
|
|
type="text"
|
|||
|
|
placeholder="ex: 123456789012345"
|
|||
|
|
value={form.phone_number_id}
|
|||
|
|
onChange={(e) => handleChange('phone_number_id', e.target.value)}
|
|||
|
|
style={fieldStyle}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.65rem' }}>
|
|||
|
|
<div>
|
|||
|
|
<label htmlFor="wa-api-version" style={labelStyle}>
|
|||
|
|
Versão da API
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
id="wa-api-version"
|
|||
|
|
type="text"
|
|||
|
|
placeholder="v25.0"
|
|||
|
|
value={form.api_version}
|
|||
|
|
onChange={(e) => handleChange('api_version', e.target.value)}
|
|||
|
|
style={fieldStyle}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label htmlFor="wa-webhook-token" style={labelStyle}>
|
|||
|
|
Webhook Verify Token
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
id="wa-webhook-token"
|
|||
|
|
type="text"
|
|||
|
|
placeholder="token de verificação"
|
|||
|
|
value={form.webhook_token}
|
|||
|
|
onChange={(e) => handleChange('webhook_token', e.target.value)}
|
|||
|
|
style={fieldStyle}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Resultado da validação */}
|
|||
|
|
{validation && (
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
borderRadius: 12,
|
|||
|
|
padding: '0.7rem 0.9rem',
|
|||
|
|
background: validation.valid ? '#f0faf4' : '#fff2f2',
|
|||
|
|
border: `1px solid ${validation.valid ? '#b6e8c8' : '#f5c6c6'}`,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{validation.valid ? (
|
|||
|
|
<>
|
|||
|
|
<strong style={{ color: '#1a7a44', fontSize: '0.88rem' }}>
|
|||
|
|
✅ Credenciais válidas
|
|||
|
|
</strong>
|
|||
|
|
<span style={{ display: 'block', color: 'var(--color-text-soft)', fontSize: '0.82rem', fontWeight: 600, marginTop: '0.2rem' }}>
|
|||
|
|
{validation.verified_name && `Conta: ${validation.verified_name}`}
|
|||
|
|
{validation.phone_number && ` · ${validation.phone_number}`}
|
|||
|
|
{validation.quality_rating && ` · Qualidade: ${validation.quality_rating}`}
|
|||
|
|
</span>
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
<strong style={{ color: '#b00020', fontSize: '0.88rem' }}>
|
|||
|
|
❌ Credenciais inválidas
|
|||
|
|
</strong>
|
|||
|
|
<span style={{ display: 'block', color: 'var(--color-text-soft)', fontSize: '0.82rem', fontWeight: 600, marginTop: '0.2rem' }}>
|
|||
|
|
{validation.error || 'Verifique o Token e o Phone Number ID'}
|
|||
|
|
{validation.code ? ` (código ${validation.code})` : ''}
|
|||
|
|
</span>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Feedback de erro geral */}
|
|||
|
|
{error && (
|
|||
|
|
<p style={{ margin: 0, color: '#b00020', fontWeight: 700, fontSize: '0.88rem' }}>
|
|||
|
|
{error}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Feedback de sucesso */}
|
|||
|
|
{saveSuccess && (
|
|||
|
|
<p style={{ margin: 0, color: '#1a7a44', fontWeight: 700, fontSize: '0.88rem' }}>
|
|||
|
|
✅ Configuração salva com sucesso!
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Ações */}
|
|||
|
|
<div style={{ display: 'flex', gap: '0.65rem', justifyContent: 'flex-end', flexWrap: 'wrap' }}>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={handleValidate}
|
|||
|
|
disabled={!canValidate || validating}
|
|||
|
|
style={{
|
|||
|
|
border: '1px solid #20a45b44',
|
|||
|
|
borderRadius: 14,
|
|||
|
|
padding: '0.65rem 0.9rem',
|
|||
|
|
background: '#fff',
|
|||
|
|
color: canValidate ? '#20a45b' : 'var(--color-text-soft)',
|
|||
|
|
fontWeight: 800,
|
|||
|
|
cursor: canValidate && !validating ? 'pointer' : 'not-allowed',
|
|||
|
|
opacity: canValidate && !validating ? 1 : 0.6,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{validating ? 'Validando…' : 'Validar credenciais'}
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={handleSave}
|
|||
|
|
disabled={!canSave}
|
|||
|
|
style={{
|
|||
|
|
border: 'none',
|
|||
|
|
borderRadius: 14,
|
|||
|
|
padding: '0.65rem 1rem',
|
|||
|
|
background: canSave ? 'var(--color-primary)' : 'var(--color-border)',
|
|||
|
|
color: '#fff',
|
|||
|
|
fontWeight: 800,
|
|||
|
|
cursor: canSave ? 'pointer' : 'not-allowed',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{saving ? 'Salvando…' : 'Salvar'}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|