mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-07-01 21:28:23 +00:00
refactor: update payment types and user interface, enhance error handling, and adjust API base URL
Some checks failed
Build and Push Docker Images / Build and Push Docker Images (push) Failing after 3m14s
Some checks failed
Build and Push Docker Images / Build and Push Docker Images (push) Failing after 3m14s
This commit is contained in:
@ -1,189 +1,207 @@
|
||||
'use client'
|
||||
import { verifyPayment } from "@/actions/payment";
|
||||
"use client";
|
||||
import { processWalletPayment } from "@/actions/payment";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableRow,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import type { Payment } from "@/lib/backend-types";
|
||||
import { formatDate } from "@/lib/utils";
|
||||
import type { Prisma, User } from "@prisma/client";
|
||||
import { BadgeDollarSign, Clipboard, ClipboardCheck, Loader2, Wallet } from "lucide-react";
|
||||
import {
|
||||
BadgeDollarSign,
|
||||
Clipboard,
|
||||
ClipboardCheck,
|
||||
Loader2,
|
||||
Wallet,
|
||||
} from "lucide-react";
|
||||
import type { User } from "next-auth";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "./ui/button";
|
||||
|
||||
type PaymentWithDevices = Prisma.PaymentGetPayload<{
|
||||
include: {
|
||||
devices: true;
|
||||
};
|
||||
}>;
|
||||
|
||||
export default function DevicesToPay({
|
||||
payment,
|
||||
user
|
||||
}: { payment?: PaymentWithDevices, user?: User }) {
|
||||
const [verifying, setVerifying] = useState(false)
|
||||
payment,
|
||||
user,
|
||||
}: { payment?: Payment; user?: User }) {
|
||||
const [verifying, setVerifying] = useState(false);
|
||||
|
||||
const devices = payment?.devices;
|
||||
if (devices?.length === 0) {
|
||||
return null;
|
||||
}
|
||||
// 100+(n−1)×75
|
||||
const walletBalance = user?.walletBalance ?? 0;
|
||||
const isWalletPayVisible = walletBalance > (payment?.amount ?? 0);
|
||||
const devices = payment?.devices;
|
||||
if (devices?.length === 0) {
|
||||
return null;
|
||||
}
|
||||
// 100+(n−1)×75
|
||||
// const walletBalance = user?.walletBalance ?? 0;
|
||||
// TODO - get wallet balance from backend
|
||||
const walletBalance = 110;
|
||||
|
||||
const isWalletPayVisible = walletBalance > (payment?.amount ?? 0);
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="p-2 flex flex-col gap-2">
|
||||
<h3 className="title-bg my-1 p-2 border border-dashed rounded-md font-semibold text-lg">
|
||||
{!payment?.paid ? "Devices to pay" : "Devices Paid"}
|
||||
</h3>
|
||||
<div className="flex flex-col gap-2">
|
||||
{devices?.map((device) => (
|
||||
<div
|
||||
key={device.id}
|
||||
className="bg-muted border rounded p-2 flex gap-2 items-center"
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<div className="text-sm font-medium">{device.name}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{device.mac}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<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"
|
||||
/>
|
||||
{payment?.paid ? (
|
||||
<Button size={"lg"} variant={"secondary"} disabled className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold">Payment Verified</Button>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
{isWalletPayVisible && (
|
||||
<Button
|
||||
disabled={verifying}
|
||||
onClick={async () => {
|
||||
setVerifying(true);
|
||||
await verifyPayment({
|
||||
userId: user?.id ?? "",
|
||||
paymentId: payment?.id,
|
||||
benefName: user?.name ?? "",
|
||||
accountNo: user?.accNo ?? "",
|
||||
absAmount: String(payment?.amount),
|
||||
time: formatDate(new Date(payment?.createdAt || "")),
|
||||
type: "WALLET",
|
||||
});
|
||||
setVerifying(false);
|
||||
}}
|
||||
variant={"secondary"} size={"lg"}>
|
||||
{verifying ? "Paying..." : "Pay with wallet"}
|
||||
<Wallet />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
disabled={verifying}
|
||||
onClick={async () => {
|
||||
setVerifying(true);
|
||||
const res = await verifyPayment({
|
||||
userId: user?.id ?? "",
|
||||
paymentId: payment?.id,
|
||||
benefName: user?.name ?? "",
|
||||
accountNo: user?.accNo ?? "",
|
||||
absAmount: String(payment?.amount),
|
||||
type: "TRANSFER",
|
||||
time: formatDate(new Date(payment?.createdAt || "")),
|
||||
});
|
||||
setVerifying(false);
|
||||
switch (true) {
|
||||
case res?.success === true:
|
||||
toast.success(res.message);
|
||||
break;
|
||||
case res?.success === false:
|
||||
toast.error(res?.message);
|
||||
break;
|
||||
default:
|
||||
toast.error("Unexpected error occurred.");
|
||||
}
|
||||
}}
|
||||
size={"lg"} className="mb-4">
|
||||
{verifying ? "Verifying..." : "Verify Payment"}
|
||||
{verifying ? <Loader2 className="animate-spin" /> : <BadgeDollarSign />}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
)}
|
||||
|
||||
</div>
|
||||
</TableCaption>
|
||||
<TableBody className="">
|
||||
<TableRow>
|
||||
<TableCell>Total Devices</TableCell>
|
||||
<TableCell className="text-right text-xl">{devices?.length}</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Duration</TableCell>
|
||||
<TableCell className="text-right text-xl">{payment?.numberOfMonths} Months</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow className="">
|
||||
<TableCell colSpan={1}>Total Due</TableCell>
|
||||
<TableCell className="text-right text-3xl font-bold">{payment?.amount.toFixed(2)}</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="p-2 flex flex-col gap-2">
|
||||
<h3 className="title-bg my-1 p-2 border border-dashed rounded-md font-semibold text-lg">
|
||||
{!payment?.paid ? "Devices to pay" : "Devices Paid"}
|
||||
</h3>
|
||||
<div className="flex flex-col gap-2">
|
||||
{devices?.map((device) => (
|
||||
<div
|
||||
key={device.id}
|
||||
className="bg-muted border rounded p-2 flex gap-2 items-center"
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<div className="text-sm font-medium">{device.name}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{device.mac}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<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"
|
||||
/>
|
||||
{payment?.paid ? (
|
||||
<Button
|
||||
size={"lg"}
|
||||
variant={"secondary"}
|
||||
disabled
|
||||
className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold"
|
||||
>
|
||||
Payment Verified
|
||||
</Button>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
{isWalletPayVisible && (
|
||||
<Button
|
||||
disabled={verifying}
|
||||
onClick={async () => {
|
||||
setVerifying(true);
|
||||
await processWalletPayment({
|
||||
amount: payment?.amount ?? 0,
|
||||
payment: payment,
|
||||
});
|
||||
setVerifying(false);
|
||||
}}
|
||||
variant={"secondary"}
|
||||
size={"lg"}
|
||||
>
|
||||
{verifying ? "Paying..." : "Pay with wallet"}
|
||||
<Wallet />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
disabled={verifying}
|
||||
onClick={async () => {
|
||||
setVerifying(true);
|
||||
// const res = await verifyPayment({
|
||||
// userId: user?.id ?? "",
|
||||
// paymentId: payment?.id,
|
||||
// benefName: user?.name ?? "",
|
||||
// accountNo: user?.accNo ?? "",
|
||||
// absAmount: String(payment?.amount),
|
||||
// type: "TRANSFER",
|
||||
// time: formatDate(new Date(payment?.createdAt || "")),
|
||||
// });
|
||||
setVerifying(false);
|
||||
// switch (true) {
|
||||
// case res?.success === true:
|
||||
// toast.success(res.message);
|
||||
// break;
|
||||
// case res?.success === false:
|
||||
// toast.error(res?.message);
|
||||
// break;
|
||||
// default:
|
||||
// toast.error("Unexpected error occurred.");
|
||||
// }
|
||||
}}
|
||||
size={"lg"}
|
||||
className="mb-4"
|
||||
>
|
||||
{verifying ? "Verifying..." : "Verify Payment"}
|
||||
{verifying ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : (
|
||||
<BadgeDollarSign />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TableCaption>
|
||||
<TableBody className="">
|
||||
<TableRow>
|
||||
<TableCell>Total Devices</TableCell>
|
||||
<TableCell className="text-right text-xl">
|
||||
{devices?.length}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Duration</TableCell>
|
||||
<TableCell className="text-right text-xl">
|
||||
{payment?.number_of_months} Months
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow className="">
|
||||
<TableCell colSpan={1}>Total Due</TableCell>
|
||||
<TableCell className="text-right text-3xl font-bold">
|
||||
{payment?.amount?.toFixed(2)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AccountInfomation({
|
||||
accountNo,
|
||||
accName,
|
||||
accountNo,
|
||||
accName,
|
||||
}: {
|
||||
accountNo: string;
|
||||
accName: string;
|
||||
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>
|
||||
);
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user