Implantação da geração de mensagem de forma livre e mudança na engine de mensagem
This commit is contained in:
114
app/views/admin/whatsapp_sessoes/show.html.erb
Normal file
114
app/views/admin/whatsapp_sessoes/show.html.erb
Normal file
@@ -0,0 +1,114 @@
|
||||
<div class="max-w-3xl space-y-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">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>
|
||||
|
||||
<%# 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>
|
||||
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>
|
||||
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' %>
|
||||
(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">
|
||||
<% if @estado['conectado'] %>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
||||
<div>
|
||||
<p class="text-white font-bold">Conectado</p>
|
||||
<p class="text-sm text-gray-400">
|
||||
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 %>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 border-t border-white/5 pt-5 space-y-4">
|
||||
<%= 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' %>
|
||||
<%= 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' %>
|
||||
</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' %>
|
||||
<% 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>
|
||||
|
||||
<% 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.
|
||||
</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">
|
||||
<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">
|
||||
<%= @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>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Polling do estado enquanto não está conectado: o QR expira sozinho e a
|
||||
// página precisa buscar o novo, senão o operador lê um código já morto.
|
||||
(function () {
|
||||
var painel = document.getElementById('painel-whatsapp');
|
||||
if (!painel) return;
|
||||
var conectado = <%= @estado['conectado'] ? 'true' : 'false' %>;
|
||||
if (conectado) return;
|
||||
|
||||
var url = painel.dataset.estadoUrl;
|
||||
setInterval(function () {
|
||||
fetch(url, { headers: { 'Accept': 'application/json' } })
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (dados) {
|
||||
// Conectou: recarrega para mostrar o painel de conectado.
|
||||
if (dados.conectado) { window.location.reload(); return; }
|
||||
var img = document.getElementById('qr-whatsapp');
|
||||
if (dados.qr && img) { img.src = dados.qr; }
|
||||
else if (dados.qr && !img) { window.location.reload(); }
|
||||
})
|
||||
.catch(function () { /* ponte fora do ar: a próxima tentativa resolve */ });
|
||||
}, 8000);
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user