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

refactor: create utility function to hide AccountInformation component for topup and payment 🔧
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 8m50s
Details

Browse Source
This commit is contained in:
i701
2025-09-21 10:07:16 +05:00
parent a60e9a9c85
commit 5dab74b14b
4 changed files with 430 additions and 404 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 { tryCatch } from "@/utils/tryCatch";
export default async function TopupPage({
params,
params,
}: {
params: Promise<{ topupId: string }>;
params: Promise<{ topupId: string }>;
}) {
const topupId = (await params).topupId;
const [error, topup] = await tryCatch(getTopup({ id: topupId }));
if (error) {
if (error.message === "Invalid token.") redirect("/auth/signin");
return <ClientErrorMessage message={error.message} />;
}
const topupId = (await params).topupId;
const [error, topup] = await tryCatch(getTopup({ id: topupId }));
if (error) {
if (error.message === "Invalid token.") redirect("/auth/signin");
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.paid && topup.status !== "PENDING" && (
<Button
disabled
className={cn(
"rounded-md opacity-100! uppercase font-semibold",
topup?.paid
? "text-green-900 bg-green-500/20"
: "text-inherit bg-yellow-400",
)}
>
{topup.status}
</Button>
)}
{topup.status === "PENDING" && !topup.is_expired && (
<Button>
<TextShimmer>Payment Pending</TextShimmer>{" "}
</Button>
)}
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.paid && topup.status !== "PENDING" && (
<Button
disabled
className={cn(
"rounded-md opacity-100! uppercase font-semibold",
topup?.paid
? "text-green-900 bg-green-500/20"
: "text-inherit bg-yellow-400",
)}
>
{topup.status}
</Button>
)}
{topup.status === "PENDING" && !topup.is_expired && (
<Button>
<TextShimmer>Payment Pending</TextShimmer>{" "}
</Button>
)}
{!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.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 || topup.status === "CANCELLED"
}
topup={topup || undefined}
/>
</div>
</div>
);
{!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.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 || topup.status === "CANCELLED"
}
topup={topup || undefined}
/>
</div>
</div>
);
}