confirm transfer page added

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

@@ -14,9 +14,7 @@ export default function InputCom({
   forgotPassword,
   onClick,
   disable,
-  blurHandler,
+  blurHandler
-  onMouseEnter,
-  onMouseLeave
 }) {
   const inputRef = useRef(null)
   // Entry Validation
@@ -92,7 +90,6 @@ export default function InputCom({
           ref={inputRef}
           readOnly={disable}
           onBlur={blurHandler}
-          onMouseLeave={onMouseLeave}
         />
         {iconName && (
           <div className="absolute right-6 bottom-[10px] z-10">

src/components/MyWallet/ConfirmTransfer.jsx

@@ -0,0 +1,134 @@
+import React, {useState} from 'react'
+import {useLocation, useNavigate} from 'react-router-dom'
+import RecentActivityTable from './WalletComponent/RecentActivityTable'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+import InputCom from '../Helpers/Inputs/InputCom'
+
+function ConfirmTransfer({payment, wallet}) {
+    const navigate = useNavigate()
+    
+    let {state} = useLocation()
+    // what happens if not state redirect user
+    if(!state){
+        navigate('../transfer-fund',{replace: true})
+    }
+
+    let [requestStatus, setRequestStatus] = useState({message: '', loading: false, status: false})
+
+    //FUNCTION TO HANDLE SUBMIT
+    const handleSubmit = () => {
+        // let [requestStatus, setRequestStatus] = useState({message: '', loading: true, status: false})
+
+        //valid inputs before submitting. Just for texting remove later
+     
+    }
+    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 bg-white dark:bg-dark-white rounded-2xl shadow">
+                    <div className='px-4 md:px-8 py-4'>
+                        {wallet.loading ?
+                            <LoadingSpinner size='8' color='sky-blue' />
+                            :
+                            wallet.data.length ? 
+                            <h2 className='my-4 text-slate-500 dark:text-white text-sm xl:text-xl 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 text-slate-500 dark:text-white text-sm xl:text-xl font-medium'>Opps! An Error Occured</h2>
+                            :
+                            <h2 className='my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium'>No Wallet Information Found!</h2>
+                        }
+                    </div>
+                    <hr />
+                   <div className='px-4 md:px-8 py-4 add-fund-info'>
+                        <h2 className='my-2 text-slate-900 dark:text-white text-sm xl:text-xl font-medium'>Confirm Withdraw to Account</h2>
+                        {/* AMOUNT */}
+                        <div className="field w-full mb-3">
+                            <InputCom
+                                label="Amount:"
+                                type="text"
+                                name="amount"
+                                value={state?.amount || ''}
+                                disable={true}
+                            />
+                        </div>
+
+                        {/* RECIPIENT ACC: */}
+                        <div className="field w-full mb-3">
+                            <InputCom
+                                label="Recipient Acc:"
+                                type="text"
+                                name="recipient"
+                                value={state?.details.recipient || ''}
+                                disable={true}
+                            />
+                        </div>
+
+                        {/* PROCESSING FEE: */}
+                        <div className="field w-full mb-3">
+                            <InputCom
+                                label="Processing Fee:"
+                                type="text"
+                                name="processingFee"
+                                value={state?.fee || ''}
+                                disable={true}
+                            />
+                        </div>
+
+                        {/* TOTAL */}
+                        <div className="field w-full mb-3">
+                            <InputCom
+                                label="Total"
+                                type="text"
+                                name="total"
+                                value={state?.total || ''}
+                                disable={true}
+                            />
+                        </div>
+
+                        {/* COMMENT/NOTE */}
+                        <div className="field w-full mb-3">
+                            <InputCom
+                                label="Comment/Note:"
+                                type="text"
+                                name="comment"
+                                value={state?.comment || ''}
+                                disable={true}
+                            />
+                        </div>
+                   </div>
+
+                   
+                    <hr />
+                    <div className='px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center'>
+                        {requestStatus.loading ? 
+                        <LoadingSpinner size='8' color='sky-blue' />
+                        :
+                        <button onClick={handleSubmit} className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Transfer</button>
+                        }
+                    </div>
+                </div>
+            </div>
+    
+            <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                <div className="wallet w-full px-4 md:px-8 py-4 h-full max-h-[800px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                    <h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
+                    <p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
+                    {payment.loading ?
+                    <LoadingSpinner size='16' color='sky-blue' />
+                    :
+                    <RecentActivityTable  payment={payment}/>
+                    }
+                </div>
+            </div>
+        </div>
+      )
+}
+
+export default ConfirmTransfer

src/components/MyWallet/TransferFund.jsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import RecentActivityTable from './WalletComponent/RecentActivityTable'
 import LoadingSpinner from '../Spinners/LoadingSpinner'
 import InputCom from '../Helpers/Inputs/InputCom'
@@ -16,22 +16,26 @@ const validationSchema = Yup.object().shape({
     .typeError("you must specify a number")
     .min(1, 'Amount must be greater than 0')
     .required('Amount is required'),
-    recipient: Yup.string()
+    recipientID: Yup.string()
-      .min(3, 'Minimum 3 characters')
+      .min(1, 'Minimum 1 characters')
       .max(50, 'Maximum 50 characters')
       .required('Recipient is required'),
   })
   
   const initialValues = {
     amount: '',
-    recipient: '',
+    recipientID: '',
     comment: '',
   }
 
 function TransferFund({payment, wallet}) {
-    const apiCall = new usersService()
+    const apiCall = new usersService() // API CLASS CALL
 
-    let [recepients, setRecipients] = useState({ // FOR COUPON HISTORY
+    const navigate = useNavigate()
+
+    let [requestStatus, setRequestStatus] = useState(false)
+
+    let [recipients, setRecipients] = useState({ // FOR COUPON HISTORY
         loading: true,
         data: [],
         error: false
@@ -70,12 +74,15 @@ function TransferFund({payment, wallet}) {
 
 
     //FUNCTION TO HANDLE SUBMIT
-    const handleSubmit = () => {
+    const handleSubmit = (values, helpers) => {
-        // setRequestStatus({message: '', loading: true, status: false})
+        setRequestStatus(true)
-        let reqData = {}
+        let recipientDetails = recipients.data?.filter(item => item.recipient_id == values.recipientID)
-
+        let stateData = {...values, ...sendMoneyFee, details:{...recipientDetails[0]}}
-        // MAKE API CALL
 
+        setTimeout(()=>{
+            setRequestStatus(false)
+            navigate('confirm-transfer', {state: stateData})
+        }, 1000)
     }
 
     useEffect(()=>{
@@ -116,8 +123,11 @@ function TransferFund({payment, wallet}) {
                                                 placeholder='0'
                                                 value={props.values.amount}
                                                 inputHandler={props.handleChange}
-                                                blurHandler={props.handleBlur}
+                                                blurHandler={(e)=>{
-                                                onMouseLeave={(e)=>{getSendMoneyFee(e)}}
+                                                    getSendMoneyFee(e)
+                                                    props.handleBlur
+                                                }}
+                                                // onMouseLeave={(e)=>{getSendMoneyFee(e)}}
                                             />
                                             {(props.errors.amount && props.touched.amount) && <p className="text-sm text-red-500">{props.errors.amount}</p>}
                                         </div>
@@ -155,19 +165,19 @@ function TransferFund({payment, wallet}) {
                                                     </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}>
+                                                <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.recipientID} name='recipientID' onChange={props.handleChange} onBlur={props.handleBlur}>
-                                                    {recepients.loading ?
+                                                    {recipients.loading ?
                                                     <option className='text-slate-500 text-lg' value="">Loading...</option>
                                                     :
-                                                    recepients.data.length ?
+                                                    recipients.data.length ?
                                                     <> 
                                                     <option className='text-slate-500 text-lg' value="">Select...</option>
-                                                    {recepients.data.map((item, index)=>(
+                                                    {recipients.data.map((item, index)=>(
-                                                        <option key={index} value={item.account_no} className='text-slate-500 text-lg'>{item.recipient}</option>
+                                                        <option key={index} value={item.recipient_id} className='text-slate-500 text-lg'>{item.recipient}</option>
                                                     ))}
                                                     </>
                                                     :
-                                                    recepients.error ?
+                                                    recipients.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>
@@ -175,7 +185,7 @@ function TransferFund({payment, wallet}) {
                                                 </select>
                                             </div>
                                         </div>
-                                        {(props.errors.recipient && props.touched.recipient) && <p className="text-sm text-red-500">{props.errors.recipient}</p>}
+                                        {(props.errors.recipientID && props.touched.recipientID) && <p className="text-sm text-red-500">{props.errors.recipientID}</p>}
                                     </div>
 
                                     <div className="field w-full mb-6">
@@ -199,7 +209,11 @@ function TransferFund({payment, wallet}) {
                                     </div>
 
                                     <div className='transfer-fund-btn flex justify-end items-center py-4'>
+                                        {requestStatus ?
+                                        <LoadingSpinner size='8' color='sky-blue' />
+                                        :
                                         <button type='submit' className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
+                                        }
                                     </div>
                             </Form>
                         )

src/components/MyWallet/Wallet.jsx

@@ -8,6 +8,7 @@ import Balance from './Balance'
 import TransferFund from './TransferFund'
 import AddFund from './AddFund'
 import AddRecipient from './AddRecipient'
+import ConfirmTransfer from './ConfirmTransfer'
 
 function Wallet() {
   return (
@@ -113,8 +114,9 @@ const WalletRoutes = () => {
                 <Route path='add-fund' element={<AddFund 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 />} />
+                <Route path='transfer-fund/confirm-transfer' element={<ConfirmTransfer payment={paymentHistory} wallet={walletList} />} />
+                <Route path='*' element={<Navigate to='/' />} />
             </Route>
         </Routes>
     )