35 lines
1.9 KiB
TypeScript
35 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState, type FormEvent } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { MobileSlipHandoff } from "@/components/commission/mobile-slip-handoff";
|
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
|
|
import { Input } from "@/components/ui/input";
|
|
import { verificationError } from "@/lib/commission/verification-error";
|
|
|
|
export function CommissionPaymentForm({ checkoutId }: { checkoutId: string }) {
|
|
const router = useRouter();
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState("");
|
|
async function submit(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault(); setBusy(true); setError("");
|
|
try {
|
|
const response = await fetch(`/api/commission/checkouts/${checkoutId}/verify`, {
|
|
method: "POST", body: new FormData(event.currentTarget),
|
|
});
|
|
const result = await response.json();
|
|
if (!response.ok) throw new Error(verificationError(result.error));
|
|
router.push(`/commission/tickets/${result.ticketId}`);
|
|
} catch (cause) { setError(cause instanceof Error ? cause.message : "เกิดข้อผิดพลาด"); }
|
|
finally { setBusy(false); }
|
|
}
|
|
return <form onSubmit={submit} className="flex flex-col gap-4"><FieldGroup>
|
|
<Field><FieldLabel htmlFor="slip">อัปโหลดสลิปที่ชำระเงินแล้ว</FieldLabel>
|
|
<Input id="slip" name="file" type="file" accept="image/png,image/jpeg,image/webp" required />
|
|
<MobileSlipHandoff checkoutId={checkoutId} /></Field>
|
|
<Button type="submit" disabled={busy}>{busy ? "กำลังตรวจสอบ..." : "ตรวจสอบสลิปและเปิด Ticket"}</Button>
|
|
</FieldGroup>{error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}</form>;
|
|
}
|