confirm transfer page added

2023-04-28 09:52:23 +01:00
parent 76621a87c5
commit 0bac836eb8
4 changed files with 172 additions and 25 deletions
@@ -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