From 266627d941d3db824a69d152dc63ec3e57b48797 Mon Sep 17 00:00:00 2001 From: Ebube Date: Thu, 21 Mar 2024 10:05:44 +0100 Subject: [PATCH 1/2] Corrected Form Layout --- src/App.css | 7 + src/components/GetStarted/BasicInfo.tsx | 260 +++++------------- src/components/GetStarted/GetStarted.tsx | 43 ++- src/components/GetStarted/InputSection.tsx | 133 +++++++++ src/components/GetStarted/OtpSection.tsx | 111 ++++++++ src/components/GetStarted/SpouseDetails.tsx | 49 ++++ src/components/Header/Header.tsx | 35 ++- .../InternetBanking/InternetBanking.tsx | 9 + src/components/InternetBanking/index.ts | 3 + src/layouts/GetStartedLayout.tsx | 22 ++ src/layouts/index.ts | 3 +- src/pages/GetStartedPage.tsx | 13 +- src/pages/InternetBankingPage.tsx | 10 + 13 files changed, 474 insertions(+), 224 deletions(-) create mode 100644 src/components/GetStarted/InputSection.tsx create mode 100644 src/components/GetStarted/OtpSection.tsx create mode 100644 src/components/GetStarted/SpouseDetails.tsx create mode 100644 src/components/InternetBanking/InternetBanking.tsx create mode 100644 src/components/InternetBanking/index.ts create mode 100644 src/layouts/GetStartedLayout.tsx create mode 100644 src/pages/InternetBankingPage.tsx diff --git a/src/App.css b/src/App.css index 7fd0764..904b3aa 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; + +} + .sidebar { position: fixed; top: 0; diff --git a/src/components/GetStarted/BasicInfo.tsx b/src/components/GetStarted/BasicInfo.tsx index e2ced5f..dee726c 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; } -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>; + handleNextStep: React.MouseEventHandler; +} + +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 handleInput = (e: React.FormEvent) => { - const { name, value } = e.currentTarget; + const handleInput = (e: React.ChangeEvent) => { + 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 ( <> -
-
- - - - -
-
- {!hideOTPComponent ? ( -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- -
-
- ) : null} + {/* Header */} +

+ Let’s Get You Started +

+
+ + {!hideOTPComponent && ( + <> + + + 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 = ({ 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 ( - -
- + +
+ ); };