50 lines
2.0 KiB
React
50 lines
2.0 KiB
React
|
import { cn } from '@/lib/utils';
|
||
|
|
|
||
|
|
// Edit-mode autopay trust panel: success rate over the last 12 months, a
|
||
|
|
// "Mark verified" action, and staleness / failure warnings. Presentational —
|
||
|
|
// the parent owns the verify handler and the optimistic verified-at date.
|
||
|
|
export default function AutopayTrustIndicator({ isNew, autopay, stats, verifiedAt, onVerify }) {
|
||
|
|
if (isNew || !autopay) return null;
|
||
|
|
|
||
|
|
const total = stats?.total ?? 0;
|
||
|
|
const failures = stats?.failures ?? 0;
|
||
|
|
const daysSince = verifiedAt
|
||
|
|
? Math.floor((Date.now() - verifiedAt.getTime()) / 86400000)
|
||
|
|
: null;
|
||
|
|
const needsVerify = daysSince === null || daysSince > 90;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="rounded-md border border-border/50 bg-muted/20 px-3 py-2.5 space-y-1.5">
|
||
|
|
<div className="flex items-center justify-between gap-2">
|
||
|
|
<span className={cn('text-xs font-medium', failures > 0 ? 'text-amber-500' : total > 0 ? 'text-emerald-500' : 'text-muted-foreground/60')}>
|
||
|
|
{total > 0
|
||
|
|
? `${failures > 0 ? '⚠' : '✓'} ${total - failures}/${total} successful (12 mo)`
|
||
|
|
: 'No payment history yet'}
|
||
|
|
</span>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={onVerify}
|
||
|
|
className="text-[11px] text-sky-500 hover:text-sky-400 underline underline-offset-2 transition-colors"
|
||
|
|
>
|
||
|
|
Mark verified
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
{needsVerify && (
|
||
|
|
<p className="text-[11px] text-amber-500/80">
|
||
|
|
{daysSince === null
|
||
|
|
? "Autopay never confirmed — verify it's still active."
|
||
|
|
: `Last verified ${daysSince}d ago — confirm autopay is still on.`}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
{!needsVerify && (
|
||
|
|
<p className="text-[11px] text-muted-foreground/60">Verified {daysSince}d ago</p>
|
||
|
|
)}
|
||
|
|
{failures > 0 && stats?.last_failure_date && (
|
||
|
|
<p className="text-[11px] text-amber-500/80">
|
||
|
|
Last failure: {stats.last_failure_date}{stats?.last_failure_notes ? ` — ${stats.last_failure_notes}` : ''}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|