123 lines
3.3 KiB
JavaScript
123 lines
3.3 KiB
JavaScript
import { Form, useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { createElement, useEffect } from "react";
|
|
import clsx from "clsx";
|
|
import { z } from "zod";
|
|
|
|
const N8N_URL = "https://n8n.eduseg.com.br/webhook/eduseg";
|
|
|
|
const schema = z.object({
|
|
name: z.string().nonempty({ message: "Deve preencher o nome" }),
|
|
email: z
|
|
.string()
|
|
.nonempty({ message: "Deve preencher o email" })
|
|
.email({ message: "Deve ser um email válido" }),
|
|
telephone: z.string().nonempty({ message: "Deve preencher o telefone" }),
|
|
orgname: z.string().nonempty({ message: "Deve preencher a empresa" }),
|
|
message: z.string().nonempty({ message: "Deve preencher a mensagem" }),
|
|
});
|
|
|
|
export default function Contact({ url }) {
|
|
const { register, formState, control, reset } = useForm({
|
|
resolver: zodResolver(schema),
|
|
});
|
|
|
|
return (
|
|
<Form
|
|
action={N8N_URL}
|
|
onSubmit={(data) => {
|
|
return { url, ...data };
|
|
}}
|
|
onSuccess={() => reset()}
|
|
control={control}
|
|
className="flex flex-col gap-3"
|
|
>
|
|
{formState.isSubmitSuccessful && (
|
|
<p className="border border-lime-400 text-white bg-lime-400/25 p-5 rounded-xl font-semibold">
|
|
Sua mensagem foi enviada com sucesso.
|
|
</p>
|
|
)}
|
|
|
|
<Control>
|
|
<Input
|
|
aria-invalid={!!formState.errors?.name}
|
|
placeholder="Digite seu nome"
|
|
{...register("name")}
|
|
/>
|
|
<Error>{formState.errors.name?.message}</Error>
|
|
</Control>
|
|
|
|
<Control>
|
|
<Input
|
|
aria-invalid={!!formState.errors?.name}
|
|
placeholder="Email corporativo"
|
|
{...register("email")}
|
|
/>
|
|
<Error>{formState.errors.email?.message}</Error>
|
|
</Control>
|
|
|
|
<Control>
|
|
<Input
|
|
aria-invalid={!!formState.errors?.name}
|
|
placeholder="Telefone"
|
|
{...register("telephone")}
|
|
/>
|
|
<Error>{formState.errors.telephone?.message}</Error>
|
|
</Control>
|
|
|
|
<Control>
|
|
<Input
|
|
aria-invalid={!!formState.errors?.name}
|
|
placeholder="Empresa"
|
|
{...register("orgname")}
|
|
/>
|
|
<Error>{formState.errors.orgname?.message}</Error>
|
|
</Control>
|
|
|
|
<Control>
|
|
<Input
|
|
as="textarea"
|
|
className="h-28"
|
|
placeholder="Mensagem"
|
|
aria-invalid={!!formState.errors?.message}
|
|
{...register("message")}
|
|
/>
|
|
<Error>{formState.errors.message?.message}</Error>
|
|
</Control>
|
|
|
|
<button
|
|
type="submit"
|
|
className="p-2.5 border border-lime-400 rounded-lg cursor-pointer"
|
|
>
|
|
Enviar
|
|
</button>
|
|
</Form>
|
|
);
|
|
}
|
|
|
|
export function Input({ as = "input", className, ...props }) {
|
|
return createElement(as, {
|
|
className: clsx(
|
|
"bg-white/5 focus:bg-white/15 rounded-lg p-3 w-full border border-white/10 focus:border-lime-400 focus:outline-0 transition",
|
|
"placeholder-white/70",
|
|
"aria-invalid:border-red-600",
|
|
className,
|
|
),
|
|
...props,
|
|
});
|
|
}
|
|
|
|
function Control({ children, className }) {
|
|
return <label className={className}>{children}</label>;
|
|
}
|
|
|
|
function Error({ children, className }) {
|
|
if (children) {
|
|
return (
|
|
<p className={clsx("text-sm text-red-400", className)}>{children}</p>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|