sosokker/B2D-Ventures
1
0
Fork 0
mirror of https://github.com/Sosokker/B2D-Ventures.git synced 2025-12-19 05:54:06 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor Apply page component to adjust left margin for company information section

Browse Source
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2024-10-13 16:34:30 +07:00
parent 847af65dbc
commit 3370b0f61c
1 changed files with 253 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
src/app/business/apply/page.tsx
View File

@ -32,8 +32,8 @@ export default function Apply() {
z.string().url("Pitch deck must be a valid URL."), z.string().url("Pitch deck must be a valid URL."),
z.object({}), z.object({}),
]); ]);
const projectFormSchema = z.object({});
const formSchema = z.object({ const businessFormSchema = z.object({
companyName: z.string().min(5, { companyName: z.string().min(5, {
message: "Company name must be at least 5 characters.", message: "Company name must be at least 5 characters.",
}), }),
@ -78,12 +78,21 @@ export default function Apply() {
}); });
let supabase = createSupabaseClient(); let supabase = createSupabaseClient();
const { const {
register, register: registerBusiness,
handleSubmit, handleSubmit: handleSubmitBusiness,
setValue, setValue: setValueBusiness,
formState: { errors }, formState: { errors: errorsBusiness },
} = useForm({ } = useForm({
resolver: zodResolver(formSchema), resolver: zodResolver(businessFormSchema),
});
const {
register: registerProject,
handleSubmit: handleSubmitProject,
setValue: setValueProject,
formState: { errors: errorsProject },
} = useForm({
resolver: zodResolver(projectFormSchema),
}); });
const [industry, setIndustry] = useState<string[]>([]); const [industry, setIndustry] = useState<string[]>([]);
const [isInUS, setIsInUS] = useState(""); const [isInUS, setIsInUS] = useState("");
@ -106,11 +115,11 @@ export default function Apply() {
]; ];
useEffect(() => { useEffect(() => {
register("industry"); registerBusiness("industry");
register("isInUS"); registerBusiness("isInUS");
register("isForSale"); registerBusiness("isForSale");
register("isGenerating"); registerBusiness("isGenerating");
}, [register]); }, [registerBusiness]);
const handleRemoveImage = (index: number) => { const handleRemoveImage = (index: number) => {
const updatedImages = selectedImages.filter((_, i) => i !== index); const updatedImages = selectedImages.filter((_, i) => i !== index);
@ -155,7 +164,7 @@ export default function Apply() {
const handleBusinessPitchChange = (type: string) => { const handleBusinessPitchChange = (type: string) => {
setBusinessPitch(type); setBusinessPitch(type);
// clear out old data // clear out old data
setValue("pitchDeck", ""); setValueBusiness("pitchDeck", "");
}; };
const handleFieldChange = (fieldName: string, value: any) => { const handleFieldChange = (fieldName: string, value: any) => {
@ -170,7 +179,7 @@ export default function Apply() {
setIsGenerating(value); setIsGenerating(value);
break; break;
} }
setValue(fieldName, value); setValueBusiness(fieldName, value);
}; };
const fetchIndustry = async () => { const fetchIndustry = async () => {
let { data: BusinessType, error } = await supabase let { data: BusinessType, error } = await supabase
@ -222,7 +231,7 @@ export default function Apply() {
</div> </div>
</div> </div>
{/* form */} {/* form */}
<form action="" onSubmit={handleSubmit(onSubmit)}> <form action="" onSubmit={handleSubmitBusiness(onSubmit)}>
<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 lg:ml-[10%]">
<h1 className="text-3xl font-bold mt-10 ml-96">About your company</h1> <h1 className="text-3xl font-bold mt-10 ml-96">About your company</h1>
<p className="ml-96 mt-5 text-neutral-500"> <p className="ml-96 mt-5 text-neutral-500">
@ -241,18 +250,18 @@ export default function Apply() {
type="text" type="text"
id="companyName" id="companyName"
className="w-96" className="w-96"
{...register("companyName")} {...registerBusiness("companyName")}
/> />
<span className="text-[12px] text-neutral-500 self-center"> <span className="text-[12px] text-neutral-500 self-center">
This should be the name your company uses on your <br /> This should be the name your company uses on your <br />
website and in the market. website and in the market.
</span> </span>
</div> </div>
{errors.companyName && ( {errorsBusiness.companyName && (
<p className="text-red-500 text-sm"> <p className="text-red-500 text-sm">
{errors.companyName && ( {errorsBusiness.companyName && (
<p className="text-red-500 text-sm"> <p className="text-red-500 text-sm">
{errors.companyName.message as string} {errorsBusiness.companyName.message as string}
</p> </p>
)} )}
</p> </p>
@ -271,9 +280,9 @@ export default function Apply() {
placeholder="Select an industry" placeholder="Select an industry"
selectLabel="Industry" selectLabel="Industry"
/> />
{errors.industry && ( {errorsBusiness.industry && (
<p className="text-red-500 text-sm"> <p className="text-red-500 text-sm">
{errors.industry.message as string} {errorsBusiness.industry.message as string}
</p> </p>
)} )}
{/* How much money has your company raised to date? */} {/* How much money has your company raised to date? */}
@ -287,7 +296,7 @@ export default function Apply() {
id="totalRaised" id="totalRaised"
className="w-96" className="w-96"
placeholder="$ 1,000,000" placeholder="$ 1,000,000"
{...register("totalRaised", { {...registerBusiness("totalRaised", {
valueAsNumber: true, valueAsNumber: true,
})} })}
/> />
@ -297,9 +306,9 @@ export default function Apply() {
capital, loans, grants, or token sales. capital, loans, grants, or token sales.
</span> </span>
</div> </div>
{errors.totalRaised && ( {errorsBusiness.totalRaised && (
<p className="text-red-500 text-sm"> <p className="text-red-500 text-sm">
{errors.totalRaised.message as string} {errorsBusiness.totalRaised.message as string}
</p> </p>
)} )}
</div> </div>
@ -326,9 +335,9 @@ export default function Apply() {
} }
value={isInUS} value={isInUS}
/> />
{errors.isInUS && ( {errorsBusiness.isInUS && (
<p className="text-red-500 text-sm"> <p className="text-red-500 text-sm">
{errors.isInUS.message as string} {errorsBusiness.isInUS.message as string}
</p> </p>
)} )}
@ -353,9 +362,9 @@ export default function Apply() {
} }
value={isForSale} value={isForSale}
/> />
{errors.isForSale && ( {errorsBusiness.isForSale && (
<p className="text-red-500 text-sm"> <p className="text-red-500 text-sm">
{errors.isForSale.message as string} {errorsBusiness.isForSale.message as string}
</p> </p>
)} )}
@ -374,9 +383,9 @@ export default function Apply() {
} }
value={isGenerating} value={isGenerating}
/> />
{errors.isGenerating && ( {errorsBusiness.isGenerating && (
<p className="text-red-500 text-sm"> <p className="text-red-500 text-sm">
{errors.isGenerating.message as string} {errorsBusiness.isGenerating.message as string}
</p> </p>
)} )}
{/* Pitch deck */} {/* Pitch deck */}
@ -413,7 +422,7 @@ export default function Apply() {
: "https:// " : "https:// "
} }
accept={businessPitch === "file" ? ".md" : undefined} accept={businessPitch === "file" ? ".md" : undefined}
{...register("pitchDeck", { required: true })} {...registerBusiness("pitchDeck", { required: true })}
/> />
<span className="text-[12px] text-neutral-500 self-center"> <span className="text-[12px] text-neutral-500 self-center">
@ -423,12 +432,16 @@ export default function Apply() {
Please make sure this document is publicly accessible. This Please make sure this document is publicly accessible. This
can <br /> can <br />
be a DocSend, Box, Dropbox, Google Drive or other link. be a DocSend, Box, Dropbox, Google Drive or other link.
<br />
<p className="text-red-500">
** support only markdown(.md) format
</p>
</span> </span>
</div> </div>
</div> </div>
{errors.pitchDeck && ( {errorsBusiness.pitchDeck && (
<p className="text-red-500 text-sm"> <p className="text-red-500 text-sm">
{errors.pitchDeck.message as string} {errorsBusiness.pitchDeck.message as string}
</p> </p>
)} )}
<MultipleOptionSelector <MultipleOptionSelector
@ -452,9 +465,9 @@ export default function Apply() {
placeholder="Select" placeholder="Select"
selectLabel="Select" selectLabel="Select"
/> />
{errors.communitySize && ( {errorsBusiness.communitySize && (
<p className="text-red-500 text-sm"> <p className="text-red-500 text-sm">
{errors.communitySize.message as string} {errorsBusiness.communitySize.message as string}
</p> </p>
)} )}
@ -486,16 +499,17 @@ export default function Apply() {
{/* apply first project */} {/* apply first project */}
{applyProject && ( {applyProject && (
<div className="grid auto-rows-max w-3/4 ml-48 bg-zinc-100 dark:bg-zinc-900 mt-10 pt-12 pb-12"> <div className="grid auto-rows-max w-3/4 ml-48 bg-zinc-100 dark:bg-zinc-900 mt-10 pt-12 pb-12">
<form action="" onSubmit={handleSubmitProject(onSubmit)}>
{/* header */} {/* header */}
<div className="ml-[15%]"> <div className="ml-[15%]">
<h1 className="text-3xl font-bold mt-10"> <h1 className="text-3xl font-bold mt-10">
Begin Your First Fundraising Project Begin Your First Fundraising Project
</h1> </h1>
<p className="mt-3 text-sm text-neutral-500"> <p className="mt-3 text-sm text-neutral-500">
Starting a fundraising project is mandatory for all businesses. Starting a fundraising project is mandatory for all
This step is crucial <br /> businesses. This step is crucial <br />
to begin your journey and unlock the necessary tools for raising to begin your journey and unlock the necessary tools for
funds. raising funds.
</p> </p>
{/* project's name */} {/* project's name */}
@ -509,50 +523,41 @@ export default function Apply() {
</div> </div>
{/* project type */} {/* project type */}
<div className="mt-10 space-y-5"> <MultipleOptionSelector
<Label header={<>Project type</>}
htmlFor="projectType" fieldName="projectType"
className="font-bold text-lg mt-10" choices={projectType}
> handleFunction={handleFieldChange}
Project type description={
</Label> <>Please specify the primary purpose of the funds</>
<div className="flex space-x-5"> }
<Select> placeholder="Select a Project type"
<SelectTrigger className="w-96"> selectLabel="Project type"
<SelectValue placeholder="Select a Project type" /> />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Project type</SelectLabel>
{projectType.map((i) => (
<SelectItem value={i}>{i}</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<span className="text-[12px] text-neutral-500 self-center">
Please specify the primary purpose of the funds
</span>
</div>
</div>
{/* short description */} {/* short description */}
<div className="mt-10 space-y-5"> <div className="mt-10 space-y-5">
<Label htmlFor="shortDescription" className="font-bold text-lg"> <Label
htmlFor="shortDescription"
className="font-bold text-lg"
>
Short description Short description
</Label> </Label>
<div className="flex space-x-5"> <div className="flex space-x-5">
<Textarea id="shortDescription" className="w-96" /> <Textarea id="shortDescription" className="w-96" />
<span className="text-[12px] text-neutral-500 self-center"> <span className="text-[12px] text-neutral-500 self-center">
Could you provide a brief description of your project <br />{" "} Could you provide a brief description of your project{" "}
in one or two sentences? <br /> in one or two sentences?
</span> </span>
</div> </div>
</div> </div>
{/* Pitch deck */} {/* Pitch deck */}
<div className="mt-10 space-y-5"> <div className="mt-10 space-y-5">
<Label htmlFor="projectPitchDeck" className="font-bold text-lg"> <Label
htmlFor="projectPitchDeck"
className="font-bold text-lg"
>
Pitch deck Pitch deck
</Label> </Label>
<div className="flex space-x-2 w-96"> <div className="flex space-x-2 w-96">
@ -584,8 +589,8 @@ export default function Apply() {
Please upload a file or paste a link to your pitch, which Please upload a file or paste a link to your pitch, which
should <br /> should <br />
cover key aspects of your project: what it will do, what cover key aspects of your project: what it will do, what
investors <br /> can expect to gain, and any highlights that investors <br /> can expect to gain, and any highlights
make it stand out. that make it stand out.
</span> </span>
</div> </div>
</div> </div>
@ -666,7 +671,7 @@ export default function Apply() {
id="minInvest" id="minInvest"
className="w-96" className="w-96"
placeholder="$ 500" placeholder="$ 500"
{...register} {...registerProject}
/> />
<span className="text-[12px] text-neutral-500 self-center"> <span className="text-[12px] text-neutral-500 self-center">
This helps set clear expectations for investors This helps set clear expectations for investors
@ -684,11 +689,11 @@ export default function Apply() {
id="targetInvest" id="targetInvest"
className="w-96" className="w-96"
placeholder="$ 1,000,000" placeholder="$ 1,000,000"
{...register} {...registerProject}
/> />
<span className="text-[12px] text-neutral-500 self-center"> <span className="text-[12px] text-neutral-500 self-center">
We encourage you to set a specific target investment <br />{" "} We encourage you to set a specific target investment{" "}
amount that reflects your funding goals. <br /> amount that reflects your funding goals.
</span> </span>
</div> </div>
</div> </div>
@ -703,7 +708,7 @@ export default function Apply() {
type="datetime-local" type="datetime-local"
id="deadline" id="deadline"
className="w-96" className="w-96"
{...register} {...registerProject}
/> />
<span className="text-[12px] text-neutral-500 self-center"> <span className="text-[12px] text-neutral-500 self-center">
What is the deadline for your fundraising project? Setting{" "} What is the deadline for your fundraising project? Setting{" "}
@ -713,6 +718,7 @@ export default function Apply() {
</div> </div>
</div> </div>
</div> </div>
</form>
</div> </div>
)} )}
{/* Submit */} {/* Submit */}