Calculadora de parcelas

1// Calculator.tsx — installment / financing calculator (Chapter 19)
2// Self-contained React + TypeScript component. Only dependency is React.
3// Styling uses neutral Tailwind utility classes (works in light and dark).
4//
5// This is the SAME component rendered live at eduardomendes.com.br/repo/calculadora.
6// The optional lead-capture form NEVER gates the calculation — the result is
7// always visible first (Chapter 19's rule: value before the ask).
8
9import { useMemo, useState, type FormEvent } from "react";
10
11/**
12 * Standard PRICE-table monthly installment.
13 *   P = principal, i = monthly rate (decimal), n = term in months
14 *   installment = P * i / (1 - (1 + i)^-n)     (for i > 0)
15 *   installment = P / n                        (for i == 0)
16 */
17export function monthlyInstallment(principal: number, monthlyRatePct: number, months: number): number {
18  if (months <= 0) return 0;
19  const i = monthlyRatePct / 100;
20  if (i === 0) return principal / months;
21  return (principal * i) / (1 - Math.pow(1 + i, -months));
22}
23
24const brl = (n: number) =>
25  n.toLocaleString("pt-BR", { style: "currency", currency: "BRL", maximumFractionDigits: 2 });
26
27interface Errors {
28  amount?: string;
29  rate?: string;
30  term?: string;
31}
32
33// TODO: point this at your own endpoint to receive optional leads.
34const LEAD_ENDPOINT = "/api/leads";
35
36export default function Calculator() {
37  const [amount, setAmount] = useState("10000");
38  const [rate, setRate] = useState("1.99");
39  const [term, setTerm] = useState("24");
40  const [email, setEmail] = useState("");
41  const [sent, setSent] = useState(false);
42
43  const errors: Errors = useMemo(() => {
44    const e: Errors = {};
45    const a = Number(amount);
46    const r = Number(rate);
47    const t = Number(term);
48    if (!amount || isNaN(a) || a <= 0) e.amount = "Informe um valor maior que zero.";
49    if (rate === "" || isNaN(r) || r < 0) e.rate = "Informe uma taxa válida (>= 0).";
50    if (!term || isNaN(t) || t <= 0 || !Number.isInteger(t)) e.term = "Informe o número de meses (inteiro > 0).";
51    return e;
52  }, [amount, rate, term]);
53
54  const valid = Object.keys(errors).length === 0;
55  const result = useMemo(() => {
56    if (!valid) return null;
57    const p = Number(amount);
58    const inst = monthlyInstallment(p, Number(rate), Number(term));
59    const total = inst * Number(term);
60    return { inst, total, interest: total - p };
61  }, [valid, amount, rate, term]);
62
63  async function submitLead(e: FormEvent) {
64    e.preventDefault();
65    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return;
66    try {
67      await fetch(LEAD_ENDPOINT, {
68        method: "POST",
69        headers: { "Content-Type": "application/json" },
70        body: JSON.stringify({ email, source: "calculadora" }),
71      });
72    } catch {
73      /* optional — ignore network errors */
74    }
75    setSent(true);
76  }
77
78  const field = "w-full rounded-lg border px-3 py-2 text-sm outline-none bg-white dark:bg-slate-900 border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-100 focus:border-slate-500";
79
80  return (
81    <div className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-sm">
82      <div className="grid gap-4 sm:grid-cols-3">
83        <label className="block">
84          <span className="text-xs font-semibold text-slate-600 dark:text-slate-300">Valor financiado (R$)</span>
85          <input inputMode="decimal" value={amount} onChange={(e) => setAmount(e.target.value)} className={`mt-1 ${field}`} />
86          {errors.amount && <span className="mt-1 block text-xs text-red-600">{errors.amount}</span>}
87        </label>
88        <label className="block">
89          <span className="text-xs font-semibold text-slate-600 dark:text-slate-300">Juros ao mês (%)</span>
90          <input inputMode="decimal" value={rate} onChange={(e) => setRate(e.target.value)} className={`mt-1 ${field}`} />
91          {errors.rate && <span className="mt-1 block text-xs text-red-600">{errors.rate}</span>}
92        </label>
93        <label className="block">
94          <span className="text-xs font-semibold text-slate-600 dark:text-slate-300">Prazo (meses)</span>
95          <input inputMode="numeric" value={term} onChange={(e) => setTerm(e.target.value)} className={`mt-1 ${field}`} />
96          {errors.term && <span className="mt-1 block text-xs text-red-600">{errors.term}</span>}
97        </label>
98      </div>
99
100      {result && (
101        <div className="mt-6 grid gap-3 sm:grid-cols-3">
102          <div className="rounded-xl bg-slate-900 dark:bg-slate-800 p-4 text-center text-white">
103            <div className="text-[11px] uppercase tracking-wider text-slate-300">Parcela mensal</div>
104            <div className="mt-1 text-2xl font-extrabold">{brl(result.inst)}</div>
105          </div>
106          <div className="rounded-xl border border-slate-200 dark:border-slate-700 p-4 text-center">
107            <div className="text-[11px] uppercase tracking-wider text-slate-500">Total pago</div>
108            <div className="mt-1 text-2xl font-extrabold text-slate-900 dark:text-slate-100">{brl(result.total)}</div>
109          </div>
110          <div className="rounded-xl border border-slate-200 dark:border-slate-700 p-4 text-center">
111            <div className="text-[11px] uppercase tracking-wider text-slate-500">Juros totais</div>
112            <div className="mt-1 text-2xl font-extrabold text-slate-900 dark:text-slate-100">{brl(result.interest)}</div>
113          </div>
114        </div>
115      )}
116
117      {/* Optional lead capture — appears AFTER the result, never blocks it. */}
118      {result && !sent && (
119        <form onSubmit={submitLead} className="mt-6 flex flex-col sm:flex-row gap-2">
120          <input
121            type="email"
122            value={email}
123            onChange={(e) => setEmail(e.target.value)}
124            placeholder="Receber a simulação por e-mail (opcional)"
125            className={`flex-1 ${field}`}
126          />
127          <button type="submit" className="rounded-lg bg-slate-900 dark:bg-slate-100 px-4 py-2 text-sm font-bold text-white dark:text-slate-900">
128            Enviar
129          </button>
130        </form>
131      )}
132      {sent && <p className="mt-4 text-sm font-semibold text-green-700 dark:text-green-400">Enviado! ✔</p>}
133    </div>
134  );
135}