diff --git a/src/App.css b/src/App.css index 7fd0764..90517c2 100644 --- a/src/App.css +++ b/src/App.css @@ -11,6 +11,13 @@ background: #D10056; } +.btn-R { + padding-inline: 3rem !important; + font-weight: bold !important; + font-size: 16px !important; + background-color: #5A2C82; +} + .sidebar { position: fixed; top: 0; diff --git a/src/components/GetStarted/BasicInfo.tsx b/src/components/GetStarted/BasicInfo.tsx index e2ced5f..5151404 100644 --- a/src/components/GetStarted/BasicInfo.tsx +++ b/src/components/GetStarted/BasicInfo.tsx @@ -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; +// 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>; + handleNextStep: any; } -const BasicInfo: React.FC = () => { +const BasicInfo: React.FC = ({ + inputValues, + setInputValues, + handleNextStep, +}) => { const [hideOTPComponent, setHideOTPComponent] = useState(true); - const [inputValues, setInputValues] = useState({ - title: "", - marital: "", - agentId: "", - bvn: "", - firstName: "", - phone: "", - email: "", - surname: "", - dob: "", - secondName: "", - }); const inputRef = useRef(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) => { - const { name, value } = e.target; - - setInputValues((prev) => ({ ...prev, [name]: value })); + const handleChange = (e: React.FormEvent) => { + const { name, value } = e.target as HTMLInputElement; + setInputValues((prev: typeof inputValues) => ({ ...prev, [name]: value })); }; const handleInput = (e: React.FormEvent) => { - const { name, value } = e.currentTarget; + const { name, value } = e.target as HTMLInputElement; 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 ( <> -
-
- - - - -
-
- {!hideOTPComponent ? ( -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- -
-
- ) : null} + {/* Header */} +

+ Let’s Get You Started +

+
+ + {!hideOTPComponent && ( + <> + + + diff --git a/src/layouts/GetStartedLayout.tsx b/src/layouts/GetStartedLayout.tsx new file mode 100644 index 0000000..433da80 --- /dev/null +++ b/src/layouts/GetStartedLayout.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import { Footer, Header } from "../components"; + +interface GetStartedLayoutProps { + children: React.ReactNode; +} + +const GetStartedLayout: React.FC = ({ children }) => { + return ( +
+
+
+ {children} +
+
+
+
+
+ ); +}; + +export default GetStartedLayout; diff --git a/src/layouts/index.ts b/src/layouts/index.ts index 690926b..e24576d 100644 --- a/src/layouts/index.ts +++ b/src/layouts/index.ts @@ -1,3 +1,4 @@ import HomeLayout from "./HomeLayout"; import LetsGetStartedLayout from "./LetsGetStartedLayout"; -export { HomeLayout, LetsGetStartedLayout }; +import GetStartedLayout from "./GetStartedLayout"; +export { HomeLayout, LetsGetStartedLayout, GetStartedLayout }; diff --git a/src/pages/GetStartedPage.tsx b/src/pages/GetStartedPage.tsx index 71df150..a04fb6c 100644 --- a/src/pages/GetStartedPage.tsx +++ b/src/pages/GetStartedPage.tsx @@ -1,17 +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 ( -
-
-
-
-
-
-
-
-
+ +
+ ); }; diff --git a/src/pages/InternetBankingPage.tsx b/src/pages/InternetBankingPage.tsx new file mode 100644 index 0000000..8d0fb70 --- /dev/null +++ b/src/pages/InternetBankingPage.tsx @@ -0,0 +1,10 @@ +import React from 'react' +import { HomeLayout } from '../layouts' + +const InternetBankingPage: React.FC = () => { + return ( + InternetBankingPage + ) +} + +export default InternetBankingPage \ No newline at end of file