From 7f9b7f29927962c1dd0dc4f2b1796e0faf984e92 Mon Sep 17 00:00:00 2001
From: StefanWout <stefanwoutersen@gmail.com>
Date: Wed, 20 Nov 2024 12:25:51 +0000
Subject: [PATCH] submit button disabled is working

---
 .../components/RemoteAssesmentModal.tsx       | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/app/portfolio/[slug]/components/RemoteAssesmentModal.tsx b/src/app/portfolio/[slug]/components/RemoteAssesmentModal.tsx
index a9babd6..79b9558 100644
--- a/src/app/portfolio/[slug]/components/RemoteAssesmentModal.tsx
+++ b/src/app/portfolio/[slug]/components/RemoteAssesmentModal.tsx
@@ -1,8 +1,7 @@
 "use client";
 
 import { Dialog, Transition, Menu } from "@headlessui/react";
-import { useState, Fragment } from "react";
-import { useForm } from "react-hook-form";
+import { useState, Fragment, useEffect } from "react";
 import { Input } from "@/app/shadcn_components/ui/input";
 import { Button } from "@/app/shadcn_components/ui/button";
 import { Float } from "@headlessui-float/react";
@@ -130,7 +129,7 @@ export default function RemoteAssesmentModal({
   const [postcode, setPostcode] = useState<string>("");
   const [uprn, setUprn] = useState<number | string | null>("");
   const [valuation, setValuation] = useState<number | string | null>("");
-  // const [buttonDisabled, setButtonDisabled] = useState(true);
+  const [buttonDisabled, setButtonDisabled] = useState(true);
 
   function handleScenarioChange(event: React.ChangeEvent<HTMLInputElement>) {
     setScenario(event.target.value);
@@ -152,6 +151,22 @@ export default function RemoteAssesmentModal({
     setValuation(event.target.value);
   }
 
+  function handleButtonDisabled(): boolean {
+    return !(
+      scenario &&
+      selectedGoal &&
+      housingType &&
+      addressLineOne &&
+      postcode &&
+      uprn &&
+      valuation
+    ); 
+  }
+
+  useEffect(() => {
+    setButtonDisabled(handleButtonDisabled());
+  }, [scenario, selectedGoal, housingType, addressLineOne, postcode, uprn, valuation]);
+
   return (
     <>
       <Transition appear show={isOpen} as={Fragment}>
@@ -257,7 +272,10 @@ export default function RemoteAssesmentModal({
                   </div>
                   <div className="flex justify-center mt-6">
                     <Button
+                      disabled={buttonDisabled}
+                      
                       onClick={() => {
+                        console.log("making a submission")
                         setIsOpen(false);
                       }}
                     >