feat: add expiry label to ExpiryCountDown component in TopupPage ✨

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 && (
+						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

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"