feat: Added email validation (tailcallhq#122)

* feat: Added email validation

* style: lint & minor tweek

---------

Co-authored-by: Ram <[email protected]>
Co-authored-by: amit <[email protected]>

src/components/contact/Hello.tsx

@@ -3,15 +3,20 @@ import Heading from "@theme/Heading"
 import toast, {Toaster} from "react-hot-toast"
 import Grid from "@site/static/images/about/grid-large.svg"
 import LinkButton from "../shared/LinkButton"
-import {analyticsHandler} from "@site/src/utils"
+import {analyticsHandler, validateEmail} from "@site/src/utils"
 import {Theme, radioOptions, zapierLink} from "@site/src/constants"
 
 const Hello = (): JSX.Element => {
   const [email, setEmail] = useState<string>("")
   const [message, setMessage] = useState<string>("")
   const [stage, setStage] = useState<string>("")
+  const [isValid, setIsValid] = useState<boolean>(true)
 
   const sendData = useCallback(async () => {
+    if (!validateEmail(email)) {
+      setIsValid(false)
+      return
+    }
     const response = await fetch(zapierLink, {
       method: "POST",
       body: JSON.stringify({
@@ -31,6 +36,7 @@ const Hello = (): JSX.Element => {
       setEmail("")
       setMessage("")
       setStage("")
+      setIsValid(true)
     }
   }, [email, message, stage])
 
@@ -56,10 +62,15 @@ const Hello = (): JSX.Element => {
               name="email"
               type="email"
               value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              className="border border-solid border-tailCall-border-light-500 rounded-lg font-space-grotesk h-11 w-[95%] sm:w-[480px] p-SPACE_03 text-content-small outline-none focus:border-x-tailCall-light-700"
+              onChange={(e) => {
+                setEmail(e.target.value)
+                if (!isValid) setIsValid(true)
+              }}
+              className={`border border-solid border-tailCall-border-light-500 rounded-lg font-space-grotesk h-11 w-[95%] sm:w-[480px] 
+              p-SPACE_03 text-content-small outline-none focus:border-x-tailCall-light-700  ${isValid ? "is-valid" : "is-invalid"}`}
               placeholder="[email protected]"
             />
+            {!isValid && <div className="text-red-400">Please enter a valid email.</div>}
           </div>
 
           <div className="flex flex-col space-y-SPACE_02">

src/utils/index.ts

@@ -19,3 +19,8 @@ export const setBodyOverflow = (value: "initial" | "hidden") => {
 export const getSearchInputRef = () => {
   return document.getElementById("search_input_react")
 }
+
+export const validateEmail = (email: string) => {
+  const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
+  return regex.test(email)
+}