"use client"; import { useEffect, useMemo, useState } from "react"; import { X } from "lucide-react"; import { registerPayment } from "@/app/actions/financial"; import { formatMoney } from "@/lib/utils"; import { filterAccountsByLiquidationMethod, normalizeLiquidationMethod } from "@/lib/liquidation-accounts"; interface PaymentModalProps { isOpen: boolean; onClose: () => void; orderId: string; maxAmount: number; onSuccess: () => void; /* Preenchimento inicial, quando o pagamento nasce de uma parcela do combinado na proposta. */ initial?: { amount?: number; method?: string; notes?: string } | null; } const paymentMethods = [ { value: "pix", label: "Pix" }, { value: "cash", label: "Dinheiro" }, { value: "credit_card", label: "Cartão de Crédito" }, { value: "debit_card", label: "Cartão de Débito" }, { value: "transfer", label: "Transferência" }, ]; export function PaymentModal({ isOpen, onClose, orderId, maxAmount, onSuccess, initial }: PaymentModalProps) { const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [amountInput, setAmountInput] = useState(""); const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(""); const [bankAccounts, setBankAccounts] = useState< { bank_account_id: string; name: string; active?: boolean | null; type?: string | null; bank_name?: string | null }[] >([]); const [banksLoading, setBanksLoading] = useState(false); const [banksError, setBanksError] = useState(""); const maxAllowedAmount = useMemo(() => Math.round((Number(maxAmount) + Number.EPSILON) * 100) / 100, [maxAmount]); const parsedAmount = useMemo(() => { if (!amountInput.trim()) return 0; const normalized = amountInput.replace(/\./g, "").replace(",", "."); const value = Number.parseFloat(normalized); return Number.isFinite(value) ? value : 0; }, [amountInput]); function handleAmountChange(rawValue: string) { const digits = rawValue.replace(/\D/g, ""); if (!digits) { setAmountInput(""); return; } const cents = Number.parseInt(digits, 10); const value = cents / 100; const formatted = value.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); setAmountInput(formatted); } function setQuickAmount(value: number) { const safeValue = Math.max(0, Math.min(maxAllowedAmount, Math.round((value + Number.EPSILON) * 100) / 100)); const formatted = safeValue.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2, }); setAmountInput(formatted); if (error) setError(""); } const activeAccounts = useMemo( () => bankAccounts.filter((account) => account.active !== false), [bankAccounts] ); const compatibleAccounts = useMemo( () => filterAccountsByLiquidationMethod(activeAccounts, normalizeLiquidationMethod(selectedPaymentMethod)), [activeAccounts, selectedPaymentMethod] ); const accountLabel = selectedPaymentMethod === "cash" ? "Caixa físico" : "Conta bancária"; useEffect(() => { if (!isOpen) return; let active = true; setBanksLoading(true); setBanksError(""); setSelectedPaymentMethod(initial?.method ?? ""); setAmountInput( initial?.amount && initial.amount > 0 ? initial.amount.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : "" ); fetch("/api/bank-accounts") .then(async (response) => { const payload = await response.json(); if (!response.ok) { throw new Error(payload?.error ?? "Falha ao carregar contas bancárias."); } return payload?.accounts ?? []; }) .then((accounts) => { if (active) setBankAccounts(accounts); }) .catch((fetchError) => { if (active) { setBanksError(fetchError instanceof Error ? fetchError.message : "Falha ao carregar contas bancárias."); } }) .finally(() => { if (active) setBanksLoading(false); }); return () => { active = false; }; }, [isOpen, initial]); if (!isOpen) return null; async function handleSubmit(formData: FormData) { setLoading(true); setError(""); const amount = parsedAmount; if (!Number.isFinite(amount) || amount <= 0) { setError("Informe um valor válido para o pagamento."); setLoading(false); return; } if (amount > maxAllowedAmount + 0.0001) { setError(`O valor deve ser menor ou igual a ${maxAllowedAmount.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`); setLoading(false); return; } formData.set("amount", amount.toFixed(2)); try { const result = await registerPayment(formData); if (result.error) { setError(result.error); } else { onClose(); onSuccess(); } } catch { setError("Erro inesperado ao registrar pagamento."); } finally { setLoading(false); } } return (

Registrar Pagamento

R$
{ handleAmountChange(event.target.value); if (error) setError(""); }} className="w-full rounded-xl border border-zinc-200 bg-zinc-50 py-2.5 pl-10 pr-28 focus:border-[var(--ks-color-primary)] focus:bg-white outline-none transition-all" placeholder="0,00" /> 0 ? parsedAmount.toFixed(2) : ""} />
{banksLoading ? ( Carregando contas... ) : null} {!banksLoading && compatibleAccounts.length === 0 ? ( {selectedPaymentMethod === "cash" ? "Nenhum caixa físico ativo cadastrado." : "Nenhuma conta bancária ativa cadastrada."} ) : null} {banksError ? ( {banksError} ) : null}
{ const now = new Date(); const local = new Date(now.getTime() - now.getTimezoneOffset() * 60000); return local.toISOString().slice(0, 16); })()} className="w-full px-4 py-2.5 rounded-xl border border-zinc-200 bg-zinc-50 focus:bg-white focus:border-[var(--ks-color-primary)] outline-none transition-all" />