From 8de210dd00540d31c01d074be6f5af8c9a9934f8 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Wed, 31 May 2023 13:08:24 +0100
Subject: [PATCH] added dynmaic prices to parts and changes update logic on
 parts

---
 src/app/components/plan/PartDropdown.tsx      |  1 +
 src/app/components/plan/PartModal.tsx         | 35 +++++++++++------
 src/app/components/plan/PlanPart.tsx          | 38 +++++++++++++++----
 .../[slug]/property/[lmkKey]/plan/page.tsx    | 24 ++++++------
 4 files changed, 67 insertions(+), 31 deletions(-)

diff --git a/src/app/components/plan/PartDropdown.tsx b/src/app/components/plan/PartDropdown.tsx
index 7cf89474..35e9e32f 100644
--- a/src/app/components/plan/PartDropdown.tsx
+++ b/src/app/components/plan/PartDropdown.tsx
@@ -5,6 +5,7 @@ import { ChevronDownIcon } from "@heroicons/react/20/solid";
 type Option = {
   label: string;
   value: string;
+  cost: number;
 };
 
 type DropdownProps = {
diff --git a/src/app/components/plan/PartModal.tsx b/src/app/components/plan/PartModal.tsx
index 955c6e10..a4b99403 100644
--- a/src/app/components/plan/PartModal.tsx
+++ b/src/app/components/plan/PartModal.tsx
@@ -3,6 +3,17 @@ import { Dispatch, Fragment, SetStateAction, useState } from "react";
 import { TanButton } from "../Buttons";
 import PartDropdown from "./PartDropdown";
 
+type ParModalProps = {
+  title: string;
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+  options: { label: string; value: string; cost: number }[];
+  selectedOption: string;
+  setSelectedOption: Dispatch<SetStateAction<string>>;
+  cost: number;
+  setCost: Dispatch<SetStateAction<number>>;
+};
+
 export default function PartModal({
   title,
   isOpen,
@@ -10,20 +21,19 @@ export default function PartModal({
   options,
   selectedOption,
   setSelectedOption,
-}: {
-  title: string;
-  isOpen: boolean;
-  setIsOpen: Dispatch<SetStateAction<boolean>>;
-  options: { label: string; value: string }[];
-  selectedOption: string;
-  setSelectedOption: Dispatch<SetStateAction<string>>;
-}) {
+  cost,
+  setCost,
+}: ParModalProps) {
   function handleModalSubmit() {
     // Right now the dropdown is setting the state on the selected option so we might not need
-    // to do anything here
+    setSelectedOption(optionInput);
+    setCost(costInput);
     setIsOpen(false);
   }
 
+  const [costInput, setCostInput] = useState<number>(cost);
+  const [optionInput, setOptionInput] = useState<string>(selectedOption);
+
   return (
     <>
       <Transition appear show={isOpen} as={Fragment}>
@@ -69,9 +79,10 @@ export default function PartModal({
                     </div>
                     <PartDropdown
                       options={options}
-                      onSelectOption={(option) =>
-                        setSelectedOption(option.value)
-                      }
+                      onSelectOption={(option) => {
+                        setOptionInput(option.value);
+                        setCostInput(option.cost);
+                      }}
                       selectedOption={selectedOption}
                     />
                   </div>
diff --git a/src/app/components/plan/PlanPart.tsx b/src/app/components/plan/PlanPart.tsx
index 75f5f768..9ba72ac9 100644
--- a/src/app/components/plan/PlanPart.tsx
+++ b/src/app/components/plan/PlanPart.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import PartModal from "./PartModal";
+import { formatNumber } from "@/app/utils";
 
 type PlanPartProps = {
   title: string;
@@ -15,14 +16,35 @@ export default function PlanPart({
   workHours,
 }: PlanPartProps) {
   const [isOpen, setIsOpen] = useState(false);
+  const [partCost, setPartCost] = useState(cost);
 
   // These are temporary options for the demo
   const options = [
-    { label: "option 1", value: "option 1" },
-    { label: "option 2", value: "option 2" },
-    { label: "option 3", value: "option 3" },
-    { label: "option 4", value: "option 4" },
-    { label: "option5", value: "option 5" },
+    {
+      label: "option 1: £" + formatNumber(cost + 0.05 * cost),
+      value: "option 1",
+      cost: cost + 0.05 * cost,
+    },
+    {
+      label: "option 2: £" + formatNumber(cost + 0.1 * cost),
+      value: "option 2",
+      cost: cost + 0.1 * cost,
+    },
+    {
+      label: "option 3: £" + formatNumber(cost + 0.15 * cost),
+      value: "option 3",
+      cost: cost + 0.15 * cost,
+    },
+    {
+      label: "option 4: £" + formatNumber(cost + 0.2 * cost),
+      value: "option 4",
+      cost: cost + 0.2 * cost,
+    },
+    {
+      label: "option 5: £" + formatNumber(cost + 0.25 * cost),
+      value: "option 5",
+      cost: cost + 0.25 * cost,
+    },
   ];
 
   const [selectedOption, setSelectedOption] = useState(options[0].value);
@@ -37,10 +59,10 @@ 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: £{partCost}</p>
       </div>
       <div className="flex-1 text-center">
-        <p>CO2 Emissions: {co2Emissions}</p>
+        <p>CO2 Reduction: {co2Emissions}</p>
       </div>
       <div className="flex-1 text-center">
         <p>Work Hours: {workHours}</p>
@@ -52,6 +74,8 @@ export default function PlanPart({
         options={options}
         selectedOption={selectedOption}
         setSelectedOption={setSelectedOption}
+        cost={partCost}
+        setCost={setPartCost}
       />
     </div>
   );
diff --git a/src/app/portfolio/[slug]/property/[lmkKey]/plan/page.tsx b/src/app/portfolio/[slug]/property/[lmkKey]/plan/page.tsx
index 25fe8d63..d4d754ed 100644
--- a/src/app/portfolio/[slug]/property/[lmkKey]/plan/page.tsx
+++ b/src/app/portfolio/[slug]/property/[lmkKey]/plan/page.tsx
@@ -27,31 +27,31 @@ export default function Plan({
 
   // Temp config for the demo
   const partsConfig = [
-    { part: "Roof", cost: 1000, co2Emissions: 50, workHours: 20 },
-    { part: "Walls", cost: 1000, co2Emissions: 50, workHours: 20 },
-    { part: "Floors", cost: 1000, co2Emissions: 50, workHours: 20 },
-    { part: "Window Glazing", cost: 1000, co2Emissions: 50, workHours: 20 },
+    { part: "Roof", cost: 1200, co2Emissions: 50, workHours: 20 },
+    { part: "Walls", cost: 900, co2Emissions: 50, workHours: 20 },
+    { part: "Floors", cost: 4300, co2Emissions: 50, workHours: 20 },
+    { part: "Window Glazing", cost: 6000, co2Emissions: 50, workHours: 20 },
     {
       part: "Window Draughproofing",
-      cost: 1000,
+      cost: 10,
       co2Emissions: 50,
       workHours: 20,
     },
-    { part: "Door Insulation", cost: 1000, co2Emissions: 50, workHours: 20 },
+    { part: "Door Insulation", cost: 250, co2Emissions: 50, workHours: 20 },
     {
       part: "Door Draughproofing",
-      cost: 1000,
+      cost: 70,
       co2Emissions: 50,
       workHours: 20,
     },
-    { part: "Heating", cost: 1000, co2Emissions: 50, workHours: 20 },
-    { part: "Hot Water", cost: 1000, co2Emissions: 50, workHours: 20 },
-    { part: "Solar Panels", cost: 1000, co2Emissions: 50, workHours: 20 },
+    { part: "Heating", cost: 2300, co2Emissions: 50, workHours: 20 },
+    { part: "Hot Water", cost: 5290, co2Emissions: 50, workHours: 20 },
+    { part: "Solar Panels", cost: 1300, co2Emissions: 50, workHours: 20 },
     { part: "Solar Hot Water", cost: 1000, co2Emissions: 50, workHours: 20 },
-    { part: "Lighting", cost: 1000, co2Emissions: 50, workHours: 20 },
+    { part: "Lighting", cost: 20, co2Emissions: 50, workHours: 20 },
     {
       part: "Chimneys/ Open Fire Places",
-      cost: 1000,
+      cost: 350,
       co2Emissions: 50,
       workHours: 20,
     },