refactor: create utility function to hide AccountInformation component for topup and payment 🔧

components/topup-to-pay.tsx

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