From 34aa3bae2be19814574c8c5f0a9e24bd4d7d3688 Mon Sep 17 00:00:00 2001 From: Ryan Lynch Date: Thu, 6 Jun 2024 16:48:59 +0100 Subject: [PATCH] Added Mortgage Comparisons. --- .../ComparisonPage/ComparisonPage.tsx | 54 ++++++++++++ .../ComparisonPage/ComparisonSection.tsx | 86 +++++++++++++++++++ .../MortgageCalculator/MortgageCalculator.css | 9 +- .../MortgageCalculator.mapper.ts | 14 +-- .../MortgageCalculator/MortgageCalculator.tsx | 59 ++++++++++--- src/components/MortgageProperties.ts | 9 ++ 6 files changed, 211 insertions(+), 20 deletions(-) create mode 100644 src/components/MortgageCalculator/ComparisonPage/ComparisonPage.tsx create mode 100644 src/components/MortgageCalculator/ComparisonPage/ComparisonSection.tsx create mode 100644 src/components/MortgageProperties.ts diff --git a/src/components/MortgageCalculator/ComparisonPage/ComparisonPage.tsx b/src/components/MortgageCalculator/ComparisonPage/ComparisonPage.tsx new file mode 100644 index 0000000..3645892 --- /dev/null +++ b/src/components/MortgageCalculator/ComparisonPage/ComparisonPage.tsx @@ -0,0 +1,54 @@ +import React from "react"; +import { ComparisonSection } from "./ComparisonSection"; + +interface ComparisonPageProps {} + +const ComparisonPage: React.FC = ( + props: ComparisonPageProps +) => { + return ( +
+

Compare Mortgages

+ +
+ ); +}; + +export default ComparisonPage; diff --git a/src/components/MortgageCalculator/ComparisonPage/ComparisonSection.tsx b/src/components/MortgageCalculator/ComparisonPage/ComparisonSection.tsx new file mode 100644 index 0000000..1ece2df --- /dev/null +++ b/src/components/MortgageCalculator/ComparisonPage/ComparisonSection.tsx @@ -0,0 +1,86 @@ +import React from "react"; +import { MortgageProperties } from "../../MortgageProperties"; +import { getMonthlyPayment } from "../MortgageCalculator"; +import { formatter } from "../MortgageCalculator.mapper"; + +interface ComparisonSectionProps { + option1: MortgageProperties; + option2: MortgageProperties; + option3: MortgageProperties; +} + +export const ComparisonSection: React.FC = ( + props: ComparisonSectionProps +) => { + const { option1, option2, option3 } = props; + + return ( +
+
+
+ +
+ +
+ +
+ +
+ +
+
+
+ ); +}; + +const OptionSection: React.FC<{ + id: number; + option: MortgageProperties; +}> = (props: { id: number; option: MortgageProperties }) => { + const { id, option } = props; + const [housePrice, setHousePrice] = React.useState(option.housePrice); + // const [interestRate, setInterestRate] = React.useState(option.interestRate); + // const [mortgageTerm, setMortgageTerm] = React.useState(option.mortgageTerm); + + return ( +
+

+ Option {id} +

+ +

House Price: {formatter.format(housePrice)}

+

+ Monthly Payment:{" "} + {formatter.format( + getMonthlyPayment( + housePrice * 0.9, + option.interestRate, + option.mortgageTerm + ) + )} +

+

+ Savings Required:{" "} + {formatter.format( + housePrice * option.depositPercentage + + option.fees.valuationFee + + option.fees.surveyFee + + option.fees.legalFee + + housePrice * 0.01 + // stamp duty + option.fees.searchFee + )} +

+
+ ); +}; diff --git a/src/components/MortgageCalculator/MortgageCalculator.css b/src/components/MortgageCalculator/MortgageCalculator.css index 27c4747..c33cc83 100644 --- a/src/components/MortgageCalculator/MortgageCalculator.css +++ b/src/components/MortgageCalculator/MortgageCalculator.css @@ -44,7 +44,7 @@ p { font-size: large; } -@media (max-width: 600px) { +@media (max-width: 700px) { .columns { flex-direction: column; } @@ -55,7 +55,7 @@ p { } } -@media (min-width: 600px) { +@media (min-width: 700px) { .columns { display: flex; align-items: center; @@ -72,3 +72,8 @@ p { h2 { font-size: larger; } + +h3 { + font-size: large; + color: lightgreen +} \ No newline at end of file diff --git a/src/components/MortgageCalculator/MortgageCalculator.mapper.ts b/src/components/MortgageCalculator/MortgageCalculator.mapper.ts index 9ba723e..e89af80 100644 --- a/src/components/MortgageCalculator/MortgageCalculator.mapper.ts +++ b/src/components/MortgageCalculator/MortgageCalculator.mapper.ts @@ -1,13 +1,17 @@ export interface MortgageFees { - deposit: number; valuationFee: number; surveyFee: number; legalFee: number; - stampDuty: number; + stampDuty?: number; searchFee: number; } +export const savingsRequired = (deposit: number, fees: MortgageFees) => { + return deposit + fees.valuationFee + fees.surveyFee + fees.legalFee + (fees.stampDuty ?? deposit / 10) + fees.searchFee; +}; -export const savingsRequired = (fees: MortgageFees) => { - return fees.deposit + fees.valuationFee + fees.surveyFee + fees.legalFee + fees.stampDuty + fees.searchFee; -}; \ No newline at end of file +export const formatter = new Intl.NumberFormat("en-IE", { + style: "currency", + currency: "EUR", + minimumFractionDigits: 2, +}); \ No newline at end of file diff --git a/src/components/MortgageCalculator/MortgageCalculator.tsx b/src/components/MortgageCalculator/MortgageCalculator.tsx index f6f9c34..2691500 100644 --- a/src/components/MortgageCalculator/MortgageCalculator.tsx +++ b/src/components/MortgageCalculator/MortgageCalculator.tsx @@ -1,12 +1,7 @@ import { useState } from "react"; import "./MortgageCalculator.css"; -import { savingsRequired } from "./MortgageCalculator.mapper"; - -const formatter = new Intl.NumberFormat("en-IE", { - style: "currency", - currency: "EUR", - minimumFractionDigits: 0, -}); +import { formatter, savingsRequired } from "./MortgageCalculator.mapper"; +import ComparisonPage from "./ComparisonPage/ComparisonPage"; function MortgageCalculator(): JSX.Element { const [houseValue, setHouseValue] = useState(0.0); // Declare houseValue variable @@ -137,9 +132,7 @@ function MortgageCalculator(): JSX.Element { -

- Savings Required -

+

Savings Required

{formatter.format( - savingsRequired({ - deposit: houseValue * 0.1, + savingsRequired(houseValue * 0.1, { valuationFee: 185, surveyFee: 500, legalFee: 3300, @@ -223,11 +215,52 @@ function MortgageCalculator(): JSX.Element {

+ ); } -const getMonthlyPayment = ( +export const getMonthlyPayment = ( loanAmount: number, interestRate: number, loanTerm: number diff --git a/src/components/MortgageProperties.ts b/src/components/MortgageProperties.ts new file mode 100644 index 0000000..c10d64f --- /dev/null +++ b/src/components/MortgageProperties.ts @@ -0,0 +1,9 @@ +import { MortgageFees } from "./MortgageCalculator/MortgageCalculator.mapper"; + +export interface MortgageProperties { + housePrice: number; + depositPercentage: number; + mortgageTerm: number; + interestRate: number; + fees: MortgageFees; +} \ No newline at end of file