Update package.json and package-lock.json

package-lock.json

@@ -38,6 +38,7 @@
         "react": "^18",
         "react-countup": "^6.5.3",
         "react-dom": "^18",
+        "react-hook-form": "^7.53.0",
         "react-hot-toast": "^2.4.1",
         "react-markdown": "^9.0.1",
         "recharts": "^2.12.7",
@@ -6465,6 +6466,22 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.53.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.0.tgz",
+      "integrity": "sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-hot-toast": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",

package.json

@@ -39,6 +39,7 @@
     "react": "^18",
     "react-countup": "^6.5.3",
     "react-dom": "^18",
+    "react-hook-form": "^7.53.0",
     "react-hot-toast": "^2.4.1",
     "react-markdown": "^9.0.1",
     "recharts": "^2.12.7",

src/app/business/apply/page.tsx

@@ -14,10 +14,13 @@ import {
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
 import { useEffect, useState } from "react";
 import { Textarea } from "@/components/ui/textarea";
+import { useForm } from "react-hook-form";
 
 export default function Apply() {
   let supabase = createSupabaseClient();
+  const { register, handleSubmit, setValue } = useForm();
   const [industry, setIndustry] = useState<string[]>([]);
+  const [selectedIndustry, setSelectedIndustry] = useState("");
   const [isInUS, setIsInUS] = useState("");
   const [isForSale, setIsForSale] = useState("");
   const [isGenerating, setIsGenarting] = useState("");
@@ -34,6 +37,13 @@ export default function Apply() {
     "100K+",
   ];
 
+  const onSubmit = (data: any) => {
+    alert(JSON.stringify(data));
+  };
+  const handleSelectChange = (value: string) => {
+    setSelectedIndustry(value);
+    setValue("industry", value);
+  };
   const fetchIndustry = async () => {
     let { data: BusinessType, error } = await supabase
       .from("BusinessType")
@@ -83,12 +93,13 @@ export default function Apply() {
           </p>
         </div>
       </div>
+      {/* form */}
+      <form action="" onSubmit={handleSubmit(onSubmit)}>
         <div className="grid grid-flow-row auto-rows-max w-3/4 ml-48">
           <h1 className="text-3xl font-bold mt-10 ml-96">About your company</h1>
           <p className="ml-96 mt-5 text-neutral-500">
             All requested information in this section is required.
           </p>
-        {/* form */}
 
           {/* company name */}
           <div className="ml-96 mt-5 space-y-10">
@@ -97,7 +108,12 @@ export default function Apply() {
                 Company name
               </Label>
               <div className="flex space-x-5">
-              <Input type="text" id="companyName" className="w-96" />
+                <Input
+                  type="text"
+                  id="companyName"
+                  className="w-96"
+                  {...register("companyName")}
+                />
                 <span className="text-[12px] text-neutral-500 self-center">
                   This should be the name your company uses on your <br />
                   website and in the market.
@@ -110,7 +126,7 @@ export default function Apply() {
                 Industry
               </Label>
               <div className="flex space-x-5">
-              <Select>
+                <Select onValueChange={(value) => handleSelectChange(value)}>
                   <SelectTrigger className="w-96">
                     <SelectValue placeholder="Select an industry" />
                   </SelectTrigger>
@@ -118,11 +134,19 @@ export default function Apply() {
                     <SelectGroup>
                       <SelectLabel>Industry</SelectLabel>
                       {industry.map((i) => (
-                      <SelectItem value={i}>{i}</SelectItem>
+                        <SelectItem key={i} value={i}>
+                          {i}
+                        </SelectItem>
                       ))}
                     </SelectGroup>
                   </SelectContent>
                 </Select>
+                <input
+                  type="hidden"
+                  {...register("industry")}
+                  value={selectedIndustry}
+                />
+                {/* {selectedIndustry} */}
                 <span className="text-[12px] text-neutral-500 self-center">
                   Choose the industry that best aligns with your business.
                 </span>
@@ -139,6 +163,7 @@ export default function Apply() {
                   id="companyName"
                   className="w-96"
                   placeholder="$   1,000,000"
+                  {...register}
                 />
                 <span className="text-[12px] text-neutral-500 self-center">
                   The sum total of past financing, including angel or venture{" "}
@@ -272,8 +297,8 @@ export default function Apply() {
                   Your pitch deck and other application info will be used for{" "}
                   <br />
                   internal purposes only. <br />
-                Please make sure this document is publicly accessible. This can{" "}
+                  Please make sure this document is publicly accessible. This
-                <br />
+                  can <br />
                   be a DocSend, Box, Dropbox, Google Drive or other link.
                 </span>
               </div>
@@ -299,9 +324,10 @@ export default function Apply() {
                   </SelectContent>
                 </Select>
                 <span className="text-[12px] text-neutral-500 self-center">
-                Include your email list, social media following (i.e. Instagram,{" "}
+                  Include your email list, social media following (i.e.
-                <br /> Discord, Facebook, Twitter, TikTok). We’d like to
+                  Instagram, <br /> Discord, Facebook, Twitter, TikTok). We’d
-                understand the <br /> rough size of your current audience.
+                  like to understand the <br /> rough size of your current
+                  audience.
                 </span>
               </div>
             </div>
@@ -316,8 +342,8 @@ export default function Apply() {
               Begin Your First Fundraising Project
             </h1>
             <p className="mt-3 text-sm text-neutral-500">
-            Starting a fundraising project is mandatory for all businesses. This
+              Starting a fundraising project is mandatory for all businesses.
-            step is crucial <br />
+              This step is crucial <br />
               to begin your journey and unlock the necessary tools for raising
               funds.
             </p>
@@ -365,8 +391,8 @@ export default function Apply() {
               <div className="flex space-x-5">
                 <Textarea id="shortDescription" className="w-96" />
                 <span className="text-[12px] text-neutral-500 self-center">
-                Could you provide a brief description of your project <br /> in
+                  Could you provide a brief description of your project <br />{" "}
-                one or two sentences?
+                  in one or two sentences?
                 </span>
               </div>
             </div>
@@ -400,8 +426,8 @@ export default function Apply() {
                   placeholder="https:// "
                 />
                 <span className="text-[12px] text-neutral-500 self-center">
-                Please upload a file or paste a link to your pitch, which should{" "}
+                  Please upload a file or paste a link to your pitch, which
-                <br />
+                  should <br />
                   cover key aspects of your project: what it will do, what
                   investors <br /> can expect to gain, and any highlights that
                   make it stand out.
@@ -416,6 +442,10 @@ export default function Apply() {
             Submit application
           </Button>
         </center>
+      </form>
     </div>
   );
 }
+function setValue(arg0: string, value: string) {
+  throw new Error("Function not implemented.");
+}