From 327bf34267090d5903fa4172dc1a8753bc5a0ce0 Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Thu, 17 Oct 2024 10:10:09 +0700 Subject: [PATCH] Refactor dualSelector component to add top margin in DualOptionSelector --- src/app/business/apply/page.tsx | 4 +- src/components/BusinessForm.tsx | 624 ++++++++++++++++---------------- src/components/dualSelector.tsx | 2 +- 3 files changed, 317 insertions(+), 313 deletions(-) diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx index 98ba82b..5bcb3a2 100644 --- a/src/app/business/apply/page.tsx +++ b/src/app/business/apply/page.tsx @@ -707,14 +707,14 @@ export default function Apply() { )} {/* Submit */} -
+ {/*
-
+
*/} ); } diff --git a/src/components/BusinessForm.tsx b/src/components/BusinessForm.tsx index f4686fb..ab4c22c 100644 --- a/src/components/BusinessForm.tsx +++ b/src/components/BusinessForm.tsx @@ -1,15 +1,8 @@ import { useState } from "react"; import { SubmitHandler, useForm } from "react-hook-form"; import { Button } from "@/components/ui/button"; -import { Switch } from "@/components/ui/switch"; import { DualOptionSelector } from "@/components/dualSelector"; import { MultipleOptionSelector } from "@/components/multipleSelector"; -import { - Tooltip, - TooltipProvider, - TooltipTrigger, - TooltipContent, -} from "@/components/ui/tooltip"; import { Form, FormControl, @@ -23,6 +16,7 @@ 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"; type businessSchema = z.infer; @@ -53,9 +47,7 @@ const BusinessForm = ({ return (
- )} + onSubmit={form.handleSubmit(onSubmit as SubmitHandler)} className="space-y-8" >
@@ -64,310 +56,322 @@ const BusinessForm = ({ **All requested information in this section is required.

- - {/* Company Name */} - ( - - Company name - - - - - This should be the name your company uses on your website and - in the market. - - - - )} - /> - - {/* Industry */} - ( - - Industry - - Industry} - fieldName="industry" - choices={industry} - handleFunction={(selectedValues: string) => { - field.onChange(selectedValues); - }} - description={ - <> - Choose the industry that best aligns with your business. - - } - placeholder="Select an industry" - selectLabel="Industry" - /> - - - - )} - /> - - {/* Raised Money */} - ( - - - How much money has your company raised to date? - - - field.onChange(Number(e.target.value))} - /> - - - The sum total of past financing, including angel or venture - capital, loans, grants, or token sales. - - - - )} - /> - - {/* Incorporated in US */} - ( - - - Is your company incorporated in the United States? - - - Is your company incorporated in the United States? - } - choice1="Yes" - choice2="No" - handleFunction={(selectedValues: string) => { - // setIsInUS; - field.onChange(selectedValues); - }} - description={ - <> - Only companies that are incorporated or formed in the US - are eligible to raise via Reg CF. - - } - value={field.value} - /> - - - - )} - /> - - {/* Product for Sale */} - ( - - - Is your product available (for sale) in market? - - - Is your product available (for sale) in market?} - choice1="Yes" - choice2="No" - handleFunction={(selectedValues: string) => { - // setIsForSale; - field.onChange(selectedValues); - }} - description={ - <> - Only check this box if customers can access, use, or buy - your product today. - - } - /> - - - - )} - /> - - {/* Generating Revenue */} - ( - - Is your company generating revenue? - - Is your company generating revenue?} - choice1="Yes" - choice2="No" - value={field.value} - handleFunction={(selectedValues: string) => { - // setIsGenerating; - field.onChange(selectedValues); - }} - description={ - <> - Only check this box if your company is making money. - Please elaborate on revenue below. - - } - /> - - - - )} - /> - - {/* Pitch Deck */} - ( - - Pitch deck - -
- - - { - field.onChange(e); - }} - value={ - businessPitch === "file" ? "" : (field.value as string) - } - /> - {businessPitchFile && ( -
- 1. {businessPitchFile} - +
+ {/* Company Name */} + ( + + + Company name + + +
+
+ + + This should be the name your company uses on your{" "} +
+ website and in the market. +
- )} -
- - - - )} - /> +
+ + + + )} + /> - {/* Community Size */} - ( - - What's the rough size of your community? - - What's the rough size of your community?} - fieldName="communitySize" - choices={communitySize} - handleFunction={(selectedValues: string) => { - field.onChange(selectedValues); - }} - description={ - <> - Include your email list, social media following (e.g., - Instagram, Discord, Twitter). - - } - placeholder="Select" - selectLabel="Select" - /> - - - - )} - /> - - {/* Apply for First Fundraising Project */} - {/* ( - - -
- setApplyProject(!applyProject)} - {...field} + {/* Industry */} + ( + + + Industry} + fieldName="industry" + choices={industry} + handleFunction={(selectedValues: string) => { + field.onChange(selectedValues); + }} + description={ + <> + Choose the industry that best aligns with your + business. + + } + placeholder="Select an industry" + selectLabel="Industry" /> - - - - - 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 fundraising - tools. -

