tranfer fund input validation done

src/components/AuthPages/VerifyLink/index.jsx

@@ -12,7 +12,7 @@ export default function VerifyLink() {
   const navigate = useNavigate()
   const location = useLocation();
   const queryParams = new URLSearchParams(location?.search)
-  const token = queryParams.get('vlink')
+  const token = queryParams.get('vlnk')
 
   const verifyEmail = useCallback(
     async (code) => {

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -92,7 +92,6 @@ export default function InputCom({
           ref={inputRef}
           readOnly={disable}
           onBlur={blurHandler}
-          onMouseEnter={onMouseEnter}
           onMouseLeave={onMouseLeave}
         />
         {iconName && (

src/components/MyWallet/AddRecipient.jsx

@@ -21,7 +21,7 @@ const validationSchema = Yup.object().shape({
       .max(25, 'Maximum 25 characters')
       .required('Lastname is required'),
     country: Yup.string()
-      .min(1, 'Minimum 3 characters')
+      .min(1, 'Minimum 1 characters')
       .max(25, 'Maximum 25 characters')
       .required('Country is required'),
     bank: Yup.string()

src/components/MyWallet/TransferFund.jsx

@@ -6,25 +6,39 @@ import InputCom from '../Helpers/Inputs/InputCom'
 
 import usersService from '../../services/UsersService'
 
+import {toast} from 'react-toastify'
+
+import {Formik, Form} from 'formik'
+import * as Yup from 'yup'
+
+const validationSchema = Yup.object().shape({
+    amount: Yup.number()
+    .typeError("you must specify a number")
+    .min(1, 'Amount must be greater than 0')
+    .required('Amount is required'),
+    recipient: Yup.string()
+      .min(3, 'Minimum 3 characters')
+      .max(50, 'Maximum 50 characters')
+      .required('Recipient is required'),
+  })
+  
+  const initialValues = {
+    amount: '',
+    recipient: '',
+    comment: '',
+  }
+
 function TransferFund({payment, wallet}) {
     const apiCall = new usersService()
 
-    let [newFee, setNewFee] = useState(false)
-
     let [recepients, setRecipients] = useState({ // FOR COUPON HISTORY
         loading: true,
         data: [],
         error: false
     })
 
-    let [sendMoneyFee, setSendMoneyFee] = useState({fee: 0, total: 0}) // HOLD THE VALUE FOR SEND MONEY FEE
+    let [sendMoneyFee, setSendMoneyFee] = useState({loading: false, fee: 0, total: 0}) // HOLD THE VALUE FOR SEND MONEY FEE
 
-    //STATE FOR CONTROLLED INPUTS
-    let [inputs, setInputs] = useState({
-        amount: '0',
-        recipient: '',
-        comment: ''
-    })
 
     //FUNCTION TO GET RECIPIENT LIST
     const getRecipients = ()=>{
@@ -40,159 +54,162 @@ function TransferFund({payment, wallet}) {
     }
 
     //FUNCTION TO GET SEND MONEY FEE
-    const getSendMoneyFee = ()=>{
+    const getSendMoneyFee = ({target:{value}})=>{
-        let {amount} = inputs
+        setSendMoneyFee({loading: true, fee: 0, total: 0})
+        let amount = value
         if(Number(amount) <= 0 || amount=='' || isNaN(amount)){
-            setSendMoneyFee({fee: 0, total: 0})
+            setSendMoneyFee({loading: false, fee: 0, total: 0})
             return
         }
         apiCall.getSendMoneyFee(Number(amount)).then((res)=>{
-            setSendMoneyFee({fee: res.data.processing_fee, total: res.data.total_amount})
+            setSendMoneyFee({loading: false, fee: res.data.processing_fee, total: res.data.total_amount})
         }).catch((error)=>{
-            setSendMoneyFee({fee: 0, total: 0})
+            setSendMoneyFee({loading: false, fee: 0, total: 0})
         })
     }
 
 
-    // FUNCTION TO HANDLE INPUT CHANGE
-    const handleChange = ({target:{name, value}}) => {
-        setInputs(prev => ({...prev, [name]:value}))
-    }
-
     //FUNCTION TO HANDLE SUBMIT
-    const handleSubmit = (e) => {
+    const handleSubmit = () => {
-        e.preventDefault();
+        // setRequestStatus({message: '', loading: true, status: false})
+        let reqData = {}
 
-        //valid inputs before submitting. Just for texting remove later. check amoutn to be number
+        // MAKE API CALL
         
-        setInputs({
-            amount: '0',
-            recipient: '',
-            comment: ''
-        })
     }
 
     useEffect(()=>{
         getRecipients()
-        getSendMoneyFee()
+    },[])
-    },[newFee])
     return (
         <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
             <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
                 <div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
-                   <form className='transfer-fund-info' onSubmit={handleSubmit}>
+                    <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
-                        {wallet.loading ?
+                        {(props)=>{
-                        <LoadingSpinner size='8' color='sky-blue' />
+                        return (
-                        :
+                            <Form className='transfer-fund-info'>
-                        wallet.data.length ? 
+                                    {wallet.loading ?
-                        <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>
+                                    <LoadingSpinner size='8' color='sky-blue' />
-                        {wallet.data.map(item => {
+                                    :
-                            if(item.description == 'Naira'){
+                                    wallet.data.length ? 
-                                return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*1).toFixed(2)}`
+                                    <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>
-                            }
+                                    {wallet.data.map(item => {
-                        })}
+                                        if(item.description == 'Naira'){
-                        </h2>
+                                            return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*1).toFixed(2)}`
-                        :
+                                        }
-                        wallet.error ? 
+                                    })}
-                        <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Opps! An Error Occured</h2>
+                                    </h2>
-                        :
+                                    :
-                        <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>No Wallet Information Found!</h2>
+                                    wallet.error ? 
-                        }
+                                    <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Opps! An Error Occured</h2>
-                        <div className="xl:flex xl:space-x-7 mb-6">
+                                    :
-
+                                    <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>No Wallet Information Found!</h2>
-                            <div className="field w-full mb-6 xl:mb-0">
-                                <InputCom
-                                    label="Amount"
-                                    type="text"
-                                    name="amount"
-                                    value={inputs.amount}
-                                    inputHandler={handleChange}
-                                    onMouseEnter={()=>{setNewFee(false)}}
-                                    onMouseLeave={()=>{setNewFee(true)}}
-                                />
-                            </div>
-                            
-                            <div className="field w-full">
-                                <InputCom
-                                    label="Fee"
-                                    type="text"
-                                    name="fee"
-                                    value={sendMoneyFee.fee}
-                                    disable={true}
-                                />
-                            </div>
-                        </div>
-
-                        <div className='md:flex items-center justify-end'>
-                            <div className="field w-full lg:w-1/2 mb-6">
-                                <InputCom
-                                    label="Total"
-                                    type="text"
-                                    name="total"
-                                    value={sendMoneyFee.total}
-                                    disable={true}
-                                />
-                            </div>
-                        </div>
-
-                        <div className='relative my-3 md:flex items-center'>
-                            <div className='transfer-input w-full'>
-                                <div className='flex items-center justify-start py-2'>
-                                    <label className='text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Recipient 
-                                        <span className='text-red-500 mx-2'>*</span> 
-                                        <span title='Transfer Recipient' className={`text-white text-sm bg-slate-500 w-1 h-1 rounded-full px-3 py-1 cursor-pointer`}>!</span>
-                                    </label>
-                                    <Link to='add-recipient' className='mx-1 text-base text-white p-2 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
-                                </div>
-                                <select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' value={inputs.recipient} name='recipient' onChange={handleChange}>
-                                    {recepients.loading ?
-                                     <option className='text-slate-500 text-lg' value="">Loading...</option>
-                                     :
-                                     recepients.data.length ?
-                                     <> 
-                                     <option className='text-slate-500 text-lg' value="">Select...</option>
-                                     {recepients.data.map((item, index)=>(
-                                        <option key={index} value={item.account_no} className='text-slate-500 text-lg'>{item.recipient}</option>
-                                     ))}
-                                     </>
-                                     :
-                                     recepients.error ?
-                                     <option className='text-slate-500 text-lg' value="">Could'nt Load, try again!</option>
-                                     :
-                                     <option className='text-slate-500 text-lg' value="">No Recipient Found! Click Add to Add</option>
                                     }
-                                </select>
+                                    <div className="xl:flex xl:space-x-7 mb-6">
-                            </div>
-                        </div>
 
-                        <div className="field w-full mb-6">
+                                        <div className="field w-full mb-6 xl:mb-0">
-                            {/* <InputCom
+                                            <InputCom
-                                label="Comment"
+                                                label="Amount"
-                                type="text"
+                                                type="text"
-                                name="comment"
+                                                name="amount"
-                                value={inputs.comment}
+                                                placeholder='0'
-                                inputHandler={handleChange}
+                                                value={props.values.amount}
-                            /> */}
+                                                inputHandler={props.handleChange}
-                            <label className='text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Comment</label>
+                                                blurHandler={props.handleBlur}
-                            <textarea style={{resize: 'none'}}
+                                                onMouseLeave={(e)=>{getSendMoneyFee(e)}}
-                            className='text-base px-6 text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F]  focus:ring-0 focus:outline-none' 
+                                            />
-                            name="comment" 
+                                            {(props.errors.amount && props.touched.amount) && <p className="text-sm text-red-500">{props.errors.amount}</p>}
-                            value={inputs.comment}
+                                        </div>
-                            onChange={handleChange}
-                            cols="30" 
-                            rows="2"
-                            />
-                        </div>
                                         
-                        <div className='transfer-fund-btn flex justify-end items-center py-4'>
+                                        <div className="field w-full">
-                            <button className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
+                                            <InputCom
-                        </div>
+                                                label="Fee"
-                   </form>
+                                                type="text"
+                                                name="fee"
+                                                value={sendMoneyFee.loading ? 'loading' : sendMoneyFee.fee}
+                                                disable={true}
+                                            />
+                                        </div>
+                                    </div>
+
+                                    <div className='md:flex items-center justify-end'>
+                                        <div className="field w-full lg:w-1/2 mb-6">
+                                            <InputCom
+                                                label="Total"
+                                                type="text"
+                                                name="total"
+                                                value={sendMoneyFee.loading ? 'loading' : sendMoneyFee.total}
+                                                disable={true}
+                                            />
+                                        </div>
+                                    </div>
+                                    
+                                    <div className='w-full'>
+                                        <div className='relative my-3 md:flex items-center'>
+                                            <div className='transfer-input w-full'>
+                                                <div className='flex items-center justify-start py-2'>
+                                                    <label className='text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Recipient 
+                                                        <span className='text-red-500 mx-2'>*</span> 
+                                                        <span title='Transfer Recipient' className={`text-white text-sm bg-slate-500 w-1 h-1 rounded-full px-3 py-1 cursor-pointer`}>!</span>
+                                                    </label>
+                                                    <Link to='add-recipient' className='mx-1 text-base text-white p-2 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
+                                                </div>
+                                                <select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' value={props.values.recipient} name='recipient' onChange={props.handleChange} onBlur={props.handleBlur}>
+                                                    {recepients.loading ?
+                                                    <option className='text-slate-500 text-lg' value="">Loading...</option>
+                                                    :
+                                                    recepients.data.length ?
+                                                    <> 
+                                                    <option className='text-slate-500 text-lg' value="">Select...</option>
+                                                    {recepients.data.map((item, index)=>(
+                                                        <option key={index} value={item.account_no} className='text-slate-500 text-lg'>{item.recipient}</option>
+                                                    ))}
+                                                    </>
+                                                    :
+                                                    recepients.error ?
+                                                    <option className='text-slate-500 text-lg' value="">Could'nt Load, try again!</option>
+                                                    :
+                                                    <option className='text-slate-500 text-lg' value="">No Recipient Found! Click Add to Add</option>
+                                                    }
+                                                </select>
+                                            </div>
+                                        </div>
+                                        {(props.errors.recipient && props.touched.recipient) && <p className="text-sm text-red-500">{props.errors.recipient}</p>}
+                                    </div>
+
+                                    <div className="field w-full mb-6">
+                                        {/* <InputCom
+                                            label="Comment"
+                                            type="text"
+                                            name="comment"
+                                            value={inputs.comment}
+                                            inputHandler={handleChange}
+                                        /> */}
+                                        <label className='text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Comment</label>
+                                        <textarea style={{resize: 'none'}}
+                                        className='text-base px-6 text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F]  focus:ring-0 focus:outline-none' 
+                                        name="comment" 
+                                        value={props.values.comment}
+                                        onChange={props.handleChange}
+                                        onBlur={props.handleBlur}
+                                        cols="30" 
+                                        rows="2"
+                                        />
+                                    </div>
+
+                                    <div className='transfer-fund-btn flex justify-end items-center py-4'>
+                                        <button type='submit' className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
+                                    </div>
+                            </Form>
+                        )
+                        }}
+                   </Formik>
                 </div>
             </div>
     
             <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-                <div className="wallet w-full  md:p-8 p-4 h-full max-h-[600px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                <div className="wallet w-full  md:p-8 p-4 h-full max-h-[800px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                     <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
                     <p className='text-base text-slate-500 dark:text-white'>Activity Report</p>
                     {payment.loading ?