67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { useFormState, useFormStatus } from "react-dom";
|
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { enviarBriefing, type EnvioBriefingState } from "./actions";
|
|
|
|
const initialState: EnvioBriefingState = { ok: false };
|
|
|
|
function SubmitButton() {
|
|
const { pending } = useFormStatus();
|
|
|
|
return (
|
|
<Button type="submit" disabled={pending}>
|
|
{pending ? "Enviando..." : "Enviar briefing"}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
export function EnvioBriefingForm({
|
|
briefingId,
|
|
confirmacaoCliente,
|
|
perguntasEmBranco
|
|
}: {
|
|
briefingId: string;
|
|
confirmacaoCliente: string;
|
|
perguntasEmBranco: number;
|
|
}) {
|
|
const enviarComId = enviarBriefing.bind(null, briefingId);
|
|
const [state, action] = useFormState(enviarComId, initialState);
|
|
|
|
return (
|
|
<form action={action} className="space-y-4 rounded-lg border bg-card p-4">
|
|
{state.message ? (
|
|
<Alert variant="destructive">
|
|
<AlertDescription>{state.message}</AlertDescription>
|
|
</Alert>
|
|
) : null}
|
|
|
|
{perguntasEmBranco > 0 ? (
|
|
<Alert>
|
|
<AlertDescription>
|
|
Existem {perguntasEmBranco} pergunta(s) em branco. Voce pode enviar mesmo assim se estiver tudo certo.
|
|
</AlertDescription>
|
|
</Alert>
|
|
) : null}
|
|
|
|
<p className="text-sm leading-6 text-muted-foreground">{confirmacaoCliente}</p>
|
|
|
|
<label className="flex items-start gap-3 rounded-md border p-3 text-sm leading-6">
|
|
<Checkbox name="confirmacaoCliente" required />
|
|
<span>Confirmo a declaracao acima e desejo enviar o briefing para analise.</span>
|
|
</label>
|
|
|
|
{perguntasEmBranco > 0 ? (
|
|
<label className="flex items-start gap-3 rounded-md border p-3 text-sm leading-6">
|
|
<Checkbox name="confirmarBrancos" required />
|
|
<span>Estou ciente de que ha perguntas em branco e quero enviar mesmo assim.</span>
|
|
</label>
|
|
) : null}
|
|
|
|
<SubmitButton />
|
|
</form>
|
|
);
|
|
}
|