103 lines
3.2 KiB
TypeScript
103 lines
3.2 KiB
TypeScript
'use client'
|
|
|
|
import { submitWhatsapp } from '@/app/(frontend)/actions/submitWhatsapp'
|
|
import { CitySelect } from '@/components/CitySelect'
|
|
import { EmailInput } from '@/components/EmailInput'
|
|
import { NameInput } from '@/components/NameInput'
|
|
import { PhoneInput } from '@/components/PhoneInput'
|
|
import { StateSelect } from '@/components/StateSelect'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Field, FieldDescription, FieldGroup } from '@/components/ui/field'
|
|
import { Textarea } from '@/components/ui/textarea'
|
|
import { WhatsAppFormInput, whatsAppFormSchema } from '@/lib/schemas/whatsapp-form'
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import { useTransition } from 'react'
|
|
import { FormProvider, SubmitHandler, useForm } from 'react-hook-form'
|
|
|
|
interface WhatsappFormProps {
|
|
classname?: string
|
|
onSubmit: () => void
|
|
}
|
|
|
|
export const WhatsappForm = ({ classname, onSubmit }: WhatsappFormProps) => {
|
|
const methods = useForm<WhatsAppFormInput>({
|
|
resolver: zodResolver(whatsAppFormSchema),
|
|
defaultValues: {
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
state: undefined,
|
|
city: '',
|
|
comment: '',
|
|
},
|
|
})
|
|
|
|
const [isSubmitting, startTransition] = useTransition()
|
|
|
|
const handleSubmit: SubmitHandler<WhatsAppFormInput> = (input) => {
|
|
startTransition(async () => {
|
|
try {
|
|
await submitWhatsapp(input)
|
|
methods.reset()
|
|
onSubmit()
|
|
} catch (e) {
|
|
console.log(e)
|
|
methods.setError('root', {
|
|
message: 'Falha ao enviar assinatura. Tente novamente.',
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
return (
|
|
<FormProvider {...methods}>
|
|
<form
|
|
id="mandato-no-whatsapp"
|
|
onSubmit={methods.handleSubmit(handleSubmit)}
|
|
className={classname}
|
|
>
|
|
<FieldGroup>
|
|
<Field>
|
|
<NameInput placeholder="Nome completo*" />
|
|
</Field>
|
|
<Field>
|
|
<PhoneInput placeholder="WhatsApp (com DDD)*" />
|
|
</Field>
|
|
<Field>
|
|
<EmailInput placeholder="Digite seu melhor email*" />
|
|
</Field>
|
|
<div className="flex gap-2">
|
|
<Field>
|
|
<StateSelect placeholder="Estado" />
|
|
</Field>
|
|
<Field>
|
|
<CitySelect placeholder="Cidade" />
|
|
</Field>
|
|
</div>
|
|
<Field>
|
|
<Textarea
|
|
id="comment"
|
|
{...methods.register('comment')}
|
|
placeholder='Campo de Interesse: "O que você mais quer ver no canal?" (Votações, Bastidores, Ações Sociais, Agenda).'
|
|
className="min-h-22"
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
{methods.formState.errors.root?.message ? (
|
|
<FieldDescription className="text-destructive">
|
|
{methods.formState.errors.root.message}
|
|
</FieldDescription>
|
|
) : null}
|
|
<Button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="bg-[#99c343] font-bold text-xl py-6 rounded-full"
|
|
>
|
|
{isSubmitting ? 'Enviando...' : 'FAZER MEU CADASTRO'}
|
|
</Button>
|
|
</Field>
|
|
</FieldGroup>
|
|
</form>
|
|
</FormProvider>
|
|
)
|
|
}
|