From 2cb8741f07ee5151d7d372dd076627d5ae60be6c Mon Sep 17 00:00:00 2001
From: Ravan <69167444+RamK777-stack@users.noreply.github.com>
Date: Fri, 1 Mar 2024 11:23:58 +0530
Subject: [PATCH] feat: Added email validation (#122)

* feat: Added email validation

* style: lint & minor tweek

---------

Co-authored-by: Ram <ramkumar.barani@concertidc.com>
Co-authored-by: amit <amitksingh1490@gmail.com>
---
 src/components/contact/Hello.tsx | 17 ++++++++++++++---
 src/utils/index.ts               |  5 +++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/contact/Hello.tsx b/src/components/contact/Hello.tsx
index b9cbc84999..e3d57908ad 100644
--- a/src/components/contact/Hello.tsx
+++ b/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="you@company.com"
             />
+            {!isValid && <div className="text-red-400">Please enter a valid email.</div>}
           </div>
 
           <div className="flex flex-col space-y-SPACE_02">
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 54b0fc01da..28e61c85e4 100644
--- a/src/utils/index.ts
+++ b/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)
+}