213 lines
8.3 KiB
HTML
213 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Aprobación de Plantillas WhatsApp</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
.status-pending { background-color: #fff3cd; }
|
|
.status-approved { background-color: #d1edff; }
|
|
.status-rejected { background-color: #f8d7da; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container mt-5">
|
|
<h1 class="mb-4">🔧 Aprobación de Plantillas WhatsApp</h1>
|
|
|
|
<div class="alert alert-info">
|
|
<h5>📋 Información Importante</h5>
|
|
<p><strong>Error actual:</strong> "#132001 Template name does not exist in the translation"</p>
|
|
<p><strong>Causa:</strong> Las plantillas están en estado "pending" en lugar de "approved"</p>
|
|
<p><strong>Solución:</strong> Aprobar las plantillas que ya están validadas en WhatsApp Business Manager</p>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>📊 Resumen de Plantillas</h5>
|
|
</div>
|
|
<div class="card-body" id="summary">
|
|
<p>Cargando...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>⚡ Acciones Rápidas</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<button class="btn btn-success w-100 mb-3" onclick="approveAllTemplates()">
|
|
✅ Aprobar Todas las Plantillas
|
|
</button>
|
|
<button class="btn btn-info w-100" onclick="refreshData()">
|
|
🔄 Actualizar Estado
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mt-4">
|
|
<div class="card-header">
|
|
<h5>📝 Lista de Plantillas</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="templates-list">
|
|
<p>Cargando plantillas...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<h5>🎯 Próximos Pasos</h5>
|
|
<ol>
|
|
<li><strong>Verificar en WhatsApp Business Manager:</strong> Asegúrate de que estas plantillas estén realmente aprobadas en tu cuenta de WhatsApp Business</li>
|
|
<li><strong>Aprobar plantillas:</strong> Usa el botón "Aprobar Todas" si las plantillas están validadas por Meta</li>
|
|
<li><strong>Probar envío:</strong> Después de aprobar, prueba enviar un mensaje usando las plantillas aprobadas</li>
|
|
<li><strong>Crear nuevas plantillas:</strong> Si necesitas plantillas específicas, créalas primero en WhatsApp Business Manager</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="alert alert-warning mt-4">
|
|
<h6>⚠️ Advertencia</h6>
|
|
<p>Solo aprueba plantillas que realmente estén aprobadas en tu WhatsApp Business Manager. Aprobar plantillas que no están validadas por Meta no solucionará el error.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// Cargar datos al inicio
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
refreshData();
|
|
});
|
|
|
|
function refreshData() {
|
|
fetch('/api/approve_templates.php', {
|
|
method: 'GET'
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
updateSummary(data.summary);
|
|
updateTemplatesList(data.templates);
|
|
} else {
|
|
alert('Error al cargar datos: ' + data.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('Error de conexión');
|
|
});
|
|
}
|
|
|
|
function updateSummary(summary) {
|
|
const summaryDiv = document.getElementById('summary');
|
|
summaryDiv.innerHTML = `
|
|
<div class="row text-center">
|
|
<div class="col-md-4">
|
|
<h4 class="text-primary">${summary.total}</h4>
|
|
<p>Total</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<h4 class="text-success">${summary.approved}</h4>
|
|
<p>Aprobadas</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<h4 class="text-warning">${summary.pending}</h4>
|
|
<p>Pendientes</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function updateTemplatesList(templates) {
|
|
const listDiv = document.getElementById('templates-list');
|
|
|
|
if (templates.length === 0) {
|
|
listDiv.innerHTML = '<p class="text-muted">No hay plantillas registradas</p>';
|
|
return;
|
|
}
|
|
|
|
let html = '<div class="table-responsive"><table class="table table-striped"><thead><tr><th>Nombre</th><th>Estado</th><th>Idioma</th><th>Categoría</th><th>Acción</th></tr></thead><tbody>';
|
|
|
|
templates.forEach(template => {
|
|
const statusClass = `status-${template.status}`;
|
|
const statusText = template.status === 'approved' ? '✅ Aprobada' :
|
|
template.status === 'pending' ? '⏳ Pendiente' :
|
|
'❌ Rechazada';
|
|
|
|
html += `
|
|
<tr class="${statusClass}">
|
|
<td><strong>${template.name}</strong></td>
|
|
<td>${statusText}</td>
|
|
<td>${template.language || 'N/A'}</td>
|
|
<td>${template.category || 'N/A'}</td>
|
|
<td>
|
|
${template.status === 'pending' ?
|
|
`<button class="btn btn-sm btn-success" onclick="approveTemplate('${template.name}')">
|
|
Aprobar
|
|
</button>` :
|
|
'<span class="text-muted">-</span>'
|
|
}
|
|
</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
html += '</tbody></table></div>';
|
|
listDiv.innerHTML = html;
|
|
}
|
|
|
|
function approveAllTemplates() {
|
|
if (!confirm('¿Estás seguro de que quieres aprobar todas las plantillas pendientes?')) {
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.append('action', 'approve_all');
|
|
|
|
fetch('/api/approve_templates.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
alert(data.message);
|
|
if (data.success) {
|
|
refreshData();
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('Error de conexión');
|
|
});
|
|
}
|
|
|
|
function approveTemplate(templateName) {
|
|
const formData = new FormData();
|
|
formData.append('action', 'approve_specific');
|
|
formData.append('template_name', templateName);
|
|
|
|
fetch('/api/approve_templates.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
alert(data.message);
|
|
if (data.success) {
|
|
refreshData();
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('Error de conexión');
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |