mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-07-06 18:19:33 +00:00
178 lines
5.2 KiB
TypeScript
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>
|
|
);
|
|
}
|