added validation to add recipient page

src/components/MyWallet/AddRecipient.jsx

@@ -2,12 +2,68 @@ import React, {useEffect, useState} from 'react'
 import { Link } from 'react-router-dom'
 import Icons from '../Helpers/Icons'
 import usersService from '../../services/UsersService'
+import InputCom from '../Helpers/Inputs/InputCom'
+
+import {Formik, Form} from 'formik'
+import * as Yup from 'yup'
+
+
+const validationSchema = Yup.object().shape({
+    firstname: Yup.string()
+      .min(3, 'Minimum 3 characters')
+      .max(25, 'Maximum 25 characters')
+      .required('Firstname is required'),
+    lastname: Yup.string()
+      .min(3, 'Minimum 3 characters')
+      .max(25, 'Maximum 25 characters')
+      .required('Lastname is required'),
+    country: Yup.string()
+      .min(1, 'Minimum 3 characters')
+      .max(25, 'Maximum 25 characters')
+      .required('Country is required'),
+    bank: Yup.string()
+      .min(3, 'Minimum 3 characters')
+      .max(25, 'Maximum 25 characters')
+      .required('Bank name is required'),
+    accountNumber: Yup.string()
+      .min(3, 'Minimum 3 characters')
+      .max(25, 'Maximum 25 characters')
+      .required('Account Number is required'),
+    repeatAccountNumber: Yup.string()
+      .min(3, 'Minimum 3 characters')
+      .max(25, 'Maximum 25 characters')
+      .required('Repeat Password is required'),
+    accountType: Yup.string()
+      .min(3, 'Minimum 3 characters')
+      .max(25, 'Maximum 25 characters')
+      .required('Account Type is required'),
+    city: Yup.string()
+      .min(3, 'Minimum 3 characters')
+      .max(25, 'Maximum 25 characters')
+      .required('City is required'),
+    state: Yup.string()
+      .min(3, 'Minimum 3 characters')
+      .max(25, 'Maximum 25 characters')
+      .required('State is required'),
+  })
+  
+  const initialValues = {
+    firstname: '',
+    lastname: '',
+    country: '',
+    bank: '',
+    accountNumber: '',
+    repeatAccountNumber: '',
+    accountType: '',
+    state: '',
+    city: ''
+  }
 
 function AddRecipient() {
 
     const apiURL = new usersService()
 
-    let [countries, setCountries] = useState({ // STATE TO HOLD LIST OF COUNTRIES
+    let [allCountries, setAllCountries] = useState({ // STATE TO HOLD LIST OF COUNTRIES
         loading: true,
         data: []
     })
@@ -17,60 +73,29 @@ function AddRecipient() {
         data: []
     })
 
-    let [accountType, setAccountType] = useState({ // STATE TO HOLD LIST ACCOUNT TYPE
+    let [accType, setAccType] = useState({ // STATE TO HOLD LIST ACCOUNT TYPE
         loading: true,
         data: []
     })
 
-    //STATE FOR CONTROLLED INPUTS
-    let [inputs, setInputs] = useState({
-        firstname: '',
-        lastname: '',
-        country: '',
-        'bank-name': '',
-        'account-number': '',
-        'repeat-account-number': '',
-        'account-type': '',
-        state: '',
-        city: ''
-    })
-
-    // FUNCTION TO HANDLE INPUT CHANGE
-    const handleChange = ({target:{name, value}}) => {
-        setInputs(prev => ({...prev, [name]:value}))
-    }
-
     //FUNCTION TO HANDLE SUBMIT
-    const handleSubmit = (e) => {
+    const handleSubmit = (values, helpers) => {
-        e.preventDefault();
+        // setRequestState({message: '', loading: true, status: false})
+        console.log('working')
 
         //valid inputs before submitting. Just for texting remove later       
-    
-       
-        // RETURN INPUTS TO EMPTY STRING
-        setInputs({
-            firstname: '',
-            lastname: '',
-            country: '',
-            'bank-name': '',
-            'account-number': '',
-            'repeat-account-number': '',
-            'account-type': '',
-            state: '',
-            city: ''
-        })
     }
 
     // FUNCTION TO GET COUNTRIES
     const getCountry = ()=> { 
         apiURL.getSignupCountryData().then((res)=>{
             if(res.data.internal_return < 0){
-                setCountries(prev => ({loading: false, data: []}))
+                setAllCountries(prev => ({loading: false, data: []}))
                 return
             }
-            setCountries(prev => ({loading: false, data:res.data.signup_country}))
+            setAllCountries(prev => ({loading: false, data:res.data.signup_country}))
         }).catch((error)=>{
-            setCountries(prev => ({loading: false, data: []}))
+            setAllCountries(prev => ({loading: false, data: []}))
         })
     }
     // END OF FUNCTION TO GET COUNTRIES
@@ -93,12 +118,12 @@ function AddRecipient() {
     const getAccountTypes = ()=> { 
         apiURL.getAccountTypes().then((res)=>{
             if(res.data.internal_return < 0){
-                setAccountType(prev => ({loading: false, data: []}))
+                setAccType(prev => ({loading: false, data: []}))
                 return
             }
-            setAccountType(prev => ({loading: false, data:res.data.result_list}))
+            setAccType(prev => ({loading: false, data:res.data.result_list}))
         }).catch((error)=>{
-            setAccountType(prev => ({loading: false, data: []}))
+            setAccType(prev => ({loading: false, data: []}))
         })
     }
     // END OF FUNCTION TO GET ACCOUNT TYPES
@@ -114,43 +139,58 @@ function AddRecipient() {
             <div className="w-full mb-10 lg:mb-0">
                 <div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
                     <h2 className='my-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-semibold'>ADD BANK ACCOUNT</h2>
-                   <form className='add-recipient-info px-1 md:px-[50px] lg:px-[100px]' onSubmit={handleSubmit}>
+                    <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
+                        {(props)=>(
+                        <Form className='add-recipient-info px-1 md:px-[50px] lg:px-[100px]'>
                                 
                                 {/* inputs starts here */}
-                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                                {/* firstname */}
-                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>First Name <span className='text-red-500'>*</span></label>
+                                <div className="xl:flex xl:space-x-7 mb-6">
-                            <input className='w-full md:w-3/4 p-3 text-slate-500 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                    <div className="field w-full mb-6 xl:mb-0">
-                                value={inputs.firstname} 
+                                    <InputCom
-                                name='firstname' 
+                                        label="Firstname"
                                         type="text"
-                                placeholder='Account Firstname' 
+                                        name="firstname"
-                                required
+                                        placeholder="Account Firstname"
-                                onChange={handleChange}
+                                        value={props.values.firstname}
+                                        inputHandler={props.handleChange}
+                                        blurHandler={props.handleBlur}
                                     />
+                                    {(props.errors.firstname && props.touched.firstname) && <p className="text-sm text-red-500">{props.errors.firstname}</p>}
                                     </div>
 
-                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                                    {/* lastname */}
-                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Last Name <span className='text-red-500'>*</span></label>
+                                    <div className="field w-full">
-                            <input className='w-full md:w-3/4 p-3 text-slate-500 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                    <InputCom
-                                value={inputs.lastname} 
+                                        label="Lastname"
-                                name='lastname' 
                                         type="text"
-                                placeholder='Account Lastname' 
+                                        name="lastname"
-                                required
+                                        placeholder="Account Lastname"
-                                onChange={handleChange}
+                                        value={props.values.lastname}
+                                        inputHandler={props.handleChange}
+                                        blurHandler={props.handleBlur}
                                     />
+                                    {(props.errors.lastname && props.touched.lastname) && <p className="text-sm text-red-500">{props.errors.lastname}</p>}
+                                    </div>
                                 </div>
 
-                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                                
-                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Country <span className='text-red-500'>*</span></label>
+                                <div className="xl:flex xl:space-x-7 mb-6">
-                            <select className='mt-2 w-full text-slate-500 md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='country' onChange={handleChange}>
+                                    {/* country */}
-                                {countries.loading ?
+                                    <div className='add-recipient w-full mb-6 xl:mb-0'>
+                                        <label className='input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Country <span className='text-red-500'>*</span></label>
+                                        <select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' name='country' 
+                                        value={props.values.country}
+                                        onChange={props.handleChange}
+                                        onBlur={props.handleBlur}
+                                        >
+                                            {allCountries.loading ?
                                             <option className='text-slate-500 text-lg' value="">Loading...</option>
                                             :
-                                countries.data.length ?
+                                            allCountries.data.length ?
                                             <>
                                                 <option className='text-slate-500 text-lg' value="">Select...</option>
-                                    {countries.data.map((item, index)=>(
+                                                {allCountries.data.map((item, index)=>(
                                                     <option key={index} className='text-slate-500 text-lg' value={item[0]}>{item[1]}</option>
                                                 ))}
                                             </>
@@ -158,11 +198,17 @@ function AddRecipient() {
                                             <option className='text-slate-500 text-lg' value="">No Options Found! Try Again</option>
                                             }
                                         </select>
+                                        {(props.errors.country && props.touched.country) && <p className="text-sm text-red-500">{props.errors.country}</p>}
                                     </div>
                                     
-                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                                    {/* bank name */}
-                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Bank Name <span className='text-red-500'>*</span></label>
+                                    <div className='add-recipient w-full'>
-                            <select className='mt-2 w-full text-slate-500 md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='bank-name' onChange={handleChange}>
+                                        <label className='input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Bank Name <span className='text-red-500'>*</span></label>
+                                        <select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' name='bank' 
+                                        ovalue={props.values.bank}
+                                        onChange={props.handleChange}
+                                        onBlur={props.handleBlur}
+                                        >
                                         {bankName.loading ?
                                             <option className='text-slate-500 text-lg' value="">Loading...</option>
                                             :
@@ -177,42 +223,56 @@ function AddRecipient() {
                                             <option className='text-slate-500 text-lg' value="">No Options Found! Try Again</option>
                                             }
                                         </select>
+                                        {(props.errors.bank && props.touched.bank) && <p className="text-sm text-red-500">{props.errors.bank}</p>}
+                                    </div>
                                 </div>
 
-                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                                {/* ACCOUNT NUMBER */}
-                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Account Number <span className='text-red-500'>*</span></label>
+                                <div className="xl:flex xl:space-x-7 mb-6">
-                            <input className='w-full md:w-3/4 p-3 text-slate-500 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                    <div className="field w-full mb-6 xl:mb-0">
-                                value={inputs['account-number']} 
+                                    <InputCom
-                                name='account-number' 
+                                        label="Account Number"
                                         type="text"
-                                placeholder='Account No' 
+                                        name="accountNumber"
-                                required
+                                        placeholder="Account No"
-                                onChange={handleChange}
+                                        value={props.values.accountNumber}
+                                        inputHandler={props.handleChange}
+                                        blurHandler={props.handleBlur}
                                     />
+                                    {(props.errors.accountNumber && props.touched.accountNumber) && <p className="text-sm text-red-500">{props.errors.accountNumber}</p>}
                                     </div>
 
-                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                                    {/* REPEAT ACCT. NUMBER */}
-                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Repeat Account Number <span className='text-red-500'>*</span></label>
+                                    <div className="field w-full">
-                            <input className='w-full md:w-3/4 p-3 text-slate-500 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                    <InputCom
-                                value={inputs['repeat-account-number']} 
+                                        label="Repeat Account Number"
-                                name='repeat-account-number' 
                                         type="text"
-                                placeholder='Repeat Account No' 
+                                        name="repeatAccountNumber"
-                                required
+                                        placeholder="Repeat Account Number"
-                                onChange={handleChange}
+                                        value={props.values.repeatAccountNumber}
+                                        inputHandler={props.handleChange}
+                                        blurHandler={props.handleBlur}
                                     />
+                                    {(props.errors.repeatAccountNumber && props.touched.repeatAccountNumber) && <p className="text-sm text-red-500">{props.errors.repeatAccountNumber}</p>}
+                                    </div>
                                 </div>
 
-                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                                <div className="xl:flex xl:space-x-7 mb-6">
-                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Account type <span className='text-red-500'>*</span></label>
+                                    {/* Account Type */}
-                            <select className='mt-2 w-full text-slate-500 md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='account-type' onChange={handleChange}>
+                                    <div className='add-recipient w-full'>
-                            {accountType.loading ?
+                                        <label className='input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Account Type <span className='text-red-500'>*</span></label>
+                                        <select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' name='accountType' 
+                                        value={props.values.accountType}
+                                        onChange={props.handleChange}
+                                        onBlur={props.handleBlur}
+                                        >
+                                            {accType.loading ?
                                             <option className='text-slate-500 text-lg' value="">Loading...</option>
                                             :
-                                accountType.data.length ?
+                                            accType.data.length ?
                                             <>
                                                 <option className='text-slate-500 text-lg' value="">Select...</option>
-                                    {accountType.data.map((item, index)=>(
+                                                {accType.data.map((item, index)=>(
                                                     <option key={index} className='text-slate-500 text-lg' value={item.name}>{item.name}</option>
                                                 ))}
                                             </>
@@ -220,41 +280,51 @@ function AddRecipient() {
                                             <option className='text-slate-500 text-lg' value="">No Options Found! Try Again</option>
                                             }
                                         </select>
+                                        {(props.errors.accountType && props.touched.accountType) && <p className="text-sm text-red-500">{props.errors.accountType}</p>}
+                                    </div>
                                 </div>
 
-                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                                {/* state */}
-                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>State/Province <span className='text-red-500'>*</span></label>
+                                <div className="xl:flex xl:space-x-7 mb-6">
-                            <input className='w-full md:w-3/4 p-3 text-slate-500 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                    <div className="field w-full mb-6 xl:mb-0">
-                                value={inputs.state} 
+                                    <InputCom
-                                name='state' 
+                                        label="State"
                                         type="text"
-                                placeholder='State' 
+                                        name="state"
-                                required
+                                        placeholder="State/Province"
-                                onChange={handleChange}
+                                        value={props.values.state}
+                                        inputHandler={props.handleChange}
+                                        blurHandler={props.handleBlur}
                                     />
+                                    {(props.errors.state && props.touched.state) && <p className="text-sm text-red-500">{props.errors.state}</p>}
                                     </div>
 
-                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                                    {/* city */}
-                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>City <span className='text-red-500'>*</span></label>
+                                    <div className="field w-full">
-                            <input className='w-full md:w-3/4 p-3 text-slate-500 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                    <InputCom
-                                value={inputs.city} 
+                                        label="City"
-                                name='city' 
                                         type="text"
-                                placeholder='City' 
+                                        name="city"
-                                required
+                                        placeholder="City"
-                                onChange={handleChange}
+                                        value={props.values.city}
+                                        inputHandler={props.handleChange}
+                                        blurHandler={props.handleBlur}
                                     />
+                                    {(props.errors.city && props.touched.city) && <p className="text-sm text-red-500">{props.errors.city}</p>}
+                                    </div>
                                 </div>
 
                                 {/* end of inputs starts here */}
 
                                 <div className='add-recipient-btn flex justify-end items-center py-4'>
-                            <button className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md flex items-center space-x-1'>
+                                    <button type='submit' className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md flex items-center space-x-1'>
                                         <span className='pr-2'>ADD RECIPIENT</span>
                                         <Icons name="arrows" />
                                     </button>
                                 </div>
-                   </form>
+                        </Form>
+                        )}
+                   </Formik>
                 </div>
             </div>