From dd6d92654c7967ef46fba53013441f54cd6fa6e9 Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Thu, 21 Mar 2024 11:29:38 +0100
Subject: [PATCH] Fixed Layout and switch functionality

---
 src/App.css                                   |  2 +-
 src/components/GetStarted/BasicInfo.tsx       | 22 +++++++++----------
 src/components/GetStarted/GetStarted.tsx      |  8 +++----
 src/components/GetStarted/InputSection.tsx    |  2 +-
 src/components/GetStarted/OtpSection.tsx      |  2 +-
 src/components/GetStarted/SpouseDetails.tsx   |  6 ++---
 .../InternetBanking/InternetBanking.tsx       |  2 +-
 src/components/shared/Button.tsx              | 12 ++++++++--
 src/layouts/GetStartedLayout.tsx              |  2 +-
 src/pages/GetStartedPage.tsx                  |  8 +++----
 10 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/src/App.css b/src/App.css
index 904b3aa..90517c2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -15,7 +15,7 @@
   padding-inline: 3rem !important;
   font-weight: bold !important;
   font-size: 16px !important;
-
+  background-color: #5A2C82;
 }
 
 .sidebar {
diff --git a/src/components/GetStarted/BasicInfo.tsx b/src/components/GetStarted/BasicInfo.tsx
index dee726c..5151404 100644
--- a/src/components/GetStarted/BasicInfo.tsx
+++ b/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}
diff --git a/src/components/GetStarted/GetStarted.tsx b/src/components/GetStarted/GetStarted.tsx
index 60733a3..3aaf3b7 100644
--- a/src/components/GetStarted/GetStarted.tsx
+++ b/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: "",
diff --git a/src/components/GetStarted/InputSection.tsx b/src/components/GetStarted/InputSection.tsx
index 90dc487..a09f6a0 100644
--- a/src/components/GetStarted/InputSection.tsx
+++ b/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>;
 }
diff --git a/src/components/GetStarted/OtpSection.tsx b/src/components/GetStarted/OtpSection.tsx
index 81e8a69..24a1624 100644
--- a/src/components/GetStarted/OtpSection.tsx
+++ b/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>;
 }
diff --git a/src/components/GetStarted/SpouseDetails.tsx b/src/components/GetStarted/SpouseDetails.tsx
index d1f8d96..2470d88 100644
--- a/src/components/GetStarted/SpouseDetails.tsx
+++ b/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}
diff --git a/src/components/InternetBanking/InternetBanking.tsx b/src/components/InternetBanking/InternetBanking.tsx
index 770daba..80af7ad 100644
--- a/src/components/InternetBanking/InternetBanking.tsx
+++ b/src/components/InternetBanking/InternetBanking.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const InternetBanking = () => {
+const InternetBanking: React.FC = () => {
   return (
     <div>InternetBanking</div>
   )
diff --git a/src/components/shared/Button.tsx b/src/components/shared/Button.tsx
index 3aca917..245c3ac 100644
--- a/src/components/shared/Button.tsx
+++ b/src/components/shared/Button.tsx
@@ -3,13 +3,21 @@ import React from "react";
 interface ButtonProps {
   text: string;
   className?: string;
-  onClick?: () => void;
+  type?: "button" | "submit" | "reset";
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
-const Button: React.FC<ButtonProps> = ({ text, className }) => {
+const Button: React.FC<ButtonProps> = ({
+  text,
+  className,
+  onClick,
+  type = "button",
+}) => {
   return (
     <button
       className={`btn-primary uppercase text-[11px] lg:text-[13px] p-[6px] lg:px-[10px] ${className}`}
+      onClick={onClick}
+      type={type}
     >
       {text}
     </button>
diff --git a/src/layouts/GetStartedLayout.tsx b/src/layouts/GetStartedLayout.tsx
index 88be2db..433da80 100644
--- a/src/layouts/GetStartedLayout.tsx
+++ b/src/layouts/GetStartedLayout.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Footer, Header } from "../components";
 
 interface GetStartedLayoutProps {
-  children: ReactNode;
+  children: React.ReactNode;
 }
 
 const GetStartedLayout: React.FC<GetStartedLayoutProps> = ({ children }) => {
diff --git a/src/pages/GetStartedPage.tsx b/src/pages/GetStartedPage.tsx
index 31e6dff..a04fb6c 100644
--- a/src/pages/GetStartedPage.tsx
+++ b/src/pages/GetStartedPage.tsx
@@ -1,12 +1,12 @@
 import React from "react";
-import { GetStarted as Main, Header, Footer } from "../components";
+import { GetStarted as Main } from "../components";
 import { GetStartedLayout } from "../layouts";
 
 const GetStartedPage: React.FC = () => {
   return (
-   <GetStartedLayout>
-    <Main />
-   </GetStartedLayout>
+    <GetStartedLayout>
+      <Main />
+    </GetStartedLayout>
   );
 };
 
-- 
2.34.1