added validation to add recipient page

.eslintrc

@@ -1,59 +0,0 @@
-{
-  "extends": [
-    "airbnb",
-    "airbnb/hooks",
-    "eslint:recommended",
-    "prettier",
-    "plugin:jsx-a11y/recommended"
-  ],
-  "parser": "babel-eslint",
-  "parserOptions": {
-    "ecmaVersion": 8
-  },
-  "env": {
-    "browser": true,
-    "node": true,
-    "es6": true,
-    "jest": true
-  },
-  "rules": {
-    "no-plusplus": 0,
-    "import/no-dynamic-require": 0,
-    "global-require": 0,
-    "no-nested-ternary": 0,
-    "react/self-closing-comp": 0,
-    "react/no-unescaped-entities": 0,
-    "jsx-a11y/anchor-is-valid": 0,
-    "react/jsx-props-no-spreading": 0,
-    "jsx-eslint/eslint-plugin-jsx-a11y": 0,
-    "jsx-a11y/no-static-element-interactions": 0,
-    "jsx-a11y/label-has-associated-control": 0,
-    "jsx-a11y/no-noninteractive-element-interactions": 0,
-    "react/react-in-jsx-scope": 0,
-    "react-hooks/rules-of-hooks": "error",
-    "no-console": 0,
-    "react/state-in-constructor": 0,
-    "indent": 0,
-    "linebreak-style": 0,
-    "react/prop-types": 0,
-    "jsx-a11y/click-events-have-key-events": 0,
-    "react/jsx-filename-extension": [
-      1,
-      {
-        "extensions": [".js", ".jsx"]
-      }
-    ]
-    // "prettier/prettier": [
-    //     "error",
-    //     {
-    //         "trailingComma": "es5",
-    //         "singleQuote": true,
-    //         "printWidth": 100,
-    //         "tabWidth": 4,
-    //         "semi": true,
-    //         "endOfLine": "auto"
-    //     }
-    // ]
-  },
-  "plugins": ["prettier", "react", "react-hooks"]
-}

Dockerfile

@@ -26,7 +26,7 @@ COPY nginx.conf ./
 
 COPY run.sh ./
 
-RUN npm install
+RUN npm install --legacy-peer-deps
 
 # add app
 COPY . ./

docker-compose.yml

@@ -16,6 +16,7 @@ services:
     volumes:
       - ./:/usr/src/app
       - ./src/:/usr/src/app/src
+      - ./run.sh:/usr/src/app/run.sh
     extra_hosts:
       - backend.wrenchboard.api.live:10.10.33.15
       - backend.wrenchboard.api.test:10.10.33.15

package.json

@@ -33,8 +33,7 @@
     "start": "react-scripts start -e .env.development",
     "build": "react-scripts build -e .env.production",
     "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "lint": "yarn add -D prettier@2.4.1 && yarn add -D eslint@7.11.0 && yarn add -D babel-eslint@10.1.0 && npx install-peerdeps --dev eslint-config-airbnb@18.2.1 && yarn add -D eslint-config-prettier@8.3.0 eslint-plugin-prettier@4.0.0"
+    "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
@@ -53,20 +52,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "autoprefixer": "^10.4.5",
-    "babel-eslint": "10.1.0",
-    "eslint": "7.2.0",
-    "eslint-config-airbnb": "18.2.1",
-    "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "1.7.0",
-    "postcss": "^8.4.12",
-    "prettier": "2.4.1",
-    "tailwindcss": "^3.0.24"
   }
 }

run.sh

@@ -6,9 +6,11 @@ export NODE_ENV="${NODE_ENV:-development}"
 
 if [ $NODE_ENV == "development" ]; then
   # this runs webpack-dev-server with hot reloading
+  npm install --legacy-peer-deps
   npm start
 else
   # build the app and serve it via nginx
+  npm install --legacy-peer-deps
   npm run build
   nginx -g 'daemon off;' -c /usr/src/app/nginx.conf
   nginx -c /usr/src/app/nginx.conf

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) => {
-        e.preventDefault();
+    const handleSubmit = (values, helpers) => {
+        // 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: ''
-        })
+        //valid inputs before submitting. Just for texting remove later       
     }
 
     // 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
