Merge branch 'master' into withdraw_steps

src/components/MyWallet/TransferFund.jsx

@@ -1,19 +1,58 @@
-import React, {useState} from 'react'
+import React, {useEffect, useState} from 'react'
 import { Link } from 'react-router-dom'
 import RecentActivityTable from './WalletComponent/RecentActivityTable'
 import LoadingSpinner from '../Spinners/LoadingSpinner'
 
-function TransferFund({payment}) {
+import usersService from '../../services/UsersService'
+
+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
 
     //STATE FOR CONTROLLED INPUTS
     let [inputs, setInputs] = useState({
         amount: '0',
-        fee: '0',
         recipient: '',
-        total: '0',
         comment: ''
     })
 
+    //FUNCTION TO GET RECIPIENT LIST
+    const getRecipients = ()=>{
+        apiCall.getRecipient().then((res)=>{
+            if(res.data.internal_return < 0){ // success but no data
+                setRecipients(prev => ({...prev, loading: false}))
+                return
+            }
+            setRecipients(prev => ({...prev, loading: false, data: res.data.result_list}))
+        }).catch((error)=>{
+            setRecipients(prev => ({...prev, loading: false, error: true}))
+        })
+    }
+
+    //FUNCTION TO GET SEND MONEY FEE
+    const getSendMoneyFee = ()=>{
+        let {amount} = inputs
+        if(Number(amount) <= 0 || amount=='' || isNaN(amount)){
+            setSendMoneyFee({fee: 0, total: 0})
+            return
+        }
+        apiCall.getSendMoneyFee(Number(amount)).then((res)=>{
+            setSendMoneyFee({fee: res.data.processing_fee, total: res.data.total_amount})
+        }).catch((error)=>{
+            setSendMoneyFee({fee: 0, total: 0})
+        })
+    }
+
+
     // FUNCTION TO HANDLE INPUT CHANGE
     const handleChange = ({target:{name, value}}) => {
         setInputs(prev => ({...prev, [name]:value}))
@@ -23,22 +62,41 @@ function TransferFund({payment}) {
     const handleSubmit = (e) => {
         e.preventDefault();
 
-        //valid inputs before submitting. Just for texting remove later
+        //valid inputs before submitting. Just for texting remove later. check amoutn to be number
     
         setInputs({
             amount: '0',
-            fee: '0',
             recipient: '',
-            total: '0',
             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'>
+                   <form className='transfer-fund-info' onSubmit={handleSubmit}>
-                        <h2 className='my-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Withdraw from Naira Wallet : &#8358;0.00</h2>
+                        {wallet.loading ?
+                        <LoadingSpinner size='8' color='sky-blue' />
+                        :
+                        wallet.data.length ? 
+                        <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'){
+                                return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*1).toFixed(2)}`
+                            }
+                        })}
+                        </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>
+                        :
+                        <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>
@@ -49,31 +107,33 @@ function TransferFund({payment}) {
                                     placeholder='Amount' 
                                     required
                                     onChange={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 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                <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={inputs.fee} 
+                                    value={sendMoneyFee.fee} 
                                     name='fee' 
                                     type="text" 
                                     placeholder='Fee' 
                                     required
-                                    onChange={handleChange}
+                                    disabled
                                     />
                             </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'>Amount <span className='text-red-500'>*</span></label>
+                                <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 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                <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={inputs.total} 
+                                    value={sendMoneyFee.total} 
                                     name='total' 
                                     type="text" 
                                     placeholder='Total' 
                                     required
-                                    onChange={handleChange}
+                                    disabled
                                     />
                             </div>
                         </div>
@@ -87,8 +147,23 @@ function TransferFund({payment}) {
                                     </label>
                                     <Link to='add-recipient' className='mx-1 text-base text-white p-3 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' name='recipient' onChange={handleChange}>
+                                <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}>
-                                    <option className='text-slate-500 text-lg' value="">Select...</option>
+                                    {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>
@@ -108,7 +183,7 @@ function TransferFund({payment}) {
                         </div>
 
                         <div className='transfer-fund-btn flex justify-end items-center py-4'>
-                            <button onClick={handleSubmit} className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
+                            <button className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
                         </div>
                    </form>
                 </div>
@@ -118,22 +193,6 @@ function TransferFund({payment}) {
                 <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">
                     <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>
-                    {/* <table className="wallet-activity w-full table-auto border-collapse text-left">
-                        <thead className='border-b-2'>
-                            <tr className='text-slate-600'>
-                            <th className="py-3">Date</th>
-                            <th className="py-3">Recipient</th>
-                            <th className="py-3">Amount/FeeConf/Status</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr className='text-slate-500'>
-                                <td className="py-3">Item</td>
-                                <td className="py-3">Item</td>
-                                <td className="py-3">Item</td>
-                            </tr>
-                        </tbody>
-                    </table> */}
                     {payment.loading ?
                     <LoadingSpinner size='16' color='sky-blue' />
                     :

src/components/MyWallet/Wallet.jsx

@@ -55,7 +55,6 @@ const WalletRoutes = () => {
                 setWalletList(prev => ({...prev, loading: false}))
                 return
             }
-            console.log('wallet', res)
             setWalletList(prev => ({...prev, loading: false, data: res.data.result_list}))
         }).catch((error)=>{
             setWalletList(prev => ({...prev, loading: false, error: true}))
@@ -82,6 +81,7 @@ const WalletRoutes = () => {
                 setPurchaseHistory(prev => ({...prev, loading: false}))
                 return
             }
+            // console.log('purchase',res.data)
             setPurchaseHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
         }).catch((error)=>{
             setPurchaseHistory(prev => ({...prev, loading: false, error: true}))
@@ -111,7 +111,7 @@ const WalletRoutes = () => {
         <Routes>
             <Route element={<Wallet />}>
                 <Route path='add-fund' element={<AddFund payment={paymentHistory} />} />
-                <Route path='transfer-fund' element={<TransferFund payment={paymentHistory} />} />
+                <Route path='transfer-fund' element={<TransferFund payment={paymentHistory} wallet={walletList} />} />
                 <Route index element={<Balance payment={paymentHistory} purchase={purchaseHistory} coupon={couponHistory} wallet={walletList} />} />
                 <Route path='*' element={<Navigate to='/' />} />
                 <Route path='transfer-fund/add-recipient' element={<AddRecipient />} />

src/components/MyWallet/WalletComponent/PurchasesTable.jsx

@@ -16,10 +16,10 @@ function PurchasesTable({purchase}) {
         <tbody>
             {purchase.data.map((item, index) => (
             <tr key={index} className='text-slate-500'>
-                <td className="p-2">{item.trx_date}</td>
+                <td className="p-2">{item.added_date}</td>
-                <td className="p-2" dangerouslySetInnerHTML={{__html:item.recipient}}></td>
+                <td className="p-2">{item.confirmation}</td>
                 <td className="p-2">{item.amount}</td>
-                <td className="p-2">{item.status}</td>
+                <td className="p-2">{item.fee}</td>
             </tr>
             ))}
         </tbody>

src/services/UsersService.js

@@ -140,6 +140,31 @@ class usersService {
         return this.postAuxEnd("/couponpending", postData);
     }
 
+    // API FUNCTION TO GET COUPON HISTORY
+    getRecipient(){
+        var postData = {
+            uid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+            page:1,
+            limit :20,
+            action: 11175
+        };
+        return this.postAuxEnd("/recipients", postData);
+    }
+
+    // API FUNCTION TO GET SEND MONEY FEE
+    getSendMoneyFee(amount){
+        var postData = {
+            uid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+            amount,
+            action: 33025
+        };
+        return this.postAuxEnd("/sendmoneyfee", postData);
+    }
+
     // API FUNCTION TO GET COUPON HISTORY
     getCouponHx(){
         var postData = {