Merge branch 'referal-page-header' of WrenchBoard/Users-Wrench into master
This commit is contained in:
Gogs
@@ -125,148 +125,147 @@ function ReferralDisplay() {
|
|||||||
}, [refHistoryReload]);
|
}, [refHistoryReload]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full h-full p-4 bg-white dark:bg-dark-white rounded-2xl section-shadow lg:flex lg:px-10 px-4 justify-between">
|
<>
|
||||||
<div className="content-tab-items lg:w-[230px] w-full mr-2">
|
<div className='w-full'>
|
||||||
<div className='overflow-hidden mb-5 lg:mb-0 py-2 lg:py-8'>
|
<div className="sm:flex justify-between items-center mb-6">
|
||||||
{tabs.map((item) => (
|
<div className="mb-5 sm:mb-0">
|
||||||
<div key={item.id} className='w-full'>
|
<h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
|
||||||
<TabButton
|
<span>Refer a Friend</span>
|
||||||
key={item.id}
|
</h1>
|
||||||
item={item.title}
|
|
||||||
iconName={item.iconName}
|
|
||||||
selectedTab={selectedTab}
|
|
||||||
setSelectedTab={setSelectedTab}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533] mr-10"></div>
|
<div className="w-full h-full p-4 bg-white dark:bg-dark-white rounded-2xl section-shadow lg:flex lg:px-10 px-4 justify-between">
|
||||||
<div className="flex-1 overflow-y-auto min-h-[520px]">
|
<div className="content-tab-items lg:w-[230px] w-full mr-2">
|
||||||
<>
|
<div className='overflow-hidden mb-5 lg:mb-0 py-2 lg:py-8'>
|
||||||
<div className='hidden'>
|
{tabs.map((item) => (
|
||||||
<div className="sm:flex justify-between items-center mb-6">
|
<div key={item.id} className='w-full'>
|
||||||
<div className="mb-5 sm:mb-0">
|
<TabButton
|
||||||
<h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
|
key={item.id}
|
||||||
<span>Refer a Friend</span>
|
item={item.title}
|
||||||
</h1>
|
iconName={item.iconName}
|
||||||
</div>
|
selectedTab={selectedTab}
|
||||||
</div>
|
setSelectedTab={setSelectedTab}
|
||||||
</div>
|
|
||||||
{selectedTab == 'Send Referral' &&
|
|
||||||
<div className="referral w-full p-4">
|
|
||||||
<h2 className="mb-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
|
|
||||||
Send Referral
|
|
||||||
</h2>
|
|
||||||
<Formik
|
|
||||||
initialValues={initialValues}
|
|
||||||
validationSchema={validationSchema}
|
|
||||||
onSubmit={handleSubmit}
|
|
||||||
>
|
|
||||||
{(props) => (
|
|
||||||
<Form className="referral-info">
|
|
||||||
<div className="block md:mb-6 md:flex gap-10">
|
|
||||||
{/* Firstname */}
|
|
||||||
<div className="field w-full mb-6 md:mb-0">
|
|
||||||
<InputCom
|
|
||||||
fieldClass="px-6"
|
|
||||||
label="Firstname"
|
|
||||||
type="text"
|
|
||||||
name="ref_firstname"
|
|
||||||
placeholder="Firstname"
|
|
||||||
value={props.values.ref_firstname}
|
|
||||||
inputHandler={props.handleChange}
|
|
||||||
blurHandler={props.handleBlur}
|
|
||||||
/>
|
/>
|
||||||
{props.errors.ref_firstname &&
|
|
||||||
props.touched.ref_firstname && (
|
|
||||||
<p className="text-sm text-red-500">
|
|
||||||
{props.errors.ref_firstname}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Lastname */}
|
|
||||||
<div className="field w-full mb-6 md:mb-0">
|
|
||||||
<InputCom
|
|
||||||
fieldClass="px-6"
|
|
||||||
label="Lastname"
|
|
||||||
type="text"
|
|
||||||
name="ref_lastname"
|
|
||||||
placeholder="Lastname"
|
|
||||||
value={props.values.ref_lastname}
|
|
||||||
inputHandler={props.handleChange}
|
|
||||||
blurHandler={props.handleBlur}
|
|
||||||
/>
|
|
||||||
{props.errors.ref_lastname &&
|
|
||||||
props.touched.ref_lastname && (
|
|
||||||
<p className="text-sm text-red-500">
|
|
||||||
{props.errors.ref_lastname}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
))}
|
||||||
<div className="field w-full mb-6">
|
|
||||||
<InputCom
|
|
||||||
fieldClass="px-6"
|
|
||||||
label="Email"
|
|
||||||
type="text"
|
|
||||||
name="ref_email"
|
|
||||||
placeholder="Email"
|
|
||||||
value={props.values.ref_email}
|
|
||||||
inputHandler={props.handleChange}
|
|
||||||
blurHandler={props.handleBlur}
|
|
||||||
/>
|
|
||||||
{props.errors.ref_email && props.touched.ref_email && (
|
|
||||||
<p className="text-sm text-red-500">
|
|
||||||
{props.errors.ref_email}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
{error.message != "" && (
|
|
||||||
<p className="text-base text-red-500 py-2">{error.message}</p>
|
|
||||||
)}
|
|
||||||
<div className="referral-btn flex justify-end items-center py-4">
|
|
||||||
{error.loading ? (
|
|
||||||
<LoadingSpinner size="6" color="sky-blue" />
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
|
||||||
>
|
|
||||||
Send Message
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Form>
|
|
||||||
)}
|
|
||||||
</Formik>
|
|
||||||
</div>
|
</div>
|
||||||
}
|
</div>
|
||||||
|
<div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533] mr-10"></div>
|
||||||
{selectedTab == 'Referral List' &&
|
<div className="flex-1 overflow-y-auto min-h-[520px]">
|
||||||
<>
|
<>
|
||||||
<div className="w-full p-4">
|
{selectedTab == 'Send Referral' &&
|
||||||
<h2 className="mb-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
|
<div className="referral w-full p-4">
|
||||||
Referral List
|
<h2 className="mb-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
|
||||||
|
Send Referral
|
||||||
</h2>
|
</h2>
|
||||||
{referralList.loading ? (
|
<Formik
|
||||||
<LoadingSpinner size="22" color="sky-blue" />
|
initialValues={initialValues}
|
||||||
) : (
|
validationSchema={validationSchema}
|
||||||
<ReferralTable history={referralList} />
|
onSubmit={handleSubmit}
|
||||||
)}
|
>
|
||||||
|
{(props) => (
|
||||||
|
<Form className="referral-info">
|
||||||
|
<div className="block md:mb-6 md:flex gap-10">
|
||||||
|
{/* Firstname */}
|
||||||
|
<div className="field w-full mb-6 md:mb-0">
|
||||||
|
<InputCom
|
||||||
|
fieldClass="px-6"
|
||||||
|
label="Firstname"
|
||||||
|
type="text"
|
||||||
|
name="ref_firstname"
|
||||||
|
placeholder="Firstname"
|
||||||
|
value={props.values.ref_firstname}
|
||||||
|
inputHandler={props.handleChange}
|
||||||
|
blurHandler={props.handleBlur}
|
||||||
|
/>
|
||||||
|
{props.errors.ref_firstname &&
|
||||||
|
props.touched.ref_firstname && (
|
||||||
|
<p className="text-sm text-red-500">
|
||||||
|
{props.errors.ref_firstname}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Lastname */}
|
||||||
|
<div className="field w-full mb-6 md:mb-0">
|
||||||
|
<InputCom
|
||||||
|
fieldClass="px-6"
|
||||||
|
label="Lastname"
|
||||||
|
type="text"
|
||||||
|
name="ref_lastname"
|
||||||
|
placeholder="Lastname"
|
||||||
|
value={props.values.ref_lastname}
|
||||||
|
inputHandler={props.handleChange}
|
||||||
|
blurHandler={props.handleBlur}
|
||||||
|
/>
|
||||||
|
{props.errors.ref_lastname &&
|
||||||
|
props.touched.ref_lastname && (
|
||||||
|
<p className="text-sm text-red-500">
|
||||||
|
{props.errors.ref_lastname}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="field w-full mb-6">
|
||||||
|
<InputCom
|
||||||
|
fieldClass="px-6"
|
||||||
|
label="Email"
|
||||||
|
type="text"
|
||||||
|
name="ref_email"
|
||||||
|
placeholder="Email"
|
||||||
|
value={props.values.ref_email}
|
||||||
|
inputHandler={props.handleChange}
|
||||||
|
blurHandler={props.handleBlur}
|
||||||
|
/>
|
||||||
|
{props.errors.ref_email && props.touched.ref_email && (
|
||||||
|
<p className="text-sm text-red-500">
|
||||||
|
{props.errors.ref_email}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
{error.message != "" && (
|
||||||
|
<p className="text-base text-red-500 py-2">{error.message}</p>
|
||||||
|
)}
|
||||||
|
<div className="referral-btn flex justify-end items-center py-4">
|
||||||
|
{error.loading ? (
|
||||||
|
<LoadingSpinner size="6" color="sky-blue" />
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||||
|
>
|
||||||
|
Send Message
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
)}
|
||||||
|
</Formik>
|
||||||
</div>
|
</div>
|
||||||
</>
|
}
|
||||||
}
|
|
||||||
</>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{selectedTab == 'Referral List' &&
|
||||||
|
<>
|
||||||
|
<div className="w-full p-4">
|
||||||
|
<h2 className="mb-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
|
||||||
|
Referral List
|
||||||
|
</h2>
|
||||||
|
{referralList.loading ? (
|
||||||
|
<LoadingSpinner size="22" color="sky-blue" />
|
||||||
|
) : (
|
||||||
|
<ReferralTable history={referralList} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user