Files
sarlink-portal/components/topup-to-pay.tsx

178 lines
5.2 KiB
TypeScript

"use client";
import {
BadgeDollarSign,
Clipboard,
ClipboardCheck,
Loader2,
} from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import { verifyTopupPayment } from "@/actions/payment";
import {
Table,
TableBody,
TableCaption,
TableCell,
TableFooter,
TableRow,
} from "@/components/ui/table";
import type { Topup } from "@/lib/backend-types";
import { Button } from "./ui/button";
export default function TopupToPay({ topup, disabled }: { topup?: Topup, disabled?: boolean }) {
const [verifyingTransferPayment, setVerifyingTransferPayment] =
useState(false);
return (
<div className="w-full">
<div className="m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded">
<Table>
<TableCaption>
<div className="max-w-sm mx-auto">
<p>Please send the following amount to the payment address</p>
<AccountInfomation
accName="Baraveli Dev"
accountNo="90101400028321000"
/>
{topup?.paid ? (
<Button
size={"lg"}
variant={"secondary"}
disabled
className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold"
>
Topup Payment Verified
</Button>
) : (
<div className="flex flex-col gap-2">
<Button
disabled={disabled || verifyingTransferPayment}
onClick={async () => {
setVerifyingTransferPayment(true);
try {
const response = await verifyTopupPayment({
id: topup?.id ?? "",
});
toast.success("Topup successful!", {
closeButton: true,
description:
`Your topup payment has been verified successfully using ${response.transaction?.sourceBank} bank transfer on ${response.transaction?.trxDate}.` || response.message,
});
} catch (error: unknown) {
if (error instanceof Error) {
toast.error("Topup Payment Verification Failed", {
closeButton: true,
description:
error.message || "Please check your payment details and try again.",
});
} else {
toast.error("Topup verification failed.");
}
} finally {
setVerifyingTransferPayment(false);
}
}}
size={"lg"}
className="mb-4"
>
{verifyingTransferPayment
? "Processing payment..."
: "I have paid"}
{verifyingTransferPayment ? (
<Loader2 className="animate-spin" />
) : (
<BadgeDollarSign />
)}
</Button>
</div>
)}
</div>
</TableCaption>
<TableBody className="">
<TableRow>
<TableCell>Topup created at</TableCell>
<TableCell className="text-right text-muted-foreground">
{new Date(topup?.created_at ?? "").toLocaleDateString("en-US", {
month: "short",
day: "2-digit",
year: "numeric",
minute: "2-digit",
hour: "2-digit",
second: "2-digit",
})}
</TableCell>
</TableRow>
<TableRow>
<TableCell>Topup expires at</TableCell>
<TableCell className="text-right text-sarLinkOrange">
{new Date(topup?.expires_at ?? "").toLocaleDateString("en-US", {
month: "short",
day: "2-digit",
year: "numeric",
minute: "2-digit",
hour: "2-digit",
second: "2-digit",
})}
</TableCell>
</TableRow>
<TableRow>
<TableCell>MIB Reference</TableCell>
<TableCell className="text-right">
{topup?.mib_reference ? topup.mib_reference : "N/A"}
</TableCell>
</TableRow>
</TableBody>
<TableFooter>
<TableRow className="">
<TableCell colSpan={1}>Total Due</TableCell>
<TableCell className="text-right text-3xl font-bold">
{topup?.amount?.toFixed(2)}
</TableCell>
</TableRow>
</TableFooter>
</Table>
</div>
</div>
);
}
function AccountInfomation({
accountNo,
accName,
}: {
accountNo: string;
accName: string;
}) {
const [accNo, setAccNo] = useState(false);
return (
<div className="justify-start items-start border my-4 flex flex-col gap-2 p-2 rounded-md">
<h6 className="title-bg uppercase p-2 border rounded w-full font-semibold">
Account Information
</h6>
<div className="border justify-start flex flex-col items-start bg-white/10 w-full p-2 rounded">
<div className="text-sm font-semibold">Account Name</div>
<span>{accName}</span>
</div>
<div className="border flex justify-between items-start gap-2 bg-white/10 w-full p-2 rounded">
<div className="flex flex-col items-start justify-start">
<p className="text-sm font-semibold">Account No</p>
<span>{accountNo}</span>
</div>
<Button
onClick={() => {
setTimeout(() => {
setAccNo(true);
navigator.clipboard.writeText(accountNo);
}, 2000);
toast.success("Account number copied!");
setAccNo((prev) => !prev);
}}
variant={"link"}
>
{accNo ? <Clipboard /> : <ClipboardCheck color="green" />}
</Button>
</div>
</div>
);
}