Files
buzz-sheet/components/commission/admin-availability-control.tsx
T
2026-10-02 17:33:14 +07:00

52 lines
2.5 KiB
TypeScript

"use client";
import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { setCommissionAvailability } from "@/app/admin/commission/actions";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Textarea } from "@/components/ui/textarea";
export function AdminCommissionAvailabilityControl({ isOpen, closureMessage }: {
isOpen: boolean; closureMessage: string;
}) {
const router = useRouter();
const [message, setMessage] = useState(closureMessage);
const [pending, startTransition] = useTransition();
const [error, setError] = useState("");
function save(nextOpen: boolean) {
setError("");
startTransition(async () => {
const result = await setCommissionAvailability(nextOpen, message);
if (result.status === "error") {
setError(result.message);
return;
}
toast.success(nextOpen ? "เปิดรับ Commission แล้ว" : "ปิดรับ Commission แล้ว");
router.refresh();
});
}
return <Card><CardHeader>
<CardTitle>การรับ Commission</CardTitle>
<CardDescription>การปิดรับจะหยุดคำขอใหม่ ลูกค้าที่มีคำขออยู่แล้วชำระเงินต่อได้</CardDescription>
</CardHeader><CardContent className="flex flex-col gap-3">
<label htmlFor="commission-closure-message" className="text-sm font-medium">ข้อความเมื่อปิดรับ</label>
<Textarea id="commission-closure-message" value={message} maxLength={1000}
onChange={(event) => setMessage(event.target.value)} disabled={pending}
placeholder="แจ้งเหตุผลที่ปิดรับและข้อมูลที่ลูกค้าควรทราบ" />
<div className="flex flex-wrap gap-2">
<Button type="button" disabled={pending || !message.trim()} onClick={() => save(false)}>
{isOpen ? "ปิดรับ Commission" : "บันทึกข้อความ"}
</Button>
{!isOpen && <Button type="button" variant="outline" disabled={pending} onClick={() => save(true)}>
เปิดรับ Commission
</Button>}
</div>
{error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
</CardContent></Card>;
}