diff --git a/src/components/FamilyAcc/Tabs/wallet/Wallet.jsx b/src/components/FamilyAcc/Tabs/wallet/Wallet.jsx index 464e083..3b4f50d 100644 --- a/src/components/FamilyAcc/Tabs/wallet/Wallet.jsx +++ b/src/components/FamilyAcc/Tabs/wallet/Wallet.jsx @@ -5,6 +5,7 @@ import FamilyAddFundPopout from './FamilyAddFundPopout' function Wallet({wallet, familyData, setFamilyWalletReload}) { const [addFundPopout, setAddFundPopout] = useState({ show: false, data: {} }) + return (
currency-icon diff --git a/src/components/MyWallet/FamilyWalletBox.jsx b/src/components/MyWallet/FamilyWalletBox.jsx index 35ccb8c..6b8e126 100644 --- a/src/components/MyWallet/FamilyWalletBox.jsx +++ b/src/components/MyWallet/FamilyWalletBox.jsx @@ -3,6 +3,7 @@ import background from "../../assets/images/bg-sky-blue.jpg"; import { localImgLoad } from "../../lib"; import LoadingSpinner from "../Spinners/LoadingSpinner"; import FamilyWalletRedeemOptions from "./FamilyWalletRedeemOptions"; +import {PriceFormatter} from '../Helpers/PriceFormatter' /** * Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object. @@ -20,7 +21,7 @@ export default function FamilyWalletBox({ wallet, payment }) { const handleChangeWallet = ({ target: { name } }) => { // FUNCTION TO SWITCH WALLET IF USER HAS MORE THAN TWO WALLETS const currentWalletSelected = wallet?.data?.filter( - (item) => item.code == name + (item) => item.description == name ); setSelectedWallet(currentWalletSelected[0]); setActiveWalletBtn(name); @@ -33,7 +34,7 @@ export default function FamilyWalletBox({ wallet, payment }) { useEffect(() => { setSelectedWallet(wallet.data[0]); - setActiveWalletBtn(wallet?.data[0]?.code); + setActiveWalletBtn(wallet?.data[0]?.description); }, [wallet]); return ( @@ -54,13 +55,13 @@ export default function FamilyWalletBox({ wallet, payment }) { <> {wallet?.data?.length > 1 && (
- {wallet?.data?.map((item) => ( + {wallet?.data?.map((item, index) => (
)}
{/* image */} -
+ {/*
currency-icon +
*/} +
+

+ Current Balance +

+

+ {PriceFormatter( + selectedWallet?.amount / 100, + selectedWallet?.code, + undefined, + "text-[2rem]" + )} +

-

- Current Balance -

-

- {Formatter( - selectedWallet?.amount / 100, - selectedWallet?.code, - undefined, - "text-[2rem]" - )} -

) : ( diff --git a/src/components/MyWallet/WalletBox.jsx b/src/components/MyWallet/WalletBox.jsx index b9d611e..28343d5 100644 --- a/src/components/MyWallet/WalletBox.jsx +++ b/src/components/MyWallet/WalletBox.jsx @@ -24,8 +24,8 @@ export default function WalletBox({ wallet, payment, countries }) {
) : (
- { data.length > 0 && data.map((item) => ( -
+ { data.length > 0 && data.map((item, index) => ( +
{item.country ? : diff --git a/src/components/MyWallet/WalletHeader.jsx b/src/components/MyWallet/WalletHeader.jsx index d1cb728..8093c94 100644 --- a/src/components/MyWallet/WalletHeader.jsx +++ b/src/components/MyWallet/WalletHeader.jsx @@ -67,7 +67,7 @@ export default function WalletHeader(props) {
- + currency icon

diff --git a/src/components/MyWallet/walletvirtual/VirtualAddCardPopout.jsx b/src/components/MyWallet/walletvirtual/VirtualAddCardPopout.jsx index c5347de..68bc0f0 100644 --- a/src/components/MyWallet/walletvirtual/VirtualAddCardPopout.jsx +++ b/src/components/MyWallet/walletvirtual/VirtualAddCardPopout.jsx @@ -1,88 +1,495 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; +import { Form, Formik } from "formik"; +import * as Yup from "yup"; +import { useSelector } from "react-redux"; import ModalCom from "../../Helpers/ModalCom"; import LoadingSpinner from "../../Spinners/LoadingSpinner"; import CustomTimer from "../../countdown/CustomTimer"; +import InputCom from '../../Helpers/Inputs/InputCom' +import usersService from "../../../services/UsersService"; + + +const validationSchema = Yup.object().shape({ + + country: Yup.string() + .required("Required"), + phone_number: Yup.string() + .min(9, "Minimum 9 characters") + .max(20, "Maximum 25 characters") + .required("Required"), + birthYear: Yup.string() + .required("Required"), + birthMonth: Yup.string() + .required("Required"), + birthDay: Yup.string() + .required("Required"), + address: Yup.string() + .min(5, "Minimum 3 characters") + .max(50, "Maximum 25 characters") + .required("Required"), + city: Yup.string() + .min(2, "Minimum 3 characters") + .max(25, "Maximum 25 characters") + .required("Required"), + state: Yup.string() + .min(2, "Minimum 3 characters") + .max(25, "Maximum 25 characters") + .required("Required"), + zipCode: Yup.string() + .min(1, "Minimum 3 characters") + .max(10, "Maximum 25 characters") + .required("Required"), +}); const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => { - const [input, setInput] = useState(""); -console.log(walletItem) + + const { userDetails } = useSelector((state) => state.userDetails); + + const userApi = new usersService() + + const [requestStatus, setRequestStatus] = useState({loading: false, status:false, message: ''}) + + const [allCountries, setAllCountries] = useState({loading: true, data: []}) // VARIABLE TO HOLD COUNTRY LIST + + let initialValues = { + // initial values for formik + country: '', + phone_number: '', + email: userDetails?.email, + firstname: userDetails?.firstname, + lastname: userDetails?.lastname, + birthYear: '', + birthMonth: '', + birthDay: '', + address: '', + city: '', + state: '', + zipCode: '' + }; + + const handleSubmit = (values) => { + const reqData = { + name: values.firstname + ' ' + values.firstname, + email: values.email, + phone_number: values.phone_number, + status: 'active', + type: 'individual', + individual: { + first_name: values.firstname, + last_name: values.lastname, + dob: {day: values.birthDay, month: values.birthMonth, year: values.birthYear} + }, + billing:{ + address : { + line1: values.address, + city: values.city, + state: values.state, + postal_code: values.zipCode, + country: values.country + } + } + } + console.log('Values', reqData) + } + + useEffect(()=>{ + // Get Country Api + userApi.getSignupCountryData().then(res =>{ + if(!res?.data?.result_list){ + return setAllCountries({ loading: false, data: [] }); + } + setAllCountries({ loading: false, data: res?.data?.result_list }); + }).catch(err => { + setAllCountries({ loading: false, data: [] }); + console.log('err', err) + }) + },[]) + return ( -

-
-

- {walletItem?.description} -

- -
-
- {/*
-
-

Processing payment

-

Please do not refresh

- - + + {(props) => ( +
+
+
+

+ {walletItem?.description} +

+
-
*/} -
-
-
- +
+ {/* left part */} +
+
+
+ + +
+ +
+ +
+ + +
+
+

Date of Birth

+
+
+ + +
+
+ + +
+
+ + +
+
+
+
- + {/* right part */} +
+ + + {/* */} +
+ + +
+ + +
+
+
+
+ + + <> + {requestStatus.loading ? + + : + + } + +
+
-
-
+ + )} + ); }; export default VirtualAddCardPopout; + + +const day = new Array(31).fill(0).map((_,i) => i+1 ) + +const month = [ + {value: 0, name: 'January'}, + {value: 1, name: 'February'}, + {value: 2, name: 'March'}, + {value: 3, name: 'April'}, + {value: 4, name: 'May'}, + {value: 5, name: 'June'}, + {value: 6, name: 'July'}, + {value: 7, name: 'August'}, + {value: 8, name: 'September'}, + {value: 9, name: 'October'}, + {value: 10, name: 'November'}, + {value: 11, name: 'December'}, +] + +const date = new Date().getFullYear() + +const year = new Array(100).fill(0).map((_,i) => (date-2) - i+1 ) + +const state = [ + {value: 'abia', name: 'Abia'}, + {value: 'imo', name: 'Imo'}, + {value: 'anambra', name: 'Anambra'}, +] \ No newline at end of file