From e26330af9aca7c98e3c2d647908c65d675a537e1 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Thu, 27 Apr 2023 13:49:19 +0100
Subject: [PATCH] handling adding recipient done

---
 .../Helpers/Inputs/InputCom/index.jsx         |  4 +
 src/components/MyWallet/AddRecipient.jsx      | 55 +++++++++--
 src/components/MyWallet/TransferFund.jsx      | 98 ++++++++++---------
 src/services/UsersService.js                  | 11 +++
 4 files changed, 110 insertions(+), 58 deletions(-)

diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx
index 9dd8efc..1e1fc52 100644
--- a/src/components/Helpers/Inputs/InputCom/index.jsx
+++ b/src/components/Helpers/Inputs/InputCom/index.jsx
@@ -15,6 +15,8 @@ export default function InputCom({
   onClick,
   disable,
   blurHandler,
+  onMouseEnter,
+  onMouseLeave
 }) {
   return (
     <div className="input-com">
@@ -40,6 +42,8 @@ export default function InputCom({
           name={name}
           readOnly={disable}
           onBlur={blurHandler}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
         />
         {iconName && (
           <div className="absolute right-6 bottom-[10px] z-10">
diff --git a/src/components/MyWallet/AddRecipient.jsx b/src/components/MyWallet/AddRecipient.jsx
index 9d3752d..fb47d8d 100644
--- a/src/components/MyWallet/AddRecipient.jsx
+++ b/src/components/MyWallet/AddRecipient.jsx
@@ -1,9 +1,12 @@
 import React, {useEffect, useState} from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import Icons from '../Helpers/Icons'
 import usersService from '../../services/UsersService'
 import InputCom from '../Helpers/Inputs/InputCom'
 
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+import {toast} from 'react-toastify'
+
 import {Formik, Form} from 'formik'
 import * as Yup from 'yup'
 
@@ -34,7 +37,7 @@ const validationSchema = Yup.object().shape({
     .required('Repeat Account Number is required')
     .oneOf([Yup.ref('accountNumber'), null], 'Must match Account Number'),
     accountType: Yup.string()
-      .min(3, 'Minimum 3 characters')
+      .min(1, 'Minimum 3 characters')
       .max(25, 'Maximum 25 characters')
       .required('Account Type is required'),
     city: Yup.string()
@@ -63,6 +66,10 @@ function AddRecipient() {
 
     const apiURL = new usersService()
 
+    const navigate = useNavigate()
+
+    let [requestStatus, setRequestStatus] = useState({message: '', loading: false, status: false})
+
     let [allCountries, setAllCountries] = useState({ // STATE TO HOLD LIST OF COUNTRIES
         loading: true,
         data: []
@@ -78,14 +85,36 @@ function AddRecipient() {
         data: []
     })
 
-    //FUNCTION TO HANDLE SUBMIT
+    //FUNCTION TO HANDLE ADD RECIPIENT SUBMIT
     const handleSubmit = (values, helpers) => {
-        // setRequestState({message: '', loading: true, status: false})
-        console.log('working')
+        setRequestStatus({message: '', loading: true, status: false})
 
-        //valid inputs before submitting. Just for texting remove later       
+        let reqData = { //REQUEST DATA FOR API CALL
+            firstname: values.firstname,
+            lastname: values.lastname,
+            bank_code: values.bank,
+            account_no: values.accountNumber,
+            account_type: values.accountType,
+            country: values.country,
+            state: values.state,
+            city: values.city
+        }
+
+        //CALL TO ADD RECIPIENT API
+        apiURL.addRecipient(reqData).then((res)=>{
+            if(res.data.internal_return < 0){
+                setRequestStatus({message: 'could not add recipient, try again!', loading: false, status: true})
+                return
+            }
+            // setRequestStatus({message: 'Recipient Added Successfully!', loading: false, status: true})
+            toast.success("Recipient Added Successfully!");
+            setTimeout(()=>{navigate('../transfer-fund',{replace:true})},1000)
+        }).catch((error)=>{
+            setRequestStatus({message: 'Opps! an error occured! Try again later', loading: false, status: false})
+        })    
     }
 
+
     // FUNCTION TO GET COUNTRIES
     const getCountry = ()=> { 
         apiURL.getSignupCountryData().then((res)=>{
@@ -205,7 +234,7 @@ function AddRecipient() {
                                     <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}
+                                        value={props.values.bank}
                                         onChange={props.handleChange}
                                         onBlur={props.handleBlur}
                                         >
@@ -216,7 +245,7 @@ function AddRecipient() {
                                             <>
                                                 <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 key={index} className='text-slate-500 text-lg' value={item.code}>{item.name}</option>
                                                 ))}
                                             </>
                                             :
@@ -273,7 +302,7 @@ function AddRecipient() {
                                             <>
                                                 <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 key={index} className='text-slate-500 text-lg' value={item.value}>{item.name}</option>
                                                 ))}
                                             </>
                                             :
@@ -313,14 +342,20 @@ function AddRecipient() {
                                     {(props.errors.city && props.touched.city) && <p className="text-sm text-red-500">{props.errors.city}</p>}
                                     </div>
                                 </div>
-
                                 {/* end of inputs starts here */}
 
+                                {/* REQUEST ERROR DISPLAY */}
+                                {requestStatus.message && <p className='text-sm text-red-500'>{requestStatus.message}</p>}
+
                                 <div className='add-recipient-btn flex justify-end items-center py-4'>
+                                    {requestStatus.loading ? 
+                                    <LoadingSpinner size={6} color='sky-blue' />
+                                    :
                                     <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>
                         )}
diff --git a/src/components/MyWallet/TransferFund.jsx b/src/components/MyWallet/TransferFund.jsx
index 06c90dc..e38c05d 100644
--- a/src/components/MyWallet/TransferFund.jsx
+++ b/src/components/MyWallet/TransferFund.jsx
@@ -2,6 +2,7 @@ import React, {useEffect, useState} from 'react'
 import { Link } from 'react-router-dom'
 import RecentActivityTable from './WalletComponent/RecentActivityTable'
 import LoadingSpinner from '../Spinners/LoadingSpinner'
+import InputCom from '../Helpers/Inputs/InputCom'
 
 import usersService from '../../services/UsersService'
 
@@ -97,57 +98,53 @@ function TransferFund({payment, wallet}) {
                         :
                         <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='my-3 md:flex items-center justify-between space-x-2'>
-                            <div className='transfer-input w-full md:w-1/2'>
-                                <label className='w-full text-slate-600 text-lg'>Amount <span className='text-red-500'>*</span></label>
-                                <input className='w-full p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
-                                    value={inputs.amount} 
-                                    name='amount' 
-                                    type="text" 
-                                    placeholder='Amount' 
-                                    required
-                                    onChange={handleChange}
+                        <div className="xl:flex xl:space-x-7 mb-6">
+
+                            <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='transfer-input w-full md:w-1/2'>
-                                <label className='w-full text-slate-600 text-lg'>Fee <span className='text-red-500'>*</span></label>
-                                <input className='w-full p-3 text-lg text-right bg-slate-100 opacity-50 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
-                                    value={sendMoneyFee.fee} 
-                                    name='fee' 
-                                    type="text" 
-                                    placeholder='Fee' 
-                                    required
-                                    disabled
-                                    />
+                            
+                            <div className="field w-full">
+                                <InputCom
+                                    label="Fee"
+                                    type="text"
+                                    name="fee"
+                                    value={sendMoneyFee.fee}
+                                    disable={true}
+                                />
                             </div>
                         </div>
 
-                        <div className='my-3 md:flex items-center justify-end space-x-2'>
-                            <div className='transfer-input w-full md:w-1/2'>
-                                <label className='w-full text-slate-600 text-lg'>Total <span className='text-red-500'>*</span></label>
-                                <input className='w-full p-3 text-lg text-right bg-slate-100 opacity-50 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
-                                    value={sendMoneyFee.total} 
-                                    name='total' 
-                                    type="text" 
-                                    placeholder='Total' 
-                                    required
-                                    disabled
-                                    />
+                        <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'>
-                                    <label className='text-slate-600 text-lg'>Recipient 
+                                <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-3 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
+                                    <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='mt-2 w-full p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' value={inputs.recipient} name='recipient' onChange={handleChange}>
+                                <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>
                                      :
@@ -168,18 +165,23 @@ function TransferFund({payment, wallet}) {
                             </div>
                         </div>
 
-                        <div className='my-3 md:flex items-center'>
-                            <div className='transfer-input w-full'>
-                                <label className='w-full text-slate-600 text-lg'>Comment <span className='text-red-500'>*</span></label>
-                                <input className='w-full p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
-                                    value={inputs.comment} 
-                                    name='comment' 
-                                    type="text" 
-                                    placeholder='Comment' 
-                                    required
-                                    onChange={handleChange}
-                                    />
-                            </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={inputs.comment}
+                            onChange={handleChange}
+                            cols="30" 
+                            rows="2"
+                            />
                         </div>
 
                         <div className='transfer-fund-btn flex justify-end items-center py-4'>
diff --git a/src/services/UsersService.js b/src/services/UsersService.js
index 944a584..ec0be31 100644
--- a/src/services/UsersService.js
+++ b/src/services/UsersService.js
@@ -165,6 +165,17 @@ class usersService {
         return this.postAuxEnd("/recipients", postData);
     }
 
+    //END POINT CALL FOR UPDATE PROFILE
+    addRecipient(data){
+        var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        ...data
+        };
+        return this.postAuxEnd("/addrecipient", postData);
+    }
+
     // API FUNCTION TO GET SEND MONEY FEE
     getSendMoneyFee(amount){
         var postData = {