54 lines
1.8 KiB
Markdown
54 lines
1.8 KiB
Markdown
# 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
|