victorAnumudu
119 lines
3.8 KiB
TypeScript
119 lines
3.8 KiB
TypeScript
import { Button, InputCompOne, Stepper } from "..";
|
|
import {Formik, Form} from 'formik'
|
|
import * as Yup from "yup";
|
|
|
|
type Props = {
|
|
handleNextStep:()=>any
|
|
}
|
|
|
|
const initialValues = {
|
|
amount: "",
|
|
duration: "",
|
|
id: "",
|
|
};
|
|
|
|
// To get the validation schema
|
|
const validationSchema = Yup.object().shape({
|
|
duration: Yup.string()
|
|
.required("Required"),
|
|
amount: Yup.string()
|
|
.required("Required")
|
|
.test("no-e", "Invalid", (value:any) => {
|
|
if (value && /^[0-9]*$/.test(value) == false) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}),
|
|
id: Yup.string()
|
|
.required("Required")
|
|
});
|
|
|
|
export default function DashboardFormInit({handleNextStep}:Props) {
|
|
|
|
//FUNCTION TO HANDLE SUBMIT
|
|
const handleSubmit = (values:any) => {
|
|
console.log(values)
|
|
handleNextStep()
|
|
};
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<div className="w-full flex justify-center">
|
|
<Stepper step={0} />
|
|
</div>
|
|
<Formik
|
|
initialValues={initialValues}
|
|
validationSchema={validationSchema}
|
|
onSubmit={handleSubmit}
|
|
>
|
|
{(props)=>(
|
|
<Form>
|
|
<div className="mt-[3.25rem] flex flex-col gap-9">
|
|
<InputCompOne
|
|
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
|
|
name="amount"
|
|
label="How Much Do You Want To Apply For?"
|
|
labelClass="font-bold text-[1.125rem]"
|
|
input
|
|
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem] text-right"
|
|
placeholder="350,000"
|
|
value={props.values.amount}
|
|
onChange={props.handleChange}
|
|
error={(props.errors.amount && props.touched.amount) ? props.errors.amount : ''}
|
|
/>
|
|
<InputCompOne
|
|
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
|
|
name="duration"
|
|
label="For How Many Months?"
|
|
labelClass="font-bold text-[1.125rem]"
|
|
select={true}
|
|
selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
|
|
selectOptions={duration}
|
|
selectValue={props.values.duration}
|
|
onChange={props.handleChange}
|
|
error={(props.errors.duration && props.touched.duration) ? props.errors.duration : ''}
|
|
/>
|
|
<InputCompOne
|
|
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
|
|
name="id"
|
|
label="Direct sales agent ID ( Optional )"
|
|
labelClass="font-bold text-[1.125rem]"
|
|
floatLabel='Enter agent ID'
|
|
input
|
|
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
|
|
placeholder="Agent ID"
|
|
value={props.values.id}
|
|
onChange={props.handleChange}
|
|
error={(props.errors.id && props.touched.id) ? props.errors.id : ''}
|
|
/>
|
|
<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 duration: SelectOption = {
|
|
loading: false,
|
|
data: [
|
|
{ value: "", label: "Please Select" },
|
|
{ value: "6", label: "6 Months" },
|
|
{ value: "12", label: "12 Months" },
|
|
{ value: "18", label: "18 Months" },
|
|
{ value: "24", label: "24 Months" },
|
|
]
|
|
}
|