digifi-www/src/components/LetsGetStated/LetsGetStarted.tsx

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({
  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"),
  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 navigate = useNavigate()
  // 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;

  //   setPinValues((prev) => ({ ...prev, [name]: value }));
  // };

  const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
    let { name, value } = e.target as HTMLInputElement;

    if (name === "bvn") {
      const regex = /^[0-9]+$/;

      if (regex.test(value)) {
        if (value?.length == 11) {
          setHideOTPComponent(false);
        //   secondInputRef.current?.focus();
        } else setHideOTPComponent(true);
      } else {
        console.log("object not found");
      }
    }
  };

  const handleSubmit = (values:any) => {
    console.log('values', values)
    navigate(RouteHandler.dashboardHome, {replace:true})
  };

  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}
                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>
              )}
            </div>
          </div>
        </div>
      </Form>
    )}
    </Formik>
  );
};

export default LetsGetStarted;