129 lines
5.0 KiB
TypeScript
129 lines
5.0 KiB
TypeScript
"use client";
|
|
|
|
import { useFormState, useFormStatus } from "react-dom";
|
|
import { useState } from "react";
|
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { cadastrarCliente, type CadastroState } from "./actions";
|
|
|
|
const initialState: CadastroState = { ok: false };
|
|
|
|
function SubmitButton() {
|
|
const { pending } = useFormStatus();
|
|
|
|
return (
|
|
<Button type="submit" className="w-full" disabled={pending}>
|
|
{pending ? "Criando cadastro..." : "Criar cadastro"}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
export function CadastroForm() {
|
|
const [state, action] = useFormState(cadastrarCliente, initialState);
|
|
const [tipo, setTipo] = useState<"PF" | "PJ">("PF");
|
|
|
|
return (
|
|
<form action={action} className="space-y-5">
|
|
{state.message ? (
|
|
<Alert variant="destructive">
|
|
<AlertDescription>{state.message}</AlertDescription>
|
|
</Alert>
|
|
) : null}
|
|
|
|
<input type="hidden" name="tipo" value={tipo} />
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className="space-y-2 sm:col-span-2">
|
|
<Label htmlFor="nomeCompleto">Nome completo</Label>
|
|
<Input id="nomeCompleto" name="nomeCompleto" autoComplete="name" required />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="cpf">CPF</Label>
|
|
<Input id="cpf" name="cpf" inputMode="numeric" autoComplete="off" required />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="whatsapp">WhatsApp</Label>
|
|
<Input id="whatsapp" name="whatsapp" inputMode="tel" autoComplete="tel" required />
|
|
</div>
|
|
<div className="space-y-2 sm:col-span-2">
|
|
<Label htmlFor="email">E-mail</Label>
|
|
<Input id="email" name="email" type="email" autoComplete="email" required />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="senha">Senha</Label>
|
|
<Input id="senha" name="senha" type="password" autoComplete="new-password" required />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="confirmarSenha">Confirmar senha</Label>
|
|
<Input id="confirmarSenha" name="confirmarSenha" type="password" autoComplete="new-password" required />
|
|
</div>
|
|
</div>
|
|
|
|
<fieldset className="space-y-3 rounded-lg border p-4">
|
|
<legend className="px-1 text-sm font-medium">Este site e para uma empresa?</legend>
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<Button type="button" variant={tipo === "PF" ? "default" : "outline"} onClick={() => setTipo("PF")}>
|
|
Nao
|
|
</Button>
|
|
<Button type="button" variant={tipo === "PJ" ? "default" : "outline"} onClick={() => setTipo("PJ")}>
|
|
Sim
|
|
</Button>
|
|
</div>
|
|
</fieldset>
|
|
|
|
{tipo === "PJ" ? (
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className="space-y-2 sm:col-span-2">
|
|
<Label htmlFor="razaoSocial">Razao social</Label>
|
|
<Input id="razaoSocial" name="razaoSocial" required />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="cnpj">CNPJ</Label>
|
|
<Input id="cnpj" name="cnpj" inputMode="numeric" required />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="cep">CEP</Label>
|
|
<Input id="cep" name="cep" inputMode="numeric" autoComplete="postal-code" />
|
|
</div>
|
|
<div className="space-y-2 sm:col-span-2">
|
|
<Label htmlFor="logradouro">Logradouro</Label>
|
|
<Input id="logradouro" name="logradouro" autoComplete="address-line1" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="numero">Numero</Label>
|
|
<Input id="numero" name="numero" autoComplete="address-line2" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="complemento">Complemento</Label>
|
|
<Input id="complemento" name="complemento" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="bairro">Bairro</Label>
|
|
<Input id="bairro" name="bairro" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="cidade">Cidade</Label>
|
|
<Input id="cidade" name="cidade" autoComplete="address-level2" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="uf">UF</Label>
|
|
<Input id="uf" name="uf" maxLength={2} autoComplete="address-level1" />
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
<label className="flex items-start gap-3 rounded-lg border p-4 text-sm leading-6">
|
|
<Checkbox name="lgpdAceite" required />
|
|
<span>
|
|
Li e aceito a Politica de Privacidade e autorizo o tratamento dos dados para criacao e acompanhamento do briefing.
|
|
</span>
|
|
</label>
|
|
|
|
<SubmitButton />
|
|
</form>
|
|
);
|
|
}
|