42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
"use client";
|
||
|
||
import { useRouter } from "next/navigation";
|
||
import { useState, type FormEvent } from "react";
|
||
|
||
export default function CheckoutPage() {
|
||
const router = useRouter();
|
||
const [name, setName] = useState("");
|
||
const [phone, setPhone] = useState("");
|
||
const [error, setError] = useState("");
|
||
|
||
async function submit(event: FormEvent) {
|
||
event.preventDefault();
|
||
setError("");
|
||
const response = await fetch("/backend/orders", {
|
||
method: "POST",
|
||
credentials: "include",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ customer_name: name, customer_phone: phone }),
|
||
});
|
||
const data = await response.json().catch(() => ({}));
|
||
if (!response.ok) {
|
||
setError(typeof data.detail === "string" ? data.detail : "Проверьте имя и телефон");
|
||
return;
|
||
}
|
||
router.push(`/orders/${data.id}`);
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<h1>Заказ</h1>
|
||
<p className="muted">Оплата не списывается. Заказ только записывается в базу.</p>
|
||
<form onSubmit={(event) => void submit(event)}>
|
||
<input value={name} onChange={(event) => setName(event.target.value)} placeholder="Имя" required />
|
||
<input value={phone} onChange={(event) => setPhone(event.target.value)} placeholder="Телефон" required />
|
||
<button type="submit">Подтвердить</button>
|
||
{error && <p className="error">{error}</p>}
|
||
</form>
|
||
</>
|
||
);
|
||
}
|