Refactor package.json and package-lock.json to add @types/react-select-country-list dependency

package-lock.json

@@ -59,6 +59,7 @@
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
+        "@types/react-select-country-list": "^2.2.3",
         "eslint": "^8",
         "eslint-config-next": "14.2.5",
         "postcss": "^8",
@@ -2320,6 +2321,12 @@
         "@types/webpack": "^4"
       }
     },
+    "node_modules/@types/react-select-country-list": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-select-country-list/-/react-select-country-list-2.2.3.tgz",
+      "integrity": "sha512-nffcYOwuun+5B0EWqubK+amHpPdK9Xj20xkLYNqYrzmESd8FnpLwHsS79ClLAWA9y+icVA8gWPkbwBp1gpjSwA==",
+      "dev": true
+    },
     "node_modules/@types/source-list-map": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.6.tgz",

package.json

@@ -60,6 +60,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-select-country-list": "^2.2.3",
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "postcss": "^8",

src/app/business/apply/page.tsx

@@ -2,46 +2,31 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
 import { useEffect, useState } from "react";
 import { Textarea } from "@/components/ui/textarea";
 import { useForm, SubmitHandler } from "react-hook-form";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { DualOptionSelector } from "@/components/dualSelector";
-import { MultipleOptionSelector } from "@/components/multipleSelector";
 import BusinessForm from "@/components/BusinessForm";
 import { businessFormSchema } from "@/types/schemas/application.schema";
 
 type businessSchema = z.infer<typeof businessFormSchema>;
 export default function Apply() {
-  const form1 = useForm();
   const [industry, setIndustry] = useState<string[]>([]);
   const [projectType, setProjectType] = useState<string[]>([]);
   const [projectPitch, setProjectPitch] = useState("text");
   const [applyProject, setApplyProject] = useState(false);
   const [selectedImages, setSelectedImages] = useState<File[]>([]);
-  const [businessPitchFile, setBusinessPitchFile] = useState("");
   const [projectPitchFile, setProjectPitchFile] = useState("");
   const MAX_FILE_SIZE = 5000000;
   const ACCEPTED_IMAGE_TYPES = ["image/jpeg", "image/jpg", "image/png"];
 
-  const handleSubmit: SubmitHandler<any> = (data) => {
-    console.log("Submitted Data:", data);
-    // add api logic
-  };
 
   const onSubmit: SubmitHandler<businessSchema> = async (data) => {
-    // Your submit logic here
+    const transformedData = transformChoice(data);
-    console.log(data);
+    console.log(transformedData);
-    // e.g. submit the data to an API
+    
   };
 
   const createPitchDeckSchema = (inputType: string) => {
@@ -383,28 +368,14 @@ export default function Apply() {
       </div>
       {/* form */}
       {/* <form action="" onSubmit={handleSubmit(handleSubmitForms)}> */}
-      <BusinessForm industry={industry} onSubmit={onSubmit} />
+      <BusinessForm
+        industry={industry}
+        onSubmit={onSubmit}
+        applyProject={applyProject}
+        setApplyProject={setApplyProject}
+      />
+
 
-      <div className="flex space-x-5">
-        <Switch onCheckedChange={() => setApplyProject(!applyProject)}></Switch>
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="text-[12px] text-neutral-500 self-center cursor-pointer">
-                Would you like to apply for your first fundraising project as
-                well?
-              </span>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p className="text-[11px]">
-                Toggling this option allows you to begin your first project,{" "}
-                <br /> which is crucial for unlocking the tools necessary to
-                raise funds.
-              </p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      </div>
       {/* </div>
         </div> */}
 

src/components/BusinessForm.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { Button } from "@/components/ui/button";
 import { DualOptionSelector } from "@/components/dualSelector";
@@ -16,15 +16,21 @@ import { Input } from "@/components/ui/input";
 import { businessFormSchema } from "@/types/schemas/application.schema";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Label } from "@radix-ui/react-label";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@radix-ui/react-tooltip"; 
 
 type businessSchema = z.infer<typeof businessFormSchema>;
 
 interface BusinessFormProps {
   industry: string[];
+  applyProject: boolean;
+  setApplyProject: Function;
   onSubmit: SubmitHandler<businessSchema>;
 }
 const BusinessForm = ({
+  applyProject,
+  setApplyProject,
   onSubmit,
   industry,
 }: BusinessFormProps & { onSubmit: SubmitHandler<businessSchema> }) => {
@@ -43,14 +49,22 @@ const BusinessForm = ({
   });
   const [businessPitch, setBusinessPitch] = useState("text");
   const [businessPitchFile, setBusinessPitchFile] = useState("");
-
+  const [countries, setCountries] = useState([]);
+  useEffect(() => {
+    fetch("https://restcountries.com/v3.1/all")
+      .then((response) => response.json())
+      .then((data) => {
+        const countryList = data.map((country: { name: { common: any; }; }) => country.name.common);
+        setCountries(countryList.sort());
+      });
+  }, []);
   return (
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmit as SubmitHandler<businessSchema>)}
         className="space-y-8"
       >
-        <div className="grid grid-flow-row auto-rows-max w-3/4 ml-1/2 lg:ml-[10%]">
+        <div className="grid grid-flow-row auto-rows-max w-3/4 ml-1/2 md:ml-[0%] ">
           <h1 className="text-3xl font-bold mt-10 ml-96">About your company</h1>
           <p className="ml-96 mt-5 text-neutral-500">
             <span className="text-red-500 font-bold">**</span>All requested
@@ -87,6 +101,31 @@ const BusinessForm = ({
                 </FormItem>
               )}
             />
+            {/* Country */}
+            <FormField
+              control={form.control}
+              name="country"
+              render={({ field }: { field: any }) => (
+                <FormItem>
+                  <FormControl>
+                    <MultipleOptionSelector
+                      header={<>Country</>}
+                      fieldName="country"
+                      choices={countries}
+                      handleFunction={(selectedValues: string) => {
+                        field.onChange(selectedValues);
+                      }}
+                      description={
+                        <>Select the country where your business is based.</>
+                      }
+                      placeholder="Select a country"
+                      selectLabel="Country"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
 
             {/* Industry */}
             <FormField
@@ -293,15 +332,17 @@ const BusinessForm = ({
                               businessPitch === "file" ? ".md" : undefined
                             }
                             onChange={(e) => {
-                              field.onChange(e);
+                              const value = e.target;
+                              if (businessPitch === "file") {
+                                const file = value.files?.[0];
+                                field.onChange(file || "");
+                              } else {
+                                field.onChange(value.value);
+                              }
                             }}
                             className="w-96 mt-5"
-                            value={
-                              businessPitch === "file"
-                                ? ""
-                                : (field.value as string)
-                            }
                           />
+
                           <span className="text-[12px] text-neutral-500 self-center">
                             Your pitch deck and other application info will be
                             used for <br />
@@ -365,12 +406,36 @@ const BusinessForm = ({
                 </FormItem>
               )}
             />
+            <div className="flex space-x-5">
+              <Switch
+                onCheckedChange={() => setApplyProject(!applyProject)}
+              ></Switch>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span className="text-[12px] text-neutral-500 self-center cursor-pointer">
+                      Would you like to apply for your first fundraising project
+                      as well?
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p className="text-[11px]">
+                      Toggling this option allows you to begin your first
+                      project, <br /> which is crucial for unlocking the tools
+                      necessary to raise funds.
+                    </p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
+            <center>
               <Button
                 className="mt-12 mb-20  h-10 text-base font-bold py-6 px-5"
                 type="submit"
               >
                 Submit application
               </Button>
+            </center>
           </div>
         </div>
       </form>

src/types/schemas/application.schema.ts

@@ -150,6 +150,9 @@ const businessFormSchema = z.object({
         message: "File must be a markdown file (.md).",
       }),
   ]),
+  country: z.string({
+    required_error: "Please select one of the option",
+  }),
 });
 
 export { businessFormSchema, projectFormSchema };