Skip to content

IFDM-141: fixed the years in house input on the Mortgage Refinancing Calculator #91

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jenbreese wants to merge 1 commit into
base: 1.x
Choose a base branch
from
Open

IFDM-141: fixed the years in house input on the Mortgage Refinancing Calculator #91

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 26 additions & 10 deletions app/interactives/mortgage-refinancing-calculator/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,8 @@ export default function MortgageCalculator() {
const newR = Number.parseFloat(refNewRate) / 100 / 12
const newM = Number.parseFloat(refNewMonths)
const closingCosts = Number.parseFloat(refClosingCosts) || 0
const yearsInHouse = Number.parseFloat(refYearsIn) || 0
const monthsInHouse = yearsInHouse * 12

if (
isNaN(currentBal) ||
Expand Down Expand Up @@ -131,8 +133,13 @@ export default function MortgageCalculator() {
}

const monthlySavings = currentMonthlyPayment - newMonthlyPayment
const totalCurrentCost = currentMonthlyPayment * currentM
const totalNewCost = newMonthlyPayment * newM + closingCosts

// Use expected months in house if provided, otherwise use the shorter loan term
const monthsToUse = monthsInHouse > 0 ? monthsInHouse : Math.min(currentM, newM)

// Uses monthsToUse instead of full loan terms
const totalCurrentCost = currentMonthlyPayment * monthsToUse
const totalNewCost = newMonthlyPayment * monthsToUse + closingCosts
Copy link
Copy Markdown
Collaborator

@imonroe imonroe Apr 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, so this is going to be incorrect if there is no value for monthsInHouse, but correct otherwise.

Can we change it so that it only uses this version of the calculation if monthsInHouse is greater than 0, otherwise use the old calculation (which is right).

Copy link
Copy Markdown
Collaborator

@imonroe imonroe Apr 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, if a user says "I'll be in this house 5 years" and refinances to a longer term, the new loan amortizes slower, so the unpaid principal at sale is higher. The PR's math doesn't account for the remaining balance at monthsToUse

Can we check with the math fellow and see if this is correct?

const totalSavings = totalCurrentCost - totalNewCost

let breakEvenMonths: number
Expand Down Expand Up @@ -174,7 +181,6 @@ export default function MortgageCalculator() {
breakEvenMessage,
})
}

return (
<div className="p-6 max-w-5xl mx-auto">
<div>
Expand All @@ -195,7 +201,7 @@ export default function MortgageCalculator() {
<CardHeader>
<CardTitle>Current Mortgage Balance Calculator</CardTitle>
<CardDescription>
Calculate the present value of your remaining monthly mortgage payments (your mortgage balance).
Calculate your mortgage balance (the present value of your remaining monthly mortgage payments).
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
Expand Down Expand Up @@ -243,7 +249,7 @@ export default function MortgageCalculator() {
</div>

<div className="relative">
<Label className="font-semibold" htmlFor="rate">Annual interest rate (%)</Label>
<Label className="font-semibold" htmlFor="rate">Current interest rate</Label>
<Input
id="rate"
type="number"
Expand Down Expand Up @@ -345,7 +351,6 @@ export default function MortgageCalculator() {
</CardContent>
</Card>
</TabsContent>

<TabsContent value="refinance">
<Card>
<CardHeader>
Expand Down Expand Up @@ -518,7 +523,8 @@ export default function MortgageCalculator() {
</div>
</div>
</div>
<div className="pl-0">

<div className="pl-0">
<h2 className="mb-4 text-lg text-lagunita font-semibold border-b-1 border-lagunita">New Loan Terms</h2>

<div className="mb-5 relative">
Expand Down Expand Up @@ -603,7 +609,7 @@ export default function MortgageCalculator() {
</div>

<div className="mb-5 relative">
<Label className="font-semibold" htmlFor="ref-new-rate">New annual interest rate (%)</Label>
<Label className="font-semibold" htmlFor="ref-new-rate">New interest rate</Label>
Copy link
Copy Markdown
Collaborator

@imonroe imonroe Apr 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<Label className="font-semibold" htmlFor="ref-new-rate">New interest rate</Label>
<Label className="font-semibold" htmlFor="ref-new-rate">New interest rate</Label>

<Input
id="ref-new-rate"
type="number"
Expand Down Expand Up @@ -725,7 +731,6 @@ export default function MortgageCalculator() {
</div>
</div>
</div>

{refinanceResults && (
<div className="bg-[var(--card-background)] rounded-md p-[32px] text-center md:text-left">

Expand Down Expand Up @@ -772,7 +777,18 @@ export default function MortgageCalculator() {
</Button>
<Button
className={`h-18 whitespace-normal bg-navy cursor-pointer border-2 border-navy hover:bg-white hover:border-2 hover:border-lagunita hover:text-lagunita text-white flex-1 md:flex-none`}
onClick={() => { setRefinanceResults(null); setRefCurrentBalance(""); setRefCurrentMonthlyPayment(""); setRefCurrentMonths(""); setRefCurrentRate(""); setRefNewLoanAmount(""); setRefNewRate(""); setRefNewMonths(""); setRefClosingCosts(""); setRefYearsIn(""); }}
onClick={() => {
setRefinanceResults(null);
setRefCurrentBalance("");
setRefCurrentMonthlyPayment("");
setRefCurrentMonths("");
setRefCurrentRate("");
setRefNewLoanAmount("");
setRefNewRate("");
setRefNewMonths("");
setRefClosingCosts("");
setRefYearsIn("");
}}
>
Reset
</Button>
Expand Down