59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import type { UseFormReturn } from 'react-hook-form'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Field, FieldError, FieldLabel } from '@/components/ui/field'
|
|
import { Input } from '@/components/ui/input'
|
|
import type { StartValues } from '@/features/onboard/onboarding.types'
|
|
|
|
type OnboardingStartStepProps = {
|
|
form: UseFormReturn<StartValues>
|
|
errorMessage: string | null
|
|
infoMessage: string | null
|
|
onSubmit: (values: StartValues) => Promise<void>
|
|
}
|
|
|
|
export function OnboardingStartStep({
|
|
form,
|
|
errorMessage,
|
|
infoMessage,
|
|
onSubmit,
|
|
}: OnboardingStartStepProps) {
|
|
return (
|
|
<form className="space-y-3" onSubmit={form.handleSubmit(onSubmit)}>
|
|
<Field data-invalid={Boolean(form.formState.errors.fullName)}>
|
|
<FieldLabel htmlFor="onboard-fullname">Nombre</FieldLabel>
|
|
<Input
|
|
id="onboard-fullname"
|
|
type="text"
|
|
placeholder="Nombre Apellido"
|
|
aria-invalid={Boolean(form.formState.errors.fullName)}
|
|
{...form.register('fullName')}
|
|
/>
|
|
<FieldError errors={[form.formState.errors.fullName]} />
|
|
</Field>
|
|
|
|
<Field data-invalid={Boolean(form.formState.errors.email)}>
|
|
<FieldLabel htmlFor="onboard-email">Email</FieldLabel>
|
|
<Input
|
|
id="onboard-email"
|
|
type="email"
|
|
placeholder="tu@email.com"
|
|
aria-invalid={Boolean(form.formState.errors.email)}
|
|
{...form.register('email')}
|
|
/>
|
|
<FieldError errors={[form.formState.errors.email]} />
|
|
</Field>
|
|
|
|
{errorMessage && <p className="text-sm text-destructive">{errorMessage}</p>}
|
|
{infoMessage && <p className="text-sm text-muted-foreground">{infoMessage}</p>}
|
|
|
|
<Button
|
|
type="submit"
|
|
className="w-full"
|
|
disabled={form.formState.isSubmitting || !form.formState.isValid}
|
|
>
|
|
{form.formState.isSubmitting ? 'Enviando...' : 'Enviar codigo OTP'}
|
|
</Button>
|
|
</form>
|
|
)
|
|
}
|