diff --git a/EMAIL_PROMPT_ON_REGISTRATION.md b/EMAIL_PROMPT_ON_REGISTRATION.md new file mode 100644 index 0000000..3666ed2 --- /dev/null +++ b/EMAIL_PROMPT_ON_REGISTRATION.md @@ -0,0 +1,53 @@ +# 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 diff --git a/src/components/event/EmailPromptModal.tsx b/src/components/event/EmailPromptModal.tsx new file mode 100644 index 0000000..b729729 --- /dev/null +++ b/src/components/event/EmailPromptModal.tsx @@ -0,0 +1,57 @@ +interface EmailPromptModalProps { + onClose: () => void; + onAddEmail: () => void; + onContinue: () => void; +} + +export function EmailPromptModal({ onClose, onAddEmail, onContinue }: EmailPromptModalProps) { + return ( +
+
+ {/* Background overlay */} +
+ + {/* Modal panel */} +
+
+ {/* Icon */} +
+ + + +
+ + {/* Content */} +
+

+ Add an Email Address? +

+

+ You don't have an email address registered. Adding one will allow you to receive notifications about event changes or cancellations. +

+

+ You'll be directed to your profile page where you can manage your account settings. +

+
+
+ + {/* Actions */} +
+ + +
+
+
+
+ ); +} diff --git a/src/components/event/index.ts b/src/components/event/index.ts index da2dd9e..68defa0 100644 --- a/src/components/event/index.ts +++ b/src/components/event/index.ts @@ -6,4 +6,5 @@ export { EventDetailModal } from './EventDetailModal'; export { EventCompletionForm } from './EventCompletionForm'; export { AttendeeManagement } from './AttendeeManagement'; export { CompletedEventDetails } from './CompletedEventDetails'; +export { EmailPromptModal } from './EmailPromptModal'; export type { EventFilterState } from './EventFilters'; diff --git a/src/pages/EventsPage.tsx b/src/pages/EventsPage.tsx index c04125b..06a5309 100644 --- a/src/pages/EventsPage.tsx +++ b/src/pages/EventsPage.tsx @@ -1,12 +1,14 @@ import { useState, useEffect } from 'react'; import { useUser } from '@clerk/clerk-react'; -import { EventForm, EventList, EventFilters, EventDetailModal } from '@/components/event'; +import { useNavigate } from 'react-router-dom'; +import { EventForm, EventList, EventFilters, EventDetailModal, EmailPromptModal } from '@/components/event'; import type { EventFilterState } from '@/components/event'; import { eventService } from '@/services/eventService'; import type { CleanupEvent } from '@/types'; export function EventsPage() { const { isSignedIn, user } = useUser(); + const navigate = useNavigate(); const [events, setEvents] = useState([]); const [filteredEvents, setFilteredEvents] = useState([]); const [filters, setFilters] = useState({ @@ -19,6 +21,8 @@ export function EventsPage() { const [isLoading, setIsLoading] = useState(true); const [isSubmitting, setIsSubmitting] = useState(false); const [error, setError] = useState(null); + const [showEmailPrompt, setShowEmailPrompt] = useState(false); + const [pendingEventId, setPendingEventId] = useState(null); // Load events useEffect(() => { @@ -148,6 +152,18 @@ export function EventsPage() { return; } + // Check if user has an email address + const hasEmail = user?.primaryEmailAddress?.emailAddress; + if (!hasEmail) { + setPendingEventId(eventId); + setShowEmailPrompt(true); + return; + } + + await performRegistration(eventId); + }; + + const performRegistration = async (eventId: string) => { try { setIsSubmitting(true); setError(null); @@ -162,6 +178,22 @@ export function EventsPage() { } }; + const handleAddEmail = () => { + setShowEmailPrompt(false); + // Navigate to user profile where they can manage their Clerk account + if (user?.id) { + navigate(`/profile/${user.id}`); + } + }; + + const handleContinueWithoutEmail = async () => { + setShowEmailPrompt(false); + if (pendingEventId) { + await performRegistration(pendingEventId); + setPendingEventId(null); + } + }; + const handleUnregister = async () => { if (!selectedEvent) return; @@ -323,6 +355,18 @@ export function EventsPage() { isLoading={isSubmitting} /> )} + + {/* Email Prompt Modal */} + {showEmailPrompt && ( + { + setShowEmailPrompt(false); + setPendingEventId(null); + }} + onAddEmail={handleAddEmail} + onContinue={handleContinueWithoutEmail} + /> + )} ); }