- - - + + + + )} + /> + + {/* Raised Money */} + ( + +
+ + +
+ { + const value = e.target.value; + field.onChange(value ? parseFloat(value) : null); + }} + value={field.value} + /> + + The sum total of past financing, including angel or + venture
+ capital, loans, grants, or token sales. + +
+ +
- - - - )} - /> */} - + + )} + /> + + {/* Incorporated in US */} + ( + + + Is your company incorporated in the United States? + } + choice1="Yes" + choice2="No" + handleFunction={(selectedValues: string) => { + // setIsInUS; + field.onChange(selectedValues); + }} + description={ + <> + Only companies that are incorporated or formed in the + US are eligible to raise via Reg CF. + + } + value={field.value} + /> + + + + )} + /> + + {/* Product for Sale */} + ( + + + Is your product available (for sale) in market? + } + choice1="Yes" + choice2="No" + handleFunction={(selectedValues: string) => { + // setIsForSale; + field.onChange(selectedValues); + }} + description={ + <> + Only check this box if customers can access, use, or + buy your product today. + + } + /> + + + + )} + /> + + {/* Generating Revenue */} + ( + + + Is your company generating revenue?} + choice1="Yes" + choice2="No" + value={field.value} + handleFunction={(selectedValues: string) => { + field.onChange(selectedValues); + }} + description={ + <> + Only check this box if your company is making money. + Please elaborate on revenue below. + + } + /> + + + + )} + /> + + {/* Pitch Deck */} + ( + +
+ + +
+
+ + +
+
+ { + field.onChange(e); + }} + className="w-96 mt-5" + value={ + businessPitch === "file" + ? "" + : (field.value as string) + } + /> + + Your pitch deck and other application info will be + used for
+ internal purposes only.
+ Please make sure this document is publicly + accessible. This can
+ be a DocSend, Box, Dropbox, Google Drive or other + link. +
+

+ ** support only markdown(.md) format +

+ +
+ {businessPitchFile && ( +
+ 1. {businessPitchFile} + +
+ )} +
+ + +
+ + )} + /> + + {/* Community Size */} + ( + + + What's the rough size of your community?} + fieldName="communitySize" + choices={communitySize} + handleFunction={(selectedValues: string) => { + field.onChange(selectedValues); + }} + description={ + <> + Include your email list, social media following (e.g., + Instagram, Discord, Twitter). + + } + placeholder="Select" + selectLabel="Select" + /> + + + + )} + /> + +
diff --git a/src/components/dualSelector.tsx b/src/components/dualSelector.tsx index 2711c68..9943ab9 100644 --- a/src/components/dualSelector.tsx +++ b/src/components/dualSelector.tsx @@ -14,7 +14,7 @@ interface SelectorInterface { export function DualOptionSelector(props: SelectorInterface) { return ( -
+