diff --git a/.env b/.env index bb7488f..9cf6e84 100644 --- a/.env +++ b/.env @@ -18,11 +18,13 @@ REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user" #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser" REACT_APP_SESSION_EXPIRE_MINUTES=300000 -REACT_APP_SESSION_EXPIRE_CHECKER=300000 +REACT_APP_SESSION_EXPIRE_CHECKER=60000 REACT_APP_LOGIN_ERROR_TIMEOUT=7000 REACT_APP_SIGNUP_ERROR_TIMEOUT=7000 +REACT_APP_FLUTTERWAVE_APIKEY=FLWPUBK_TEST-54c90141b028789d671067bd72f781a9-X + # Had to change the error time to 3sec cause it took too long REACT_APP_RESET_START_ERROR_TIMEOUT=3000 diff --git a/.env.development b/.env.development index bb7488f..9cf6e84 100644 --- a/.env.development +++ b/.env.development @@ -18,11 +18,13 @@ REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user" #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser" REACT_APP_SESSION_EXPIRE_MINUTES=300000 -REACT_APP_SESSION_EXPIRE_CHECKER=300000 +REACT_APP_SESSION_EXPIRE_CHECKER=60000 REACT_APP_LOGIN_ERROR_TIMEOUT=7000 REACT_APP_SIGNUP_ERROR_TIMEOUT=7000 +REACT_APP_FLUTTERWAVE_APIKEY=FLWPUBK_TEST-54c90141b028789d671067bd72f781a9-X + # Had to change the error time to 3sec cause it took too long REACT_APP_RESET_START_ERROR_TIMEOUT=3000 diff --git a/.env.poduction b/.env.poduction index 43b895b..e20588e 100644 --- a/.env.poduction +++ b/.env.poduction @@ -18,11 +18,13 @@ REACT_APP_USERS_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/svs/user" #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser" REACT_APP_SESSION_EXPIRE_MINUTES=300000 -REACT_APP_SESSION_EXPIRE_CHECKER=300000 +REACT_APP_SESSION_EXPIRE_CHECKER=60000 REACT_APP_LOGIN_ERROR_TIMEOUT=7000 REACT_APP_SIGNUP_ERROR_TIMEOUT=7000 +REACT_APP_FLUTTERWAVE_APIKEY=FLWPUBK_TEST-54c90141b028789d671067bd72f781a9-X + # Had to change the error time to 3sec cause it took too long REACT_APP_RESET_START_ERROR_TIMEOUT=3000 diff --git a/src/components/MyWallet/AddFund.jsx b/src/components/MyWallet/AddFund.jsx index 8660c34..b0875a9 100644 --- a/src/components/MyWallet/AddFund.jsx +++ b/src/components/MyWallet/AddFund.jsx @@ -1,24 +1,39 @@ import React, {useState} from 'react' import RecentActivityTable from './WalletComponent/RecentActivityTable' import LoadingSpinner from '../Spinners/LoadingSpinner' +import { useNavigate } from 'react-router-dom' function AddFund({payment}) { - //STATE FOR CONTROLLED INPUTS - let [inputs, setInputs] = useState('0') + const navigate = useNavigate() + + //STATE FOR CONTROLLED INPUT + let [input, setInput] = useState('0') + + let [inputError, setInputError] = useState('') // FUNCTION TO HANDLE INPUT CHANGE const handleChange = ({target:{name, value}}) => { - setInputs(value) + setInput(value) } //FUNCTION TO HANDLE SUBMIT - const handleSubmit = (e) => { - e.preventDefault(); + const handleSubmit = () => { + setInputError('') + if(!input || input == '0'){ + setInputError('Please Enter Amount') + return + } - //valid inputs before submitting. Just for texting remove later + if(isNaN(input)){ + setInputError('Amount must be a Number') + return + } + + const stateData = {amount: Number(input)} + navigate('confirm-add-fund', {state: stateData}) - setInputs('') + setInput('') } return (
@@ -30,7 +45,7 @@ function AddFund({payment}) {
+ {inputError &&

{inputError}

}
diff --git a/src/components/MyWallet/ConfirmAddFund.jsx b/src/components/MyWallet/ConfirmAddFund.jsx new file mode 100644 index 0000000..8f45f30 --- /dev/null +++ b/src/components/MyWallet/ConfirmAddFund.jsx @@ -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 ( +
+ {pageLoading ? + + : +
+
+

Confirm Add Fund To Account

+
+
+
+ +
+
+ +
+
+ +
+
+
+ } + +
+
+

Recent Activity

+

Activity Report

+ {payment.loading ? + + : + + } +
+
+
+ ) +} + +export default ConfirmAddFund \ No newline at end of file diff --git a/src/components/MyWallet/ConfirmTransfer.jsx b/src/components/MyWallet/ConfirmTransfer.jsx index 1ce2289..a0ef9bd 100644 --- a/src/components/MyWallet/ConfirmTransfer.jsx +++ b/src/components/MyWallet/ConfirmTransfer.jsx @@ -13,10 +13,7 @@ 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}) let [pageLoading, setPageLoading] = useState(true) @@ -45,7 +42,12 @@ function ConfirmTransfer({payment, wallet}) { } useEffect(()=>{ - setPageLoading(false) + // what happens if not state redirect user + if(!state){ + navigate('../transfer-fund',{replace: true}) + }else{ + setPageLoading(false) + } },[]) return (
diff --git a/src/components/MyWallet/Wallet.jsx b/src/components/MyWallet/Wallet.jsx index 6f40c91..9b9cc16 100644 --- a/src/components/MyWallet/Wallet.jsx +++ b/src/components/MyWallet/Wallet.jsx @@ -9,6 +9,7 @@ import TransferFund from './TransferFund' import AddFund from './AddFund' import AddRecipient from './AddRecipient' import ConfirmTransfer from './ConfirmTransfer' +import ConfirmAddFund from './ConfirmAddFund' function Wallet() { return ( @@ -112,6 +113,7 @@ const WalletRoutes = () => { }> } /> + } /> } /> } /> } /> diff --git a/src/services/UsersService.js b/src/services/UsersService.js index ebf00df..fb28d26 100644 --- a/src/services/UsersService.js +++ b/src/services/UsersService.js @@ -279,6 +279,18 @@ class usersService { return this.postAuxEnd("/loadprofile", postData); } + //END POINT CALL FOR ACCOUNT TOP + startTopUp(post){ + var postData = { + uid: localStorage.getItem("uid"), + member_id: localStorage.getItem("member_id"), + sessionid: localStorage.getItem("session_token"), + action: 11062, + ...post + }; + return this.postAuxEnd("/starttopup", postData); + } + //END POINT CALL FOR SENDING REFERRAL MESSAGE sendReferralMsg(postData){ return this.postAuxEnd("/sendreferral", postData);