Add family acc

2023-05-09 11:59:49 +01:00
parent 872ba3e0cc
commit 4eee3a4683
19 changed files with 2056 additions and 1362 deletions
@@ -1,132 +1,156 @@
-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 React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { useLocation, useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import InputCom from "../Helpers/Inputs/InputCom";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import RecentActivityTable from "./WalletComponent/RecentActivityTable";

-import usersService from '../../services/UsersService'
+import usersService from "../../services/UsersService";

-import { FlutterWaveButton, closePaymentModal } from 'flutterwave-react-v3'
+import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";

+function ConfirmAddFund({ payment }) {
+  let { userDetails } = useSelector((state) => state.userDetails); // TO GET LOGGEDIN USER DETAILS

-function ConfirmAddFund({payment}) {
+  let [pageLoading, setPageLoading] = useState(true);

-    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

-    let [requestStatus, setRequestStatus] = useState({message: '', loading: false, status: false}) // STATE FOR API REQUEST
+  const apiURL = new usersService();
+  const navigate = useNavigate();

-    const apiURL = new usersService()
-    const navigate = useNavigate()
+  let { state } = useLocation();

-    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)
+  //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");
+      });
+  };

-    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>
+  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",
+    },
+  };

-                    <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>
+  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
+                  fieldClass="px-6"
+                  label="Amount (Naira):"
+                  type="text"
+                  name="amount"
+                  value={state.amount || ""}
+                  disable={true}
+                />
+              </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>
+
+            <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
+export default ConfirmAddFund;