Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
fad38331db | ||
 ameye
|
9e15c51c31 | ||
|
victorAnumudu
|
b2bffb3b83 | ||
|
ameye
|
dd1a2953da |
@@ -23,17 +23,19 @@ export default function ProductCardStyleTwo({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<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 || ""
|
className || ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className="flex flex-col justify-between w-full h-full">
|
<div className="flex flex-col justify-between w-full h-full">
|
||||||
<div className="thumbnail-area w-full">
|
<div className="thumbnail-area w-full">
|
||||||
<div
|
<div
|
||||||
className="w-full h-[236px] p-6 rounded-xl overflow-hidden"
|
className="w-full h-[140px] p-6 rounded-lg overflow-hidden"
|
||||||
style={{
|
style={{
|
||||||
// background: `url(${`https://blog.wrenchboard.com/wp-content/uploads/${datas.meta_value}`}) 0% 0% / cover no-repeat`,
|
// 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">
|
<div className="product-two-options flex justify-between mb-5 relative">
|
||||||
@@ -50,7 +52,7 @@ export default function ProductCardStyleTwo({
|
|||||||
</div>
|
</div>
|
||||||
<div className="details-area">
|
<div className="details-area">
|
||||||
{/* title */}
|
{/* 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">
|
<h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
|
||||||
{datas.post_title || "dummy title..."}
|
{datas.post_title || "dummy title..."}
|
||||||
</h1>
|
</h1>
|
||||||
|
|||||||
@@ -14,8 +14,8 @@ const validationSchema = Yup.object().shape({
|
|||||||
country: Yup.string()
|
country: Yup.string()
|
||||||
.required("Required"),
|
.required("Required"),
|
||||||
phone_number: Yup.string()
|
phone_number: Yup.string()
|
||||||
.min(9, "Min 9 characters")
|
.min(9, "Invalid")
|
||||||
.max(11, "Max 11 characters")
|
.max(11, "Invalid")
|
||||||
.required("Required"),
|
.required("Required"),
|
||||||
// birthYear: Yup.string()
|
// birthYear: Yup.string()
|
||||||
// .required("Required"),
|
// .required("Required"),
|
||||||
@@ -177,8 +177,8 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
|
|||||||
onSubmit={handleSubmit}
|
onSubmit={handleSubmit}
|
||||||
>
|
>
|
||||||
{(props) => (
|
{(props) => (
|
||||||
<Form className="w-full overflow-y-auto">
|
<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">
|
||||||
<div className="logout-modal-wrapper mx-auto w-[90%] lg:w-[900px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
|
<Form className="w-full">
|
||||||
<div className="modal-header-con">
|
<div className="modal-header-con">
|
||||||
<h1 className="modal-title">
|
<h1 className="modal-title">
|
||||||
{walletItem?.description}
|
{walletItem?.description}
|
||||||
@@ -209,320 +209,329 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="p-4 w-full grid lg:grid-cols-2 gap-4">
|
<div className='p-4 w-full flex flex-col h-auto md:h-[28rem]'>
|
||||||
{/* left part */}
|
<div className='pb-4'>
|
||||||
<div className='w-full flex flex-col gap-4'>
|
|
||||||
<h1 className='text-lg md:text-xl flex gap-1'><span className='font-bold'>Name:</span>{userDetails.lastname} {userDetails.firstname}</h1>
|
<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>
|
||||||
<div className="md:col-span-1 field w-full">
|
<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
|
<label
|
||||||
htmlFor="country"
|
htmlFor="state"
|
||||||
className="job-label job-label-flex"
|
className="job-label job-label-flex"
|
||||||
>
|
>
|
||||||
<span>Country</span>
|
<span>State/Province</span>
|
||||||
{props.errors.country && props.touched.country && (
|
{props.errors.state && props.touched.state && (
|
||||||
<span className="text-[12px] text-red-500">
|
<span className="text-[12px] text-red-500">
|
||||||
{props.errors.country}
|
{props.errors.state}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</label>
|
</label>
|
||||||
<select
|
<select
|
||||||
id="country"
|
id="state"
|
||||||
name="country"
|
name="state"
|
||||||
value={props.values.country}
|
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`}
|
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}
|
onChange={props.handleChange}
|
||||||
disabled={countryCode ? true : false}
|
|
||||||
>
|
>
|
||||||
{allCountries.loading ?
|
{state.loading ?
|
||||||
<option className="text-slate-500 text-lg" value="">
|
<option className="text-slate-500 text-lg" value="">
|
||||||
Loading...
|
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>
|
||||||
))}
|
: Object.keys(state.data)?.length > 0 ?
|
||||||
</>
|
<>
|
||||||
:
|
<option className="text-slate-500 text-lg" value="">
|
||||||
<option className="text-slate-500 text-lg" value="">
|
Select State
|
||||||
Not Found
|
</option>
|
||||||
</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>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div className='md:col-span-2'>
|
|
||||||
<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>
|
|
||||||
<div className="field w-full flex flex-col gap-4">
|
|
||||||
<p className='hidden job-label'>Date of Birth</p>
|
|
||||||
<div className='hidden 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 className=''>
|
|
||||||
<InputCom
|
<InputCom
|
||||||
fieldClass="px-6"
|
fieldClass="px-6"
|
||||||
label="Date of Birth"
|
label="Zip Code"
|
||||||
labelClass="tracking-wide"
|
labelClass="tracking-wide"
|
||||||
inputBg="bg-slate-100"
|
inputBg="bg-slate-100"
|
||||||
inputClass="input-curve lg border border-light-purple"
|
inputClass="input-curve lg border border-light-purple"
|
||||||
type="date"
|
type="text"
|
||||||
name="dob"
|
name="zipCode"
|
||||||
value={props.values.dob}
|
value={props.values.zipCode}
|
||||||
inputHandler={props.handleChange}
|
inputHandler={props.handleChange}
|
||||||
error={(props.errors.dob && props.touched.dob) && props.errors.dob}
|
error={(props.errors.zipCode && props.touched.zipCode) && props.errors.zipCode}
|
||||||
maxDate={year[0] + '-12-31'}
|
|
||||||
minDate={year[year?.length - 1] + '-01-01'}
|
|
||||||
/>
|
/>
|
||||||
</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>
|
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -556,8 +565,8 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
|
|||||||
</>
|
</>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Form>
|
||||||
</Form>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Formik>
|
</Formik>
|
||||||
</ModalCom>
|
</ModalCom>
|
||||||
|
|||||||
@@ -24,10 +24,11 @@ export default function Resources(props) {
|
|||||||
const ownProducts = products.datas;
|
const ownProducts = products.datas;
|
||||||
// Resource Props
|
// Resource Props
|
||||||
const __resources = props.MyResourceData;
|
const __resources = props.MyResourceData;
|
||||||
|
|
||||||
//debugger;
|
//debugger;
|
||||||
// Collection Items
|
// Collection Items
|
||||||
const CreatedSell = __resources?.marketdata?.data;
|
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 collectionProducts = __resources?.collectiondata?.data;
|
||||||
const onSaleProducts = __resources?.marketdata?.data;
|
const onSaleProducts = __resources?.marketdata?.data;
|
||||||
const CreatedBits = __resources?.productdata?.datas;
|
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(tab_categories ? tab_categories[0]?.name : "");
|
||||||
const [tab, setTab] = useState(
|
const [tab, setTab] = useState(
|
||||||
props.activeTab
|
props.activeTab
|
||||||
? props.activeTab
|
? props.activeTab
|
||||||
: tab_categories
|
: "onsale"
|
||||||
? tab_categories[0]?.name
|
|
||||||
: ""
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const tabHandler = (value) => {
|
const tabHandler = (value) => {
|
||||||
setTab(value);
|
setTab(value);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getUploadedFiles();
|
||||||
|
}, [uploadsTable]);
|
||||||
|
|
||||||
|
|
||||||
// Category Components
|
// Category Components
|
||||||
const tabComponents = {
|
const tabComponents = {
|
||||||
blog: <BlogTab blogdata={blogItems} />,
|
blog: <BlogTab blogdata={blogItems} />,
|
||||||
|
|||||||
Reference in New Issue
Block a user