From 411c15e8f7e3178a2b980ff374fe058b659bc92e Mon Sep 17 00:00:00 2001
From: Ryan Lynch <lynchryan2@gmail.com>
Date: Fri, 7 Jun 2024 18:07:04 +0100
Subject: [PATCH] Adding loan amount.

---
 .../ComparisonPage/ComparisonSection.tsx      | 43 ++++++++++++++++++-
 .../MortgageCalculator/MortgageCalculator.css | 23 ++++++----
 2 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/src/components/MortgageCalculator/ComparisonPage/ComparisonSection.tsx b/src/components/MortgageCalculator/ComparisonPage/ComparisonSection.tsx
index c8fb5f5..3d93823 100644
--- a/src/components/MortgageCalculator/ComparisonPage/ComparisonSection.tsx
+++ b/src/components/MortgageCalculator/ComparisonPage/ComparisonSection.tsx
@@ -39,10 +39,25 @@ const OptionSection: React.FC<{
 }> = (props: { id: number; option: MortgageProperties }) => {
     const { id, option } = props;
     const [housePrice, setHousePrice] = React.useState(option.housePrice);
+    const [loanAmount, setLoanAmount] = React.useState(housePrice * 0.9);
     const useOneInterestRate = option.interestRate !== undefined;
     const [interestRate, setInterestRate] = React.useState(3.8);
     // const [mortgageTerm, setMortgageTerm] = React.useState(option.mortgageTerm);
 
+    const handleLoanAmountChange = (
+        loanAmount: number,
+        housePrice: number,
+        setLoanAmount: (loanAmount: number) => void
+    ) => {
+        if (loanAmount < 0) {
+            setLoanAmount(0);
+        } else if (loanAmount > housePrice * 0.9) {
+            setLoanAmount(housePrice * 0.9);
+        } else {
+            setLoanAmount(loanAmount);
+        }
+    };
+
     return (
         <div>
             <h2
@@ -52,6 +67,7 @@ const OptionSection: React.FC<{
             >
                 Option {id}
             </h2>
+
             <label>
                 House Price (€)
                 <input
@@ -60,6 +76,28 @@ const OptionSection: React.FC<{
                     onChange={(e) => setHousePrice(parseInt(e.target.value))}
                 />
             </label>
+
+            <br />
+
+            <label>
+                Loan Amount (%)
+                <input
+                    type="number"
+                    value={loanAmount}
+                    onChange={(e) =>
+                        handleLoanAmountChange(
+                            parseFloat(e.target.value),
+                            housePrice,
+                            setLoanAmount
+                        )
+                    }
+                />
+            </label>
+
+            <button onClick={() => setLoanAmount(housePrice * 0.9)}>
+                Set loan amount to 90%
+            </button>
+
             {!useOneInterestRate && (
                 <>
                     <br />
@@ -83,7 +121,7 @@ const OptionSection: React.FC<{
                 <p>
                     {formatter.format(
                         getMonthlyPayment(
-                            housePrice * 0.9,
+                            loanAmount,
                             option.interestRate ?? interestRate,
                             option.mortgageTerm
                         )
@@ -94,7 +132,8 @@ const OptionSection: React.FC<{
                 Savings Required:{" "}
                 <p>
                     {formatter.format(
-                        housePrice * option.depositPercentage +
+                        housePrice -
+                            loanAmount +
                             option.fees.valuationFee +
                             option.fees.surveyFee +
                             option.fees.legalFee +
diff --git a/src/components/MortgageCalculator/MortgageCalculator.css b/src/components/MortgageCalculator/MortgageCalculator.css
index 2a54453..505ddf6 100644
--- a/src/components/MortgageCalculator/MortgageCalculator.css
+++ b/src/components/MortgageCalculator/MortgageCalculator.css
@@ -8,10 +8,10 @@ input[type="checkbox"] {
 input[type="number"] {
     border-radius: 2rem;
     border: 1px solid #ccc;
-    padding: 0.5em;
-    font-size: 1em;
+    padding: 0.5rem;
+    font-size: 1rem;
     font-family: inherit;
-    margin: 0.5em;
+    margin: 0.5rem;
     margin-bottom: 2rem;
     text-align: center;
 }
@@ -22,11 +22,16 @@ input[type="number"]:focus {
     box-shadow: 0 0 0 2px rgba(100, 108, 255, 0.2);
 }
 
-/* form {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-} */
+button {
+    background-color: #424cfd;
+    color: white;
+    border: none;
+    border-radius: 2rem;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    cursor: pointer;
+    max-width: 65%;
+}
 
 label {
     font-weight: bold;
@@ -38,7 +43,7 @@ textarea {
     border: 1px solid #ccc;
     padding: 0.5em;
     padding-top: 10rem;
-    font-size: 1em;
+    font-size: 1rem;
     font-family: inherit;
     margin-bottom: 1em;
 }