victorAnumudu
274 lines
11 KiB
TypeScript
274 lines
11 KiB
TypeScript
import { Button, InputCompOne, Stepper } from '../../shared/index';
|
|
|
|
import {Formik, Form} from 'formik'
|
|
import * as Yup from "yup";
|
|
|
|
type Props = {
|
|
handleNextStep:(value:{})=>any
|
|
}
|
|
|
|
const initialValues = {
|
|
job_title: "",
|
|
name: "",
|
|
sector: "",
|
|
industry: "",
|
|
resumption_date: "",
|
|
email:"",
|
|
annual_income: "",
|
|
monthly_salary: "",
|
|
salary_payment_date: "",
|
|
employment_id: "",
|
|
highest_eductaion: ""
|
|
};
|
|
|
|
// To get the validation schema
|
|
const validationSchema = Yup.object().shape({
|
|
job_title: Yup.string()
|
|
.required("Required"),
|
|
name: Yup.string()
|
|
.required("Required"),
|
|
sector: Yup.string()
|
|
.required("Required"),
|
|
industry: Yup.string()
|
|
.required("Required"),
|
|
resumption_date: Yup.string()
|
|
.required("Required"),
|
|
email: Yup.string()
|
|
.email("Invalid")
|
|
.required("Required"),
|
|
annual_income: Yup.string()
|
|
.required("Required")
|
|
.test("no-e", "Invalid", (value:any) => {
|
|
if (value && /^[0-9]*$/.test(value) == false) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}),
|
|
monthly_salary: Yup.string()
|
|
.required("Required")
|
|
.test("no-e", "Invalid", (value:any) => {
|
|
if (value && /^[0-9]*$/.test(value) == false) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}),
|
|
salary_payment_date: Yup.string()
|
|
.required("Required"),
|
|
employment_id: Yup.string()
|
|
.required("Required"),
|
|
highest_eductaion: Yup.string()
|
|
.required("Required"),
|
|
});
|
|
|
|
export default function DashboardHomeEmploymentInfo({handleNextStep}:Props) {
|
|
|
|
|
|
//FUNCTION TO HANDLE SUBMIT
|
|
const handleSubmit = (values:any) => {
|
|
handleNextStep({employment: values})
|
|
};
|
|
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<div className="w-full flex justify-center">
|
|
<Stepper step={2} />
|
|
</div>
|
|
<Formik
|
|
initialValues={initialValues}
|
|
validationSchema={validationSchema}
|
|
onSubmit={handleSubmit}
|
|
>
|
|
{(props)=>(
|
|
<Form>
|
|
<div className="mt-[3.25rem] flex flex-col gap-9">
|
|
<p className='text-red-500 text-lg md:text-2xl'>Employment Informaton</p>
|
|
<div className="flex items-center gap-[4.125rem]">
|
|
<InputCompOne
|
|
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
|
|
name="job_title"
|
|
floatLabel="Job Title"
|
|
// labelClass="font-bold text-[1.125rem]"
|
|
input
|
|
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
|
|
placeholder="Software Engineer"
|
|
value={props.values.job_title}
|
|
onChange={props.handleChange}
|
|
error={(props.errors.job_title && props.touched.job_title) ? props.errors.job_title : ''}
|
|
/>
|
|
<InputCompOne
|
|
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
|
|
name="name"
|
|
floatLabel="Employer name"
|
|
// labelClass="font-bold text-[1.125rem]"
|
|
input
|
|
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
|
|
placeholder="Mr. Mark John"
|
|
value={props.values.name}
|
|
onChange={props.handleChange}
|
|
error={(props.errors.name && props.touched.name) ? props.errors.name : ''}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center gap-[4.125rem]">
|
|
<InputCompOne
|
|
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
|
|
name="sector"
|
|
floatLabel="Job Sector"
|
|
// labelClass="font-bold text-[1.125rem]"
|
|
select={true}
|
|
selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
|
|
selectOptions={jobSector}
|
|
selectValue={props.values.sector}
|
|
onChange={props.handleChange}
|
|
error={(props.errors.sector && props.touched.sector) ? props.errors.sector : ''}
|
|
/>
|
|
<InputCompOne
|
|
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
|
|
name="industry"
|
|
floatLabel="Select your industry"
|
|
// labelClass="font-bold text-[1.125rem]"
|
|
select={true}
|
|
selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
|
|
selectOptions={industry}
|
|
selectValue={props.values.industry}
|
|
onChange={props.handleChange}
|
|
error={(props.errors.industry && props.touched.industry) ? props.errors.industry : ''}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center gap-[4.125rem]">
|
|
<InputCompOne
|
|
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
|
|
name="resumption_date"
|
|
floatLabel="Date of resumption"
|
|
// labelClass="font-bold text-[1.125rem]"
|
|
input
|
|
inputType='date'
|
|
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
|
|
placeholder="12/12/2015"
|
|
value={props.values.resumption_date}
|
|
onChange={props.handleChange}
|
|
error={(props.errors.resumption_date && props.touched.resumption_date) ? props.errors.resumption_date : ''}
|
|
/>
|
|
<InputCompOne
|
|
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
|
|
name="email"
|
|
floatLabel="Employers official email"
|
|
// labelClass="font-bold text-[1.125rem]"
|
|
input
|
|
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
|
|
placeholder="example@gmail.com"
|
|
value={props.values.email}
|
|
onChange={props.handleChange}
|
|
error={(props.errors.email && props.touched.email) ? props.errors.email : ''}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center gap-[4.125rem]">
|
|
<InputCompOne
|
|
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
|
|
name="annual_income"
|
|
floatLabel="Annual Income"
|
|
// labelClass="font-bold text-[1.125rem]"
|
|
input
|
|
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem] text-right"
|
|
placeholder="1,200,000"
|
|
value={props.values.annual_income}
|
|
onChange={props.handleChange}
|
|
error={(props.errors.annual_income && props.touched.annual_income) ? props.errors.annual_income : ''}
|
|
/>
|
|
<InputCompOne
|
|
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
|
|
name="monthly_salary"
|
|
floatLabel="Net monthly salary"
|
|
// labelClass="font-bold text-[1.125rem]"
|
|
input
|
|
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem] text-right"
|
|
placeholder="100,000"
|
|
value={props.values.monthly_salary}
|
|
onChange={props.handleChange}
|
|
error={(props.errors.monthly_salary && props.touched.monthly_salary) ? props.errors.monthly_salary : ''}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center gap-[4.125rem]">
|
|
<InputCompOne
|
|
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
|
|
name="salary_payment_date"
|
|
floatLabel="Salary payment date"
|
|
// labelClass="font-bold text-[1.125rem]"
|
|
input
|
|
inputType='date'
|
|
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
|
|
placeholder="30th of every month"
|
|
value={props.values.salary_payment_date}
|
|
onChange={props.handleChange}
|
|
error={(props.errors.salary_payment_date && props.touched.salary_payment_date) ? props.errors.salary_payment_date : ''}
|
|
/>
|
|
<InputCompOne
|
|
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
|
|
name="employment_id"
|
|
floatLabel="Employee ID"
|
|
// labelClass="font-bold text-[1.125rem]"
|
|
input
|
|
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
|
|
placeholder="LS/001/005"
|
|
value={props.values.employment_id}
|
|
onChange={props.handleChange}
|
|
error={(props.errors.employment_id && props.touched.employment_id) ? props.errors.employment_id : ''}
|
|
/>
|
|
</div>
|
|
<InputCompOne
|
|
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
|
|
name="highest_eductaion"
|
|
floatLabel="Highest level of education"
|
|
// labelClass="font-bold text-[1.125rem]"
|
|
select={true}
|
|
selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
|
|
selectOptions={highestEductaion}
|
|
selectValue={props.values.highest_eductaion}
|
|
onChange={props.handleChange}
|
|
error={(props.errors.highest_eductaion && props.touched.highest_eductaion) ? props.errors.highest_eductaion : ''}
|
|
/>
|
|
<Button
|
|
className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
|
|
text="Next"
|
|
type="submit"
|
|
/>
|
|
</div>
|
|
</Form>
|
|
)}
|
|
</Formik>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|
|
|
|
interface SelectOption {
|
|
loading: boolean;
|
|
data: {value: string;
|
|
label: string}[]
|
|
}
|
|
|
|
|
|
const jobSector: SelectOption = {
|
|
loading: false,
|
|
data: [
|
|
{ value: "", label: "Please Select" },
|
|
{ value: "private (non academic)", label: "Private (non academic)" },
|
|
]
|
|
}
|
|
|
|
const industry: SelectOption = {
|
|
loading: false,
|
|
data: [
|
|
{ value: "", label: "Please Select" },
|
|
{ value: "engineering", label: "Engineering" },
|
|
]
|
|
}
|
|
|
|
const highestEductaion: SelectOption = {
|
|
loading: false,
|
|
data: [
|
|
{ value: "", label: "Please Select" },
|
|
{ value: "b.sc + professional qualification", label: "B.Sc + Professional Qualification" },
|
|
]
|
|
} |