sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-10-08 11:51:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: hide account information once the payment is verified/expired/cancelled 🔧

Browse Source
This commit is contained in:
i701
2025-09-20 14:17:48 +05:00
parent 43b8e22196
commit f2a17d522b
2 changed files with 201 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
app/(dashboard)/top-ups/[topupId]/page.tsx
View File

@@ -9,72 +9,72 @@ import { TextShimmer } from "@/components/ui/text-shimmer";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { tryCatch } from "@/utils/tryCatch"; import { tryCatch } from "@/utils/tryCatch";
export default async function TopupPage({ export default async function TopupPage({
params, params,
}: { }: {
params: Promise<{ topupId: string }>; params: Promise<{ topupId: string }>;
}) { }) {
const topupId = (await params).topupId; const topupId = (await params).topupId;
const [error, topup] = await tryCatch(getTopup({ id: topupId })); const [error, topup] = await tryCatch(getTopup({ id: topupId }));
if (error) { if (error) {
if (error.message === "Invalid token.") redirect("/auth/signin"); if (error.message === "Invalid token.") redirect("/auth/signin");
return <ClientErrorMessage message={error.message} />; return <ClientErrorMessage message={error.message} />;
} }
return ( return (
<div> <div>
<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4 mx-2"> <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4 mx-2">
<h3 className="text-sarLinkOrange text-2xl">Topup</h3> <h3 className="text-sarLinkOrange text-2xl">Topup</h3>
<div className="flex flex-col gap-4 items-end w-full"> <div className="flex flex-col gap-4 items-end w-full">
{!topup.is_expired && topup.paid && topup.status !== "PENDING" && ( {!topup.is_expired && topup.paid && topup.status !== "PENDING" && (
<Button <Button
disabled disabled
className={cn( className={cn(
"rounded-md opacity-100! uppercase font-semibold", "rounded-md opacity-100! uppercase font-semibold",
topup?.paid topup?.paid
? "text-green-900 bg-green-500/20" ? "text-green-900 bg-green-500/20"
: "text-inherit bg-yellow-400", : "text-inherit bg-yellow-400",
)} )}
> >
{topup.status} {topup.status}
</Button> </Button>
)} )}
{topup.status === "PENDING" && !topup.is_expired && ( {topup.status === "PENDING" && !topup.is_expired && (
<Button> <Button>
<TextShimmer>Payment Pending</TextShimmer>{" "} <TextShimmer>Payment Pending</TextShimmer>{" "}
</Button> </Button>
)} )}
{!topup.paid && {!topup.paid &&
(topup.is_expired ? ( (topup.is_expired ? (
<Button <Button
disabled disabled
className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20" className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
> >
Topup Expired Topup Expired
</Button> </Button>
) : topup.status === "PENDING" ? ( ) : topup.status === "PENDING" ? (
<CancelTopupButton topupId={topupId} /> <CancelTopupButton topupId={topupId} />
) : topup.status === "CANCELLED" ? ( ) : topup.status === "CANCELLED" ? (
<Button disabled>Topup Cancelled</Button> <Button disabled>Topup Cancelled</Button>
) : ( ) : (
"" ""
))} ))}
</div> </div>
</div> </div>
{!topup.paid && topup.status === "PENDING" && !topup.is_expired && ( {!topup.paid && topup.status === "PENDING" && !topup.is_expired && (
<ExpiryCountDown expiryLabel="Top up" expiresAt={topup.expires_at} /> <ExpiryCountDown expiryLabel="Top up" expiresAt={topup.expires_at} />
)} )}
<div <div
id="user-topup-details" id="user-topup-details"
className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start" className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
> >
<TopupToPay <TopupToPay
disabled={ disabled={
topup.paid || topup.is_expired || topup.status === "CANCELLED" topup.paid || topup.is_expired || topup.status === "CANCELLED"
} }
topup={topup || undefined} topup={topup || undefined}
/> />
</div> </div>
</div> </div>
); );
} }

270
components/topup-to-pay.tsx
View File

