force page to reload after successful transaction

.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
 

.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
 

.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
 

package.json

@@ -14,16 +14,16 @@
     "cors": "^2.8.5",
     "faker": "^6.6.6",
     "formik": "^2.2.9",
-    "react": "^18.0.0",
     "react-chartjs-2": "^4.1.0",
     "react-countup": "^6.2.0",
-    "react-dom": "^18.0.0",
-    "react-lottie": "^1.2.3",
-    "react-redux": "^8.0.2",
     "react-router-dom": "^6.0.2",
-    "react-scripts": "5.0.0",
     "react-slick": "^0.29.0",
     "react-toastify": "^9.0.1",
+    "flutterwave-react-v3": "^1.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.5",
+    "react-scripts": "5.0.1",
     "redux": "^4.2.0",
     "slick-carousel": "^1.8.1",
     "web-vitals": "^1.0.1",

src/components/FourZeroFour/index.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Lottie from "react-lottie";
+// import Lottie from "react-lottie";
 import { useNavigate } from "react-router-dom";
 import * as animationData from "../../assets/images/Lotties/77618-website-404-error-animation.json";
 
@@ -16,7 +16,7 @@ export default function FourZeroFour() {
   return (
     <div className="flex justify-center items-center w-full h-screen bg-[#232247]">
       <div>
-        <Lottie options={defaultOptions} width={600} height={600} />
+        {/* <Lottie options={defaultOptions} width={600} height={600} /> */}
         <div className="flex justify-center">
           <button
             onClick={() => navigate(-1)}

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
+    const navigate = useNavigate()
-    let [inputs, setInputs] = useState('0')
+
+    //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) => {
+    const handleSubmit = () => {
-        e.preventDefault();
+        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
+        }
 
-        setInputs('')
+        const stateData = {amount: Number(input)}
+        navigate('confirm-add-fund', {state: stateData})
+     
+        setInput('')
     }
     return (
         <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
@@ -30,7 +45,7 @@ function AddFund({payment}) {
                         <div className='md:flex items-center'>
                             <label className='w-full md:w-2/4 text-slate-600 text-lg'>Amount(Naira) <span className='text-red-500'>*</span></label>
                             <input className='w-full md:w-2/4 p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
-                                value={inputs} 
+                                value={input} 
                                 name='amount' 
                                 type="text" 
                                 placeholder='Amount' 
@@ -38,6 +53,7 @@ function AddFund({payment}) {
                                 onChange={handleChange}
                                 />
                         </div>
+                        {inputError && <p className='text-base text-red-500'>{inputError}</p>}
                    </form>
                         <hr />
                         <div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>

src/components/MyWallet/AddRecipient.jsx

@@ -108,7 +108,7 @@ function AddRecipient() {
             }
             // setRequestStatus({message: 'Recipient Added Successfully!', loading: false, status: true})
             toast.success("Recipient Added Successfully!");
-            setTimeout(()=>{navigate('../transfer-fund',{replace:true})},1000)
+            setTimeout(()=>{navigate('/my-wallet/transfer-fund',{replace:true})},1000)
         }).catch((error)=>{
             setRequestStatus({message: 'Opps! an error occured! Try again later', loading: false, status: false})
         })    

src/components/MyWallet/ConfirmAddFund.jsx

@@ -0,0 +1,132 @@
+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})
+                window.location.reload(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('/my-wallet/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

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)
@@ -37,7 +34,8 @@ function ConfirmTransfer({payment, wallet}) {
             setRequestStatus({message: 'transfer successful', loading: false, status: true})
             toast.success('Transfer sucessful')
             setTimeout(()=>{
-                navigate('/', {replace: true})
+                navigate('/my-wallet', {replace: true})
+                window.location.reload(true)
             }, 1000)
         }).catch(error=>{
             setRequestStatus({message: 'Opps! something went wrong! Try Again', loading: false, status: false})
@@ -45,7 +43,12 @@ function ConfirmTransfer({payment, wallet}) {
     }
 
     useEffect(()=>{
-        setPageLoading(false)
+        // what happens if not state redirect user
+        if(!state){
+            navigate('/my-wallet/transfer-fund',{replace: true})
+        }else{
+            setPageLoading(false)
+        }
     },[])
     return (
         <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">

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 = () => {
         <Routes>
             <Route element={<Wallet />}>
                 <Route path='add-fund' element={<AddFund payment={paymentHistory} />} />
+                <Route path='add-fund/confirm-add-fund' element={<ConfirmAddFund 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='transfer-fund/add-recipient' element={<AddRecipient />} />

src/components/Settings/Tabs/PersonalInfoTab.jsx

@@ -4,6 +4,7 @@ import InputCom from "../../Helpers/Inputs/InputCom";
 import {Link, useNavigate} from 'react-router-dom'
 import usersService from "../../../services/UsersService";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import { useSelector } from "react-redux";
 
 import {toast} from 'react-toastify'
 
@@ -34,14 +35,6 @@ const validationSchema = Yup.object().shape({
     .required('State is required'),
 })
 
-const initialValues = {
-  firstname: '',
-  lastname: '',
-  state: '',
-  city: '',
-  email: ''
-}
-
 export default function PersonalInfoTab({
   datas,
   frstNmeHndlr,
@@ -57,13 +50,23 @@ export default function PersonalInfoTab({
   coverImgChangHandler,
 }) {
 
+  let {userDetails} = useSelector((state) => state.userDetails)
+  
   const apiCall = new usersService()
+
   let navigate = useNavigate()
 
   let [togglePromotion, setTogglePromotion] = useState(false)
 
+  const initialValues = {
+    firstname: userDetails?.firstname,
+    lastname: userDetails?.lastname,
+    state: userDetails?.state,
+    city: userDetails?.city,
+    email: userDetails?.email
+  }
+
   let [profile, setProfile] = useState({ // state for requesting from load profile API
-    data: [],
     loading: true,
     status: false
   })
@@ -74,55 +77,27 @@ export default function PersonalInfoTab({
     status: false
   })
 
-  let [inputs, setInputs] = useState({ // State for input fields
-    firstname: '',
-    lastname: '',
-    state: '',
-    city: '',
-    email: ''
-  })
-
-  // const handleChange = ({target:{name, value}}) => {
-  //   setInputs(prev => ({...prev, [name]:value}))
-  // }
-
   const handleUpdateUser = (values, helpers)=> {
     setRequestState({message: '', loading: true, status: false})
     
-    apiCall.updateProfile(values).then((res)=>{
+    apiCall.updateProfile(values).then((res)=>{ // API CALL TO UPDATE USER DETAILS
       if(res.data.internal_return < 0){
         setRequestState({message: 'Profile Was unable to update', loading: false, status: false})
         return
       }
       // setRequestState({message: 'Profile update successfully', loading: false, status: true})
       toast.success("Update Successful");
-      setTimeout(()=>{navigate('/',{replace:true})},1000)
+      setTimeout(()=>{
+        navigate('/',{replace:true})
+        window.location.reload(true)
+      },1000)
     }).catch(error => {
       setRequestState({message: 'Opps! an error occurred. Try Agian', loading: false, status: false})
     })
   }
 
-  const loadProfile = ()=>{ // function to load user profile
-    apiCall.loadProfile().then((res)=>{
-      if(res.data.internal_return < 0){
-        setProfile(prev => ({...prev, loading: false, status: true}))
-        return
-      }
-      setProfile(prev => ({...prev, data: [res.data], loading: false, status: true}))
-      setInputs({
-        firstname: res.data.firstname,
-        lastname: res.data.lastname,
-        state: res.data.state,
-        city: res.data.city,
-        email: res.data.email
-      })
-    }).catch(error =>{
-      setProfile(prev => ({...prev, loading: false, status: false}))
-    })
-  }
-
   useEffect(()=>{
-    loadProfile() // loads user profile unto the page
+    setProfile({loading: false, status: true})
   },[])
 
   return (
@@ -135,14 +110,12 @@ export default function PersonalInfoTab({
       </div>
     :
       <div className="personal-info-tab w-full flex flex-col justify-between">
-        <Formik initialValues={inputs} validationSchema={validationSchema} onSubmit={handleUpdateUser}>
+        <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleUpdateUser}>
           {(props => {
             return (
             <Form>
-            {
+
-            profile.data.length ? 
+              <div className="flex flex-col-reverse sm:flex-row">
-            profile.data.map((item, index) => (
-              <div key={index} className="flex flex-col-reverse sm:flex-row">
                 <div className="flex-1 sm:mr-10">
                   <div className="fields w-full">
                     {/* inputs starts here */}
@@ -153,7 +126,7 @@ export default function PersonalInfoTab({
                         type="text"
                         name="username"
                         placeholder=""
-                        value={item.username}
+                        value={userDetails.username}
                         disable={true}
                       />
                     </div>
@@ -205,7 +178,7 @@ export default function PersonalInfoTab({
                         label="Country"
                         type="text"
                         name="country"
-                        value={item.country}
+                        value={userDetails.country}
                         disable={true}
                       />
                     </div>
@@ -324,41 +297,35 @@ export default function PersonalInfoTab({
                     </div>
                   </div>
                 </div>
-            </div>
+              </div>
-            ))
-            :
-            profile.status ?
-            <div className="py-3 text-slate-500">No User Information Found!</div>
-            :
-            <div className="py-3 text-slate-500">Opps! something went wrong. Try Again Later!</div>
-            }
-            <div className="content-footer w-full">
-              {requestStatus.message != '' && <p className={`text-center text-base ${requestStatus.status ? 'text-green-800' : 'text-red-600'}`}>{requestStatus.message}</p>}
-              <div className="w-full h-[120px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
-                <div className="flex items-center space-x-4 mr-9">
-                  <Link
-                    to='/'
-                    className="text-18 text-light-red tracking-wide "
-                  >
-                    <span className="border-b dark:border-[#5356fb29]  border-light-red">
-                      {" "}
-                      Cancel
-                    </span>
-                  </Link>
 
-                  {requestStatus.loading ? 
+              <div className="content-footer w-full">
-                  <LoadingSpinner size='8' color='sky-blue' />
+                {requestStatus.message != '' && <p className={`text-center text-base ${requestStatus.status ? 'text-green-800' : 'text-red-600'}`}>{requestStatus.message}</p>}
-                  :
+                <div className="w-full h-[120px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
-                  <button
+                  <div className="flex items-center space-x-4 mr-9">
-                  type="submit"
+                    <Link
-                  className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                      to='/'
-                  >
+                      className="text-18 text-light-red tracking-wide "
-                    Update Profile
+                    >
-                  </button>
+                      <span className="border-b dark:border-[#5356fb29]  border-light-red">
-                  }
+                        {" "}
+                        Cancel
+                      </span>
+                    </Link>
+
+                    {requestStatus.loading ? 
+                    <LoadingSpinner size='8' color='sky-blue' />
+                    :
+                    <button
+                    type="submit"
+                    className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                    >
+                      Update Profile
+                    </button>
+                    }
+                  </div>
                 </div>
               </div>
-            </div>
             </Form>
           )
         })}

src/middleware/AuthRoute.jsx

@@ -46,13 +46,10 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       setIsLogin({loading: false, status: false})
     })
   }
-  const getProfile = useCallback(()=>{
-    loadProfile() // API CALL TO GET USER PROFILE
-  }, [])
   
   useEffect(() => {
     if(!isLogin.status){
-      getProfile()
+      loadProfile() // LOADS USER PROFILE DETAILS AND CALLS DISPATCH UPDATEUSERDETAILS TO UPDATE USERDETAILS SLICE IN STORE
     }
 
     const checkInactivity = setInterval(() => {

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);