Skip to content

Commit 8c76cd3

Browse files
ianthirdwebianthirdweb
committed
Form is working
1 parent 6e5b524 commit 8c76cd3

File tree

1 file changed

+319
-28
lines changed
  • apps/dashboard/src/app/onboarding

1 file changed

+319
-28
lines changed

‎apps/dashboard/src/app/onboarding/page.tsx‎

Lines changed: 319 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,332 @@
11
"use client";
2-
import { FormControl, Input } from "@chakra-ui/react";
3-
import { useForm } from "react-hook-form";
4-
import { FormLabel } from "tw-components";
2+
import { Button } from "@/components/ui/button";
3+
import { Input } from "@/components/ui/input";
4+
import {
5+
Select,
6+
SelectContent,
7+
SelectGroup,
8+
SelectItem,
9+
SelectTrigger,
10+
SelectValue,
11+
} from "@/components/ui/select";
12+
import { Checkbox } from "@chakra-ui/react";
13+
import { FormControl } from "@chakra-ui/react";
14+
import { useState } from "react";
15+
import {
16+
type FieldErrors,
17+
type SubmitHandler,
18+
type UseFormRegister,
19+
useForm,
20+
} from "react-hook-form";
21+
import { FormErrorMessage, FormLabel } from "tw-components";
22+
23+
interface FormData {
24+
email: string;
25+
userType: string;
26+
name: string;
27+
role: string;
28+
industry: string;
29+
interests: string[];
30+
}
31+
32+
interface StepProps {
33+
register: UseFormRegister<FormData>;
34+
errors: FieldErrors<FormData>;
35+
}
536