@@ -113,148 +138,193 @@ function AddRecipient() {
         <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
             <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}>
-                        
-                        {/* inputs starts here */}
-                        <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'>First Name <span className='text-red-500'>*</span></label>
-                            <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' 
-                                value={inputs.firstname} 
-                                name='firstname' 
-                                type="text" 
-                                placeholder='Account Firstname' 
-                                required
-                                onChange={handleChange}
-                                />
-                        </div>
+                    <h2 className='my-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-semibold'>ADD BANK ACCOUNT</h2>
+                    <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
+                        {(props)=>(
+                        <Form className='add-recipient-info px-1 md:px-[50px] lg:px-[100px]'>
+                                
+                                {/* inputs starts here */}
+                                {/* firstname */}
+                                <div className="xl:flex xl:space-x-7 mb-6">
+                                    <div className="field w-full mb-6 xl:mb-0">
+                                    <InputCom
+                                        label="Firstname"
+                                        type="text"
+                                        name="firstname"
+                                        placeholder="Account Firstname"
+                                        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'>
-                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Last Name <span className='text-red-500'>*</span></label>
-                            <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' 
-                                value={inputs.lastname} 
-                                name='lastname' 
-                                type="text" 
-                                placeholder='Account Lastname' 
-                                required
-                                onChange={handleChange}
-                                />
-                        </div>
+                                    {/* lastname */}
+                                    <div className="field w-full">
+                                    <InputCom
+                                        label="Lastname"
+                                        type="text"
+                                        name="lastname"
+                                        placeholder="Account Lastname"
+                                        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>
-                            <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}>
-                                {countries.loading ?
-                                <option className='text-slate-500 text-lg' value="">Loading...</option>
-                                :
-                                countries.data.length ?
-                                <>
-                                    <option className='text-slate-500 text-lg' value="">Select...</option>
-                                    {countries.data.map((item, index)=>(
-                                        <option key={index} className='text-slate-500 text-lg' value={item[0]}>{item[1]}</option>
-                                    ))}
-                                </>
-                                :
-                                <option className='text-slate-500 text-lg' value="">No Options Found! Try Again</option>
-                                }
-                            </select>
-                        </div>
+                                
+                                <div className="xl:flex xl:space-x-7 mb-6">
+                                    {/* country */}
+                                    <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>
+                                            :
+                                            allCountries.data.length ?
+                                            <>
+                                                <option className='text-slate-500 text-lg' value="">Select...</option>
+                                                {allCountries.data.map((item, index)=>(
+                                                    <option key={index} className='text-slate-500 text-lg' value={item[0]}>{item[1]}</option>
+                                                ))}
+                                            </>
+                                            :
+                                            <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>
+                                    
+                                    {/* bank name */}
+                                    <div className='add-recipient w-full'>
+                                        <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>
+                                            :
+                                            bankName.data.length ?
+                                            <>
+                                                <option className='text-slate-500 text-lg' value="">Select...</option>
+                                                {bankName.data.map((item, index)=>(
+                                                    <option key={index} className='text-slate-500 text-lg' value={item.name}>{item.name}</option>
+                                                ))}
+                                            </>
+                                            :
+                                            <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'>
-                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Bank Name <span className='text-red-500'>*</span></label>
-                            <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}>
-                            {bankName.loading ?
-                                <option className='text-slate-500 text-lg' value="">Loading...</option>
-                                :
-                                bankName.data.length ?
-                                <>
-                                    <option className='text-slate-500 text-lg' value="">Select...</option>
-                                    {bankName.data.map((item, index)=>(
-                                        <option key={index} className='text-slate-500 text-lg' value={item.name}>{item.name}</option>
-                                    ))}
-                                </>
-                                :
-                                <option className='text-slate-500 text-lg' value="">No Options Found! Try Again</option>
-                                }
-                            </select>
-                        </div>
+                                {/* ACCOUNT NUMBER */}
+                                <div className="xl:flex xl:space-x-7 mb-6">
+                                    <div className="field w-full mb-6 xl:mb-0">
+                                    <InputCom
+                                        label="Account Number"
+                                        type="text"
+                                        name="accountNumber"
+                                        placeholder="Account No"
+                                        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'>
-                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Account Number <span className='text-red-500'>*</span></label>
-                            <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' 
-                                value={inputs['account-number']} 
-                                name='account-number' 
-                                type="text" 
-                                placeholder='Account No' 
-                                required
-                                onChange={handleChange}
-                                />
-                        </div>
+                                    {/* REPEAT ACCT. NUMBER */}
+                                    <div className="field w-full">
+                                    <InputCom
+                                        label="Repeat Account Number"
+                                        type="text"
+                                        name="repeatAccountNumber"
+                                        placeholder="Repeat Account Number"
+                                        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'>
-                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Repeat Account Number <span className='text-red-500'>*</span></label>
-                            <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' 
-                                value={inputs['repeat-account-number']} 
-                                name='repeat-account-number' 
-                                type="text" 
-                                placeholder='Repeat Account No' 
-                                required
-                                onChange={handleChange}
-                                />
-                        </div>
+                                <div className="xl:flex xl:space-x-7 mb-6">
+                                    {/* Account Type */}
+                                    <div className='add-recipient w-full'>
+                                        <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>
+                                            :
+                                            accType.data.length ?
+                                            <>
+                                                <option className='text-slate-500 text-lg' value="">Select...</option>
+                                                {accType.data.map((item, index)=>(
+                                                    <option key={index} className='text-slate-500 text-lg' value={item.name}>{item.name}</option>
+                                                ))}
+                                            </>
+                                            :
+                                            <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'>
-                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Account type <span className='text-red-500'>*</span></label>
-                            <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}>
-                            {accountType.loading ?
-                                <option className='text-slate-500 text-lg' value="">Loading...</option>
-                                :
-                                accountType.data.length ?
-                                <>
-                                    <option className='text-slate-500 text-lg' value="">Select...</option>
-                                    {accountType.data.map((item, index)=>(
-                                        <option key={index} className='text-slate-500 text-lg' value={item.name}>{item.name}</option>
-                                    ))}
-                                </>
-                                :
-                                <option className='text-slate-500 text-lg' value="">No Options Found! Try Again</option>
-                                }
-                            </select>
-                        </div>
+                                {/* state */}
+                                <div className="xl:flex xl:space-x-7 mb-6">
+                                    <div className="field w-full mb-6 xl:mb-0">
+                                    <InputCom
+                                        label="State"
+                                        type="text"
+                                        name="state"
+                                        placeholder="State/Province"
+                                        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'>
-                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>State/Province <span className='text-red-500'>*</span></label>
-                            <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' 
-                                value={inputs.state} 
-                                name='state' 
-                                type="text" 
-                                placeholder='State' 
-                                required
-                                onChange={handleChange}
-                                />
-                        </div>
+                                    {/* city */}
+                                    <div className="field w-full">
+                                    <InputCom
+                                        label="City"
+                                        type="text"
+                                        name="city"
+                                        placeholder="City"
+                                        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>
 
-                        <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'>City <span className='text-red-500'>*</span></label>
-                            <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' 
-                                value={inputs.city} 
-                                name='city' 
-                                type="text" 
-                                placeholder='City' 
-                                required
-                                onChange={handleChange}
-                                />
-                        </div>
+                                {/* end of inputs starts here */}
 
-                        {/* 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'>
-                                <span className='pr-2'>ADD RECIPIENT</span>
-                                <Icons name="arrows" />
-                            </button>
-                        </div>
-                   </form>
+                                <div className='add-recipient-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 flex items-center space-x-1'>
+                                        <span className='pr-2'>ADD RECIPIENT</span>
+                                        <Icons name="arrows" />
+                                    </button>
+                                </div>
+                        </Form>
+                        )}
+                   </Formik>
                 </div>
             </div>