114 lines
3.1 KiB
TypeScript
114 lines
3.1 KiB
TypeScript
import { JSX } from "preact";
|
|
import { useState } from "preact/hooks";
|
|
|
|
interface FormData {
|
|
name: string;
|
|
email: string;
|
|
phone: string;
|
|
role: "Farmácia" | "Laboratório";
|
|
message: string;
|
|
}
|
|
|
|
const initialData: FormData = {
|
|
name: "",
|
|
email: "",
|
|
phone: "",
|
|
role: "Farmácia",
|
|
message: "",
|
|
};
|
|
|
|
export default function LeadForm() {
|
|
const [form, setForm] = useState<FormData>(initialData);
|
|
const [sent, setSent] = useState(false);
|
|
|
|
function handleChange(
|
|
event: JSX.TargetedEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, Event>,
|
|
) {
|
|
const { name, value } = event.currentTarget;
|
|
setForm((prev) => ({ ...prev, [name]: value }));
|
|
}
|
|
|
|
function handleSubmit(event: JSX.TargetedEvent<HTMLFormElement, Event>) {
|
|
event.preventDefault();
|
|
setSent(true);
|
|
setTimeout(() => setSent(false), 5000);
|
|
setForm(initialData);
|
|
}
|
|
|
|
return (
|
|
<form class="form-card" onSubmit={handleSubmit}>
|
|
<div class="section-header" style="margin-bottom: 1rem;">
|
|
<span class="section-kicker">Contato rápido</span>
|
|
<h3 class="section-title" style="font-size: 1.4rem;">
|
|
Vamos desenhar seu go-live em conjunto
|
|
</h3>
|
|
<p class="section-description">
|
|
Envie seus dados e retornaremos com um plano de integração para farmácias
|
|
e laboratórios, com cronograma e custos claros.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<label>
|
|
Nome completo
|
|
<input
|
|
required
|
|
name="name"
|
|
value={form.name}
|
|
onInput={handleChange}
|
|
placeholder="Ex.: Ana Ribeiro"
|
|
/>
|
|
</label>
|
|
<label>
|
|
E-mail corporativo
|
|
<input
|
|
required
|
|
type="email"
|
|
name="email"
|
|
value={form.email}
|
|
onInput={handleChange}
|
|
placeholder="contato@empresa.com"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<label>
|
|
Telefone / WhatsApp
|
|
<input
|
|
name="phone"
|
|
value={form.phone}
|
|
onInput={handleChange}
|
|
placeholder="(11) 99999-0000"
|
|
/>
|
|
</label>
|
|
<label>
|
|
Perfil
|
|
<select name="role" value={form.role} onInput={handleChange}>
|
|
<option value="Farmácia">Farmácia compradora</option>
|
|
<option value="Laboratório">Laboratório vendedor</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<label>
|
|
Detalhes da operação
|
|
<textarea
|
|
name="message"
|
|
value={form.message}
|
|
onInput={handleChange}
|
|
placeholder="Volume mensal, estados atendidos, ERPs atuais, integrações desejadas..."
|
|
/>
|
|
</label>
|
|
|
|
{sent && <div class="notice">Recebemos seu contato! Nosso time responderá ainda hoje.</div>}
|
|
|
|
<div class="actions" style="margin-top: 1rem;">
|
|
<button type="submit" class="button-primary">Solicitar contato</button>
|
|
<button type="button" class="button-secondary" onClick={() => setForm(initialData)}>
|
|
Limpar dados
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|