Fixed Layout and switch functionality

src/components/GetStarted/BasicInfo.tsx

@@ -4,10 +4,10 @@ import OTPSection from "./OtpSection";
 import SpouseDetails from "./SpouseDetails";
 import { Button } from "..";
 
-interface Option {
-  value: string;
-  label: string;
-}
+// interface Option {
+//   value: string;
+//   label: string;
+// }
 
 interface BasicInfoProps {
   inputValues: {
@@ -24,7 +24,7 @@ interface BasicInfoProps {
     spouseBVN: string;
   };
   setInputValues: React.Dispatch<React.SetStateAction<any>>;
-  handleNextStep: React.MouseEventHandler<HTMLButtonElement>;
+  handleNextStep: any;
 }
 
 const BasicInfo: React.FC<BasicInfoProps> = ({
@@ -35,13 +35,13 @@ const BasicInfo: React.FC<BasicInfoProps> = ({
   const [hideOTPComponent, setHideOTPComponent] = useState<boolean>(true);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setInputValues((prev) => ({ ...prev, [name]: value }));
+  const handleChange = (e: React.FormEvent<HTMLInputElement>) => {
+    const { name, value } = e.target as HTMLInputElement;
+    setInputValues((prev: typeof inputValues) => ({ ...prev, [name]: value }));
   };
 
-  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
+  const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+    const { name, value } = e.target as HTMLInputElement;
 
     if (name === "bvn") {
       const isNumeric = /^[0-9]+$/.test(value);
@@ -86,7 +86,7 @@ const BasicInfo: React.FC<BasicInfoProps> = ({
               inputRef={inputRef}
             />
             <Button
-              className="mt-8 btn-R"
+              className="mt-8 btn-R bg-[#5A2C82]"
               text="Enter"
               type="button"
               onClick={handleNextStep}

src/components/GetStarted/GetStarted.tsx

@@ -4,13 +4,13 @@ import BasicInfo from "./BasicInfo";
 const GetStarted = () => {
   const [step, setStep] = React.useState(1);
 
-  const handleNextStep = () => {
+  const handleNextStep: any = () => {
     setStep(step + 1);
   };
 
-  const handlePreviousStep = () => {
-    setStep(step - 1);
-  };
+  // const handlePreviousStep: React.MouseEvent<HTMLButtonElement> = () => {
+  //   setStep(step - 1);
+  // };
 
   const [inputValues, setInputValues] = React.useState({
     title: "",

src/components/GetStarted/InputSection.tsx

@@ -13,7 +13,7 @@ interface InputSectionProps {
     agentId: string;
     bvn: string;
   };
-  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleChange: (e: React.FormEvent<HTMLInputElement>) => void;
   handleInput: (e: React.FormEvent<HTMLInputElement>) => void;
   inputRef: React.RefObject<HTMLInputElement>;
 }

src/components/GetStarted/OtpSection.tsx

@@ -10,7 +10,7 @@ interface OTPSectionProps {
     dob: string;
     secondName: string;
   };
-  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleChange: (e: React.FormEvent<HTMLInputElement>) => void;
   handleInput: (e: React.FormEvent<HTMLInputElement>) => void;
   inputRef: React.RefObject<HTMLInputElement>;
 }

src/components/GetStarted/SpouseDetails.tsx

@@ -5,7 +5,7 @@ interface SpouseDetailsProps {
   inputValues: {
     spouseBVN: string;
   };
-  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleChange: (e: React.FormEvent<HTMLInputElement>) => void;
   handleInput: (e: React.FormEvent<HTMLInputElement>) => void;
   inputRef: React.RefObject<HTMLInputElement>;
 }
@@ -28,14 +28,14 @@ const SpouseDetails: React.FC<SpouseDetailsProps> = ({
           <InputCompOne
             parentClass="max-w-[20.3125rem]"
             label="BVN"
-            name="firstName"
+            name="spouseBVN"
             parentInputClass="w-full"
             labelSpan="( To get your BVN, dial *565*0# )"
             labelSpanClass="text-[11px] text-[#7a7373]"
             labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
             input
             inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
-            value={inputValues.firstName}
+            value={inputValues.spouseBVN}
             onChange={handleChange}
             onInput={handleInput}
             ref={inputRef}