feat: add disabled prop to DevicesToPay component and update button state management ✨

app/(dashboard)/payments/[paymentId]/page.tsx

@@ -62,6 +62,7 @@ export default async function PaymentPage({
 				className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
 			>
 				<DevicesToPay
+					disabled={payment.paid || payment.is_expired}
 					user={userProfile || undefined}
 					payment={payment || undefined}
 				/>

components/devices-to-pay.tsx

@@ -30,7 +30,8 @@ const initialState: VerifyDevicePaymentState = {
 export default function DevicesToPay({
 	payment,
 	user,
-}: { payment?: Payment; user?: User }) {
+	disabled
+}: { payment?: Payment; user?: User, disabled?: boolean }) {
 	const [state, formAction, isPending] = useActionState(verifyDevicePayment, initialState);
 
 	// Handle toast notifications based on state changes
@@ -118,7 +119,7 @@ export default function DevicesToPay({
 										<input type="hidden" name="paymentId" value={payment?.id ?? ""} />
 										<input type="hidden" name="method" value="TRANSFER" />
 										<Button
-											disabled={isPending}
+											disabled={isPending || disabled}
 											type="submit"
 											size={"lg"}
 											className="mb-4"