Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
e4aadfb627 | ||
 ameye
|
6a79c3e56f | ||
|
victorAnumudu
|
81707c7bd8 | ||
|
victorAnumudu
|
e5b36e3f45 | ||
|
ameye
|
6f2fc17090 | ||
|
victorAnumudu
|
e6392bc433 | ||
|
victorAnumudu
|
f8e14fe6a0 | ||
|
ameye
|
91a42cfe9d |
@@ -121,4 +121,7 @@ REACT_APP_SHOW_SLIDER_BANNERS=0
|
||||
REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
|
||||
|
||||
# FOR FAMILY GAME LINK
|
||||
REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
|
||||
REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
|
||||
|
||||
# REACT APP CUSTOMTIMER
|
||||
REACT_APP_CUSTOMTIMER=90
|
||||
+4
-1
@@ -89,4 +89,7 @@ REACT_APP_SHOW_SLIDER_BANNERS=0
|
||||
REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
|
||||
|
||||
# FOR FAMILY GAME LINK
|
||||
REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
|
||||
REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
|
||||
|
||||
# REACT APP CUSTOMTIMER
|
||||
REACT_APP_CUSTOMTIMER=90
|
||||
+4
-1
@@ -95,4 +95,7 @@ REACT_APP_SHOW_SLIDER_BANNERS=0
|
||||
REACT_APP_MEDIA_LINK='https://media.wrenchboard.com'
|
||||
|
||||
# FOR FAMILY GAME LINK
|
||||
REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
|
||||
REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
|
||||
|
||||
# REACT APP CUSTOMTIMER
|
||||
REACT_APP_CUSTOMTIMER=90
|
||||
@@ -121,7 +121,7 @@ function PastDueJobAction({jobDetails}) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={popUpHandler}
|
||||
className="px-4 h-[48px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
className="custom-btn btn-gradient text-base text-white"
|
||||
>
|
||||
Cancel or Extend Timeline
|
||||
</button>
|
||||
@@ -133,14 +133,14 @@ function PastDueJobAction({jobDetails}) {
|
||||
|
||||
{popUp && (
|
||||
<ModalCom action={popUpHandler} situation={popUp}>
|
||||
<div className="logout-modal-wrapper lg:w-[460px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
|
||||
<div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
<div className="logout-modal-wrapper lg:w-[460px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||
<div className="modal-header-con">
|
||||
<h1 className="modal-title">
|
||||
Past Due Task
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
className="text-[#374557] dark:text-red-500"
|
||||
className="modal-close-btn"
|
||||
onClick={popUpHandler}
|
||||
>
|
||||
<svg
|
||||
@@ -164,7 +164,7 @@ function PastDueJobAction({jobDetails}) {
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="job-action-modal-body w-full px-10 py-8 gap-4">
|
||||
<div className="relative job-action-modal-body w-full px-10 py-8 gap-4">
|
||||
<div className="w-full flex flex-col items-center">
|
||||
<div className="mb-5 flex justify-center items-center gap-2">
|
||||
<input
|
||||
@@ -173,26 +173,26 @@ function PastDueJobAction({jobDetails}) {
|
||||
onChange={()=>{setChecked(prev => !prev)}}
|
||||
className='w-6 h-6 text-sky-blue bg-gray-100 focus:ring-sky-blue'
|
||||
/>
|
||||
<p className='font-bold text-base tracking-wide text-dark-gray dark:text-white'>I am ready to cancel this task</p>
|
||||
<p className='job-label'>I am ready to cancel this task</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-5 flex justify-center items-center">
|
||||
<div className="mb-5 w-full flex justify-end items-center">
|
||||
{reqStatus.loading && action=='cancel'?
|
||||
<LoadingSpinner color='sky-blue' size='10' />
|
||||
:
|
||||
<button disabled={reqStatus.loading} onClick={cancelTask} type="button" className="px-2 py-1 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white">
|
||||
<button disabled={reqStatus.loading} onClick={cancelTask} type="button" className="custom-btn border-gradient text-base text-white">
|
||||
<span className='text-gradient'>Cancel this task</span>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
{/* EXTEND TIMELINE SECTION */}
|
||||
<div className='w-full my-3 py-3 border-y flex flex-col items-center'>
|
||||
<div className='w-full my-3 py-3 border-t flex flex-col items-center'>
|
||||
<div className='mb-5 flex items-center gap-2'>
|
||||
<p className='font-bold text-base tracking-wide text-dark-gray dark:text-white'>Extend the timeline by:</p>
|
||||
<p className='job-label'>Extend the timeline by:</p>
|
||||
<select
|
||||
onChange={({target})=>{setExtendedTime(target.value)}}
|
||||
className='text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0'
|
||||
className='text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 rounded-full'
|
||||
>
|
||||
<option className='text-slate-500 text-lg' value=''>select</option>
|
||||
<option className='text-slate-500 text-lg' value='2'>1 days</option>
|
||||
@@ -204,25 +204,27 @@ function PastDueJobAction({jobDetails}) {
|
||||
{reqStatus.loading && action=='extend' ?
|
||||
<LoadingSpinner color='sky-blue' size='10' />
|
||||
:
|
||||
<button disabled={reqStatus.loading} type="button" onClick={extendTime} className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
|
||||
Extend Timeline
|
||||
</button>
|
||||
<div className='w-full flex justify-end items-center'>
|
||||
<button disabled={reqStatus.loading} type="button" onClick={extendTime} className="custom-btn btn-gradient text-base text-white">
|
||||
Extend Timeline
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
{/* FOR SUCCESS/ERROR DISPLAY SECTION*/}
|
||||
<div className="w-full">
|
||||
<div className="w-full absolute left-0 bottom-0 text-center">
|
||||
{reqStatus.message != "" &&
|
||||
(!reqStatus.status ? (
|
||||
<div
|
||||
className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
||||
className={`relative p-2 mx-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
||||
>
|
||||
{reqStatus.message}
|
||||
</div>
|
||||
) : (
|
||||
reqStatus.status && (
|
||||
<div
|
||||
className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
||||
className={`relative p-2 mx-2 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
||||
>
|
||||
{reqStatus.message}
|
||||
</div>
|
||||
@@ -232,17 +234,17 @@ function PastDueJobAction({jobDetails}) {
|
||||
{/* END OF FOR SUCCESS/ERROR DISPLAY SECTION*/}
|
||||
</div>
|
||||
|
||||
{/* cancel btn */}
|
||||
<div className='flex justify-end items-center'>
|
||||
<button onClick={popUpHandler} type="button"
|
||||
// className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
|
||||
className='w-[150px] mt-2 h-[48px] rounded-full text-base bg-transparent border border-red-500 text-red-500'
|
||||
>
|
||||
Cancel
|
||||
{/* <span className='text-gradient'>Cancel</span> */}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* cancel btn */}
|
||||
<div className='modal-footer-wrapper flex justify-center items-center'>
|
||||
<button onClick={popUpHandler} type="button"
|
||||
// className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
|
||||
className='custom-btn text-base bg-transparent border border-red-500 text-red-500'
|
||||
>
|
||||
Cancel
|
||||
{/* <span className='text-gradient'>Cancel</span> */}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ModalCom>
|
||||
)}
|
||||
|
||||
@@ -260,13 +260,13 @@ function AddFundDollars(props) {
|
||||
{/* switch button */}
|
||||
<div className="flex">
|
||||
<form className="add-fund-info flex items-center gap-3 md:px-8 md:pt-4 px-4 pt-2">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<h1 className="job-label my-1">
|
||||
{countryWallet == "US" && "Payment Method"}
|
||||
</h1>
|
||||
<div className="my-1 flex items-center gap-2">
|
||||
<label
|
||||
htmlFor="previous"
|
||||
className="cursor-pointer flex items-center gap-1"
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
@@ -283,7 +283,7 @@ function AddFundDollars(props) {
|
||||
</label>
|
||||
<label
|
||||
htmlFor="new"
|
||||
className={`cursor-pointer flex items-center gap-1 ${
|
||||
className={`flex items-center gap-1 ${
|
||||
payListCards.data.length >= MaxNoOfCards
|
||||
? "pointer-events-none"
|
||||
: ""
|
||||
@@ -388,7 +388,7 @@ function AddFundDollars(props) {
|
||||
{/* 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">
|
||||
<label className="job-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
|
||||
Name:
|
||||
</label>
|
||||
<p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
|
||||
@@ -423,7 +423,7 @@ 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 line-clamp-3 flex items-center"
|
||||
className="job-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
|
||||
htmlFor="expiration"
|
||||
>
|
||||
Exp Month{" "}
|
||||
|
||||
@@ -131,7 +131,7 @@ function AddFundPop({
|
||||
<div className="lg:w-2/2 w-full mb-10 lg:mb-0">
|
||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
|
||||
<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">
|
||||
<h1 className="job-label my-1">
|
||||
Amount({currency})
|
||||
</h1>
|
||||
<div className="field w-full max-w-[250px]">
|
||||
|
||||
@@ -49,7 +49,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="w-full flex justify-center items-center">
|
||||
<h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{isSuccess
|
||||
? "Credit was Successful!"
|
||||
@@ -59,41 +59,42 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
|
||||
|
||||
{data?.internal_return >= 0 &&
|
||||
data?.result !== "Charge failed" && (
|
||||
<>
|
||||
<div className="flex items-center gap-8">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<div className="w-full md:w-[60%] mx-auto">
|
||||
<div className="grid grid-cols-2 gap-8 my-2">
|
||||
<h1 className="job-label">
|
||||
Amount({data?.currency || ""})
|
||||
</h1>
|
||||
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
|
||||
{`${data?.symbol || ""} ${
|
||||
Number(data?.amount * 0.01).toLocaleString() || ""
|
||||
Number(data?.amount * 0.01).toFixed(2) || ""
|
||||
}`}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{data?.curr_balance &&
|
||||
<div className="flex items-center gap-8">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<div className="grid grid-cols-2 gap-8 my-2">
|
||||
<h1 className="job-label">
|
||||
Wallet Balance
|
||||
</h1>
|
||||
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{data?.curr_balance * 0.01}
|
||||
<span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
|
||||
{(data?.curr_balance * 0.01).toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
{isSuccess && (
|
||||
<div className="flex items-center gap-8">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<div className="grid grid-cols-2 gap-8 my-2">
|
||||
<h1 className="job-label">
|
||||
Confirmation Number
|
||||
</h1>
|
||||
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
|
||||
{data?.confirmation}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -29,10 +29,10 @@ function ThePaymentText({ value, type }) {
|
||||
return (
|
||||
<div className="my-2 flex items-center gap-5">
|
||||
<div className="card-details flex items-center gap-3">
|
||||
<h1 className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1 space-x-1">
|
||||
<h1 className="text-base">
|
||||
{description} Card
|
||||
</h1>
|
||||
<p className="text-xl font-normal text-dark-gray dark:text-white tracking-wide">
|
||||
<p className="text-base font-normal text-dark-gray dark:text-white tracking-wide">
|
||||
Bank **************{digits}
|
||||
</p>
|
||||
</div>
|
||||
@@ -46,14 +46,14 @@ function ThePaymentText({ value, type }) {
|
||||
*/
|
||||
function AmountSection({ currency, amount, country }) {
|
||||
const formattedAmount = (+amount * 0.01)?.toFixed(2);
|
||||
const gapClassName = country === "US" ? "gap-14" : "gap-4";
|
||||
|
||||
return (
|
||||
<div className={`flex items-center ${gapClassName}`}>
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<div className={`flex items-center gap-8`}>
|
||||
{/* text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1 */}
|
||||
<h1 className="min-w-[150px] job-label">
|
||||
Amount({currency})
|
||||
</h1>
|
||||
<span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{formattedAmount}
|
||||
</span>
|
||||
</div>
|
||||
@@ -66,14 +66,13 @@ function AmountSection({ currency, amount, country }) {
|
||||
*/
|
||||
function TransactionFeeSection({ currency, fee, country }) {
|
||||
const formattedFee = (+fee).toFixed(2);
|
||||
const gapClass = country === "US" ? "gap-[2.7rem]" : "gap-4";
|
||||
|
||||
return (
|
||||
<div className={`flex items-center border-b border-gray-600 ${gapClass}`}>
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<div className={`flex items-center gap-8 border-b border-gray-600`}>
|
||||
<h1 className="min-w-[150px] job-label">
|
||||
Transaction Fee
|
||||
</h1>
|
||||
<span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{formattedFee}
|
||||
</span>
|
||||
</div>
|
||||
@@ -89,14 +88,12 @@ function TotalSection({ currency, amount, fee, country }) {
|
||||
const total = Number(amount) + Number(fee);
|
||||
const formattedTotal = (total * 0.01)?.toFixed(2);
|
||||
|
||||
const gap = country === "US" ? "gap-[8rem]" : "gap-[6.3rem]";
|
||||
|
||||
return (
|
||||
<div className={`flex items-center ${gap}`}>
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<div className={`flex items-center gap-8`}>
|
||||
<h1 className="min-w-[150px] job-label">
|
||||
Total
|
||||
</h1>
|
||||
<span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{formattedTotal}
|
||||
</span>
|
||||
</div>
|
||||
@@ -384,7 +381,7 @@ function ConfirmAddFund({
|
||||
<div className="flex items-center gap-8">
|
||||
<label
|
||||
htmlFor="payment"
|
||||
className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
|
||||
className="min-w-[150px] job-label"
|
||||
>
|
||||
Payment Method
|
||||
</label>
|
||||
@@ -397,17 +394,14 @@ function ConfirmAddFund({
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={`${
|
||||
__confirmCountry === "US"
|
||||
? "gap-[3.7rem]"
|
||||
: "gap-[1.81rem]"
|
||||
} flex items-center`}
|
||||
className={`gap-8 flex items-center`}
|
||||
>
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
<h1 className="min-w-[150px] job-label">
|
||||
Reference No
|
||||
</h1>
|
||||
<span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{__confirmData?.credit_reference}
|
||||
<span className="text-base font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{/* Displays only half of the string */}
|
||||
{__confirmData?.credit_reference.slice(0, (Math.floor(__confirmData?.credit_reference.length/2)))}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -58,13 +58,12 @@ function ConfirmNairaWithdraw({
|
||||
.sendMoney(reqData)
|
||||
.then((res) => {
|
||||
if (res.data.internal_return < 0) {
|
||||
// if (res.data?.status_message?.toLowerCase().includes("limit")) {
|
||||
// setRequestStatus({
|
||||
// message: ,
|
||||
// loading: false,
|
||||
// status: false,
|
||||
// });
|
||||
// }
|
||||
setRequestStatus({
|
||||
message: 'Unable to complete, try again',
|
||||
loading: false,
|
||||
status: false,
|
||||
});
|
||||
|
||||
return setTimeout(() => {
|
||||
setRequestStatus({
|
||||
message: "",
|
||||
@@ -79,19 +78,19 @@ function ConfirmNairaWithdraw({
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
setRequestStatus({
|
||||
message: "Withdrawal sucessful",
|
||||
loading: false,
|
||||
status: true,
|
||||
});
|
||||
setShowCompleteNairaWithdraw({
|
||||
show: true,
|
||||
load: false,
|
||||
state: res.data,
|
||||
});
|
||||
setTimeout(() => {
|
||||
setRequestStatus({
|
||||
message: "",
|
||||
loading: false,
|
||||
status: false,
|
||||
});
|
||||
setShowCompleteNairaWithdraw({
|
||||
show: true,
|
||||
load: false,
|
||||
state: res.data,
|
||||
});
|
||||
dispatch(tableReload({ type: "WALLETTABLE" }));
|
||||
}, 5000);
|
||||
dispatch(tableReload({ type: "WALLETTABLE" }));
|
||||
return;
|
||||
})
|
||||
.catch((error) => {
|
||||
@@ -381,23 +380,23 @@ function ConfirmNairaWithdraw({
|
||||
{!completeNairaWithdraw.load && (
|
||||
<>
|
||||
<p
|
||||
className={`text-base ${
|
||||
requestStatus.status ? "text-green-500" : "text-red-500"
|
||||
} px-4 md:px-8 py-4 h-5`}
|
||||
className={`text-lg text-center font-bold ${
|
||||
requestStatus.status ? "text-emerald-600" : "text-red-500"
|
||||
} px-4 md:px-8 py-4`}
|
||||
>
|
||||
{requestStatus.message && requestStatus.message}
|
||||
</p>
|
||||
<div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
|
||||
<div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
|
||||
{!completeNairaWithdraw.show && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={action}
|
||||
className="custom-btn bg-[#f5a430] text-black text-base"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={action}
|
||||
className="custom-btn bg-[#f5a430] text-black text-base"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
|
||||
<button
|
||||
onClick={
|
||||
|
||||
@@ -4,6 +4,7 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
||||
import AddFundPop from "./AddFundPop";
|
||||
import CompleteConfirmCredit from "./CompleteConfirmCredit";
|
||||
import ConfirmAddFund from "./ConfirmAddFund";
|
||||
import CustomTimer from "../../countdown/CustomTimer";
|
||||
|
||||
const CreditPopup = ({ details, onClose, situation, walletItem }) => {
|
||||
const [input, setInput] = useState("");
|
||||
@@ -71,7 +72,13 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
|
||||
<div className="w-full">
|
||||
{confirmCredit?.show?.acceptConfirm?.loader ? (
|
||||
<div className="h-[32rem] flex items-center justify-center">
|
||||
<LoadingSpinner size="12" color="sky-blue" />
|
||||
<div className="h-[32rem] flex flex-col items-center justify-center gap-4">
|
||||
<p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Processing payment</p>
|
||||
<p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Please do not refresh</p>
|
||||
<LoadingSpinner size="6" color="sky-blue" height='h-20' />
|
||||
{/* <p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Timer countdown</p> */}
|
||||
<CustomTimer className="text-lg text-center md:text-2xl text-emerald-600 tracking-wide font-bold" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
|
||||
@@ -330,13 +330,13 @@ function NairaWithdraw({
|
||||
<Form className="transfer-fund-info">
|
||||
<div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white h-full rounded-2xl">
|
||||
{/* Amount Form */}
|
||||
<div className="flex flex-col">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
fieldClass="px-4 text-end"
|
||||
parentClass="flex items-center gap-1 justify-between"
|
||||
labelClass="flex-[0.4] mb-0"
|
||||
inputClass="flex-[0.6] max-w-[12rem]"
|
||||
parentClass="flex items-center gap-1"
|
||||
labelClass="flex-[0.2] mb-0"
|
||||
inputClass="flex-[0.8] max-w-[12rem]"
|
||||
label="Amount:"
|
||||
type="number"
|
||||
name="amount"
|
||||
@@ -352,10 +352,10 @@ function NairaWithdraw({
|
||||
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
fieldClass="px-4 transfer-field"
|
||||
parentClass="flex items-center gap-1 justify-between"
|
||||
fieldClass="px-4"
|
||||
parentClass="flex items-center gap-1"
|
||||
labelClass="flex-[0.2] mb-0"
|
||||
inputClass="flex-[0.8] transfer-field max-w-[12rem]"
|
||||
inputClass="flex-[0.8] max-w-[12rem]"
|
||||
label="Fee:"
|
||||
type="text"
|
||||
name="fee"
|
||||
@@ -371,10 +371,10 @@ function NairaWithdraw({
|
||||
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
fieldClass="px-4 transfer-field"
|
||||
parentClass="flex items-center gap-1 justify-between"
|
||||
fieldClass="px-4"
|
||||
parentClass="flex items-center gap-1"
|
||||
labelClass="flex-[0.2] mb-0"
|
||||
inputClass="flex-[0.8] transfer-field max-w-[12rem]"
|
||||
inputClass="flex-[0.8] max-w-[12rem]"
|
||||
label="Total:"
|
||||
type="text"
|
||||
name="total"
|
||||
@@ -414,7 +414,7 @@ function NairaWithdraw({
|
||||
<label
|
||||
onClick={() => setTab("previous")}
|
||||
htmlFor="previous"
|
||||
className="cursor-pointer flex items-center gap-1"
|
||||
className="cursor-pointer flex items-center gap-1 text-dark-gray dark:text-white"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
@@ -431,7 +431,7 @@ function NairaWithdraw({
|
||||
<label
|
||||
onClick={() => setTab("new")}
|
||||
htmlFor="new"
|
||||
className={`cursor-pointer flex items-center gap-1 ${
|
||||
className={`cursor-pointer flex items-center gap-1 text-dark-gray dark:text-white ${
|
||||
recipients.data.length >= MaxNoOfBanks
|
||||
? "pointer-events-none"
|
||||
: ""
|
||||
@@ -545,7 +545,7 @@ function NairaWithdraw({
|
||||
<LoadingSpinner size="10" color="sky-blue" />
|
||||
</div>
|
||||
) : recipients.data.length < MaxNoOfBanks ? (
|
||||
<div className="w-full mt-3 rounded-md bg-slate-100">
|
||||
<div className="w-full mt-3 rounded-md bg-slate-100 dark:bg-dark-white">
|
||||
<div className="relative fields w-full flex flex-col p-4">
|
||||
<div className="flex flex-[2] min-h-[52px]">
|
||||
{/* country */}
|
||||
@@ -557,7 +557,7 @@ function NairaWithdraw({
|
||||
Country{" "}
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding tracking-[1.5px] flex items-center pointer-events-none">
|
||||
<div className="w-full text-base p-2 text-dark-gray bg-white dark:bg-[#11131F] dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding tracking-[1.5px] flex items-center pointer-events-none">
|
||||
<span className="text-slate-500 text-lg italic">
|
||||
{wallet.walletCountry[0]?.country}
|
||||
</span>
|
||||
@@ -619,7 +619,7 @@ function NairaWithdraw({
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding "
|
||||
className="w-full text-base p-2 bg-white dark:bg-[#11131F] text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding "
|
||||
name="newAccount.bank"
|
||||
value={props.values.newAccount?.bank}
|
||||
onChange={props.handleChange}
|
||||
@@ -698,7 +698,7 @@ function NairaWithdraw({
|
||||
Type <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding flex-grow tracking-[1.5px]"
|
||||
className="w-full text-base p-2 text-dark-gray bg-white dark:bg-[#11131F] dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding flex-grow tracking-[1.5px]"
|
||||
name="newAccount.accountType"
|
||||
value={props.values.newAccount?.accountType}
|
||||
onChange={props.handleChange}
|
||||
|
||||
@@ -23,14 +23,14 @@ function WalletAction({ walletItem, payment, openPopUp }) {
|
||||
}}
|
||||
className={`${
|
||||
walletItem.code != "NAIRA" && "invisible"
|
||||
} custom-btn btn-gradient text-white`}
|
||||
} logout-btn btn-gradient text-white`}
|
||||
>
|
||||
Spend
|
||||
</button>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center">
|
||||
<button
|
||||
className="custom-btn btn-gradient text-white"
|
||||
className="logout-btn btn-gradient text-white"
|
||||
onClick={() => {
|
||||
openPopUp({
|
||||
payment: payment,
|
||||
|
||||
@@ -81,7 +81,7 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
|
||||
walletItem.escrow * 0.01,
|
||||
walletItem.code,
|
||||
undefined,
|
||||
"text-[2rem]"
|
||||
"text-[1.5rem]"
|
||||
)}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
|
||||
export default function CustomTimer({className='text-emerald-500'}) {
|
||||
|
||||
const [time, setTime] = useState(Number(process.env.REACT_APP_CUSTOMTIMER))
|
||||
|
||||
useEffect(()=>{
|
||||
const timer = setInterval(()=>{
|
||||
setTime(prev => prev - 1)
|
||||
},1000)
|
||||
return ()=>{
|
||||
clearInterval(timer)
|
||||
}
|
||||
},[])
|
||||
|
||||
let minutes = time == 0 ? 0 : Math.floor(time/60)
|
||||
let seconds = time == 0 ? 0 :time - (minutes * 60)
|
||||
|
||||
return (
|
||||
<p className={`w-full text-base text-emerald-500 ${className}`}>
|
||||
{`${minutes > 9 ? minutes : '0'+minutes} : ${seconds > 9 ? seconds : '0'+seconds}`}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user