Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
8a7b56068d | ||
|
victorAnumudu
|
bb5a966249 | ||
 ameye
|
199dec01fe | ||
|
victorAnumudu
|
3775c520ff | ||
|
ameye
|
bf19dfe86a | ||
|
victorAnumudu
|
4b7c3beb53 | ||
|
ameye
|
f032ed21b5 |
@@ -49,10 +49,14 @@ export default function AssignMediaTask({
|
||||
family_uid
|
||||
}) {
|
||||
|
||||
const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
|
||||
|
||||
const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
|
||||
|
||||
// For form initial values
|
||||
const initialValues = {
|
||||
// initial values for formik
|
||||
currency: "",
|
||||
currency: walletDetails.data.length == 1 ? walletDetails.data[0].country : '',
|
||||
amount: "",
|
||||
job_description: "",
|
||||
timeline_days: "",
|
||||
@@ -62,9 +66,7 @@ export default function AssignMediaTask({
|
||||
};
|
||||
|
||||
|
||||
const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
|
||||
|
||||
const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
|
||||
|
||||
// let imageSrc = (localStorage.getItem("session_token")
|
||||
// ? `${userDetails?.session_image_server}${localStorage.getItem("session_token")}/job/${activeMedia.uid}` : ""); // FOR GETTING JOB IMAGE
|
||||
@@ -142,9 +144,9 @@ export default function AssignMediaTask({
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{/* 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">
|
||||
Price
|
||||
Reward
|
||||
<span className='text-red-500 text-base'>{props.errors.amount && props.touched.amount && '*'}</span>
|
||||
</label>
|
||||
<InputCom
|
||||
@@ -162,10 +164,10 @@ export default function AssignMediaTask({
|
||||
</div>
|
||||
|
||||
{/* Currency */}
|
||||
<div className="field w-full">
|
||||
<div className="field w-full flex flex-col justify-between">
|
||||
<label
|
||||
htmlFor="currency"
|
||||
className="job-label flex gap-1"
|
||||
className="job-label flex gap-1 invisible"
|
||||
>
|
||||
Currency
|
||||
{props.errors.currency && props.touched.currency && <span className="text-base text-red-500">*</span>}
|
||||
@@ -174,8 +176,9 @@ export default function AssignMediaTask({
|
||||
id="currency"
|
||||
name="currency"
|
||||
value={props.values.currency}
|
||||
className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
|
||||
className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${props.errors.currency && props.touched.currency && 'border border-red-500'}`}
|
||||
onChange={props.handleChange}
|
||||
disabled={walletDetails.data.length == 1}
|
||||
>
|
||||
{walletDetails?.loading ? (
|
||||
<option className="text-slate-500 text-[13.975px]" value="">
|
||||
@@ -183,18 +186,34 @@ export default function AssignMediaTask({
|
||||
</option>
|
||||
) : walletDetails.data.length ? (
|
||||
<>
|
||||
<option className="text-slate-500 text-[13.975px]" value="">
|
||||
Select
|
||||
</option>
|
||||
{walletDetails.data?.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
className="text-slate-500 text-lg"
|
||||
value={item?.country}
|
||||
>
|
||||
{item?.code}
|
||||
</option>
|
||||
))}
|
||||
{walletDetails.data.length == 1 ?
|
||||
<>
|
||||
{walletDetails.data?.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
className="text-slate-500 text-lg"
|
||||
value={item?.country}
|
||||
>
|
||||
{item?.code}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
:
|
||||
<>
|
||||
<option className="text-slate-500 text-[13.975px]" value="">
|
||||
Select
|
||||
</option>
|
||||
{walletDetails.data?.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
className="text-slate-500 text-lg"
|
||||
value={item?.country}
|
||||
>
|
||||
{item?.code}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
}
|
||||
</>
|
||||
) : (
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
@@ -205,7 +224,7 @@ export default function AssignMediaTask({
|
||||
</div>
|
||||
|
||||
{/* Duration */}
|
||||
<div className="field w-full">
|
||||
<div className="field w-full flex flex-col justify-between">
|
||||
<label
|
||||
htmlFor="timeline_days"
|
||||
className="job-label flex gap-1"
|
||||
@@ -223,7 +242,7 @@ export default function AssignMediaTask({
|
||||
{publicArray.length && (
|
||||
<>
|
||||
<option className="text-slate-500 text-[13.975px]" value="">
|
||||
Duration
|
||||
Select
|
||||
</option>
|
||||
{publicArray.map(({ name, duration }, idx) => (
|
||||
<option
|
||||
|
||||
@@ -26,6 +26,9 @@ const AssignTaskPopout = ({
|
||||
}) => {
|
||||
const {parentAssignJobToKid} = SocketValues()
|
||||
|
||||
const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
|
||||
|
||||
|
||||
const apiCall = new usersService();
|
||||
|
||||
let { pathname, state } = useLocation();
|
||||
@@ -86,7 +89,7 @@ const AssignTaskPopout = ({
|
||||
const [formState, setFormState] = useState({
|
||||
// Initialize form state with desired fields
|
||||
banner: details?.banner || "default.jpg",
|
||||
country: details?.country || "",
|
||||
country: details?.country ? details?.country : walletDetails.data.length == 1 ? walletDetails.data[0].country : '',
|
||||
price: details?.price || "",
|
||||
title: details?.title || "",
|
||||
description: details?.description || "",
|
||||
|
||||
@@ -102,7 +102,7 @@ export default function NewTasks({ formState, setFormState }) {
|
||||
htmlFor="Job Delivery Details"
|
||||
className='job-label'
|
||||
>
|
||||
Job Delivery Details
|
||||
Delivery Detail
|
||||
{/* {props.errors.job_detail && props.touched.job_detail && <span className="text-[12px] text-red-500">{props.errors.job_detail}</span>} */}
|
||||
</label>
|
||||
<textarea
|
||||
@@ -144,7 +144,7 @@ export default function NewTasks({ formState, setFormState }) {
|
||||
<div className="field w-full">
|
||||
<label
|
||||
htmlFor="country"
|
||||
className="job-label"
|
||||
className="job-label invisible"
|
||||
>
|
||||
Currency
|
||||
{/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
|
||||
@@ -155,6 +155,7 @@ export default function NewTasks({ formState, setFormState }) {
|
||||
value={formState.country}
|
||||
className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
|
||||
onChange={handleInputChange}
|
||||
disabled={walletDetails.data.length == 1}
|
||||
// onBlur={props.handleBlur}
|
||||
>
|
||||
{walletDetails?.loading ? (
|
||||
@@ -163,18 +164,34 @@ export default function NewTasks({ formState, setFormState }) {
|
||||
</option>
|
||||
) : walletDetails.data.length ? (
|
||||
<>
|
||||
<option className="text-slate-500 text-[13.975px]" value="">
|
||||
Select
|
||||
</option>
|
||||
{walletDetails.data?.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
className="text-slate-500 text-lg"
|
||||
value={item?.country}
|
||||
>
|
||||
{item?.code}
|
||||
</option>
|
||||
))}
|
||||
{walletDetails.data.length == 1 ?
|
||||
<>
|
||||
{walletDetails.data?.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
className="text-slate-500 text-lg"
|
||||
value={item?.country}
|
||||
>
|
||||
{item?.code}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
:
|
||||
<>
|
||||
<option className="text-slate-500 text-[13.975px]" value="">
|
||||
Select
|
||||
</option>
|
||||
{walletDetails.data?.map((item, index) => (
|
||||
<option
|
||||
key={index}
|
||||
className="text-slate-500 text-lg"
|
||||
value={item?.country}
|
||||
>
|
||||
{item?.code}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
}
|
||||
</>
|
||||
) : (
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
@@ -205,7 +222,7 @@ export default function NewTasks({ formState, setFormState }) {
|
||||
{publicArray.length && (
|
||||
<>
|
||||
<option className="text-slate-500 text-[13.975px]" value="">
|
||||
Duration
|
||||
Select
|
||||
</option>
|
||||
{publicArray.map(({ name, duration }, idx) => (
|
||||
<option
|
||||
|
||||
@@ -277,7 +277,7 @@ function ActiveJobsMedia(props) {
|
||||
state={props.details.accountDetails}
|
||||
>
|
||||
{/* 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 flex justify-start space-x-3 items-start">
|
||||
<button
|
||||
@@ -310,7 +310,7 @@ function ActiveJobsMedia(props) {
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
{/* 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">
|
||||
@@ -320,7 +320,7 @@ function ActiveJobsMedia(props) {
|
||||
<VideoElement videoId={props?.details?.media_uid} />
|
||||
</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">
|
||||
<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">
|
||||
Description:{" "}
|
||||
</p>
|
||||
<p className="p-2 border border-sky-blue">
|
||||
<p className="p-2 ml-8 border border-sky-blue">
|
||||
{props?.details && props.details.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-2">
|
||||
<IndexJobActions details={props.details} />
|
||||
<div className="mt-6 w-full lg:flex gap-8">
|
||||
<div className="w-full text-base dark:text-white tracking-wide">
|
||||
<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>
|
||||
|
||||
@@ -389,14 +399,14 @@ function ActiveJobsMedia(props) {
|
||||
day(s)
|
||||
</span>
|
||||
</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">
|
||||
No:{" "}
|
||||
</span>
|
||||
<span className="">
|
||||
{props.details?.contract && props.details.contract}
|
||||
</span>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
{/* end of job details */}
|
||||
</div>
|
||||
|
||||
@@ -65,7 +65,7 @@ function CurrentTaskAction({jobDetails}) {
|
||||
<div className="w-full text-sm text-left text-gray-500">
|
||||
{jobDetails.job_type == 'MEDIA' ?
|
||||
<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
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -259,7 +259,7 @@ function AddFundDollars(props) {
|
||||
<div className="w-full">
|
||||
{/* switch button */}
|
||||
<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">
|
||||
{countryWallet == "US" && "Payment Method"}
|
||||
</h1>
|
||||
@@ -313,7 +313,7 @@ function AddFundDollars(props) {
|
||||
|
||||
{/* previous selectedOption */}
|
||||
{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 ? (
|
||||
<LoadingSpinner size="10" color="sky-blue" />
|
||||
) : payListCards?.data?.length ? (
|
||||
@@ -367,7 +367,7 @@ function AddFundDollars(props) {
|
||||
)}
|
||||
|
||||
{selectedOption === "new" && (
|
||||
<div className="new-details w-full max-h-[22rem]">
|
||||
<div className="new-details w-full">
|
||||
{payListCards.loading ? (
|
||||
<div className="pt-10 flex w-full h-full justify-center items-center">
|
||||
<LoadingSpinner size="10" color="sky-blue" />
|
||||
@@ -381,8 +381,8 @@ function AddFundDollars(props) {
|
||||
>
|
||||
{(props) => {
|
||||
return (
|
||||
<Form className="md:pl-8">
|
||||
<div className="flex flex-col-reverse sm:flex-row">
|
||||
<Form className="w-full">
|
||||
<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="fields w-full">
|
||||
{/* Inputs */}
|
||||
@@ -588,16 +588,16 @@ function AddFundDollars(props) {
|
||||
</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
|
||||
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}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
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 ? (
|
||||
<LoadingSpinner size="6" color="sky-blue" />
|
||||
@@ -620,9 +620,9 @@ function AddFundDollars(props) {
|
||||
</div>
|
||||
|
||||
{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
|
||||
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}
|
||||
>
|
||||
Cancel
|
||||
@@ -631,7 +631,7 @@ function AddFundDollars(props) {
|
||||
onClick={handleSubmit}
|
||||
name="previous"
|
||||
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 ? (
|
||||
<LoadingSpinner size="6" color="sky-blue" />
|
||||
|
||||
@@ -126,7 +126,7 @@ function AddFundPop({
|
||||
};
|
||||
|
||||
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="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">
|
||||
@@ -149,51 +149,51 @@ function AddFundPop({
|
||||
</p>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
{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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
|
||||
data?.result === "Charge success" || data?.status === "successful";
|
||||
|
||||
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="w-full mb-10">
|
||||
<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 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 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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -356,103 +356,105 @@ function ConfirmAddFund({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="content-wrapper w-full h-[32rem]">
|
||||
<div className="w-full mb-10">
|
||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
|
||||
<div className="px-4 md:p-8 py-4 add-fund-info">
|
||||
<div className="field w-full mb-3 min-h-[45px]">
|
||||
{confirmCredit?.show?.awaitConfirm?.state && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<AmountSection
|
||||
currency={__confirmData?.currency}
|
||||
amount={__confirmData?.amount}
|
||||
country={__confirmCountry}
|
||||
/>
|
||||
<TransactionFeeSection
|
||||
currency={__confirmData?.currency}
|
||||
fee={__confirmData?.fee}
|
||||
country={__confirmCountry}
|
||||
/>
|
||||
<TotalSection
|
||||
currency={__confirmData?.currency}
|
||||
amount={__confirmData?.amount}
|
||||
fee={__confirmData?.fee}
|
||||
country={__confirmCountry}
|
||||
/>
|
||||
{__confirmCountry === "US" && (
|
||||
<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"
|
||||
>
|
||||
Payment Method
|
||||
</label>
|
||||
<span className="text-[#181c32] dark:text-white">
|
||||
<ThePaymentText
|
||||
value={__confirmCardDetails}
|
||||
type={__confirmData?.cardType}
|
||||
/>
|
||||
<>
|
||||
<div className="content-wrapper w-full h-[32rem]">
|
||||
<div className="w-full mb-10">
|
||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
|
||||
<div className="px-4 md:p-8 py-4 add-fund-info">
|
||||
<div className="field w-full mb-3 min-h-[45px]">
|
||||
{confirmCredit?.show?.awaitConfirm?.state && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<AmountSection
|
||||
currency={__confirmData?.currency}
|
||||
amount={__confirmData?.amount}
|
||||
country={__confirmCountry}
|
||||
/>
|
||||
<TransactionFeeSection
|
||||
currency={__confirmData?.currency}
|
||||
fee={__confirmData?.fee}
|
||||
country={__confirmCountry}
|
||||
/>
|
||||
<TotalSection
|
||||
currency={__confirmData?.currency}
|
||||
amount={__confirmData?.amount}
|
||||
fee={__confirmData?.fee}
|
||||
country={__confirmCountry}
|
||||
/>
|
||||
{__confirmCountry === "US" && (
|
||||
<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"
|
||||
>
|
||||
Payment Method
|
||||
</label>
|
||||
<span className="text-[#181c32] dark:text-white">
|
||||
<ThePaymentText
|
||||
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>
|
||||
</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
|
||||
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>
|
||||
)}
|
||||
{__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>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
__confirmCountry === "US" ? "min-h-[96px]" : "min-h-[157px]"
|
||||
}
|
||||
></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}>
|
||||
<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="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">
|
||||
<h2 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
<div className="modal-header-con">
|
||||
<h2 className="modal-title">
|
||||
{completeNairaWithdraw.load ? (
|
||||
"Confirming..."
|
||||
) : (
|
||||
@@ -126,7 +126,7 @@ function ConfirmNairaWithdraw({
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
className="text-[#374557] dark:text-red-500"
|
||||
className="modal-close-btn"
|
||||
onClick={action}
|
||||
>
|
||||
<svg
|
||||
@@ -151,7 +151,7 @@ function ConfirmNairaWithdraw({
|
||||
</button>
|
||||
</div>
|
||||
<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 ? (
|
||||
<div className="h-[35rem] flex items-center justify-center">
|
||||
<LoadingSpinner size="12" color="sky-blue" />
|
||||
@@ -376,53 +376,52 @@ function ConfirmNairaWithdraw({
|
||||
</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>
|
||||
|
||||
{!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>
|
||||
</ModalCom>
|
||||
|
||||
@@ -36,15 +36,15 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
|
||||
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-header w-full flex items-center justify-between lg:p-6 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="modal-header-con">
|
||||
<h1 className="modal-title">
|
||||
{confirmCredit?.show?.acceptConfirm?.loader
|
||||
? "Confirming Credit..."
|
||||
: getTitle()}
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
className="text-[#374557] dark:text-red-500"
|
||||
className="modal-close-btn"
|
||||
onClick={onClose}
|
||||
>
|
||||
<svg
|
||||
@@ -68,7 +68,7 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="logout-modal-body w-full flex flex-col items-center">
|
||||
<div className="w-full">
|
||||
{confirmCredit?.show?.acceptConfirm?.loader ? (
|
||||
<div className="h-[32rem] flex items-center justify-center">
|
||||
<LoadingSpinner size="12" color="sky-blue" />
|
||||
|
||||
@@ -292,15 +292,15 @@ function NairaWithdraw({
|
||||
<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="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">
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
<div className="modal-header-con">
|
||||
<h1 className="modal-title">
|
||||
{`Withdraw from ${wallet.description} Wallet : ${wallet.symbol}${(
|
||||
wallet.amount * 0.01
|
||||
).toFixed(2)}`}
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
className="text-[#374557] dark:text-red-500"
|
||||
className="modal-close-btn"
|
||||
onClick={action}
|
||||
>
|
||||
<svg
|
||||
@@ -324,479 +324,481 @@ function NairaWithdraw({
|
||||
</svg>
|
||||
</button>
|
||||
</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}>
|
||||
{(props) => {
|
||||
return (
|
||||
<Form className="transfer-fund-info">
|
||||
{/* Amount Form */}
|
||||
<div className="flex flex-col">
|
||||
<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]"
|
||||
label="Amount:"
|
||||
type="number"
|
||||
name="amount"
|
||||
placeholder="0"
|
||||
value={props.values.amount}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={(e) => {
|
||||
getSendMoneyFee(e);
|
||||
}}
|
||||
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`}
|
||||
<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="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]"
|
||||
label="Amount:"
|
||||
type="number"
|
||||
name="amount"
|
||||
placeholder="0"
|
||||
value={props.values.amount}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={(e) => {
|
||||
getSendMoneyFee(e);
|
||||
}}
|
||||
error={errorMsgs.amount && errorMsgs.amount}
|
||||
/>
|
||||
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>
|
||||
|
||||
<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
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
Loading...
|
||||
</option>
|
||||
) : recipients.data.length ? (
|
||||
<>
|
||||
<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
|
||||
</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
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
{errorMsgs.previousAccount
|
||||
?.recipientID
|
||||
? errorMsgs.previousAccount
|
||||
.recipientID
|
||||
: "Select an account"}
|
||||
Loading...
|
||||
</option>
|
||||
{recipients.data.map((item, index) => (
|
||||
) : recipients.data.length ? (
|
||||
<>
|
||||
<option
|
||||
key={index}
|
||||
value={item.recipient_uid}
|
||||
className="text-slate-500 text-lg"
|
||||
value=""
|
||||
>
|
||||
{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
|
||||
{errorMsgs.previousAccount
|
||||
?.recipientID
|
||||
}
|
||||
</p>
|
||||
? errorMsgs.previousAccount
|
||||
.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 className="h-[6.1rem]"></div>
|
||||
</>
|
||||
)}
|
||||
<div className="h-[6.1rem]"></div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab == "new" &&
|
||||
(recipients.loading ? (
|
||||
<div className="mt-3 flex flex-col w-full h-[188px] justify-center items-center">
|
||||
<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 */}
|
||||
{tab == "new" &&
|
||||
(recipients.loading ? (
|
||||
<div className="mt-3 flex flex-col w-full h-[188px] justify-center items-center">
|
||||
<LoadingSpinner size="10" color="sky-blue" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-3 flex w-full h-[188px] justify-center items-center"></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 className="mt-3 flex w-full h-[188px] justify-center items-center"></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
|
||||
type="button"
|
||||
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
|
||||
</button>
|
||||
@@ -808,7 +810,7 @@ function NairaWithdraw({
|
||||
? true
|
||||
: 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 ? (
|
||||
<LoadingSpinner size="6" color="sky-blue" />
|
||||
@@ -818,10 +820,9 @@ function NairaWithdraw({
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
)
|
||||
}}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ModalCom>
|
||||
|
||||
@@ -23,14 +23,14 @@ function WalletAction({ walletItem, payment, openPopUp }) {
|
||||
}}
|
||||
className={`${
|
||||
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
|
||||
</button>
|
||||
</div>
|
||||
<div className="w-1/2 flex justify-center items-center">
|
||||
<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={() => {
|
||||
openPopUp({
|
||||
payment: payment,
|
||||
|
||||
@@ -165,7 +165,7 @@ export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpa
|
||||
</div>
|
||||
|
||||
{/* 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
|
||||
type="button"
|
||||
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">
|
||||
{title && title}
|
||||
</h1>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
|
||||
{/* user info */}
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
import React, { useState } from "react";
|
||||
import useToggle from "../../hooks/useToggle";
|
||||
import { drawerToggle } from "../../store/drawer";
|
||||
import { useSelector } from "react-redux";
|
||||
import MobileSidebar from "../Partials/MobileSideBar";
|
||||
|
||||
|
||||
export default function DashboardMediaPage({ children }) {
|
||||
|
||||
const { drawer } = useSelector((state) => state.drawer);
|
||||
const [MobileSideBar, setMobileSidebar] = useToggle(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="nft-main-wrapper-layout w-full mx-auto">
|
||||
<div className={`nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
|
||||
|
||||
{/* end sidebar */}
|
||||
<div className={`nft-header-container-wrapper flex-1 md:ml-10 ${drawer ? "2xl:ml-[375px] xl:ml-[310px]" : "xl:ml-[110px]"} h-full`}>
|
||||
{/* header */}
|
||||
<div className="nft-header w-full lg:h-[100px] h-[70px] default-border-bottom dark:border-[#292967] z-40 xl:sticky fixed top-0 left-0 bg-slate-300 animate-pulse duration-100">
|
||||
</div>
|
||||
{/* container */}
|
||||
<div className="nft-container 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
|
||||
<div className="w-full h-full bg-slate-200 animate-pulse duration-300">
|
||||
<div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
|
||||
<div className="w-full p-10 mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
|
||||
<div className="mb-4 w-full min-h-[500px] bg-slate-200 animate-pulse duration-100"></div>
|
||||
|
||||
<div className="w-full p-4 h-20 bg-slate-300 animate-pulse duration-200 dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-2"></div>
|
||||
</div>
|
||||
|
||||
<div className="p-10 w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
|
||||
{/* TEXTAREA SECTION */}
|
||||
<div className="w-full h-40 mb-3">
|
||||
<div className="w-full h-full bg-slate-200 dark:bg-black rounded-2xl shadow-md animate-pulse duration-100"></div>
|
||||
</div>
|
||||
{/* END OF TEXTAREA */}
|
||||
|
||||
{/* MESSAGE SECTION */}
|
||||
<div className="w-full h-40">
|
||||
<div className="w-full h-full bg-slate-200 dark:bg-black rounded-2xl shadow-md animate-pulse duration-300"></div>
|
||||
</div>
|
||||
{/* END OF MESSAGE */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <div className="nft-right-side-content 2xl:w-[270px] w-full h-full 2xl:flex justify-center relative flex-[20%]">
|
||||
<RightSideBar myJobList={userJobList} />
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -182,6 +182,9 @@
|
||||
.custom-btn {
|
||||
@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 ===================== */
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { lazy, Suspense, useEffect, useState } from "react";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import ActiveJobs from "../components/MyActiveJobs/ActiveJobs";
|
||||
import ActiveJobsMedia from "../components/MyActiveJobs/ActiveJobsMedia";
|
||||
// import ActiveJobsMedia from "../components/MyActiveJobs/ActiveJobsMedia";
|
||||
import usersService from "../services/UsersService";
|
||||
import { useSelector } from "react-redux";
|
||||
import LoadingSpinner from "../components/Spinners/LoadingSpinner";
|
||||
|
||||
const ActiveJobsMedia = lazy(() => import("../components/MyActiveJobs/ActiveJobsMedia"));
|
||||
|
||||
/**
|
||||
* This code defines a React functional component called `ManageActiveJobs`.
|
||||
@@ -65,11 +68,13 @@ function ManageActiveJobs() {
|
||||
return (
|
||||
<>
|
||||
{details.job_type == 'MEDIA' ?
|
||||
<ActiveJobsMedia
|
||||
details={state}
|
||||
activeJobMesList={activeJobMesList}
|
||||
reloadActiveJobList={setActiveJobMesListReload}
|
||||
/>
|
||||
<Suspense fallback={<Fallback />}>
|
||||
<ActiveJobsMedia
|
||||
details={state}
|
||||
activeJobMesList={activeJobMesList}
|
||||
reloadActiveJobList={setActiveJobMesListReload}
|
||||
/>
|
||||
</Suspense>
|
||||
: details.job_type == 'TASK' ?
|
||||
<ActiveJobs
|
||||
details={state}
|
||||
@@ -84,3 +89,11 @@ function ManageActiveJobs() {
|
||||
}
|
||||
|
||||
export default ManageActiveJobs;
|
||||
|
||||
let Fallback = () => {
|
||||
return (
|
||||
<div className="w-full flex justify-center items-center">
|
||||
<LoadingSpinner size='20' color='skyblue' height='h-screen' />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user