validation bug fix

src/components/Footer/Footer.tsx

@@ -5,8 +5,8 @@ export default function Footer() {
   const date = new Date().getFullYear();
 
   return (
-    <div className="w-full h-[5.4375rem] bg-[F7F7F7] flex items-center self-end">
+    <div className="w-full h-[5.4375rem] bg-[F7F7F7] flex items-center">
-      <div className="containerMode flex justify-between items-center flex-wrap gap-2">
+      <div className="containerMode flex justify-center md:justify-between items-center flex-wrap gap-2">
         <p className="text-[.9375rem] tracking-[2%] font-semibold text-[#969696]">
           {date} @ First City Monument Bank Limited
         </p>

src/components/GetStarted/ApplicantsAttestation.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import CreditAccount from "./CreditAccount";
 import DebitAccount from "./DebitAccount";
 
 const ApplicantsAttestation: React.FC = () => {
@@ -21,7 +20,6 @@ const ApplicantsAttestation: React.FC = () => {
           </p>
         </div>
       </div>
-      <CreditAccount />
       <DebitAccount />
     </>
   );

src/components/GetStarted/BasicInfo.tsx

@@ -32,7 +32,7 @@ const BasicInfo: React.FC<BasicInfoProps> = ({
   setInputValues,
   handleNextStep,
 }) => {
-  const [hideOTPComponent, setHideOTPComponent] = useState<boolean>(true);
+  const [hideOTPComponent, setHideOTPComponent] = useState<boolean>(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
   const handleChange = (e: React.FormEvent<HTMLInputElement>) => {

src/components/GetStarted/DebitAccount.tsx

@@ -1,9 +1,30 @@
 import React from "react";
+import {useNavigate} from 'react-router-dom'
 import { Button, InputCompOne } from "..";
+import { RouteHandler } from "../../router/routes";
 
 const DebitAccount: React.FC = () => {
+  const navigate = useNavigate()
   return (
-    <div className="flex flex-col gap-9">
+    <>
+      <div className="w-full rounded py-3 mb-9 bg-[#5C2684] px-5">
+        <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
+          CREDIT ACCOUNT ( Your account to receive your loan )
+        </p>
+      </div>
+      <InputCompOne
+        parentClass="max-w-[29.4375rem] w-full my-5 ml-5"
+        label="Disbursement Account Number "
+        name="disbursementAccountNumber"
+        labelSpan="( Your FCMB Account )"
+        labelSpanClass="text-[12px] text-[#5C2684] ml-1"
+        parentInputClass="w-full"
+        labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
+        input
+        inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
+      />
+
+      <div className="mt-9 flex flex-col gap-9">
         <div className="w-full rounded py-3 bg-[#5C2684] px-5">
           <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
             DEBIT ACCOUNT ( Your salary account for monthly repayment )
@@ -60,8 +81,10 @@ 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})}
         />
       </div>
+    </>
   );
 };
 

src/components/LetsGetStated/LetsGetStarted.tsx

@@ -1,21 +1,59 @@
 import React from "react";
+import * as Yup from "yup";
+import { Form, Formik } from "formik";
 import { InputCompOne } from "..";
 
-const LetsGetStarted: React.FC = () => {
+// To get the validation schema
-  const [pinValues, setPinValues] = React.useState({
+const validationSchema = Yup.object().shape({
-    bvn: "",
+  bvn: Yup.string()
-    otp: "",
+  .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"),
+  otp: Yup.string()
+  .required("OTP is required")
+  .test("no-e", "Invalid number", (value:any) => {
+    if (value && /^[0-9]*$/.test(value) == false) {
+      return false;
+    }
+    return true;
+  })
+  .min(5, "must be 5 digits")
+  .max(5, "must be 5 digits"),
+  // .test("no-e", "must be 11 characters", (value:any) => {
+  //   if (value.length < 11) {
+  //     return false;
+  //   }
+  //   return true;
+  // })
 });
 
+// initial values for formik
+let initialValues = {
+  bvn: '',
+  otp: '',
+};
+
+const LetsGetStarted: React.FC = () => {
+  // const [pinValues, setPinValues] = React.useState({
+  //   bvn: "",
+  //   otp: "",
+  // });
+
   const [hideOTPComponent, setHideOTPComponent] = React.useState<boolean>(true);
   const firstInputRef = React.useRef<HTMLInputElement>(null);
   const secondInputRef = React.useRef<HTMLInputElement>(null);
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  // const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    let { name, value } = e.target as HTMLInputElement;
+  //   let { name, value } = e.target as HTMLInputElement;
 
-    setPinValues((prev) => ({ ...prev, [name]: value }));
+  //   setPinValues((prev) => ({ ...prev, [name]: value }));
-  };
+  // };
 
   const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
     let { name, value } = e.target as HTMLInputElement;
@@ -24,7 +62,7 @@ const LetsGetStarted: React.FC = () => {
       const regex = /^[0-9]+$/;
 
       if (regex.test(value)) {
-        if (value?.length == 10) {
+        if (value?.length == 11) {
           setHideOTPComponent(false);
         //   secondInputRef.current?.focus();
         } else setHideOTPComponent(true);
@@ -34,9 +72,18 @@ const LetsGetStarted: React.FC = () => {
     }
   };
 
-  console.log(secondInputRef)
+  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">
@@ -44,7 +91,7 @@ const LetsGetStarted: React.FC = () => {
                 Let’s Get You Started
               </h1>
             </div>
-        <form className="mx-auto flex flex-col gap-8 max-w-[31.625rem] ">
+            <div className="mx-auto flex flex-col gap-8 max-w-[31.625rem] ">
               <InputCompOne
                 parentClass="flex flex-col gap-2"
                 label="Enter Your BVN "
@@ -56,13 +103,14 @@ const LetsGetStarted: React.FC = () => {
                 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={pinValues.bvn}
+                value={props.values.bvn}
-            onChange={handleChange}
+                onChange={props.handleChange}
                 onInput={handleInput}
                 ref={firstInputRef}
-            maxLength={10}
+                maxLength={11}
+                error={(props.errors.bvn && props.touched.bvn) && props.errors.bvn}
               />
-          {!hideOTPComponent ? (
+              {!hideOTPComponent && (
                 <InputCompOne
                   parentClass="flex flex-col gap-2"
                   label="Enter OTP "
@@ -74,15 +122,18 @@ const LetsGetStarted: React.FC = () => {
                   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={pinValues.otp}
+                  value={props.values.otp}
-              onChange={handleChange}
+                  onChange={props.handleChange}
                   onInput={handleInput}
                   ref={secondInputRef}
+                  maxLength={11}
+                  error={(props.errors.otp && props.touched.otp) && props.errors.otp}
                 />
-          ) : null}
+              )}
               <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"
-            disabled={!pinValues.otp}
+                disabled={!props.values.otp}
               >
                 Enter
               </button>
@@ -98,9 +149,12 @@ const LetsGetStarted: React.FC = () => {
                   ***Did not receive OTP? Click to resend
                 </p>
               )}
-        </form>
             </div>
           </div>
+        </div>
+      </Form>
+    )}
+    </Formik>
   );
 };
 

src/components/shared/InputCompOne.tsx

@@ -23,6 +23,7 @@ export interface InputCompOneProps {
   parentSelectClass?: string;
   parentClass?: string;
   maxLength?: number;
+  error?: string;
 }
 
 const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
@@ -49,6 +50,7 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
       parentSelectClass,
       parentClass,
       maxLength,
+      error,
     },
     forwardedRef
   ) => {
@@ -58,6 +60,7 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
           <label htmlFor="" className={labelClass}>
             {label}
             {labelSpan && <span className={labelSpanClass}>{labelSpan}</span>}
+            {error && <span className='text-[10px] text-red-500'>{error}</span>}
           </label>
         )}
         {input && (

src/index.css

@@ -14,6 +14,7 @@ body {
 
 @layer components {
   .containerMode {
-    @apply container mx-auto px-5 xxs:max-w-full sm:max-w-[98%] lg:max-w-[1100px];
+    /* @apply container mx-auto px-5 xxs:max-w-full sm:max-w-[98%] lg:max-w-[1100px]; */
+    @apply container mx-auto px-5 max-w-[1500px]
   }
 }

src/layouts/DashboardLayout/DashboardLayout.tsx

@@ -43,6 +43,37 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
         <Aside asideDisplay={asideDisplay} />
       </aside>
       <main className="dash-bg-image bg-[#F9F9F9] relative w-full overflow-y-auto overflow-x-hidden">
+
+        <header className={`p-5 md:hidden sticky z-10 top-0 w-full bg-[#F9F9F9] border-b-2 border-[#E6E6E6]`}>
+          <div className='h-14 w-full flex justify-end items-center gap-5'>
+              {/* MENU HAND BURGER */}
+              {/* <div className='w-full'>Welcome Austin Catherine</div> */}
+              <div
+              className="relative md:hidden w-5 h-[20px] flex flex-col items-center justify-between"
+              onClick={asideDisplay}
+              >
+              <div
+                  className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
+                  showAside ? "top-1/2 -translate-y-1/2 rotate-45" : "top-0"
+                  }`}
+              ></div>
+              <div
+                  className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-300 ${
+                  showAside
+                      ? "top-1/2 -translate-y-1/2 rotate-[2000deg] opacity-0"
+                      : "top-1/2 -translate-y-1/2"
+                  }`}
+              ></div>
+              <div
+                  className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
+                  showAside
+                      ? "top-1/2 -translate-y-1/2 -rotate-45"
+                      : "bottom-0"
+                  }`}
+              ></div>
+              </div>
+          </div>
+        </header>
         <div className="flex p-5 relative">
           <div className="w-full p-5">{children}</div>
         </div>

src/layouts/GetStartedLayout.tsx

@@ -7,13 +7,15 @@ interface GetStartedLayoutProps {
 
 const GetStartedLayout: React.FC<GetStartedLayoutProps> = ({ children }) => {
   return (
-    <div className="relative">
+    <div className="containerMode mb-[5.4375rem]">
+      <div className='sticky top-0 bg-white'>
         <Header hideSidebar={true} hideMenu={true} />
-      <div className="flex flex-col min-h-[85vh] justify-between">
-        {children}
-        <div className="self-end w-full">
-          <Footer />
       </div>
+      <div className="flex flex-col min-h-[70vh] justify-between">
+        {children}
+      </div>
+      <div className="fixed bottom-0 left-0 bg-white w-full">
+        <Footer />
       </div>
     </div>
   );

src/layouts/LetsGetStartedLayout.tsx

@@ -1,23 +1,23 @@
 import React from "react";
 import { Footer, LetsGetStartedNav } from "../components";
-import layoutImage from "../assets/images/test1-reverse.png";
+// import layoutImage from "../assets/images/test1-reverse.png";
 
 const LetsGetStartedLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <>
+    <div className='containerMode mb-[5.4375rem]'>
-      <div className="grid md:grid-cols-2 h-[770px]">
+      <div className="w-full min-h-[90vh] grid lg:grid-cols-2">
         <div className="w-full flex flex-col my-3">
           <LetsGetStartedNav />
           {children}
         </div>
-        <div className="w-full">
+        <div className="w-full h-96 lg:h-full bg-[url(../src/assets/images/test1-reverse.png)] bg-cover bg-no-repeat">
-          <img src={layoutImage} alt="" className="w-full h-full" />
+          {/* <img src={layoutImage} alt="" className="w-full h-full object-cover" /> */}
         </div>
       </div>
       <div className="fixed bottom-0 left-0 bg-[#F7F7F7] w-full">
         <Footer />
       </div>
-    </>
+    </div>
   );
 };