Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
fad38331db | ||
 ameye
|
9e15c51c31 | ||
|
victorAnumudu
|
b2bffb3b83 | ||
|
ameye
|
dd1a2953da | ||
|
victorAnumudu
|
ef784dc6ed | ||
|
ameye
|
682745c321 | ||
|
victorAnumudu
|
c63fbfc147 | ||
|
ameye
|
9b0f847bc1 |
@@ -23,17 +23,19 @@ export default function ProductCardStyleTwo({
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`card-style-two w-full h-[336px] p-[20px] bg-white dark:bg-dark-white rounded-2xl section-shadow ${
|
||||
className={`card-style-two w-full p-[20px] bg-white dark:bg-dark-white rounded-2xl section-shadow ${
|
||||
className || ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-col justify-between w-full h-full">
|
||||
<div className="thumbnail-area w-full">
|
||||
<div
|
||||
className="w-full h-[236px] p-6 rounded-xl overflow-hidden"
|
||||
className="w-full h-[140px] p-6 rounded-lg overflow-hidden"
|
||||
style={{
|
||||
// background: `url(${`https://blog.wrenchboard.com/wp-content/uploads/${datas.meta_value}`}) 0% 0% / cover no-repeat`,
|
||||
background: `url(${`${bg}${datas.meta_value}`}) 0% 0% / cover no-repeat`,
|
||||
// background: `url(${`${bg}${datas.meta_value}`}) 0% 0% / cover no-repeat`,
|
||||
background: `url(${`${bg}${datas.meta_value}`}) no-repeat`,
|
||||
backgroundSize: '100%',
|
||||
}}
|
||||
>
|
||||
<div className="product-two-options flex justify-between mb-5 relative">
|
||||
@@ -50,7 +52,7 @@ export default function ProductCardStyleTwo({
|
||||
</div>
|
||||
<div className="details-area">
|
||||
{/* title */}
|
||||
<Link to={`/blog-page?blog_id=${datas.ID}`} className="mb-2.5" rel="noreferrer">
|
||||
<Link to={`/blog-page?blog_id=${datas.ID}`} className="py-2 mb-2.5" rel="noreferrer">
|
||||
<h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
|
||||
{datas.post_title || "dummy title..."}
|
||||
</h1>
|
||||
|
||||
@@ -28,7 +28,9 @@ export default function InputCom({
|
||||
direction,
|
||||
tabIndex,
|
||||
error,
|
||||
autoComplete="on"
|
||||
autoComplete="on",
|
||||
minDate='1900-01-01',
|
||||
maxDate='2099-09-13'
|
||||
}) {
|
||||
const inputRef = useRef(null);
|
||||
// Entry Validation
|
||||
@@ -90,26 +92,51 @@ export default function InputCom({
|
||||
: "text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] border"
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
onChange={inputHandler}
|
||||
className={`input-field placeholder:text-base text-dark-gray w-full h-full ${iconName && 'pr-6'} ${
|
||||
inputBg && inputBg} tracking-wide focus:ring-0 focus:outline-none ${fieldClass}`}
|
||||
type={type}
|
||||
id={name}
|
||||
name={name}
|
||||
onInput={onInput}
|
||||
minLength={minLengthValidation()}
|
||||
maxLength={maxLengthValidation()}
|
||||
tabIndex={tabIndex}
|
||||
// pattern={inputPatterns()}
|
||||
ref={inputRef}
|
||||
readOnly={disable}
|
||||
onBlur={blurHandler}
|
||||
dir={direction}
|
||||
autoComplete={autoComplete}
|
||||
/>
|
||||
<>
|
||||
{type == 'date' ?
|
||||
<input
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
onChange={inputHandler}
|
||||
className={`input-field placeholder:text-base text-dark-gray w-full h-full ${iconName && 'pr-6'} ${
|
||||
inputBg && inputBg} tracking-wide focus:ring-0 focus:outline-none ${fieldClass}`}
|
||||
type={type}
|
||||
id={name}
|
||||
name={name}
|
||||
onInput={onInput}
|
||||
min={minDate}
|
||||
max={maxDate}
|
||||
tabIndex={tabIndex}
|
||||
// pattern={inputPatterns()}
|
||||
ref={inputRef}
|
||||
readOnly={disable}
|
||||
onBlur={blurHandler}
|
||||
dir={direction}
|
||||
autoComplete={autoComplete}
|
||||
/>
|
||||
:
|
||||
<input
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
onChange={inputHandler}
|
||||
className={`input-field placeholder:text-base text-dark-gray w-full h-full ${iconName && 'pr-6'} ${
|
||||
inputBg && inputBg} tracking-wide focus:ring-0 focus:outline-none ${fieldClass}`}
|
||||
type={type}
|
||||
id={name}
|
||||
name={name}
|
||||
onInput={onInput}
|
||||
minLength={minLengthValidation()}
|
||||
maxLength={maxLengthValidation()}
|
||||
tabIndex={tabIndex}
|
||||
// pattern={inputPatterns()}
|
||||
ref={inputRef}
|
||||
readOnly={disable}
|
||||
onBlur={blurHandler}
|
||||
dir={direction}
|
||||
autoComplete={autoComplete}
|
||||
/>
|
||||
}
|
||||
</>
|
||||
{iconName && (
|
||||
<div className="absolute right-6 bottom-3 z-10 flex gap-2">
|
||||
{iconName.split(" ").map((item, index) => (
|
||||
|
||||
@@ -14,15 +14,15 @@ const validationSchema = Yup.object().shape({
|
||||
country: Yup.string()
|
||||
.required("Required"),
|
||||
phone_number: Yup.string()
|
||||
.min(9, "Min 9 characters")
|
||||
.max(11, "Max 11 characters")
|
||||
.required("Required"),
|
||||
birthYear: Yup.string()
|
||||
.required("Required"),
|
||||
birthMonth: Yup.string()
|
||||
.required("Required"),
|
||||
birthDay: Yup.string()
|
||||
.min(9, "Invalid")
|
||||
.max(11, "Invalid")
|
||||
.required("Required"),
|
||||
// birthYear: Yup.string()
|
||||
// .required("Required"),
|
||||
// birthMonth: Yup.string()
|
||||
// .required("Required"),
|
||||
// birthDay: Yup.string()
|
||||
// .required("Required"),
|
||||
address: Yup.string()
|
||||
.min(5, "Min 3 characters")
|
||||
.max(50, "Max 25 characters")
|
||||
@@ -37,6 +37,8 @@ const validationSchema = Yup.object().shape({
|
||||
.min(1, "Min 3 characters")
|
||||
.max(8, "Max 8 characters")
|
||||
.required("Required"),
|
||||
dob: Yup.string()
|
||||
.required("Required"),
|
||||
});
|
||||
|
||||
const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
|
||||
@@ -67,32 +69,33 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
|
||||
address: '',
|
||||
city: userDetails?.city ? userDetails.city : '',
|
||||
state: '',
|
||||
zipCode: ''
|
||||
zipCode: '',
|
||||
dob: ''
|
||||
};
|
||||
|
||||
|
||||
const handleSubmit = (values) => {
|
||||
const reqData1 = {
|
||||
name: values.firstname + ' ' + values.firstname,
|
||||
email: values.email,
|
||||
phone_number: values.phone_number,
|
||||
status: 'active',
|
||||
type: 'individual',
|
||||
individual: {
|
||||
first_name: values.firstname,
|
||||
last_name: values.lastname,
|
||||
dob: {day: values.birthDay, month: values.birthMonth, year: values.birthYear}
|
||||
},
|
||||
billing:{
|
||||
address : {
|
||||
line1: values.address,
|
||||
city: values.city,
|
||||
state: values.state,
|
||||
postal_code: values.zipCode,
|
||||
country: values.country
|
||||
}
|
||||
}
|
||||
}
|
||||
// const reqData1 = {
|
||||
// name: values.firstname + ' ' + values.firstname,
|
||||
// email: values.email,
|
||||
// phone_number: values.phone_number,
|
||||
// status: 'active',
|
||||
// type: 'individual',
|
||||
// individual: {
|
||||
// first_name: values.firstname,
|
||||
// last_name: values.lastname,
|
||||
// dob: {day: values.birthDay, month: values.birthMonth, year: values.birthYear}
|
||||
// },
|
||||
// billing:{
|
||||
// address : {
|
||||
// line1: values.address,
|
||||
// city: values.city,
|
||||
// state: values.state,
|
||||
// postal_code: values.zipCode,
|
||||
// country: values.country
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
const reqData = {
|
||||
request_type: '100',
|
||||
address: values.address,
|
||||
@@ -101,9 +104,13 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
|
||||
country: values.country,
|
||||
postal_code: values.zipCode,
|
||||
phone_number: values.phone_number,
|
||||
dob_day: values.birthDay,
|
||||
dob_month: values.birthMonth,
|
||||
dob_year: values.birthYear,
|
||||
// dob_day: values.birthDay,
|
||||
// dob_month: values.birthMonth,
|
||||
// dob_year: values.birthYear,
|
||||
dob_day: Number(new Date(values.dob).getDate()),
|
||||
dob_month: Number(new Date(values.dob).getMonth()) + 1,
|
||||
dob_year: Number(new Date(values.dob).getFullYear()),
|
||||
dob: values.dob
|
||||
}
|
||||
// console.log('Values', reqData)
|
||||
setRequestStatus({loading: true, status:false, message: ''})
|
||||
@@ -170,8 +177,8 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{(props) => (
|
||||
<Form className="w-full overflow-y-auto">
|
||||
<div className="logout-modal-wrapper mx-auto w-[90%] lg:w-[900px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
|
||||
<div className="logout-modal-wrapper mx-auto w-[90%] md:w-[768px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||
<Form className="w-full">
|
||||
<div className="modal-header-con">
|
||||
<h1 className="modal-title">
|
||||
{walletItem?.description}
|
||||
@@ -202,303 +209,329 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-4 w-full grid lg:grid-cols-2 gap-4">
|
||||
{/* left part */}
|
||||
<div className='w-full flex flex-col gap-4'>
|
||||
<div className='p-4 w-full flex flex-col h-auto md:h-[28rem]'>
|
||||
<div className='pb-4'>
|
||||
<h1 className='text-lg md:text-xl flex gap-1'><span className='font-bold'>Name:</span>{userDetails.lastname} {userDetails.firstname}</h1>
|
||||
<div className="field w-full grid md:grid-cols-3 gap-4">
|
||||
<div className="md:col-span-1 field w-full">
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{/* left part */}
|
||||
<div className='w-full flex flex-col gap-4'>
|
||||
<div className="field w-full grid md:grid-cols-5 gap-4">
|
||||
<div className="md:col-span-2 field w-full">
|
||||
<label
|
||||
htmlFor="country"
|
||||
className="job-label job-label-flex"
|
||||
>
|
||||
<span>Country</span>
|
||||
{props.errors.country && props.touched.country && (
|
||||
<span className="text-[12px] text-red-500">
|
||||
{props.errors.country}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<select
|
||||
id="country"
|
||||
name="country"
|
||||
value={props.values.country}
|
||||
className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
|
||||
onChange={props.handleChange}
|
||||
disabled={countryCode ? true : false}
|
||||
>
|
||||
{allCountries.loading ?
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Loading...
|
||||
</option>
|
||||
: allCountries.data?.length > 0 ?
|
||||
<>
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Select Country
|
||||
</option>
|
||||
{allCountries.data?.map(item => (
|
||||
<option key={item.uid} className="text-slate-500 text-lg" value={item.code}>
|
||||
{item.country}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
:
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Not Found
|
||||
</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
<div className='md:col-span-3'>
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Phone Number"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputClass="w-full input-curve lg border border-light-purple"
|
||||
type="text"
|
||||
name="phone_number"
|
||||
value={props.values.phone_number}
|
||||
inputHandler={props.handleChange}
|
||||
error={(props.errors.phone_number && props.touched.phone_number) && props.errors.phone_number}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<InputCom
|
||||
disable={true}
|
||||
fieldClass="px-6"
|
||||
label="Email"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputClass="input-curve lg border border-light-purple"
|
||||
type="text"
|
||||
name="email"
|
||||
value={props.values.email}
|
||||
inputHandler={props.handleChange}
|
||||
error={(props.errors.email && props.touched.email) && props.errors.email}
|
||||
/>
|
||||
<div className="hidden field w-full md:grid-cols-2 gap-4">
|
||||
<InputCom
|
||||
disable={true}
|
||||
fieldClass="px-6"
|
||||
label="Firstname"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputClass="input-curve lg border border-light-purple"
|
||||
type="text"
|
||||
name="firstname"
|
||||
value={props.values.firstname}
|
||||
inputHandler={props.handleChange}
|
||||
error={(props.errors.firstname && props.touched.firstname) && props.errors.firstname}
|
||||
/>
|
||||
<InputCom
|
||||
disable={true}
|
||||
fieldClass="px-6"
|
||||
label="Lastname"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputClass="input-curve lg border border-light-purple"
|
||||
type="text"
|
||||
name="lastname"
|
||||
value={props.values.lastname}
|
||||
inputHandler={props.handleChange}
|
||||
error={(props.errors.lastname && props.touched.lastname) && props.errors.lastname}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* hidden section */}
|
||||
<div className="hidden field w-full flex-col gap-4">
|
||||
<p className='job-label'>Date of Birth</p>
|
||||
<div className='xxs:grid-cols-3 gap-4'>
|
||||
<div className="field w-full">
|
||||
<label
|
||||
htmlFor="birthDay"
|
||||
className="job-label job-label-flex"
|
||||
>
|
||||
<span>Day</span>
|
||||
{props.errors.birthDay && props.touched.birthDay && (
|
||||
<span className="text-[12px] text-red-500">
|
||||
{props.errors.birthDay}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<select
|
||||
id="birthDay"
|
||||
name="birthDay"
|
||||
value={props.values.birthDay}
|
||||
className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
|
||||
onChange={props.handleChange}
|
||||
>
|
||||
<>
|
||||
<option className="text-slate-500 text-lg" value=''>
|
||||
select
|
||||
</option>
|
||||
{day.map(item => (
|
||||
<option key={item} className="text-slate-500 text-lg" value={item}>
|
||||
{item}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
</select>
|
||||
</div>
|
||||
<div className="field w-full">
|
||||
<label
|
||||
htmlFor="birthMonth"
|
||||
className="job-label job-label-flex"
|
||||
>
|
||||
<span>Month</span>
|
||||
{props.errors.birthMonth && props.touched.birthMonth && (
|
||||
<span className="text-[12px] text-red-500">
|
||||
{props.errors.birthMonth}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<select
|
||||
id="birthMonth"
|
||||
name="birthMonth"
|
||||
value={props.values.birthMonth}
|
||||
className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
|
||||
onChange={props.handleChange}
|
||||
>
|
||||
<>
|
||||
<option className="text-slate-500 text-lg" value=''>
|
||||
select
|
||||
</option>
|
||||
{month.map(item => (
|
||||
<option key={item.value} className="text-slate-500 text-lg" value={item.value}>
|
||||
{item.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
</select>
|
||||
</div>
|
||||
<div className="field w-full">
|
||||
<label
|
||||
htmlFor="birthYear"
|
||||
className="job-label job-label-flex"
|
||||
>
|
||||
<span>Year</span>
|
||||
{props.errors.birthYear && props.touched.birthYear && (
|
||||
<span className="text-[12px] text-red-500">
|
||||
{props.errors.birthYear}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<select
|
||||
id="birthYear"
|
||||
name="birthYear"
|
||||
value={props.values.birthYear}
|
||||
className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
|
||||
onChange={props.handleChange}
|
||||
>
|
||||
<>
|
||||
<option className="text-slate-500 text-lg" value=''>
|
||||
select
|
||||
</option>
|
||||
{year.map(item => (
|
||||
<option key={item} className="text-slate-500 text-lg" value={item}>
|
||||
{item}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field w-full grid md:grid-cols-3 gap-4">
|
||||
<p className='hidden md:flex w-full md:col-span-1 job-label items-center'>Date of Birth</p>
|
||||
<div className='w-full md:col-span-2 '>
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Date of Birth"
|
||||
labelClass="md:hidden tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputClass="input-curve lg border border-light-purple"
|
||||
type="date"
|
||||
name="dob"
|
||||
value={props.values.dob}
|
||||
inputHandler={props.handleChange}
|
||||
error={(props.errors.dob && props.touched.dob) && props.errors.dob}
|
||||
maxDate={year[0] + '-12-31'}
|
||||
minDate={year[year?.length - 1] + '-01-01'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* right part */}
|
||||
<div className='w-full p-4 flex flex-col gap-4 bg-blue-200 dark:bg-slate-900 rounded-2xl'>
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Address"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputClass="input-curve lg border border-light-purple"
|
||||
type="text"
|
||||
name="address"
|
||||
value={props.values.address}
|
||||
inputHandler={props.handleChange}
|
||||
error={(props.errors.address && props.touched.address) && props.errors.address}
|
||||
/>
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="City"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputClass="input-curve lg border border-light-purple"
|
||||
type="text"
|
||||
name="city"
|
||||
value={props.values.city}
|
||||
inputHandler={props.handleChange}
|
||||
error={(props.errors.city && props.touched.city) && props.errors.city}
|
||||
/>
|
||||
{/* <InputCom
|
||||
fieldClass="px-6"
|
||||
label="State/Province"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputClass="input-curve lg border border-light-purple"
|
||||
type="text"
|
||||
name="state"
|
||||
value={props.values.state}
|
||||
inputHandler={props.handleChange}
|
||||
error={(props.errors.state && props.touched.state) && props.errors.state}
|
||||
/> */}
|
||||
|
||||
<div className="field w-full grid md:grid-cols-2 gap-4">
|
||||
<div className="field w-full">
|
||||
<label
|
||||
htmlFor="country"
|
||||
htmlFor="state"
|
||||
className="job-label job-label-flex"
|
||||
>
|
||||
<span>Country</span>
|
||||
{props.errors.country && props.touched.country && (
|
||||
<span>State/Province</span>
|
||||
{props.errors.state && props.touched.state && (
|
||||
<span className="text-[12px] text-red-500">
|
||||
{props.errors.country}
|
||||
{props.errors.state}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<select
|
||||
id="country"
|
||||
name="country"
|
||||
value={props.values.country}
|
||||
id="state"
|
||||
name="state"
|
||||
value={props.values.state}
|
||||
className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
|
||||
onChange={props.handleChange}
|
||||
disabled={countryCode ? true : false}
|
||||
>
|
||||
{allCountries.loading ?
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Loading...
|
||||
</option>
|
||||
: allCountries.data?.length > 0 ?
|
||||
<>
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Select Country
|
||||
</option>
|
||||
{allCountries.data?.map(item => (
|
||||
<option key={item.uid} className="text-slate-500 text-lg" value={item.code}>
|
||||
{item.country}
|
||||
{state.loading ?
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Loading...
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
:
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Not Found
|
||||
</option>
|
||||
}
|
||||
: Object.keys(state.data)?.length > 0 ?
|
||||
<>
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Select State
|
||||
</option>
|
||||
{Object.keys(state.data)?.map((item, index) => (
|
||||
<option key={index} className="text-slate-500 text-lg" value={item}>
|
||||
{state?.data[item]}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
:
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Not Found
|
||||
</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
<div className='md:col-span-2'>
|
||||
<InputCom
|
||||
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Phone Number"
|
||||
label="Zip Code"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputClass="w-full input-curve lg border border-light-purple"
|
||||
inputClass="input-curve lg border border-light-purple"
|
||||
type="text"
|
||||
name="phone_number"
|
||||
value={props.values.phone_number}
|
||||
name="zipCode"
|
||||
value={props.values.zipCode}
|
||||
inputHandler={props.handleChange}
|
||||
error={(props.errors.phone_number && props.touched.phone_number) && props.errors.phone_number}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<InputCom
|
||||
disable={true}
|
||||
fieldClass="px-6"
|
||||
label="Email"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputClass="input-curve lg border border-light-purple"
|
||||
type="text"
|
||||
name="email"
|
||||
value={props.values.email}
|
||||
inputHandler={props.handleChange}
|
||||
error={(props.errors.email && props.touched.email) && props.errors.email}
|
||||
/>
|
||||
<div className="hidden field w-full md:grid-cols-2 gap-4">
|
||||
<InputCom
|
||||
disable={true}
|
||||
fieldClass="px-6"
|
||||
label="Firstname"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputClass="input-curve lg border border-light-purple"
|
||||
type="text"
|
||||
name="firstname"
|
||||
value={props.values.firstname}
|
||||
inputHandler={props.handleChange}
|
||||
error={(props.errors.firstname && props.touched.firstname) && props.errors.firstname}
|
||||
/>
|
||||
<InputCom
|
||||
disable={true}
|
||||
fieldClass="px-6"
|
||||
label="Lastname"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputClass="input-curve lg border border-light-purple"
|
||||
type="text"
|
||||
name="lastname"
|
||||
value={props.values.lastname}
|
||||
inputHandler={props.handleChange}
|
||||
error={(props.errors.lastname && props.touched.lastname) && props.errors.lastname}
|
||||
/>
|
||||
</div>
|
||||
<div className="field w-full flex flex-col gap-4">
|
||||
<p className='job-label'>Date of Birth</p>
|
||||
<div className='grid xxs:grid-cols-3 gap-4'>
|
||||
<div className="field w-full">
|
||||
<label
|
||||
htmlFor="birthDay"
|
||||
className="job-label job-label-flex"
|
||||
>
|
||||
<span>Day</span>
|
||||
{props.errors.birthDay && props.touched.birthDay && (
|
||||
<span className="text-[12px] text-red-500">
|
||||
{props.errors.birthDay}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<select
|
||||
id="birthDay"
|
||||
name="birthDay"
|
||||
value={props.values.birthDay}
|
||||
className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
|
||||
onChange={props.handleChange}
|
||||
>
|
||||
<>
|
||||
<option className="text-slate-500 text-lg" value=''>
|
||||
select
|
||||
</option>
|
||||
{day.map(item => (
|
||||
<option key={item} className="text-slate-500 text-lg" value={item}>
|
||||
{item}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
</select>
|
||||
</div>
|
||||
<div className="field w-full">
|
||||
<label
|
||||
htmlFor="birthMonth"
|
||||
className="job-label job-label-flex"
|
||||
>
|
||||
<span>Month</span>
|
||||
{props.errors.birthMonth && props.touched.birthMonth && (
|
||||
<span className="text-[12px] text-red-500">
|
||||
{props.errors.birthMonth}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<select
|
||||
id="birthMonth"
|
||||
name="birthMonth"
|
||||
value={props.values.birthMonth}
|
||||
className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
|
||||
onChange={props.handleChange}
|
||||
>
|
||||
<>
|
||||
<option className="text-slate-500 text-lg" value=''>
|
||||
select
|
||||
</option>
|
||||
{month.map(item => (
|
||||
<option key={item.value} className="text-slate-500 text-lg" value={item.value}>
|
||||
{item.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
</select>
|
||||
</div>
|
||||
<div className="field w-full">
|
||||
<label
|
||||
htmlFor="birthYear"
|
||||
className="job-label job-label-flex"
|
||||
>
|
||||
<span>Year</span>
|
||||
{props.errors.birthYear && props.touched.birthYear && (
|
||||
<span className="text-[12px] text-red-500">
|
||||
{props.errors.birthYear}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<select
|
||||
id="birthYear"
|
||||
name="birthYear"
|
||||
value={props.values.birthYear}
|
||||
className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
|
||||
onChange={props.handleChange}
|
||||
>
|
||||
<>
|
||||
<option className="text-slate-500 text-lg" value=''>
|
||||
select
|
||||
</option>
|
||||
{year.map(item => (
|
||||
<option key={item} className="text-slate-500 text-lg" value={item}>
|
||||
{item}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* right part */}
|
||||
<div className='p-4 w-full flex flex-col gap-4 bg-blue-200 dark:bg-slate-900 rounded-2xl'>
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Address"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputClass="input-curve lg border border-light-purple"
|
||||
type="text"
|
||||
name="address"
|
||||
value={props.values.address}
|
||||
inputHandler={props.handleChange}
|
||||
error={(props.errors.address && props.touched.address) && props.errors.address}
|
||||
/>
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="City"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputClass="input-curve lg border border-light-purple"
|
||||
type="text"
|
||||
name="city"
|
||||
value={props.values.city}
|
||||
inputHandler={props.handleChange}
|
||||
error={(props.errors.city && props.touched.city) && props.errors.city}
|
||||
/>
|
||||
{/* <InputCom
|
||||
fieldClass="px-6"
|
||||
label="State/Province"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputClass="input-curve lg border border-light-purple"
|
||||
type="text"
|
||||
name="state"
|
||||
value={props.values.state}
|
||||
inputHandler={props.handleChange}
|
||||
error={(props.errors.state && props.touched.state) && props.errors.state}
|
||||
/> */}
|
||||
|
||||
<div className="field w-full grid md:grid-cols-2 gap-4">
|
||||
<div className="field w-full">
|
||||
<label
|
||||
htmlFor="state"
|
||||
className="job-label job-label-flex"
|
||||
>
|
||||
<span>State/Province</span>
|
||||
{props.errors.state && props.touched.state && (
|
||||
<span className="text-[12px] text-red-500">
|
||||
{props.errors.state}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<select
|
||||
id="state"
|
||||
name="state"
|
||||
value={props.values.state}
|
||||
className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
|
||||
onChange={props.handleChange}
|
||||
>
|
||||
{state.loading ?
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Loading...
|
||||
</option>
|
||||
: Object.keys(state.data)?.length > 0 ?
|
||||
<>
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Select State
|
||||
</option>
|
||||
{Object.keys(state.data)?.map((item, index) => (
|
||||
<option key={index} className="text-slate-500 text-lg" value={item}>
|
||||
{state?.data[item]}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
:
|
||||
<option className="text-slate-500 text-lg" value="">
|
||||
Not Found
|
||||
</option>
|
||||
}
|
||||
</select>
|
||||
error={(props.errors.zipCode && props.touched.zipCode) && props.errors.zipCode}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Zip Code"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputClass="input-curve lg border border-light-purple"
|
||||
type="text"
|
||||
name="zipCode"
|
||||
value={props.values.zipCode}
|
||||
inputHandler={props.handleChange}
|
||||
error={(props.errors.zipCode && props.touched.zipCode) && props.errors.zipCode}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -532,8 +565,8 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</Form>
|
||||
</div>
|
||||
)}
|
||||
</Formik>
|
||||
</ModalCom>
|
||||
@@ -543,29 +576,24 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
|
||||
export default VirtualAddCardPopout;
|
||||
|
||||
|
||||
|
||||
const day = new Array(31).fill(0).map((_,i) => i+1 )
|
||||
|
||||
const month = [
|
||||
{value: 0, name: 'January'},
|
||||
{value: 1, name: 'February'},
|
||||
{value: 2, name: 'March'},
|
||||
{value: 3, name: 'April'},
|
||||
{value: 4, name: 'May'},
|
||||
{value: 5, name: 'June'},
|
||||
{value: 6, name: 'July'},
|
||||
{value: 7, name: 'August'},
|
||||
{value: 8, name: 'September'},
|
||||
{value: 9, name: 'October'},
|
||||
{value: 10, name: 'November'},
|
||||
{value: 11, name: 'December'},
|
||||
{value: 1, name: 'January'},
|
||||
{value: 2, name: 'February'},
|
||||
{value: 3, name: 'March'},
|
||||
{value: 4, name: 'April'},
|
||||
{value: 5, name: 'May'},
|
||||
{value: 6, name: 'June'},
|
||||
{value: 7, name: 'July'},
|
||||
{value: 8, name: 'August'},
|
||||
{value: 9, name: 'September'},
|
||||
{value: 10, name: 'October'},
|
||||
{value: 11, name: 'November'},
|
||||
{value: 12, name: 'December'},
|
||||
]
|
||||
|
||||
const date = new Date().getFullYear()
|
||||
|
||||
const year = new Array(100).fill(0).map((_,i) => (date-2) - i+1 )
|
||||
|
||||
// const state = [
|
||||
// {value: 'abia', name: 'Abia'},
|
||||
// {value: 'imo', name: 'Imo'},
|
||||
// {value: 'anambra', name: 'Anambra'},
|
||||
// ]
|
||||
const year = new Array(100).fill(0).map((_,i) => (date-2) - i+1 )
|
||||
@@ -24,10 +24,11 @@ export default function Resources(props) {
|
||||
const ownProducts = products.datas;
|
||||
// Resource Props
|
||||
const __resources = props.MyResourceData;
|
||||
|
||||
//debugger;
|
||||
// Collection Items
|
||||
const CreatedSell = __resources?.marketdata?.data;
|
||||
const tab_categories = __resources?.tab_categories?.data;
|
||||
const tab_categories = __resources?.tab_categories?.data?.sort((a, b) => b.name.localeCompare(a.name))
|
||||
const collectionProducts = __resources?.collectiondata?.data;
|
||||
const onSaleProducts = __resources?.marketdata?.data;
|
||||
const CreatedBits = __resources?.productdata?.datas;
|
||||
@@ -77,23 +78,22 @@ export default function Resources(props) {
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getUploadedFiles();
|
||||
}, [uploadsTable]);
|
||||
|
||||
// const [tab, setTab] = useState(tab_categories ? tab_categories[0]?.name : "");
|
||||
const [tab, setTab] = useState(
|
||||
props.activeTab
|
||||
? props.activeTab
|
||||
: tab_categories
|
||||
? tab_categories[0]?.name
|
||||
: ""
|
||||
: "onsale"
|
||||
);
|
||||
|
||||
const tabHandler = (value) => {
|
||||
setTab(value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getUploadedFiles();
|
||||
}, [uploadsTable]);
|
||||
|
||||
|
||||
// Category Components
|
||||
const tabComponents = {
|
||||
blog: <BlogTab blogdata={blogItems} />,
|
||||
|
||||
Reference in New Issue
Block a user