"use client"; import { useMemo, useState } from "react"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { ArrowLeft, ArrowRight, Check, Search } from "lucide-react"; import ImageUpload from "@/components/image-upload"; export type Empresa = { id: string; name: string }; export type PopupInicial = { id: string; title: string; message: string | null; image_url: string | null; image_url_mobile: string | null; image_side: string; background_color: string; text_color: string; cta_label: string | null; cta_url: string | null; cta_new_tab: boolean; require_ack: boolean; ack_label: string | null; frequency: string; audience: string; active: boolean; start_at: string | null; end_at: string | null; company_ids: string[]; }; const CORES_SUGERIDAS = ["#4F46E5", "#0F172A", "#DB2777", "#F97316", "#059669", "#0EA5E9", "#7C3AED", "#DC2626"]; /* O popup e um quadrado, e a imagem ocupa metade dele. Estes numeros sao os mesmos do CSS do admin (`.ktl-popup`), em dobro para telas retina — e sao ditos na tela porque a imagem nao e cortada. */ /** O que a caixa de ciencia diz quando o cadastro nao escreve nada. */ const CIENCIA_PADRAO = "Li e estou ciente deste aviso."; const LADO_DO_POPUP = 520; const LARGURA_DA_IMAGEM = LADO_DO_POPUP / 2; const ALTURA_DA_IMAGEM = LADO_DO_POPUP; /* No celular as duas metades viram andares, e a de cima fica deitada. Sao duas proporcoes diferentes, entao sao duas artes: nao existe imagem que preencha 1:2 em pe e 4:3 deitada ao mesmo tempo sem ser cortada. */ const LARGURA_NO_CELULAR = 400; const ALTURA_NO_CELULAR = 300; /** `datetime-local` só aceita "AAAA-MM-DDTHH:MM", sem fuso e sem segundos. */ function paraCampoDeData(valor: string | null) { if (!valor) return ""; const data = new Date(valor); if (Number.isNaN(data.getTime())) return ""; const desloque = new Date(data.getTime() - data.getTimezoneOffset() * 60000); return desloque.toISOString().slice(0, 16); } function deCampoDeData(valor: string) { const limpo = valor.trim(); if (!limpo) return null; const data = new Date(limpo); return Number.isNaN(data.getTime()) ? null : data.toISOString(); } /* Preto ou branco sobre a cor escolhida, pelo brilho. É a mesma conta que o admin faz para o rótulo do botão: sem ela, botão claro com letra clara. */ function contrasteSobre(hex: string) { const limpo = String(hex || "").replace("#", ""); const cheio = limpo.length === 3 ? limpo.split("").map((c) => c + c).join("") : limpo; if (cheio.length !== 6) return "#0F172A"; const r = parseInt(cheio.slice(0, 2), 16); const g = parseInt(cheio.slice(2, 4), 16); const b = parseInt(cheio.slice(4, 6), 16); return (r * 299 + g * 587 + b * 114) / 1000 > 160 ? "#0F172A" : "#FFFFFF"; } function corValida(valor: string) { return /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(valor); } const rotulo = "block text-sm font-medium text-slate-700"; const campo = "mt-1.5 h-11 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm text-slate-900 outline-none transition focus:border-slate-400"; export default function PopupFormClient({ mode, initial, empresas, }: { mode: "create" | "edit"; initial: PopupInicial | null; empresas: Empresa[]; }) { const router = useRouter(); const [title, setTitle] = useState(initial?.title ?? ""); const [message, setMessage] = useState(initial?.message ?? ""); const [imageUrl, setImageUrl] = useState(initial?.image_url ?? ""); const [imageUrlMobile, setImageUrlMobile] = useState(initial?.image_url_mobile ?? ""); const [imageSide, setImageSide] = useState(initial?.image_side === "right" ? "right" : "left"); const [backgroundColor, setBackgroundColor] = useState(initial?.background_color ?? "#4F46E5"); const [textColor, setTextColor] = useState(initial?.text_color ?? "#FFFFFF"); const [ctaLabel, setCtaLabel] = useState(initial?.cta_label ?? ""); const [ctaUrl, setCtaUrl] = useState(initial?.cta_url ?? ""); const [ctaNewTab, setCtaNewTab] = useState(initial?.cta_new_tab ?? true); const [requireAck, setRequireAck] = useState(initial?.require_ack ?? false); const [ackLabel, setAckLabel] = useState(initial?.ack_label ?? ""); const [frequency, setFrequency] = useState(initial?.frequency ?? "once"); const [audience, setAudience] = useState(initial?.audience ?? "all"); const [companyIds, setCompanyIds] = useState(initial?.company_ids ?? []); const [active, setActive] = useState(initial?.active ?? true); const [startAt, setStartAt] = useState(paraCampoDeData(initial?.start_at ?? null)); const [endAt, setEndAt] = useState(paraCampoDeData(initial?.end_at ?? null)); const [buscaEmpresa, setBuscaEmpresa] = useState(""); const [salvando, setSalvando] = useState(false); const [erro, setErro] = useState(""); const empresasFiltradas = useMemo(() => { const alvo = buscaEmpresa.trim().toLowerCase(); if (!alvo) return empresas; return empresas.filter((empresa) => empresa.name.toLowerCase().includes(alvo)); }, [empresas, buscaEmpresa]); const temBotao = Boolean(ctaLabel.trim() && ctaUrl.trim()); function alternarEmpresa(id: string) { setCompanyIds((antes) => (antes.includes(id) ? antes.filter((item) => item !== id) : [...antes, id])); } async function salvar() { setErro(""); if (!title.trim()) { setErro("Informe o título do popup."); return; } if (audience === "selected" && companyIds.length === 0) { setErro("Escolha pelo menos uma empresa, ou volte o público para todas."); return; } if (!corValida(backgroundColor) || !corValida(textColor)) { setErro("As cores precisam estar no formato #RRGGBB."); return; } if (ctaLabel.trim() && !ctaUrl.trim()) { setErro("O botão tem rótulo mas não tem link."); return; } const corpo = { ...(mode === "edit" && initial ? { id: initial.id } : {}), title: title.trim(), message: message.trim() || null, image_url: imageUrl.trim() || null, image_url_mobile: imageUrlMobile.trim() || null, image_side: imageSide, background_color: backgroundColor, text_color: textColor, cta_label: ctaLabel.trim() || null, cta_url: ctaUrl.trim() || null, cta_new_tab: ctaNewTab, require_ack: requireAck, ack_label: ackLabel.trim() || null, frequency, audience, company_ids: audience === "selected" ? companyIds : [], active, start_at: deCampoDeData(startAt), end_at: deCampoDeData(endAt), }; setSalvando(true); try { const resposta = await fetch("/api/system-popups", { method: mode === "edit" ? "PATCH" : "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(corpo), }); const retorno = (await resposta.json().catch(() => null)) as { error?: string } | null; if (!resposta.ok) throw new Error(retorno?.error || "Não foi possível salvar o popup."); router.push("/popups"); router.refresh(); } catch (falha) { setErro(falha instanceof Error ? falha.message : "Não foi possível salvar o popup."); } finally { setSalvando(false); } } const metadeDoTexto = (

{title || "Título do aviso"}

{message ?

{message}

: null} {/* A ordem do aviso travado: texto, atalho do boletim, ciencia e so entao o "Continuar". Mesma do admin, senao a previa aprova um desenho que nao e o que vai ao ar. */} {requireAck ? ( <> {temBotao ? ( {ctaLabel} ) : null} {ackLabel.trim() || CIENCIA_PADRAO} Continuar ) : temBotao ? ( {ctaLabel} ) : null}
); /* `object-contain` e a cor de fundo atrás: é exatamente o que o admin faz, então a prévia mostra a sobra de cor antes de a imagem ir para o ar. */ const metadeDaImagem = imageUrl ? (
{/* eslint-disable-next-line @next/next/no-img-element */}
) : (
{LARGURA_DA_IMAGEM} × {ALTURA_DA_IMAGEM} px
); return (
Voltar para popups

{mode === "edit" ? "Editar popup" : "Novo popup"}

O que você montar aqui é exatamente o que abre na tela de quem entra no sistema.

{/* ------------------------------------------------ o cadastro */}

Conteúdo