refactor: improve state management and layout in Topup components 🔨

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

@@ -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,36 +36,46 @@ 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.paid &&
-            topup.is_expired ? (
+            (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>
-    </div>
+    </div >
   );
 }

components/topup-to-pay.tsx

@@ -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 }) {
+export default function TopupToPay({
-	const [state, formAction, isPending] = useActionState(verifyTopupPayment, initialState);
+	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
+											{isPending ? "Processing payment..." : "I have paid"}
-												? "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="border flex justify-between items-center gap-2 w-full p-2 rounded">
-				<div className="flex flex-col items-start justify-start">
+				<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>
 	);
 }