victorAnumudu
90 lines
2.9 KiB
TypeScript
90 lines
2.9 KiB
TypeScript
import React from "react";
|
||
import * as Yup from "yup";
|
||
import { Form, Formik } from "formik";
|
||
import { InputCompOne } from "../shared";
|
||
|
||
// To get the validation schema
|
||
const validationSchema = Yup.object().shape({
|
||
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")
|
||
});
|
||
|
||
// initial values for formik
|
||
let initialValues = {
|
||
bvn: ''
|
||
};
|
||
|
||
type Props = {
|
||
handleNextStep:()=>any
|
||
}
|
||
|
||
const BVN = ({handleNextStep}:Props) => {
|
||
|
||
const firstInputRef = React.useRef<HTMLInputElement>(null);
|
||
|
||
const handleSubmit = (values:any) => {
|
||
console.log('values', values)
|
||
handleNextStep()
|
||
};
|
||
|
||
return (
|
||
<Formik
|
||
initialValues={initialValues}
|
||
validationSchema={validationSchema}
|
||
onSubmit={handleSubmit}
|
||
>
|
||
{(props:any) => (
|
||
<Form className="">
|
||
<div className="w-full">
|
||
<div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
|
||
<div className="my-[4rem] flex items-center justify-center w-full">
|
||
<h1 className="font-bold text-[2.375rem] text-[#5C2684] my-[.5rem] text-center">
|
||
Let’s Get You Started
|
||
</h1>
|
||
</div>
|
||
<div className="mx-auto flex flex-col gap-8 max-w-[31.625rem]">
|
||
<InputCompOne
|
||
parentClass="flex flex-col gap-2"
|
||
label="Enter Your BVN "
|
||
name="bvn"
|
||
parentInputClass="w-full"
|
||
labelSpan="( To get your BVN, dial *565*0# )"
|
||
labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
|
||
placeholder="Enter your BVN"
|
||
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
|
||
input
|
||
inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
|
||
value={props.values.bvn}
|
||
onChange={props.handleChange}
|
||
ref={firstInputRef}
|
||
maxLength={11}
|
||
error={(props.errors.bvn && props.touched.bvn) && props.errors.bvn}
|
||
/>
|
||
<button
|
||
type='submit'
|
||
className="w-full h-[3.625rem] rounded bg-[#FBB700] rounded-2 px-4 text-[18px] text-[#282828] font-semibold disabled:text-[#282828] disabled:text-opacity-50"
|
||
>
|
||
Enter
|
||
</button>
|
||
<p className="text-[#5C2684] mt-[1.5625rem] max-w-[31.625rem]">
|
||
***Every personal information attached to your BVN is safe and secured. It is only inportant for us to verify your information and also give you access to your application profile/account
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Form>
|
||
)}
|
||
</Formik>
|
||
);
|
||
};
|
||
|
||
export default BVN;
|