diff --git a/package-lock.json b/package-lock.json index c4a0dbe..315b9b8 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 971486d..cbb2384 100644 --- a/package.json +++ b/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", diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx index 5bcb3a2..4134aca 100644 --- a/src/app/business/apply/page.tsx +++ b/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; export default function Apply() { - const form1 = useForm(); const [industry, setIndustry] = useState([]); const [projectType, setProjectType] = useState([]); const [projectPitch, setProjectPitch] = useState("text"); const [applyProject, setApplyProject] = useState(false); const [selectedImages, setSelectedImages] = useState([]); - 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 = (data) => { - console.log("Submitted Data:", data); - // add api logic - }; const onSubmit: SubmitHandler = async (data) => { - // Your submit logic here - console.log(data); - // e.g. submit the data to an API + const transformedData = transformChoice(data); + console.log(transformedData); + }; const createPitchDeckSchema = (inputType: string) => { @@ -383,28 +368,14 @@ export default function Apply() { {/* form */} {/*
*/} - + + -
- setApplyProject(!applyProject)}> - - - - - Would you like to apply for your first fundraising project as - well? - - - -

- Toggling this option allows you to begin your first project,{" "} -
which is crucial for unlocking the tools necessary to - raise funds. -

-
-
-
-
{/* */} diff --git a/src/components/BusinessForm.tsx b/src/components/BusinessForm.tsx index ab4c22c..3880b9d 100644 --- a/src/components/BusinessForm.tsx +++ b/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; interface BusinessFormProps { industry: string[]; + applyProject: boolean; + setApplyProject: Function; onSubmit: SubmitHandler; } const BusinessForm = ({ + applyProject, + setApplyProject, onSubmit, industry, }: BusinessFormProps & { onSubmit: SubmitHandler }) => { @@ -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 ( )} className="space-y-8" > -
+

About your company

**All requested @@ -87,6 +101,31 @@ const BusinessForm = ({ )} /> + {/* Country */} + ( + + + 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" + /> + + + + )} + /> {/* Industry */} { - 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) - } /> + Your pitch deck and other application info will be used for
@@ -365,12 +406,36 @@ const BusinessForm = ({ )} /> - +

+ setApplyProject(!applyProject)} + > + + + + + Would you like to apply for your first fundraising project + as well? + + + +

+ Toggling this option allows you to begin your first + project,
which is crucial for unlocking the tools + necessary to raise funds. +

+
+
+
+
+
+ +
diff --git a/src/types/schemas/application.schema.ts b/src/types/schemas/application.schema.ts index 2b4529a..ccb2c4b 100644 --- a/src/types/schemas/application.schema.ts +++ b/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 };