victorAnumudu
261 lines
8.9 KiB
TypeScript
261 lines
8.9 KiB
TypeScript
import React from 'react';
|
||
import * as Yup from 'yup';
|
||
import { Form, Formik } from 'formik';
|
||
import { InputCompOne } from '..';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { RouteHandler } from '../../router/routes';
|
||
|
||
import { useDispatch } from 'react-redux';
|
||
import { updateUserDetails } from '../../store/UserDetails';
|
||
|
||
import { validateBVN, verifyOTP } from '../../core/apiRequest';
|
||
import { RequestStatus } from '../../core/models';
|
||
|
||
// 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'),
|
||
otp: Yup.string()
|
||
// .when('require_otp', {
|
||
// is: true,
|
||
// then: Yup.string().required("OTP is required")
|
||
// })
|
||
// .required("OTP is required")
|
||
.test('no-e', 'Invalid number', (value: any) => {
|
||
if (value && /^[0-9]*$/.test(value) == false) {
|
||
return false;
|
||
}
|
||
return true;
|
||
})
|
||
.min(5, 'must be 5 digits')
|
||
.max(5, 'must be 5 digits'),
|
||
// .test("no-e", "must be 11 characters", (value:any) => {
|
||
// if (value.length < 11) {
|
||
// return false;
|
||
// }
|
||
// return true;
|
||
// })
|
||
});
|
||
|
||
// initial values for formik
|
||
let initialValues = {
|
||
bvn: '',
|
||
otp: '',
|
||
};
|
||
|
||
type ValidBVN = {
|
||
verification_id: string;
|
||
valid: undefined | boolean;
|
||
};
|
||
|
||
const LetsGetStarted: React.FC = () => {
|
||
const dispatch = useDispatch();
|
||
const navigate = useNavigate();
|
||
// const [pinValues, setPinValues] = React.useState({
|
||
// bvn: "",
|
||
// otp: "",
|
||
// });
|
||
// const otpInputRef = React.useRef<HTMLInputElement>(null);
|
||
|
||
const [requestStatusBVN, setRequestStatusBVN] = React.useState<RequestStatus>(
|
||
{ loading: false, status: undefined, message: '' }
|
||
);
|
||
|
||
const [requestStatusOTP, setRequestStatusOTP] = React.useState<RequestStatus>(
|
||
{ loading: false, status: undefined, message: '' }
|
||
);
|
||
|
||
const [bvnIsValid, setBvnIsValid] = React.useState<ValidBVN>({
|
||
verification_id: '',
|
||
valid: undefined,
|
||
});
|
||
|
||
// e: React.FormEvent<HTMLInputElement>
|
||
// let { value } = e.target as HTMLInputElement;
|
||
const bvnValidation = (values: any) => {
|
||
// Function to Validate BVN
|
||
let bvn = values.bvn;
|
||
setRequestStatusBVN({ loading: true, status: false, message: '' });
|
||
validateBVN({ bvn })
|
||
.then((res) => {
|
||
if (!res || !res.data.call_return) {
|
||
setBvnIsValid({ verification_id: '', valid: false });
|
||
setRequestStatusBVN({
|
||
loading: false,
|
||
status: false,
|
||
message: 'unable to verify BVN',
|
||
});
|
||
return setTimeout(() => {
|
||
setRequestStatusBVN({ loading: false, status: false, message: '' });
|
||
}, 4000);
|
||
}
|
||
setBvnIsValid({
|
||
verification_id: res.data.verification_id,
|
||
valid: true,
|
||
});
|
||
setRequestStatusBVN({
|
||
loading: false,
|
||
status: true,
|
||
message: 'verified',
|
||
});
|
||
})
|
||
.catch((err) => {
|
||
setBvnIsValid({ verification_id: '', valid: false });
|
||
console.log(err);
|
||
});
|
||
};
|
||
|
||
const handleSubmit = (values: any) => {
|
||
// Function to VERIFY OTP AND LOGIN USER
|
||
setRequestStatusOTP({ loading: true, status: false, message: '' });
|
||
// console.log('values', values)
|
||
verifyOTP({ ...values, verification_id: bvnIsValid.verification_id })
|
||
.then((res) => {
|
||
if (!res || !res.data.call_return) {
|
||
setRequestStatusOTP({
|
||
loading: false,
|
||
status: false,
|
||
message: 'wrong otp',
|
||
});
|
||
return setTimeout(() => {
|
||
setRequestStatusOTP({ loading: false, status: false, message: '' });
|
||
}, 4000);
|
||
}
|
||
// console.log(res.data)
|
||
localStorage.setItem('token', res.data?.token);
|
||
localStorage.setItem('uid', res?.data?.customer[0]?.uid);
|
||
dispatch(updateUserDetails({ ...res?.data?.customer[0] }));
|
||
navigate(RouteHandler.dashboardHome, { replace: true });
|
||
})
|
||
.catch((err) => {
|
||
setRequestStatusOTP({
|
||
loading: false,
|
||
status: false,
|
||
message: 'something went wrong, try again',
|
||
});
|
||
console.log(err);
|
||
return setTimeout(() => {
|
||
setRequestStatusOTP({ loading: false, status: false, message: '' });
|
||
}, 4000);
|
||
});
|
||
};
|
||
|
||
return (
|
||
<Formik
|
||
initialValues={initialValues}
|
||
validationSchema={validationSchema}
|
||
onSubmit={bvnIsValid.valid ? handleSubmit : bvnValidation}
|
||
>
|
||
{(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] ">
|
||
<div className="w-full">
|
||
<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}
|
||
error={
|
||
props.errors.bvn && props.touched.bvn && props.errors.bvn
|
||
}
|
||
maxLength={11}
|
||
/>
|
||
<p
|
||
className={`p-2 ${
|
||
!requestStatusBVN.status
|
||
? 'text-red-500'
|
||
: 'text-emerald-500'
|
||
}`}
|
||
>
|
||
{requestStatusBVN.loading
|
||
? 'verifying...'
|
||
: requestStatusBVN.message}
|
||
</p>
|
||
</div>
|
||
{bvnIsValid.valid && (
|
||
<InputCompOne
|
||
parentClass="flex flex-col gap-2"
|
||
label="Enter OTP "
|
||
name="otp"
|
||
parentInputClass="w-full"
|
||
labelSpan="( Please check your BVN phone number for verification pin )"
|
||
labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
|
||
placeholder="Enter your OTP"
|
||
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.otp}
|
||
onChange={props.handleChange}
|
||
error={
|
||
props.errors.otp && props.touched.otp && props.errors.otp
|
||
}
|
||
maxLength={5}
|
||
/>
|
||
)}
|
||
<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"
|
||
disabled={
|
||
requestStatusBVN.loading ||
|
||
(!props.values.otp && bvnIsValid.valid)
|
||
}
|
||
>
|
||
Enter
|
||
</button>
|
||
|
||
<p
|
||
className={`p-2 ${
|
||
!requestStatusOTP.status
|
||
? 'text-red-500'
|
||
: 'text-emerald-500'
|
||
}`}
|
||
>
|
||
{requestStatusOTP.message}
|
||
</p>
|
||
|
||
{bvnIsValid.valid || bvnIsValid.valid == undefined ? (
|
||
<p className="text-[#5C2684] mt-[1.5625rem] w-fit">
|
||
***Every personal information attached to your BVN is safe
|
||
and secure. It is only important for us to verify your
|
||
information and also give you access to your application
|
||
profile/account.
|
||
</p>
|
||
) : (
|
||
<p className="text-[#5C2684] mt-[1.5625rem] w-fit">
|
||
***Did not receive OTP? Click to resend
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Form>
|
||
)}
|
||
</Formik>
|
||
);
|
||
};
|
||
|
||
export default LetsGetStarted;
|