sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-07-10 17:16:33 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: improve state management and layout in Topup components 🔨
Some checks are pending
Build and Push Docker Images / Build and Push Docker Images (push) Has started running
Details

Browse Source
This commit is contained in:
i701
2025-07-08 19:54:07 +05:00
parent 9f9f2e4e91
commit a61231cf6b
2 changed files with 87 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,14 +20,13 @@ export default async function TopupPage({
return <ClientErrorMessage message={error.message} />;
}
return (
<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">
<h3 className="text-sarLinkOrange text-2xl">Topup</h3>
<div className="flex flex-col gap-4 items-end w-full">
{!topup.is_expired && (
{!topup.is_expired ||
(topup.status !== "PENDING" && (
<Button
disabled
className={cn(
@ -37,33 +36,43 @@ export default async function TopupPage({
// : "text-inherit bg-yellow-400",
)}
>
{topup?.paid ? <span>Paid</span> : <TextShimmer>Payment Pending</TextShimmer>}
{topup?.paid ? <span>Paid</span> : ""}
</Button>
))}
{topup.status === "PENDING" && !topup.is_expired && (
<Button>
<TextShimmer>Payment Pending</TextShimmer>{" "}
</Button>
)}
{!topup.paid && (
topup.is_expired ? (
{!topup.paid &&
(topup.is_expired ? (
<Button
disabled
className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
>
Topup Expired
</Button>
) : (
) : topup.status === "PENDING" ? (
<CancelTopupButton topupId={topupId} />
)
)}
) : topup.status === "CANCELLED" ? (
<Button disabled>Topup Cancelled</Button>
) : (
""
))}
</div>
</div>
{!topup.paid && (
{
(!topup.paid && topup.status === "PENDING" && !topup.is_expired) && (
<ExpiryCountDown expiryLabel="Top up" expiresAt={topup.expires_at} />
)}
)
}
<div
id="user-topup-details"
className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
>
<TopupToPay
disabled={topup.paid || topup.is_expired}
disabled={topup.paid || topup.is_expired || topup.status === "CANCELLED"}
topup={topup || undefined}
/>
</div>

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

@ -7,7 +7,10 @@ import {
} from "lucide-react";
import { useActionState, useEffect, useState } from "react";
import { toast } from "sonner";
import { type VerifyTopupPaymentState, verifyTopupPayment } from "@/actions/payment";
import {
type VerifyTopupPaymentState,
verifyTopupPayment,
} from "@/actions/payment";
import {
Table,
TableBody,
@ -19,15 +22,22 @@ import {
import type { Topup } from "@/lib/backend-types";
import { Button } from "./ui/button";
const initialState: VerifyTopupPaymentState = {
message: "",
success: false,
fieldErrors: {},
};
export default function TopupToPay({ topup, disabled }: { topup?: Topup, disabled?: boolean }) {
const [state, formAction, isPending] = useActionState(verifyTopupPayment, initialState);
export default function TopupToPay({
topup,
disabled,
}: {
topup?: Topup;
disabled?: boolean;
}) {
const [state, formAction, isPending] = useActionState(
verifyTopupPayment,
initialState,
);
// Handle toast notifications based on state changes
useEffect(() => {
@ -38,7 +48,11 @@ export default function TopupToPay({ topup, disabled }: { topup?: Topup, disable
? `Your topup payment has been verified successfully using ${state.transaction.sourceBank} bank transfer on ${state.transaction.trxDate}.`
: state.message,
});
} else if (!state.success && state.message && state.message !== initialState.message) {
} else if (
!state.success &&
state.message &&
state.message !== initialState.message
) {
toast.error("Topup Payment Verification Failed", {
closeButton: true,
description: state.message,
@ -69,16 +83,18 @@ export default function TopupToPay({ topup, disabled }: { topup?: Topup, disable
) : (
<div className="flex flex-col gap-2">
<form action={formAction}>
<input type="hidden" name="topupId" value={topup?.id ?? ""} />
<input
type="hidden"
name="topupId"
value={topup?.id ?? ""}
/>
<Button
disabled={disabled || isPending}
type="submit"
size={"lg"}
className="mb-4"
className="mb-4 w-full"
>
{isPending
? "Processing payment..."
: "I have paid"}
{isPending ? "Processing payment..." : "I have paid"}
{isPending ? (
<Loader2 className="animate-spin" />
) : (
@ -86,7 +102,6 @@ export default function TopupToPay({ topup, disabled }: { topup?: Topup, disable
)}
</Button>
</form>
</div>
)}
</div>
@ -150,19 +165,18 @@ function AccountInfomation({
}) {
const [accNo, setAccNo] = useState(false);
return (
<div className="justify-start items-start border my-4 flex flex-col gap-2 p-2 rounded-md">
<div className="justify-center items-center 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="border justify-center flex flex-col items-center 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">
<div className="border flex justify-between items-center gap-2 w-full p-2 rounded">
<div className="flex flex-col items-center justify-center w-full">
<p className="text-sm font-semibold">Account No</p>
<span>{accountNo}</span>
</div>
<Button
onClick={() => {
setTimeout(() => {
@ -172,11 +186,23 @@ function AccountInfomation({
toast.success("Account number copied!");
setAccNo((prev) => !prev);
}}
variant={"link"}
className="mt-2 w-full"
variant={"secondary"}
>
{accNo ? <Clipboard /> : <ClipboardCheck color="green" />}
{accNo ? (
<div className="flex items-center gap-2">
<span>Copy Account Number</span>
<ClipboardCheck />
</div>
) : (
<div className="flex items-center gap-2">
<span>Copy Account Number</span>
<ClipboardCheck color="green" />
</div>
)}
</Button>
</div>
</div>
</div>
);
}