Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
8a7b56068d | ||
|
victorAnumudu
|
bb5a966249 | ||
 ameye
|
199dec01fe | ||
|
victorAnumudu
|
3775c520ff | ||
|
ameye
|
bf19dfe86a |
@@ -144,7 +144,7 @@ export default function AssignMediaTask({
|
|||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-3 gap-3">
|
<div className="grid grid-cols-3 gap-3">
|
||||||
{/* Price */}
|
{/* Price */}
|
||||||
<div className="field w-full">
|
<div className="field w-full flex flex-col justify-between">
|
||||||
<label htmlFor="price" className="job-label flex gap-1">
|
<label htmlFor="price" className="job-label flex gap-1">
|
||||||
Reward
|
Reward
|
||||||
<span className='text-red-500 text-base'>{props.errors.amount && props.touched.amount && '*'}</span>
|
<span className='text-red-500 text-base'>{props.errors.amount && props.touched.amount && '*'}</span>
|
||||||
@@ -164,7 +164,7 @@ export default function AssignMediaTask({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Currency */}
|
{/* Currency */}
|
||||||
<div className="field w-full">
|
<div className="field w-full flex flex-col justify-between">
|
||||||
<label
|
<label
|
||||||
htmlFor="currency"
|
htmlFor="currency"
|
||||||
className="job-label flex gap-1 invisible"
|
className="job-label flex gap-1 invisible"
|
||||||
@@ -224,7 +224,7 @@ export default function AssignMediaTask({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Duration */}
|
{/* Duration */}
|
||||||
<div className="field w-full">
|
<div className="field w-full flex flex-col justify-between">
|
||||||
<label
|
<label
|
||||||
htmlFor="timeline_days"
|
htmlFor="timeline_days"
|
||||||
className="job-label flex gap-1"
|
className="job-label flex gap-1"
|
||||||
|
|||||||
@@ -277,7 +277,7 @@ function ActiveJobsMedia(props) {
|
|||||||
state={props.details.accountDetails}
|
state={props.details.accountDetails}
|
||||||
>
|
>
|
||||||
{/* job title */}
|
{/* job title */}
|
||||||
<div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">
|
{/* <div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="w-full flex justify-start space-x-3 items-start">
|
<div className="w-full flex justify-start space-x-3 items-start">
|
||||||
<button
|
<button
|
||||||
@@ -310,7 +310,7 @@ function ActiveJobsMedia(props) {
|
|||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> */}
|
||||||
{/* end of job title */}
|
{/* end of job title */}
|
||||||
|
|
||||||
<div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
|
<div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
|
||||||
@@ -320,7 +320,7 @@ function ActiveJobsMedia(props) {
|
|||||||
<VideoElement videoId={props?.details?.media_uid} />
|
<VideoElement videoId={props?.details?.media_uid} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-2">
|
<div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-8">
|
||||||
<div className="w-full flex flex-col justify-between">
|
<div className="w-full flex flex-col justify-between">
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<p className="w-full text-base text-right text-sky-blue">
|
<p className="w-full text-base text-right text-sky-blue">
|
||||||
@@ -330,13 +330,23 @@ function ActiveJobsMedia(props) {
|
|||||||
<p className="font-semibold text-black dark:text-white">
|
<p className="font-semibold text-black dark:text-white">
|
||||||
Description:{" "}
|
Description:{" "}
|
||||||
</p>
|
</p>
|
||||||
<p className="p-2 border border-sky-blue">
|
<p className="p-2 ml-8 border border-sky-blue">
|
||||||
{props?.details && props.details.description}
|
{props?.details && props.details.description}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="mt-6 w-full lg:flex gap-8">
|
||||||
<div className="my-2">
|
<div className="w-full text-base dark:text-white tracking-wide">
|
||||||
<IndexJobActions details={props.details} />
|
<p className="font-semibold text-sky-blue dark:text-white">
|
||||||
|
Delivery Detail:{" "}
|
||||||
|
</p>
|
||||||
|
<p className="p-2 ml-8">
|
||||||
|
{props?.details && props.details.job_description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="my-2 lg:my-0">
|
||||||
|
<IndexJobActions details={props.details} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -389,14 +399,14 @@ function ActiveJobsMedia(props) {
|
|||||||
day(s)
|
day(s)
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
|
{/* <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
|
||||||
<span className="font-semibold text-black dark:text-white">
|
<span className="font-semibold text-black dark:text-white">
|
||||||
No:{" "}
|
No:{" "}
|
||||||
</span>
|
</span>
|
||||||
<span className="">
|
<span className="">
|
||||||
{props.details?.contract && props.details.contract}
|
{props.details?.contract && props.details.contract}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
{/* end of job details */}
|
{/* end of job details */}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -65,7 +65,7 @@ function CurrentTaskAction({jobDetails}) {
|
|||||||
<div className="w-full text-sm text-left text-gray-500">
|
<div className="w-full text-sm text-left text-gray-500">
|
||||||
{jobDetails.job_type == 'MEDIA' ?
|
{jobDetails.job_type == 'MEDIA' ?
|
||||||
<div className="flex justify-center items-center">
|
<div className="flex justify-center items-center">
|
||||||
<button onClick={popUpHandler} type="button" className="custom-btn btn-gradient text-white">
|
<button onClick={popUpHandler} type="button" className="p-1 lg:p-2 border-4 border-slate-300 text-lg lg:text-xl font-medium text-orange-600 rounded-2xl hover:opacity-80 transition-all duration-300">
|
||||||
I have completed this task
|
I have completed this task
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -259,7 +259,7 @@ function AddFundDollars(props) {
|
|||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
{/* switch button */}
|
{/* switch button */}
|
||||||
<div className="flex">
|
<div className="flex">
|
||||||
<form className="add-fund-info flex items-center gap-3">
|
<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="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||||
{countryWallet == "US" && "Payment Method"}
|
{countryWallet == "US" && "Payment Method"}
|
||||||
</h1>
|
</h1>
|
||||||
@@ -313,7 +313,7 @@ function AddFundDollars(props) {
|
|||||||
|
|
||||||
{/* previous selectedOption */}
|
{/* previous selectedOption */}
|
||||||
{selectedOption === "previous" && (
|
{selectedOption === "previous" && (
|
||||||
<div className="p-4 previous-details w-full min-h-[16.5rem] flex flex-col">
|
<div className="px-8 py-4 previous-details w-full h-[300px] flex flex-col">
|
||||||
{payListCards.loading ? (
|
{payListCards.loading ? (
|
||||||
<LoadingSpinner size="10" color="sky-blue" />
|
<LoadingSpinner size="10" color="sky-blue" />
|
||||||
) : payListCards?.data?.length ? (
|
) : payListCards?.data?.length ? (
|
||||||
@@ -367,7 +367,7 @@ function AddFundDollars(props) {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{selectedOption === "new" && (
|
{selectedOption === "new" && (
|
||||||
<div className="new-details w-full max-h-[22rem]">
|
<div className="new-details w-full">
|
||||||
{payListCards.loading ? (
|
{payListCards.loading ? (
|
||||||
<div className="pt-10 flex w-full h-full justify-center items-center">
|
<div className="pt-10 flex w-full h-full justify-center items-center">
|
||||||
<LoadingSpinner size="10" color="sky-blue" />
|
<LoadingSpinner size="10" color="sky-blue" />
|
||||||
@@ -381,8 +381,8 @@ function AddFundDollars(props) {
|
|||||||
>
|
>
|
||||||
{(props) => {
|
{(props) => {
|
||||||
return (
|
return (
|
||||||
<Form className="md:pl-8">
|
<Form className="w-full">
|
||||||
<div className="flex flex-col-reverse sm:flex-row">
|
<div className="flex flex-col-reverse sm:flex-row md:px-8 md:pt-4 px-4 pt-2">
|
||||||
<div className="flex-1 sm:mr-10">
|
<div className="flex-1 sm:mr-10">
|
||||||
<div className="fields w-full">
|
<div className="fields w-full">
|
||||||
{/* Inputs */}
|
{/* Inputs */}
|
||||||
@@ -588,16 +588,16 @@ function AddFundDollars(props) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="add-fund-btn flex justify-end items-center gap-2 mt-4">
|
<div className="modal-footer-wrapper flex justify-end items-center gap-2">
|
||||||
<button
|
<button
|
||||||
className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
|
className="custom-btn bg-[#f5a430] text-black text-base"
|
||||||
onClick={handleClose}
|
onClick={handleClose}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
className="custom-btn btn-gradient text-base text-white"
|
||||||
>
|
>
|
||||||
{loadingState ? (
|
{loadingState ? (
|
||||||
<LoadingSpinner size="6" color="sky-blue" />
|
<LoadingSpinner size="6" color="sky-blue" />
|
||||||
@@ -620,9 +620,9 @@ function AddFundDollars(props) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{selectedOption == "previous" && (
|
{selectedOption == "previous" && (
|
||||||
<div className="md:py-8 add-fund-btn flex justify-end items-center gap-2 py-4">
|
<div className="modal-footer-wrapper flex justify-end items-center gap-2">
|
||||||
<button
|
<button
|
||||||
className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
|
className="custom-btn bg-[#f5a430] text-black text-base"
|
||||||
onClick={props.onClose}
|
onClick={props.onClose}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
@@ -631,7 +631,7 @@ function AddFundDollars(props) {
|
|||||||
onClick={handleSubmit}
|
onClick={handleSubmit}
|
||||||
name="previous"
|
name="previous"
|
||||||
type="button"
|
type="button"
|
||||||
className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
className="custom-btn btn-gradient text-base text-white"
|
||||||
>
|
>
|
||||||
{loadingState ? (
|
{loadingState ? (
|
||||||
<LoadingSpinner size="6" color="sky-blue" />
|
<LoadingSpinner size="6" color="sky-blue" />
|
||||||
|
|||||||
@@ -126,7 +126,7 @@ function AddFundPop({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-[33rem] w-full">
|
<div className="w-full">
|
||||||
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
|
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
|
||||||
<div className="lg:w-2/2 w-full mb-10 lg:mb-0">
|
<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">
|
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
|
||||||
@@ -149,51 +149,51 @@ function AddFundPop({
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
{countryWallet === "US" && (
|
|
||||||
<div className="w-full md:px-8 md:pt-4 px-4 pt-2 bg-white dark:bg-dark-white rounded-2xl">
|
|
||||||
<AddFundDollars
|
|
||||||
setInputError={setInputError}
|
|
||||||
walletItem={walletItem}
|
|
||||||
input={input}
|
|
||||||
setInput={setInput}
|
|
||||||
currency={currency}
|
|
||||||
onClose={onClose}
|
|
||||||
confirmCredit={confirmCredit}
|
|
||||||
setConfirmCredit={setConfirmCredit}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{countryWallet == "NG" && <div className="h-[19rem]"></div>}
|
|
||||||
|
|
||||||
{countryWallet == "NG" && (
|
|
||||||
<div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
|
|
||||||
<button
|
|
||||||
className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center bg-[#f5a430] text-black text-base rounded-full"
|
|
||||||
onClick={onClose}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={handleSubmit}
|
|
||||||
type="button"
|
|
||||||
className="px-4 py-1 h-11 flex justify-center space-x-1 items-center btn-gradient text-base rounded-full text-white max-w-[100px] w-full"
|
|
||||||
>
|
|
||||||
{__awaitComponent.loader ? (
|
|
||||||
<LoadingSpinner size="6" color="sky-blue" />
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<span className="text-white">Continue</span>{" "}
|
|
||||||
<Icons name="chevron-right" />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{countryWallet === "US" && (
|
||||||
|
<div className="w-full bg-white dark:bg-dark-white rounded-2xl">
|
||||||
|
<AddFundDollars
|
||||||
|
setInputError={setInputError}
|
||||||
|
walletItem={walletItem}
|
||||||
|
input={input}
|
||||||
|
setInput={setInput}
|
||||||
|
currency={currency}
|
||||||
|
onClose={onClose}
|
||||||
|
confirmCredit={confirmCredit}
|
||||||
|
setConfirmCredit={setConfirmCredit}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{countryWallet == "NG" && <div className="h-[19rem]"></div>}
|
||||||
|
|
||||||
|
{countryWallet == "NG" && (
|
||||||
|
<div className="modal-footer-wrapper flex justify-end items-center py-4 gap-4">
|
||||||
|
<button
|
||||||
|
className="custom-btn bg-[#f5a430] text-black text-base"
|
||||||
|
onClick={onClose}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleSubmit}
|
||||||
|
type="button"
|
||||||
|
className="custom-btn btn-gradient text-base text-white"
|
||||||
|
>
|
||||||
|
{__awaitComponent.loader ? (
|
||||||
|
<LoadingSpinner size="6" color="sky-blue" />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<span className="text-white">Continue</span>{" "}
|
||||||
|
<Icons name="chevron-right" />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
|
|||||||
data?.result === "Charge success" || data?.status === "successful";
|
data?.result === "Charge success" || data?.status === "successful";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="logout-modal-body w-full flex flex-col items-center">
|
<div className="logout-modal-body w-full">
|
||||||
<div className="content-wrapper w-full h-[32rem]">
|
<div className="content-wrapper w-full h-[32rem]">
|
||||||
<div className="w-full mb-10">
|
<div className="w-full mb-10">
|
||||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
|
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
|
||||||
@@ -97,17 +97,17 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
|
|
||||||
<button
|
|
||||||
className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full w-[100px]"
|
|
||||||
onClick={onClose}
|
|
||||||
>
|
|
||||||
Ok
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="modal-footer-wrapper w-full flex justify-end items-center gap-4">
|
||||||
|
<button
|
||||||
|
className="custom-btn btn-gradient text-white text-base"
|
||||||
|
onClick={onClose}
|
||||||
|
>
|
||||||
|
Ok
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -356,103 +356,105 @@ function ConfirmAddFund({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="content-wrapper w-full h-[32rem]">
|
<>
|
||||||
<div className="w-full mb-10">
|
<div className="content-wrapper w-full h-[32rem]">
|
||||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
|
<div className="w-full mb-10">
|
||||||
<div className="px-4 md:p-8 py-4 add-fund-info">
|
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
|
||||||
<div className="field w-full mb-3 min-h-[45px]">
|
<div className="px-4 md:p-8 py-4 add-fund-info">
|
||||||
{confirmCredit?.show?.awaitConfirm?.state && (
|
<div className="field w-full mb-3 min-h-[45px]">
|
||||||
<div className="flex flex-col gap-2">
|
{confirmCredit?.show?.awaitConfirm?.state && (
|
||||||
<AmountSection
|
<div className="flex flex-col gap-2">
|
||||||
currency={__confirmData?.currency}
|
<AmountSection
|
||||||
amount={__confirmData?.amount}
|
currency={__confirmData?.currency}
|
||||||
country={__confirmCountry}
|
amount={__confirmData?.amount}
|
||||||
/>
|
country={__confirmCountry}
|
||||||
<TransactionFeeSection
|
/>
|
||||||
currency={__confirmData?.currency}
|
<TransactionFeeSection
|
||||||
fee={__confirmData?.fee}
|
currency={__confirmData?.currency}
|
||||||
country={__confirmCountry}
|
fee={__confirmData?.fee}
|
||||||
/>
|
country={__confirmCountry}
|
||||||
<TotalSection
|
/>
|
||||||
currency={__confirmData?.currency}
|
<TotalSection
|
||||||
amount={__confirmData?.amount}
|
currency={__confirmData?.currency}
|
||||||
fee={__confirmData?.fee}
|
amount={__confirmData?.amount}
|
||||||
country={__confirmCountry}
|
fee={__confirmData?.fee}
|
||||||
/>
|
country={__confirmCountry}
|
||||||
{__confirmCountry === "US" && (
|
/>
|
||||||
<div className="flex items-center gap-8">
|
{__confirmCountry === "US" && (
|
||||||
<label
|
<div className="flex items-center gap-8">
|
||||||
htmlFor="payment"
|
<label
|
||||||
className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
|
htmlFor="payment"
|
||||||
>
|
className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
|
||||||
Payment Method
|
>
|
||||||
</label>
|
Payment Method
|
||||||
<span className="text-[#181c32] dark:text-white">
|
</label>
|
||||||
<ThePaymentText
|
<span className="text-[#181c32] dark:text-white">
|
||||||
value={__confirmCardDetails}
|
<ThePaymentText
|
||||||
type={__confirmData?.cardType}
|
value={__confirmCardDetails}
|
||||||
/>
|
type={__confirmData?.cardType}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
className={`${
|
||||||
|
__confirmCountry === "US"
|
||||||
|
? "gap-[3.7rem]"
|
||||||
|
: "gap-[1.81rem]"
|
||||||
|
} flex items-center`}
|
||||||
|
>
|
||||||
|
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||||
|
Reference No
|
||||||
|
</h1>
|
||||||
|
<span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||||
|
{__confirmData?.credit_reference}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
<div
|
|
||||||
className={`${
|
|
||||||
__confirmCountry === "US"
|
|
||||||
? "gap-[3.7rem]"
|
|
||||||
: "gap-[1.81rem]"
|
|
||||||
} flex items-center`}
|
|
||||||
>
|
|
||||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
|
||||||
Reference No
|
|
||||||
</h1>
|
|
||||||
<span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
|
||||||
{__confirmData?.credit_reference}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className={
|
|
||||||
__confirmCountry === "US" ? "min-h-[96px]" : "min-h-[157px]"
|
|
||||||
}
|
|
||||||
></div>
|
|
||||||
<hr />
|
|
||||||
<div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
|
|
||||||
<button
|
|
||||||
className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
|
|
||||||
onClick={getBack}
|
|
||||||
>
|
|
||||||
Back
|
|
||||||
</button>
|
|
||||||
{__confirmCountry === "US" && (
|
|
||||||
<button
|
|
||||||
className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full"
|
|
||||||
onClick={
|
|
||||||
__confirmData?.cardType === "prev"
|
|
||||||
? handlePrevCard
|
|
||||||
: handleNewCard
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{confirmCredit?.show?.acceptConfirm?.loader ? (
|
|
||||||
<LoadingSpinner size="6" color="sky-blue" />
|
|
||||||
) : (
|
|
||||||
"Proceed"
|
|
||||||
)}
|
)}
|
||||||
</button>
|
</div>
|
||||||
)}
|
</div>
|
||||||
{__confirmCountry === "NG" && (
|
|
||||||
<FlutterWaveButton
|
<div
|
||||||
{...fwConfig}
|
className={
|
||||||
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
__confirmCountry === "US" ? "min-h-[96px]" : "min-h-[157px]"
|
||||||
/>
|
}
|
||||||
)}
|
></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div className="modal-footer-wrapper flex justify-end items-center gap-4">
|
||||||
|
<button
|
||||||
|
className="custom-btn bg-[#f5a430] text-black text-base"
|
||||||
|
onClick={getBack}
|
||||||
|
>
|
||||||
|
Back
|
||||||
|
</button>
|
||||||
|
{__confirmCountry === "US" && (
|
||||||
|
<button
|
||||||
|
className="custom-btn btn-gradient text-white text-base"
|
||||||
|
onClick={
|
||||||
|
__confirmData?.cardType === "prev"
|
||||||
|
? handlePrevCard
|
||||||
|
: handleNewCard
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{confirmCredit?.show?.acceptConfirm?.loader ? (
|
||||||
|
<LoadingSpinner size="6" color="sky-blue" />
|
||||||
|
) : (
|
||||||
|
"Proceed"
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{__confirmCountry === "NG" && (
|
||||||
|
<FlutterWaveButton
|
||||||
|
{...fwConfig}
|
||||||
|
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -107,8 +107,8 @@ function ConfirmNairaWithdraw({
|
|||||||
<ModalCom action={action} situation={situation}>
|
<ModalCom action={action} situation={situation}>
|
||||||
<div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
<div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
|
<div className="modal-header-con">
|
||||||
<h2 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
<h2 className="modal-title">
|
||||||
{completeNairaWithdraw.load ? (
|
{completeNairaWithdraw.load ? (
|
||||||
"Confirming..."
|
"Confirming..."
|
||||||
) : (
|
) : (
|
||||||
@@ -126,7 +126,7 @@ function ConfirmNairaWithdraw({
|
|||||||
</h2>
|
</h2>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="text-[#374557] dark:text-red-500"
|
className="modal-close-btn"
|
||||||
onClick={action}
|
onClick={action}
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
@@ -151,7 +151,7 @@ function ConfirmNairaWithdraw({
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
|
<div className="add-fund w-full bg-white dark:bg-dark-white">
|
||||||
{completeNairaWithdraw.load ? (
|
{completeNairaWithdraw.load ? (
|
||||||
<div className="h-[35rem] flex items-center justify-center">
|
<div className="h-[35rem] flex items-center justify-center">
|
||||||
<LoadingSpinner size="12" color="sky-blue" />
|
<LoadingSpinner size="12" color="sky-blue" />
|
||||||
@@ -376,53 +376,52 @@ function ConfirmNairaWithdraw({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!completeNairaWithdraw.load && (
|
|
||||||
<>
|
|
||||||
{" "}
|
|
||||||
<hr />
|
|
||||||
<p
|
|
||||||
className={`text-base ${
|
|
||||||
requestStatus.status ? "text-green-500" : "text-red-500"
|
|
||||||
} px-4 md:px-8 py-4 h-5`}
|
|
||||||
>
|
|
||||||
{requestStatus.message && requestStatus.message}
|
|
||||||
</p>
|
|
||||||
<div className="px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center gap-2">
|
|
||||||
{!completeNairaWithdraw.show && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={action}
|
|
||||||
className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center bg-[#f5a430] text-black text-base rounded-full"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={
|
|
||||||
completeNairaWithdraw.show
|
|
||||||
? action
|
|
||||||
: completeNairaWithdraw?.state?.internal_return < 0
|
|
||||||
? action
|
|
||||||
: handleSubmit
|
|
||||||
}
|
|
||||||
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer min-w-[100px]"
|
|
||||||
>
|
|
||||||
{requestStatus.loading ? (
|
|
||||||
<LoadingSpinner size="6" color="sky-blue" />
|
|
||||||
) : completeNairaWithdraw.show ? (
|
|
||||||
"Okay"
|
|
||||||
) : completeNairaWithdraw?.state?.internal_return < 0 ? (
|
|
||||||
"Cancel"
|
|
||||||
) : (
|
|
||||||
"Transfer"
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{!completeNairaWithdraw.load && (
|
||||||
|
<>
|
||||||
|
<p
|
||||||
|
className={`text-base ${
|
||||||
|
requestStatus.status ? "text-green-500" : "text-red-500"
|
||||||
|
} px-4 md:px-8 py-4 h-5`}
|
||||||
|
>
|
||||||
|
{requestStatus.message && requestStatus.message}
|
||||||
|
</p>
|
||||||
|
<div className="modal-footer-wrapper flex justify-end items-center gap-2">
|
||||||
|
{!completeNairaWithdraw.show && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={action}
|
||||||
|
className="custom-btn bg-[#f5a430] text-black text-base"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={
|
||||||
|
completeNairaWithdraw.show
|
||||||
|
? action
|
||||||
|
: completeNairaWithdraw?.state?.internal_return < 0
|
||||||
|
? action
|
||||||
|
: handleSubmit
|
||||||
|
}
|
||||||
|
className="custom-btn btn-gradient text-base text-white"
|
||||||
|
>
|
||||||
|
{requestStatus.loading ? (
|
||||||
|
<LoadingSpinner size="6" color="sky-blue" />
|
||||||
|
) : completeNairaWithdraw.show ? (
|
||||||
|
"Okay"
|
||||||
|
) : completeNairaWithdraw?.state?.internal_return < 0 ? (
|
||||||
|
"Cancel"
|
||||||
|
) : (
|
||||||
|
"Transfer"
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ModalCom>
|
</ModalCom>
|
||||||
|
|||||||
@@ -36,15 +36,15 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
|
|||||||
className="assign-task-popup"
|
className="assign-task-popup"
|
||||||
>
|
>
|
||||||
<div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
<div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||||
<div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
|
<div className="modal-header-con">
|
||||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
<h1 className="modal-title">
|
||||||
{confirmCredit?.show?.acceptConfirm?.loader
|
{confirmCredit?.show?.acceptConfirm?.loader
|
||||||
? "Confirming Credit..."
|
? "Confirming Credit..."
|
||||||
: getTitle()}
|
: getTitle()}
|
||||||
</h1>
|
</h1>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="text-[#374557] dark:text-red-500"
|
className="modal-close-btn"
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
@@ -68,7 +68,7 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="logout-modal-body w-full flex flex-col items-center">
|
<div className="w-full">
|
||||||
{confirmCredit?.show?.acceptConfirm?.loader ? (
|
{confirmCredit?.show?.acceptConfirm?.loader ? (
|
||||||
<div className="h-[32rem] flex items-center justify-center">
|
<div className="h-[32rem] flex items-center justify-center">
|
||||||
<LoadingSpinner size="12" color="sky-blue" />
|
<LoadingSpinner size="12" color="sky-blue" />
|
||||||
|
|||||||
@@ -292,15 +292,15 @@ function NairaWithdraw({
|
|||||||
<ModalCom action={action} situation={situation}>
|
<ModalCom action={action} situation={situation}>
|
||||||
<div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
<div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
|
<div className="modal-header-con">
|
||||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
<h1 className="modal-title">
|
||||||
{`Withdraw from ${wallet.description} Wallet : ${wallet.symbol}${(
|
{`Withdraw from ${wallet.description} Wallet : ${wallet.symbol}${(
|
||||||
wallet.amount * 0.01
|
wallet.amount * 0.01
|
||||||
).toFixed(2)}`}
|
).toFixed(2)}`}
|
||||||
</h1>
|
</h1>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="text-[#374557] dark:text-red-500"
|
className="modal-close-btn"
|
||||||
onClick={action}
|
onClick={action}
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
@@ -324,479 +324,481 @@ function NairaWithdraw({
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white h-full rounded-2xl">
|
|
||||||
<Formik initialValues={initialValues} onSubmit={handleSubmit}>
|
<Formik initialValues={initialValues} onSubmit={handleSubmit}>
|
||||||
{(props) => {
|
{(props) => {
|
||||||
return (
|
return (
|
||||||
<Form className="transfer-fund-info">
|
<Form className="transfer-fund-info">
|
||||||
{/* Amount Form */}
|
<div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white h-full rounded-2xl">
|
||||||
<div className="flex flex-col">
|
{/* Amount Form */}
|
||||||
<div className="field w-full">
|
<div className="flex flex-col">
|
||||||
<InputCom
|
<div className="field w-full">
|
||||||
fieldClass="px-4 text-end"
|
<InputCom
|
||||||
parentClass="flex items-center gap-1 justify-between"
|
fieldClass="px-4 text-end"
|
||||||
labelClass="flex-[0.4] mb-0"
|
parentClass="flex items-center gap-1 justify-between"
|
||||||
inputClass="flex-[0.6] max-w-[12rem]"
|
labelClass="flex-[0.4] mb-0"
|
||||||
label="Amount:"
|
inputClass="flex-[0.6] max-w-[12rem]"
|
||||||
type="number"
|
label="Amount:"
|
||||||
name="amount"
|
type="number"
|
||||||
placeholder="0"
|
name="amount"
|
||||||
value={props.values.amount}
|
placeholder="0"
|
||||||
inputHandler={props.handleChange}
|
value={props.values.amount}
|
||||||
blurHandler={(e) => {
|
inputHandler={props.handleChange}
|
||||||
getSendMoneyFee(e);
|
blurHandler={(e) => {
|
||||||
}}
|
getSendMoneyFee(e);
|
||||||
error={errorMsgs.amount && errorMsgs.amount}
|
}}
|
||||||
/>
|
error={errorMsgs.amount && errorMsgs.amount}
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="field w-full">
|
|
||||||
<InputCom
|
|
||||||
fieldClass="px-4 transfer-field"
|
|
||||||
parentClass="flex items-center gap-1 justify-between"
|
|
||||||
labelClass="flex-[0.2] mb-0"
|
|
||||||
inputClass="flex-[0.8] transfer-field max-w-[12rem]"
|
|
||||||
label="Fee:"
|
|
||||||
type="text"
|
|
||||||
name="fee"
|
|
||||||
direction="rtl"
|
|
||||||
value={
|
|
||||||
sendMoneyFee.loading
|
|
||||||
? "loading"
|
|
||||||
: (sendMoneyFee.fee * 0.01).toFixed(2)
|
|
||||||
}
|
|
||||||
disable={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="field w-full">
|
|
||||||
<InputCom
|
|
||||||
fieldClass="px-4 transfer-field"
|
|
||||||
parentClass="flex items-center gap-1 justify-between"
|
|
||||||
labelClass="flex-[0.2] mb-0"
|
|
||||||
inputClass="flex-[0.8] transfer-field max-w-[12rem]"
|
|
||||||
label="Total:"
|
|
||||||
type="text"
|
|
||||||
name="total"
|
|
||||||
direction="rtl"
|
|
||||||
value={
|
|
||||||
sendMoneyFee.loading
|
|
||||||
? "loading"
|
|
||||||
: (sendMoneyFee.total * 0.01).toFixed(2)
|
|
||||||
}
|
|
||||||
disable={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="field w-full mb-3 flex gap-1 justify-between">
|
|
||||||
<label className="text-[#181c32] dark:text-white text-base font-semibold flex flex-[0.2] mt-2.5">
|
|
||||||
Comment:
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
style={{ resize: "none" }}
|
|
||||||
className="text-base px-4 py-2 rounded-md sm:max-w-[550px] max-w-[250px] text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none flex-[0.8]"
|
|
||||||
name="comment"
|
|
||||||
value={props.values.comment}
|
|
||||||
onChange={props.handleChange}
|
|
||||||
onBlur={props.handleBlur}
|
|
||||||
cols="30"
|
|
||||||
rows="2"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Account Selector */}
|
|
||||||
<div className=" flex items-center gap-[8rem]">
|
|
||||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
|
||||||
To:
|
|
||||||
</h1>
|
|
||||||
<div className="my-1 flex items-center gap-2">
|
|
||||||
<label
|
|
||||||
onClick={() => setTab("previous")}
|
|
||||||
htmlFor="previous"
|
|
||||||
className="cursor-pointer flex items-center gap-1"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
id="previous"
|
|
||||||
name="choice"
|
|
||||||
value="previous"
|
|
||||||
checked={tab === "previous"}
|
|
||||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
|
||||||
tab == "previous" ? "" : ""
|
|
||||||
} tracking-wide transition duration-200`}
|
|
||||||
/>
|
/>
|
||||||
Previous Account
|
</div>
|
||||||
</label>
|
|
||||||
<label
|
|
||||||
onClick={() => setTab("new")}
|
|
||||||
htmlFor="new"
|
|
||||||
className={`cursor-pointer flex items-center gap-1 ${
|
|
||||||
recipients.data.length >= MaxNoOfBanks
|
|
||||||
? "pointer-events-none"
|
|
||||||
: ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
id="new"
|
|
||||||
type="radio"
|
|
||||||
name="choice"
|
|
||||||
value="new"
|
|
||||||
checked={tab === "new"}
|
|
||||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
|
||||||
tab == "new" ? "" : ""
|
|
||||||
} tracking-wide transition duration-200`}
|
|
||||||
/>
|
|
||||||
New Account{" "}
|
|
||||||
{recipients.data.length >= MaxNoOfBanks && (
|
|
||||||
<span className="text-[14px] text-red-500">
|
|
||||||
Max Reached
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="">
|
<div className="field w-full">
|
||||||
{tab == "previous" && (
|
<InputCom
|
||||||
<>
|
fieldClass="px-4 transfer-field"
|
||||||
<div className="w-full">
|
parentClass="flex items-center gap-1 justify-between"
|
||||||
<div className="relative my-3 md:flex items-center px-4">
|
labelClass="flex-[0.2] mb-0"
|
||||||
<div className="transfer-input w-full flex items-center justify-end">
|
inputClass="flex-[0.8] transfer-field max-w-[12rem]"
|
||||||
{/* <label className="text-[#181c32] dark:text-white text-base font-semibold block flex-[0.2] mb-0 mt-3"></label> */}
|
label="Fee:"
|
||||||
<div className="flex flex-col gap-3 flex-[0.8] items-center">
|
type="text"
|
||||||
<select
|
name="fee"
|
||||||
className="sm:w-full w-48 text-dark-gray border-slate-300 outline-0 flex-[0.8] my-3 rounded-full p-2 outline-none text-base dark:text-gray-100 bg-[#FAFAFA] dark:bg-[#11131F] border appearance-none"
|
direction="rtl"
|
||||||
value={
|
value={
|
||||||
props.values.previousAccount?.recipientID
|
sendMoneyFee.loading
|
||||||
}
|
? "loading"
|
||||||
name="previousAccount.recipientID"
|
: (sendMoneyFee.fee * 0.01).toFixed(2)
|
||||||
onChange={props.handleChange}
|
}
|
||||||
onBlur={props.handleBlur}
|
disable={true}
|
||||||
>
|
/>
|
||||||
{recipients.loading ? (
|
</div>
|
||||||
<option
|
|
||||||
className="text-slate-500 text-lg"
|
<div className="field w-full">
|
||||||
value=""
|
<InputCom
|
||||||
>
|
fieldClass="px-4 transfer-field"
|
||||||
Loading...
|
parentClass="flex items-center gap-1 justify-between"
|
||||||
</option>
|
labelClass="flex-[0.2] mb-0"
|
||||||
) : recipients.data.length ? (
|
inputClass="flex-[0.8] transfer-field max-w-[12rem]"
|
||||||
<>
|
label="Total:"
|
||||||
|
type="text"
|
||||||
|
name="total"
|
||||||
|
direction="rtl"
|
||||||
|
value={
|
||||||
|
sendMoneyFee.loading
|
||||||
|
? "loading"
|
||||||
|
: (sendMoneyFee.total * 0.01).toFixed(2)
|
||||||
|
}
|
||||||
|
disable={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="field w-full mb-3 flex gap-1 justify-between">
|
||||||
|
<label className="text-[#181c32] dark:text-white text-base font-semibold flex flex-[0.2] mt-2.5">
|
||||||
|
Comment:
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
style={{ resize: "none" }}
|
||||||
|
className="text-base px-4 py-2 rounded-md sm:max-w-[550px] max-w-[250px] text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none flex-[0.8]"
|
||||||
|
name="comment"
|
||||||
|
value={props.values.comment}
|
||||||
|
onChange={props.handleChange}
|
||||||
|
onBlur={props.handleBlur}
|
||||||
|
cols="30"
|
||||||
|
rows="2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Account Selector */}
|
||||||
|
<div className=" flex items-center gap-[8rem]">
|
||||||
|
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||||
|
To:
|
||||||
|
</h1>
|
||||||
|
<div className="my-1 flex items-center gap-2">
|
||||||
|
<label
|
||||||
|
onClick={() => setTab("previous")}
|
||||||
|
htmlFor="previous"
|
||||||
|
className="cursor-pointer flex items-center gap-1"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
id="previous"
|
||||||
|
name="choice"
|
||||||
|
value="previous"
|
||||||
|
checked={tab === "previous"}
|
||||||
|
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
||||||
|
tab == "previous" ? "" : ""
|
||||||
|
} tracking-wide transition duration-200`}
|
||||||
|
/>
|
||||||
|
Previous Account
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
onClick={() => setTab("new")}
|
||||||
|
htmlFor="new"
|
||||||
|
className={`cursor-pointer flex items-center gap-1 ${
|
||||||
|
recipients.data.length >= MaxNoOfBanks
|
||||||
|
? "pointer-events-none"
|
||||||
|
: ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
id="new"
|
||||||
|
type="radio"
|
||||||
|
name="choice"
|
||||||
|
value="new"
|
||||||
|
checked={tab === "new"}
|
||||||
|
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
|
||||||
|
tab == "new" ? "" : ""
|
||||||
|
} tracking-wide transition duration-200`}
|
||||||
|
/>
|
||||||
|
New Account{" "}
|
||||||
|
{recipients.data.length >= MaxNoOfBanks && (
|
||||||
|
<span className="text-[14px] text-red-500">
|
||||||
|
Max Reached
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="">
|
||||||
|
{tab == "previous" && (
|
||||||
|
<>
|
||||||
|
<div className="w-full">
|
||||||
|
<div className="relative my-3 md:flex items-center px-4">
|
||||||
|
<div className="transfer-input w-full flex items-center justify-end">
|
||||||
|
{/* <label className="text-[#181c32] dark:text-white text-base font-semibold block flex-[0.2] mb-0 mt-3"></label> */}
|
||||||
|
<div className="flex flex-col gap-3 flex-[0.8] items-center">
|
||||||
|
<select
|
||||||
|
className="sm:w-full w-48 text-dark-gray border-slate-300 outline-0 flex-[0.8] my-3 rounded-full p-2 outline-none text-base dark:text-gray-100 bg-[#FAFAFA] dark:bg-[#11131F] border appearance-none"
|
||||||
|
value={
|
||||||
|
props.values.previousAccount?.recipientID
|
||||||
|
}
|
||||||
|
name="previousAccount.recipientID"
|
||||||
|
onChange={props.handleChange}
|
||||||
|
onBlur={props.handleBlur}
|
||||||
|
>
|
||||||
|
{recipients.loading ? (
|
||||||
<option
|
<option
|
||||||
className="text-slate-500 text-lg"
|
className="text-slate-500 text-lg"
|
||||||
value=""
|
value=""
|
||||||
>
|
>
|
||||||
{errorMsgs.previousAccount
|
Loading...
|
||||||
?.recipientID
|
|
||||||
? errorMsgs.previousAccount
|
|
||||||
.recipientID
|
|
||||||
: "Select an account"}
|
|
||||||
</option>
|
</option>
|
||||||
{recipients.data.map((item, index) => (
|
) : recipients.data.length ? (
|
||||||
|
<>
|
||||||
<option
|
<option
|
||||||
key={index}
|
|
||||||
value={item.recipient_uid}
|
|
||||||
className="text-slate-500 text-lg"
|
className="text-slate-500 text-lg"
|
||||||
|
value=""
|
||||||
>
|
>
|
||||||
{item.recipient}
|
{errorMsgs.previousAccount
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
) : recipients.error ? (
|
|
||||||
<option
|
|
||||||
className="text-slate-500 text-lg"
|
|
||||||
value=""
|
|
||||||
>
|
|
||||||
Could'nt load, !
|
|
||||||
</option>
|
|
||||||
) : (
|
|
||||||
<option
|
|
||||||
className="text-slate-500 text-lg"
|
|
||||||
value=""
|
|
||||||
>
|
|
||||||
No Recipient Found!
|
|
||||||
</option>
|
|
||||||
)}
|
|
||||||
</select>
|
|
||||||
<div className="flex justify-end relative w-full">
|
|
||||||
{errorMsgs.previousAccount?.recipientID &&
|
|
||||||
errorMsgs.previousAccount
|
|
||||||
?.recipientID && (
|
|
||||||
<p className="sm:text-sm text-[12px] text-red-500 absolute sm:top-1 -top-20 sm:left-0 left-[160px]">
|
|
||||||
{
|
|
||||||
errorMsgs.previousAccount
|
|
||||||
?.recipientID
|
?.recipientID
|
||||||
}
|
? errorMsgs.previousAccount
|
||||||
</p>
|
.recipientID
|
||||||
|
: "Select an account"}
|
||||||
|
</option>
|
||||||
|
{recipients.data.map((item, index) => (
|
||||||
|
<option
|
||||||
|
key={index}
|
||||||
|
value={item.recipient_uid}
|
||||||
|
className="text-slate-500 text-lg"
|
||||||
|
>
|
||||||
|
{item.recipient}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
) : recipients.error ? (
|
||||||
|
<option
|
||||||
|
className="text-slate-500 text-lg"
|
||||||
|
value=""
|
||||||
|
>
|
||||||
|
Could'nt load, !
|
||||||
|
</option>
|
||||||
|
) : (
|
||||||
|
<option
|
||||||
|
className="text-slate-500 text-lg"
|
||||||
|
value=""
|
||||||
|
>
|
||||||
|
No Recipient Found!
|
||||||
|
</option>
|
||||||
)}
|
)}
|
||||||
|
</select>
|
||||||
|
<div className="flex justify-end relative w-full">
|
||||||
|
{errorMsgs.previousAccount?.recipientID &&
|
||||||
|
errorMsgs.previousAccount
|
||||||
|
?.recipientID && (
|
||||||
|
<p className="sm:text-sm text-[12px] text-red-500 absolute sm:top-1 -top-20 sm:left-0 left-[160px]">
|
||||||
|
{
|
||||||
|
errorMsgs.previousAccount
|
||||||
|
?.recipientID
|
||||||
|
}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="h-[6.1rem]"></div>
|
||||||
<div className="h-[6.1rem]"></div>
|
</>
|
||||||
</>
|
)}
|
||||||
)}
|
|
||||||
|
|
||||||
{tab == "new" &&
|
{tab == "new" &&
|
||||||
(recipients.loading ? (
|
(recipients.loading ? (
|
||||||
<div className="mt-3 flex flex-col w-full h-[188px] justify-center items-center">
|
<div className="mt-3 flex flex-col w-full h-[188px] justify-center items-center">
|
||||||
<LoadingSpinner size="10" color="sky-blue" />
|
<LoadingSpinner size="10" color="sky-blue" />
|
||||||
</div>
|
|
||||||
) : recipients.data.length < MaxNoOfBanks ? (
|
|
||||||
<div className="w-full mt-3 rounded-md bg-slate-100">
|
|
||||||
<div className="relative fields w-full flex flex-col p-4">
|
|
||||||
<div className="flex flex-[2] min-h-[52px]">
|
|
||||||
{/* country */}
|
|
||||||
<div className="add-recipient w-full flex items-center flex-1 xl:mb-0">
|
|
||||||
<label
|
|
||||||
htmlFor="newAccount.country"
|
|
||||||
className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.3]"
|
|
||||||
>
|
|
||||||
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">
|
|
||||||
<span className="text-slate-500 text-lg italic">
|
|
||||||
{wallet.walletCountry[0]?.country}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{/* <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 tracking-[1.5px]"
|
|
||||||
name="newAccount.country"
|
|
||||||
value={props.values.newAccount?.country}
|
|
||||||
onChange={(e) => {
|
|
||||||
props.handleChange(e);
|
|
||||||
handleBankOptions(e);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{allCountries.loading ? (
|
|
||||||
<option
|
|
||||||
className="text-slate-500 text-lg"
|
|
||||||
value=""
|
|
||||||
>
|
|
||||||
Loading...
|
|
||||||
</option>
|
|
||||||
) : allCountries.data?.length ? (
|
|
||||||
<>
|
|
||||||
<option
|
|
||||||
className="text-slate-500 text-lg"
|
|
||||||
value=""
|
|
||||||
>
|
|
||||||
{errorMsgs.newAccount?.country
|
|
||||||
? errorMsgs.newAccount.country
|
|
||||||
: "Select..."}
|
|
||||||
</option>
|
|
||||||
{allCountries.data.map((item, index) => (
|
|
||||||
<option
|
|
||||||
key={index}
|
|
||||||
className="text-slate-500 text-lg"
|
|
||||||
value={item[0]}
|
|
||||||
>
|
|
||||||
{item[1]}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<option
|
|
||||||
className="text-slate-500 text-lg"
|
|
||||||
value=""
|
|
||||||
>
|
|
||||||
No Options Found!
|
|
||||||
</option>
|
|
||||||
)}
|
|
||||||
</select> */}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* bank name */}
|
|
||||||
<div className="add-recipient w-full flex items-center flex-1">
|
|
||||||
<label
|
|
||||||
htmlFor="newAccount.bank"
|
|
||||||
className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4] tracking-[1.5px]"
|
|
||||||
>
|
|
||||||
Bank Name{" "}
|
|
||||||
<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 "
|
|
||||||
name="newAccount.bank"
|
|
||||||
value={props.values.newAccount?.bank}
|
|
||||||
onChange={props.handleChange}
|
|
||||||
onBlur={props.handleBlur}
|
|
||||||
>
|
|
||||||
{bankName.loading ? (
|
|
||||||
<option
|
|
||||||
className="text-slate-500 text-lg"
|
|
||||||
value=""
|
|
||||||
>
|
|
||||||
Loading...
|
|
||||||
</option>
|
|
||||||
) : bankName.data?.length ? (
|
|
||||||
<>
|
|
||||||
<option
|
|
||||||
className="text-slate-500 text-lg"
|
|
||||||
value=""
|
|
||||||
>
|
|
||||||
Select...
|
|
||||||
</option>
|
|
||||||
{bankName.data?.map((item, index) => (
|
|
||||||
<option
|
|
||||||
key={index}
|
|
||||||
className="text-slate-500 text-lg"
|
|
||||||
value={item.bank_uid}
|
|
||||||
>
|
|
||||||
{item.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<option
|
|
||||||
className="text-slate-500 text-lg"
|
|
||||||
value=""
|
|
||||||
>
|
|
||||||
{allCountries.data?.length
|
|
||||||
? "Select..."
|
|
||||||
: "No Options Found!"}
|
|
||||||
</option>
|
|
||||||
)}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-[2] gap-4">
|
|
||||||
{/* ACCOUNT NUMBER */}
|
|
||||||
<div className="field w-full flex-[1.4] flex items-center gap-2">
|
|
||||||
<label
|
|
||||||
htmlFor="newAccount.accountNumber"
|
|
||||||
className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex items-center flex-1"
|
|
||||||
>
|
|
||||||
Account Number{" "}
|
|
||||||
<span className="text-red-500">*</span>
|
|
||||||
</label>
|
|
||||||
<InputCom
|
|
||||||
fieldClass="px-6 tracking-[1.5px]"
|
|
||||||
inputClass="flex items-center max-w-[15rem]"
|
|
||||||
type="text"
|
|
||||||
name="newAccount.accountNumber"
|
|
||||||
placeholder="Account No"
|
|
||||||
maxLength={10}
|
|
||||||
value={
|
|
||||||
props.values.newAccount?.accountNumber
|
|
||||||
}
|
|
||||||
inputHandler={props.handleChange}
|
|
||||||
blurHandler={props.handleBlur}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Account Type */}
|
|
||||||
<div className="add-recipient w-full flex flex-1 items-center">
|
|
||||||
<label
|
|
||||||
htmlFor="newAccount.accountType"
|
|
||||||
className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.3]"
|
|
||||||
>
|
|
||||||
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]"
|
|
||||||
name="newAccount.accountType"
|
|
||||||
value={props.values.newAccount?.accountType}
|
|
||||||
onChange={props.handleChange}
|
|
||||||
onBlur={props.handleBlur}
|
|
||||||
>
|
|
||||||
{accType.loading ? (
|
|
||||||
<option
|
|
||||||
className="text-slate-500 text-lg"
|
|
||||||
value=""
|
|
||||||
>
|
|
||||||
Loading...
|
|
||||||
</option>
|
|
||||||
) : accType.data?.length ? (
|
|
||||||
<>
|
|
||||||
<option
|
|
||||||
className="text-slate-500 text-lg"
|
|
||||||
value=""
|
|
||||||
>
|
|
||||||
Select...
|
|
||||||
</option>
|
|
||||||
{accType.data?.map((item, index) => (
|
|
||||||
<option
|
|
||||||
key={index}
|
|
||||||
className="text-slate-500 text-lg"
|
|
||||||
value={item.value}
|
|
||||||
>
|
|
||||||
{item.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<option
|
|
||||||
className="text-slate-500 text-lg"
|
|
||||||
value=""
|
|
||||||
>
|
|
||||||
No Options Found!
|
|
||||||
</option>
|
|
||||||
)}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center flex-1">
|
|
||||||
{/* state */}
|
|
||||||
<div className="field w-full flex items-center gap-4 flex-[0.4]">
|
|
||||||
<label
|
|
||||||
htmlFor="newAccount.state"
|
|
||||||
className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4]"
|
|
||||||
>
|
|
||||||
State{" "}
|
|
||||||
<span className="text-red-500">*</span>
|
|
||||||
</label>
|
|
||||||
<InputCom
|
|
||||||
fieldClass="px-6 tracking-[1.5px]"
|
|
||||||
inputClass="max-w-[10rem]"
|
|
||||||
type="text"
|
|
||||||
name="newAccount.state"
|
|
||||||
placeholder="State/Province"
|
|
||||||
value={props.values.newAccount?.state}
|
|
||||||
inputHandler={props.handleChange}
|
|
||||||
blurHandler={props.handleBlur}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* city */}
|
|
||||||
<div className="field w-full flex items-center flex-[0.4]">
|
|
||||||
<label
|
|
||||||
htmlFor="newAccount.city"
|
|
||||||
className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4]"
|
|
||||||
>
|
|
||||||
City <span className="text-red-500">*</span>
|
|
||||||
</label>
|
|
||||||
<InputCom
|
|
||||||
fieldClass="px-6 tracking-[1.5px]"
|
|
||||||
type="text"
|
|
||||||
inputClass="max-w-[10rem]"
|
|
||||||
name="newAccount.city"
|
|
||||||
placeholder="City"
|
|
||||||
value={props.values.newAccount?.city}
|
|
||||||
inputHandler={props.handleChange}
|
|
||||||
blurHandler={props.handleBlur}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* end of inputs for new accounts */}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
) : recipients.data.length < MaxNoOfBanks ? (
|
||||||
) : (
|
<div className="w-full mt-3 rounded-md bg-slate-100">
|
||||||
<div className="mt-3 flex w-full h-[188px] justify-center items-center"></div>
|
<div className="relative fields w-full flex flex-col p-4">
|
||||||
))}
|
<div className="flex flex-[2] min-h-[52px]">
|
||||||
|
{/* country */}
|
||||||
|
<div className="add-recipient w-full flex items-center flex-1 xl:mb-0">
|
||||||
|
<label
|
||||||
|
htmlFor="newAccount.country"
|
||||||
|
className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.3]"
|
||||||
|
>
|
||||||
|
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">
|
||||||
|
<span className="text-slate-500 text-lg italic">
|
||||||
|
{wallet.walletCountry[0]?.country}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{/* <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 tracking-[1.5px]"
|
||||||
|
name="newAccount.country"
|
||||||
|
value={props.values.newAccount?.country}
|
||||||
|
onChange={(e) => {
|
||||||
|
props.handleChange(e);
|
||||||
|
handleBankOptions(e);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{allCountries.loading ? (
|
||||||
|
<option
|
||||||
|
className="text-slate-500 text-lg"
|
||||||
|
value=""
|
||||||
|
>
|
||||||
|
Loading...
|
||||||
|
</option>
|
||||||
|
) : allCountries.data?.length ? (
|
||||||
|
<>
|
||||||
|
<option
|
||||||
|
className="text-slate-500 text-lg"
|
||||||
|
value=""
|
||||||
|
>
|
||||||
|
{errorMsgs.newAccount?.country
|
||||||
|
? errorMsgs.newAccount.country
|
||||||
|
: "Select..."}
|
||||||
|
</option>
|
||||||
|
{allCountries.data.map((item, index) => (
|
||||||
|
<option
|
||||||
|
key={index}
|
||||||
|
className="text-slate-500 text-lg"
|
||||||
|
value={item[0]}
|
||||||
|
>
|
||||||
|
{item[1]}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<option
|
||||||
|
className="text-slate-500 text-lg"
|
||||||
|
value=""
|
||||||
|
>
|
||||||
|
No Options Found!
|
||||||
|
</option>
|
||||||
|
)}
|
||||||
|
</select> */}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* bank name */}
|
||||||
|
<div className="add-recipient w-full flex items-center flex-1">
|
||||||
|
<label
|
||||||
|
htmlFor="newAccount.bank"
|
||||||
|
className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4] tracking-[1.5px]"
|
||||||
|
>
|
||||||
|
Bank Name{" "}
|
||||||
|
<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 "
|
||||||
|
name="newAccount.bank"
|
||||||
|
value={props.values.newAccount?.bank}
|
||||||
|
onChange={props.handleChange}
|
||||||
|
onBlur={props.handleBlur}
|
||||||
|
>
|
||||||
|
{bankName.loading ? (
|
||||||
|
<option
|
||||||
|
className="text-slate-500 text-lg"
|
||||||
|
value=""
|
||||||
|
>
|
||||||
|
Loading...
|
||||||
|
</option>
|
||||||
|
) : bankName.data?.length ? (
|
||||||
|
<>
|
||||||
|
<option
|
||||||
|
className="text-slate-500 text-lg"
|
||||||
|
value=""
|
||||||
|
>
|
||||||
|
Select...
|
||||||
|
</option>
|
||||||
|
{bankName.data?.map((item, index) => (
|
||||||
|
<option
|
||||||
|
key={index}
|
||||||
|
className="text-slate-500 text-lg"
|
||||||
|
value={item.bank_uid}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<option
|
||||||
|
className="text-slate-500 text-lg"
|
||||||
|
value=""
|
||||||
|
>
|
||||||
|
{allCountries.data?.length
|
||||||
|
? "Select..."
|
||||||
|
: "No Options Found!"}
|
||||||
|
</option>
|
||||||
|
)}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-[2] gap-4">
|
||||||
|
{/* ACCOUNT NUMBER */}
|
||||||
|
<div className="field w-full flex-[1.4] flex items-center gap-2">
|
||||||
|
<label
|
||||||
|
htmlFor="newAccount.accountNumber"
|
||||||
|
className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex items-center flex-1"
|
||||||
|
>
|
||||||
|
Account Number{" "}
|
||||||
|
<span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<InputCom
|
||||||
|
fieldClass="px-6 tracking-[1.5px]"
|
||||||
|
inputClass="flex items-center max-w-[15rem]"
|
||||||
|
type="text"
|
||||||
|
name="newAccount.accountNumber"
|
||||||
|
placeholder="Account No"
|
||||||
|
maxLength={10}
|
||||||
|
value={
|
||||||
|
props.values.newAccount?.accountNumber
|
||||||
|
}
|
||||||
|
inputHandler={props.handleChange}
|
||||||
|
blurHandler={props.handleBlur}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Account Type */}
|
||||||
|
<div className="add-recipient w-full flex flex-1 items-center">
|
||||||
|
<label
|
||||||
|
htmlFor="newAccount.accountType"
|
||||||
|
className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.3]"
|
||||||
|
>
|
||||||
|
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]"
|
||||||
|
name="newAccount.accountType"
|
||||||
|
value={props.values.newAccount?.accountType}
|
||||||
|
onChange={props.handleChange}
|
||||||
|
onBlur={props.handleBlur}
|
||||||
|
>
|
||||||
|
{accType.loading ? (
|
||||||
|
<option
|
||||||
|
className="text-slate-500 text-lg"
|
||||||
|
value=""
|
||||||
|
>
|
||||||
|
Loading...
|
||||||
|
</option>
|
||||||
|
) : accType.data?.length ? (
|
||||||
|
<>
|
||||||
|
<option
|
||||||
|
className="text-slate-500 text-lg"
|
||||||
|
value=""
|
||||||
|
>
|
||||||
|
Select...
|
||||||
|
</option>
|
||||||
|
{accType.data?.map((item, index) => (
|
||||||
|
<option
|
||||||
|
key={index}
|
||||||
|
className="text-slate-500 text-lg"
|
||||||
|
value={item.value}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<option
|
||||||
|
className="text-slate-500 text-lg"
|
||||||
|
value=""
|
||||||
|
>
|
||||||
|
No Options Found!
|
||||||
|
</option>
|
||||||
|
)}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center flex-1">
|
||||||
|
{/* state */}
|
||||||
|
<div className="field w-full flex items-center gap-4 flex-[0.4]">
|
||||||
|
<label
|
||||||
|
htmlFor="newAccount.state"
|
||||||
|
className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4]"
|
||||||
|
>
|
||||||
|
State{" "}
|
||||||
|
<span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<InputCom
|
||||||
|
fieldClass="px-6 tracking-[1.5px]"
|
||||||
|
inputClass="max-w-[10rem]"
|
||||||
|
type="text"
|
||||||
|
name="newAccount.state"
|
||||||
|
placeholder="State/Province"
|
||||||
|
value={props.values.newAccount?.state}
|
||||||
|
inputHandler={props.handleChange}
|
||||||
|
blurHandler={props.handleBlur}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* city */}
|
||||||
|
<div className="field w-full flex items-center flex-[0.4]">
|
||||||
|
<label
|
||||||
|
htmlFor="newAccount.city"
|
||||||
|
className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4]"
|
||||||
|
>
|
||||||
|
City <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<InputCom
|
||||||
|
fieldClass="px-6 tracking-[1.5px]"
|
||||||
|
type="text"
|
||||||
|
inputClass="max-w-[10rem]"
|
||||||
|
name="newAccount.city"
|
||||||
|
placeholder="City"
|
||||||
|
value={props.values.newAccount?.city}
|
||||||
|
inputHandler={props.handleChange}
|
||||||
|
blurHandler={props.handleBlur}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* end of inputs for new accounts */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="mt-3 flex w-full h-[188px] justify-center items-center"></div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="transfer-fund-btn flex justify-end items-center gap-2 py-4">
|
<div className="modal-footer-wrapper flex justify-end items-center gap-2 py-4">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={action}
|
onClick={action}
|
||||||
className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
|
className="custom-btn bg-[#f5a430] text-black text-base"
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
@@ -808,7 +810,7 @@ function NairaWithdraw({
|
|||||||
? true
|
? true
|
||||||
: false
|
: false
|
||||||
}
|
}
|
||||||
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer min-w-[100px] flex justify-center items-center"
|
className="custom-btn btn-gradient text-base text-white"
|
||||||
>
|
>
|
||||||
{requestStatus ? (
|
{requestStatus ? (
|
||||||
<LoadingSpinner size="6" color="sky-blue" />
|
<LoadingSpinner size="6" color="sky-blue" />
|
||||||
@@ -818,10 +820,9 @@ function NairaWithdraw({
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</Form>
|
</Form>
|
||||||
);
|
)
|
||||||
}}
|
}}
|
||||||
</Formik>
|
</Formik>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ModalCom>
|
</ModalCom>
|
||||||
|
|||||||
@@ -23,14 +23,14 @@ function WalletAction({ walletItem, payment, openPopUp }) {
|
|||||||
}}
|
}}
|
||||||
className={`${
|
className={`${
|
||||||
walletItem.code != "NAIRA" && "invisible"
|
walletItem.code != "NAIRA" && "invisible"
|
||||||
} px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
|
} custom-btn btn-gradient text-white`}
|
||||||
>
|
>
|
||||||
Spend
|
Spend
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-1/2 flex justify-center items-center">
|
<div className="w-1/2 flex justify-center items-center">
|
||||||
<button
|
<button
|
||||||
className="px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
className="custom-btn btn-gradient text-white"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
openPopUp({
|
openPopUp({
|
||||||
payment: payment,
|
payment: payment,
|
||||||
|
|||||||
@@ -165,7 +165,7 @@ export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpa
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Back BTN AND TITLE */}
|
{/* Back BTN AND TITLE */}
|
||||||
{/* <div className="pl-4 w-full flex justify-start gap-3 items-center">
|
<div className="pl-4 w-full flex justify-start gap-3 items-center">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="min-w-[35px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
|
className="min-w-[35px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
|
||||||
@@ -202,7 +202,7 @@ export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpa
|
|||||||
<h1 className="text-base md:text-[20px] font-bold text-dark-gray dark:text-white tracking-wide">
|
<h1 className="text-base md:text-[20px] font-bold text-dark-gray dark:text-white tracking-wide">
|
||||||
{title && title}
|
{title && title}
|
||||||
</h1>
|
</h1>
|
||||||
</div> */}
|
</div>
|
||||||
|
|
||||||
|
|
||||||
{/* user info */}
|
{/* user info */}
|
||||||
|
|||||||
@@ -182,6 +182,9 @@
|
|||||||
.custom-btn {
|
.custom-btn {
|
||||||
@apply px-2 min-w-[80px] h-11 flex justify-center items-center text-base rounded-full cursor-pointer
|
@apply px-2 min-w-[80px] h-11 flex justify-center items-center text-base rounded-full cursor-pointer
|
||||||
}
|
}
|
||||||
|
.logout-btn {
|
||||||
|
@apply px-4 min-w-[80px] h-[52px] flex justify-center items-center text-base rounded-full cursor-pointer
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===================== EXTRA ===================== */
|
/* ===================== EXTRA ===================== */
|
||||||
|
|||||||
Reference in New Issue
Block a user