diff --git a/src/components/MyWallet/VirtualCardAction.jsx b/src/components/MyWallet/VirtualCardAction.jsx new file mode 100644 index 0000000..6b3ae8c --- /dev/null +++ b/src/components/MyWallet/VirtualCardAction.jsx @@ -0,0 +1,60 @@ +import React, { useEffect, useState } from "react"; +import usersService from "../../services/UsersService"; +import ConfirmNairaWithdraw from "./Popup/ConfirmNairaWithdraw"; +import NairaWithdraw from "./Popup/NairaWithdraw"; +import ViewVirtualCardPopout from "./walletvirtual/ViewVirtualCardPopout"; +import WalletExtraActionBtn from "./WalletExtraActionBtn"; + +function VirtualCardAction({ walletItem, payment }) { + + // virtual add card popout + const [popup, setPopup] = useState({ show: false, name: '', data: {} }); + + /*OPENS the virtual add card popout*/ + const openPopUp = (name, value) => { + setPopup({ + show: true, + name: name, + data: { ...value }, + }); + }; + + /*Closes the virtual add card popout*/ + const closePopUp = () => { + setPopup({ show: false, name: '', data: {} }); + // dispatch(tableReload({ type: "WALLETTABLE" })); + }; + + return ( +
+ + {/* EXTRA ACTIONS BTN */} +
+ +
+ + {/* VIRTUAL CARD POPOUT */} + {(popup.show && popup.name=='view_card') && ( + + )} + +
+ ); +} + +export default VirtualCardAction; diff --git a/src/components/MyWallet/WalletBox.jsx b/src/components/MyWallet/WalletBox.jsx index c0dc6e3..7aa1972 100644 --- a/src/components/MyWallet/WalletBox.jsx +++ b/src/components/MyWallet/WalletBox.jsx @@ -1,7 +1,6 @@ -import { useSelector } from "react-redux"; import LoadingSpinner from "../Spinners/LoadingSpinner"; import WalletItemCard from "./WalletItemCard"; -import WalletItemCardVirtual from './walletvirtual/WalletItemCardVirtual' +import WalletItemCardVirtual from './walletvirtual/WalletItemCardVirtual'; /** * Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object. diff --git a/src/components/MyWallet/WalletItemCard.jsx b/src/components/MyWallet/WalletItemCard.jsx index 6f639dc..871de2b 100644 --- a/src/components/MyWallet/WalletItemCard.jsx +++ b/src/components/MyWallet/WalletItemCard.jsx @@ -1,11 +1,11 @@ import React, { useState } from "react"; -import { useDispatch, useSelector } from "react-redux"; +import { useDispatch } from "react-redux"; // import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg"; -import localImgLoad from "../../lib/localImgLoad"; import { tableReload } from "../../store/TableReloads"; import { PriceFormatter } from "../Helpers/PriceFormatter"; import CreditPopup from "./Popup/CreditPopup"; import WalletAction from "./WalletAction"; +import VirtualCardAction from "./VirtualCardAction"; /** * Renders a card displaying information about a wallet item. @@ -59,7 +59,7 @@ export default function WalletItemCard({ walletItem, payment, countries }) { */}
-

+

Current Balance

{walletItem?.brand && walletItem?.card_last4 ? // FOR VIRTUAL CARD NUMBER ELSE WALLET BALANCE DISPLAY @@ -80,7 +80,7 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
- {walletItem.escrow > 0 ? + {walletItem.escrow > 0 & (!walletItem?.brand && !walletItem?.card_last4 ) ?

HOLDINGS :{" "} @@ -98,6 +98,7 @@ export default function WalletItemCard({ walletItem, payment, countries }) { null } + {(!walletItem?.brand || !walletItem?.card_last4) ?

+ : +
+
+ +
+ } +
{creditPopup.show && ( diff --git a/src/components/MyWallet/walletvirtual/ViewVirtualCardPopout.jsx b/src/components/MyWallet/walletvirtual/ViewVirtualCardPopout.jsx new file mode 100644 index 0000000..0d10fb8 --- /dev/null +++ b/src/components/MyWallet/walletvirtual/ViewVirtualCardPopout.jsx @@ -0,0 +1,221 @@ +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, "Invalid") + .max(11, "Invalid") + .required("Required"), + address: Yup.string() + .min(5, "Min 3 characters") + .max(50, "Max 25 characters") + .required("Required"), + city: Yup.string() + .min(2, "Min 3 characters") + .max(25, "Max 25 characters") + .required("Required"), + state: Yup.string() + .required("Required"), + zipCode: Yup.string() + .min(1, "Min 3 characters") + .max(8, "Max 8 characters") + .required("Required"), + dob: Yup.string() + .required("Required"), + checked: Yup.bool() // use bool instead of boolean + .oneOf([true], "You must accept the terms and conditions") +}); + +const ViewVirtualCardPopout = ({ details, onClose, situation, walletItem }) => { + + const { userDetails } = useSelector((state) => state.userDetails); + + const countryCode = walletItem?.country + + const userApi = new usersService() + + const [requestStatus, setRequestStatus] = useState({loading: false, status:false, message: ''}) + + let initialValues = { + // initial values for formik + country: countryCode ? countryCode : '', + phone_number: '', + email: userDetails?.email, + firstname: userDetails?.firstname, + lastname: userDetails?.lastname, + birthYear: '', + birthMonth: '', + birthDay: '', + address: '', + city: userDetails?.city ? userDetails.city : '', + state: '', + zipCode: '', + dob: '', + checked: false + }; + + + const handleSubmit = (values) => { + let date = new Date(values.dob) + const reqData = { + request_type: '100', + address: values.address, + city: values.city, + state: values.state, + country: values.country, + postal_code: values.zipCode, + phone_number: values.phone_number, + // dob_day: values.birthDay, + // dob_month: values.birthMonth, + // dob_year: values.birthYear, + dob_day: Number(date.getDate()), + dob_month: Number(date.getMonth()) + 1, + dob_year: Number(date.getFullYear()), + dob: values.dob + } + // console.log('Values', reqData) + setRequestStatus({loading: true, status:false, message: ''}) + userApi.walletCardRequest(reqData).then(res => { + if(res?.data?.internal_return < 0){ + setRequestStatus({loading: false, status:false, message: 'Failed, try again'}) + setTimeout(()=>{ + setRequestStatus({loading: false, status:true, message: ''}) + },4000) + return + } + setRequestStatus({loading: false, status:true, message: 'Successful'}) + setTimeout(()=>{ + setRequestStatus({loading: false, status:true, message: ''}) + onClose() + },4000) + }).catch(err => { + console.log('ERR', err) + setRequestStatus({loading: false, status:false, message: 'Unable to complete'}) + setTimeout(()=>{ + setRequestStatus({loading: false, status:false, message: ''}) + },4000) + }) + } + + useEffect(()=>{ + // Get Country Api + console.log('ok') + },[]) + + return ( + + + {(props) => ( +
+
+
+

+ {walletItem?.description} +

+ +
+
+ {requestStatus.message && +
+

{requestStatus.message}

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