fix: email validation

Author: mbifulco

src/app/subscribe/page.tsx

@@ -12,7 +12,7 @@ import { Button } from '@ui/button';
 import { Card, CardContent, CardHeader } from '@ui/card';
 import { Input } from '@ui/input';
 import { Label } from '@ui/label';
-import type { SubscribeResponse } from '@utils/resend';
+import type { SubscribeMutationResponse } from '@server/routers/mailingList';
 import { trpc } from '@utils/trpc';
 import { PostHogPageview } from '../posthog-provider';
 
@@ -31,9 +31,7 @@ export default function NewsletterSignupPage() {
   } = useForm<FormData>();
 
   const addSubscriberMutation = trpc.mailingList.subscribe.useMutation({
-    onSuccess: (data: SubscribeResponse) => {
-      reset();
-
+    onSuccess: (data: SubscribeMutationResponse) => {
       if (data?.error?.name === 'already_subscribed') {
         toast.success('Already subscribed! 🎉', {
           description: data.error.message,
@@ -44,6 +42,7 @@ export default function NewsletterSignupPage() {
           source: 'subscribe-page',
         });
 
+        reset();
         return;
       }
 
@@ -58,10 +57,10 @@ export default function NewsletterSignupPage() {
       posthog.capture('newsletter/subscribed', {
         source: 'subscribe-page',
       });
+
+      reset();
     },
     onError: (error) => {
-      reset();
-
       toast.error('Subscription failed', {
         description:
           'Please try again or contact hello@mikebifulco.com for help.',
@@ -72,26 +71,20 @@ export default function NewsletterSignupPage() {
         source: 'subscribe-page',
         error,
       });
+
+      reset();
     },
   });
 
-  const onSubmit = async (data: FormData) => {
+  const onSubmit = (data: FormData) => {
     posthog.identify(data.email, {
       firstName: data.firstName,
     });
 
-    try {
-      await addSubscriberMutation.mutateAsync({
-        email: data.email,
-        firstName: data.firstName,
-      });
-    } catch (error) {
-      // Handle TRPC input validation errors or other errors that don't trigger onError
-      console.error('Form submission error:', error);
-    }
-
-    // Always reset the form after submission attempt, regardless of outcome
-    reset();
+    addSubscriberMutation.mutate({
+      email: data.email,
+      firstName: data.firstName,
+    });
   };
 
   if (isSubmitted) {

src/components/SubscriptionForm/SubscriptionForm.tsx

@@ -1,12 +1,12 @@
 import { useRef, useState } from 'react';
-import Link from 'next/link';
 import useNewsletterStats from '@hooks/useNewsletterStats';
 import posthog from 'posthog-js';
 import { toast } from 'sonner';
 
 import Button from '@components/Button';
 import { Input } from '@ui/input';
 import { trpc } from '@utils/trpc';
+import type { SubscribeMutationResponse } from '@server/routers/mailingList';
 
 type SubscriptionFormProps = {
   tags?: string[];
@@ -21,10 +21,15 @@ const SubscriptionForm: React.FC<SubscriptionFormProps> = ({
 }) => {
   const [getHoneypottedNerd, setGetHoneypottedNerd] = useState<boolean>(false);
   const [alreadySubscribed, setAlreadySubscribed] = useState<boolean>(false);
+  const [validationError, setValidationError] = useState<string | null>(null);
+
   const addSubscriberMutation = trpc.mailingList.subscribe.useMutation({
-    onSuccess: (data) => {
+    onSuccess: (data: SubscribeMutationResponse) => {
+      // Clear any validation errors on success
+      setValidationError(null);
+
       // Check if this is the "already subscribed" case
-      if (data?.error?.name === 'already_subscribed') {
+      if (data.error?.name === 'already_subscribed') {
         const email = emailRef.current?.value;
         const firstName = firstNameRef.current?.value;
 
@@ -75,17 +80,34 @@ const SubscriptionForm: React.FC<SubscriptionFormProps> = ({
       const email = emailRef.current?.value;
       const firstName = firstNameRef.current?.value;
 
+      // Handle validation errors specifically
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const errorData = error as any;
+      if (errorData?.data?.zodError?.fieldErrors) {
+        const fieldErrors = errorData.data.zodError.fieldErrors;
+        if (fieldErrors.email) {
+          setValidationError('Please enter a valid email address (e.g., person@gmail.com)');
+        } else if (fieldErrors.firstName) {
+          setValidationError('Please enter your first name');
+        } else {
+          setValidationError('Please check your input and try again');
+        }
+      } else if (errorData?.message) {
+        setValidationError(errorData.message);
+      } else {
+        setValidationError('Something went wrong. Please try again or contact support.');
+      }
+
       toast.error('Subscription failed', {
-        description:
-          'Please try again or contact hello@mikebifulco.com for help.',
+        description: 'Please check your input and try again.',
         duration: 5000,
       });
 
       posthog.capture('newsletter/subscribe_error', {
         source,
         email,
         firstName,
-        error,
+        error: errorData?.message || 'Unknown error',
       });
     },
   });
@@ -97,9 +119,12 @@ const SubscriptionForm: React.FC<SubscriptionFormProps> = ({
   const firstNameRef = useRef<HTMLInputElement>(null);
   const honeypotRef = useRef<HTMLInputElement>(null);
 
-  const handleSubmission = async (e: React.FormEvent<HTMLFormElement>) => {
+    const handleSubmission = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
+    // Clear any previous validation errors
+    setValidationError(null);
+
     const email = emailRef.current?.value;
     const firstName = firstNameRef.current?.value;
     const honeypot = honeypotRef.current?.value;
@@ -110,37 +135,85 @@ const SubscriptionForm: React.FC<SubscriptionFormProps> = ({
     }
 
     if (!email) {
+      setValidationError('Please enter your email address');
+      return;
+    }
+
+    // Basic email validation on frontend
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) {
+      setValidationError('Please enter a valid email address (e.g., person@gmail.com)');
       return;
     }
 
     posthog.identify(email, {
       firstName,
     });
 
-    await addSubscriberMutation.mutateAsync({
+    addSubscriberMutation.mutate({
       email,
       firstName,
     });
   };
 
-  if (addSubscriberMutation.error) {
+  // Show validation error inline with the form
+  if (validationError) {
     return (
       <div className="flex flex-col gap-2">
-        <p className="text-xl font-semibold text-inherit">
-          {addSubscriberMutation.error.message}
-        </p>
-        <p className="text-inherit">
-          If you continue to have issues, please email{' '}
-          <Link
-            className="text-pink-600 hover:underline"
-            href="mailto:hello@mikebifulco.com"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            hello@mikebifulco.com
-          </Link>{' '}
-          and I&apos;ll help get this sorted.
-        </p>
+        <div className="rounded-md border border-red-200 bg-red-50 p-4">
+          <p className="text-sm font-medium text-red-800">
+            {validationError}
+          </p>
+        </div>
+        <form ref={formRef} className="w-full" onSubmit={handleSubmission}>
+          <fieldset disabled={addSubscriberMutation.isPending}>
+            <div data-style="clean">
+              <div
+                className="seva-fields formkit-fields grid w-full items-center rounded-sm"
+                data-element="fields"
+                data-stacked="false"
+              >
+                <Input
+                  type="text"
+                  aria-label="Last Name"
+                  ref={honeypotRef}
+                  style={{ display: 'none' }}
+                  name="fields[last_name]"
+                />
+                <Input
+                  className="h-10 w-full grow rounded-t rounded-b-none border border-b-0 border-solid border-pink-600 bg-white px-[2ch] py-[1ch] font-normal text-gray-950"
+                  aria-label="First Name"
+                  name="fields[first_name]"
+                  required
+                  placeholder="First Name"
+                  type="text"
+                  ref={firstNameRef}
+                />
+                <Input
+                  className="h-10 w-full grow rounded-b-none rounded-none border border-b-0 border-solid border-pink-600 bg-white px-[2ch] py-[1ch] font-normal text-gray-950"
+                  name="email_address"
+                  aria-label="Email Address"
+                  placeholder="Email Address"
+                  required
+                  type="email"
+                  ref={emailRef}
+                />
+                <Button
+                  type="submit"
+                  data-element="submit"
+                  className="formkit-submit formkit-submit padding-[1ch 2ch] h-10 grow rounded-t-none rounded-b font-normal"
+                >
+                  <div className="formkit-spinner">
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                  </div>
+                  <span>💌 {buttonText}</span>
+                </Button>
+              </div>
+            </div>
+          </fieldset>
+        </form>
       </div>
     );
   }

src/server/routers/mailingList.ts

@@ -1,8 +1,28 @@
 import { TRPCError } from '@trpc/server';
+import { z } from 'zod';
 
 import { getSubscriberCount, subscribe, subscribeSchema } from '@utils/resend';
 import { procedure, router } from '../trpc';
 
+// Define the return type for the subscribe mutation
+const subscribeResponseSchema = z.union([
+  z.object({
+    data: z.object({
+      id: z.string(),
+    }),
+    error: z.null(),
+  }),
+  z.object({
+    data: z.null(),
+    error: z.object({
+      name: z.literal('already_subscribed'),
+      message: z.string(),
+    }),
+  }),
+]);
+
+export type SubscribeMutationResponse = z.infer<typeof subscribeResponseSchema>;
+
 export const mailingListRouter = router({
   stats: procedure.query(async () => {
     const subscriberCount = await getSubscriberCount();
@@ -11,21 +31,41 @@ export const mailingListRouter = router({
       subscribers: subscriberCount,
     };
   }),
-  subscribe: procedure.input(subscribeSchema).mutation(async ({ input }) => {
-    const { email, firstName, lastName } = input;
-    try {
-      const res = await subscribe({
-        email,
-        firstName,
-        lastName,
-      });
-      return res;
-    } catch (e) {
-      throw new TRPCError({
-        message: 'Error subscribing',
-        code: 'BAD_REQUEST',
-        cause: (e as Error).message || undefined,
-      });
-    }
-  }),
+  subscribe: procedure
+    .input(subscribeSchema)
+    .output(subscribeResponseSchema)
+    .mutation(async ({ input }: { input: z.infer<typeof subscribeSchema> }): Promise<SubscribeMutationResponse> => {
+      const { email, firstName, lastName } = input;
+      try {
+        const res = await subscribe({
+          email,
+          firstName,
+          lastName,
+        });
+
+        // Validate the response matches our expected schema
+        return subscribeResponseSchema.parse(res);
+      } catch (e) {
+        // If it's a Zod validation error, provide better error details
+        if (e instanceof z.ZodError) {
+          throw new TRPCError({
+            message: 'Validation failed',
+            code: 'BAD_REQUEST',
+            cause: e,
+          });
+        }
+
+        // If it's already a TRPC error, re-throw it
+        if (e instanceof TRPCError) {
+          throw e;
+        }
+
+        // For other errors, provide a generic message
+        throw new TRPCError({
+          message: 'Error subscribing to newsletter',
+          code: 'INTERNAL_SERVER_ERROR',
+          cause: (e as Error).message || undefined,
+        });
+      }
+    }),
 });