@@ -3,151 +3,155 @@ import { BadgeDollarSign, Loader2 } from "lucide-react";
import { useActionState, useEffect } from "react"; import { useActionState, useEffect } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { import {
type VerifyTopupPaymentState, type VerifyTopupPaymentState,
verifyTopupPayment, verifyTopupPayment,
} from "@/actions/payment"; } from "@/actions/payment";
import { import {
Table, Table,
TableBody, TableBody,
TableCaption, TableCaption,
TableCell, TableCell,
TableFooter, TableFooter,
TableRow, TableRow,
} from "@/components/ui/table"; } from "@/components/ui/table";
import type { Topup } from "@/lib/backend-types"; import type { Topup } from "@/lib/backend-types";
import { AccountInfomation } from "./account-information"; import { AccountInfomation } from "./account-information";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
const initialState: VerifyTopupPaymentState = { const initialState: VerifyTopupPaymentState = {
message: "", message: "",
success: false, success: false,
fieldErrors: {}, fieldErrors: {},
}; };
export default function TopupToPay({ export default function TopupToPay({
topup, topup,
disabled, disabled,
}: { }: {
topup?: Topup; topup?: Topup;
disabled?: boolean; disabled?: boolean;
}) { }) {
const [state, formAction, isPending] = useActionState( const [state, formAction, isPending] = useActionState(
verifyTopupPayment, verifyTopupPayment,
initialState, initialState,
); );
// Handle toast notifications based on state changes // Handle toast notifications based on state changes
useEffect(() => { useEffect(() => {
if (state.success && state.message) { if (state.success && state.message) {
toast.success("Topup successful!", { toast.success("Topup successful!", {
closeButton: true, closeButton: true,
description: state.transaction description: state.transaction
? `Your topup payment has been verified successfully using ${state.transaction.sourceBank} bank transfer on ${state.transaction.trxDate}.` ? `Your topup payment has been verified successfully using ${state.transaction.sourceBank} bank transfer on ${state.transaction.trxDate}.`
: state.message, : state.message,
}); });
} else if ( } else if (
!state.success && !state.success &&
state.message && state.message &&
state.message !== initialState.message state.message !== initialState.message
) { ) {
toast.error("Topup Payment Verification Failed", { toast.error("Topup Payment Verification Failed", {
closeButton: true, closeButton: true,
description: state.message, description: state.message,
}); });
} }
}, [state]); }, [state]);
return ( return (
<div className="w-full"> <div className="w-full">
<div className="m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded"> <div className="m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded">
<Table> <Table>
<TableCaption> <TableCaption>
<div className="max-w-sm mx-auto"> {!topup?.paid ||
<p>Please send the following amount to the payment address</p> topup?.is_expired ||
<AccountInfomation (topup?.status !== "CANCELLED" && (
accName="Baraveli Dev" <div className="max-w-sm mx-auto">
accountNo="90101400028321000" <p>Please send the following amount to the payment address</p>
/> <AccountInfomation
{topup?.paid ? ( accName="Baraveli Dev"
<Button accountNo="90101400028321000"
size={"lg"} />
variant={"secondary"} {topup?.paid ? (
disabled <Button
className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold" size={"lg"}
> variant={"secondary"}
Topup Payment Verified disabled
</Button> className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold"
) : ( >
<div className="flex flex-col gap-2"> Topup Payment Verified
<form action={formAction}> </Button>
<input ) : (
type="hidden" <div className="flex flex-col gap-2">
name="topupId" <form action={formAction}>
value={topup?.id ?? ""} <input
/> type="hidden"
<Button name="topupId"
disabled={disabled || isPending} value={topup?.id ?? ""}
type="submit" />
size={"lg"} <Button
className="mb-4 w-full" disabled={disabled || isPending}
> type="submit"
{isPending ? "Processing payment..." : "I have paid"} size={"lg"}
{isPending ? ( className="mb-4 w-full"
<Loader2 className="animate-spin" /> >
) : ( {isPending ? "Processing payment..." : "I have paid"}
<BadgeDollarSign /> {isPending ? (
)} <Loader2 className="animate-spin" />
</Button> ) : (
</form> <BadgeDollarSign />
</div> )}
)} </Button>
</div> </form>
</TableCaption> </div>
<TableBody className=""> )}
<TableRow> </div>
<TableCell>Topup created</TableCell> ))}
<TableCell className="text-right text-muted-foreground"> </TableCaption>
{new Date(topup?.created_at ?? "").toLocaleDateString("en-US", { <TableBody className="">
month: "short", <TableRow>
day: "2-digit", <TableCell>Topup created</TableCell>
year: "numeric", <TableCell className="text-right text-muted-foreground">
minute: "2-digit", {new Date(topup?.created_at ?? "").toLocaleDateString("en-US", {
hour: "2-digit", month: "short",
second: "2-digit", day: "2-digit",
})} year: "numeric",
</TableCell> minute: "2-digit",
</TableRow> hour: "2-digit",
<TableRow> second: "2-digit",
<TableCell>Payment received</TableCell> })}
<TableCell className="text-right text-sarLinkOrange"> </TableCell>
{topup?.paid_at </TableRow>
? new Date(topup.paid_at).toLocaleDateString("en-US", { <TableRow>
month: "short", <TableCell>Payment received</TableCell>
day: "2-digit", <TableCell className="text-right text-sarLinkOrange">
year: "numeric", {topup?.paid_at
minute: "2-digit", ? new Date(topup.paid_at).toLocaleDateString("en-US", {
hour: "2-digit", month: "short",
second: "2-digit", day: "2-digit",
}) year: "numeric",
: "-"} minute: "2-digit",
</TableCell> hour: "2-digit",
</TableRow> second: "2-digit",
<TableRow> })
<TableCell>MIB Reference</TableCell> : "-"}
<TableCell className="text-right"> </TableCell>
{topup?.mib_reference ? topup.mib_reference : "-"} </TableRow>
</TableCell> <TableRow>
</TableRow> <TableCell>MIB Reference</TableCell>
</TableBody> <TableCell className="text-right">
<TableFooter> {topup?.mib_reference ? topup.mib_reference : "-"}
<TableRow className=""> </TableCell>
<TableCell colSpan={1}>Total Due</TableCell> </TableRow>
<TableCell className="text-right text-3xl font-bold"> </TableBody>
{topup?.amount?.toFixed(2)} <TableFooter>
</TableCell> <TableRow className="">
</TableRow> <TableCell colSpan={1}>Total Due</TableCell>
</TableFooter> <TableCell className="text-right text-3xl font-bold">
</Table> {topup?.amount?.toFixed(2)}
</div> </TableCell>
</div> </TableRow>
); </TableFooter>
</Table>
</div>
</div>
);
} }