get started first step added

src/components/GetStarted/BVN.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import * as Yup from "yup";
+import { Form, Formik } from "formik";
+import { InputCompOne } from "../shared";
+
+// To get the validation schema
+const validationSchema = Yup.object().shape({
+  bvn: Yup.string()
+  .required("BVN is required")
+  .test("no-e", "Invalid number", (value:any) => {
+    if (value && /^[0-9]*$/.test(value) == false) {
+      return false;
+    }
+    return true;
+  })
+  .min(11, "must be 11 digits")
+  .max(11, "must be 11 digits")
+});
+
+// initial values for formik
+let initialValues = {
+  bvn: ''
+};
+
+type Props = {
+    handleNextStep:()=>any
+}
+
+const BVN = ({handleNextStep}:Props) => {
+
+  const firstInputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleSubmit = (values:any) => {
+    console.log('values', values)
+  };
+
+  return (
+    <Formik
+    initialValues={initialValues}
+    validationSchema={validationSchema}
+    onSubmit={handleSubmit}
+    >
+    {(props:any) => (
+      <Form className="">
+        <div className="w-full">
+          <div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
+            <div className="my-[4rem] flex items-center justify-center w-full">
+              <h1 className="font-bold text-[2.375rem] text-[#5C2684] my-[.5rem] text-center">
+                Let’s Get You Started
+              </h1>
+            </div>
+            <div className="mx-auto flex flex-col gap-8 max-w-[31.625rem]">
+              <InputCompOne
+                parentClass="flex flex-col gap-2"
+                label="Enter Your BVN "
+                name="bvn"
+                parentInputClass="w-full"
+                labelSpan="( To get your BVN, dial *565*0# )"
+                labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
+                placeholder="Enter your BVN"
+                labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
+                input
+                inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
+                value={props.values.bvn}
+                onChange={props.handleChange}
+                ref={firstInputRef}
+                maxLength={11}
+                error={(props.errors.bvn && props.touched.bvn) && props.errors.bvn}
+              />
+              <button
+                type='submit'
+                className="w-full h-[3.625rem] rounded bg-[#FBB700] rounded-2 px-4 text-[18px] text-[#282828] font-semibold disabled:text-[#282828] disabled:text-opacity-50"
+                onClick={handleNextStep}
+              >
+                Enter
+              </button>
+              <p className="text-[#5C2684] mt-[1.5625rem] max-w-[31.625rem]">
+                ***Every personal information attached to your BVN is safe and secured. It is only inportant for us to verify your information and also give you access to your application profile/account
+              </p>
+            </div>
+          </div>
+        </div>
+      </Form>
+    )}
+    </Formik>
+  );
+};
+
+export default BVN;

src/components/GetStarted/DebitAccount.tsx

@@ -81,7 +81,7 @@ const DebitAccount: React.FC = () => {
           className="my-8 max-w-[33.875rem] btn-R bg-[#5A2C82] w-full h-11"
           text="Apply"
           type="button"
-          onClick={()=>navigate(RouteHandler.dashboardHome, {replace:true})}
+          onClick={()=>navigate(RouteHandler.letsGetStarted, {replace:true})}
         />
       </div>
     </>

src/components/GetStarted/GetStarted.tsx

@@ -4,14 +4,14 @@ import YourAreAlmostThere from "./YourAreAlmostThere";
 import LoanAmountComp from "./LoanAmountComp";
 import ApplicantsAttestation from "./ApplicantsAttestation";
 
-const GetStarted = () => {
+const GetStarted = ({handleNextStep, step}:{handleNextStep:any, step:string|number|any}) => {
-  const [step, setStep] = React.useState(1);
+  // const [step, setStep] = React.useState(1);
 
-  const handleNextStep = () => {
+  // const handleNextStep = () => {
-    if (step < 4) {
+  //   if (step < 5) {
-      setStep(step + 1);
+  //     setStep(step + 1);
-    }
+  //   }
-  };
+  // };
 
   // const handlePreviousStep: React.MouseEvent<HTMLButtonElement> = () => {
   //   setStep(step - 1);
@@ -36,16 +36,16 @@ const GetStarted = () => {
       <div className="containerMode">
         {/* Main */}
         <main>
-          {step === 1 && (
+          {step === 2 && (
             <BasicInfo
               inputValues={inputValues}
               setInputValues={setInputValues}
               handleNextStep={handleNextStep}
             />
           )}
-          {step === 2 && <YourAreAlmostThere handleNextStep={handleNextStep} />}
+          {step === 3 && <YourAreAlmostThere handleNextStep={handleNextStep} />}
-          {step === 3 && <LoanAmountComp handleNextStep={handleNextStep} />}
+          {step === 4 && <LoanAmountComp handleNextStep={handleNextStep} />}
-          {step === 4 && <ApplicantsAttestation />}
+          {step === 5 && <ApplicantsAttestation />}
         </main>
       </div>
     </div>

src/components/LetsGetStated/LetsGetStarted.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import * as Yup from "yup";
 import { Form, Formik } from "formik";
 import { InputCompOne } from "..";
+import {useNavigate} from 'react-router-dom'
+import { RouteHandler } from "../../router/routes";
 
 // To get the validation schema
 const validationSchema = Yup.object().shape({
@@ -40,6 +42,7 @@ let initialValues = {
 };
 
 const LetsGetStarted: React.FC = () => {
+  const navigate = useNavigate()
   // const [pinValues, setPinValues] = React.useState({
   //   bvn: "",
   //   otp: "",
@@ -74,6 +77,7 @@ const LetsGetStarted: React.FC = () => {
 
   const handleSubmit = (values:any) => {
     console.log('values', values)
+    navigate(RouteHandler.dashboardHome, {replace:true})
   };
 
   return (

src/pages/GetStartedPage.tsx

@@ -1,12 +1,28 @@
 import React from "react";
 import { GetStarted as Main } from "../components";
-import { GetStartedLayout } from "../layouts";
+import { GetStartedLayout, LetsGetStartedLayout } from "../layouts";
+import BVN from "../components/GetStarted/BVN";
 
 const GetStartedPage: React.FC = () => {
+  const [step, setStep] = React.useState(1);
+
+  const handleNextStep = () => {
+    if (step < 5) {
+      setStep(step + 1);
+    }
+  };
   return (
-    <GetStartedLayout>
+    <>
-      <Main />
+    {step == 1 ?
-    </GetStartedLayout>
+      <LetsGetStartedLayout>
+        <BVN handleNextStep={handleNextStep} />
+      </LetsGetStartedLayout>
+    :
+      <GetStartedLayout>
+        <Main step={step} handleNextStep={handleNextStep} />
+      </GetStartedLayout>
+    }
+    </>
   );
 };