feat: aprimora o fluxo de pagamento de faturas e boletos

src/features/dashboard/components/invoices/invoice-payment-dialog.tsx

@@ -1,5 +1,6 @@
 import {
-	RiCheckboxCircleLine,
+	RiBankCardLine,
+	RiCalendarLine,
 	RiLoader4Line,
 	RiMoneyDollarCircleLine,
 } from "@remixicon/react";
@@ -11,6 +12,7 @@ import {
 } from "@/features/dashboard/invoices-helpers";
 import type { DashboardInvoice } from "@/features/dashboard/invoices-queries";
 import MoneyValues from "@/shared/components/money-values";
+import { PaymentSuccess } from "@/shared/components/payment-success";
 import { Badge } from "@/shared/components/ui/badge";
 import { Button } from "@/shared/components/ui/button";
 import {
@@ -46,6 +48,9 @@ export function InvoicePaymentDialog({
 }: InvoicePaymentDialogProps) {
 	const isProcessing = modalState === "processing" || isPending;
 	const paymentInfo = invoice ? formatInvoicePaymentDate(invoice.paidAt) : null;
+	const dueInfo = invoice
+		? parseInvoiceDueDate(invoice.period, invoice.dueDay)
+		: null;
 
 	return (
 		<Dialog
@@ -71,82 +76,56 @@ export function InvoicePaymentDialog({
 				}}
 			>
 				{modalState === "success" ? (
-					<div className="flex flex-col items-center gap-4 py-6 text-center">
-						<div className="flex size-16 items-center justify-center rounded-full bg-success/10 text-success">
-							<RiCheckboxCircleLine className="size-8" />
-						</div>
-						<div className="space-y-2">
-							<DialogTitle className="text-base">
-								Pagamento confirmado!
-							</DialogTitle>
-							<DialogDescription className="text-sm">
-								Atualizamos o status da fatura. O lançamento do pagamento
-								aparecerá no extrato em instantes.
-							</DialogDescription>
-						</div>
-						<DialogFooter className="sm:justify-center">
-							<Button type="button" onClick={onClose} className="sm:w-auto">
-								Fechar
-							</Button>
-						</DialogFooter>
-					</div>
+					<PaymentSuccess
+						title="Pagamento confirmado!"
+						description="Atualizamos o status da fatura. O lançamento do pagamento aparecerá no extrato em instantes."
+						onClose={onClose}
+					/>
 				) : (
 					<>
 						<DialogHeader>
-							<DialogTitle>Confirmar pagamento</DialogTitle>
-							<DialogDescription>
-								Revise os dados antes de confirmar. Vamos registrar a fatura
-								como paga.
-							</DialogDescription>
+							<div className="mb-1 flex items-center gap-3">
+								<div className="flex size-10 items-center justify-center rounded-full bg-primary/10">
+									<RiBankCardLine className="size-5 text-primary" />
+								</div>
+								<div>
+									<DialogTitle>Confirmar pagamento</DialogTitle>
+									<DialogDescription className="mt-0.5 text-xs">
+										Fatura do cartão
+									</DialogDescription>
+								</div>
+							</div>
 						</DialogHeader>
 
 						{invoice ? (
-							<div className="space-y-4">
-								<div className="rounded-lg border p-4">
-									<div className="flex items-center justify-between">
-										<div className="flex items-center gap-3">
-											<InvoiceLogo
-												cardName={invoice.cardName}
-												logo={invoice.logo}
-												size={40}
-												tone="accent"
-												containerClassName="size-10"
-												fallbackClassName="text-xs"
-											/>
-											<div>
-												<p className="text-sm font-medium text-muted-foreground">
-													Cartão
-												</p>
-												<p className="text-lg font-bold text-foreground">
-													{invoice.cardName}
-												</p>
-											</div>
-										</div>
-										<div className="text-right">
-											{invoice.paymentStatus !== INVOICE_PAYMENT_STATUS.PAID ? (
-												<p className="text-sm text-muted-foreground">
-													{
-														parseInvoiceDueDate(invoice.period, invoice.dueDay)
-															.label
-													}
-												</p>
-											) : null}
-											{invoice.paymentStatus === INVOICE_PAYMENT_STATUS.PAID &&
-											paymentInfo ? (
-												<p className="text-sm text-success">
-													{paymentInfo.label}
-												</p>
-											) : null}
-										</div>
+							<div className="space-y-3">
+								{/* Card principal */}
+								<div className="flex items-center gap-3 rounded-xl border bg-muted/30 p-4">
+									<InvoiceLogo
+										cardName={invoice.cardName}
+										logo={invoice.logo}
+										size={36}
+										tone="accent"
+										containerClassName="size-9 shrink-0"
+										fallbackClassName="text-xs"
+									/>
+									<div className="min-w-0">
+										<p className="text-[11px] font-medium text-muted-foreground uppercase tracking-wide">
+											Cartão
+										</p>
+										<p className="truncate text-base font-semibold text-foreground">
+											{invoice.cardName}
+										</p>
 									</div>
 								</div>
 
-								<div className="grid gap-3 sm:grid-cols-2">
-									<div className="rounded-lg border p-3">
-										<div className="mb-2 flex items-center gap-2 text-muted-foreground">
-											<RiMoneyDollarCircleLine className="size-4" />
-											<span className="text-xs font-semibold uppercase">
-												Valor da Invoice
+								{/* Métricas */}
+								<div className="grid grid-cols-2 gap-3">
+									<div className="rounded-xl border p-3">
+										<div className="mb-1.5 flex items-center gap-1.5 text-muted-foreground">
+											<RiMoneyDollarCircleLine className="size-3.5" />
+											<span className="text-[11px] font-semibold uppercase tracking-wide">
+												Total da fatura
 											</span>
 										</div>
 										<MoneyValues
@@ -154,22 +133,43 @@ export function InvoicePaymentDialog({
 											className="text-lg font-bold"
 										/>
 									</div>
-									<div className="rounded-lg border p-3">
-										<div className="mb-2 flex items-center gap-2 text-muted-foreground">
-											<RiCheckboxCircleLine className="size-4" />
-											<span className="text-xs font-semibold uppercase">
-												Status
+
+									<div className="rounded-xl border p-3">
+										<div className="mb-1.5 flex items-center gap-1.5 text-muted-foreground">
+											<RiCalendarLine className="size-3.5" />
+											<span className="text-[11px] font-semibold uppercase tracking-wide">
+												{invoice.paymentStatus === INVOICE_PAYMENT_STATUS.PAID
+													? "Pago em"
+													: "Vencimento"}
 											</span>
 										</div>
-										<Badge
-											variant={getInvoiceStatusBadgeVariant(
-												INVOICE_STATUS_LABEL[invoice.paymentStatus],
-											)}
-										>
-											{INVOICE_STATUS_LABEL[invoice.paymentStatus]}
-										</Badge>
+										<p className="text-sm font-semibold text-foreground">
+											{invoice.paymentStatus === INVOICE_PAYMENT_STATUS.PAID
+												? (paymentInfo?.label ?? "—")
+												: (dueInfo?.label ?? "—")}
+										</p>
 									</div>
 								</div>
+
+								{/* Status */}
+								<div className="flex items-center justify-between rounded-xl border p-3">
+									<span className="text-sm text-muted-foreground">
+										Status atual
+									</span>
+									<Badge
+										variant={getInvoiceStatusBadgeVariant(
+											INVOICE_STATUS_LABEL[invoice.paymentStatus],
+										)}
+									>
+										{INVOICE_STATUS_LABEL[invoice.paymentStatus]}
+									</Badge>
+								</div>
+
+								{/* Aviso */}
+								<p className="px-1 text-xs text-muted-foreground">
+									Vamos registrar a fatura como paga. Você poderá editar depois
+									se necessário.
+								</p>
 							</div>
 						) : null}
 
@@ -186,7 +186,6 @@ export function InvoicePaymentDialog({
 								type="button"
 								onClick={onConfirm}
 								disabled={isProcessing || !invoice}
-								className="relative"
 							>
 								{isProcessing ? (
 									<>