Let user submit feedback without providing email address closes #307

Author: Bilalm354

app/support/page.tsx

@@ -20,7 +20,7 @@ import { sendFeedbackEmail } from "@/lib/email/sendFeedbackEmail";
 import { Copy } from "lucide-react";
 
 const formSchema = z.object({
-    email: z.string().email(),
+    email: z.string().email().optional(),
     message: z.string(),
 });
 
@@ -34,15 +34,14 @@ export default function SupportPage() {
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
         defaultValues: {
-            email: "",
             message: "",
         },
     });
 
     async function onSubmit(values: z.infer<typeof formSchema>) {
         const { email, message } = values;
 
-        await sendFeedbackEmail(email, message);
+        await sendFeedbackEmail({ emailAddress: email, body: message });
 
         toast({
             title: "Feedback sent :)",
@@ -66,7 +65,10 @@ export default function SupportPage() {
                         render={({ field }) => (
                             <FormItem>
                                 <FormControl>
-                                    <Input placeholder="Email" {...field} />
+                                    <Input
+                                        placeholder="Email (optional)"
+                                        {...field}
+                                    />
                                 </FormControl>
                                 <FormMessage />
                             </FormItem>

lib/email/sendFeedbackEmail.ts

@@ -2,15 +2,31 @@
 
 import { Resend } from "resend";
 import { z } from "zod";
+import { envServer } from "../env/server";
 
 const resend = new Resend(process.env.RESEND_API_KEY);
 
 const sendFeebackEmailToBilalSchema = z.object({
-    emailAddress: z.string(),
+    emailAddress: z.string().optional(),
     body: z.string(),
 });
 
-export async function sendFeedbackEmail(emailAddress: string, body: string) {
+export async function sendFeedbackEmail({
+    emailAddress,
+    body,
+}: {
+    emailAddress?: string;
+    body: string;
+}) {
+    if (envServer.CI) {
+        console.log("Skipping email sending on CI");
+        return;
+    }
+    if (envServer.VERCEL_ENV === "development") {
+        console.log("Skipping email sending on development environment");
+        return;
+    }
+
     try {
         sendFeebackEmailToBilalSchema.parse({
             emailAddress,

tests/pages/feeback-page.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+    await page.goto("http://localhost:3000/support");
+});
+
+test("Lets user submit feedback without an email address", async ({ page }) => {
+    await page.getByPlaceholder("Enter your message here...").click();
+    await page
+        .getByPlaceholder("Enter your message here...")
+        .fill("feedback with no email address entered just body");
+    await page.getByRole("button", { name: "Submit" }).click();
+    await expect(
+        page.getByText("Feedback sent :)", { exact: true }),
+    ).toBeVisible();
+});
+
+test("Lets user submit feedback with an email address", async ({ page }) => {
+    await page.getByPlaceholder("Email").click();
+    await page.getByPlaceholder("Email").fill("[email protected]");
+    await page.getByPlaceholder("Enter your message here...").click();
+    await page
+        .getByPlaceholder("Enter your message here...")
+        .fill("feedback with no email address entered just body");
+    await page.getByRole("button", { name: "Submit" }).click();
+    await expect(
+        page.getByText("Feedback sent :)", { exact: true }),
+    ).toBeVisible();
+});