70 lines
3.5 KiB
TypeScript
70 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useTransition } from "react";
|
|
import { toast } from "sonner";
|
|
import { setCommissionSlipProvider } from "@/app/admin/commission/actions";
|
|
import type { SlipProvider } from "@/lib/commission/slip-provider";
|
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Settings } from "lucide-react";
|
|
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
|
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
|
|
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
|
|
|
export function AdminCommissionSlipProviderControl({ provider, configured }: {
|
|
provider: SlipProvider; configured: Record<SlipProvider, boolean>;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
const [selected, setSelected] = useState(provider);
|
|
const [pending, startTransition] = useTransition();
|
|
const [error, setError] = useState("");
|
|
|
|
function save() {
|
|
setError("");
|
|
startTransition(async () => {
|
|
try {
|
|
const result = await setCommissionSlipProvider(selected);
|
|
if (result.status === "error") { setError(result.message); return; }
|
|
setOpen(false);
|
|
toast.success("บันทึกผู้ให้บริการตรวจสลิปแล้ว");
|
|
} catch { setError("บันทึกไม่สำเร็จ กรุณาลองอีกครั้งหรือโหลดหน้าใหม่"); }
|
|
});
|
|
}
|
|
|
|
return <Dialog open={open} onOpenChange={(nextOpen) => {
|
|
if (pending) return;
|
|
if (nextOpen) { setSelected(provider); setError(""); }
|
|
setOpen(nextOpen);
|
|
}}>
|
|
<DialogTrigger render={<Button type="button" variant="outline" size="icon-sm" aria-label="ตั้งค่าการชำระเงิน" />}>
|
|
<Settings />
|
|
</DialogTrigger>
|
|
<DialogContent showCloseButton={!pending}>
|
|
<DialogHeader><DialogTitle>ตั้งค่าการชำระเงิน</DialogTitle></DialogHeader>
|
|
<FieldGroup>
|
|
<Field data-invalid={Boolean(error)} data-disabled={pending}>
|
|
<FieldLabel id="slip-provider-label">ผู้ให้บริการ</FieldLabel>
|
|
<ToggleGroup variant="outline" value={[selected]} disabled={pending}
|
|
aria-labelledby="slip-provider-label" aria-invalid={Boolean(error)}
|
|
onValueChange={(values) => {
|
|
const value = values[0];
|
|
if (value === "slip2go" || value === "slipok") { setSelected(value); setError(""); }
|
|
}}>
|
|
<ToggleGroupItem value="slip2go" disabled={!configured.slip2go}
|
|
className="aria-pressed:border-primary aria-pressed:ring-1 aria-pressed:ring-primary">Slip2Go</ToggleGroupItem>
|
|
<ToggleGroupItem value="slipok" disabled={!configured.slipok}
|
|
className="aria-pressed:border-primary aria-pressed:ring-1 aria-pressed:ring-primary">SlipOK</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</Field>
|
|
{error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
|
|
</FieldGroup>
|
|
<DialogFooter>
|
|
<Button type="button" variant="outline" disabled={pending} onClick={() => setOpen(false)}>ยกเลิก</Button>
|
|
<Button type="button" disabled={pending || selected === provider || !configured[selected]} onClick={save}>
|
|
{pending ? "กำลังบันทึก…" : "บันทึก"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>;
|
|
}
|