flutterwave payment integration

2023-05-03 02:40:47 +01:00
parent fabf07f2d1
commit 145b77dcf7
8 changed files with 185 additions and 16 deletions
@@ -0,0 +1,131 @@
+import React, {useState, useEffect} from 'react'
+import RecentActivityTable from './WalletComponent/RecentActivityTable'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+import InputCom from '../Helpers/Inputs/InputCom'
+import {toast} from 'react-toastify'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { useSelector } from 'react-redux'
+
+import usersService from '../../services/UsersService'
+
+import { FlutterWaveButton, closePaymentModal } from 'flutterwave-react-v3'
+
+
+function ConfirmAddFund({payment}) {
+
+    let {userDetails} = useSelector(state => state.userDetails) // TO GET LOGGEDIN USER DETAILS
+    
+    let [pageLoading, setPageLoading] = useState(true)
+
+    let [requestStatus, setRequestStatus] = useState({message: '', loading: false, status: false}) // STATE FOR API REQUEST
+
+    const apiURL = new usersService()
+    const navigate = useNavigate()
+
+    let {state} = useLocation()
+    
+
+    //FUNCTION TO HANDLE SUBMIT
+    const onSuccessPayment = () => {
+        setRequestStatus({message: '', loading: true, status: false})
+        let reqData = {amount: state?.account, currency: 'NGN'}
+        apiURL.startTopUp(reqData).then((res)=>{
+            if(res.data.internal_return < 0){
+                setRequestStatus({message: 'Could not finish transaction', loading: false, status: false})
+                toast.success('Opps! something went wrong')
+            }
+             // do something
+             setRequestStatus({message: 'Topup successful', loading: false, status: true})
+             toast.success('Account Topup was sucessful')
+            setTimeout(()=>{
+                navigate('/my-wallet', {replace: true})
+            }, 1000)
+        }).catch(err => {
+            // do something
+            setRequestStatus({message: 'Opps! An Error Occured', loading: false, status: false})
+            toast.success('Opps! something went wrong')
+        })
+    }
+
+    const config = {
+        public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY,
+        tx_ref: Date.now(),
+        amount: state?.amount,
+        currency: 'NGN',
+        payment_options: 'card,mobilemoney,ussd',
+        customer: {
+          email: `${userDetails.email}`,
+          phone_number: userDetails.phone,
+          name: `${userDetails.lastname} ${userDetails.firstname}`
+        },
+        customizations: {
+          title: 'WrenchBoard',
+          description: 'Topup Payment',
+          logo: 'https://st2.depositphotos.com/4403291/7418/v/450/depositphotos_74189661-stock-illustration-online-shop-log.jpg',
+        },
+      };
+
+    const fwConfig = {
+        ...config,
+        text: 'Proceed',
+        callback: (response) => {
+          onSuccessPayment()
+          closePaymentModal() // this will close the modal programmatically
+        },
+        onClose: () => {},
+      };
+
+    useEffect(()=>{
+        // what happens if not state redirect user
+        if(!state){
+            navigate('../add-fund',{replace: true})
+        }else{
+            setPageLoading(false)
+        }
+    },[])
+
+    return (
+        <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+            {pageLoading ?
+            <LoadingSpinner size='8' color='sky-blue' />
+            :
+            <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">
+                    <h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Confirm Add Fund To Account</h2>
+                    <hr />
+                   <div className='px-4 md:px-8 py-4 add-fund-info'>
+                        <div className="field w-full mb-3">
+                            <InputCom
+                                label="Amount (Naira):"
+                                type="text"
+                                name="amount"
+                                value={state.amount || ''}
+                                disable={true}
+                            />
+                        </div>
+                    </div>
+
+                    <hr />
+                    <div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
+                        <FlutterWaveButton {...fwConfig} className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md' />
+                    </div>
+                </div>
+            </div>
+            }
+    
+            <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                <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-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 ConfirmAddFund