Initial SeConectai briefing system

2026-10-04 10:42:23 -03:00
commit 45cd8d2f03
163 changed files with 12659 additions and 0 deletions
@@ -0,0 +1,128 @@
+"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>
+  );
+}