victorAnumudu
274 lines
9.2 KiB
React
274 lines
9.2 KiB
React
import React, { useEffect, useState } from "react";
|
|
import { toast } from "react-toastify";
|
|
import usersService from "../../services/UsersService";
|
|
import InputCom from "../Helpers/Inputs/InputCom";
|
|
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()
|
|
.email("Wrong email format")
|
|
.matches(
|
|
// /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/,
|
|
/^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/,
|
|
"Invalid email format"
|
|
)
|
|
.min(3, "Minimum 3 characters")
|
|
.max(50, "Maximum 50 characters")
|
|
.required("Email is required"),
|
|
ref_firstname: Yup.string()
|
|
.min(3, "Minimum 3 characters")
|
|
.max(25, "Maximum 25 characters")
|
|
.required("Firstname is required"),
|
|
ref_lastname: Yup.string()
|
|
.min(3, "Minimum 3 characters")
|
|
.max(25, "Maximum 25 characters")
|
|
.required("Lastname is required"),
|
|
});
|
|
|
|
const initialValues = {
|
|
ref_firstname: "",
|
|
ref_lastname: "",
|
|
ref_email: "",
|
|
};
|
|
|
|
function ReferralDisplay() {
|
|
const apiCall = new usersService(); // GET API CALL
|
|
|
|
let [refHistoryReload, setRefHistoryReload] = useState(false); // Determines when referral history reloads
|
|
|
|
// STATE TO HOLD REFERRAL HISTORY
|
|
let [referralList, setReferralList] = useState({
|
|
loading: true,
|
|
error: false,
|
|
data: [],
|
|
});
|
|
|
|
let [error, setError] = useState({
|
|
message: "",
|
|
loading: false,
|
|
status: false,
|
|
}); // for displaying error message on the page
|
|
|
|
//function to call referral history API
|
|
const allReferrals = () => {
|
|
setReferralList({
|
|
loading: true,
|
|
error: false,
|
|
data: [],
|
|
});
|
|
apiCall
|
|
.getReferralHx()
|
|
.then((res) => {
|
|
setReferralList((prev) => {
|
|
return { ...prev, loading: false, data: [...res.data.result_list] };
|
|
});
|
|
})
|
|
.catch((error) => {
|
|
setReferralList((prev) => ({ ...prev, loading: false, error: true }));
|
|
});
|
|
};
|
|
|
|
//FUNCTION TO SEND REFERRAL MESSAGE
|
|
const sendReferralMsg = (postData) => {
|
|
apiCall
|
|
.sendReferralMsg(postData)
|
|
.then((res) => {
|
|
if (res.data.internal_return < 0) {
|
|
setError({
|
|
message: res.data.status,
|
|
loading: false,
|
|
status: false,
|
|
});
|
|
return;
|
|
} else {
|
|
toast.success(res.data.status | "Message Sent!");
|
|
setError({ message: "", loading: false, status: true });
|
|
setRefHistoryReload((prev) => !prev);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
setError({
|
|
message: "Opps! an error occured, try again later",
|
|
loading: false,
|
|
status: false,
|
|
});
|
|
});
|
|
};
|
|
|
|
//FUNCTION TO HANDLE SUBMIT
|
|
const handleSubmit = (values, helpers) => {
|
|
setError({ message: "", loading: true, status: false });
|
|
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="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 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>
|
|
|
|
{/* 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>
|
|
);
|
|
}
|
|
|
|
export default ReferralDisplay;
|