Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
d5e66618aa | ||
|
CHIEFSOFT\ameye
|
2e89f07ee2 | ||
 ameye
|
9db7f5c985 | ||
|
victorAnumudu
|
d56363276b | ||
|
ameye
|
5a9b49559b |
@@ -74,3 +74,9 @@ REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
|
|||||||
|
|
||||||
#apigate.lotus.g1.wrenchboard.com:76.209.103.227
|
#apigate.lotus.g1.wrenchboard.com:76.209.103.227
|
||||||
#apigate.orion.g1.wrenchboard.com:76.209.103.227
|
#apigate.orion.g1.wrenchboard.com:76.209.103.227
|
||||||
|
|
||||||
|
|
||||||
|
REACT_APP_MAX_CREDIT_CARDS=4
|
||||||
|
REACT_APP_MAX_CREDIT_BANK_ACCOUNT=4
|
||||||
|
|
||||||
|
REACT_APP_MAX_FAMILY_MEMBERS=8
|
||||||
+6
-1
@@ -45,4 +45,9 @@ REACT_APP_TOTAL_NUM_FILE=4
|
|||||||
REACT_APP_LOGOUT_TEXT="Sign Out"
|
REACT_APP_LOGOUT_TEXT="Sign Out"
|
||||||
|
|
||||||
REACT_APP_APPLE_SOCIAL_LOGIN=0
|
REACT_APP_APPLE_SOCIAL_LOGIN=0
|
||||||
REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
|
REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
|
||||||
|
|
||||||
|
REACT_APP_MAX_CREDIT_CARDS=4
|
||||||
|
REACT_APP_MAX_CREDIT_BANK_ACCOUNT=4
|
||||||
|
|
||||||
|
REACT_APP_MAX_FAMILY_MEMBERS=8
|
||||||
@@ -52,3 +52,8 @@ REACT_APP_TOTAL_NUM_FILE=4
|
|||||||
REACT_APP_LOGOUT_TEXT="Sign Out"
|
REACT_APP_LOGOUT_TEXT="Sign Out"
|
||||||
REACT_APP_APPLE_SOCIAL_LOGIN=0
|
REACT_APP_APPLE_SOCIAL_LOGIN=0
|
||||||
REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
|
REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
|
||||||
|
|
||||||
|
REACT_APP_MAX_CREDIT_CARDS=4
|
||||||
|
REACT_APP_MAX_CREDIT_BANK_ACCOUNT=4
|
||||||
|
|
||||||
|
REACT_APP_MAX_FAMILY_MEMBERS=8
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import React, { useCallback, useEffect, useState } from "react";
|
import React, { useCallback, useEffect, useState } from "react";
|
||||||
import { Link, useNavigate } from "react-router-dom";
|
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||||
import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
|
import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
|
||||||
import usersService from "../../../services/UsersService";
|
import usersService from "../../../services/UsersService";
|
||||||
import InputCom from "../../Helpers/Inputs/InputCom";
|
import InputCom from "../../Helpers/Inputs/InputCom";
|
||||||
@@ -8,6 +8,9 @@ import AuthLayout from "../AuthLayout";
|
|||||||
export default function SignUp() {
|
export default function SignUp() {
|
||||||
const queryParams = new URLSearchParams(location?.search);
|
const queryParams = new URLSearchParams(location?.search);
|
||||||
const country = queryParams.get("cnt")?.toUpperCase();
|
const country = queryParams.get("cnt")?.toUpperCase();
|
||||||
|
|
||||||
|
const {pathname} = useLocation()
|
||||||
|
const currentPath = country ? `${pathname}?cnt=${country.toLowerCase()}`:pathname // Determines the new pathname is country query params exist
|
||||||
|
|
||||||
const [signUpLoading, setSignUpLoading] = useState(false);
|
const [signUpLoading, setSignUpLoading] = useState(false);
|
||||||
const [checked, setValue] = useState(false);
|
const [checked, setValue] = useState(false);
|
||||||
@@ -146,7 +149,7 @@ export default function SignUp() {
|
|||||||
<AuthLayout slogan="Welcome to WrenchBoard">
|
<AuthLayout slogan="Welcome to WrenchBoard">
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="mb-5">
|
<div className="mb-5">
|
||||||
<Link to="#">
|
<Link to={currentPath}>
|
||||||
<img
|
<img
|
||||||
src={WrenchBoard}
|
src={WrenchBoard}
|
||||||
alt="wrenchboard"
|
alt="wrenchboard"
|
||||||
|
|||||||
@@ -64,6 +64,8 @@ const initialValues = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
function AddFundDollars(props) {
|
function AddFundDollars(props) {
|
||||||
|
let MaxNoOfCards = process.env.REACT_APP_MAX_CREDIT_CARDS // HOLDS THE VALUE OF THE MAX NUMBER OF CARDS USER CAN ADD
|
||||||
|
|
||||||
const apiCall = new usersService();
|
const apiCall = new usersService();
|
||||||
let countryWallet = props.walletItem.country;
|
let countryWallet = props.walletItem.country;
|
||||||
const [tab, setTab] = useState("previous");
|
const [tab, setTab] = useState("previous");
|
||||||
@@ -240,7 +242,7 @@ function AddFundDollars(props) {
|
|||||||
<label
|
<label
|
||||||
onClick={() => setTab("new")}
|
onClick={() => setTab("new")}
|
||||||
htmlFor="new"
|
htmlFor="new"
|
||||||
className="cursor-pointer flex items-center gap-1"
|
className={`cursor-pointer flex items-center gap-1 ${payListCards.data.length >= MaxNoOfCards ? 'pointer-events-none':''}`}
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
id="new"
|
id="new"
|
||||||
@@ -251,7 +253,7 @@ function AddFundDollars(props) {
|
|||||||
tab == "new" ? "" : ""
|
tab == "new" ? "" : ""
|
||||||
} tracking-wide transition duration-200`}
|
} tracking-wide transition duration-200`}
|
||||||
/>
|
/>
|
||||||
Add New Card
|
Add New Card {payListCards.data.length >= MaxNoOfCards && <span className="text-[14px] text-red-500">Max Reached</span>}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
@@ -314,245 +316,253 @@ function AddFundDollars(props) {
|
|||||||
|
|
||||||
{tab === "new" && (
|
{tab === "new" && (
|
||||||
<div className="new-details w-full max-h-[22rem]">
|
<div className="new-details w-full max-h-[22rem]">
|
||||||
<div className="w-full flex flex-col justify-between">
|
{payListCards.loading ?
|
||||||
<Formik
|
<div className="pt-10 flex w-full h-full justify-center items-center">
|
||||||
initialValues={initialValues}
|
<LoadingSpinner size='10' color='sky-blue' />
|
||||||
validationSchema={validationSchema}
|
</div>
|
||||||
onSubmit={handleSubmit}
|
:payListCards.data.length < MaxNoOfCards ?
|
||||||
>
|
<div className="w-full flex flex-col justify-between">
|
||||||
{(props) => {
|
<Formik
|
||||||
return (
|
initialValues={initialValues}
|
||||||
<Form className="md:pl-8">
|
validationSchema={validationSchema}
|
||||||
<div className="flex flex-col-reverse sm:flex-row">
|
onSubmit={handleSubmit}
|
||||||
<div className="flex-1 sm:mr-10">
|
>
|
||||||
<div className="fields w-full">
|
{(props) => {
|
||||||
{/* Inputs */}
|
return (
|
||||||
{/* Name */}
|
<Form className="md:pl-8">
|
||||||
<div className="flex items-center field w-full my-2 flex-[0.4] gap-3">
|
<div className="flex flex-col-reverse sm:flex-row">
|
||||||
<label className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
|
<div className="flex-1 sm:mr-10">
|
||||||
Name:
|
<div className="fields w-full">
|
||||||
</label>
|
{/* Inputs */}
|
||||||
<p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
|
{/* Name */}
|
||||||
</div>
|
<div className="flex items-center field w-full my-2 flex-[0.4] gap-3">
|
||||||
|
<label className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
|
||||||
<div className="flex items-center flex-1 gap-3 my-2">
|
Name:
|
||||||
{/* Card Number */}
|
</label>
|
||||||
<div className="field w-full flex-[0.6]">
|
<p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
|
||||||
<InputCom
|
|
||||||
fieldClass="px-6"
|
|
||||||
spanTag="*"
|
|
||||||
iconName={cardIcons}
|
|
||||||
label="Card Number"
|
|
||||||
type="text"
|
|
||||||
name="cardNum"
|
|
||||||
onInput={handleCards}
|
|
||||||
placeholder="Enter Card Number"
|
|
||||||
value={handleCardNumberChange(
|
|
||||||
props.values.cardNum
|
|
||||||
)}
|
|
||||||
inputHandler={props.handleChange}
|
|
||||||
blurHandler={props.handleBlur}
|
|
||||||
error={props.errors.cardNum}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Expire Year, Year */}
|
<div className="flex items-center flex-1 gap-3 my-2">
|
||||||
<div className="sm:grid gap-5 grid-cols-2 flex-[0.4]">
|
{/* Card Number */}
|
||||||
<div className="field w-full mb-6 xl:mb-0 col-span-1">
|
<div className="field w-full flex-[0.6]">
|
||||||
<div className="select-option">
|
<InputCom
|
||||||
<div
|
fieldClass="px-6"
|
||||||
className={`flex items-center justify-between mb-2.5`}
|
spanTag="*"
|
||||||
>
|
iconName={cardIcons}
|
||||||
<label
|
label="Card Number"
|
||||||
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
|
type="text"
|
||||||
htmlFor="expiration"
|
name="cardNum"
|
||||||
>
|
onInput={handleCards}
|
||||||
Exp Month{" "}
|
placeholder="Enter Card Number"
|
||||||
<span className="text-red-700 text-sm italic">
|
value={handleCardNumberChange(
|
||||||
*
|
props.values.cardNum
|
||||||
</span>
|
)}
|
||||||
<span className="text-[12px] text-red-500 ml-1">
|
inputHandler={props.handleChange}
|
||||||
{props.errors.expirationMonth && "**"}
|
blurHandler={props.handleBlur}
|
||||||
</span>
|
error={props.errors.cardNum}
|
||||||
</label>
|
/>
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
|
|
||||||
>
|
|
||||||
<select
|
|
||||||
className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none`}
|
|
||||||
value={props.values.expirationMonth}
|
|
||||||
onChange={props.handleChange}
|
|
||||||
onBlur={props.handleBlur}
|
|
||||||
name="expirationMonth"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
value=""
|
|
||||||
className="text-dark-gray"
|
|
||||||
>
|
|
||||||
Month
|
|
||||||
</option>
|
|
||||||
{expireMonth?.length &&
|
|
||||||
expireMonth.map((item, index) => (
|
|
||||||
<option
|
|
||||||
key={index}
|
|
||||||
value={
|
|
||||||
Number(item.value) < 10
|
|
||||||
? "0" + item.value
|
|
||||||
: item.value
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{item.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="field w-full mb-6 xl:mb-0 col-span-1">
|
{/* Expire Year, Year */}
|
||||||
<div className="select-option">
|
<div className="sm:grid gap-5 grid-cols-2 flex-[0.4]">
|
||||||
<div
|
<div className="field w-full mb-6 xl:mb-0 col-span-1">
|
||||||
className={`flex items-center justify-between mb-2.5`}
|
<div className="select-option">
|
||||||
>
|
<div
|
||||||
<label
|
className={`flex items-center justify-between mb-2.5`}
|
||||||
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center line-clamp-3"
|
|
||||||
htmlFor="expiration"
|
|
||||||
>
|
>
|
||||||
Exp Year{" "}
|
<label
|
||||||
<span className="text-red-700 text-sm tracking-wide">
|
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
|
||||||
*
|
htmlFor="expiration"
|
||||||
</span>
|
|
||||||
<span className="text-[12px] text-red-500 italic">
|
|
||||||
{props.errors.expirationYear && "**"}
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
|
|
||||||
>
|
|
||||||
<select
|
|
||||||
className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none`}
|
|
||||||
value={props.values.expirationYear}
|
|
||||||
onChange={props.handleChange}
|
|
||||||
onBlur={props.handleBlur}
|
|
||||||
name="expirationYear"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
value=""
|
|
||||||
className="text-dark-gray"
|
|
||||||
>
|
>
|
||||||
Year
|
Exp Month{" "}
|
||||||
</option>
|
<span className="text-red-700 text-sm italic">
|
||||||
{expireYear?.length &&
|
*
|
||||||
expireYear.map((item, index) => (
|
</span>
|
||||||
<option key={index} value={item}>
|
<span className="text-[12px] text-red-500 ml-1">
|
||||||
{item}
|
{props.errors.expirationMonth && "**"}
|
||||||
</option>
|
</span>
|
||||||
))}
|
</label>
|
||||||
</select>
|
</div>
|
||||||
|
<div
|
||||||
|
className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
|
||||||
|
>
|
||||||
|
<select
|
||||||
|
className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none`}
|
||||||
|
value={props.values.expirationMonth}
|
||||||
|
onChange={props.handleChange}
|
||||||
|
onBlur={props.handleBlur}
|
||||||
|
name="expirationMonth"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
value=""
|
||||||
|
className="text-dark-gray"
|
||||||
|
>
|
||||||
|
Month
|
||||||
|
</option>
|
||||||
|
{expireMonth?.length &&
|
||||||
|
expireMonth.map((item, index) => (
|
||||||
|
<option
|
||||||
|
key={index}
|
||||||
|
value={
|
||||||
|
Number(item.value) < 10
|
||||||
|
? "0" + item.value
|
||||||
|
: item.value
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="field w-full mb-6 xl:mb-0 col-span-1">
|
||||||
|
<div className="select-option">
|
||||||
|
<div
|
||||||
|
className={`flex items-center justify-between mb-2.5`}
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center line-clamp-3"
|
||||||
|
htmlFor="expiration"
|
||||||
|
>
|
||||||
|
Exp Year{" "}
|
||||||
|
<span className="text-red-700 text-sm tracking-wide">
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
<span className="text-[12px] text-red-500 italic">
|
||||||
|
{props.errors.expirationYear && "**"}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
|
||||||
|
>
|
||||||
|
<select
|
||||||
|
className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none`}
|
||||||
|
value={props.values.expirationYear}
|
||||||
|
onChange={props.handleChange}
|
||||||
|
onBlur={props.handleBlur}
|
||||||
|
name="expirationYear"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
value=""
|
||||||
|
className="text-dark-gray"
|
||||||
|
>
|
||||||
|
Year
|
||||||
|
</option>
|
||||||
|
{expireYear?.length &&
|
||||||
|
expireYear.map((item, index) => (
|
||||||
|
<option key={index} value={item}>
|
||||||
|
{item}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Address and CVV */}
|
{/* Address and CVV */}
|
||||||
<div className="flex items-center flex-1 gap-3 my-2">
|
<div className="flex items-center flex-1 gap-3 my-2">
|
||||||
<div className="field w-full col-span-1 flex-[0.4]">
|
<div className="field w-full col-span-1 flex-[0.4]">
|
||||||
<InputCom
|
<InputCom
|
||||||
fieldClass="px-6"
|
fieldClass="px-6"
|
||||||
spanTag="*"
|
spanTag="*"
|
||||||
iconName={cardIcons}
|
iconName={cardIcons}
|
||||||
label="CVV"
|
label="CVV"
|
||||||
type="text"
|
type="text"
|
||||||
name="cvv"
|
name="cvv"
|
||||||
placeholder="CVV"
|
placeholder="CVV"
|
||||||
maxLength={3}
|
maxLength={3}
|
||||||
value={props.values.cvv}
|
value={props.values.cvv}
|
||||||
inputHandler={props.handleChange}
|
inputHandler={props.handleChange}
|
||||||
blurHandler={props.handleBlur}
|
blurHandler={props.handleBlur}
|
||||||
error={props.errors.cvv}
|
error={props.errors.cvv}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="field w-full flex-[0.6]">
|
||||||
|
<InputCom
|
||||||
|
fieldClass="px-6"
|
||||||
|
spanTag="*"
|
||||||
|
label="Billing Address"
|
||||||
|
type="text"
|
||||||
|
name="address"
|
||||||
|
placeholder="Billing Address"
|
||||||
|
value={props.values.Address}
|
||||||
|
inputHandler={props.handleChange}
|
||||||
|
blurHandler={props.handleBlur}
|
||||||
|
error={props.errors.address}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="field w-full flex-[0.6]">
|
|
||||||
<InputCom
|
|
||||||
fieldClass="px-6"
|
|
||||||
spanTag="*"
|
|
||||||
label="Billing Address"
|
|
||||||
type="text"
|
|
||||||
name="address"
|
|
||||||
placeholder="Billing Address"
|
|
||||||
value={props.values.Address}
|
|
||||||
inputHandler={props.handleChange}
|
|
||||||
blurHandler={props.handleBlur}
|
|
||||||
error={props.errors.address}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Postal Code and State */}
|
{/* Postal Code and State */}
|
||||||
<div className="sm:grid gap-5 grid-cols-3 my-2">
|
<div className="sm:grid gap-5 grid-cols-3 my-2">
|
||||||
<div className="field w-full xl:mb-0 col-span-1">
|
<div className="field w-full xl:mb-0 col-span-1">
|
||||||
<InputCom
|
<InputCom
|
||||||
fieldClass="px-6"
|
fieldClass="px-6"
|
||||||
spanTag="*"
|
spanTag="*"
|
||||||
label="Postal Code"
|
label="Postal Code"
|
||||||
type="number"
|
type="number"
|
||||||
name="code"
|
name="code"
|
||||||
placeholder="Postal Code"
|
placeholder="Postal Code"
|
||||||
value={props.values.code}
|
value={props.values.code}
|
||||||
maxLength={6}
|
maxLength={6}
|
||||||
inputHandler={props.handleChange}
|
inputHandler={props.handleChange}
|
||||||
blurHandler={props.handleBlur}
|
blurHandler={props.handleBlur}
|
||||||
error={props.errors.code}
|
error={props.errors.code}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="field w-full col-span-1">
|
<div className="field w-full col-span-1">
|
||||||
<InputCom
|
<InputCom
|
||||||
fieldClass="px-6"
|
fieldClass="px-6"
|
||||||
spanTag="*"
|
spanTag="*"
|
||||||
label="State"
|
label="State"
|
||||||
type="text"
|
type="text"
|
||||||
name="state"
|
name="state"
|
||||||
placeholder="State"
|
placeholder="State"
|
||||||
value={props.values.state.toUpperCase()}
|
value={props.values.state.toUpperCase()}
|
||||||
inputHandler={props.handleChange}
|
inputHandler={props.handleChange}
|
||||||
blurHandler={props.handleBlur}
|
blurHandler={props.handleBlur}
|
||||||
error={props.errors.state}
|
error={props.errors.state}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="add-fund-btn flex justify-end items-center gap-2 mt-4">
|
<div className="add-fund-btn flex justify-end items-center gap-2 mt-4">
|
||||||
<button
|
<button
|
||||||
className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
|
className="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={handleClose}
|
onClick={handleClose}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||||
>
|
>
|
||||||
{props.confirmCredit?.show?.awaitConfirm?.loader ? (
|
{props.confirmCredit?.show?.awaitConfirm?.loader ? (
|
||||||
<LoadingSpinner size="6" color="sky-blue" />
|
<LoadingSpinner size="6" color="sky-blue" />
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<span className="text-white">Continue</span>{" "}
|
<span className="text-white">Continue</span>{" "}
|
||||||
<Icons name="chevron-right" />
|
<Icons name="chevron-right" />
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</Form>
|
</Form>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
</Formik>
|
</Formik>
|
||||||
</div>
|
</div>
|
||||||
|
:
|
||||||
|
null
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -12,6 +12,8 @@ function NairaWithdraw({
|
|||||||
state,
|
state,
|
||||||
setShowConfirmNairaWithdraw,
|
setShowConfirmNairaWithdraw,
|
||||||
}) {
|
}) {
|
||||||
|
|
||||||
|
let MaxNoOfBanks = process.env.REACT_APP_MAX_CREDIT_BANK_ACCOUNT // HOLDS THE VALUE OF THE MAX NUMBER OF BANKS USER CAN ADD
|
||||||
const apiCall = new usersService();
|
const apiCall = new usersService();
|
||||||
const [tab, setTab] = useState("previous");
|
const [tab, setTab] = useState("previous");
|
||||||
let [requestStatus, setRequestStatus] = useState(false);
|
let [requestStatus, setRequestStatus] = useState(false);
|
||||||
@@ -422,7 +424,7 @@ function NairaWithdraw({
|
|||||||
<label
|
<label
|
||||||
onClick={() => setTab("new")}
|
onClick={() => setTab("new")}
|
||||||
htmlFor="new"
|
htmlFor="new"
|
||||||
className="cursor-pointer flex items-center gap-1"
|
className={`cursor-pointer flex items-center gap-1 ${recipients.data.length >= MaxNoOfBanks ? 'pointer-events-none':''}`}
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
id="new"
|
id="new"
|
||||||
@@ -434,7 +436,7 @@ function NairaWithdraw({
|
|||||||
tab == "new" ? "" : ""
|
tab == "new" ? "" : ""
|
||||||
} tracking-wide transition duration-200`}
|
} tracking-wide transition duration-200`}
|
||||||
/>
|
/>
|
||||||
New Account{" "}
|
New Account{" "} {recipients.data.length >= MaxNoOfBanks && <span className="text-[14px] text-red-500">Max Reached</span>}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -522,273 +524,280 @@ function NairaWithdraw({
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{tab == "new" && (
|
{tab == "new" && (
|
||||||
<div className="w-full mt-3 rounded-md bg-slate-100">
|
recipients.loading ?
|
||||||
<div className="relative fields w-full flex flex-col p-4">
|
<div className="mt-3 flex flex-col w-full h-[188px] justify-center items-center">
|
||||||
<div className="flex flex-[2] min-h-[52px]">
|
<LoadingSpinner size='10' color='sky-blue' />
|
||||||
{/* 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>
|
|
||||||
<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>
|
|
||||||
{/* {props.errors.country &&
|
|
||||||
props.touched.country && (
|
|
||||||
<p className="text-sm text-red-500">
|
|
||||||
{props.errors.country}
|
|
||||||
</p>
|
|
||||||
)} */}
|
|
||||||
</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>
|
|
||||||
{/* {props.errors.bank && props.touched.bank && (
|
|
||||||
<p className="text-sm text-red-500">
|
|
||||||
{props.errors.bank}
|
|
||||||
</p>
|
|
||||||
)} */}
|
|
||||||
</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}
|
|
||||||
/>
|
|
||||||
{/* {props.errors.accountNumber &&
|
|
||||||
props.touched.accountNumber && (
|
|
||||||
<p className="text-sm text-red-500">
|
|
||||||
{props.errors.accountNumber}
|
|
||||||
</p>
|
|
||||||
)} */}
|
|
||||||
</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>
|
|
||||||
{/* {props.errors.accountType &&
|
|
||||||
props.touched.accountType && (
|
|
||||||
<p className="text-sm text-red-500">
|
|
||||||
{props.errors.accountType}
|
|
||||||
</p>
|
|
||||||
)} */}
|
|
||||||
</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}
|
|
||||||
/>
|
|
||||||
{/* {props.errors.state && props.touched.state && (
|
|
||||||
<p className="text-sm text-red-500">
|
|
||||||
{props.errors.state}
|
|
||||||
</p>
|
|
||||||
)} */}
|
|
||||||
</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}
|
|
||||||
/>
|
|
||||||
{/* {props.errors.city && props.touched.city && (
|
|
||||||
<p className="text-sm text-red-500">
|
|
||||||
{props.errors.city}
|
|
||||||
</p>
|
|
||||||
)} */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* end of inputs for new accounts */}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
:recipients.data.length < MaxNoOfBanks ?
|
||||||
|
<div className="w-full mt-3 rounded-md bg-slate-100">
|
||||||
|
<div className="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>
|
||||||
|
<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>
|
||||||
|
{/* {props.errors.country &&
|
||||||
|
props.touched.country && (
|
||||||
|
<p className="text-sm text-red-500">
|
||||||
|
{props.errors.country}
|
||||||
|
</p>
|
||||||
|
)} */}
|
||||||
|
</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>
|
||||||
|
{/* {props.errors.bank && props.touched.bank && (
|
||||||
|
<p className="text-sm text-red-500">
|
||||||
|
{props.errors.bank}
|
||||||
|
</p>
|
||||||
|
)} */}
|
||||||
|
</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}
|
||||||
|
/>
|
||||||
|
{/* {props.errors.accountNumber &&
|
||||||
|
props.touched.accountNumber && (
|
||||||
|
<p className="text-sm text-red-500">
|
||||||
|
{props.errors.accountNumber}
|
||||||
|
</p>
|
||||||
|
)} */}
|
||||||
|
</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>
|
||||||
|
{/* {props.errors.accountType &&
|
||||||
|
props.touched.accountType && (
|
||||||
|
<p className="text-sm text-red-500">
|
||||||
|
{props.errors.accountType}
|
||||||
|
</p>
|
||||||
|
)} */}
|
||||||
|
</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}
|
||||||
|
/>
|
||||||
|
{/* {props.errors.state && props.touched.state && (
|
||||||
|
<p className="text-sm text-red-500">
|
||||||
|
{props.errors.state}
|
||||||
|
</p>
|
||||||
|
)} */}
|
||||||
|
</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}
|
||||||
|
/>
|
||||||
|
{/* {props.errors.city && props.touched.city && (
|
||||||
|
<p className="text-sm text-red-500">
|
||||||
|
{props.errors.city}
|
||||||
|
</p>
|
||||||
|
)} */}
|
||||||
|
</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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user