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

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"