ocean-cleanup/EMAIL_PROMPT_ON_REGISTRATION.md

Email Prompt on Event Registration

Overview

When users without a registered email address attempt to sign up for an event, they are now prompted to add an email address. This ensures they can receive notifications about event changes or cancellations.

Implementation

New Component

src/components/event/EmailPromptModal.tsx

• Modal that appears when a user without an email tries to register for an event
• Provides two options:
  1. "Add Email Address" - Navigates to user profile page
  2. "Continue Without Email" - Proceeds with registration anyway

Modified Files

src/pages/EventsPage.tsx

• Added email check in handleRegister function
• Checks if user has primaryEmailAddress before registration
• Shows EmailPromptModal if no email is found
• Added navigation to user profile page for email management
• Maintains pending event ID to complete registration after user decision

src/components/event/index.ts

• Added export for EmailPromptModal

User Flow

1. User clicks "Register" or "Quick Register" on an event
2. System checks if user has an email address registered
3. If no email:
   • EmailPromptModal appears
   • User can choose to:
     • Add email (redirected to profile page)
     • Continue without email (registration proceeds)
4. If email exists:
   • Registration proceeds normally

Benefits

• Encourages users to add email addresses for better communication
• Non-blocking - users can still register without email
• Clear messaging about why email is beneficial
• Seamless integration with existing registration flow

Technical Details

• Uses Clerk's user.primaryEmailAddress?.emailAddress to check for email
• Modal is shown before API call to register
• Pending event ID is stored in state during modal interaction
• Registration completes after user makes a choice