diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx index a6bf7a3..d2df985 100644 --- a/src/app/business/apply/page.tsx +++ b/src/app/business/apply/page.tsx @@ -24,16 +24,23 @@ import { } from "@/components/ui/tooltip"; import { z } from "zod"; import { zodResolver } from "@hookform/resolvers/zod"; -import { Selector } from "@/components/selector"; +import { DualOptionSelector } from "@/components/dualSelector"; +import { MultipleOptionSelector } from "@/components/multipleSelector"; export default function Apply() { const formSchema = z.object({ companyName: z.string().min(5, { message: "Company name must be at least 5 characters.", }), - totalRaised: z.number().int({ - message: "Total raised must be an integer.", - }), + industry: z.string(), + isInUS: z.string(), + totalRaised: z + .number({ + required_error: "Total raised must be a number.", + invalid_type_error: "Total raised must be a valid number.", + }) + .positive() + .max(9999999999, "Total raised must be a realistic amount."), }); let supabase = createSupabaseClient(); const { @@ -45,7 +52,6 @@ export default function Apply() { resolver: zodResolver(formSchema), }); const [industry, setIndustry] = useState([]); - const [selectedIndustry, setSelectedIndustry] = useState(""); const [isInUS, setIsInUS] = useState(""); const [isForSale, setIsForSale] = useState(""); const [isGenerating, setIsGenerating] = useState(""); @@ -65,6 +71,13 @@ export default function Apply() { "100K+", ]; + useEffect(() => { + register("industry"); + register("isInUS"); + register("isForSale"); + register("isGenerating"); + }, [register]); + const handleRemoveImage = (index: number) => { const updatedImages = selectedImages.filter((_, i) => i !== index); setSelectedImages(updatedImages); @@ -79,11 +92,8 @@ export default function Apply() { const onSubmit = (data: any) => { console.table(data); }; - const handleFieldChange = (fieldName: string, value: string) => { + const handleFieldChange = (fieldName: string, value: any) => { switch (fieldName) { - case "industry": - setSelectedIndustry(value); - break; case "isInUS": setIsInUS(value); break; @@ -147,7 +157,7 @@ export default function Apply() { {/* form */}
-
+

About your company

All requested information in this section is required. @@ -182,41 +192,24 @@ export default function Apply() { )}

{/* industry */} -
- -
- - - {/* {selectedIndustry} */} - - Choose the industry that best aligns with your business. - -
-
+ + Industry} + fieldName="industry" + choices={industry} + handleFunction={handleFieldChange} + description={ + <>Choose the industry that best aligns with your business. + } + placeholder="Select an industry" + selectLabel="Industry" + /> + {/* */} + {/* {selectedIndustry} */} {/* How much money has your company raised to date? */}
The sum total of past financing, including angel or venture{" "} @@ -236,9 +231,18 @@ export default function Apply() { capital, loans, grants, or token sales.
+ {errors.totalRaised && ( +

+ {errors.totalRaised && ( +

+ {errors.totalRaised.message as string} +

+ )} +

+ )}
{/* Is your company incorporated in the United States? */} - Is your company incorporated in the
@@ -262,7 +266,7 @@ export default function Apply() { /> {/* Is your product available (for sale) in market? */} - Is your product available (for sale)
@@ -284,7 +288,7 @@ export default function Apply() { /> {/* Is your company generating revenue?*/} - Is your company generating revenue?} name="isGenerating" choice1="Yes" @@ -367,10 +371,11 @@ export default function Apply() {
+
- setApplyProject(!applyProject)}> - Apply your first project! - + setApplyProject(!applyProject)} + > @@ -396,7 +401,7 @@ export default function Apply() { {applyProject && (
{/* header */} -
+

Begin Your First Fundraising Project

diff --git a/src/components/selector.tsx b/src/components/dualSelector.tsx similarity index 95% rename from src/components/selector.tsx rename to src/components/dualSelector.tsx index d0e0206..e55b066 100644 --- a/src/components/selector.tsx +++ b/src/components/dualSelector.tsx @@ -12,7 +12,7 @@ interface SelectorInterface { description: ReactElement; } -export function Selector(props: SelectorInterface) { +export function DualOptionSelector(props: SelectorInterface) { return (