added modal style to wallet modal
This commit was merged in pull request #688.
This commit is contained in:
victorAnumudu
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user