57 lines
3.0 KiB
TypeScript
57 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, type FormEvent } from "react";
|
|
import { verificationError } from "@/lib/commission/verification-error";
|
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Field, FieldLabel } from "@/components/ui/field";
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
export function MobileSlipForm() {
|
|
const [amount, setAmount] = useState<number | null>(null);
|
|
const [ready, setReady] = useState(false);
|
|
const [complete, setComplete] = useState(false);
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState("");
|
|
|
|
useEffect(() => {
|
|
const value = window.location.hash.slice(1);
|
|
Promise.resolve().then(() => {
|
|
if (!value) throw new Error("missing upload link");
|
|
return fetch("/api/commission/mobile-slip", { headers: { Authorization: `Bearer ${value}` }, cache: "no-store" });
|
|
})
|
|
.then(async (response) => {
|
|
const result = await response.json();
|
|
if (!response.ok) throw new Error(result.error);
|
|
setAmount(result.amountBaht);
|
|
setComplete(result.complete);
|
|
setReady(true);
|
|
})
|
|
.catch(() => setError("ลิงก์อัปโหลดหมดอายุหรือไม่ถูกต้อง กรุณาสร้าง QR ใหม่บนคอมพิวเตอร์"));
|
|
}, []);
|
|
|
|
async function submit(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault(); setBusy(true); setError("");
|
|
try {
|
|
const response = await fetch("/api/commission/mobile-slip", {
|
|
method: "POST", headers: { Authorization: `Bearer ${window.location.hash.slice(1)}` },
|
|
body: new FormData(event.currentTarget),
|
|
});
|
|
const result = await response.json();
|
|
if (!response.ok) throw new Error(verificationError(result.error));
|
|
setComplete(true);
|
|
} catch (cause) { setError(cause instanceof Error ? cause.message : "ตรวจสอบสลิปไม่สำเร็จ"); }
|
|
finally { setBusy(false); }
|
|
}
|
|
|
|
if (complete) return <Alert><AlertDescription>ตรวจสอบสลิปสำเร็จแล้ว กลับไปดู Ticket บนคอมพิวเตอร์ได้เลย</AlertDescription></Alert>;
|
|
return <div className="flex flex-col gap-4">
|
|
{ready && <><p>ยอดชำระ ฿{amount}</p><form onSubmit={submit} className="flex flex-col gap-4">
|
|
<Field><FieldLabel htmlFor="mobile-slip">เลือกรูปสลิปจากแอปธนาคาร</FieldLabel>
|
|
<Input id="mobile-slip" name="file" type="file" accept="image/png,image/jpeg,image/webp" required disabled={busy} /></Field>
|
|
<Button type="submit" className="min-h-11" disabled={busy}>{busy ? "กำลังตรวจสอบ..." : "ตรวจสอบสลิป"}</Button>
|
|
</form></>}
|
|
{error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
|
|
</div>;
|
|
}
|