renamed folder

components/ui/enter-code-area-form/Challenge-FormField.tsx

@@ -0,0 +1,58 @@
+import {
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import { challengeMap } from "@/data-store/challenge-store";
+
+export function ChallengeFormField(form: any) {
+    return (
+        <FormField
+            control={form.control}
+            name='challenge'
+            render={({ field }) => (
+                <FormItem className='mb-[1px]'>
+                    <FormLabel>Challenge/Level</FormLabel>
+                    <FormControl>
+                        <div className='flex'>
+                            <Select
+                                onValueChange={field.onChange}
+                                defaultValue={field.value}
+                            >
+                                <SelectTrigger className='w-[180px]'>
+                                    <SelectValue placeholder='Select a Challenge' />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem
+                                        key='default'
+                                        value='Select a Challenge'
+                                    >
+                                        Select a Challenge
+                                    </SelectItem>
+                                    {challengeMap.map((item) => (
+                                        <SelectItem
+                                            key={item.key}
+                                            value={item.key}
+                                        >
+                                            {item.value}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
+                    </FormControl>
+                    <FormMessage />
+                </FormItem>
+            )}
+        />
+    );
+}

components/ui/enter-code-area-form/Email-FormField.tsx

@@ -0,0 +1,33 @@
+import {
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { useStepperStore } from "@/data-store/stepper-store";
+
+export function EmailFormField(form: any) {
+    const { email } = useStepperStore();
+
+    return (
+        <FormField
+            control={form.control}
+            name='email'
+            render={({ field }) => (
+                <FormItem>
+                    <FormLabel>Email</FormLabel>
+                    <FormControl>
+                        <Input
+                            placeholder='email@email.com'
+                            defaultValue={email}
+                            {...field}
+                        />
+                    </FormControl>
+                    <FormMessage />
+                </FormItem>
+            )}
+        />
+    );
+}

components/ui/enter-code-area-form/StepOne.tsx

@@ -0,0 +1,87 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { useForm } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import { Form } from "@/components/ui/form";
+import {
+    useStepperStore,
+    progressIncrements,
+} from "@/data-store/stepper-store";
+import { EmailFormField } from "./Email-FormField";
+import { TOSFormField } from "./TOS-FormField";
+import { Loader2 } from "lucide-react";
+
+export function StepOne() {
+    const {
+        progress,
+        setProgress,
+        step,
+        setStep,
+        email,
+        setEmail,
+        check,
+        setCheck,
+    } = useStepperStore();
+
+    const formStepOneSchema = z.object({
+        email: z
+            .string()
+            .email({
+                message: "Invalid email address.",
+            })
+            .default(email),
+
+        accept: z
+            .literal<boolean>(true, {
+                errorMap: () => ({
+                    message: "You must accept the terms & conditions",
+                }),
+            })
+            .default(check),
+    });
+
+    const form = useForm<z.infer<typeof formStepOneSchema>>({
+        resolver: zodResolver(formStepOneSchema),
+    });
+
+    async function onContinue(values: z.infer<typeof formStepOneSchema>) {
+        setCheck(values.accept);
+
+        if (values.accept === true) {
+            const userEmail: string = values.email;
+            setEmail(userEmail);
+            setCheck(values.accept);
+
+            if (step === 1) {
+                setProgress(progress + progressIncrements);
+                setStep(step + 1);
+            }
+        }
+    }
+    return (
+        <Form {...form}>
+            <form
+                onSubmit={form.handleSubmit(onContinue)}
+                className='w-full space-y-4 p-5'
+            >
+                <EmailFormField />
+                <TOSFormField />
+
+                {form.formState.isSubmitting ? (
+                    <Button disabled>
+                        <Loader2 className='mr-2 h-4 w-4 animate-spin' />
+                        Submitting...
+                    </Button>
+                ) : (
+                    <Button
+                        type='submit'
+                        variant='ghost'
+                        className='float-right font-semibold text-muted-foreground'
+                    >
+                        Continue
+                    </Button>
+                )}
+            </form>
+        </Form>
+    );
+}

components/ui/enter-code-area-form/StepTwo.tsx

@@ -0,0 +1,94 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { useForm } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import { Form } from "@/components/ui/form";
+import {
+    progressIncrements,
+    useStepperStore,
+} from "@/data-store/stepper-store";
+import useSessionStore from "@/data-store/session-store";
+import LandingPageCode from "@/components/landing/test-challenges/placeholder-code";
+import { useRouter } from "next/navigation";
+import { ChallengeFormField } from "./Challenge-FormField";
+import { Loader2 } from "lucide-react";
+import { challengeEnum } from "@/data-store/challenge-store";
+
+const formStepTwoSchema = z.object({
+    challenge: z.nativeEnum(challengeEnum, {
+        errorMap: (issue) => {
+            switch (issue.code) {
+                case "invalid_type":
+                    return { message: "Please select a challenge!" };
+                default:
+                    return {
+                        message:
+                            "This is not a valid challenge, select a different challenge!",
+                    };
+            }
+        },
+    }),
+});
+
+export function StepTwo() {
+    const { progress, setProgress, step, setStep, setChallenge } =
+        useStepperStore();
+    const { setCode } = useSessionStore();
+
+    const router = useRouter();
+
+    const form = useForm<z.infer<typeof formStepTwoSchema>>({
+        resolver: zodResolver(formStepTwoSchema),
+    });
+
+    async function onSubmit(values: z.infer<typeof formStepTwoSchema>) {
+        if (step === 2) {
+            const selection: string = values.challenge;
+            setCode(LandingPageCode());
+            setChallenge(selection);
+            setProgress(progress + progressIncrements);
+
+            router.push("/code-area");
+        }
+    }
+
+    async function onBack() {
+        setProgress(progress - progressIncrements);
+        setStep(step - 1);
+    }
+
+    return (
+        <div className='m-auto'>
+            <Form {...form}>
+                <form
+                    onSubmit={form.handleSubmit(onSubmit)}
+                    className='w-full space-y-8 p-5'
+                >
+                    <ChallengeFormField />
+
+                    <Button
+                        variant='ghost'
+                        className='self float-left font-semibold text-muted-foreground'
+                        onClick={() => onBack()}
+                    >
+                        Previous
+                    </Button>
+                    {form.formState.isSubmitting ? (
+                        <Button disabled>
+                            <Loader2 className='mr-2 h-4 w-4 animate-spin' />
+                            Submitting...
+                        </Button>
+                    ) : (
+                        <Button
+                            type='submit'
+                            variant='ghost'
+                            className='self float-right font-semibold text-muted-foreground'
+                        >
+                            Submit
+                        </Button>
+                    )}
+                </form>
+            </Form>
+        </div>
+    );
+}

components/ui/enter-code-area-form/Stepper-Form.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useStepperStore } from "@/data-store/stepper-store";
+
+import { StepOne } from "./StepOne";
+import { StepTwo } from "./StepTwo";
+import { useEffect } from "react";
+
+export function StepperForm() {
+    const { step, setChallenge, setCheck, setEmail, setProgress, setStep } =
+        useStepperStore();
+
+    useEffect(() => {
+        setChallenge("");
+        setCheck(false);
+        setEmail("");
+        setProgress(0);
+        setStep(1);
+    }, []);
+
+    if (step === 1) {
+        return <StepOne />;
+    } else {
+        return <StepTwo />;
+    }
+}

components/ui/enter-code-area-form/StepperCard.tsx

@@ -0,0 +1,34 @@
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card";
+
+import { Progress } from "@/components/ui/progress";
+import { StepperForm } from "./Stepper-Form";
+
+export function StepperCard() {
+    return (
+        <Card className='mx-auto h-[420px] rounded-2xl'>
+            <CardHeader>
+                <CardTitle className='mb-4'>
+                    Try One Of Our Coding Challenges!!!
+                </CardTitle>
+                <CardDescription>
+                    {" "}
+                    Here at TailSpin, we like to have fun! <br /> By filling out
+                    this form, you can use our code editor and attempt to do an
+                    awesome Tailwind UI challenge!
+                </CardDescription>
+                <Progress />
+            </CardHeader>
+            <CardContent>
+                <StepperForm />
+            </CardContent>
+        </Card>
+    );
+}
+
+export default StepperCard;