From 60f7f67873df0883e40f82c447e77f265524446a Mon Sep 17 00:00:00 2001 From: uche102 Date: Tue, 24 Mar 2026 04:59:16 +0100 Subject: [PATCH 1/6] style: fix formatting in payment form --- components/bills/payment-form.tsx | 41 ++++++++++++++----------------- 1 file changed, 18 insertions(+), 23 deletions(-) diff --git a/components/bills/payment-form.tsx b/components/bills/payment-form.tsx index 07995b6..ac81945 100644 --- a/components/bills/payment-form.tsx +++ b/components/bills/payment-form.tsx @@ -39,14 +39,17 @@ export function PaymentForm({ schema }: PaymentFormProps) { const [showSchedule, setShowSchedule] = useState(false) // 1. Generate dynamic Zod schema - const formSchemaObject: Record = {} + const formSchemaObject: any = {} schema.fields.forEach((field) => { - let validator = z.string() + let validator: any = z.string() if (field.validation.required) { validator = validator.min(1, field.validation.message || `${field.label} is required`) } if (field.validation.pattern) { - validator = validator.regex(new RegExp(field.validation.pattern), field.validation.message) + validator = (validator as z.ZodString).regex( + new RegExp(field.validation.pattern), + field.validation.message + ) } formSchemaObject[field.name] = validator }) @@ -67,42 +70,34 @@ export function PaymentForm({ schema }: PaymentFormProps) { const watchedValues = useWatch({ control }) - // 2. Define parsedAmount (was missing) + // 2. Define parsedAmount const amountField = schema.fields.find((f) => f.name === 'amount' || f.type === 'number') - const amountValue = amountField?.name ? watchedValues[amountField.name] : '' - const parsedAmount = parseFloat((amountValue as string) || '0') + const amountValue = watch(amountField?.name as any) + const parsedAmount = parseFloat(amountValue || '0') // 3. Logic: Account Validation const primaryFieldName = schema.fields[0]?.name || '' const accountValue = primaryFieldName ? ((watchedValues[primaryFieldName] as string) ?? '') : '' const accountError = primaryFieldName ? errors[primaryFieldName] : undefined - const validateAccount = useCallback(async (_value: string) => { + const validateAccount = async (value: string) => { setIsValidating(true) await new Promise((resolve) => setTimeout(resolve, 1500)) setIsValidating(false) const mockNames = ['John Doe', 'Sarah Williams', 'Emeka Azikiwe', 'Kofi Mensah'] - setValidatedAccount({ - name: mockNames[Math.floor(Math.random() * mockNames.length)], - accountValue: _value, - }) - }, []) + setValidatedAccount(mockNames[Math.floor(Math.random() * mockNames.length)]) + } useEffect(() => { - if (accountValue && accountValue.length >= 10 && !accountError) { + if (accountValue && accountValue.length >= 10 && !errors[schema.fields[0].name]) { const delayDebounceFn = setTimeout(() => { - validateAccount(accountValue) + validateAccount() }, 1000) return () => clearTimeout(delayDebounceFn) + } else { + setValidatedAccount(null) } - }, [accountError, accountValue, validateAccount]) - - const isAccountValidatedForCurrentInput = Boolean( - validatedAccount && - validatedAccount.accountValue === accountValue && - accountValue.length >= 10 && - !accountError - ) + }, [accountValue, errors[schema.fields[0].name]]) // 4. Logic: Form Submission const onSubmit = async (_data: FormValues) => { @@ -205,7 +200,7 @@ export function PaymentForm({ schema }: PaymentFormProps) { setShowSchedule(checked === true)} + onCheckedChange={(checked: any) => setShowSchedule(!!checked)} /> From bab189b718df1c420db0c5d99a8dcebd3e31db24 Mon Sep 17 00:00:00 2001 From: uche102 Date: Tue, 24 Mar 2026 05:13:09 +0100 Subject: [PATCH 2/6] fix: resolve conflicts and apply final formatting --- components/bills/payment-form.tsx | 64 ++++++++++++------------------- 1 file changed, 25 insertions(+), 39 deletions(-) diff --git a/components/bills/payment-form.tsx b/components/bills/payment-form.tsx index ac81945..8bb15b5 100644 --- a/components/bills/payment-form.tsx +++ b/components/bills/payment-form.tsx @@ -1,6 +1,6 @@ 'use client' -import { useState, useEffect, useCallback } from 'react' +import { useState, useEffect } from 'react' import { useForm, useWatch } from 'react-hook-form' import { zodResolver } from '@hookform/resolvers/zod' import { z } from 'zod' @@ -22,7 +22,6 @@ import { toast } from 'sonner' import { motion, AnimatePresence } from 'framer-motion' import { cn } from '@/lib/utils' import { Checkbox } from '@/components/ui/checkbox' -import type { CheckedState } from '@radix-ui/react-checkbox' interface PaymentFormProps { schema: BillerSchema @@ -30,18 +29,14 @@ interface PaymentFormProps { export function PaymentForm({ schema }: PaymentFormProps) { const [isValidating, setIsValidating] = useState(false) - const [validatedAccount, setValidatedAccount] = useState<{ - name: string - accountValue: string - } | null>(null) + const [validatedAccount, setValidatedAccount] = useState(null) const [paymentMethod, setPaymentMethod] = useState('card') const [isProcessing, setIsProcessing] = useState(false) const [showSchedule, setShowSchedule] = useState(false) - // 1. Generate dynamic Zod schema - const formSchemaObject: any = {} + const formSchemaObject: Record = {} schema.fields.forEach((field) => { - let validator: any = z.string() + let validator: z.ZodString | z.ZodNumber = z.string() if (field.validation.required) { validator = validator.min(1, field.validation.message || `${field.label} is required`) } @@ -70,37 +65,33 @@ export function PaymentForm({ schema }: PaymentFormProps) { const watchedValues = useWatch({ control }) - // 2. Define parsedAmount const amountField = schema.fields.find((f) => f.name === 'amount' || f.type === 'number') - const amountValue = watch(amountField?.name as any) - const parsedAmount = parseFloat(amountValue || '0') + const amountValue = watchedValues[amountField?.name as keyof FormValues] as string + const parsedAmount = parseFloat(amountValue || '0') || 0 - // 3. Logic: Account Validation const primaryFieldName = schema.fields[0]?.name || '' - const accountValue = primaryFieldName ? ((watchedValues[primaryFieldName] as string) ?? '') : '' - const accountError = primaryFieldName ? errors[primaryFieldName] : undefined - - const validateAccount = async (value: string) => { - setIsValidating(true) - await new Promise((resolve) => setTimeout(resolve, 1500)) - setIsValidating(false) - const mockNames = ['John Doe', 'Sarah Williams', 'Emeka Azikiwe', 'Kofi Mensah'] - setValidatedAccount(mockNames[Math.floor(Math.random() * mockNames.length)]) - } + const accountValue = (watchedValues[primaryFieldName as keyof FormValues] as string) || '' useEffect(() => { - if (accountValue && accountValue.length >= 10 && !errors[schema.fields[0].name]) { + const validate = async () => { + setIsValidating(true) + await new Promise((resolve) => setTimeout(resolve, 1500)) + setIsValidating(false) + const mockNames = ['John Doe', 'Sarah Williams', 'Emeka Azikiwe', 'Kofi Mensah'] + setValidatedAccount(mockNames[Math.floor(Math.random() * mockNames.length)]) + } + + if (accountValue && accountValue.length >= 10 && !errors[primaryFieldName]) { const delayDebounceFn = setTimeout(() => { - validateAccount() + validate() }, 1000) return () => clearTimeout(delayDebounceFn) } else { setValidatedAccount(null) } - }, [accountValue, errors[schema.fields[0].name]]) + }, [accountValue, errors, primaryFieldName]) - // 4. Logic: Form Submission - const onSubmit = async (_data: FormValues) => { + const onSubmit = async (data: FormValues) => { setIsProcessing(true) await new Promise((resolve) => setTimeout(resolve, 3000)) setIsProcessing(false) @@ -121,10 +112,7 @@ export function PaymentForm({ schema }: PaymentFormProps) { {field.type === 'select' ? ( - setValue(field.name as any, val, { shouldValidate: true }) + setValue(field.name as unknown as string, val, { shouldValidate: true }) } > @@ -140,7 +140,7 @@ export function PaymentForm({ schema }: PaymentFormProps) { 'h-12 rounded-2xl bg-muted/30 focus:ring-primary', isValidating && field.id === schema.fields[0]?.id && 'pr-10' )} - {...register(field.name as any)} + {...register(field.name as unknown as string)} /> {isValidating && field.id === schema.fields[0]?.id && (
diff --git a/next.config.mjs b/next.config.mjs index 19dd8da..d734f06 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -6,9 +6,7 @@ const nextConfig = { images: { unoptimized: true, }, - eslint: { - dirs: ['.'], - }, + } export default nextConfig