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

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

View File

@ -32,8 +32,8 @@ export default function Apply() {
z.string().url("Pitch deck must be a valid URL."),
z.object({}),
]);
const formSchema = z.object({
const projectFormSchema = z.object({});
const businessFormSchema = z.object({
companyName: z.string().min(5, {
message: "Company name must be at least 5 characters.",
}),
@ -78,12 +78,21 @@ export default function Apply() {
});
let supabase = createSupabaseClient();
const {
register,
handleSubmit,
setValue,
formState: { errors },
register: registerBusiness,
handleSubmit: handleSubmitBusiness,
setValue: setValueBusiness,
formState: { errors: errorsBusiness },
} = 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 [isInUS, setIsInUS] = useState("");
@ -106,11 +115,11 @@ export default function Apply() {
];
useEffect(() => {
register("industry");
register("isInUS");
register("isForSale");
register("isGenerating");
}, [register]);
registerBusiness("industry");
registerBusiness("isInUS");
registerBusiness("isForSale");
registerBusiness("isGenerating");
}, [registerBusiness]);
const handleRemoveImage = (index: number) => {
const updatedImages = selectedImages.filter((_, i) => i !== index);
@ -155,7 +164,7 @@ export default function Apply() {
const handleBusinessPitchChange = (type: string) => {
setBusinessPitch(type);
// clear out old data
setValue("pitchDeck", "");
setValueBusiness("pitchDeck", "");
};
const handleFieldChange = (fieldName: string, value: any) => {
@ -170,7 +179,7 @@ export default function Apply() {
setIsGenerating(value);
break;
}
setValue(fieldName, value);
setValueBusiness(fieldName, value);
};
const fetchIndustry = async () => {
let { data: BusinessType, error } = await supabase
@ -222,7 +231,7 @@ export default function Apply() {
</div>
</div>
{/* 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%]">
<h1 className="text-3xl font-bold mt-10 ml-96">About your company</h1>
<p className="ml-96 mt-5 text-neutral-500">
@ -241,18 +250,18 @@ export default function Apply() {
type="text"
id="companyName"
className="w-96"
{...register("companyName")}
{...registerBusiness("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.
</span>
</div>
{errors.companyName && (
{errorsBusiness.companyName && (
<p className="text-red-500 text-sm">
{errors.companyName && (
{errorsBusiness.companyName && (
<p className="text-red-500 text-sm">
{errors.companyName.message as string}
{errorsBusiness.companyName.message as string}
</p>
)}
</p>
@ -271,9 +280,9 @@ export default function Apply() {
placeholder="Select an industry"
selectLabel="Industry"
/>
{errors.industry && (
{errorsBusiness.industry && (
<p className="text-red-500 text-sm">
{errors.industry.message as string}
{errorsBusiness.industry.message as string}
</p>
)}
{/* How much money has your company raised to date? */}
@ -287,7 +296,7 @@ export default function Apply() {
id="totalRaised"
className="w-96"
placeholder="$ 1,000,000"
{...register("totalRaised", {
{...registerBusiness("totalRaised", {
valueAsNumber: true,
})}
/>
@ -297,9 +306,9 @@ export default function Apply() {
capital, loans, grants, or token sales.
</span>
</div>
{errors.totalRaised && (
{errorsBusiness.totalRaised && (
<p className="text-red-500 text-sm">
{errors.totalRaised.message as string}
{errorsBusiness.totalRaised.message as string}
</p>
)}
</div>
@ -326,9 +335,9 @@ export default function Apply() {
}
value={isInUS}
/>
{errors.isInUS && (
{errorsBusiness.isInUS && (
<p className="text-red-500 text-sm">
{errors.isInUS.message as string}
{errorsBusiness.isInUS.message as string}
</p>
)}
@ -353,9 +362,9 @@ export default function Apply() {
}
value={isForSale}
/>
{errors.isForSale && (
{errorsBusiness.isForSale && (
<p className="text-red-500 text-sm">
{errors.isForSale.message as string}
{errorsBusiness.isForSale.message as string}
</p>
)}
@ -374,9 +383,9 @@ export default function Apply() {
}
value={isGenerating}
/>
{errors.isGenerating && (
{errorsBusiness.isGenerating && (
<p className="text-red-500 text-sm">
{errors.isGenerating.message as string}
{errorsBusiness.isGenerating.message as string}
</p>
)}
{/* Pitch deck */}
@ -413,7 +422,7 @@ export default function Apply() {
: "https:// "
}
accept={businessPitch === "file" ? ".md" : undefined}
{...register("pitchDeck", { required: true })}
{...registerBusiness("pitchDeck", { required: true })}
/>
<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
can <br />
be a DocSend, Box, Dropbox, Google Drive or other link.
<br />
<p className="text-red-500">
** support only markdown(.md) format
</p>
</span>
</div>
</div>
{errors.pitchDeck && (
{errorsBusiness.pitchDeck && (
<p className="text-red-500 text-sm">
{errors.pitchDeck.message as string}
{errorsBusiness.pitchDeck.message as string}
</p>
)}
<MultipleOptionSelector
@ -452,9 +465,9 @@ export default function Apply() {
placeholder="Select"
selectLabel="Select"
/>
{errors.communitySize && (
{errorsBusiness.communitySize && (
<p className="text-red-500 text-sm">
{errors.communitySize.message as string}
{errorsBusiness.communitySize.message as string}
</p>
)}
@ -486,233 +499,226 @@ export default function Apply() {
{/* apply first project */}
{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">
{/* header */}
<div className="ml-[15%]">
<h1 className="text-3xl font-bold mt-10">
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 step is crucial <br />
to begin your journey and unlock the necessary tools for raising
funds.
</p>
<form action="" onSubmit={handleSubmitProject(onSubmit)}>
{/* header */}
<div className="ml-[15%]">
<h1 className="text-3xl font-bold mt-10">
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 step is crucial <br />
to begin your journey and unlock the necessary tools for
raising funds.
</p>
{/* project's name */}
<div className="mt-10 space-y-5">
<Label htmlFor="projectName" className="font-bold text-lg">
Project name
</Label>
<div className="flex space-x-5">
<Input type="text" id="projectName" className="w-96" />
{/* project's name */}
<div className="mt-10 space-y-5">
<Label htmlFor="projectName" className="font-bold text-lg">
Project name
</Label>
<div className="flex space-x-5">
<Input type="text" id="projectName" className="w-96" />
</div>
</div>
</div>
{/* project type */}
<div className="mt-10 space-y-5">
<Label
htmlFor="projectType"
className="font-bold text-lg mt-10"
>
Project type
</Label>
<div className="flex space-x-5">
<Select>
<SelectTrigger className="w-96">
<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>
{/* project type */}
<MultipleOptionSelector
header={<>Project type</>}
fieldName="projectType"
choices={projectType}
handleFunction={handleFieldChange}
description={
<>Please specify the primary purpose of the funds</>
}
placeholder="Select a Project type"
selectLabel="Project type"
/>
{/* short description */}
<div className="mt-10 space-y-5">
<Label htmlFor="shortDescription" className="font-bold text-lg">
Short description
</Label>
<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 one or two sentences?
</span>
</div>
</div>
{/* Pitch deck */}
<div className="mt-10 space-y-5">
<Label htmlFor="projectPitchDeck" className="font-bold text-lg">
Pitch deck
</Label>
<div className="flex space-x-2 w-96">
<Button
type="button"
variant={projectPitch === "text" ? "default" : "outline"}
onClick={() => setProjectPitch("text")}
className="w-32 h-12 text-base"
{/* short description */}
<div className="mt-10 space-y-5">
<Label
htmlFor="shortDescription"
className="font-bold text-lg"
>
Paste URL
</Button>
<Button
type="button"
variant={projectPitch === "file" ? "default" : "outline"}
onClick={() => setProjectPitch("file")}
className="w-32 h-12 text-base"
Short description
</Label>
<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 one or two sentences?
</span>
</div>
</div>
{/* Pitch deck */}
<div className="mt-10 space-y-5">
<Label
htmlFor="projectPitchDeck"
className="font-bold text-lg"
>
Upload a file
</Button>
</div>
<div className="flex space-x-5">
<Input
type={projectPitch}
id="projectPitchDeck"
className="w-96"
placeholder="https:// "
/>
<span className="text-[12px] text-neutral-500 self-center">
Please upload a file or paste a link to your pitch, which
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.
</span>
</div>
</div>
{/* project logo */}
<div className="mt-10 space-y-5">
<Label
htmlFor="projectLogo"
className="font-bold text-lg mt-10"
>
Project logo
</Label>
<div className="flex space-x-5">
<Input
type="file"
id="projectPitchDeck"
className="w-96"
accept="image/*"
/>
<span className="text-[12px] text-neutral-500 self-center">
Please upload the logo picture that best represents your
project.
</span>
</div>
</div>
{/* Project pictures */}
<div className="mt-10 space-y-5">
<Label
htmlFor="projectPicture"
className="font-bold text-lg mt-10"
>
Project pictures
</Label>
<div className="flex space-x-5">
<Input
type="file"
id="projectPicture"
multiple
onChange={handleFileChange}
accept="image/*"
className="w-96"
value={selectedImages.length === 0 ? "" : undefined}
/>
<span className="text-[12px] text-neutral-500 self-center">
Feel free to upload any additional images that provide{" "}
<br />
further insight into your project.
</span>
</div>
<div className="mt-5 space-y-2 w-96">
{selectedImages.map((image, index) => (
<div
key={index}
className="flex justify-between items-center border p-2 rounded"
Pitch deck
</Label>
<div className="flex space-x-2 w-96">
<Button
type="button"
variant={projectPitch === "text" ? "default" : "outline"}
onClick={() => setProjectPitch("text")}
className="w-32 h-12 text-base"
>
<span>{image.name}</span>
<Button
variant="outline"
onClick={() => handleRemoveImage(index)}
className="ml-4"
Paste URL
</Button>
<Button
type="button"
variant={projectPitch === "file" ? "default" : "outline"}
onClick={() => setProjectPitch("file")}
className="w-32 h-12 text-base"
>
Upload a file
</Button>
</div>
<div className="flex space-x-5">
<Input
type={projectPitch}
id="projectPitchDeck"
className="w-96"
placeholder="https:// "
/>
<span className="text-[12px] text-neutral-500 self-center">
Please upload a file or paste a link to your pitch, which
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.
</span>
</div>
</div>
{/* project logo */}
<div className="mt-10 space-y-5">
<Label
htmlFor="projectLogo"
className="font-bold text-lg mt-10"
>
Project logo
</Label>
<div className="flex space-x-5">
<Input
type="file"
id="projectPitchDeck"
className="w-96"
accept="image/*"
/>
<span className="text-[12px] text-neutral-500 self-center">
Please upload the logo picture that best represents your
project.
</span>
</div>
</div>
{/* Project pictures */}
<div className="mt-10 space-y-5">
<Label
htmlFor="projectPicture"
className="font-bold text-lg mt-10"
>
Project pictures
</Label>
<div className="flex space-x-5">
<Input
type="file"
id="projectPicture"
multiple
onChange={handleFileChange}
accept="image/*"
className="w-96"
value={selectedImages.length === 0 ? "" : undefined}
/>
<span className="text-[12px] text-neutral-500 self-center">
Feel free to upload any additional images that provide{" "}
<br />
further insight into your project.
</span>
</div>
<div className="mt-5 space-y-2 w-96">
{selectedImages.map((image, index) => (
<div
key={index}
className="flex justify-between items-center border p-2 rounded"
>
Remove
</Button>
</div>
))}
<span>{image.name}</span>
<Button
variant="outline"
onClick={() => handleRemoveImage(index)}
className="ml-4"
>
Remove
</Button>
</div>
))}
</div>
</div>
</div>
{/* Minimum Investment */}
<div className="space-y-5 mt-10">
<Label htmlFor="minInvest" className="font-bold text-lg">
Minimum investment
</Label>
<div className="flex space-x-5">
<Input
type="text"
id="minInvest"
className="w-96"
placeholder="$ 500"
{...register}
/>
<span className="text-[12px] text-neutral-500 self-center">
This helps set clear expectations for investors
</span>
{/* Minimum Investment */}
<div className="space-y-5 mt-10">
<Label htmlFor="minInvest" className="font-bold text-lg">
Minimum investment
</Label>
<div className="flex space-x-5">
<Input
type="text"
id="minInvest"
className="w-96"
placeholder="$ 500"
{...registerProject}
/>
<span className="text-[12px] text-neutral-500 self-center">
This helps set clear expectations for investors
</span>
</div>
</div>
</div>
{/* Target Investment */}
<div className="space-y-5 mt-10">
<Label htmlFor="targetInvest" className="font-bold text-lg">
Target investment
</Label>
<div className="flex space-x-5">
<Input
type="text"
id="targetInvest"
className="w-96"
placeholder="$ 1,000,000"
{...register}
/>
<span className="text-[12px] text-neutral-500 self-center">
We encourage you to set a specific target investment <br />{" "}
amount that reflects your funding goals.
</span>
{/* Target Investment */}
<div className="space-y-5 mt-10">
<Label htmlFor="targetInvest" className="font-bold text-lg">
Target investment
</Label>
<div className="flex space-x-5">
<Input
type="text"
id="targetInvest"
className="w-96"
placeholder="$ 1,000,000"
{...registerProject}
/>
<span className="text-[12px] text-neutral-500 self-center">
We encourage you to set a specific target investment{" "}
<br /> amount that reflects your funding goals.
</span>
</div>
</div>
</div>
{/* Deadline */}
<div className="space-y-5 mt-10">
<Label htmlFor="deadline" className="font-bold text-lg">
Deadline
</Label>
<div className="flex space-x-5">
<Input
type="datetime-local"
id="deadline"
className="w-96"
{...register}
/>
<span className="text-[12px] text-neutral-500 self-center">
What is the deadline for your fundraising project? Setting{" "}
<br /> a clear timeline can help motivate potential
investors.
</span>
{/* Deadline */}
<div className="space-y-5 mt-10">
<Label htmlFor="deadline" className="font-bold text-lg">
Deadline
</Label>
<div className="flex space-x-5">
<Input
type="datetime-local"
id="deadline"
className="w-96"
{...registerProject}
/>
<span className="text-[12px] text-neutral-500 self-center">
What is the deadline for your fundraising project? Setting{" "}
<br /> a clear timeline can help motivate potential
investors.
</span>
</div>
</div>
</div>
</div>
</form>
</div>
)}
{/* Submit */}