diff --git a/src/components/_Layout/PlanPage.tsx b/src/components/_Layout/PlanPage.tsx index cc6ce259..4c6bbcad 100644 --- a/src/components/_Layout/PlanPage.tsx +++ b/src/components/_Layout/PlanPage.tsx @@ -1,16 +1,18 @@ -import Button from "@components/Button"; import { CenteredContainer } from "@components/CenteredContainer"; import ProfileCardToggle from "@components/ProfileCardToggle"; import { Form } from "SIGNUP_SRC/components/Form"; import { Sign } from "SIGNUP_SRC/components/sign"; import { useMultistepForm } from "SIGNUP_SRC/hooks/useMultistepForm"; -import Link from "next/link"; import React from "react"; +import { useFormContext } from "react-hook-form"; export const PlanPage = () => { + const { + formState: { isSubmitting }, + } = useFormContext(); const { setIsChoosingPlan } = useMultistepForm(); - const handleNext = () => { + const handleGoBack = () => { setIsChoosingPlan(false); }; @@ -29,10 +31,8 @@ export const PlanPage = () => { - - Voltar - - + Voltar + diff --git a/src/components/_Layout/RegisterPage.tsx b/src/components/_Layout/RegisterPage.tsx index 6f87e001..d285482d 100644 --- a/src/components/_Layout/RegisterPage.tsx +++ b/src/components/_Layout/RegisterPage.tsx @@ -5,7 +5,7 @@ import StepperVertical from "@components/StepperVertical"; import { useMultistepForm } from "SIGNUP_SRC/hooks/useMultistepForm"; import { Personal } from "SIGNUP_SRC/steps/Personal"; import { IFormValues } from "SIGNUP_SRC/types"; -import { PathValue, SubmitHandler, useFormContext } from "react-hook-form"; +import { useFormContext } from "react-hook-form"; import { Location } from "SIGNUP_SRC/steps/Location"; import { Professional } from "SIGNUP_SRC/steps/Professional"; import { useCountriesFactory } from "SIGNUP_SRC/steps/factories/useCountriesFactory"; @@ -16,9 +16,6 @@ import { IUseGeoStates } from "SIGNUP_SRC/hooks/useGeoStates/types"; import { IUseGeoCities } from "SIGNUP_SRC/hooks/useGeoCities/types"; import { Form } from "SIGNUP_SRC/components/Form"; import { Sign } from "SIGNUP_SRC/components/sign"; -import { toast } from "react-toastify"; -import { useMutation } from "@apollo/client"; -import { CREATE_USER } from "services/apollo/mutations"; import { useRouter } from "next/router"; export const validationPerStep: Record = { @@ -37,18 +34,13 @@ const geoCitiesOptions: IUseGeoCities = { export const RegisterPage = () => { const { formCurrentStep, setFormCurrentStep, setIsChoosingPlan } = useMultistepForm(); const methods = useFormContext(); - const [createUser] = useMutation(CREATE_USER); const router = useRouter(); const { - handleSubmit, trigger, - formState: { errors, isSubmitting }, - watch, + formState: { errors }, } = methods; - const isMentor = watch("isMentor"); - const isInFirstStep = formCurrentStep === 0; const isInLastStep = formCurrentStep === 2; @@ -72,59 +64,19 @@ export const RegisterPage = () => { ); const allStepValidationsResult = await Promise.all(allStepValidations); const allValidationsPassed = allStepValidationsResult.every(Boolean); - if (allValidationsPassed) return setFormCurrentStep((currentStep) => currentStep + 1); + if (allValidationsPassed) { + if (isInLastStep) return setIsChoosingPlan(true); + return setFormCurrentStep((currentStep) => currentStep + 1); + } }; const handleGoBackButton = () => { if (isInFirstStep) { - return setIsChoosingPlan(true); + return router.push("/signin"); } setFormCurrentStep((currentStep) => currentStep - 1); }; - const submitHandler: SubmitHandler = async (formData) => { - const { repeatPassword, isTermsAccepted, ...createUserPayload } = formData; - - try { - const response = await toast.promise( - createUser({ - variables: { - input: createUserPayload, - }, - }), - { - pending: "Aguarde um momento...", - success: `Usuário ${ - formData.firstName ? formData.firstName : "MentorCycle" - } cadastrado com sucesso!`, - } - ); - if (response.data.signUpUser) { - localStorage.removeItem("form-data"); - router.push("/dashboard"); - } - } catch (error) { - toast.error(getErrorMessage(error)); - } - }; - - const getErrorMessage = (error: any) => { - const errorMessages: Record = { - description: "A descrição precisa ter no mínimo 2 caracteres", - email: "Este email já possui cadastro", - }; - - for (const key in errorMessages) { - if (error.message.includes(key)) { - return errorMessages[key]; - } - } - - return error instanceof Error - ? error.message - : "Não foi possivel concluir o cadastro, tente novamente mais tarde"; - }; - return (
@@ -157,10 +109,7 @@ export const RegisterPage = () => { className="hidden lg:block" /> -
+
{formCurrentStep === 0 && } {formCurrentStep === 1 && ( @@ -175,22 +124,13 @@ export const RegisterPage = () => {
- {isInLastStep && ( - - )} - {!isInLastStep && ( - !isInLastStep && handleActionButton()} - disabled={!shouldGoForward} - text="Próximo" - /> - )} + - +
diff --git a/src/providers/signup/register/index.tsx b/src/providers/signup/register/index.tsx index 5e63e56e..102da3bf 100644 --- a/src/providers/signup/register/index.tsx +++ b/src/providers/signup/register/index.tsx @@ -1,4 +1,4 @@ -import { FormProvider, useForm } from "react-hook-form"; +import { FormProvider, SubmitHandler, useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { IFormValues } from "SIGNUP_SRC/types"; @@ -6,6 +6,10 @@ import { defaultValues } from "SIGNUP_SRC/constants"; import { signupFormSchema } from "SIGNUP_SRC/forms/signup"; import { MultistepFormContext } from "SIGNUP_SRC/hooks/useMultistepForm"; import { SetStateAction, useCallback, useMemo, useState } from "react"; +import { toast } from "react-toastify"; +import { useMutation } from "@apollo/client"; +import { CREATE_USER } from "services/apollo/mutations"; +import { useRouter } from "next/router"; interface Props { children: JSX.Element; @@ -13,7 +17,9 @@ interface Props { const Providers = ({ children }: Props) => { const [formCurrentStep, setFormCurrentStep] = useState(0); - const [isChoosingPlan, setIsChoosingPlan] = useState(true); + const [isChoosingPlan, setIsChoosingPlan] = useState(false); + const router = useRouter(); + const [createUser] = useMutation(CREATE_USER); const values = useMemo( () => ({ formCurrentStep, isChoosingPlan }), @@ -35,6 +41,49 @@ const Providers = ({ children }: Props) => { resolver: zodResolver(signupFormSchema), }); + const submitHandler: SubmitHandler = async (formData) => { + const { repeatPassword, isTermsAccepted, ...createUserPayload } = formData; + + try { + const response = await toast.promise( + createUser({ + variables: { + input: createUserPayload, + }, + }), + { + pending: "Aguarde um momento...", + success: `Usuário ${ + formData.firstName ? formData.firstName : "MentorCycle" + } cadastrado com sucesso!`, + } + ); + if (response.data.signUpUser) { + localStorage.removeItem("form-data"); + router.push("/dashboard"); + } + } catch (error) { + toast.error(getErrorMessage(error)); + } + }; + + const getErrorMessage = (error: any) => { + const errorMessages: Record = { + description: "A descrição precisa ter no mínimo 2 caracteres", + email: "Este email já possui cadastro", + }; + + for (const key in errorMessages) { + if (error.message.includes(key)) { + return errorMessages[key]; + } + } + + return error instanceof Error + ? error.message + : "Não foi possivel concluir o cadastro, tente novamente mais tarde"; + }; + return ( { setIsChoosingPlan: setIsChoosingPlanStepMemo, }} > - {children} + +
{children}
+ ); };