feat: área de soporte con webhook de correo y asignación de tickets

2026-07-28 23:39:03 -05:00
parent 772a4a5656
commit 28affb5a55
16 changed files with 957 additions and 34 deletions
@@ -0,0 +1,120 @@
+<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>
+
+    <div class="pt-2">
+      <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: '',
+    },
+    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,
+      };
+      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>