Merge pull request #27 from UniqueClone/main

Adding ability to view and edit fees.

src/components/FeesPanel/FeesPanel.tsx

@@ -0,0 +1,127 @@
+import { Panel, PrimaryButton, Stack, Text, TextField } from "@fluentui/react";
+import React from "react";
+import { MortgageFees } from "../MortgageDetails/MortgageDetails.mapper";
+
+interface FeesPanelProps {
+    fees: MortgageFees;
+    setFees: React.Dispatch<React.SetStateAction<MortgageFees>>;
+    isPanelOpen: boolean;
+    setIsPanelOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const FeesPanel: React.FC<FeesPanelProps> = (props: FeesPanelProps) => {
+    const { fees, setFees, isPanelOpen, setIsPanelOpen } = props;
+
+    return (
+        <Panel
+            isOpen={isPanelOpen}
+            onDismiss={() => setIsPanelOpen(false)}
+            headerText="Mortgage Fees"
+            onRenderFooterContent={() => (
+                <PrimaryButton
+                    onClick={() => {
+                        setIsPanelOpen(false);
+                    }}
+                >
+                    Close
+                </PrimaryButton>
+            )}
+        >
+            <Stack tokens={{ childrenGap: 20 }}>
+                <Text variant="medium">
+                    These are the fees associated with taking out a mortgage on
+                    a property. They are estimates and can vary depending on the
+                    lender and the property.
+                </Text>
+
+                <TextField
+                    label="Valuation Fee"
+                    prefix="€"
+                    type="number"
+                    value={fees.valuationFee.toString()}
+                    onChange={(_, newValue) =>
+                        setFees({
+                            ...fees,
+                            valuationFee: parseFloat(newValue!),
+                        })
+                    }
+                />
+
+                <TextField
+                    label="Survey Fee"
+                    prefix="€"
+                    type="number"
+                    value={fees.surveyFee.toString()}
+                    onChange={(_, newValue) =>
+                        setFees({
+                            ...fees,
+                            surveyFee: parseFloat(newValue!),
+                        })
+                    }
+                />
+
+                <TextField
+                    label="Legal Fee"
+                    prefix="€"
+                    type="number"
+                    value={fees.legalFee.toString()}
+                    onChange={(_, newValue) =>
+                        setFees({
+                            ...fees,
+                            legalFee: parseFloat(newValue!),
+                        })
+                    }
+                />
+
+                <TextField
+                    label="Search Fee"
+                    prefix="€"
+                    type="number"
+                    value={fees.searchFee.toString()}
+                    onChange={(_, newValue) =>
+                        setFees({
+                            ...fees,
+                            searchFee: parseFloat(newValue!),
+                        })
+                    }
+                />
+
+                <TextField
+                    label="Register of Deeds Fee"
+                    prefix="€"
+                    type="number"
+                    value={fees.registerOfDeedsFee.toString()}
+                    onChange={(_, newValue) =>
+                        setFees({
+                            ...fees,
+                            registerOfDeedsFee: parseFloat(newValue!),
+                        })
+                    }
+                />
+
+                <TextField
+                    label="Land Registry Fee"
+                    prefix="€"
+                    type="number"
+                    value={fees.landRegistryFee.toString()}
+                    onChange={(_, newValue) =>
+                        setFees({
+                            ...fees,
+                            landRegistryFee: parseFloat(newValue!),
+                        })
+                    }
+                />
+
+                <br />
+
+                {/* <PrimaryButton
+                        onClick={() => {
+                            setIsPanelOpen(false);
+                        }}
+                    >
+                        Close
+                    </PrimaryButton> */}
+            </Stack>
+        </Panel>
+    );
+};

src/components/MortgageComparison/MortgageComparison.tsx

@@ -1,9 +1,11 @@
-import { Icon, Link, Stack, Text } from "@fluentui/react";
+import { Icon, Link, PrimaryButton, Stack, Text } from "@fluentui/react";
 import React from "react";
 import { InterestRate } from "../InterestRate/InterestRate";
 import { MaxLoanInput } from "../MaxLoanInput/MaxLoanInput";
 import { TermInput } from "../TermInput/TermInput";
 import { MortgageDetails } from "../MortgageDetails/MortgageDetails";
+import { MortgageFees } from "../MortgageDetails/MortgageDetails.mapper";
+import { FeesPanel } from "../FeesPanel/FeesPanel";
 
 export interface MortgageComparisonProps {}
 
@@ -18,6 +20,18 @@ export const MortgageComparison: React.FC<MortgageComparisonProps> = () => {
 
     const [term, setTerm] = React.useState(35);
 
+    const [fees, setFees] = React.useState<MortgageFees>({
+        valuationFee: 185,
+        surveyFee: 600,
+        // legalFee: 3382.5,
+        legalFee: 3400,
+        searchFee: 250,
+        registerOfDeedsFee: 100,
+        landRegistryFee: 975,
+    });
+
+    const [isPanelOpen, setIsPanelOpen] = React.useState(false);
+
     const containerStackStyles = {
         root: { alignItems: "center" },
     };
@@ -33,10 +47,18 @@ export const MortgageComparison: React.FC<MortgageComparisonProps> = () => {
                 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}
@@ -45,6 +67,7 @@ export const MortgageComparison: React.FC<MortgageComparisonProps> = () => {
                 />
 
                 <MortgageOption
+                    fees={fees}
                     id={2}
                     interestRate={interestRate}
                     useGlobalInterestRate={useGlobalInterestRate}
@@ -53,6 +76,7 @@ export const MortgageComparison: React.FC<MortgageComparisonProps> = () => {
                 />
 
                 <MortgageOption
+                    fees={fees}
                     id={3}
                     {...{ interestRate, useGlobalInterestRate, maxLoan, term }}
                 />
@@ -77,11 +101,19 @@ export const MortgageComparison: React.FC<MortgageComparisonProps> = () => {
                     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;
@@ -92,14 +124,16 @@ interface MortgageOptionProps {
 const MortgageOption: React.FC<MortgageOptionProps> = (
     props: MortgageOptionProps
 ) => {
-    const { id, interestRate, useGlobalInterestRate, maxLoan, term } = props;
+    const { fees, id, interestRate, useGlobalInterestRate, maxLoan, term } =
+        props;
 
     return (
         <Stack.Item grow>
             <Stack horizontalAlign="center">
                 <h2>Option {id}</h2>
 
                 <MortgageDetails
+                    fees={fees}
                     interestRate={
                         useGlobalInterestRate ? interestRate : undefined
                     }

src/components/MortgageDetails/MortgageDetails.tsx

@@ -15,6 +15,7 @@ import {
 } from "./MortgageDetails.mapper";
 
 export interface MortgageDetailsProps {
+    fees: MortgageFees;
     interestRate: number | undefined;
     maxLoan: number;
     term: number;
@@ -23,7 +24,7 @@ export interface MortgageDetailsProps {
 export const MortgageDetails: React.FC<MortgageDetailsProps> = (
     props: MortgageDetailsProps
 ) => {
-    const { interestRate, maxLoan, term } = props;
+    const { fees, interestRate, maxLoan, term } = props;
     console.log(interestRate);
     const [localInterestRate, setLocalInterestRate] = React.useState<number>(
         interestRate ?? 4.0
@@ -36,15 +37,6 @@ export const MortgageDetails: React.FC<MortgageDetailsProps> = (
     };
     const containerStackTokens = { childrenGap: 30 };
 
-    const fees: MortgageFees = {
-        valuationFee: 185,
-        surveyFee: 600,
-        legalFee: 3382.5,
-        searchFee: 250,
-        registerOfDeedsFee: 100,
-        landRegistryFee: 975,
-    };
-
     const handleLoanAmountChange = (newValue: string | undefined) => {
         if (newValue === undefined) {
             return;