chore: Email validation

[bansal-harsh-2504]

User description

Description

Implemented email validation using Zod.

Related to #463

Mentions

@rajdip-b @kriptonian1

Developer's checklist

• My PR follows the style guidelines of this project
• I have performed a self-check on my work

If changes are made in the code:

• I have followed the coding guidelines
• My changes in code generate no new warnings
• There are no UI/UX issues

---

PR Type

enhancement, dependencies

---

Description

• Implemented email validation in the Hero component using the Zod library to ensure valid email addresses are entered.
• Updated the toast message to prompt users to enter a valid email address.
• Added the Zod library to the project's dependencies in package.json.
• Updated the pnpm-lock.yaml file to reflect the addition of the Zod library and other dependency updates.

---

Changes walkthrough 📝

	Relevant files
Enhancement	index.tsx Implement email validation in Hero component                          apps/web/src/components/hero/index.tsx Added email validation using Zod. Updated toast message for invalid email. +7/-2
Dependencies	package.json Add Zod library to project dependencies                                    apps/web/package.json Added Zod library as a dependency. +2/-1      pnpm-lock.yaml Update pnpm lock file with new dependencies                            pnpm-lock.yaml Updated lock file to include Zod and other dependency changes. +35/-302

---

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

[codiumai-pr-agent-free]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis 🔶 463 - Partially compliant Fully compliant requirements: Perform validation on the email field Not compliant requirements: Clear the text field after adding the user to the waitlist Only show toast when the whitelist response is successful Check if user has already whitelisted

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Incomplete Implementation The PR only implements email validation, but doesn't address clearing the text field, showing toast only on successful response, or checking for existing whitelist entries. Error Handling The implementation shows a toast for invalid email, but doesn't handle other potential errors or success cases.

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Performance	Move static schema definitions outside of the component to optimize performance Consider moving the email validation schema (emailSchema) outside of the component to improve performance. Defining it inside the component means it's recreated on every render, which is unnecessary for a static schema. apps/web/src/components/hero/index.tsx [11-14] +const emailSchema = z.string().email() +function Hero(): React.JSX.Element { + const [email, setEmail] = useState<string>('') Apply this suggestion Suggestion importance[1-10]: 9 Why: Moving the static schema definition outside the component prevents unnecessary re-creation on each render, optimizing performance. This is a valuable enhancement for maintaining efficient component rendering.	9
Enhancement	Handle both successful and unsuccessful email validation cases Consider handling the successful case of email validation. Currently, the code only handles the error case, but it's good practice to provide feedback or take action when the email is valid as well. apps/web/src/components/hero/index.tsx [19-27] const result = emailSchema.safeParse(email) -if (!result.success) { +if (result.success) { + // Handle successful email validation (e.g., submit form, show success message) + console.log('Valid email:', result.data); + // Add your logic here +} else { toast.custom(() => ( <div className="text-brandBlue border-brandBlue/20 w-[90vw] rounded-lg border bg-[#852b2c] p-2 shadow-2xl backdrop-blur-3xl md:w-[20vw]"> <p className="text-sm">Please enter a valid email address </p> </div> )) - return } Apply this suggestion Suggestion importance[1-10]: 8 Why: Handling both successful and unsuccessful validation cases is crucial for a complete user interaction flow. This suggestion addresses a missing piece in the logic, ensuring that valid emails are processed appropriately.	8
	Provide more specific error messages in the toast notification for invalid email inputs Consider using a more specific error message in the toast notification. Instead of a generic "Please enter a valid email address", provide details about the specific validation error (e.g., "Invalid email format" or "Email domain not supported"). apps/web/src/components/hero/index.tsx [22-26] toast.custom(() => ( <div className="text-brandBlue border-brandBlue/20 w-[90vw] rounded-lg border bg-[#852b2c] p-2 shadow-2xl backdrop-blur-3xl md:w-[20vw]"> - <p className="text-sm">Please enter a valid email address </p> + <p className="text-sm">{result.error.issues[0].message}</p> </div> )) Apply this suggestion Suggestion importance[1-10]: 7 Why: This suggestion improves user experience by providing more specific error messages, which can help users understand why their input is invalid. It enhances the feedback mechanism without altering the core functionality.	7

💡 Need additional feedback ? start a PR chat

[rajdip-b]

LGTM

[rajdip-b]

@kriptonian1 merge this if you feel its good

[kriptonian1]

LGTM

[rajdip-b]

🎉 This PR is included in version 2.6.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