victor/Reem-Notas
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Atualização para que possa mandar mesagens do Zap para grupos

Browse Source
This commit is contained in:
victor
2026-08-25 00:41:26 -03:00
parent 7e093f3af8
commit 985e2e3b55
19 changed files with 971 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
app/views/admin/whatsapp_sessoes/show.html.erb
View File

@@ -1,86 +1,117 @@
<div class="max-w-3xl space-y-6">
<div class="max-w-3xl mx-auto space-y-6">
<div>
<h1 class="text-2xl font-bold text-white">WhatsApp — conexão</h1>
<h1 class="text-2xl font-bold text-white flex items-center gap-2">
<%= icone :telefone, espaco: false %> WhatsApp — conexão
</h1>
<p class="text-gray-400 text-sm mt-0.5">
Pareia o número da empresa com este servidor lendo um QR code, como no WhatsApp Web.
</p>
</div>
<%= render 'shared/flash' %>
<%# O aviso fica na TELA, não só no código: quem parear precisa saber o que
está aceitando. %>
<div class="bg-amber-500/10 border border-amber-500/30 rounded-2xl px-5 py-4 text-sm text-amber-200 space-y-1">
<p class="font-bold">⚠️ Este canal não é oficial.</p>
<p>
<div class="bg-amber-500/10 border border-amber-500/30 rounded-2xl p-6 text-sm text-amber-200 space-y-2">
<p class="font-bold flex items-center gap-2 text-amber-300">
<%= icone :alerta, cor: nil, tamanho: 'w-5 h-5', espaco: false %> Este canal não é oficial.
</p>
<p class="leading-relaxed">
A conexão por QR usa a porta do WhatsApp Web por engenharia reversa. É gratuita e ilimitada,
mas está <strong>fora dos Termos do WhatsApp</strong> — a Meta pode banir o número sem aviso.
Use um <strong>chip dedicado</strong>, nunca o número principal da operação.
</p>
<p>
<p class="leading-relaxed">
Disparo em rajada é o que mais causa banimento. O intervalo entre mensagens fica em
<%= link_to 'Configurações → Notificações', admin_configuracao_notificacao_path,
data: { turbo: false }, class: 'underline hover:text-white' %>
data: { turbo: false }, class: 'underline hover:text-white transition-colors' %>
(hoje: <strong><%= @config.intervalo_envio %>s</strong>).
</p>
</div>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6" data-estado-url="<%= status_admin_whatsapp_sessao_path %>" id="painel-whatsapp">
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-8"
data-estado-url="<%= status_admin_whatsapp_sessao_path %>" id="painel-whatsapp">
<% if @estado['conectado'] %>
<div class="flex items-center gap-3">
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<div class="flex items-center gap-4">
<%# Ponto pulsante: à distância, é o que diz "está no ar" sem ler o texto. %>
<span class="relative flex h-3 w-3 flex-shrink-0">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
</span>
<div>
<p class="text-white font-bold">Conectado</p>
<p class="text-sm text-gray-400">
<p class="text-white font-bold text-lg">Conectado</p>
<p class="text-sm text-gray-400 mt-0.5">
Número <span class="font-mono text-gray-300"><%= @estado['numero'] %></span>
<% if @config.whatsapp_conectado_em %> · desde <%= l @config.whatsapp_conectado_em, format: :short rescue @config.whatsapp_conectado_em %><% end %>
<% if @config.whatsapp_conectado_em %>
· desde <%= l @config.whatsapp_conectado_em, format: :short rescue @config.whatsapp_conectado_em %>
<% end %>
</p>
</div>
</div>
<div class="mt-6 border-t border-white/5 pt-5 space-y-4">
<div class="mt-6 border-t border-white/5 pt-6 space-y-6">
<%= form_with url: testar_admin_whatsapp_sessao_path, method: :post, data: { turbo: false },
class: 'flex flex-wrap items-end gap-3' do |f| %>
<div>
<%= f.label :numero, 'Enviar teste para', class: 'block text-gray-400 text-sm mb-1' %>
<div class="flex-1 min-w-[220px]">
<%= f.label :numero, 'Enviar teste para', class: 'block text-sm font-medium text-gray-300 mb-1.5' %>
<%= f.text_field :numero, placeholder: '(11) 92005-1157',
class: 'bg-[#141414] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
class: 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
placeholder-gray-600 focus:outline-none focus:border-[#f97316] focus:ring-1
focus:ring-[#f97316] transition-colors' %>
</div>
<%= f.submit 'Enviar teste',
class: 'px-4 py-2.5 rounded-xl text-sm font-semibold bg-orange-500 text-black hover:bg-orange-400 cursor-pointer' %>
class: 'px-6 py-3 bg-[#f97316] hover:bg-orange-500 text-white font-semibold
rounded-xl transition-colors cursor-pointer min-h-[48px]' %>
<% end %>
<%= button_to 'Desconectar', desconectar_admin_whatsapp_sessao_path, method: :delete,
form: { data: { turbo_confirm: 'Isso encerra a sessão e para TODOS os envios de WhatsApp até você ler o QR de novo. Confirmar?' } },
class: 'text-red-400 hover:text-red-300 text-sm' %>
<div class="border-t border-white/5 pt-5">
<%= button_to desconectar_admin_whatsapp_sessao_path, method: :delete,
form: { data: { turbo_confirm: 'Isso encerra a sessão e para TODOS os envios de WhatsApp até você ler o QR de novo. Confirmar?' } },
class: 'inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm border
border-red-500/30 text-red-400 hover:bg-red-900/20 hover:border-red-500/50
transition-colors cursor-pointer' do %>
<%= icone :sair, cor: nil, tamanho: 'w-4 h-4', espaco: false %> Desconectar
<% end %>
</div>
</div>
<% elsif @estado['qr'].present? %>
<div class="flex flex-col items-center gap-4 text-center">
<p class="text-white font-bold">Leia o QR code</p>
<p class="text-sm text-gray-400 max-w-md">
No celular do chip dedicado: WhatsApp → <strong>Aparelhos conectados</strong> →
<strong>Conectar um aparelho</strong> → aponte para o código abaixo.
<span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold
bg-amber-500/15 border border-amber-500/30 text-amber-300">
<span class="w-2 h-2 rounded-full bg-amber-400 animate-pulse"></span> Aguardando leitura
</span>
<p class="text-white font-bold text-lg">Leia o QR code</p>
<p class="text-sm text-gray-400 max-w-md leading-relaxed">
No celular do chip dedicado: WhatsApp → <strong class="text-gray-300">Aparelhos conectados</strong> →
<strong class="text-gray-300">Conectar um aparelho</strong> → aponte para o código abaixo.
</p>
<%# O QR expira em ~20s e a ponte gera outro — o polling abaixo troca a
imagem sozinho, senão o operador ficaria lendo um código morto. %>
<img src="<%= @estado['qr'] %>" alt="QR code do WhatsApp" width="320" height="320"
class="rounded-xl bg-white p-3" id="qr-whatsapp">
class="rounded-2xl bg-white p-3 shadow-lg" id="qr-whatsapp">
<p class="text-xs text-gray-500">O código se renova sozinho a cada poucos segundos.</p>
</div>
<% else %>
<div class="flex items-start gap-3">
<span class="w-3 h-3 rounded-full bg-red-500 mt-1.5"></span>
<div>
<p class="text-white font-bold">Desconectado</p>
<p class="text-sm text-gray-400 mt-1">
<div class="flex items-start gap-4">
<span class="w-3 h-3 rounded-full bg-red-500 mt-2 flex-shrink-0"></span>
<div class="min-w-0">
<p class="text-white font-bold text-lg">Desconectado</p>
<p class="text-sm text-gray-400 mt-1 leading-relaxed">
<%= @estado['erro'].presence || @estado['ultimo_erro'].presence ||
'A ponte ainda não gerou um QR code. Aguarde alguns segundos e recarregue.' %>
</p>
<% unless @cliente.configurado? %>
<p class="text-sm text-amber-300 mt-3">
Falta configurar a ponte: defina <code>WHATSAPP_TOKEN</code> no <code>.env</code>
(o mesmo valor do container <code>whatsapp</code>) e suba os containers.
</p>
<div class="mt-4 p-4 bg-amber-500/10 border border-amber-500/30 rounded-xl">
<p class="text-sm text-amber-200 leading-relaxed">
Falta configurar a ponte: defina
<code class="font-mono text-[#f97316]">WHATSAPP_TOKEN</code> no
<code class="font-mono">.env</code> (o mesmo valor do container
<code class="font-mono">whatsapp</code>) e suba os containers.
</p>
</div>
<% end %>
</div>
</div>