"use client"; import { useState } from "react"; import { toast } from "sonner"; import { Button } from "@/components/ui/button"; import { PreviaDaDefinicao } from "./PreviaDaDefinicao"; import { contarVariaveis, IDIOMAS_DA_DEFINICAO, idiomaInicialDaDefinicao, lerConteudo, LIMITE_BOTOES, LIMITE_CORPO, LIMITE_RODAPE, montarComponents, paraFormulario, type BotaoDaDefinicao, } from "@/lib/channels/template-conteudo"; import { cn } from "@/lib/utils"; import { LIMITES_DO_MODELO, problemasDoModelo, textoDoProblema, type CampoDoModelo, type ProblemaDoModelo, } from "@/lib/channels/limites-do-modelo"; import { useT } from "@/hooks/i18n/useT"; import { useLocaleDaOrgAtiva } from "@/hooks/auth/AuthProvider"; import { useTelefoneExemplo } from "@/hooks/contacts/useTelefoneExemplo"; /** * O FORMULÁRIO de uma definição aprovada — criar ou editar. Mora num componente * próprio porque DUAS telas o usam: as duas rotas de modelos do canal * intermediado e, desde a #3635, o canal oficial direto. Duplicá-lo faria a * primeira correção de limite/exemplo valer de um lado só. * * ─── O que o formulário NÃO valida ───────────────────────────────────────── * * O formato do nome, o tamanho do texto e a categoria são validados PELA * PLATAFORMA, e a recusa dela chega inteira ao operador. Repetir a regra aqui a * faria envelhecer separado da fonte. O que ele faz é AVISAR do que a revisão * exige — o exemplo de cada `{{n}}` e os limites de corpo/rodapé —, porque a * recusa chega horas depois e sem dizer qual era o problema. * * ─── Editar reusa o mesmo formulário ─────────────────────────────────────── * * Nome, idioma e categoria ficam TRAVADOS na edição: a plataforma não deixa * mudá-los depois de criado, e oferecer o campo seria prometer uma edição que * ela recusa. */ export interface ModeloEmEdicao { name: string; language: string; category: string | null; /** A definição crua que a plataforma devolveu — de onde o texto é preenchido. */ components: unknown[]; } /** O corpo que as duas rotas aceitam em `POST …/templates` com `acao`. */ export interface CorpoDoModelo { acao: "criar" | "editar"; name: string; language: string; category?: string; components: unknown[]; } export function FormularioDaDefinicao({ editando = null, salvando = false, rotaDeMidia = "/api/v1/channels/partner/templates/media", onEnviar, }: { /** `null` = criação. Preenchido = edição daquela variante. */ editando?: ModeloEmEdicao | null; salvando?: boolean; /** * Onde a imagem do cabeçalho é guardada. O arquivo vai para o NOSSO storage e * a rota devolve um link assinado — o mesmo caminho para qualquer canal, que é * por isso que a rota é parametrizável. */ rotaDeMidia?: string; onEnviar: (corpo: CorpoDoModelo) => void; }) { const t = useT(); const telefoneExemplo = useTelefoneExemplo(); // O texto aprovado vira o formulário: quem edita uma vírgula não redigita a // definição inteira. const inicial = editando ? paraFormulario(lerConteudo(editando.components)) : null; const [nome, setNome] = useState(editando?.name ?? ""); const localeDaOrg = useLocaleDaOrgAtiva(); const [idioma, setIdioma] = useState(editando?.language ?? idiomaInicialDaDefinicao(localeDaOrg)); const [categoria, setCategoria] = useState(editando?.category ?? "UTILITY"); const [corpo, setCorpo] = useState(inicial?.corpo ?? ""); const [rodape, setRodape] = useState(inicial?.rodape ?? ""); const [exemplos, setExemplos] = useState(inicial?.exemplos ?? []); const [cabecalho, setCabecalho] = useState(inicial?.cabecalho ?? ""); const [midiaUrl, setMidiaUrl] = useState(inicial?.midiaUrl ?? ""); const [botoes, setBotoes] = useState(inicial?.botoes ?? []); const [subindo, setSubindo] = useState(false); // Quantas amostras a revisão vai exigir. Recalculado enquanto se digita: o // operador vê o campo aparecer no instante em que escreve `{{1}}`, e não // descobre a exigência numa recusa que chega horas depois. const nVariaveis = contarVariaveis(corpo); /** * A RÉGUA, enquanto se digita (#3635). * * É a MESMA função que a rota usa antes de falar com a Meta: o que a tela * deixa passar é o que a plataforma recebe. Medir aqui com números próprios * faria a tela aprovar o que a rota recusa (ou o contrário) — o pior dos dois * mundos, porque o operador só descobre depois do envio. */ const problemas = problemasDoModelo({ corpo, cabecalhoTexto: cabecalho, rodape, botoes, exemplos, }); const problemaDe = (campo: CampoDoModelo, botao?: number): ProblemaDoModelo | undefined => problemas.find((p) => p.campo === campo && (botao === undefined || p.botao === botao)); /** * O contador de um campo — cinza enquanto cabe, VERMELHO quando estoura. * * Antes o `onChange` cortava o texto no limite: quem colava 1500 caracteres * via o campo parar no meio da palavra, sem saber por quê. Contar e AVISAR é * o que deixa corrigir; cortar em silêncio é o que fazia perder texto. */ const contador = (campo: CampoDoModelo, atual: number, limite: number) => { const estourou = atual > limite; return ( {atual}/{limite} ); }; /** A mensagem do campo culpado — diz o atual, o limite e o número quando há. */ const erroDoCampo = (campo: CampoDoModelo, problema: ProblemaDoModelo | undefined) => problema ? (

{textoDoProblema(problema, t)}

) : null; // Contadores e recusas calculados FORA do JSX: são nome de campo e número, // não texto de tela — e o guarda de i18n lê literal em JSX como prosa crua. const contadorDoCabecalho = contador( "cabecalhoTexto", cabecalho.length, LIMITES_DO_MODELO.cabecalhoTexto, ); const erroDoCabecalho = erroDoCampo("cabecalhoTexto", problemaDe("cabecalhoTexto")); const contadorDoCorpo = contador("corpo", corpo.length, LIMITE_CORPO); const erroDoCorpo = erroDoCampo("corpo", problemaDe("corpo")); const contadorDoRodape = contador("rodape", rodape.length, LIMITE_RODAPE); const erroDoRodape = erroDoCampo("rodape", problemaDe("rodape")); // Fora do JSX de propósito: a cerca de botão mudo (`controle-decorativo`) lê o // atributo até o primeiro `>`, e um `problemas.length > 0` inline a cortaria. const temProblema = problemas.length > 0; return (
{editando && (

{t("Editando")} {editando.name}{" "} — {t("nome, idioma e categoria não mudam depois de criado.")}

)}
setNome(e.target.value)} placeholder="nome_do_modelo" aria-label={t("Nome do modelo")} disabled={!!editando} className="h-9 min-w-0 flex-1 rounded-md border border-input bg-background px-2 text-sm disabled:opacity-60" /> {/* LISTA, e não campo livre. O contrato descreve o formato e não enumera os valores; digitar é onde o erro nasce — `esp`, `ES`, `es-AR` e `español` são todos recusados, e a recusa volta como "language not supported" horas depois. */}
{/* A CATEGORIA é obrigatória no contrato e não era oferecida: tudo saía como UTILITY. Mandar promoção como utility é reclassificado (ou recusado) pela revisão — e a tarifa da categoria errada é mais cara. O padrão continua UTILITY porque é o caso comum de atendimento, mas agora é escolha. */} {/* CABEÇALHO opcional: texto OU mídia, nunca os dois — a plataforma aceita um formato por definição, e mandar ambos é recusa. */}
{ setCabecalho(e.target.value); if (e.target.value) setMidiaUrl(""); }} placeholder={t("Cabeçalho de texto (opcional)")} aria-label={t("Cabeçalho de texto")} disabled={!!midiaUrl} className="h-9 min-w-0 flex-1 rounded-md border border-input bg-background px-2 text-sm disabled:opacity-50" /> {/* SUBIR, e não colar URL. Colar exigia que o operador já tivesse a imagem hospedada em algum lugar público — que é justamente o que ele não tem. O arquivo vai para o nosso storage e a rota devolve um link assinado, que é o que a plataforma baixa na revisão. */}
{contadorDoCabecalho} {erroDoCabecalho}