victorAnumudu
403 lines
20 KiB
TypeScript
403 lines
20 KiB
TypeScript
import React from "react";
|
||
import { Button, InputCompOne } from "..";
|
||
|
||
import {Formik, Form} from 'formik'
|
||
import * as Yup from "yup";
|
||
|
||
const initialValues = {
|
||
job_title: "",
|
||
employer_name: "",
|
||
employer_email:"",
|
||
date_of_resumption: "",
|
||
employee_id: "",
|
||
annual_income: "",
|
||
monthly_salary: "",
|
||
salary_payment_date: "",
|
||
ref_name: "",
|
||
ref_email: "",
|
||
ref_number: "",
|
||
ref_relationship: "",
|
||
ref_bvn: "",
|
||
ref_two_name: "",
|
||
ref_two_email: "",
|
||
ref_two_number: "",
|
||
ref_two_relationship: "",
|
||
ref_two_bvn: "",
|
||
};
|
||
|
||
// To get the validation schema
|
||
const validationSchema = Yup.object().shape({
|
||
job_title: Yup.string()
|
||
.required("Required"),
|
||
employer_name: Yup.string()
|
||
.required("Required"),
|
||
date_of_resumption: Yup.string()
|
||
.required("Required"),
|
||
employer_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"),
|
||
employee_id: Yup.string()
|
||
.required("Required"),
|
||
ref_name: Yup.string()
|
||
.required("Required"),
|
||
ref_email: Yup.string()
|
||
.email("Invalid")
|
||
.required("Required"),
|
||
ref_number: Yup.string()
|
||
.required("Required"),
|
||
ref_relationship: Yup.string()
|
||
.required("Required"),
|
||
ref_bvn: Yup.string()
|
||
.required("BVN is required")
|
||
.test("no-e", "Invalid number", (value:any) => {
|
||
if (value && /^[0-9]*$/.test(value) == false) {
|
||
return false;
|
||
}
|
||
return true;
|
||
})
|
||
.min(11, "must be 11 digits")
|
||
.max(11, "must be 11 digits"),
|
||
ref_two_name: Yup.string()
|
||
.required("Required"),
|
||
ref_two_email: Yup.string()
|
||
.email("Invalid")
|
||
.required("Required"),
|
||
ref_two_number: Yup.string()
|
||
.required("Required"),
|
||
ref_two_relationship: Yup.string()
|
||
.required("Required"),
|
||
ref_two_bvn: Yup.string()
|
||
.required("BVN is required")
|
||
.test("no-e", "Invalid number", (value:any) => {
|
||
if (value && /^[0-9]*$/.test(value) == false) {
|
||
return false;
|
||
}
|
||
return true;
|
||
})
|
||
.min(11, "must be 11 digits")
|
||
.max(11, "must be 11 digits"),
|
||
});
|
||
|
||
interface YourAreAlmostThereProps {
|
||
handleNextStep: any;
|
||
}
|
||
|
||
const YourAreAlmostThere: React.FC<YourAreAlmostThereProps> = ({ handleNextStep }) => {
|
||
|
||
//FUNCTION TO HANDLE SUBMIT
|
||
const handleSubmit = (values:any) => {
|
||
console.log(values)
|
||
handleNextStep()
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem]">
|
||
You’re almost there
|
||
</h1>
|
||
<Formik
|
||
initialValues={initialValues}
|
||
validationSchema={validationSchema}
|
||
onSubmit={handleSubmit}
|
||
>
|
||
{(props)=>(
|
||
<Form>
|
||
<div className="flex flex-col gap-6">
|
||
<>
|
||
<div className="w-full rounded py-3 bg-[#5C2684] px-5">
|
||
<p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
|
||
EMPLOYMENT DETAILS
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-4">
|
||
<InputCompOne
|
||
parentClass="max-w-[17.9375rem] w-full"
|
||
label="Job Title"
|
||
name="job_title"
|
||
parentInputClass="w-full"
|
||
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||
input
|
||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
|
||
value={props.values.job_title}
|
||
onChange={props.handleChange}
|
||
error={(props.errors.job_title && props.touched.job_title) ? props.errors.job_title : ''}
|
||
/>
|
||
<div className="flex items-center gap-[3.6875rem]">
|
||
<InputCompOne
|
||
parentClass="max-w-[23.1875rem] w-full"
|
||
label="Employer’s Name"
|
||
name="employer_name"
|
||
parentInputClass="w-full"
|
||
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||
input
|
||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
|
||
value={props.values.employer_name}
|
||
onChange={props.handleChange}
|
||
error={(props.errors.employer_name && props.touched.employer_name) ? props.errors.employer_name : ''}
|
||
/>
|
||
<InputCompOne
|
||
parentClass="max-w-[23.1875rem] w-full"
|
||
label="Employer’s Official Email"
|
||
name="employer_email"
|
||
parentInputClass="w-full"
|
||
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||
input
|
||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
|
||
value={props.values.employer_email}
|
||
onChange={props.handleChange}
|
||
error={(props.errors.employer_email && props.touched.employer_email) ? props.errors.employer_email : ''}
|
||
/>
|
||
</div>
|
||
<div className="flex items-center gap-[9rem]">
|
||
<InputCompOne
|
||
parentClass="max-w-[17.9375rem] w-full"
|
||
label="Resumption Date"
|
||
name="date_of_resumption"
|
||
parentInputClass="w-full"
|
||
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||
input
|
||
inputType='date'
|
||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
|
||
value={props.values.date_of_resumption}
|
||
onChange={props.handleChange}
|
||
error={(props.errors.date_of_resumption && props.touched.date_of_resumption) ? props.errors.date_of_resumption : ''}
|
||
/>
|
||
<InputCompOne
|
||
parentClass="max-w-[17.9375rem] w-full"
|
||
label="Employee ID."
|
||
name="employee_id"
|
||
labelSpan="Upload your work ID"
|
||
labelSpanClass="text-[11px] text-[#7a7373]"
|
||
parentInputClass="w-full"
|
||
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||
input
|
||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
|
||
value={props.values.employee_id}
|
||
onChange={props.handleChange}
|
||
error={(props.errors.employee_id && props.touched.employee_id) ? props.errors.employee_id : ''}
|
||
/>
|
||
</div>
|
||
<div className="flex items-center gap-[3.6875rem]">
|
||
<InputCompOne
|
||
parentClass="max-w-[23.1875rem] w-full"
|
||
label="Salary ( Gross annual income )"
|
||
name="annual_income"
|
||
parentInputClass="w-full"
|
||
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||
input
|
||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
|
||
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-[23.1875rem] w-full"
|
||
label="Salary ( Net monthly Income )"
|
||
name="monthly_salary"
|
||
parentInputClass="w-full"
|
||
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||
input
|
||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
|
||
value={props.values.monthly_salary}
|
||
onChange={props.handleChange}
|
||
error={(props.errors.monthly_salary && props.touched.monthly_salary) ? props.errors.monthly_salary : ''}
|
||
/>
|
||
</div>
|
||
<InputCompOne
|
||
parentClass="max-w-[20.3125rem]"
|
||
label="Salary Payment Date"
|
||
name="salary_payment_date"
|
||
parentInputClass="w-full"
|
||
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||
input
|
||
inputType='date'
|
||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
|
||
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 : ''}
|
||
/>
|
||
</div>
|
||
</>
|
||
|
||
<>
|
||
<div className="w-full rounded py-3 bg-[#5C2684] px-5">
|
||
<p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
|
||
REFERENCE DETAILS ( Must be 18 years and above )
|
||
</p>
|
||
</div>
|
||
<div className="">
|
||
<div className="flex flex-col gap-[3.4375rem]">
|
||
<div className="flex flex-col gap-4">
|
||
<div className="flex items-center gap-[6.5625rem]">
|
||
<InputCompOne
|
||
parentClass="max-w-[20.3125rem] w-full"
|
||
label="Name"
|
||
name="ref_name"
|
||
labelSpan="1st reference"
|
||
labelSpanClass="text-[12px] text-[#5C2684] ml-1"
|
||
parentInputClass="w-full"
|
||
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||
input
|
||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
|
||
value={props.values.ref_name}
|
||
onChange={props.handleChange}
|
||
error={(props.errors.ref_name && props.touched.ref_name) ? props.errors.ref_name : ''}
|
||
/>
|
||
<InputCompOne
|
||
parentClass="max-w-[20.3125rem] w-full"
|
||
label="Relationship with He/She"
|
||
name="ref_relationship"
|
||
parentInputClass="w-full"
|
||
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||
input
|
||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
|
||
value={props.values.ref_relationship}
|
||
onChange={props.handleChange}
|
||
error={(props.errors.ref_relationship && props.touched.ref_relationship) ? props.errors.ref_relationship : ''}
|
||
/>
|
||
</div>
|
||
<div className="flex items-center gap-[6.5625rem]">
|
||
<InputCompOne
|
||
parentClass="max-w-[20.3125rem] w-full"
|
||
label="Phone Number"
|
||
name="ref_number"
|
||
parentInputClass="w-full"
|
||
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||
input
|
||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
|
||
value={props.values.ref_number}
|
||
onChange={props.handleChange}
|
||
error={(props.errors.ref_number && props.touched.ref_number) ? props.errors.ref_number : ''}
|
||
/>
|
||
<InputCompOne
|
||
parentClass="max-w-[20.3125rem] w-full"
|
||
label="Email Address"
|
||
name="ref_email"
|
||
parentInputClass="w-full"
|
||
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||
input
|
||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
|
||
value={props.values.ref_email}
|
||
onChange={props.handleChange}
|
||
error={(props.errors.ref_email && props.touched.ref_email) ? props.errors.ref_email : ''}
|
||
/>
|
||
</div>
|
||
<InputCompOne
|
||
parentClass="max-w-[20.3125rem] w-full"
|
||
label="BVN"
|
||
name="ref_bvn"
|
||
parentInputClass="w-full"
|
||
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||
input
|
||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
|
||
value={props.values.ref_bvn}
|
||
onChange={props.handleChange}
|
||
error={(props.errors.ref_bvn && props.touched.ref_bvn) ? props.errors.ref_bvn : ''}
|
||
/>
|
||
</div>
|
||
<div className="flex flex-col gap-4">
|
||
<div className="flex items-center gap-[6.5625rem]">
|
||
<InputCompOne
|
||
parentClass="max-w-[20.3125rem] w-full"
|
||
label="Name"
|
||
name="ref_two_name"
|
||
labelSpan="2nd reference"
|
||
labelSpanClass="text-[12px] text-[#5C2684] ml-[4px]"
|
||
parentInputClass="w-full"
|
||
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||
input
|
||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
|
||
value={props.values.ref_two_name}
|
||
onChange={props.handleChange}
|
||
error={(props.errors.ref_two_name && props.touched.ref_two_name) ? props.errors.ref_two_name : ''}
|
||
/>
|
||
<InputCompOne
|
||
parentClass="max-w-[20.3125rem] w-full"
|
||
label="Relationship with He/She"
|
||
name="ref_two_relationship"
|
||
parentInputClass="w-full"
|
||
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||
input
|
||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
|
||
value={props.values.ref_two_relationship}
|
||
onChange={props.handleChange}
|
||
error={(props.errors.ref_two_relationship && props.touched.ref_two_relationship) ? props.errors.ref_two_relationship : ''}
|
||
/>
|
||
</div>
|
||
<div className="flex items-center gap-[6.5625rem]">
|
||
<InputCompOne
|
||
parentClass="max-w-[20.3125rem] w-full"
|
||
label="Phone Number"
|
||
name="ref_two_number"
|
||
parentInputClass="w-full"
|
||
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||
input
|
||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
|
||
value={props.values.ref_two_number}
|
||
onChange={props.handleChange}
|
||
error={(props.errors.ref_two_number && props.touched.ref_two_number) ? props.errors.ref_two_number : ''}
|
||
/>
|
||
<InputCompOne
|
||
parentClass="max-w-[20.3125rem] w-full"
|
||
label="Email Address"
|
||
name="ref_two_email"
|
||
parentInputClass="w-full"
|
||
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||
input
|
||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
|
||
value={props.values.ref_two_email}
|
||
onChange={props.handleChange}
|
||
error={(props.errors.ref_two_email && props.touched.ref_two_email) ? props.errors.ref_two_email : ''}
|
||
/>
|
||
</div>
|
||
<InputCompOne
|
||
parentClass="max-w-[20.3125rem] w-full"
|
||
label="BVN"
|
||
name="ref_two_bvn"
|
||
parentInputClass="w-full"
|
||
labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
|
||
input
|
||
inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
|
||
value={props.values.ref_two_bvn}
|
||
onChange={props.handleChange}
|
||
error={(props.errors.ref_two_bvn && props.touched.ref_two_bvn) ? props.errors.ref_two_bvn : ''}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
|
||
<Button
|
||
className="my-8 max-w-[20.3125rem] btn-R bg-[#5A2C82]"
|
||
text="Continue"
|
||
type="submit"
|
||
/>
|
||
</div>
|
||
</Form>
|
||
)}
|
||
</Formik>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default YourAreAlmostThere;
|