From 30ca58471be37ea6d1636824ce3d4be16d26f9f1 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Fri, 18 Oct 2024 13:53:04 +0100
Subject: [PATCH] testing adding valuation and funding components

---
 .../api/property-meta/[propertyId]/route.ts   |  1 +
 src/app/components/Buttons.tsx                | 10 ++-
 .../RecommendationContainer.tsx               | 10 +++
 .../ValuationImpactComponent.tsx              | 62 +++++++++++++++++++
 src/app/db/schema/property.ts                 |  1 +
 .../[propertyId]/plans/[planId]/page.tsx      |  4 +-
 .../building-passport/[propertyId]/utils.ts   | 15 ++++-
 tailwind.config.js                            |  2 +
 8 files changed, 101 insertions(+), 4 deletions(-)
 create mode 100644 src/app/components/building-passport/ValuationImpactComponent.tsx

diff --git a/src/app/api/property-meta/[propertyId]/route.ts b/src/app/api/property-meta/[propertyId]/route.ts
index 11f001b..6996cff 100644
--- a/src/app/api/property-meta/[propertyId]/route.ts
+++ b/src/app/api/property-meta/[propertyId]/route.ts
@@ -29,6 +29,7 @@ export async function GET(
       currentEpcRating: true,
       currentSapPoints: true,
       updatedAt: true,
+      currentValuation: true,
     },
     where: eq(property.id, BigInt(propertyId)),
     with: {
diff --git a/src/app/components/Buttons.tsx b/src/app/components/Buttons.tsx
index 9d2d87d..962e9cf 100644
--- a/src/app/components/Buttons.tsx
+++ b/src/app/components/Buttons.tsx
@@ -26,19 +26,25 @@ export function BrandButton({
 }: {
   label: string;
   onClick: Dispatch<SetStateAction<any>>;
-  backgroundColor: "brandblue" | "brandgold"; // Restrict backgroundColor to these two options
+  backgroundColor:
+    | "brandblue"
+    | "brandgold"
+    | "brandmidblue"
+    | "brandlightblue"; // Restrict backgroundColor to these two options
 }) {
   // Dictionary to map background colors to hover colors
   const hoverColors = {
     brandblue: "hover:bg-hoverblue",
     brandgold: "hover:bg-hovergold",
+    brandmidblue: "hover:bg-hoverblue",
+    brandlightblue: "hover:bg-brandmidblue",
   };
 
   return (
     <button
       type="button"
       className={`inline-flex justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2
-        ${backgroundColor === "brandblue" ? "bg-brandblue" : "bg-brandgold"} 
+        bg-${backgroundColor} 
         ${hoverColors[backgroundColor]}`}
       onClick={onClick}
     >
diff --git a/src/app/components/building-passport/RecommendationContainer.tsx b/src/app/components/building-passport/RecommendationContainer.tsx
index 55bfa42..d6c5bd8 100644
--- a/src/app/components/building-passport/RecommendationContainer.tsx
+++ b/src/app/components/building-passport/RecommendationContainer.tsx
@@ -3,9 +3,11 @@
 import {
   Recommendation,
   RecommendationType,
+  Plan,
 } from "@/app/db/schema/recommendations";
 import RecommendationCard from "./RecommendationCard";
 import WorksPackageCard from "./WorksPackageCard";
+import ValuationImpactComponent from "./ValuationImpactComponent";
 import { Separator } from "@/app/shadcn_components/ui/separator";
 import { PropertyMeta } from "@/app/db/schema/property";
 import { sapToEpc } from "@/app/utils";
@@ -20,6 +22,7 @@ import {
 interface RecommendationContainerProps {
   recommendations: Recommendation[];
   propertyMeta: PropertyMeta;
+  planMeta: Plan;
 }
 
 const typeToCategoryMap: { [key in RecommendationType]?: RecommendationType } =
@@ -50,6 +53,7 @@ const emptyImpactState = {
 export default function RecommendationContainer({
   recommendations,
   propertyMeta,
+  planMeta,
 }: RecommendationContainerProps) {
   const categorizedRecommendations = recommendations.reduce((acc, curr) => {
     const typeKey = curr.type as RecommendationType;
@@ -337,6 +341,12 @@ export default function RecommendationContainer({
           totalEnergyCostSavings={totalEnergyCostSavings}
           totalKwhSavings={totalKwhSavings}
         />
+
+        <ValuationImpactComponent
+          currentValuation={propertyMeta.currentValuation}
+          valuationIncreaseLowerBound={planMeta.valuationIncreaseLowerBound}
+          valuationIncreaseUpperBound={planMeta.valuationIncreaseUpperBound}
+        />
       </div>
 
       <Separator className="mb-4 bg-brandblue" />
diff --git a/src/app/components/building-passport/ValuationImpactComponent.tsx b/src/app/components/building-passport/ValuationImpactComponent.tsx
new file mode 100644
index 0000000..2611a1d
--- /dev/null
+++ b/src/app/components/building-passport/ValuationImpactComponent.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { BrandButton } from "../Buttons";
+import { useState } from "react";
+
+export default function ValuationImpactComponent({
+  currentValuation,
+  valuationIncreaseLowerBound,
+  valuationIncreaseUpperBound,
+}: {
+  currentValuation: number | null;
+  valuationIncreaseLowerBound: number | null;
+  valuationIncreaseUpperBound: number | null;
+}) {
+  const [fundingModalIsOpen, setFundingModalIsOpen] = useState(false);
+  // If we have no current valuation, we return no component
+  if (!currentValuation) {
+    return <></>;
+  }
+
+  const lowerBoundValuation =
+    currentValuation + (valuationIncreaseLowerBound ?? 0);
+  const upperBoundValuation =
+    currentValuation + (valuationIncreaseUpperBound ?? 0);
+
+  function openFundingModal() {
+    setFundingModalIsOpen(true);
+  }
+
+  return (
+    <div className="col-span-1 md:col-span-2 lg:col-span-3 w-full p-4 bg-brandblue rounded-lg shadow-md grid grid-cols-1 md:grid-cols-3 gap-6">
+      <div className="flex flex-col items-center text-center">
+        <span className="text-gray-100 text-lg">Current Value</span>
+        <span className="text-3xl font-bold text-brandgold mt-1">
+          £{currentValuation.toLocaleString()}
+        </span>
+      </div>
+
+      <div className="flex flex-col items-center text-center">
+        <span className="text-gray-100 text-lg">After Retrofit Valuation</span>
+        <div className="text-2xl text-brandgold mt-1">
+          £{lowerBoundValuation.toLocaleString()} - £
+          {upperBoundValuation.toLocaleString()}
+        </div>
+        <span className="text-sm text-gray-100 mt-1">
+          Estimated improvement: £
+          {valuationIncreaseLowerBound?.toLocaleString()} - £
+          {valuationIncreaseUpperBound?.toLocaleString()}
+        </span>
+      </div>
+
+      <div className="flex flex-col items-center text-center">
+        <span className="text-gray-100 text-lg">Funding Options</span>
+        <BrandButton
+          label="See More"
+          onClick={openFundingModal}
+          backgroundColor="brandlightblue"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/db/schema/property.ts b/src/app/db/schema/property.ts
index b55609a..75488ee 100644
--- a/src/app/db/schema/property.ts
+++ b/src/app/db/schema/property.ts
@@ -32,6 +32,7 @@ export interface PropertyMeta {
   currentEpcRating: string;
   currentSapPoints: number;
   updatedAt: string;
+  currentValuation: number | null;
   detailsEpc: {
     currentEnergyDemand: number | null;
     co2Emissions: number | null;
diff --git a/src/app/portfolio/[slug]/building-passport/[propertyId]/plans/[planId]/page.tsx b/src/app/portfolio/[slug]/building-passport/[propertyId]/plans/[planId]/page.tsx
index a0ee436..5e79ea8 100644
--- a/src/app/portfolio/[slug]/building-passport/[propertyId]/plans/[planId]/page.tsx
+++ b/src/app/portfolio/[slug]/building-passport/[propertyId]/plans/[planId]/page.tsx
@@ -1,5 +1,5 @@
 import RecommendationContainer from "@/app/components/building-passport/RecommendationContainer";
-import { getPropertyMeta, getRecommendations } from "../../utils";
+import { getPropertyMeta, getRecommendations, getPlanMeta } from "../../utils";
 
 export default async function Recommendations({
   params,
@@ -8,6 +8,7 @@ export default async function Recommendations({
 }) {
   const propertyMeta = await getPropertyMeta(params.propertyId);
   const recommendations = await getRecommendations(params.planId);
+  const planMeta = await getPlanMeta(params.planId);
 
   return (
     <div className="leading-loose tracking-wider">
@@ -15,6 +16,7 @@ export default async function Recommendations({
       <RecommendationContainer
         recommendations={recommendations}
         propertyMeta={propertyMeta}
+        planMeta={planMeta}
       />
     </div>
   );
diff --git a/src/app/portfolio/[slug]/building-passport/[propertyId]/utils.ts b/src/app/portfolio/[slug]/building-passport/[propertyId]/utils.ts
index 37ded61..487ea86 100644
--- a/src/app/portfolio/[slug]/building-passport/[propertyId]/utils.ts
+++ b/src/app/portfolio/[slug]/building-passport/[propertyId]/utils.ts
@@ -1,6 +1,8 @@
 import {
   Recommendation,
   planRecommendations,
+  plan,
+  Plan,
 } from "@/app/db/schema/recommendations";
 import { db } from "@/app/db/db";
 import {
@@ -14,7 +16,6 @@ import {
   NonIntrusiveSurveyData,
   nonInstrusiveSurvey,
 } from "@/app/db/schema/property";
-import { plan, Plan } from "@/app/db/schema/recommendations";
 import { getRating } from "@/app/utils";
 import { eq, desc } from "drizzle-orm";
 import {
@@ -85,6 +86,18 @@ export async function getRecommendations(
   return recommendations;
 }
 
+export async function getPlanMeta(planId: string): Promise<Plan> {
+  const data = await db.query.plan.findFirst({
+    where: eq(plan.id, BigInt(planId)),
+  });
+
+  if (!data) {
+    throw new Error("Network response was not ok");
+  }
+
+  return data;
+}
+
 type PlanRelation = Plan & {
   planRecommendations: {
     recommendation: {
diff --git a/tailwind.config.js b/tailwind.config.js
index 7521e9e..80e8463 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -104,6 +104,7 @@ module.exports = {
         hovergold: "#c79d12",
         brandbrown: "#3d1e05",
         brandmidblue: "#3943b7",
+        brandlightblue: "#00a9f4",
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
@@ -145,6 +146,7 @@ module.exports = {
         hovertan: "#947750",
         brandbrown: "#3d1e05",
         brandmidblue: "#3943b7",
+        brandlightblue: "#00a9f4",
       },
       borderRadius: {
         lg: `var(--radius)`,