133 lines
4.2 KiB
TypeScript
133 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
import { browserFetch } from "../lib/api";
|
|
|
|
type Props = {
|
|
makerId: string;
|
|
sourceType: "profile" | "service" | "work";
|
|
sourceId?: string | null;
|
|
};
|
|
|
|
export function InquiryForm({ makerId, sourceType, sourceId }: Props) {
|
|
const [status, setStatus] = useState<string>("");
|
|
const [form, setForm] = useState({
|
|
needText: "",
|
|
sizeText: "",
|
|
hasModel: false,
|
|
materialPreference: "",
|
|
quantity: 1,
|
|
urgency: "medium",
|
|
deliveryType: "shipping"
|
|
});
|
|
|
|
async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
setStatus("Enviando consulta...");
|
|
try {
|
|
await browserFetch("/inquiries", {
|
|
method: "POST",
|
|
body: JSON.stringify({
|
|
makerId,
|
|
sourceType,
|
|
sourceId,
|
|
...form
|
|
})
|
|
});
|
|
setStatus("Consulta enviada. Ya puedes seguirla desde tu cuenta.");
|
|
setForm({
|
|
needText: "",
|
|
sizeText: "",
|
|
hasModel: false,
|
|
materialPreference: "",
|
|
quantity: 1,
|
|
urgency: "medium",
|
|
deliveryType: "shipping"
|
|
});
|
|
} catch (error) {
|
|
setStatus(error instanceof Error ? error.message : "No se pudo enviar la consulta");
|
|
}
|
|
}
|
|
|
|
return (
|
|
<form className="inquiry-card" onSubmit={onSubmit}>
|
|
<div className="guide-steps">
|
|
<div className="guide-step">
|
|
<div className="step-index">1</div>
|
|
<div>
|
|
<strong>Que quieres hacer?</strong>
|
|
<div className="mini-note">Cuanto mejor expliques el uso, mejor se ajusta la respuesta del maker.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="inquiry-section">
|
|
<textarea
|
|
className="textarea"
|
|
placeholder="Quiero algo muy parecido, necesito modificar una pieza o tengo una idea similar..."
|
|
value={form.needText}
|
|
onChange={(event) => setForm((current) => ({ ...current, needText: event.target.value }))}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="inquiry-section">
|
|
<strong>Detalles que ayudan al maker</strong>
|
|
<div className="input-grid-compact">
|
|
<input
|
|
className="field"
|
|
placeholder="Tamano o medidas aproximadas"
|
|
value={form.sizeText}
|
|
onChange={(event) => setForm((current) => ({ ...current, sizeText: event.target.value }))}
|
|
/>
|
|
<input
|
|
className="field"
|
|
placeholder="Material preferido"
|
|
value={form.materialPreference}
|
|
onChange={(event) => setForm((current) => ({ ...current, materialPreference: event.target.value }))}
|
|
/>
|
|
<input
|
|
className="field"
|
|
type="number"
|
|
min={1}
|
|
value={form.quantity}
|
|
onChange={(event) => setForm((current) => ({ ...current, quantity: Number(event.target.value) }))}
|
|
/>
|
|
<select
|
|
className="select"
|
|
value={form.urgency}
|
|
onChange={(event) => setForm((current) => ({ ...current, urgency: event.target.value }))}
|
|
>
|
|
<option value="low">Sin urgencia</option>
|
|
<option value="medium">Esta semana</option>
|
|
<option value="high">Urgente</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="input-grid-compact">
|
|
<label className="choice-chip">
|
|
<input
|
|
type="checkbox"
|
|
checked={form.hasModel}
|
|
onChange={(event) => setForm((current) => ({ ...current, hasModel: event.target.checked }))}
|
|
/>
|
|
<span>Ya tengo archivo o pieza de referencia</span>
|
|
</label>
|
|
<select
|
|
className="select"
|
|
value={form.deliveryType}
|
|
onChange={(event) => setForm((current) => ({ ...current, deliveryType: event.target.value }))}
|
|
>
|
|
<option value="shipping">Necesito envio</option>
|
|
<option value="local">Puedo retirar personalmente</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button className="button button-primary" type="submit">Enviar consulta</button>
|
|
{status ? <p className="muted">{status}</p> : null}
|
|
</form>
|
|
);
|
|
}
|