From f56d6891aa22152f84ef098f69a29db2942e284b Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Thu, 25 Jun 2026 11:24:23 -0500
Subject: [PATCH] feat(websms): add API integration documentation with code
 examples

Shows endpoint, auth, request/response formats and code tabs
for cURL, JavaScript, PHP and Python. API Key is auto-injected
from the page state so examples are ready to copy-paste.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 resources/views/websms_config.html | 138 +++++++++++++++++++++++++++++
 1 file changed, 138 insertions(+)

diff --git a/resources/views/websms_config.html b/resources/views/websms_config.html
index c8017bd..6359162 100644
--- a/resources/views/websms_config.html
+++ b/resources/views/websms_config.html
@@ -111,6 +111,144 @@
     <p x-show="copied" x-text="copied" class="text-green-600 text-xs mt-3"></p>
   </div>
 
+  <!-- Documentación de integración -->
+  <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6" x-data="{ tab: 'curl' }">
+    <div class="flex items-center justify-between mb-5">
+      <div>
+        <h2 class="text-lg font-bold text-slate-800">Documentación de integración</h2>
+        <p class="text-sm text-slate-500 mt-0.5">Cómo enviar SMS desde tu propio sistema</p>
+      </div>
+      <span class="text-xs px-2 py-1 bg-green-100 text-green-700 rounded-full font-bold">REST API</span>
+    </div>
+
+    <!-- Endpoint -->
+    <div class="mb-5">
+      <p class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Endpoint</p>
+      <div class="flex items-center gap-2 bg-slate-50 border border-slate-200 rounded-lg px-3 py-2">
+        <span class="text-xs font-bold bg-blue-600 text-white px-2 py-0.5 rounded font-mono">POST</span>
+        <code class="text-sm font-mono text-slate-700 flex-1">https://admin.u-site.app/api/sms/send</code>
+        <button type="button" @click="copy('https://admin.u-site.app/api/sms/send')" class="btn-icon text-slate-400 hover:text-slate-600" title="Copiar">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Auth -->
+    <div class="mb-5">
+      <p class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Autenticación</p>
+      <div class="bg-amber-50 border border-amber-200 rounded-lg p-3 text-sm text-amber-800">
+        Incluye tu API Key en el header <code class="bg-amber-100 px-1 rounded font-mono text-xs">Authorization: Bearer {API_KEY}</code>.<br>
+        Encuentra tu API Key en la sección <strong>API Key (envío externo)</strong> de esta página.
+      </div>
+    </div>
+
+    <!-- Request/Response -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5">
+      <div>
+        <p class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Body (JSON)</p>
+        <div class="bg-slate-900 rounded-lg p-4">
+          <pre class="text-green-400 text-xs font-mono leading-relaxed">{
+  "numero":  "573001234567",
+  "mensaje": "Hola, este es tu código: 9821"
+}</pre>
+        </div>
+        <div class="mt-2 space-y-1">
+          <div class="flex gap-2 text-xs"><code class="text-blue-600 font-mono font-bold w-16">numero</code><span class="text-slate-500">Teléfono en formato internacional sin <code class="bg-slate-100 px-1 rounded">+</code> (ej: <code class="bg-slate-100 px-1 rounded">573001234567</code>)</span></div>
+          <div class="flex gap-2 text-xs"><code class="text-blue-600 font-mono font-bold w-16">mensaje</code><span class="text-slate-500">Texto del SMS. Máx 160 caracteres para un crédito.</span></div>
+        </div>
+      </div>
+      <div>
+        <p class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Respuestas</p>
+        <div class="space-y-2">
+          <div>
+            <span class="text-xs font-bold text-green-700">200 — Enviado</span>
+            <div class="bg-slate-900 rounded-lg p-3 mt-1">
+              <pre class="text-green-400 text-xs font-mono">{ "ok": true, "id": "6a3d4f155..." }</pre>
+            </div>
+          </div>
+          <div>
+            <span class="text-xs font-bold text-red-600">401 — No autenticado</span>
+            <div class="bg-slate-900 rounded-lg p-3 mt-1">
+              <pre class="text-red-400 text-xs font-mono">{ "error": "token requerido" }</pre>
+            </div>
+          </div>
+          <div>
+            <span class="text-xs font-bold text-red-600">400 — Datos inválidos</span>
+            <div class="bg-slate-900 rounded-lg p-3 mt-1">
+              <pre class="text-red-400 text-xs font-mono">{ "error": "numero y mensaje son requeridos" }</pre>
+            </div>
+          </div>
+          <div>
+            <span class="text-xs font-bold text-red-600">500 — Error LabsMobile</span>
+            <div class="bg-slate-900 rounded-lg p-3 mt-1">
+              <pre class="text-red-400 text-xs font-mono">{ "error": "descripción del error" }</pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Code examples -->
+    <div>
+      <p class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Ejemplos de código</p>
+      <!-- Tabs -->
+      <div class="flex gap-1 mb-3 border-b border-slate-200">
+        <template x-for="t in [{id:'curl',label:'cURL'},{id:'js',label:'JavaScript'},{id:'php',label:'PHP'},{id:'python',label:'Python'}]" :key="t.id">
+          <button type="button" @click="tab=t.id"
+            :class="tab===t.id ? 'border-b-2 border-green-600 text-green-700 font-bold' : 'text-slate-500 hover:text-slate-700'"
+            class="px-3 py-1.5 text-xs transition-colors -mb-px"
+            x-text="t.label"></button>
+        </template>
+      </div>
+
+      <!-- cURL -->
+      <div x-show="tab==='curl'" class="relative group">
+        <div class="bg-slate-900 rounded-lg p-4">
+          <pre class="text-green-400 text-xs font-mono leading-relaxed whitespace-pre-wrap" x-text="`curl -X POST https://admin.u-site.app/api/sms/send \\\n  -H 'Authorization: Bearer ${secretKey || '{API_KEY}'}' \\\n  -H 'Content-Type: application/json' \\\n  -d '{\n    \"numero\": \"573001234567\",\n    \"mensaje\": \"Hola, este es tu código: 9821\"\n  }'`"></pre>
+        </div>
+        <button type="button" @click="copy(`curl -X POST https://admin.u-site.app/api/sms/send -H 'Authorization: Bearer ${secretKey}' -H 'Content-Type: application/json' -d '{\"numero\":\"573001234567\",\"mensaje\":\"Hola\"}'`)"
+          class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-slate-700 hover:bg-slate-600 text-slate-300 rounded px-2 py-1 text-xs">
+          Copiar
+        </button>
+      </div>
+
+      <!-- JavaScript -->
+      <div x-show="tab==='js'" class="relative group">
+        <div class="bg-slate-900 rounded-lg p-4">
+          <pre class="text-green-400 text-xs font-mono leading-relaxed whitespace-pre-wrap" x-text="`const response = await fetch('https://admin.u-site.app/api/sms/send', {\n  method: 'POST',\n  headers: {\n    'Authorization': 'Bearer ${secretKey || '{API_KEY}'}',\n    'Content-Type': 'application/json',\n  },\n  body: JSON.stringify({\n    numero: '573001234567',\n    mensaje: 'Hola, este es tu código: 9821',\n  }),\n});\n\nconst data = await response.json();\nconsole.log(data); // { ok: true, id: '6a3d...' }`"></pre>
+        </div>
+        <button type="button" @click="copy(`fetch('https://admin.u-site.app/api/sms/send',{method:'POST',headers:{'Authorization':'Bearer ${secretKey}','Content-Type':'application/json'},body:JSON.stringify({numero:'573001234567',mensaje:'Hola'})})`)"
+          class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-slate-700 hover:bg-slate-600 text-slate-300 rounded px-2 py-1 text-xs">
+          Copiar
+        </button>
+      </div>
+
+      <!-- PHP -->
+      <div x-show="tab==='php'" class="relative group">
+        <div class="bg-slate-900 rounded-lg p-4">
+          <pre class="text-green-400 text-xs font-mono leading-relaxed whitespace-pre-wrap" x-text="`<?php\n$ch = curl_init('https://admin.u-site.app/api/sms/send');\ncurl_setopt_array($ch, [\n  CURLOPT_RETURNTRANSFER => true,\n  CURLOPT_POST           => true,\n  CURLOPT_HTTPHEADER     => [\n    'Authorization: Bearer ${secretKey || '{API_KEY}'}',\n    'Content-Type: application/json',\n  ],\n  CURLOPT_POSTFIELDS => json_encode([\n    'numero'  => '573001234567',\n    'mensaje' => 'Hola, este es tu código: 9821',\n  ]),\n]);\n$response = json_decode(curl_exec($ch), true);\ncurl_close($ch);\n// $response['ok'] === true`"></pre>
+        </div>
+        <button type="button" @click="copy(`<?php $ch=curl_init('https://admin.u-site.app/api/sms/send');curl_setopt_array($ch,[CURLOPT_RETURNTRANSFER=>true,CURLOPT_POST=>true,CURLOPT_HTTPHEADER=>['Authorization: Bearer ${secretKey}','Content-Type: application/json'],CURLOPT_POSTFIELDS=>json_encode(['numero'=>'573001234567','mensaje'=>'Hola'])]);echo curl_exec($ch);`)"
+          class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-slate-700 hover:bg-slate-600 text-slate-300 rounded px-2 py-1 text-xs">
+          Copiar
+        </button>
+      </div>
+
+      <!-- Python -->
+      <div x-show="tab==='python'" class="relative group">
+        <div class="bg-slate-900 rounded-lg p-4">
+          <pre class="text-green-400 text-xs font-mono leading-relaxed whitespace-pre-wrap" x-text="`import requests\n\nresponse = requests.post(\n    'https://admin.u-site.app/api/sms/send',\n    headers={\n        'Authorization': 'Bearer ${secretKey || '{API_KEY}'}',\n        'Content-Type': 'application/json',\n    },\n    json={\n        'numero':  '573001234567',\n        'mensaje': 'Hola, este es tu código: 9821',\n    },\n)\n\ndata = response.json()\nprint(data)  # {'ok': True, 'id': '6a3d...'}`"></pre>
+        </div>
+        <button type="button" @click="copy(`import requests\nresponse=requests.post('https://admin.u-site.app/api/sms/send',headers={'Authorization':'Bearer ${secretKey}','Content-Type':'application/json'},json={'numero':'573001234567','mensaje':'Hola'})\nprint(response.json())`)"
+          class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-slate-700 hover:bg-slate-600 text-slate-300 rounded px-2 py-1 text-xs">
+          Copiar
+        </button>
+      </div>
+    </div>
+
+    <p x-show="copied" x-text="copied" class="text-green-600 text-xs mt-3"></p>
+  </div>
+
   <!-- Logs -->
   <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
     <h2 class="text-lg font-bold text-slate-800 mb-4">Últimos envíos</h2>