Updated referral page layout #779
@@ -28,21 +28,14 @@ export default function VerifyYou() {
|
||||
</span>
|
||||
</div>
|
||||
<div className="input-area">
|
||||
<div className="mb-5">
|
||||
<div className="mb-5">
|
||||
<p className="text-[14px] leading-[19px] text-center text-[#181c32]">
|
||||
<b>Verify Email.</b> Help us secure your WrenchBoard account
|
||||
by verifying your email registration address. Verification
|
||||
will let you access all of WrenchBoard's features.
|
||||
Please <span className="font-semibold tracking-wide">verify your email</span> to secure your account.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mb-5">
|
||||
<p className="text-[14px] leading-[19px] text-center text-[#181c32]">
|
||||
If you do not receive the confirmation message within a few
|
||||
minutes of signing up, please check your Junk E-mail folder
|
||||
just in case the confirmation email got delivered there
|
||||
instead of your inbox. If so, select the confirmation
|
||||
message and click Not Junk, which will allow future messages
|
||||
to get through.
|
||||
If you don't see the confirmation email, check your <span className='font-semibold tracking-wide'>Junk</span> or <span className='font-semibold tracking-wide'>Spam</span> folder and mark it as "Not Junk"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,6 +7,7 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
import { Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import ReferralTable from "../MyWallet/WalletComponent/ReferralTable";
|
||||
import TabButton from "../customTabs/TabButton";
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
ref_email: Yup.string()
|
||||
@@ -105,123 +106,165 @@ function ReferralDisplay() {
|
||||
sendReferralMsg({...values}); // FUNCTION TO SEND REFERRAL MESSAGE
|
||||
};
|
||||
|
||||
const [selectedTab, setSelectedTab] = useState("Send Referral");
|
||||
const tabs = [ //STATE FOR SWITCHING BETWEEN TABS
|
||||
{
|
||||
id: 1,
|
||||
title: "Send Referral",
|
||||
iconName: "history",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Referral List",
|
||||
iconName: "history",
|
||||
},
|
||||
]
|
||||
|
||||
useEffect(() => {
|
||||
allReferrals();
|
||||
}, [refHistoryReload]);
|
||||
|
||||
return (
|
||||
<div className="content-wrapper w-full lg:flex xl:space-x-8 bottomMargin">
|
||||
<div className="lg:w-2/2 w-full mb-10 lg:mb-0">
|
||||
<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 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>
|
||||
</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}
|
||||
/>
|
||||
{props.errors.ref_firstname &&
|
||||
props.touched.ref_firstname && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.ref_firstname}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="referral w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
|
||||
<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 && (
|
||||
{/* 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_firstname}
|
||||
{props.errors.ref_email}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
</Form>
|
||||
)}
|
||||
<div className="referral-btn flex justify-end items-center py-4 border-b-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>
|
||||
</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 className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
|
||||
<h2 className="mb-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
|
||||
Referral List
|
||||
</h2>
|
||||
{referralList.loading ? (
|
||||
<LoadingSpinner size="32" color="sky-blue" />
|
||||
) : (
|
||||
<ReferralTable history={referralList} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -208,7 +208,7 @@ class usersService {
|
||||
// }
|
||||
getHeroJBanners() {
|
||||
var postData = {
|
||||
uuid: localStorage.getItem("uid"),
|
||||
uid: localStorage.getItem("uid"),
|
||||
member_id: localStorage.getItem("member_id"),
|
||||
sessionid: localStorage.getItem("session_token"),
|
||||
page: 0,
|
||||
|
||||
Reference in New Issue
Block a user