Compare commits
11 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
dc592f60db | ||
|
victorAnumudu
|
675ba2989e | ||
 ameye
|
b201224fd6 | ||
|
ameye
|
c24013eefd | ||
|
victorAnumudu
|
234f04ca8f | ||
|
Ebube
|
5f222a2d88 | ||
|
Ebube
|
258434a109 | ||
|
CHIEFSOFT\ameye
|
ed148612a7 | ||
|
ameye
|
2287fb5ebb | ||
|
ameye
|
ead7589c92 | ||
|
Ebube
|
51bb8fc421 |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
@@ -63,7 +63,7 @@ export default function InputCom({
|
||||
</span>
|
||||
)}
|
||||
{/* displays error is any */}
|
||||
{error && <span className="text-[12px] text-red-500">{error}</span>}
|
||||
{error && <span className="text-[12px] text-red-500 italic">{error}</span>}
|
||||
</label>
|
||||
)}
|
||||
{forgotPassword && (
|
||||
|
||||
@@ -11,37 +11,37 @@ import Icons from "../Helpers/Icons";
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
name: Yup.string()
|
||||
.min(3, "Minimum 3 characters")
|
||||
.max(50, "Maximum 50 characters")
|
||||
.required("Name is required"),
|
||||
.min(3, "3 chars min.")
|
||||
.max(50, "50 chars max.")
|
||||
.required("required"),
|
||||
cardNum: Yup.string()
|
||||
.min(3, "Minimum 3 characters")
|
||||
.max(25, "Maximum 25 characters")
|
||||
.required("Card Number is required"),
|
||||
.min(3, "3 chars min.")
|
||||
.max(25, "25 chars max.")
|
||||
.required("required"),
|
||||
code: Yup.string()
|
||||
.min(3, "Minimum 3 characters")
|
||||
.max(25, "Maximum 25 characters")
|
||||
.required("Postal Code is required"),
|
||||
.min(3, "3 chars min.")
|
||||
.max(25, "25 chars max.")
|
||||
.required("required"),
|
||||
state: Yup.string()
|
||||
.min(3, "Minimum 3 characters")
|
||||
.max(25, "Maximum 25 characters")
|
||||
.required("State is required"),
|
||||
.min(3, "3 chars min.")
|
||||
.max(25, "25 chars max.")
|
||||
.required("required"),
|
||||
address: Yup.string()
|
||||
.min(3, "Minimum 3 characters")
|
||||
.max(50, "Maximum 50 characters")
|
||||
.required("Address is required"),
|
||||
.min(3, "3 chars min.")
|
||||
.max(50, "50 chars max.")
|
||||
.required("required"),
|
||||
expirationYear: Yup.string()
|
||||
.min(4, "Minimum 4 characters")
|
||||
.max(4, "Maximum 4 characters")
|
||||
.required("Expiration Year is required"),
|
||||
.min(4, "4 chars min.")
|
||||
.max(4, "4 chars max.")
|
||||
.required("required"),
|
||||
expirationMonth: Yup.string()
|
||||
.min(1, "Minimum 1 characters")
|
||||
.max(2, "Maximum 2 characters")
|
||||
.required("Expiration Month is required"),
|
||||
.min(1, "1 chars min.")
|
||||
.max(2, "2 chars max.")
|
||||
.required("required"),
|
||||
cvv: Yup.string()
|
||||
.min(3, "Minimum 3 characters")
|
||||
.max(4, "Maximum 4 characters")
|
||||
.required("CVV Year is required"),
|
||||
.min(3, "3 chars min.")
|
||||
.max(4, "4 chars max.")
|
||||
.required("required"),
|
||||
});
|
||||
|
||||
const initialValues = {
|
||||
@@ -57,15 +57,14 @@ const initialValues = {
|
||||
|
||||
function AddFundDollars(props) {
|
||||
const navigate = useNavigate();
|
||||
let apiCall = new usersService();
|
||||
const apiCall = new usersService();
|
||||
|
||||
let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS
|
||||
const [tab, setTab] = useState("previous");
|
||||
const [loader, setLoader] = useState(false);
|
||||
const { userDetails } = useSelector((state) => state?.userDetails);
|
||||
let { firstname, lastname } = userDetails;
|
||||
let [prevCardDetails, setPrevCardDetails] = useState({}); // STATE TO HOLD PREVIOUS CARD SELECTED
|
||||
let [payListCards, setPayListCards] = useState({ loading: true, data: [] }); //USER PREVIOUS CARDS
|
||||
// const [payListCard, setPayListCard] = useState({ data: "" }); //USER PAYLIST
|
||||
const { firstname, lastname } = userDetails;
|
||||
const [prevCardDetails, setPrevCardDetails] = useState({});
|
||||
const [payListCards, setPayListCards] = useState({ loading: true, data: [] });
|
||||
|
||||
const handleInputChange = (event) => {
|
||||
const { name, value } = event.target;
|
||||
@@ -83,27 +82,20 @@ function AddFundDollars(props) {
|
||||
indexOfLastItem
|
||||
);
|
||||
|
||||
// FUNCTION TO SUBMIT
|
||||
const handleSubmit = (values, helpers) => {
|
||||
props.setInputError("");
|
||||
if (!props.input || props.input == "0") {
|
||||
if (!props.input || props.input === "0") {
|
||||
props.setInputError("Please Enter Amount");
|
||||
return setTimeout(() => {
|
||||
props.setInputError("");
|
||||
}, 5000);
|
||||
return;
|
||||
}
|
||||
|
||||
if (isNaN(props.input)) {
|
||||
props.setInputError("Amount must be a Number");
|
||||
return setTimeout(() => {
|
||||
props.setInputError("");
|
||||
}, 5000);
|
||||
return;
|
||||
}
|
||||
if (tab == "previous") {
|
||||
|
||||
if (tab === "previous") {
|
||||
if (!prevCardDetails) {
|
||||
// return setTimeout(() => {
|
||||
// props.setInputError("");
|
||||
// }, 5000);
|
||||
return;
|
||||
}
|
||||
setLoader(true);
|
||||
@@ -113,19 +105,18 @@ function AddFundDollars(props) {
|
||||
card: prevCardDetails["payment-card"],
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
return setTimeout(() => {
|
||||
props.setConfirmCredit({ show: true, data: stateData });
|
||||
setLoader(false);
|
||||
}, 1500);
|
||||
// navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
|
||||
}
|
||||
if (tab == "new") {
|
||||
|
||||
if (tab === "new") {
|
||||
const stateData = {
|
||||
amount: Number(props.input),
|
||||
currency: props.currency,
|
||||
values,
|
||||
...values,
|
||||
};
|
||||
// navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
|
||||
}
|
||||
};
|
||||
|
||||
@@ -141,6 +132,10 @@ function AddFundDollars(props) {
|
||||
});
|
||||
}, []);
|
||||
|
||||
console.log(props)
|
||||
|
||||
const handleClose = props.onClose
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full">
|
||||
@@ -190,13 +185,13 @@ function AddFundDollars(props) {
|
||||
{/* END OF switch button */}
|
||||
|
||||
{/* previous tab */}
|
||||
{tab == "previous" ? (
|
||||
{tab === "previous" ? (
|
||||
<div className="p-4 previous-details w-full min-h-[16rem] flex flex-col justify-between items-center">
|
||||
{payListCards.loading ? (
|
||||
<LoadingSpinner size="10" color="sky-blue" />
|
||||
) : payListCards?.data?.length ? (
|
||||
<select
|
||||
className="my-3 w-full rounded-full p-4 outline-none border-none text-base text-black dark:text-gray-100 bg-[#dce2e6] dark:bg-[#5e6278] border"
|
||||
className="my-3 w-full rounded-full p-2 outline-none text-base text-black dark:text-gray-100 bg-[#FAFAFA] dark:bg-[#11131F] border"
|
||||
value={prevCardDetails["payment-card"]?.card_uid}
|
||||
id="payment-card"
|
||||
name="payment-card"
|
||||
@@ -206,16 +201,10 @@ function AddFundDollars(props) {
|
||||
{currentPreviousCards.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
className={index != 0 && "border-t-2"}
|
||||
className={index !== 0 && "border-t-2"}
|
||||
value={JSON.stringify(item)}
|
||||
>
|
||||
<div className="my-2 flex items-center gap-5">
|
||||
{/* <input
|
||||
type="radio"
|
||||
className="w-8 h-8"
|
||||
name="card"
|
||||
value="value"
|
||||
/> */}
|
||||
<div className="card-details">
|
||||
<h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
{item.description} Card
|
||||
@@ -244,7 +233,7 @@ function AddFundDollars(props) {
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="new-details w-full max-h-[23rem] overflow-y-scroll">
|
||||
<div className="new-details w-full max-h-[23rem]">
|
||||
<div className="w-full flex flex-col justify-between">
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
@@ -253,11 +242,11 @@ function AddFundDollars(props) {
|
||||
>
|
||||
{(props) => {
|
||||
return (
|
||||
<Form>
|
||||
<Form className="md:pl-8">
|
||||
<div className="flex flex-col-reverse sm:flex-row">
|
||||
<div className="flex-1 sm:mr-10">
|
||||
<div className="fields w-full">
|
||||
{/* inputs starts here */}
|
||||
{/* Inputs */}
|
||||
{/* Name */}
|
||||
<div className="flex items-center field w-full my-2 flex-[0.4] gap-3">
|
||||
<label className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
|
||||
@@ -266,27 +255,8 @@ function AddFundDollars(props) {
|
||||
<p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
|
||||
</div>
|
||||
|
||||
{/* <div className="field w-full my-2 flex-[0.4]">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
spanTag="*"
|
||||
label="Name on Card"
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="DUMMY NAME"
|
||||
value={props.values.name}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{props.errors.name && props.touched.name && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.name}
|
||||
</p>
|
||||
)}
|
||||
</div> */}
|
||||
|
||||
<div className="flex items-center flex-1 gap-3 my-3">
|
||||
{/* CARD NUMBER */}
|
||||
<div className="flex items-center flex-1 gap-3 my-2">
|
||||
{/* Card Number */}
|
||||
<div className="field w-full flex-[0.6]">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
@@ -299,15 +269,10 @@ function AddFundDollars(props) {
|
||||
value={props.values.cardNum}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
error={props.errors.cardNum}
|
||||
/>
|
||||
{props.errors.cardNum &&
|
||||
props.touched.cardNum && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.cardNum}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{/* EXPIRE YEAR, YEAR */}
|
||||
{/* Expire Year, Year */}
|
||||
<div className="sm:grid gap-5 grid-cols-2 flex-[0.4]">
|
||||
<div className="field w-full mb-6 xl:mb-0 col-span-1">
|
||||
<div className="select-option">
|
||||
@@ -315,13 +280,16 @@ function AddFundDollars(props) {
|
||||
className={`flex items-center justify-between mb-2.5`}
|
||||
>
|
||||
<label
|
||||
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
|
||||
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
|
||||
htmlFor="expiration"
|
||||
>
|
||||
Exp Month{" "}
|
||||
<span className="text-red-700 text-sm tracking-wide">
|
||||
<span className="text-red-700 text-sm italic">
|
||||
*
|
||||
</span>
|
||||
<span className="text-[12px] text-red-500 ml-1">
|
||||
{props.errors.expirationMonth && "**"}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
@@ -352,12 +320,6 @@ function AddFundDollars(props) {
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{props.errors.expirationMonth &&
|
||||
props.touched.expirationMonth && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.expirationMonth}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="field w-full mb-6 xl:mb-0 col-span-1">
|
||||
<div className="select-option">
|
||||
@@ -365,13 +327,16 @@ function AddFundDollars(props) {
|
||||
className={`flex items-center justify-between mb-2.5`}
|
||||
>
|
||||
<label
|
||||
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
|
||||
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center line-clamp-3"
|
||||
htmlFor="expiration"
|
||||
>
|
||||
Exp Year{" "}
|
||||
<span className="text-red-700 text-sm tracking-wide">
|
||||
*
|
||||
</span>
|
||||
<span className="text-[12px] text-red-500 italic">
|
||||
{props.errors.expirationYear && "**"}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
@@ -384,7 +349,12 @@ function AddFundDollars(props) {
|
||||
onBlur={props.handleBlur}
|
||||
name="expirationYear"
|
||||
>
|
||||
<option value="" className="text-dark-gray">Year</option>
|
||||
<option
|
||||
value=""
|
||||
className="text-dark-gray"
|
||||
>
|
||||
Year
|
||||
</option>
|
||||
{expireYear?.length &&
|
||||
expireYear.map((item, index) => (
|
||||
<option key={index} value={item}>
|
||||
@@ -394,18 +364,12 @@ function AddFundDollars(props) {
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{props.errors.expirationYear &&
|
||||
props.touched.expirationYear && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.expirationYear}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center flex-1 gap-3 my-3">
|
||||
{/* Address AND CVV */}
|
||||
<div className="flex items-center flex-1 gap-3 my-2">
|
||||
{/* Address and CVV */}
|
||||
<div className="field w-full col-span-1 flex-[0.4]">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
@@ -418,12 +382,8 @@ function AddFundDollars(props) {
|
||||
value={props.values.cvv}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
error={props.errors.cvv}
|
||||
/>
|
||||
{props.errors.cvv && props.touched.cvv && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.cvv}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="field w-full flex-[0.6]">
|
||||
<InputCom
|
||||
@@ -436,17 +396,13 @@ function AddFundDollars(props) {
|
||||
value={props.values.Address}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
error={props.errors.address}
|
||||
/>
|
||||
{props.errors.address &&
|
||||
props.touched.address && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.address}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* postal code and state */}
|
||||
<div className="sm:grid gap-5 grid-cols-3 my-3">
|
||||
|
||||
{/* Postal Code and State */}
|
||||
<div className="sm:grid gap-5 grid-cols-3 my-2">
|
||||
<div className="field w-full mb-6 xl:mb-0 col-span-1">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
@@ -458,12 +414,8 @@ function AddFundDollars(props) {
|
||||
value={props.values.code}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
error={props.errors.code}
|
||||
/>
|
||||
{props.errors.code && props.touched.code && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.code}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="field w-full col-span-1">
|
||||
<InputCom
|
||||
@@ -476,60 +428,33 @@ function AddFundDollars(props) {
|
||||
value={props.values.state}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
error={props.errors.state}
|
||||
/>
|
||||
{props.errors.state && props.touched.state && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.state}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <div className="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 ? (
|
||||
<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 className="md:px-8 md:pt-4 px-4 pt-2 add-fund-btn flex justify-end items-center">
|
||||
<div className="md:px-8 md:pt-4 px-4 pt-2 add-fund-btn flex justify-end items-center gap-3">
|
||||
<button
|
||||
className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center border-gradient text-base rounded-full"
|
||||
onClick={handleClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="py-1 px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white gap-1"
|
||||
className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
<span className="text-white">Continue</span>{" "}
|
||||
<Icons name="chevron-right" />
|
||||
{loader ? (
|
||||
<LoadingSpinner size="6" color="sky-blue" />
|
||||
) : (
|
||||
<>
|
||||
<span className="text-white">Continue</span>{" "}
|
||||
<Icons name="chevron-right" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
@@ -36,20 +36,19 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
if (input) return;
|
||||
// setTimeout(
|
||||
// () =>
|
||||
// setConfirmCredit({
|
||||
// show: true,
|
||||
// data: { amount: Number(input), currency: "naira" },
|
||||
// }),
|
||||
// 1500
|
||||
// );
|
||||
const stateData = {
|
||||
amount: Number(input),
|
||||
currency: currency,
|
||||
};
|
||||
|
||||
// const stateData = { amount: Number(input), currency: "naira" };
|
||||
// navigate("confirm-add-fund", { state: stateData });
|
||||
|
||||
// setInput("");
|
||||
return setTimeout(
|
||||
() =>
|
||||
setConfirmCredit({
|
||||
show: true,
|
||||
data: stateData,
|
||||
}),
|
||||
1500
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -61,7 +60,7 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
|
||||
{/*<hr />*/}
|
||||
<form className="md:px-8 md:pt-4 px-4 pt-2 add-fund-info flex items-center gap-[2.1rem]">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{currency == "US Dollars" ? "Amount (USD)" : "Amount (Naira)"}
|
||||
Amount({currency})
|
||||
</h1>
|
||||
<div className="field w-full max-w-[250px]">
|
||||
<InputCom
|
||||
@@ -92,6 +91,7 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currency != "US Dollars" && <div className="h-[18rem]"></div>}
|
||||
{/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
|
||||
{currency != "US Dollars" && (
|
||||
<div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
|
||||
@@ -113,7 +113,6 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
|
||||
{currency != "US Dollars" &&
|
||||
// <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
|
||||
|
||||
@@ -96,7 +96,10 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
|
||||
// }
|
||||
// }, []);
|
||||
|
||||
let __confirmCard = JSON.parse(confirmCredit?.data.card);
|
||||
const __confirmCard = confirmCredit?.data.card
|
||||
? JSON.parse(confirmCredit?.data.card)
|
||||
: "";
|
||||
|
||||
const ThePaymentText = ({ value }) => (
|
||||
<div className="my-2 flex items-center gap-5">
|
||||
<div className="card-details flex items-center gap-3">
|
||||
@@ -124,9 +127,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{confirmCredit?.data?.currency == "naira"
|
||||
? "Amount (Naira):"
|
||||
: "Amount (Dollars):"}
|
||||
Amount({confirmCredit?.data?.currency})
|
||||
</h1>
|
||||
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{`${walletItem?.symbol} ${
|
||||
@@ -144,20 +145,16 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
|
||||
{confirmCredit?.data?.currency && "Payment Method:"}
|
||||
</label>
|
||||
<span className="text-[#181c32] dark:text-white ">
|
||||
{__confirmCard && (
|
||||
{__confirmCard ? (
|
||||
<ThePaymentText value={__confirmCard} />
|
||||
)}
|
||||
) : null}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label={
|
||||
confirmCredit?.data?.currency == "naira"
|
||||
? "Amount (Naira):"
|
||||
: "Amount (Dollars):"
|
||||
}
|
||||
label={` Amount${confirmCredit?.data?.currency}`}
|
||||
type="text"
|
||||
name="amount"
|
||||
value={confirmCredit?.data?.amount || ""}
|
||||
@@ -178,18 +175,12 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
{confirmCredit?.data?.currency == "naira" ? (
|
||||
|
||||
{confirmCredit?.data?.currency == "Naira" && (
|
||||
<FlutterWaveButton
|
||||
{...fwConfig}
|
||||
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
className="px-4 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
onClick={() => console.log("WORKING")}
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -47,8 +47,6 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
|
||||
onClose();
|
||||
};
|
||||
|
||||
console.log("prop drills >> ", state);
|
||||
|
||||
return (
|
||||
<ModalCom
|
||||
action={onClose}
|
||||
|
||||
@@ -10,14 +10,14 @@ export default function WalletBox({ wallet, coupon, payment }) {
|
||||
<>
|
||||
<div className="my-wallet-wrapper w-full mb-10">
|
||||
<div className="main-wrapper w-full">
|
||||
<div className="balance-inquery w-full lg:flex lg:space-x-11 mb-11">
|
||||
<div className="balance-inquery w-full flex flex-wrap justify-center gap-2">
|
||||
{wallet.loading ? (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<LoadingSpinner size="16" color="sky-blue" />
|
||||
</div>
|
||||
) : wallet.data.length ? (
|
||||
wallet.data.map((item, index) => (
|
||||
<div className="lg:w-1/2 h-full mb-10 lg:mb-0">
|
||||
<div className="w-[350px] h-full flex justify-center">
|
||||
<WalletItemCard walletItem={item} payment={payment} />
|
||||
</div>
|
||||
))
|
||||
|
||||
@@ -36,16 +36,16 @@ export default function WalletItemCard({ walletItem, payment }) {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col gap-2 px-8 py-9`}
|
||||
className={`current-balance-widget w-[350px] h-full rounded-2xl overflow-hidden flex flex-col gap-2 px-8 pt-9 pb-20`}
|
||||
style={{
|
||||
background: `url(${background}) 0% 0% / cover no-repeat`,
|
||||
}}
|
||||
>
|
||||
<div className="wallet xxs:flex justify-around items-start gap-3">
|
||||
<div className="wallet xxs:flex justify-between items-start gap-3">
|
||||
<div className="min-w-[100px] min-h-[100px] max-w-[100px] max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
|
||||
<img src={localImgLoad(`images/currency/${image}`)} className="w-full h-full" alt="curreny-icon" />
|
||||
</div>
|
||||
<div className="balance w-full">
|
||||
<div className="balance mt-2">
|
||||
<p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
|
||||
Current Balance
|
||||
</p>
|
||||
@@ -57,7 +57,7 @@ export default function WalletItemCard({ walletItem, payment }) {
|
||||
"text-[2rem]"
|
||||
)}
|
||||
</p>
|
||||
<p className="xxs:-ml-5 mt-10 text-lg text-white tracking-wide flex justify-start items-center gap-2">
|
||||
<p className="xxs:-ml-5 mt-10 mb-5 text-lg text-white tracking-wide flex justify-start items-center gap-2">
|
||||
HOLDINGS :{" "}
|
||||
<span className="mt-1">
|
||||
{PriceFormatter(
|
||||
|
||||
Reference in New Issue
Block a user