190 lines
8.3 KiB
HTML
190 lines
8.3 KiB
HTML
<div x-data="soporteWebhook()" x-init="init()" class="p-6 max-w-2xl">
|
|
<h1 class="text-xl font-bold text-slate-800 mb-1">Webhook de correo entrante</h1>
|
|
<p class="text-sm text-slate-500 mb-6">Configura la integración para recibir correos de soporte@u-s.app y convertirlos automáticamente en tickets.</p>
|
|
|
|
<div class="bg-white border border-slate-200 rounded-xl p-6 space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-700 mb-1">Proveedor</label>
|
|
<select x-model="cfg.provider" class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none">
|
|
<option value="sendgrid">SendGrid</option>
|
|
<option value="mailgun">Mailgun</option>
|
|
<option value="generic">Genérico</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-700 mb-1">Email destino</label>
|
|
<input x-model="cfg.email_destino" type="text" placeholder="soporte@u-s.app"
|
|
class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none">
|
|
<p class="text-xs text-slate-400 mt-1">Correo al que llegarán los mensajes. Ej: soporte@u-s.app</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-700 mb-1">API Key / Secreto</label>
|
|
<input x-model="cfg.api_key" type="text" placeholder="opcional para validación"
|
|
class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none">
|
|
<p class="text-xs text-slate-400 mt-1">Si el proveedor envía un token de verificación, pégalo aquí.</p>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<input x-model="cfg.responder_auto" type="checkbox" id="resp-auto"
|
|
class="rounded border-slate-300 text-[#8eb02f] focus:ring-[#8eb02f]">
|
|
<label for="resp-auto" class="text-sm text-slate-700">Responder automáticamente con acuse de recibo</label>
|
|
</div>
|
|
|
|
<div x-show="cfg.responder_auto">
|
|
<label class="block text-sm font-medium text-slate-700 mb-1">Mensaje de auto-respuesta</label>
|
|
<textarea x-model="cfg.mensaje_auto" rows="3" placeholder="Hemos recibido tu solicitud y te responderemos a la brevedad."
|
|
class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none"></textarea>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-700 mb-1">Auto-asignar a</label>
|
|
<select x-model="cfg.asignar_a" class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none">
|
|
<option value="">Sin asignar</option>
|
|
<template x-for="a in admins" :key="a.id">
|
|
<option :value="a.id" x-text="a.name"></option>
|
|
</template>
|
|
</select>
|
|
<p class="text-xs text-slate-400 mt-1">Los tickets creados por email se asignarán automáticamente a este admin.</p>
|
|
</div>
|
|
|
|
<!-- ─── SMTP salida ──────────────────────────────────────────── -->
|
|
<div class="border-t border-slate-100 pt-4 mt-4">
|
|
<p class="text-sm font-semibold text-slate-700 mb-3">SMTP salida (notificaciones y auto-respuesta)</p>
|
|
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div class="col-span-1">
|
|
<label class="block text-xs font-medium text-slate-600 mb-1">Host</label>
|
|
<input x-model="cfg.smtp_host" type="text" placeholder="smtp.example.com"
|
|
class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none">
|
|
</div>
|
|
<div class="col-span-1">
|
|
<label class="block text-xs font-medium text-slate-600 mb-1">Puerto</label>
|
|
<input x-model="cfg.smtp_port" type="number" placeholder="587"
|
|
class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-3 mt-2">
|
|
<div>
|
|
<label class="block text-xs font-medium text-slate-600 mb-1">Usuario</label>
|
|
<input x-model="cfg.smtp_username" type="text" placeholder="correo@example.com"
|
|
class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-slate-600 mb-1">Contraseña</label>
|
|
<input x-model="cfg.smtp_password" type="password" placeholder="••••••••"
|
|
class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-3 mt-2">
|
|
<div>
|
|
<label class="block text-xs font-medium text-slate-600 mb-1">Email remitente</label>
|
|
<input x-model="cfg.smtp_from_addr" type="text" placeholder="soporte@u-s.app"
|
|
class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-slate-600 mb-1">Nombre remitente</label>
|
|
<input x-model="cfg.smtp_from_name" type="text" placeholder="Soporte U-site"
|
|
class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-2">
|
|
<label class="block text-xs font-medium text-slate-600 mb-1">Encriptación</label>
|
|
<select x-model="cfg.smtp_encryption" class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none">
|
|
<option value="tls">TLS (puerto 465)</option>
|
|
<option value="starttls">STARTTLS (puerto 587)</option>
|
|
<option value="none">Sin encriptación</option>
|
|
</select>
|
|
</div>
|
|
|
|
<p class="text-xs text-slate-400 mt-2">Si se deja vacío, se usará la configuración SMTP general del sistema.</p>
|
|
</div>
|
|
|
|
<div class="pt-4">
|
|
<button @click="guardar()"
|
|
class="px-6 py-2 rounded-xl text-white text-sm font-medium transition-colors"
|
|
style="background:#8eb02f"
|
|
onmouseover="this.style.background='#6d8c24'" onmouseout="this.style.background='#8eb02f'">
|
|
Guardar configuración
|
|
</button>
|
|
</div>
|
|
|
|
<div x-show="webhookUrl" class="bg-slate-50 border border-slate-200 rounded-lg p-4 mt-4">
|
|
<p class="text-xs font-medium text-slate-600 mb-1">URL del webhook</p>
|
|
<p class="text-sm text-slate-800 font-mono break-all" x-text="webhookUrl"></p>
|
|
<p class="text-xs text-slate-400 mt-1">Configura esta URL en el proveedor de correo para enviar los emails entrantes.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function soporteWebhook() {
|
|
return {
|
|
cfg: {
|
|
id: 0,
|
|
nombre: 'Soporte',
|
|
provider: 'sendgrid',
|
|
email_destino: 'soporte@u-s.app',
|
|
api_key: '',
|
|
responder_auto: true,
|
|
mensaje_auto: '',
|
|
asignar_a: '',
|
|
smtp_host: '',
|
|
smtp_port: 587,
|
|
smtp_username: '',
|
|
smtp_password: '',
|
|
smtp_encryption: 'starttls',
|
|
smtp_from_addr: '',
|
|
smtp_from_name: '',
|
|
},
|
|
admins: [],
|
|
webhookUrl: '',
|
|
|
|
async init() {
|
|
try {
|
|
const r = await axios.get('/app/soporte/webhook/data');
|
|
if (r.data && r.data.data) {
|
|
this.cfg = { ...this.cfg, ...r.data.data };
|
|
this.cfg.asignar_a = r.data.data.asignar_a || '';
|
|
}
|
|
} catch {}
|
|
try {
|
|
const r = await axios.get('/app/tickets/admins');
|
|
this.admins = r.data || [];
|
|
} catch {}
|
|
this.webhookUrl = window.location.origin + '/webhooks/soporte/' + this.cfg.provider;
|
|
},
|
|
|
|
async guardar() {
|
|
const payload = {
|
|
id: this.cfg.id || 0,
|
|
nombre: this.cfg.nombre || 'Soporte',
|
|
provider: this.cfg.provider,
|
|
email_destino: this.cfg.email_destino,
|
|
api_key: this.cfg.api_key,
|
|
responder_auto: this.cfg.responder_auto,
|
|
mensaje_auto: this.cfg.mensaje_auto,
|
|
asignar_a: this.cfg.asignar_a ? parseInt(this.cfg.asignar_a) : null,
|
|
smtp_host: this.cfg.smtp_host || '',
|
|
smtp_port: parseInt(this.cfg.smtp_port) || 587,
|
|
smtp_username: this.cfg.smtp_username || '',
|
|
smtp_password: this.cfg.smtp_password || '',
|
|
smtp_encryption: this.cfg.smtp_encryption || 'starttls',
|
|
smtp_from_addr: this.cfg.smtp_from_addr || '',
|
|
smtp_from_name: this.cfg.smtp_from_name || '',
|
|
};
|
|
try {
|
|
await axios.post('/app/soporte/webhook', payload);
|
|
alert('Configuración guardada');
|
|
} catch (e) {
|
|
alert('Error al guardar: ' + (e.response?.data?.error || e.message));
|
|
}
|
|
},
|
|
};
|
|
}
|
|
</script>
|