74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { FormEvent, useState } from "react";
|
|
|
|
import { interpolate } from "@/i18n/index";
|
|
import { useMessages } from "@/i18n/locale-context";
|
|
|
|
export default function CallbackForm() {
|
|
const t = useMessages();
|
|
const [status, setStatus] = useState<"idle" | "sending" | "ok" | "error">("idle");
|
|
const [message, setMessage] = useState("");
|
|
|
|
async function onSubmit(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
const form = event.currentTarget;
|
|
const data = new FormData(form);
|
|
const name = String(data.get("name") || "").trim();
|
|
const cellNumber = String(data.get("cellNumber") || "").trim();
|
|
setStatus("sending");
|
|
setMessage("");
|
|
|
|
try {
|
|
const response = await fetch("/api/contact", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
name,
|
|
title: t.callback.title,
|
|
cellNumber,
|
|
text: interpolate(t.callback.body, { phone: cellNumber }),
|
|
}),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
setStatus("error");
|
|
setMessage(t.callback.error);
|
|
return;
|
|
}
|
|
|
|
setStatus("ok");
|
|
setMessage(t.callback.ok);
|
|
form.reset();
|
|
} catch {
|
|
setStatus("error");
|
|
setMessage(t.callback.network);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<form className="callback-form" onSubmit={onSubmit}>
|
|
<label className="sr-only" htmlFor="callback-name">
|
|
{t.callback.name}
|
|
</label>
|
|
<input id="callback-name" name="name" type="text" required placeholder={t.callback.name} autoComplete="name" />
|
|
<label className="sr-only" htmlFor="callback-phone">
|
|
{t.callback.phone}
|
|
</label>
|
|
<input
|
|
id="callback-phone"
|
|
name="cellNumber"
|
|
type="tel"
|
|
required
|
|
inputMode="tel"
|
|
placeholder={t.callback.phone}
|
|
autoComplete="tel"
|
|
/>
|
|
<button type="submit" className="btn btn-gold" disabled={status === "sending"}>
|
|
{status === "sending" ? t.callback.sending : t.callback.submit}
|
|
</button>
|
|
{message ? <p className={status === "ok" ? "ok" : "err"}>{message}</p> : null}
|
|
</form>
|
|
);
|
|
}
|