diff --git a/src/components/LetsGetStated/LetsGetStarted.tsx b/src/components/LetsGetStated/LetsGetStarted.tsx index c873277..024f45e 100644 --- a/src/components/LetsGetStated/LetsGetStarted.tsx +++ b/src/components/LetsGetStated/LetsGetStarted.tsx @@ -1,10 +1,104 @@ import React from "react"; +import { InputCompOne } from ".."; + +const LetsGetStarted: React.FC = () => { + const [pinValues, setPinValues] = React.useState({ + bvn: "", + otp: "", + }); + + const [hideOTPComponent, setHideOTPComponent] = React.useState(true); + const inputRef = React.useRef(null); + + const handleChange = (e: React.ChangeEvent) => { + let { + target: { name, value }, + } = e; + + setPinValues((prev) => ({ ...prev, [name]: value })); + }; + + const handleInput = (e: React.FormEvent) => { + let { + target: { name, value }, + } = e; + + if (name === "bvn") { + const regex = /^[0-9]+$/; + + if (regex.test(value)) { + if (value?.length == 10) { + setHideOTPComponent(false); + } else setHideOTPComponent(true); + } else { + console.log("object not found"); + } + } + console.log(e.target.value.length); + }; -const LetsGetStarted = () => { return (
-
- 123 +
+
+

+ Let’s Get You Started +

+
+
+ + {!hideOTPComponent ? ( + + ) : null} + + + {hideOTPComponent ? ( +

+ ***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. +

+ ) : ( +

+ ***Did not receive OTP? Click to resend +

+ )} +
); diff --git a/src/components/shared/InputCompOne.tsx b/src/components/shared/InputCompOne.tsx index eba689e..bec215e 100644 --- a/src/components/shared/InputCompOne.tsx +++ b/src/components/shared/InputCompOne.tsx @@ -21,6 +21,7 @@ export interface InputCompOneProps { parentInputClass?: string; selectClass?: string; parentSelectClass?: string; + parentClass?: string; } const InputCompOne = forwardRef( @@ -45,11 +46,12 @@ const InputCompOne = forwardRef( parentInputClass, selectClass, parentSelectClass, + parentClass, }, forwardedRef ) => { return ( -
+
{label && (