mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-07-10 11:06:30 +00:00
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
Some checks are pending
Build and Push Docker Images / Build and Push Docker Images (push) Has started running
This commit is contained in:
@ -20,53 +20,62 @@ 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 && (
|
||||
|
||||
<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?.paid ? <span>Paid</span> : <TextShimmer>Payment Pending</TextShimmer>}
|
||||
{!topup.is_expired ||
|
||||
(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?.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 && (
|
||||
<ExpiryCountDown expiryLabel="Top up" expiresAt={topup.expires_at} />
|
||||
)}
|
||||
{
|
||||
(!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>
|
||||
</div>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
|
Reference in New Issue
Block a user