From 886fd64347ab381d8f198a74ccf0780d157a4798 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Tue, 16 Apr 2024 20:17:57 +0100
Subject: [PATCH] validated otp input to be numbers

---
 .../LetsGetStated/LetsGetStarted.tsx          | 200 +++++++++++-------
 src/components/shared/InputCompOne.tsx        |   3 +
 2 files changed, 130 insertions(+), 73 deletions(-)

diff --git a/src/components/LetsGetStated/LetsGetStarted.tsx b/src/components/LetsGetStated/LetsGetStarted.tsx
index 4f774b2..dcc3c6d 100644
--- a/src/components/LetsGetStated/LetsGetStarted.tsx
+++ b/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 "..";
 
+// To get the validation schema
+const validationSchema = Yup.object().shape({
+  bvn: Yup.string()
+  .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")
+  .required("BVN is required"),
+  otp: Yup.string()
+  .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")
+  .required("OTP is required"),
+  // .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 [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>) => {
-    let { name, value } = e.target as HTMLInputElement;
+  // const handleChange = (e: React.ChangeEvent<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,73 +72,89 @@ const LetsGetStarted: React.FC = () => {
     }
   };
 
-  console.log(secondInputRef)
+  const handleSubmit = (values:any) => {
+    console.log('values', values)
+  };
 
   return (
-    <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>
-        <form 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={pinValues.bvn}
-            onChange={handleChange}
-            onInput={handleInput}
-            ref={firstInputRef}
-            maxLength={10}
-          />
-          {!hideOTPComponent ? (
-            <InputCompOne
-              parentClass="flex flex-col gap-2"
-              label="Enter OTP "
-              name="otp"
-              parentInputClass="w-full"
-              labelSpan="( Please check your BVN phone number for verification pin )"
-              labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
-              placeholder="Enter your OTP"
-              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}
-              onChange={handleChange}
-              onInput={handleInput}
-              ref={secondInputRef}
-            />
-          ) : null}
-          <button
-            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}
-          >
-            Enter
-          </button>
+    <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}
+                onInput={handleInput}
+                ref={firstInputRef}
+                maxLength={11}
+                error={(props.errors.bvn && props.touched.bvn) && props.errors.bvn}
+              />
+              {!hideOTPComponent && (
+                <InputCompOne
+                  parentClass="flex flex-col gap-2"
+                  label="Enter OTP "
+                  name="otp"
+                  parentInputClass="w-full"
+                  labelSpan="( Please check your BVN phone number for verification pin )"
+                  labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
+                  placeholder="Enter your OTP"
+                  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.otp}
+                  onChange={props.handleChange}
+                  onInput={handleInput}
+                  ref={secondInputRef}
+                  maxLength={11}
+                  error={(props.errors.otp && props.touched.otp) && props.errors.otp}
+                />
+              )}
+              <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={!props.values.otp}
+              >
+                Enter
+              </button>
 
-          {hideOTPComponent ? (
-            <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
-              ***Every personal information attached to your BVN is safe and
-              secure. It is only important for us to verify your information and
-              also give you access to your application profile/account.
-            </p>
-          ) : (
-            <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
-              ***Did not receive OTP? Click to resend
-            </p>
-          )}
-        </form>
-      </div>
-    </div>
+              {hideOTPComponent ? (
+                <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
+                  ***Every personal information attached to your BVN is safe and
+                  secure. It is only important for us to verify your information and
+                  also give you access to your application profile/account.
+                </p>
+              ) : (
+                <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
+                  ***Did not receive OTP? Click to resend
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+      </Form>
+    )}
+    </Formik>
   );
 };
 
diff --git a/src/components/shared/InputCompOne.tsx b/src/components/shared/InputCompOne.tsx
index c3e9d57..de43519 100644
--- a/src/components/shared/InputCompOne.tsx
+++ b/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 && (