Merge pull request #40 from UniqueClone/main

Adding first time buyer checkbox.
UniqueClone · Oct 7, 2024 · 3811e4b · 3811e4b
2 parents 9852af7 + 2f78fe1
commit 3811e4b
Show file tree

Hide file tree

Showing 5 changed files with 503 additions and 409 deletions.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1,15 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: ryanlynch # Replace with a single Buy Me a Coffee username
+thanks_dev: # Replace with a single thanks.dev username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <link rel="icon" type="image/png" href="/public/abacus.png" />
+        <link rel="icon" type="image/png" href="/abacus.png" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Irish Mortgage Calculator</title>
     </head>

diff --git a/src/components/MortgageComparison/MortgageComparison.tsx b/src/components/MortgageComparison/MortgageComparison.tsx
@@ -1,4 +1,11 @@
-import { Icon, Link, PrimaryButton, Stack, Text } from "@fluentui/react";
+import {
+  Checkbox,
+  Icon,
+  Link,
+  PrimaryButton,
+  Stack,
+  Text,
+} from "@fluentui/react";
 import React, { useEffect } from "react";
 import { InterestRate } from "../InterestRate/InterestRate";
 import { MaxLoanInput } from "../MaxLoanInput/MaxLoanInput";
@@ -10,163 +17,187 @@ import { FeesPanel } from "../FeesPanel/FeesPanel";
 export interface MortgageComparisonProps {}
 
 export const MortgageComparison: React.FC<MortgageComparisonProps> = () => {
-    const savedMortgageDetails = localStorage.getItem("mortgageDetails");
-    const parsedMortgageDetails = JSON.parse(savedMortgageDetails ?? "{}");
-
-    const [interestRate, setInterestRate] = React.useState<number | undefined>(
-        parsedMortgageDetails.interestRate ?? 4.0
-    );
-    const [useGlobalInterestRate, setUseGlobalInterestRate] = React.useState(
-        parsedMortgageDetails.useGlobalInterestRate ?? true
-    );
-
-    const [maxLoan, setMaxLoan] = React.useState(
-        parsedMortgageDetails.maxLoan ?? 0
-    );
-
-    const [term, setTerm] = React.useState(parsedMortgageDetails.term ?? 35);
-
-    const [fees, setFees] = React.useState<MortgageFees>(
-        parsedMortgageDetails.fees ?? {
-            valuationFee: 185,
-            surveyFee: 600,
-            // legalFee: 3382.5,
-            legalFee: 2800,
-            searchFee: 250,
-            registerOfDeedsFee: 100,
-            landRegistryFee: 975,
-        }
-    );
-
-    const [isPanelOpen, setIsPanelOpen] = React.useState(false);
-
-    const containerStackStyles = {
-        root: { alignItems: "center" },
-    };
-    const containerStackTokens = { childrenGap: 30 };
-    const comparisonStackTokens = { childrenGap: 40 };
-
-    useEffect(() => {
-        localStorage.setItem(
-            "mortgageDetails",
-            JSON.stringify({
-                fees,
-                interestRate,
-                useGlobalInterestRate,
-                maxLoan,
-                term,
-            })
-        );
-    }, [fees, interestRate, useGlobalInterestRate, maxLoan, term]);
-
-    return (
-        <Stack styles={containerStackStyles} tokens={containerStackTokens}>
-            <h1>Mortgage Comparison</h1>
-            <InterestRate
-                interestRate={interestRate}
-                setInterestRate={setInterestRate}
-                useGlobalInterestRate={useGlobalInterestRate}
-                setUseGlobalInterestRate={setUseGlobalInterestRate}
-            />
-
-            <MaxLoanInput maxLoan={maxLoan} setMaxLoan={setMaxLoan} />
-
-            <TermInput term={term} setTerm={setTerm} />
-
-            <PrimaryButton onClick={() => setIsPanelOpen(true)}>
-                View/Edit Fees
-            </PrimaryButton>
-
-            <Stack horizontal tokens={comparisonStackTokens} wrap>
-                <MortgageOption
-                    fees={fees}
-                    id={1}
-                    interestRate={interestRate}
-                    useGlobalInterestRate={useGlobalInterestRate}
-                    maxLoan={maxLoan}
-                    term={term}
-                />
-
-                <MortgageOption
-                    fees={fees}
-                    id={2}
-                    interestRate={interestRate}
-                    useGlobalInterestRate={useGlobalInterestRate}
-                    maxLoan={maxLoan}
-                    term={term}
-                />
-
-                <MortgageOption
-                    fees={fees}
-                    id={3}
-                    interestRate={interestRate}
-                    useGlobalInterestRate={useGlobalInterestRate}
-                    maxLoan={maxLoan}
-                    term={term}
-                />
-            </Stack>
-
-            <br />
-
-            <Text variant="medium" style={{ width: "70%" }}>
-                <strong>Disclaimer:</strong> This is a simple mortgage
-                comparison tool that calculates monthly payments based on the
-                interest rate, loan amount, and term. The numbers are all
-                estimates based on my own experience and research. Always
-                consult with a financial advisor before making any decisions.
-            </Text>
-
-            <Text variant="medium">
-                If you found this useful, consider{" "}
-                <Link
-                    href="https://www.buymeacoffee.com/ryanlynch"
-                    style={{ color: "rgb(33, 171, 56)" }}
-                    target="_blank"
-                >
-                    buying me a coffee! <Icon iconName="CoffeeScript" />{" "}
-                </Link>
-            </Text>
-
-            <FeesPanel
-                fees={fees}
-                setFees={setFees}
-                isPanelOpen={isPanelOpen}
-                setIsPanelOpen={setIsPanelOpen}
-            />
-        </Stack>
+  const savedMortgageDetails = localStorage.getItem("mortgageDetails");
+  const parsedMortgageDetails = JSON.parse(savedMortgageDetails ?? "{}");
+
+  const [firstTimeBuyer, setFirstTimeBuyer] = React.useState(true);
+
+  const [interestRate, setInterestRate] = React.useState<number | undefined>(
+    parsedMortgageDetails.interestRate ?? 4.0
+  );
+  const [useGlobalInterestRate, setUseGlobalInterestRate] = React.useState(
+    parsedMortgageDetails.useGlobalInterestRate ?? true
+  );
+
+  const [maxLoan, setMaxLoan] = React.useState(
+    parsedMortgageDetails.maxLoan ?? 0
+  );
+
+  const [term, setTerm] = React.useState(parsedMortgageDetails.term ?? 35);
+
+  const [fees, setFees] = React.useState<MortgageFees>(
+    parsedMortgageDetails.fees ?? {
+      valuationFee: 185,
+      surveyFee: 600,
+      // legalFee: 3382.5,
+      legalFee: 2800,
+      searchFee: 250,
+      registerOfDeedsFee: 100,
+      landRegistryFee: 975,
+    }
+  );
+
+  const [isPanelOpen, setIsPanelOpen] = React.useState(false);
+
+  const containerStackStyles = {
+    root: { alignItems: "center" },
+  };
+  const containerStackTokens = { childrenGap: 30 };
+  const comparisonStackTokens = { childrenGap: 40 };
+
+  useEffect(() => {
+    localStorage.setItem(
+      "mortgageDetails",
+      JSON.stringify({
+        fees,
+        interestRate,
+        useGlobalInterestRate,
+        maxLoan,
+        term,
+      })
     );
+  }, [fees, interestRate, useGlobalInterestRate, maxLoan, term]);
+
+  return (
+    <Stack styles={containerStackStyles} tokens={containerStackTokens}>
+      <h1>Mortgage Comparison</h1>
+
+      <Checkbox
+        label="First Time Buyer?"
+        checked={firstTimeBuyer}
+        onChange={(_e, checked) => {
+          if (checked === undefined) {
+            return;
+          }
+          setFirstTimeBuyer(checked);
+        }}
+      />
+
+      <InterestRate
+        interestRate={interestRate}
+        setInterestRate={setInterestRate}
+        useGlobalInterestRate={useGlobalInterestRate}
+        setUseGlobalInterestRate={setUseGlobalInterestRate}
+      />
+
+      <MaxLoanInput maxLoan={maxLoan} setMaxLoan={setMaxLoan} />
+
+      <TermInput term={term} setTerm={setTerm} />
+
+      <PrimaryButton onClick={() => setIsPanelOpen(true)}>
+        View/Edit Fees
+      </PrimaryButton>
+
+      <Stack horizontal tokens={comparisonStackTokens} wrap>
+        <MortgageOption
+          fees={fees}
+          firstTimeBuyer={firstTimeBuyer}
+          id={1}
+          interestRate={interestRate}
+          useGlobalInterestRate={useGlobalInterestRate}
+          maxLoan={maxLoan}
+          term={term}
+        />
+
+        <MortgageOption
+          fees={fees}
+          firstTimeBuyer={firstTimeBuyer}
+          id={2}
+          interestRate={interestRate}
+          useGlobalInterestRate={useGlobalInterestRate}
+          maxLoan={maxLoan}
+          term={term}
+        />
+
+        <MortgageOption
+          fees={fees}
+          firstTimeBuyer={firstTimeBuyer}
+          id={3}
+          interestRate={interestRate}
+          useGlobalInterestRate={useGlobalInterestRate}
+          maxLoan={maxLoan}
+          term={term}
+        />
+      </Stack>
+
+      <br />
+
+      <Text variant="medium" style={{ width: "70%" }}>
+        <strong>Disclaimer:</strong> This is a simple mortgage comparison tool
+        that calculates monthly payments based on the interest rate, loan
+        amount, and term. The numbers are all estimates based on my own
+        experience and research. Always consult with a financial advisor before
+        making any decisions.
+      </Text>
+
+      <Text variant="medium">
+        If you found this useful, consider{" "}
+        <Link
+          href="https://www.buymeacoffee.com/ryanlynch"
+          style={{ color: "rgb(33, 171, 56)" }}
+          target="_blank"
+        >
+          buying me a coffee! <Icon iconName="CoffeeScript" />{" "}
+        </Link>
+      </Text>
+
+      <FeesPanel
+        fees={fees}
+        setFees={setFees}
+        isPanelOpen={isPanelOpen}
+        setIsPanelOpen={setIsPanelOpen}
+      />
+    </Stack>
+  );
 };
 
 interface MortgageOptionProps {
-    fees: MortgageFees;
-    id: number;
-    interestRate: number | undefined;
-    useGlobalInterestRate: boolean;
-    maxLoan: number;
-    term: number;
+  fees: MortgageFees;
+  firstTimeBuyer: boolean;
+  id: number;
+  interestRate: number | undefined;
+  useGlobalInterestRate: boolean;
+  maxLoan: number;
+  term: number;
 }
 
 const MortgageOption: React.FC<MortgageOptionProps> = (
-    props: MortgageOptionProps
+  props: MortgageOptionProps
 ) => {
-    const { fees, id, interestRate, useGlobalInterestRate, maxLoan, term } =
-        props;
-
-    return (
-        <Stack.Item grow>
-            <Stack horizontalAlign="center">
-                <h2>Option {id}</h2>
-
-                <MortgageDetails
-                    id={id}
-                    fees={fees}
-                    interestRate={
-                        useGlobalInterestRate ? interestRate : undefined
-                    }
-                    maxLoan={maxLoan}
-                    term={term}
-                />
-            </Stack>
-        </Stack.Item>
-    );
+  const {
+    fees,
+    firstTimeBuyer,
+    id,
+    interestRate,
+    useGlobalInterestRate,
+    maxLoan,
+    term,
+  } = props;
+
+  return (
+    <Stack.Item grow>
+      <Stack horizontalAlign="center">
+        <h2>Option {id}</h2>
+
+        <MortgageDetails
+          id={id}
+          fees={fees}
+          firstTimeBuyer={firstTimeBuyer}
+          interestRate={useGlobalInterestRate ? interestRate : undefined}
+          maxLoan={maxLoan}
+          term={term}
+        />
+      </Stack>
+    </Stack.Item>
+  );
 };