88 lines
3.2 KiB
TypeScript
88 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { useFormState, useFormStatus } from "react-dom";
|
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { atualizarConta, type ContaState } from "./actions";
|
|
|
|
type Props = {
|
|
cliente: {
|
|
nomeCompleto: string;
|
|
whatsapp: string;
|
|
razaoSocial: string | null;
|
|
cep: string | null;
|
|
logradouro: string | null;
|
|
numero: string | null;
|
|
complemento: string | null;
|
|
bairro: string | null;
|
|
cidade: string | null;
|
|
uf: string | null;
|
|
};
|
|
};
|
|
|
|
const initialState: ContaState = { ok: false };
|
|
|
|
function SubmitButton() {
|
|
const { pending } = useFormStatus();
|
|
return <Button type="submit" disabled={pending}>{pending ? "Salvando..." : "Salvar dados"}</Button>;
|
|
}
|
|
|
|
export function ContaForm({ cliente }: Props) {
|
|
const [state, action] = useFormState(atualizarConta, initialState);
|
|
|
|
return (
|
|
<form action={action} className="space-y-4">
|
|
{state.message ? (
|
|
<Alert variant={state.ok ? "default" : "destructive"}>
|
|
<AlertDescription>{state.message}</AlertDescription>
|
|
</Alert>
|
|
) : null}
|
|
<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" defaultValue={cliente.nomeCompleto} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="whatsapp">WhatsApp</Label>
|
|
<Input id="whatsapp" name="whatsapp" defaultValue={cliente.whatsapp} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="razaoSocial">Razao social</Label>
|
|
<Input id="razaoSocial" name="razaoSocial" defaultValue={cliente.razaoSocial ?? ""} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="cep">CEP</Label>
|
|
<Input id="cep" name="cep" defaultValue={cliente.cep ?? ""} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="logradouro">Logradouro</Label>
|
|
<Input id="logradouro" name="logradouro" defaultValue={cliente.logradouro ?? ""} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="numero">Numero</Label>
|
|
<Input id="numero" name="numero" defaultValue={cliente.numero ?? ""} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="complemento">Complemento</Label>
|
|
<Input id="complemento" name="complemento" defaultValue={cliente.complemento ?? ""} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="bairro">Bairro</Label>
|
|
<Input id="bairro" name="bairro" defaultValue={cliente.bairro ?? ""} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="cidade">Cidade</Label>
|
|
<Input id="cidade" name="cidade" defaultValue={cliente.cidade ?? ""} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="uf">UF</Label>
|
|
<Input id="uf" name="uf" defaultValue={cliente.uf ?? ""} maxLength={2} />
|
|
</div>
|
|
</div>
|
|
<SubmitButton />
|
|
</form>
|
|
);
|
|
}
|