Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
f58e8834fb | ||
 ameye
|
1a829789d4 |
@@ -125,148 +125,147 @@ function ReferralDisplay() {
|
||||
}, [refHistoryReload]);
|
||||
|
||||
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='overflow-hidden mb-5 lg:mb-0 py-2 lg:py-8'>
|
||||
{tabs.map((item) => (
|
||||
<div key={item.id} className='w-full'>
|
||||
<TabButton
|
||||
key={item.id}
|
||||
item={item.title}
|
||||
iconName={item.iconName}
|
||||
selectedTab={selectedTab}
|
||||
setSelectedTab={setSelectedTab}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<>
|
||||
<div className='w-full'>
|
||||
<div className="sm:flex justify-between items-center mb-6">
|
||||
<div className="mb-5 sm:mb-0">
|
||||
<h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
|
||||
<span>Refer a Friend</span>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533] mr-10"></div>
|
||||
<div className="flex-1 overflow-y-auto min-h-[520px]">
|
||||
<>
|
||||
<div className='hidden'>
|
||||
<div className="sm:flex justify-between items-center mb-6">
|
||||
<div className="mb-5 sm:mb-0">
|
||||
<h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
|
||||
<span>Refer a Friend</span>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</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}
|
||||
<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='overflow-hidden mb-5 lg:mb-0 py-2 lg:py-8'>
|
||||
{tabs.map((item) => (
|
||||
<div key={item.id} className='w-full'>
|
||||
<TabButton
|
||||
key={item.id}
|
||||
item={item.title}
|
||||
iconName={item.iconName}
|
||||
selectedTab={selectedTab}
|
||||
setSelectedTab={setSelectedTab}
|
||||
/>
|
||||
{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>
|
||||
}
|
||||
|
||||
{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
|
||||
</div>
|
||||
<div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533] mr-10"></div>
|
||||
<div className="flex-1 overflow-y-auto min-h-[520px]">
|
||||
<>
|
||||
{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>
|
||||
{referralList.loading ? (
|
||||
<LoadingSpinner size="22" color="sky-blue" />
|
||||
) : (
|
||||
<ReferralTable history={referralList} />
|
||||
)}
|
||||
<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 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>
|
||||
</>
|
||||
}
|
||||
</>
|
||||
|
||||
|
||||
}
|
||||
|
||||
{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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user