validation bug fix

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/utils/data.tsx

@@ -32,7 +32,7 @@ export const lowerMenuItems = [
   {
     id: 3,
     name: "CORPORATE BANKING",
-    linkPath: "/corporate-banking",
+    linkPath: "/cooperate-banking",
   },
   {
     id: 4,
@@ -277,7 +277,7 @@ export const _lowerMenuItems = [
   },
   {
     name: "CORPORATE BANKING",
-    linkPath: "/corporate-banking",
+    linkPath: "/cooperate-banking",
     subItems: [
       {
         name: "FOREIGN EXCHANGE SERVICES",
@@ -436,12 +436,12 @@ export const footerItems = [
     ],
   },
   {
-    category: "CORPORATE BANKING",
+    category: "COOPORATE BANKING",
     subItems: [
       { text: "FOREIGN EXCHANGE SERVICES", href: "/foreign-exchange-services" },
       { text: "TRADE SERVICES", href: "/node/166" },
       { text: "CASH MANAGEMENT SOLUTIONS", href: "/cash-management" },
-      { text: "CORPORATE FINANCE", href: "/corporate-finance" },
+      { text: "COOPORATE FINANCE", href: "/corporate-finance" },
     ],
   },
   {