From f3793ad020a11ab16d40eddd416ac5b7898fe4e0 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Wed, 31 May 2023 09:51:49 +0100
Subject: [PATCH] Added epc target popup on summary box in plan

---
 src/app/components/plan/PlanPart.tsx          |  4 +-
 .../[slug]/property/[lmkKey]/plan/page.tsx    | 45 ++++++++++++++-----
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/app/components/plan/PlanPart.tsx b/src/app/components/plan/PlanPart.tsx
index 4890e42..75f5f76 100644
--- a/src/app/components/plan/PlanPart.tsx
+++ b/src/app/components/plan/PlanPart.tsx
@@ -22,7 +22,7 @@ export default function PlanPart({
     { label: "option 2", value: "option 2" },
     { label: "option 3", value: "option 3" },
     { label: "option 4", value: "option 4" },
-    { label: "option 5", value: "option 5" },
+    { label: "option5", value: "option 5" },
   ];
 
   const [selectedOption, setSelectedOption] = useState(options[0].value);
@@ -37,7 +37,7 @@ export default function PlanPart({
       <h2 className="flex-1 text-lg font-bold mb-2 text-left">{title}</h2>
       <div>{selectedOption}</div>
       <div className="flex-1 text-center">
-        <p>Cost: {cost}</p>
+        <p>Cost: £{cost}</p>
       </div>
       <div className="flex-1 text-center">
         <p>CO2 Emissions: {co2Emissions}</p>
diff --git a/src/app/portfolio/[slug]/property/[lmkKey]/plan/page.tsx b/src/app/portfolio/[slug]/property/[lmkKey]/plan/page.tsx
index 9d1adf9..89eb386 100644
--- a/src/app/portfolio/[slug]/property/[lmkKey]/plan/page.tsx
+++ b/src/app/portfolio/[slug]/property/[lmkKey]/plan/page.tsx
@@ -1,12 +1,13 @@
 "use client";
 
-import { SearchData } from "@/types/epc";
+import { EpcRating, SearchData } from "@/types/epc";
 import { useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 import { fetchData } from "../utils";
 import { useState } from "react";
 import { PencilSquareIcon } from "@heroicons/react/24/outline";
 import PlanPart from "@/app/components/plan/PlanPart";
+import EditEpctargetModal from "@/app/components/property/EditEpcTargetModal";
 
 export default function Plan({
   params,
@@ -20,12 +21,8 @@ export default function Plan({
   const portfolioId = params.slug;
   const lmkKey = params.lmkKey;
   const postcode = searchParams.postcode;
-  const targetEpcRating = searchParams.targetEpcRating ?? "C";
-
-  const [budget, setBudget] = useState("Not set");
-  const [totalCost, setTotalCost] = useState("Not set");
-  const [installTime, setInstallTime] = useState("Not set");
 
+  // Temp config for the demo
   const partsConfig = [
     { part: "Roof", cost: 1000, co2Emissions: 50, workHours: 20 },
     { part: "Walls", cost: 1000, co2Emissions: 50, workHours: 20 },
@@ -57,6 +54,19 @@ export default function Plan({
     },
   ];
 
+  const totalWorkHours = partsConfig.reduce(
+    (sum, part) => sum + part.workHours,
+    0
+  );
+
+  const [budget, setBudget] = useState("Not set");
+  const [totalCost, setTotalCost] = useState("Not set");
+  const [installTime, setInstallTime] = useState(totalWorkHours);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [targetEpcRating, setTargetEpcRating] = useState<EpcRating | "">(
+    (searchParams.targetEpcRating as EpcRating) ?? "C"
+  );
+
   if (postcode === undefined) {
     router.push(`/portfolio/${portfolioId}/error`);
   }
@@ -101,15 +111,19 @@ export default function Plan({
             <div className="bg-brandmidblue p-4 rounded-lg shadow text-white ">
               <h2 className="text-lg font-bold mb-4">Summary</h2>
               <ul>
-                <li className="mb-2 mb-2 flex items-center cursor-pointer">
+                <li
+                  onClick={() => setIsEditModalOpen(true)}
+                  className="px-2 mb-2 flex items-center cursor-pointer hover:bg-brandblue hover:rounded-md transition-colors duration-200"
+                >
                   Target EPC: {targetEpcRating}
                   <PencilSquareIcon className="h-6 w-6 ml-2" />
                 </li>
-                <li className="mb-2">Total cost: {totalCost}</li>
-                <li className="mb-2">Budget: {budget}</li>
-                <li className="mb-2">Installation Time: {installTime}</li>
-                {/* flex items-center text-brandmidblue hover:text-brandblue transition-colors duration-200 cursor-pointer */}
-                <li className="mb-2 flex items-center cursor-pointer">
+                <li className="px-2 mb-2">Total cost: {totalCost}</li>
+                <li className="px-2 mb-2">Budget: {budget}</li>
+                <li className="px-2 mb-2">
+                  Installation Time: {installTime} hours
+                </li>
+                <li className="px-2 mb-2 flex items-center cursor-pointer hover:bg-brandblue hover:rounded-md transition-colors duration-200">
                   Edit Property Details
                   <PencilSquareIcon className="h-6 w-6 ml-2" />
                 </li>
@@ -118,6 +132,13 @@ export default function Plan({
           </div>
         </div>
       </div>
+      <EditEpctargetModal
+        isEditModalOpen={isEditModalOpen}
+        setIsEditModalOpen={setIsEditModalOpen}
+        setTargetEpcRating={setTargetEpcRating}
+        targetEpcRating={targetEpcRating}
+        currentEpcRating={propertyData["current-energy-rating"]}
+      />
     </section>
   );
 }