70 lines
2.5 KiB
TypeScript
70 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { processPayment, markPaid } from "./actions";
|
|
import type { POStatus } from "@prisma/client";
|
|
|
|
export function PaymentActions({ poId, poStatus }: { poId: string; poStatus: POStatus }) {
|
|
const router = useRouter();
|
|
const [ref, setRef] = useState("");
|
|
const [pending, setPending] = useState(false);
|
|
const [error, setError] = useState("");
|
|
|
|
async function handleProcessPayment() {
|
|
setPending(true);
|
|
setError("");
|
|
const result = await processPayment({ poId });
|
|
if ("error" in result) { setError(result.error); setPending(false); }
|
|
else { router.refresh(); }
|
|
}
|
|
|
|
async function handleMarkPaid(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (!ref.trim()) { setError("Payment reference is required."); return; }
|
|
setPending(true);
|
|
setError("");
|
|
const result = await markPaid({ poId, paymentRef: ref });
|
|
if ("error" in result) { setError(result.error); setPending(false); }
|
|
else { router.refresh(); }
|
|
}
|
|
|
|
if (poStatus === "MGR_APPROVED") {
|
|
return (
|
|
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
|
|
{error && <span className="text-xs text-danger-700">{error}</span>}
|
|
<button
|
|
onClick={handleProcessPayment}
|
|
disabled={pending}
|
|
className="w-full sm:w-auto rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-700 disabled:opacity-60 transition-colors"
|
|
>
|
|
{pending ? "Processing…" : "Start Payment Processing"}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (poStatus === "SENT_FOR_PAYMENT") {
|
|
return (
|
|
<form onSubmit={handleMarkPaid} className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 w-full">
|
|
<input
|
|
type="text"
|
|
placeholder="Payment reference / transaction ID"
|
|
value={ref}
|
|
onChange={(e) => setRef(e.target.value)}
|
|
className="flex-1 rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"
|
|
/>
|
|
{error && <span className="text-xs text-danger-700">{error}</span>}
|
|
<button
|
|
type="submit"
|
|
disabled={pending}
|
|
className="w-full sm:w-auto rounded-lg bg-success px-4 py-2 text-sm font-semibold text-white hover:opacity-90 disabled:opacity-60 transition-opacity"
|
|
>
|
|
{pending ? "Confirming…" : "Confirm Payment Sent"}
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|