Ebube
102 lines
2.5 KiB
TypeScript
102 lines
2.5 KiB
TypeScript
import React, { useRef, useState } from "react";
|
||
import InputDetails from "./IntroDetails";
|
||
import OTPSection from "./OtpSection";
|
||
import SpouseDetails from "./SpouseDetails";
|
||
import { Button } from "..";
|
||
|
||
// interface Option {
|
||
// value: string;
|
||
// label: string;
|
||
// }
|
||
|
||
interface BasicInfoProps {
|
||
inputValues: {
|
||
title: string;
|
||
marital: string;
|
||
agentId: string;
|
||
bvn: string;
|
||
firstName: string;
|
||
phone: string;
|
||
email: string;
|
||
surname: string;
|
||
dob: string;
|
||
secondName: string;
|
||
spouseBVN: string;
|
||
};
|
||
setInputValues: React.Dispatch<React.SetStateAction<any>>;
|
||
handleNextStep: any;
|
||
}
|
||
|
||
const BasicInfo: React.FC<BasicInfoProps> = ({
|
||
inputValues,
|
||
setInputValues,
|
||
handleNextStep,
|
||
}) => {
|
||
const [hideOTPComponent, setHideOTPComponent] = useState<boolean>(true);
|
||
const inputRef = useRef<HTMLInputElement>(null);
|
||
|
||
const handleChange = (e: React.FormEvent<HTMLInputElement>) => {
|
||
const { name, value } = e.target as HTMLInputElement;
|
||
setInputValues((prev: typeof inputValues) => ({ ...prev, [name]: value }));
|
||
};
|
||
|
||
const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
|
||
const { name, value } = e.target as HTMLInputElement;
|
||
|
||
if (name === "bvn") {
|
||
const isNumeric = /^[0-9]+$/.test(value);
|
||
|
||
if (isNumeric) {
|
||
if (value.length === 10) {
|
||
setHideOTPComponent(false);
|
||
} else {
|
||
setHideOTPComponent(true);
|
||
}
|
||
} else {
|
||
console.log("Invalid BVN");
|
||
}
|
||
}
|
||
};
|
||
|
||
return (
|
||
<>
|
||
{/* Header */}
|
||
<h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem]">
|
||
Let’s Get You Started
|
||
</h1>
|
||
<form>
|
||
<InputDetails
|
||
inputValues={inputValues}
|
||
handleChange={handleChange}
|
||
handleInput={handleInput}
|
||
inputRef={inputRef}
|
||
/>
|
||
{!hideOTPComponent && (
|
||
<>
|
||
<OTPSection
|
||
inputValues={inputValues}
|
||
handleChange={handleChange}
|
||
handleInput={handleInput}
|
||
inputRef={inputRef}
|
||
/>
|
||
<SpouseDetails
|
||
inputValues={inputValues}
|
||
handleChange={handleChange}
|
||
handleInput={handleInput}
|
||
inputRef={inputRef}
|
||
/>
|
||
<Button
|
||
className="mt-8 btn-R bg-[#5A2C82]"
|
||
text="Enter"
|
||
type="button"
|
||
onClick={handleNextStep}
|
||
/>
|
||
</>
|
||
)}
|
||
</form>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default BasicInfo;
|