Merge pull request #29 from UniqueClone/main

Adding tooltip to view savings required breakdown.
UniqueClone · Jul 16, 2024 · bbef4ba · bbef4ba
2 parents 4621c6e + d4e0339
commit bbef4ba
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 23 deletions.
diff --git a/src/App.css b/src/App.css
@@ -3,3 +3,7 @@
   margin: 0 auto;
   padding: 2rem;
 }
+
+.tooltip {
+  border: 1px solid white;
+}
diff --git a/src/components/FeesPanel/FeesPanel.tsx b/src/components/FeesPanel/FeesPanel.tsx
@@ -111,16 +111,6 @@ export const FeesPanel: React.FC<FeesPanelProps> = (props: FeesPanelProps) => {
                         })
                     }
                 />
-
-                <br />
-
-                {/* <PrimaryButton
-                        onClick={() => {
-                            setIsPanelOpen(false);
-                        }}
-                    >
-                        Close
-                    </PrimaryButton> */}
             </Stack>
         </Panel>
     );

diff --git a/src/components/MortgageComparison/MortgageComparison.tsx b/src/components/MortgageComparison/MortgageComparison.tsx
@@ -78,7 +78,10 @@ export const MortgageComparison: React.FC<MortgageComparisonProps> = () => {
                 <MortgageOption
                     fees={fees}
                     id={3}
-                    {...{ interestRate, useGlobalInterestRate, maxLoan, term }}
+                    interestRate={interestRate}
+                    useGlobalInterestRate={useGlobalInterestRate}
+                    maxLoan={maxLoan}
+                    term={term}
                 />
             </Stack>
 

diff --git a/src/components/MortgageDetails/MortgageDetails.tsx b/src/components/MortgageDetails/MortgageDetails.tsx
@@ -25,7 +25,6 @@ export const MortgageDetails: React.FC<MortgageDetailsProps> = (
     props: MortgageDetailsProps
 ) => {
     const { fees, interestRate, maxLoan, term } = props;
-    console.log(interestRate);
     const [localInterestRate, setLocalInterestRate] = React.useState<number>(
         interestRate ?? 4.0
     );
@@ -45,7 +44,7 @@ export const MortgageDetails: React.FC<MortgageDetailsProps> = (
             return;
         } else if (isNaN(parseFloat(newValue))) {
             return;
-        } else if (parseFloat(newValue) > maxLoan) {
+        } else if (parseFloat(newValue) > maxLoan && maxLoan > 0) {
             setLoanAmount(maxLoan);
             return;
         } else if (parseFloat(newValue) < 0) {
@@ -60,7 +59,6 @@ export const MortgageDetails: React.FC<MortgageDetailsProps> = (
         <Stack styles={containerStackStyles} tokens={containerStackTokens}>
             <Stack.Item grow>
                 <TextField
-                    defaultValue={"0"}
                     label="House Price"
                     onChange={(_e, newValue) => {
                         if (newValue === undefined) {
@@ -109,6 +107,7 @@ export const MortgageDetails: React.FC<MortgageDetailsProps> = (
 
             <Stack.Item grow>
                 <TooltipHost
+                    className="tooltip"
                     content="The maximum loan amount you can borrow is 90% of the house value, or the max loan amount you have set."
                     directionalHint={5}
                 >
@@ -131,15 +130,35 @@ export const MortgageDetails: React.FC<MortgageDetailsProps> = (
             </Stack.Item>
 
             <Stack.Item grow>
-                <Text variant="xLarge" style={{ color: "lightgreen" }}>
-                    {formatter.format(
-                        savingsRequired(
-                            houseValue,
-                            houseValue - loanAmount,
-                            fees
-                        )
-                    )}
-                </Text>
+                <TooltipHost
+                    className="tooltip"
+                    tooltipProps={{
+                        onRenderContent: () => (
+                            <Stack tokens={{ childrenGap: 10 }}>
+                                <Text variant="medium">
+                                    Deposit:{" "}
+                                    {formatter.format(houseValue - loanAmount)}
+                                </Text>
+                                <Text variant="medium">
+                                    Fees:{" "}
+                                    {formatter.format(
+                                        savingsRequired(0, 0, fees)
+                                    )}
+                                </Text>
+                            </Stack>
+                        ),
+                    }}
+                >
+                    <Text variant="xLarge" style={{ color: "lightgreen" }}>
+                        {formatter.format(
+                            savingsRequired(
+                                houseValue,
+                                houseValue - loanAmount,
+                                fees
+                            )
+                        )}{" "}
+                    </Text>
+                </TooltipHost>
             </Stack.Item>
 
             <Stack.Item grow>