Corrected Form Layout
This commit is contained in:
Ebube
@@ -1,219 +1,99 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import InputCompOne from "../shared/InputCompOne";
|
||||
import InputSection from "./InputSection";
|
||||
import OTPSection from "./OtpSection";
|
||||
import SpouseDetails from "./SpouseDetails";
|
||||
import { Button } from "..";
|
||||
|
||||
interface Option {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const BasicInfo: React.FC = () => {
|
||||
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: React.MouseEventHandler<HTMLButtonElement>;
|
||||
}
|
||||
|
||||
const BasicInfo: React.FC<BasicInfoProps> = ({
|
||||
inputValues,
|
||||
setInputValues,
|
||||
handleNextStep,
|
||||
}) => {
|
||||
const [hideOTPComponent, setHideOTPComponent] = useState<boolean>(true);
|
||||
const [inputValues, setInputValues] = useState({
|
||||
title: "",
|
||||
marital: "",
|
||||
agentId: "",
|
||||
bvn: "",
|
||||
firstName: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
surname: "",
|
||||
dob: "",
|
||||
secondName: "",
|
||||
});
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Array for marital status options
|
||||
const maritalStatusOptions: Option[] = [
|
||||
{ value: "", label: "Select" },
|
||||
{ value: "single", label: "Single" },
|
||||
{ value: "married", label: "Married" },
|
||||
{ value: "divorced", label: "Divorced" },
|
||||
{ value: "widowed", label: "Widowed" },
|
||||
];
|
||||
|
||||
// Array for title options
|
||||
const titleOptions: Option[] = [
|
||||
{ value: "", label: "Select" },
|
||||
{ value: "ms", label: "Ms" },
|
||||
{ value: "mr", label: "Mr" },
|
||||
{ value: "miss", label: "Miss" },
|
||||
{ value: "mrs", label: "Mrs" },
|
||||
];
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
|
||||
setInputValues((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.currentTarget;
|
||||
const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
|
||||
if (name === "bvn") {
|
||||
const regex = /^[0-9]+$/;
|
||||
const isNumeric = /^[0-9]+$/.test(value);
|
||||
|
||||
if (regex.test(value)) {
|
||||
if (value?.length === 10) {
|
||||
if (isNumeric) {
|
||||
if (value.length === 10) {
|
||||
setHideOTPComponent(false);
|
||||
// secondInputRef.current?.focus();
|
||||
} else setHideOTPComponent(true);
|
||||
} else {
|
||||
setHideOTPComponent(true);
|
||||
}
|
||||
} else {
|
||||
console.log("object not found");
|
||||
console.log("Invalid BVN");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mt-8 max-w-[31.5rem]">
|
||||
<div className="flex flex-col gap-3">
|
||||
<InputCompOne
|
||||
label="Title"
|
||||
name="title"
|
||||
parentInputClass="max-w-[224px] w-full"
|
||||
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
|
||||
select
|
||||
selectClass="w-full h-[36px] rounded-[6px]"
|
||||
selectOptions={titleOptions}
|
||||
value={inputValues.title}
|
||||
onChange={handleChange}
|
||||
ref={inputRef}
|
||||
/>
|
||||
<InputCompOne
|
||||
label="Marital Status"
|
||||
name="marital"
|
||||
parentInputClass="max-w-[224px] w-full"
|
||||
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
|
||||
select
|
||||
selectClass="w-full h-[36px] rounded-[6px]"
|
||||
selectOptions={maritalStatusOptions}
|
||||
value={inputValues.marital}
|
||||
onChange={handleChange}
|
||||
onInput={handleInput}
|
||||
ref={inputRef}
|
||||
/>
|
||||
<InputCompOne
|
||||
label="Direct Sales Agent ID"
|
||||
name="agentId"
|
||||
parentInputClass="max-w-[224px] w-full"
|
||||
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
|
||||
select
|
||||
selectClass="w-full h-[36px] rounded-[6px]"
|
||||
selectOptions={[{ value: "", label: "Select" }]}
|
||||
value={inputValues.agentId}
|
||||
onChange={handleChange}
|
||||
onInput={handleInput}
|
||||
ref={inputRef}
|
||||
/>
|
||||
<InputCompOne
|
||||
label="BVN"
|
||||
name="bvn"
|
||||
parentInputClass=" w-full"
|
||||
labelSpan="( To get your BVN, dial *565*0# )"
|
||||
labelSpanClass="text-[11px] text-[#7a7373]"
|
||||
placeholder="Enter your BVN"
|
||||
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px] gap-[2px]"
|
||||
input
|
||||
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
|
||||
value={inputValues.bvn}
|
||||
onChange={handleChange}
|
||||
onInput={handleInput}
|
||||
ref={inputRef}
|
||||
maxLength={10}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{!hideOTPComponent ? (
|
||||
<div className="flex flex-col gap-5">
|
||||
<div className="flex justify-between items-center g4">
|
||||
<div className="mt-8 max-w-[31.5rem] w-full">
|
||||
<div className="flex flex-col gap-3">
|
||||
<InputCompOne
|
||||
label="First Name"
|
||||
name="firstName"
|
||||
parentInputClass="w-full"
|
||||
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
|
||||
input
|
||||
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
|
||||
value={inputValues.firstName}
|
||||
onChange={handleChange}
|
||||
onInput={handleInput}
|
||||
ref={inputRef}
|
||||
/>
|
||||
<InputCompOne
|
||||
label="Phone Number"
|
||||
name="phone"
|
||||
parentInputClass="w-full"
|
||||
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
|
||||
input
|
||||
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
|
||||
value={inputValues.phone}
|
||||
onChange={handleChange}
|
||||
onInput={handleInput}
|
||||
ref={inputRef}
|
||||
/>
|
||||
<InputCompOne
|
||||
label="Email Address"
|
||||
name="email"
|
||||
parentInputClass="w-full"
|
||||
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
|
||||
input
|
||||
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
|
||||
value={inputValues.email}
|
||||
onChange={handleChange}
|
||||
onInput={handleInput}
|
||||
ref={inputRef}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8 max-w-[31.5rem] w-full">
|
||||
<div className="flex flex-col gap-3">
|
||||
<InputCompOne
|
||||
label="Surname"
|
||||
name="surname"
|
||||
parentInputClass="w-full"
|
||||
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
|
||||
input
|
||||
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px] px-3"
|
||||
value={inputValues.surname}
|
||||
onChange={handleChange}
|
||||
onInput={handleInput}
|
||||
ref={inputRef}
|
||||
/>
|
||||
<InputCompOne
|
||||
label="Date of Birth"
|
||||
name="dob"
|
||||
parentInputClass="w-full"
|
||||
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
|
||||
input
|
||||
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px] px-3"
|
||||
value={inputValues.dob}
|
||||
onChange={handleChange}
|
||||
onInput={handleInput}
|
||||
ref={inputRef}
|
||||
/>
|
||||
<InputCompOne
|
||||
label="Second Name"
|
||||
name="secondName"
|
||||
parentInputClass="w-full"
|
||||
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
|
||||
input
|
||||
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px] px-3"
|
||||
value={inputValues.secondName}
|
||||
onChange={handleChange}
|
||||
onInput={handleInput}
|
||||
ref={inputRef}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex justify-end">
|
||||
<button className="w-full max-w-[15.25rem] h-[36px] rounded bg-[#FBB700] rounded-2 px-4 text-[18px] text-[#282828] font-semibold disabled:text-[#282828] disabled:text-opacity-50">
|
||||
Enter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{/* Header */}
|
||||
<h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem]">
|
||||
Let’s Get You Started
|
||||
</h1>
|
||||
<form>
|
||||
<InputSection
|
||||
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"
|
||||
text="Enter"
|
||||
type="button"
|
||||
onClick={handleNextStep}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user