637
export default function OnboardingPage() {
7-
const form = useForm<{
8-
email: string;
9-
userType: string;
10-
teamName: string;
11-
role: string;
12-
industry: string;
13-
interests: string[];
14-
}>();
38+
const [step, setStep] = useState(1);
39+
40+
const {
41+
register,
42+
handleSubmit,
43+
formState: { errors },
44+
trigger,
45+
watch,
46+
} = useForm<FormData>({
47+
defaultValues: {
48+
interests: [],
49+
},
50+
});
51+
52+
const watchInterests = watch("interests");
53+
54+
const onSubmit: SubmitHandler<FormData> = (data) => {
55+
console.log(data);
56+
};
57+
58+
const nextStep = async () => {
59+
const fields =
60+
step === 1
61+
? ["email"]
62+
: step === 2
63+
? ["userType", "name", "role", "industry"]
64+
: ["interests"];
65+
const isStepValid = await trigger(fields as Array<keyof FormData>);
66+
if (isStepValid) setStep(step + 1);
67+
};
68+
69+
const Step1: React.FC<StepProps> = ({ register, errors }) => (
70+
<div>
71+
<FormControl className="flex flex-col space-y-2">
72+
<FormLabel>What's your email?</FormLabel>
73+
<Input
74+
id="email"
75+
type="email"
76+
placeholder="[email protected]"
77+
{...register("email", { required: "Email is required" })}
78+
/>
79+
<FormErrorMessage>
80+
{errors.email && <span>{errors.email.message}</span>}
81+
</FormErrorMessage>
82+
</FormControl>
83+
</div>
84+
);
85+
86+
const Step2: React.FC<StepProps> = ({ register, errors }) => (
87+
<div className="flex flex-col space-y-8">
88+
{/* User Type */}
89+
<FormControl>
90+
<Select>
91+
<SelectTrigger className="w-[180px]">
92+
<SelectValue placeholder={"Select User Type"} />
93+
</SelectTrigger>
94+
<SelectContent>
95+
<SelectGroup>
96+
<SelectItem
97+
key={"developer"}
98+
value={"developer"}
99+
{...register("userType")}
100+
>
101+
Developer
102+
</SelectItem>
103+
<SelectItem
104+
key={"studio"}
105+
value={"studio"}
106+
{...register("userType")}
107+
>
108+
Studio
109+
</SelectItem>
110+
</SelectGroup>
111+
</SelectContent>
112+
</Select>
113+
114+
<FormErrorMessage>
115+
{errors.userType && <span>{errors.userType.message}</span>}
116+
</FormErrorMessage>
117+
</FormControl>
118+
{/* Name */}
119+
<FormControl className="flex flex-col space-y-2">
120+
<FormLabel>What's the name of your company?</FormLabel>
121+
<Input
122+
id="name"
123+
type="text"
124+
placeholder="Hooli, Inc."
125+
{...register("name")}
126+
/>
127+
</FormControl>
128+
<FormControl className="flex flex-col space-y-2">
129+
<FormLabel>What's your role?</FormLabel>
130+
<Select {...register("role")}>
131+
<SelectTrigger className="w-[180px]">
132+
<SelectValue placeholder={"Select Role"} />
133+
</SelectTrigger>
134+
<SelectContent>
135+
<SelectGroup>
136+
<SelectItem key={"founder"} value={"founder"}>
137+
Founder
138+
</SelectItem>
139+
<SelectItem key={"product"} value={"product"}>
140+
Product
141+
</SelectItem>
142+
<SelectItem key={"developer"} value={"developer"}>
143+
Developer
144+
</SelectItem>
145+
<SelectItem key={"biz-dev"} value={"biz-dev"}>
146+
Business Development
147+
</SelectItem>
148+
</SelectGroup>
149+
</SelectContent>
150+
</Select>
151+
152+
<FormErrorMessage>
153+
{errors.role && <span>{errors.role.message}</span>}
154+
</FormErrorMessage>
155+
</FormControl>
156+
<FormControl className="flex flex-col space-y-2">
157+
<FormLabel>What industry is your company in?</FormLabel>
158+
<Select {...register("industry")}>
159+
<SelectTrigger className="w-[180px]">
160+
<SelectValue placeholder={"Select Industry"} />
161+
</SelectTrigger>
162+
<SelectContent>
163+
<SelectItem key={"consumer"} value={"consumer"}>
164+
Consumer
165+
</SelectItem>
166+
<SelectItem key={"defi"} value={"defi"}>
167+
DeFi
168+
</SelectItem>
169+
<SelectItem key={"gaming"} value={"gaming"}>
170+
Gaming
171+
</SelectItem>
172+
<SelectItem key={"social"} value={"social"}>
173+
Social
174+
</SelectItem>
175+
</SelectContent>
176+
</Select>
177+
178+
<FormErrorMessage>
179+
{errors.industry && <span>{errors.industry.message}</span>}
180+
</FormErrorMessage>
181+
</FormControl>
182+
</div>
183+
);
184+
185+
const Step3: React.FC<StepProps> = ({ register }) => (
186+
<div className="flex flex-col space-y-4">
187+
<FormControl>
188+
<div className="flex flex-col gap-2">
189+
<Checkbox
190+
key="SOCIAL_LOGIN"
191+
value="SOCIAL_LOGIN"
192+
{...register("interests")}
193+
>
194+
<span className="text-sm">Social Login</span>
195+
</Checkbox>
196+
<Checkbox
197+
key="WALLET_CONECTORS"
198+
value="WALLET_CONECTORS"
199+
{...register("interests")}
200+
>
201+
<span className="text-sm">Wallet Connectors</span>
202+
</Checkbox>
203+
<Checkbox
204+
key="SPONSOR_TRANSACTIONS"
205+
value="SPONSOR_TRANSACTIONS"
206+
{...register("interests")}
207+
>
208+
<span className="text-sm">Sponsor Transactions</span>
209+
</Checkbox>
210+
<Checkbox
211+
key="UNIFIED_IDENTITY"
212+
value="UNIFIED_IDENTITY"
213+
{...register("interests")}
214+
>
215+
<span className="text-sm">Unified Identity</span>
216+
</Checkbox>
217+
<Checkbox
218+
key="CUSTOM_AUTH"
219+
value="CUSTOM_AUTH"
220+
{...register("interests")}
221+
>
222+
<span className="text-sm">Custom Auth</span>
223+
</Checkbox>
224+
<Checkbox
225+
key="QUERY_BLOCKCHAIN_DATA"
226+
value="QUERY_BLOCKCHAIN_DATA"
227+
{...register("interests")}
228+
>
229+
<span className="text-sm">Query Blockchain Data</span>
230+
</Checkbox>
231+
<Checkbox
232+
key="AUTO_TXN_MGMT"
233+
value="AUTO_TXN_MGMT"
234+
{...register("interests")}
235+
>
236+
<span className="text-sm">Automated Transaction Management</span>
237+
</Checkbox>
238+
<Checkbox
239+
key="GAMING_TOOLS"
240+
value="GAMING_TOOLS"
241+
{...register("interests")}
242+
>
243+
<span className="text-sm">Gaming Tools</span>
244+
</Checkbox>
245+
<Checkbox
246+
key="TOKEN_SWAPS"
247+
value="TOKEN_SWAPS"
248+
{...register("interests")}
249+
>
250+
<span className="text-sm">Token Swaps</span>
251+
</Checkbox>
252+
<Checkbox
253+
key="FIAT_ONRAMPS"
254+
value="FIAT_ONRAMPS"
255+
{...register("interests")}
256+
>
257+
<span className="text-sm">Fiat Onramps</span>
258+
</Checkbox>
259+
</div>
260+
</FormControl>
261+
<h1>Selected: {watchInterests.join(", ")}</h1>
262+
</div>
263+
);
15264

16265
return (
17266
<div className="relative flex h-screen place-items-center bg-muted/30 md:flex-row">
18-
<main className="z-10 flex flex-col gap-6">
267+
<main className="z-10 flex w-full gap-6">
19268
{/* Left Panel */}
20-
<div className="w-full p-12">
21-
<div className="flex space-y-2">
22-
<h1>Tell us about you.</h1>
23-
<h3>This will help us personalize your experience.</h3>
269+
<div className="items-between relative flex h-screen w-1/2 flex-col p-12">
270+
<div className="flex flex-col space-y-2">
271+
<h1 className="font-semibold text-xl tracking-tight">
272+
{step === 3 ? "Tell us what you need." : "Tell us about you."}
273+
</h1>
274+
<h3 className="font-regular text-muted-foreground text-sm tracking-tight">
275+
This will help us personalize your experience.
276+
</h3>
24277
</div>
25278
<form className="my-8">
26-
<FormControl>
27-
<FormLabel>What's your email?</FormLabel>
28-
<Input
29-
id="email"
30-
type="text"
31-
placeholder="[email protected]"
32-
{...form.register("email")}
33-
/>
34-
{/* <FormErrorMessage>
35-
{form.formState.errors.amount?.message}
36-
</FormErrorMessage> */}
37-
</FormControl>
279+
{step === 1 && <Step1 register={register} errors={errors} />}
280+
{step === 2 && <Step2 register={register} errors={errors} />}
281+
{step === 3 && <Step3 register={register} errors={errors} />}
38282
</form>
283+
<div className="absolute bottom-12 flex w-full items-center justify-between">
284+
{/* Stepper */}
285+
<div className="flex space-x-4">
286+
<div
287+
className={
288+
step === 1
289+
? "h-3 w-12 rounded-md bg-white"
290+
: "h-3 w-12 rounded-md bg-secondary"
291+
}
292+
/>
293+
<div
294+
className={
295+
step === 2
296+
? "h-3 w-12 rounded-md bg-white"
297+
: "h-3 w-12 rounded-md bg-secondary"
298+
}
299+
/>
300+
<div
301+
className={
302+
step === 3
303+
? "h-3 w-12 rounded-md bg-white"
304+
: "h-3 w-12 rounded-md bg-secondary"
305+
}
306+
/>
307+
</div>
308+
<div className="flex space-x-4">
309+
{step > 1 && (
310+
<Button
311+
type="button"
312+
variant="secondary"
313+
onClick={() => setStep(step - 1)}
314+
>
315+
Back
316+
</Button>
317+
)}
318+
{step < 3 && (
319+
<Button type="button" onClick={nextStep}>
320+
Next
321+
</Button>
322+
)}
323+
{step === 3 && (
324+
<Button type="submit" onClick={handleSubmit(onSubmit)}>
325+
Submit
326+
</Button>
327+
)}
328+
</div>
329+
</div>
39330
</div>
40331
</main>
41332
</div>

0 commit comments

Comments
 (0)