From 9e25da717ba06d36e60aed9d1de4bfff4b446213 Mon Sep 17 00:00:00 2001
From: i701 <idhaan701@outlook.com>
Date: Sun, 6 Jul 2025 22:37:23 +0500
Subject: [PATCH] =?UTF-8?q?feat:=20add=20expiry=20label=20to=20ExpiryCount?=
 =?UTF-8?q?Down=20component=20in=20TopupPage=20=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(dashboard)/payments/[paymentId]/page.tsx | 20 +++++++++++++++----
 app/(dashboard)/top-ups/[topupId]/page.tsx    |  2 +-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/app/(dashboard)/payments/[paymentId]/page.tsx b/app/(dashboard)/payments/[paymentId]/page.tsx
index 9f53c3b..1e0b151 100644
--- a/app/(dashboard)/payments/[paymentId]/page.tsx
+++ b/app/(dashboard)/payments/[paymentId]/page.tsx
@@ -1,11 +1,12 @@
+import { redirect } from "next/navigation";
 import { getPayment, getProfile } from "@/actions/payment";
 import CancelPaymentButton from "@/components/billing/cancel-payment-button";
+import ExpiryCountDown from "@/components/billing/expiry-time-countdown";
 import ClientErrorMessage from "@/components/client-error-message";
 import DevicesToPay from "@/components/devices-to-pay";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { tryCatch } from "@/utils/tryCatch";
-import { redirect } from "next/navigation";
 export default async function PaymentPage({
 	params,
 }: {
@@ -40,13 +41,24 @@ export default async function PaymentPage({
 						{payment?.paid ? "Paid" : "Pending"}
 					</Button>
 					{!payment.paid && (
-						<CancelPaymentButton paymentId={paymentId} />
+						payment.is_expired ? (
+							<Button
+								disabled
+								className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
+							>
+								Payment Expired
+							</Button>
+						) : (
+							<CancelPaymentButton paymentId={paymentId} />
+						)
 					)}
 				</div>
 			</div>
-
+			{!payment.paid && (
+				<ExpiryCountDown expiryLabel="Payment" expiresAt={payment.expires_at} />
+			)}
 			<div
-				id="user-filters"
+				id="user-device-payments"
 				className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
 			>
 				<DevicesToPay
diff --git a/app/(dashboard)/top-ups/[topupId]/page.tsx b/app/(dashboard)/top-ups/[topupId]/page.tsx
index bba63f6..62a8fd3 100644
--- a/app/(dashboard)/top-ups/[topupId]/page.tsx
+++ b/app/(dashboard)/top-ups/[topupId]/page.tsx
@@ -56,7 +56,7 @@ export default async function TopupPage({
         </div>
       </div>
       {!topup.paid && (
-        <ExpiryCountDown expiresAt={topup.expires_at} />
+        <ExpiryCountDown expiryLabel="Top up" expiresAt={topup.expires_at} />
       )}
       <div
         id="user-topup-details"