import { useEffect, useState } from "react"; import AppLayout from "@/Layouts/AppLayout"; import { Head, useForm, usePage } from "@inertiajs/react"; import { toast } from "sonner"; import { CheckCircle2, ChevronRight, FileText, KeyRound, Send, Server, Settings, } from "lucide-react"; import PageHeader from "@/Components/PageHeader"; import { Badge } from "@/Components/ui/badge"; import { Button } from "@/Components/ui/button"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/Components/ui/dialog"; import { Input } from "@/Components/ui/input"; import { Label } from "@/Components/ui/label"; import { Switch } from "@/Components/ui/switch"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/Components/ui/select"; /** * Configurações · Tokens: credenciais dos serviços que a APLICAÇÃO usa — o PDFShift, * que transforma o relatório aprovado em PDF, e o provedor de e-mail que entrega esse * PDF ao cliente. * * Não confundir com Integrações, que guarda credencial de CLIENTE (Google Ads, Meta, * GA4 de cada projeto). Aqui é o que vale pro sistema inteiro. * * Nenhum segredo chega inteiro nesta tela: o backend manda só se existe e os 4 últimos * caracteres. Por isso todo campo de senha/chave começa vazio, mesmo com valor salvo, e * salvar em branco não apaga nada. */ export default function Tokens({ pdf = {}, smtp = {}, resend = {}, from = {}, fallback = {} }) { const { flash } = usePage().props; const [open, setOpen] = useState(null); // Um efeito só, na página: o flash é da página inteira. Um por cartão faria o mesmo // aviso aparecer uma vez para cada cartão aberto. useEffect(() => { if (flash?.success) toast.success(flash.success); if (flash?.error) toast.error(flash.error); }, [flash?.success, flash?.error]); // Os dois podem estar ativos ao mesmo tempo agora: o Resend é sempre tentado // primeiro, o SMTP só entra se ele falhar. A ordem da lista abaixo (Resend antes do // SMTP) segue essa prioridade, e o subtítulo avisa o papel de cada um quando os // dois estão ligados. const bothActive = smtp.enabled && resend.enabled; const items = [ { key: "pdfshift", icon: FileText, title: "PDFShift", subtitle: "Gera o PDF de cada relatório aprovado", state: pdf.has_key ? { label: "Configurado", tone: "ok" } : { label: "Sem chave", tone: "warn" }, }, { key: "resend", icon: Send, title: "Resend", subtitle: bothActive ? "Ativo · prioridade de envio" : "Envio de e-mail por API", state: resend.enabled ? { label: "Ativo", tone: "ok" } : { label: "Desativado", tone: "off" }, }, { key: "smtp", icon: Server, title: "SMTP", subtitle: bothActive ? "Ativo · reserva, entra se o Resend falhar" : smtp.host || "Servidor de e-mail próprio", state: smtp.enabled ? { label: "Ativo", tone: "ok" } : { label: "Desativado", tone: "off" }, }, ]; return (

Chaves e credenciais dos serviços que o sistema usa. As credenciais de cada cliente (Google Ads, Meta, GA4) ficam em Configurações · Integrações. 🔌

{fallback.in_use && (

Nenhum provedor de e-mail ativo aqui. O envio está saindo pela configuração do servidor{fallback.address ? `, como ${fallback.address}` : ""}. Ative o SMTP ou o Resend abaixo para passar a controlar o envio por esta tela.

)} {bothActive && (

Resend e SMTP estão ativos. O Resend é tentado primeiro em todo envio; se ele falhar (chave inválida, domínio não verificado, API fora do ar), o SMTP entra automaticamente no lugar dele, sem precisar reenviar nada.

)}

{items.map((item) => ( ))}

!v && setOpen(null)} /> !v && setOpen(null)} /> !v && setOpen(null)} /> ); } function StateBadge({ state }) { return ( {state.tone === "ok" ? ( ) : ( )} {state.label} ); } /** O aviso de chave já salva, igual nos três cartões. */ function SavedHint({ has, masked, missingText }) { if (!has) { return

{missingText}

; } return (

Salva: {masked} · deixe em branco para manter

); } function PdfShiftDialog({ pdf, open, onOpenChange }) { const form = useForm({ pdfshift_api_key: "", remove: false }); function save(e) { e.preventDefault(); form.transform((data) => ({ ...data, _method: "put", remove: false })); form.post(route("configuracoes.tokens.pdfshift"), { preserveScroll: true, onSuccess: () => { form.reset(); onOpenChange(false); }, onError: (errors) => toast.error(Object.values(errors ?? {})[0] || "Não foi possível salvar a chave."), }); } function remove() { if (!confirm("Remover a chave do PDFShift? Sem ela, relatórios aprovados não geram PDF.")) return; form.transform(() => ({ _method: "put", remove: true })); form.post(route("configuracoes.tokens.pdfshift"), { preserveScroll: true, onSuccess: () => { form.reset(); onOpenChange(false); }, }); } return ( ); } /** * Campos de remetente e o botão de teste, iguais nos dois provedores de e-mail: o * remetente é um só (vale pro provedor que estiver ativo) e o teste também. */ function MailCommonFields({ form, onTest, testing, canTest }) { return ( <>

E-mail do remetente form.setData("from_address", e.target.value)} placeholder="relatorios@exent.com.br" /> {form.errors.from_address && (

{form.errors.from_address}

)}

Nome do remetente form.setData("from_name", e.target.value)} placeholder="Exent" />

O teste sai na hora, sem passar pela fila, e mostra aqui o erro exato do provedor caso ele recuse. Salve antes de testar.

); } /** O teste manda pro e-mail de quem está logado — quem configura é quem confere. */ function useMailTest() { const { auth } = usePage().props; const test = useForm({ email: auth?.user?.email ?? "" }); return { email: test.data.email, testing: test.processing, send: () => test.post(route("configuracoes.tokens.teste"), { preserveScroll: true, onError: (errors) => toast.error(Object.values(errors ?? {})[0] || "Não foi possível enviar o teste."), }), }; } function SmtpDialog({ smtp, from, open, onOpenChange }) { const form = useForm({ enabled: !!smtp.enabled, host: smtp.host ?? "", port: smtp.port ? String(smtp.port) : "587", scheme: smtp.scheme ?? "smtp", username: smtp.username ?? "", password: "", from_address: from.address ?? "", from_name: from.name ?? "", }); const { email, testing, send } = useMailTest(); function save(e) { e.preventDefault(); form.transform((data) => ({ ...data, _method: "put", port: data.port ? Number(data.port) : null })); form.post(route("configuracoes.tokens.smtp"), { preserveScroll: true, onSuccess: () => form.setData("password", ""), onError: (errors) => toast.error(Object.values(errors ?? {})[0] || "Não foi possível salvar o SMTP."), }); } return ( ); } function ResendDialog({ resend, from, open, onOpenChange }) { const form = useForm({ enabled: !!resend.enabled, api_key: "", from_address: from.address ?? "", from_name: from.name ?? "", }); const { email, testing, send } = useMailTest(); function save(e) { e.preventDefault(); form.transform((data) => ({ ...data, _method: "put" })); form.post(route("configuracoes.tokens.resend"), { preserveScroll: true, onSuccess: () => form.setData("api_key", ""), onError: (errors) => toast.error(Object.values(errors ?? {})[0] || "Não foi possível salvar o Resend."), }); } return ( ); }