Added Mortgage Comparisons.

UniqueClone · Jun 6, 2024 · 34aa3ba · 34aa3ba
1 parent 8796dda
commit 34aa3ba
Show file tree

Hide file tree

Showing 6 changed files with 211 additions and 20 deletions.
diff --git a/src/components/MortgageCalculator/ComparisonPage/ComparisonPage.tsx 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<ComparisonPageProps> = (
+    props: ComparisonPageProps
+) => {
+    return (
+        <div>
+            <h1>Compare Mortgages</h1>
+            <ComparisonSection
+                option1={{
+                    housePrice: 440000,
+                    depositPercentage: 0.1,
+                    mortgageTerm: 35,
+                    interestRate: 3.8,
+                    fees: {
+                        valuationFee: 185,
+                        surveyFee: 500,
+                        legalFee: 3300,
+                        searchFee: 250,
+                    },
+                }}
+                option2={{
+                    housePrice: 450000,
+                    depositPercentage: 0.1,
+                    mortgageTerm: 35,
+                    interestRate: 3.8,
+                    fees: {
+                        valuationFee: 185,
+                        surveyFee: 500,
+                        legalFee: 3300,
+                        searchFee: 250,
+                    },
+                }}
+                option3={{
+                    housePrice: 460000,
+                    depositPercentage: 0.1,
+                    mortgageTerm: 35,
+                    interestRate: 3.8,
+                    fees: {
+                        valuationFee: 185,
+                        surveyFee: 500,
+                        legalFee: 3300,
+                        searchFee: 250,
+                    },
+                }}
+            />
+        </div>
+    );
+};
+
+export default ComparisonPage;
diff --git a/src/components/MortgageCalculator/ComparisonPage/ComparisonSection.tsx 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<ComparisonSectionProps> = (
+    props: ComparisonSectionProps
+) => {
+    const { option1, option2, option3 } = props;
+
+    return (
+        <div>
+            <div className="columns">
+                <div className="column column-1">
+                    <OptionSection id={1} option={option1} />
+                </div>
+
+                <div className="column column-2">
+                    <OptionSection id={2} option={option2} />
+                </div>
+
+                <div className="column column-3">
+                    <OptionSection id={3} option={option3} />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+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 (
+        <div>
+            <h2
+                style={{
+                    fontSize: "1.75rem",
+                }}
+            >
+                Option {id}
+            </h2>
+            <label>
+                House Price (€)
+                <input
+                    type="number"
+                    value={housePrice}
+                    onChange={(e) => setHousePrice(parseInt(e.target.value))}
+                />
+            </label>
+            <h3>House Price: {formatter.format(housePrice)}</h3>
+            <h3>
+                Monthly Payment:{" "}
+                {formatter.format(
+                    getMonthlyPayment(
+                        housePrice * 0.9,
+                        option.interestRate,
+                        option.mortgageTerm
+                    )
+                )}
+            </h3>
+            <h3>
+                Savings Required:{" "}
+                {formatter.format(
+                    housePrice * option.depositPercentage +
+                        option.fees.valuationFee +
+                        option.fees.surveyFee +
+                        option.fees.legalFee +
+                        housePrice * 0.01 + // stamp duty
+                        option.fees.searchFee
+                )}
+            </h3>
+        </div>
+    );
+};
diff --git 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
+}
diff --git 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;
-};
+export const formatter = new Intl.NumberFormat("en-IE", {
+    style: "currency",
+    currency: "EUR",
+    minimumFractionDigits: 2,
+});
diff --git 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<number>(0.0); // Declare houseValue variable
@@ -137,18 +132,15 @@ function MortgageCalculator(): JSX.Element {
                 </div>
             </form>
 
-            <h2 style={{ fontSize: "1.5rem" }}>
-                Savings Required
-            </h2>
+            <h2 style={{ fontSize: "1.5rem" }}>Savings Required</h2>
             <p
                 style={{
                     color: "green",
                     fontSize: "1.5rem",
                 }}
             >
                 {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 {
                     </p>
                 </div>
             </div>
+            <ComparisonPage
+            // option1={{
+            //     housePrice: 440000,
+            //     depositPercentage: 0.1,
+            //     mortgageTerm: 35,
+            //     interestRate: 3.8,
+            //     fees: {
+            //         valuationFee: 185,
+            //         surveyFee: 500,
+            //         legalFee: 3300,
+            //         stampDuty: 4400,
+            //         searchFee: 250,
+            //     },
+            // }}
+            // option2={{
+            //     housePrice: 450000,
+            //     depositPercentage: 0.1,
+            //     mortgageTerm: 35,
+            //     interestRate: 3.8,
+            //     fees: {
+            //         valuationFee: 185,
+            //         surveyFee: 500,
+            //         legalFee: 3300,
+            //         stampDuty: 4500,
+            //         searchFee: 250,
+            //     },
+            // }}
+            // option3={{
+            //     housePrice: 460000,
+            //     depositPercentage: 0.1,
+            //     mortgageTerm: 35,
+            //     interestRate: 3.8,
+            //     fees: {
+            //         valuationFee: 185,
+            //         surveyFee: 500,
+            //         legalFee: 3300,
+            //         stampDuty: 4600,
+            //         searchFee: 250,
+            //     },
+            // }}
+            />
         </div>
     );
 }
 
-const getMonthlyPayment = (
+export const getMonthlyPayment = (
     loanAmount: number,
     interestRate: number,
     loanTerm: number

diff --git a/src/components/MortgageProperties.ts 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;
+}