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

components/devices-to-pay.tsx

@@ -16,6 +16,7 @@ import {
 } from "@/components/ui/table";
 import type { Payment } from "@/lib/backend-types";
 import type { User } from "@/lib/types/user";
+import { shouldShowPaymentInfo } from "@/lib/utils";
 import { AccountInfomation } from "./account-information";
 import { Button } from "./ui/button";
 
@@ -92,6 +93,7 @@ export default function DevicesToPay({
       <div className="m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded">
         <Table>
           <TableCaption>
+            {shouldShowPaymentInfo(payment) && (
               <div className="max-w-sm mx-auto">
                 <p>Please send the following amount to the payment address</p>
                 <AccountInfomation
@@ -154,6 +156,7 @@ export default function DevicesToPay({
                   </div>
                 )}
               </div>
+            )}
           </TableCaption>
           <TableBody className="">
             <TableRow>

components/topup-to-pay.tsx

@@ -15,6 +15,7 @@ import {
   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";
 
@@ -61,9 +62,7 @@ export default function TopupToPay({
       <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") && (
+            {shouldShowTopupPaymentInfo(topup) && (
               <div className="max-w-sm mx-auto">
                 <p>Please send the following amount to the payment address</p>
                 <AccountInfomation

lib/utils.ts

@@ -1,5 +1,6 @@
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
+import type { Payment, Topup } from "./backend-types";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -46,3 +47,26 @@ export function validateApiKey(request: Request) {
     throw new Error("Invalid API key");
   }
 }
+
+export function shouldShowTopupPaymentInfo(topup: Topup | undefined): boolean {
+  if (!topup) return false;
+
+  return !(
+    topup.paid ||
+    topup.is_expired ||
+    topup.status === "CANCELLED" ||
+    topup.status === "VERIFIED"
+  );
+}
+
+
+export function shouldShowPaymentInfo(topup: Payment | undefined): boolean {
+  if (!topup) return false;
+
+  return !(
+    topup.paid ||
+    topup.is_expired ||
+    topup.status === "CANCELLED" ||
+    topup.status === "PAID"
+  );
+}