consultoria-as/Autoparts-DB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pos): replace Meta Cloud API WhatsApp with Evolution API (self-hosted)

Browse Source 
Switch from Meta Business Cloud API to Evolution API for WhatsApp integration.
Evolution API is self-hosted, free, and connects via WhatsApp Web QR code scan.

- Add docker-compose for Evolution API deployment
- Rewrite whatsapp_service.py for Evolution API endpoints
- Add instance management (create, QR, status, logout) to blueprint
- Add QR code scanning UI with connection status indicator
- Add duplicate message prevention in webhook handler
- Update config.py with EVOLUTION_API_URL/KEY (remove old Meta vars)
- Add setup documentation

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
consultoria-as
2026-04-05 03:15:52 +00:00
parent 04340f2f29
commit 5f92fe83ba
7 changed files with 672 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
pos/templates/whatsapp.html
View File

@@ -423,6 +423,61 @@
color: var(--color-text-muted);
}
/* ─── Connection / QR section ────────────────────────────────────── */
.connect-section {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-4);
padding: var(--space-6);
text-align: center;
}
.connect-section__title {
font-family: var(--font-heading);
font-size: var(--text-h3, 1.25rem);
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
}
.connect-section__desc {
font-size: var(--text-body-sm);
color: var(--color-text-muted);
max-width: 400px;
line-height: 1.5;
}
.connect-section__qr {
border: 2px dashed var(--color-border);
border-radius: var(--radius-md, 8px);
padding: var(--space-4);
background: var(--color-bg-elevated);
min-width: 280px;
min-height: 280px;
display: flex;
align-items: center;
justify-content: center;
}
.connect-section__qr img {
max-width: 256px;
max-height: 256px;
border-radius: var(--radius-sm, 4px);
}
.connect-section__qr-placeholder {
color: var(--color-text-muted);
font-size: var(--text-body-sm);
}
.connect-section__actions {
display: flex;
gap: var(--space-2);
}
/* ─── Industrial theme cuts ──────────────────────────────────────── */
[data-theme="industrial"] .btn--primary {
@@ -463,11 +518,34 @@
<span class="status-dot" id="statusDot"></span>
<span id="statusText">Verificando...</span>
</div>
<button class="btn btn--sm btn--whatsapp" id="connectBtn" style="display:none">Conectar WhatsApp</button>
<button class="btn btn--sm" id="disconnectBtn" style="display:none">Desconectar</button>
</div>
</div>
<!-- Messenger -->
<div class="messenger" id="messenger">
<!-- Connection / QR section (shown when not connected) -->
<div class="connect-section" id="connectSection" style="display:none">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#25D366" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
</svg>
<div class="connect-section__title">Conectar WhatsApp</div>
<div class="connect-section__desc">
Escanea el codigo QR con tu telefono para vincular WhatsApp.<br>
Abre WhatsApp &gt; Dispositivos vinculados &gt; Vincular un dispositivo.
</div>
<div class="connect-section__qr">
<img id="qrImg" style="display:none" alt="QR Code" />
<span class="connect-section__qr-placeholder" id="qrPlaceholder">
Haz click en "Conectar WhatsApp" para generar el QR
</span>
</div>
<div class="connect-section__actions">
<button class="btn btn--sm" id="refreshQrBtn" style="display:none">Actualizar QR</button>
</div>
</div>
<!-- Messenger (shown when connected) -->
<div class="messenger" id="messengerArea" style="display:none">
<!-- Left: Conversation list -->
<div class="conv-panel">