From 23e5791f1ea6f7cc2694d95184a5c9090ee5e45a Mon Sep 17 00:00:00 2001 From: Jen Breese-Kauth Date: Tue, 31 Mar 2026 13:29:18 -0700 Subject: [PATCH 1/3] IFDM-130: Add in the frozen option --- .../mortgage-refinancing-calculator/page.tsx | 61 +++++++++++++------ 1 file changed, 43 insertions(+), 18 deletions(-) diff --git a/app/interactives/mortgage-refinancing-calculator/page.tsx b/app/interactives/mortgage-refinancing-calculator/page.tsx index 49744b4..9c5fa47 100644 --- a/app/interactives/mortgage-refinancing-calculator/page.tsx +++ b/app/interactives/mortgage-refinancing-calculator/page.tsx @@ -24,7 +24,7 @@ export default function MortgageCalculator() { const [refCurrentBalance, setRefCurrentBalance] = useState("") const [refCurrentMonthlyPayment, setRefCurrentMonthlyPayment] = useState("") const [refCurrentMonths, setRefCurrentMonths] = useState("") - const [refCurrentRate, setRefCurrentRate] = useState("") // Added missing state for refinance current rate + const [refCurrentRate, setRefCurrentRate] = useState("") const [refNewLoanAmount, setRefNewLoanAmount] = useState("") const [refNewRate, setRefNewRate] = useState("") const [refNewMonths, setRefNewMonths] = useState("") @@ -40,6 +40,10 @@ export default function MortgageCalculator() { breakEvenMonths: number breakEvenMessage: string } | null>(null) + const [frozenMonthsRemaining, setFrozenMonthsRemaining] = useState("") + const [frozenAnnualRate, setFrozenAnnualRate] = useState("") + const [frozenBalance, setFrozenBalance] = useState("") + const [frozenMonthlyPayment, setFrozenMonthlyPayment] = useState("") const calculateBalance = () => { const months = Number.parseFloat(monthsRemaining) @@ -60,15 +64,26 @@ export default function MortgageCalculator() { } setCurrentBalance(balance) + // Freeze the values for use in Refinance tab + setFrozenMonthsRemaining(monthsRemaining) + setFrozenAnnualRate(annualRate) + setFrozenBalance(balance.toFixed(2)) + setFrozenMonthlyPayment(monthlyPayment) + + // Prefill the Refinance tab with frozen values + setRefCurrentBalance(balance.toFixed(2)) + setRefCurrentMonths(monthsRemaining) + setRefCurrentRate(annualRate) + setRefCurrentMonthlyPayment(monthlyPayment) } const calculateRefinance = () => { const currentBal = Number.parseFloat(refCurrentBalance) - const currentR = Number.parseFloat(refCurrentRate) / 100 / 12 // Fixed: Use refCurrentRate instead of refCurrentMonthlyPayment + const currentR = Number.parseFloat(refCurrentRate) / 100 / 12 const currentM = Number.parseFloat(refCurrentMonths) const newR = Number.parseFloat(refNewRate) / 100 / 12 const newM = Number.parseFloat(refNewMonths) - const closingCosts = Number.parseFloat(refClosingCosts) + const closingCosts = Number.parseFloat(refClosingCosts) || 0 if ( isNaN(currentBal) || @@ -76,7 +91,6 @@ export default function MortgageCalculator() { isNaN(currentM) || isNaN(newR) || isNaN(newM) || - isNaN(closingCosts) || currentBal <= 0 || currentR < 0 || currentM <= 0 || @@ -100,19 +114,18 @@ export default function MortgageCalculator() { // Calculate new monthly payment const newLoanAmount = Number.parseFloat(refNewLoanAmount) - // Validate newLoanAmount in your validation section + // Validate newLoanAmount if ( isNaN(currentBal) || isNaN(currentR) || isNaN(currentM) || - isNaN(newLoanAmount) || // ✅ Add this + isNaN(newLoanAmount) || isNaN(newR) || isNaN(newM) || - isNaN(closingCosts) || currentBal <= 0 || currentR < 0 || currentM <= 0 || - newLoanAmount <= 0 || // ✅ Add this + newLoanAmount <= 0 || newR < 0 || newM <= 0 || closingCosts < 0 @@ -121,12 +134,11 @@ export default function MortgageCalculator() { return } - // Calculate new monthly payment let newMonthlyPayment: number if (newR === 0) { - newMonthlyPayment = newLoanAmount / newM // ✅ Use newLoanAmount + newMonthlyPayment = newLoanAmount / newM } else { - newMonthlyPayment = (newLoanAmount * (newR * Math.pow(1 + newR, newM))) / (Math.pow(1 + newR, newM) - 1) // ✅ Use newLoanAmount + newMonthlyPayment = (newLoanAmount * (newR * Math.pow(1 + newR, newM))) / (Math.pow(1 + newR, newM) - 1) } const monthlySavings = currentMonthlyPayment - newMonthlyPayment @@ -139,14 +151,17 @@ export default function MortgageCalculator() { if (monthlySavings > 0) { // Case 1: Lower monthly payment - breakEvenMonths = closingCosts / monthlySavings - breakEvenMessage = `You'll recover closing costs in ${breakEvenMonths.toFixed(1)} months` + breakEvenMonths = closingCosts > 0 ? closingCosts / monthlySavings : 0 + breakEvenMessage = closingCosts > 0 + ? `You'll recover closing costs in ${breakEvenMonths.toFixed(1)} months` + : "No closing costs to recover - immediate savings!" } else if (monthlySavings < 0) { // Case 2: Higher monthly payment - // Only makes sense if total savings over loan term is positive if (totalSavings > 0) { - breakEvenMonths = closingCosts / (-monthlySavings) - breakEvenMessage = `Despite higher monthly payments, you'll save overall if you stay ${breakEvenMonths.toFixed(1)}+ months` + breakEvenMonths = closingCosts > 0 ? closingCosts / (-monthlySavings) : 0 + breakEvenMessage = closingCosts > 0 + ? `Despite higher monthly payments, you'll save overall if you stay ${breakEvenMonths.toFixed(1)}+ months` + : "Despite higher monthly payments, you save overall on total interest" } else { breakEvenMonths = Infinity breakEvenMessage = "This refinance costs more overall - not recommended" @@ -167,7 +182,7 @@ export default function MortgageCalculator() { totalNewCost, totalSavings, breakEvenMonths, - breakEvenMessage, // Add this to state type + breakEvenMessage, }) } @@ -329,7 +344,17 @@ export default function MortgageCalculator() { )} From ac933944f64284fcf844955a771f833cb1db54a2 Mon Sep 17 00:00:00 2001 From: Jen Breese-Kauth Date: Tue, 31 Mar 2026 14:36:42 -0700 Subject: [PATCH 2/3] IFDM-110: Fix to the color on this calculator --- app/interactives/mortgage-refinancing-calculator/page.tsx | 2 +- app/ui/globals.css | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/app/interactives/mortgage-refinancing-calculator/page.tsx b/app/interactives/mortgage-refinancing-calculator/page.tsx index 9c5fa47..fadcdca 100644 --- a/app/interactives/mortgage-refinancing-calculator/page.tsx +++ b/app/interactives/mortgage-refinancing-calculator/page.tsx @@ -759,7 +759,7 @@ export default function MortgageCalculator() {

= 0 ? "bg-lagunita-lighter text-black border-1 border-lagunita" - : "bg-berry-light border-berry text-black" + : "bg-sky border-sky-dark text-black" }`}> ${formatCurrency(Math.abs(refinanceResults.monthlySavings))}

diff --git a/app/ui/globals.css b/app/ui/globals.css index b6542b0..eaf2028 100644 --- a/app/ui/globals.css +++ b/app/ui/globals.css @@ -41,6 +41,8 @@ --radius-xl: calc(var(--radius) + 4px); --font-poppins: Poppins, sans-serif; + --color-sky: rgba(206, 232, 255, 1); + --color-sky-dark: rgba(14, 59, 79, 1); --color-berry: rgba(195, 31, 112, 1); --color-berry-light: rgba(255, 237, 246, 1); --color-palo-verde: rgba(39, 153, 137, 1); From c1d79d8500d6b621a707e5b867cd4a2168478e39 Mon Sep 17 00:00:00 2001 From: Jen Breese-Kauth Date: Tue, 31 Mar 2026 15:32:15 -0700 Subject: [PATCH 3/3] IFDM-130: changed color on app --- app/interactives/mortgage-refinancing-calculator/page.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/app/interactives/mortgage-refinancing-calculator/page.tsx b/app/interactives/mortgage-refinancing-calculator/page.tsx index fadcdca..9b535ea 100644 --- a/app/interactives/mortgage-refinancing-calculator/page.tsx +++ b/app/interactives/mortgage-refinancing-calculator/page.tsx @@ -769,9 +769,7 @@ export default function MortgageCalculator() {

{refinanceResults.totalSavings >= 0 ? "Refinancing saves you" : "Refinancing costs you"}

-

= 0 ? "text-lagunita" : "text-berry" - }`}> +

${formatCurrency(Math.abs(refinanceResults.totalSavings))}