Validates data from form steps according to zod schemas.

src/app/app/onboarding/page.tsx

@@ -7,10 +7,10 @@ import { useOnboardingForm } from "@/hooks/useOnboardingForm";
 import { useSearchParams } from "next/navigation";
 
 const steps = [
-  <OnboardingRegistration key={0} />,
-  <OnboardingContact key={1} />,
-  <OnboardingProfessional key={2} />,
-  <OnboardingAbout key={3} />,
+  OnboardingRegistration,
+  OnboardingContact,
+  OnboardingProfessional,
+  OnboardingAbout,
 ];
 
 export default function Form() {
@@ -20,25 +20,32 @@ export default function Form() {
 
   const {
     step,
-    content,
     canMoveNext,
     canMovePrevious,
     moveNextStep,
     movePrevStep,
+    content: Component,
   } = useOnboardingForm(stepNumber, steps);
 
+  function onSubmit() {
+    // TODO: call submit if it's the last step
+    moveNextStep();
+  }
+
   return (
-    <div className="absolute top-0 bottom-0 z-10 right-0 left-0 bg-pod-purple">
+    <div className="bg-white">
       <div className="grid gap-4 max-w-sm mx-auto">
-        <div className="flex-1">{content}</div>
+        <div className="flex-1">
+          <Component moveNextStep={moveNextStep} onSubmit={onSubmit} />
+        </div>
 
-        <div className="bg-red-100 flex justify-between">
+        <div className="flex justify-between">
           <button
-            className="disabled:text-gray-400"
+            className="text-white text-sm rounded-xl p-1 w-24 h-12 font-medium border-2 bg-pod-purple shadow-md"
             disabled={!canMovePrevious}
             onClick={movePrevStep}
           >
-            prev
+            Voltar
           </button>
 
           <div>
@@ -52,11 +59,11 @@ export default function Form() {
           </div>
 
           <button
-            className="disabled:text-gray-400"
+            className="text-white text-sm rounded-xl p-1 w-24 h-12 font-medium border-2 bg-pod-purple shadow-md"
             disabled={!canMoveNext}
             onClick={moveNextStep}
           >
-            next
+            Continuar
           </button>
         </div>
       </div>
@@ -68,5 +75,5 @@ function StepDot({ idx = 0, step = 0 }) {
   let color = "text-gray-300";
   if (idx < step) color = "text-blue-400";
   if (idx === step) color = "text-purple-400";
-  return <span className={color}>o</span>;
+  return <span className={`${color} font-medium text-2xl`}>o</span>;
 }

src/components/forms/OnboardingAbout.tsx

@@ -5,8 +5,9 @@ import { AboutSchema } from "@/shared/onboarding";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Label, Form, Textarea } from "@/shared/components";
+import { FormProps } from "@/hooks/useOnboardingForm";
 
-export default function OnboardingAbout() {
+export default function OnboardingAbout(props: FormProps) {
   const {
     register,
     handleSubmit,
@@ -18,8 +19,13 @@ export default function OnboardingAbout() {
   const values = watch(["qOne", "qTwo"]);
 
   function onSubmit(data: AboutSchema) {
+    const isValid = aboutSchema.safeParse(data);
+    isValid.success
+      ? props.moveNextStep()
+      : console.log("Dados inválidos:", isValid.error);
     console.log(data);
   }
+
   return (
     <div className="bg-slate-800 grid">
       <Form onSubmit={handleSubmit(onSubmit)}>
@@ -49,6 +55,7 @@ export default function OnboardingAbout() {
             {errors.qTwo && <span>{errors.qTwo.message}</span>}
           </div>
         </div>
+        <button type="submit">TESTE ENVIAR</button>
       </Form>
       <pre>
         <code>{JSON.stringify(values, null, 2)}</code>

src/components/forms/OnboardingContact.tsx

@@ -5,8 +5,10 @@ import { ContactSchema } from "@/shared/onboarding";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Input, Label, Form } from "@/shared/components";
+import { FormProps } from "@/hooks/useOnboardingForm";
 
-export default function OnboardingContact() {
+export default function OnboardingContact(props: FormProps) {
+  // TODO: Recebe onSubmit, que vai ser uma função.
   const {
     register,
     handleSubmit,
@@ -23,8 +25,15 @@ export default function OnboardingContact() {
   ]);
 
   function onSubmit(data: ContactSchema) {
+    const isValid = contactSchema.safeParse(data);
+    isValid.success
+      ? props.moveNextStep()
+      : console.log("Dados inválidos:", isValid.error);
     console.log(data);
+    // TODO: enviar o dado para o store global.(proxima pr)  "props.onSubmit();"
+    // TODO: Após o envio, seguir para a proxima etapa, chamar o next
   }
+
   return (
     <div className="bg-slate-800 grid">
       <Form onSubmit={handleSubmit(onSubmit)}>
@@ -64,6 +73,7 @@ export default function OnboardingContact() {
           </div>
           {errors.email && <span>{errors.email.message}</span>}
         </div>
+        <button type="submit">TESTE ENVIAR</button>
       </Form>
 
       <pre>

src/components/forms/OnboardingProfessional.tsx

@@ -5,8 +5,9 @@ import { ProfessionalSchema } from "@/shared/onboarding";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Input, Label, Select, Form } from "@/shared/components";
+import { FormProps } from "@/hooks/useOnboardingForm";
 
-export default function OnboardingProfessional() {
+export default function OnboardingProfessional(props: FormProps) {
   const {
     register,
     handleSubmit,
@@ -24,6 +25,10 @@ export default function OnboardingProfessional() {
   ]);
 
   function onSubmit(data: ProfessionalSchema) {
+    const isValid = professionalSchema.safeParse(data);
+    isValid.success
+      ? props.moveNextStep()
+      : console.log("Dados inválidos:", isValid.error);
     console.log(data);
   }
 
@@ -92,6 +97,7 @@ export default function OnboardingProfessional() {
             </div>
           </div>
         </div>
+        <button type="submit"> TESTE ENVIAR </button>
       </Form>
       <pre>
         <code>{JSON.stringify(values, null, 2)}</code>

src/components/forms/OnboardingRegistration.tsx

@@ -5,8 +5,9 @@ import { RegistrationSchema } from "@/shared/onboarding";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Input, Label, Select, Form, Title } from "@/shared/components";
+import { FormProps } from "@/hooks/useOnboardingForm";
 
-export default function OnboardingRegistration() {
+export default function OnboardingRegistration(props: FormProps) {
   const {
     register,
     handleSubmit,
@@ -22,6 +23,10 @@ export default function OnboardingRegistration() {
   ]);
 
   function onSubmit(data: RegistrationSchema) {
+    const isValid = registrationSchema.safeParse(data);
+    isValid.success
+      ? props.moveNextStep()
+      : console.log("Dados inválidos:", isValid.error);
     console.log(data);
   }
 
@@ -63,6 +68,7 @@ export default function OnboardingRegistration() {
             </div>
           </div>
         </div>
+        <button type="submit">TESTE ENVIAR</button>
       </Form>
 
       <pre>

src/hooks/useOnboardingForm.tsx

@@ -1,7 +1,12 @@
 "use client";
-import { ReactElement, useState } from "react";
+import { FC, useState } from "react";
 
-export function useOnboardingForm(initialStep = 0, steps: ReactElement[]) {
+export type FormProps = {
+  onSubmit: () => void;
+  moveNextStep: () => void;
+};
+
+export function useOnboardingForm(initialStep = 0, steps: FC<FormProps>[]) {
   const [step, setStep] = useState(initialStep);
   const canMovePrevious = step !== 0;
   const canMoveNext = step !== steps.length - 1;