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

121
app/views/admin/mensagem_templates/edit.html.erb
View File

@@ -6,27 +6,53 @@
<div class="space-y-6" id="editor-mensagem"
data-preview-url="<%= preview_template_admin_evento_path(@evento, canal: @canal) %>">
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div>
<h1 class="text-2xl font-bold text-white">Mensagem — <%= @evento.nome %></h1>
<p class="text-gray-400 text-sm mt-0.5">
Canal: <strong class="text-white"><%= @canal == 'email' ? 'E-mail' : 'WhatsApp' %></strong>
· Gatilho: <%= @evento.gatilho_label %>
</p>
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
<div class="min-w-0">
<h1 class="text-2xl font-bold text-white flex items-center gap-2">
<%= icone :editar, espaco: false %> Mensagem — <%= @evento.nome %>
</h1>
<div class="flex flex-wrap items-center gap-2 mt-2">
<% wpp = @canal != 'email' %>
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold
<%= wpp ? 'bg-green-500/15 border border-green-500/30 text-green-300'
: 'bg-blue-500/15 border border-blue-500/30 text-blue-300' %>">
<%= icone(wpp ? :telefone : :email, cor: nil, tamanho: 'w-3.5 h-3.5', espaco: false) %>
<%= wpp ? 'WhatsApp' : 'E-mail' %>
</span>
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs
bg-white/5 border border-white/10 text-gray-400">
<%= @evento.gatilho_label %>
</span>
</div>
</div>
<div class="flex items-center gap-2">
<%= link_to "Editar #{outro_canal == 'email' ? 'e-mail' : 'WhatsApp'}",
template_admin_evento_path(@evento, canal: outro_canal), data: { turbo: false },
class: 'px-4 py-2.5 rounded-xl text-sm bg-[#1a1a1a] text-gray-300 border border-white/10 hover:border-orange-500' %>
<%= link_to 'Voltar', admin_eventos_path, data: { turbo: false },
class: 'px-4 py-2.5 rounded-xl text-sm bg-[#1a1a1a] text-gray-300 border border-white/10 hover:border-orange-500' %>
<div class="flex items-center gap-2 flex-shrink-0">
<%= link_to template_admin_evento_path(@evento, canal: outro_canal), data: { turbo: false },
class: 'inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm border
border-white/10 text-gray-300 hover:border-white/20 hover:text-white
transition-colors whitespace-nowrap' do %>
<%= icone(outro_canal == 'email' ? :email : :telefone, cor: nil, tamanho: 'w-4 h-4', espaco: false) %>
Editar <%= outro_canal == 'email' ? 'e-mail' : 'WhatsApp' %>
<% end %>
<%= link_to admin_eventos_path, data: { turbo: false },
class: 'inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm border
border-white/10 text-gray-300 hover:border-white/20 hover:text-white
transition-colors whitespace-nowrap' do %>
<%= icone :voltar, cor: nil, tamanho: 'w-4 h-4', espaco: false %> Voltar
<% end %>
</div>
</div>
<%= render 'shared/flash' %>
<% if @template.errors.any? %>
<div class="bg-red-500/10 border border-red-500/30 rounded-xl px-4 py-3 text-red-300 text-sm">
<div class="p-4 bg-red-900/30 border border-red-500/40 rounded-xl">
<p class="text-red-400 text-sm font-medium mb-2">
<%= pluralize(@template.errors.count, 'erro', 'erros') %> encontrado<%= @template.errors.count > 1 ? 's' : '' %>:
</p>
<ul class="list-disc list-inside space-y-1">
<% @template.errors.full_messages.each do |msg| %><li><%= msg %></li><% end %>
<% @template.errors.full_messages.each do |msg| %>
<li class="text-red-300 text-sm"><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
@@ -40,11 +66,12 @@
<%# ── Paleta ──────────────────────────────────────────── %>
<div class="space-y-4">
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-4">
<p class="text-gray-400 text-xs font-medium uppercase tracking-wider mb-3">Blocos</p>
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Blocos</p>
<p class="text-xs text-gray-500 mb-3">Arraste para a mensagem — ou clique.</p>
<div id="paleta" class="space-y-2">
<% Notificacao::Blocos::CATALOGO.each do |tipo, meta| %>
<div class="cursor-grab select-none bg-[#141414] border border-white/10 rounded-xl px-3 py-2.5 hover:border-orange-500"
<div class="cursor-grab select-none bg-[#0a0a0a] border border-white/10 rounded-xl
px-3 py-2.5 hover:border-[#f97316] hover:bg-white/5 transition-colors"
data-tipo="<%= tipo %>" title="<%= meta[:dica] %>">
<span class="text-gray-500 mr-1">⠿</span>
<span class="text-sm text-white"><%= meta[:rotulo] %></span>
@@ -56,14 +83,17 @@
<%# ── Variáveis ─────────────────────────────────────── %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-4">
<p class="text-gray-400 text-xs font-medium uppercase tracking-wider mb-3">Variáveis</p>
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Variáveis</p>
<p class="text-xs text-gray-500 mb-3">
Clique num campo da mensagem e depois numa variável para inseri-la ali.
</p>
<div class="flex flex-wrap gap-1.5">
<% @variaveis.each do |nome, meta| %>
<button type="button" class="chip-variavel px-2 py-1 rounded-full bg-white/5 border border-white/10 text-xs text-orange-300 hover:border-orange-500"
data-variavel="<%= nome %>" title="<%= meta[:descricao] %> (ex.: <%= meta[:amostra] %>)">
<button type="button" title="<%= meta[:descricao] %> (ex.: <%= meta[:amostra] %>)"
class="chip-variavel px-2.5 py-1 rounded-full bg-[#f97316]/10 border border-[#f97316]/30
text-xs font-mono text-[#f97316] hover:bg-[#f97316]/20 hover:border-[#f97316]
transition-colors cursor-pointer"
data-variavel="<%= nome %>">
<%= "{{#{nome}}}" %>
</button>
<% end %>
@@ -75,34 +105,47 @@
<div class="space-y-4">
<% if @canal == 'email' %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-4">
<label class="block text-gray-400 text-sm mb-1" for="assunto">Assunto</label>
<%= text_field_tag :assunto, @template.assunto, id: 'assunto', class: 'campo-editavel w-full bg-[#141414] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
<label class="block text-sm font-medium text-gray-300 mb-1.5" for="assunto">Assunto</label>
<%= text_field_tag :assunto, @template.assunto, id: 'assunto',
class: 'campo-editavel 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 text-sm' %>
</div>
<% end %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-4">
<p class="text-gray-400 text-xs font-medium uppercase tracking-wider mb-3">Mensagem</p>
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Mensagem</p>
<div id="canvas" class="space-y-3 min-h-[8rem]"></div>
<p id="canvas-vazio" class="text-sm text-gray-500 text-center py-8">
Arraste um bloco para cá. Sem blocos, o evento continua usando o texto padrão do sistema.
</p>
<div id="canvas-vazio" class="text-center py-10 border border-dashed border-white/10 rounded-xl">
<div class="mb-2"><%= icone :vazio, tamanho: 'w-8 h-8', cor: 'text-gray-600', espaco: false %></div>
<p class="text-sm text-gray-500 max-w-xs mx-auto">
Arraste um bloco para cá. Sem blocos, o evento continua usando o texto padrão do sistema.
</p>
</div>
</div>
<div class="flex flex-wrap items-center gap-3">
<%= submit_tag 'Salvar mensagem', class: 'px-4 py-2.5 rounded-xl text-sm font-semibold bg-orange-500 text-black hover:bg-orange-400 cursor-pointer' %>
<label class="flex items-center gap-2 text-sm text-gray-300">
<%= check_box_tag :ativo, '1', @template.ativo, class: 'rounded border-white/20 bg-[#1a1a1a] text-orange-500' %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-4 flex flex-wrap items-center gap-3">
<%= submit_tag 'Salvar mensagem',
class: 'px-6 py-3 bg-[#f97316] hover:bg-orange-500 text-white font-semibold
rounded-xl transition-colors cursor-pointer min-h-[48px]' %>
<button type="button" id="btn-preview"
class="inline-flex items-center gap-2 px-5 py-3 rounded-xl text-sm border
border-white/10 text-gray-300 hover:border-white/20 hover:text-white
transition-colors cursor-pointer min-h-[48px]">
<%= icone :restaurar, cor: nil, tamanho: 'w-4 h-4', espaco: false %> Atualizar preview
</button>
<label class="flex items-center gap-2.5 text-sm text-gray-300 ml-auto cursor-pointer">
<%= check_box_tag :ativo, '1', @template.ativo,
class: 'w-4 h-4 rounded border-white/20 bg-[#0a0a0a] text-[#f97316]
focus:ring-[#f97316] focus:ring-offset-0 cursor-pointer' %>
Usar esta mensagem
</label>
<button type="button" id="btn-preview" class="px-4 py-2.5 rounded-xl text-sm bg-[#1a1a1a] text-gray-300 border border-white/10 hover:border-orange-500">
Atualizar preview
</button>
</div>
</div>
<%# ── Preview ─────────────────────────────────────────── %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-4 space-y-3">
<p class="text-gray-400 text-xs font-medium uppercase tracking-wider">Preview</p>
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Preview</p>
<p class="text-xs text-gray-500">
Com valores de exemplo, renderizado pelo mesmo código do envio.
</p>
@@ -157,12 +200,12 @@
if (especie === 'multilinha') {
return '<label class="block text-xs text-gray-500 mb-1" for="' + id + '">' + rotulo + '</label>' +
'<textarea id="' + id + '" rows="3" data-indice="' + indice + '" data-campo="' + chave + '"' +
' class="campo-editavel campo-bloco w-full bg-[#141414] border border-white/10 rounded-xl text-white text-sm px-3 py-2 focus:outline-none focus:border-orange-500">' +
' class="campo-editavel campo-bloco w-full bg-[#0a0a0a] border border-white/10 rounded-xl text-white text-sm px-3 py-2 focus:outline-none focus:border-[#f97316]">' +
escapar(valor) + '</textarea>';
}
return '<label class="block text-xs text-gray-500 mb-1" for="' + id + '">' + rotulo + '</label>' +
'<input id="' + id + '" type="text" value="' + escapar(valor) + '" data-indice="' + indice + '" data-campo="' + chave + '"' +
' class="campo-editavel campo-bloco w-full bg-[#141414] border border-white/10 rounded-xl text-white text-sm px-3 py-2 focus:outline-none focus:border-orange-500">';
' class="campo-editavel campo-bloco w-full bg-[#0a0a0a] border border-white/10 rounded-xl text-white text-sm px-3 py-2 focus:outline-none focus:border-[#f97316]">';
}
function listaHtml(indice, linhas) {
@@ -170,9 +213,9 @@
(linhas || []).forEach(function (linha, j) {
html += '<div class="flex gap-2 mb-2">' +
'<input type="text" value="' + escapar(linha.rotulo) + '" placeholder="Rótulo" data-indice="' + indice + '" data-linha="' + j + '" data-parte="rotulo"' +
' class="campo-editavel campo-linha flex-1 bg-[#141414] border border-white/10 rounded-xl text-white text-sm px-3 py-2 focus:outline-none focus:border-orange-500">' +
' class="campo-editavel campo-linha flex-1 bg-[#0a0a0a] border border-white/10 rounded-xl text-white text-sm px-3 py-2 focus:outline-none focus:border-[#f97316]">' +
'<input type="text" value="' + escapar(linha.valor) + '" placeholder="Valor" data-indice="' + indice + '" data-linha="' + j + '" data-parte="valor"' +
' class="campo-editavel campo-linha flex-1 bg-[#141414] border border-white/10 rounded-xl text-white text-sm px-3 py-2 focus:outline-none focus:border-orange-500">' +
' class="campo-editavel campo-linha flex-1 bg-[#0a0a0a] border border-white/10 rounded-xl text-white text-sm px-3 py-2 focus:outline-none focus:border-[#f97316]">' +
'<button type="button" class="btn-remove-linha px-2 text-red-400 hover:text-red-300" data-indice="' + indice + '" data-linha="' + j + '" title="Remover linha">✕</button>' +
'</div>';
});
@@ -187,7 +230,7 @@
blocos.forEach(function (bloco, i) {
var meta = CATALOGO[bloco.tipo] || { rotulo: bloco.tipo, campos: {} };
var card = document.createElement('div');
card.className = 'bg-[#141414] border border-white/10 rounded-xl p-3';
card.className = 'bg-[#0a0a0a] border border-white/10 rounded-xl p-3 hover:border-white/20 transition-colors';
card.dataset.indice = i;
var corpo = '<div class="flex items-center justify-between mb-2">' +