36 lines
1.0 KiB
JavaScript
36 lines
1.0 KiB
JavaScript
// UpsellSummary.jsx
|
||
import { Button } from './ui/button.js';
|
||
|
||
export default function UpsellSummary({ row, onUpgrade, isPremium }) {
|
||
if (!row) return null;
|
||
|
||
const niceMoney = n => '$' + Number(n).toLocaleString();
|
||
|
||
return (
|
||
<div id="loan-results" className="mt-6 space-y-3 border-t pt-4">
|
||
<p className="text-sm text-gray-700">
|
||
With a payment of <strong>{niceMoney(row.totalMonthlyPayment)}/mo</strong>{' '}
|
||
you’d spend <strong>{niceMoney(row.totalLoanCost)}</strong> over the loan
|
||
term and still net about{' '}
|
||
<strong className="text-green-600">
|
||
{niceMoney(row.netGain)}
|
||
</strong>{' '}
|
||
after pay-off.
|
||
</p>
|
||
|
||
{isPremium ? (
|
||
<Button className="w-full" onClick={onUpgrade}>
|
||
Open Detailed ROI Planner →
|
||
</Button>
|
||
) : (
|
||
<Button
|
||
className="w-full bg-green-500 hover:bg-green-600"
|
||
onClick={onUpgrade}
|
||
>
|
||
See full ROI with Premium →
|
||
</Button>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|