diff --git a/src/App.tsx b/src/App.tsx index cdbc0479..4e69af72 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -43,6 +43,7 @@ const BlogPost = lazy(() => import("./pages/BlogPost")); const Terms = lazy(() => import("./pages/Terms")); const Privacy = lazy(() => import("./pages/Privacy")); const SubmissionGuidelines = lazy(() => import("./pages/SubmissionGuidelines")); +const Contact = lazy(() => import("./pages/Contact")); // Admin routes (lazy-loaded - heavy bundle) const AdminDashboard = lazy(() => import("./pages/AdminDashboard")); @@ -52,6 +53,7 @@ const AdminSystemLog = lazy(() => import("./pages/AdminSystemLog")); const AdminUsers = lazy(() => import("./pages/AdminUsers")); const AdminBlog = lazy(() => import("./pages/AdminBlog")); const AdminSettings = lazy(() => import("./pages/AdminSettings")); +const AdminContact = lazy(() => import("./pages/admin/AdminContact")); // User routes (lazy-loaded) const Profile = lazy(() => import("./pages/Profile")); diff --git a/src/components/contact/ContactFAQ.tsx b/src/components/contact/ContactFAQ.tsx new file mode 100644 index 00000000..4af8401a --- /dev/null +++ b/src/components/contact/ContactFAQ.tsx @@ -0,0 +1,104 @@ +import { Link } from 'react-router-dom'; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from '@/components/ui/accordion'; + +export function ContactFAQ() { + const faqs = [ + { + question: 'How do I submit a new park or ride?', + answer: ( + <> + You can submit new parks and rides through our submission system. Simply navigate to the{' '} + + Parks + {' '} + or{' '} + + Rides + {' '} + page and click the "Add" button. All submissions go through our moderation queue to ensure quality and accuracy. + + ), + }, + { + question: 'How long does moderation take?', + answer: + 'Most submissions are reviewed within 24-48 hours. Complex submissions or those requiring additional verification may take slightly longer. You can track the status of your submissions in your profile.', + }, + { + question: 'Can I edit my submissions?', + answer: + 'Yes! You can edit any information you\'ve submitted. All edits also go through moderation to maintain data quality. We track all changes in our version history system.', + }, + { + question: 'How do I report incorrect information?', + answer: ( + <> + If you notice incorrect information, you can either submit an edit with the correct data or contact us using the form above with category "Report an Issue". Please include the page URL and describe what needs to be corrected. + + ), + }, + { + question: 'What if I forgot my password?', + answer: ( + <> + Use the "Forgot Password" link on the{' '} + + login page + + . We'll send you a password reset link via email. If you don't receive it, check your spam folder or contact us for assistance. + + ), + }, + { + question: 'How do I delete my account?', + answer: ( + <> + You can request account deletion from your{' '} + + Settings page + + . For security, we require confirmation before processing deletion requests. Please note that some anonymized data (like submissions) may be retained for database integrity. + + ), + }, + { + question: 'Do you have a community Discord or forum?', + answer: + 'We\'re planning to launch community features soon! For now, you can connect with other enthusiasts through reviews and comments on park and ride pages.', + }, + { + question: 'Can I contribute photos?', + answer: + 'Absolutely! You can upload photos to any park or ride page. Photos go through moderation and must follow our content guidelines. High-quality photos are greatly appreciated!', + }, + ]; + + return ( +
+
+

Frequently Asked Questions

+

+ Find answers to common questions. If you don't see what you're looking for, feel free to contact us. +

+
+ + + {faqs.map((faq, index) => ( + + + {faq.question} + + + {faq.answer} + + + ))} + +
+ ); +} diff --git a/src/components/contact/ContactForm.tsx b/src/components/contact/ContactForm.tsx new file mode 100644 index 00000000..9119d316 --- /dev/null +++ b/src/components/contact/ContactForm.tsx @@ -0,0 +1,308 @@ +import { useState, useEffect } from 'react'; +import { useForm } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; +import { Send } from 'lucide-react'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Textarea } from '@/components/ui/textarea'; +import { Label } from '@/components/ui/label'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; +import { TurnstileCaptcha } from '@/components/auth/TurnstileCaptcha'; +import { supabase } from '@/integrations/supabase/client'; +import { handleError, handleSuccess } from '@/lib/errorHandler'; +import { logger } from '@/lib/logger'; +import { contactFormSchema, contactCategories, type ContactFormData } from '@/lib/contactValidation'; +import { useAuth } from '@/hooks/useAuth'; + +export function ContactForm() { + const { user } = useAuth(); + const [isSubmitting, setIsSubmitting] = useState(false); + const [captchaToken, setCaptchaToken] = useState(''); + const [captchaKey, setCaptchaKey] = useState(0); + const [userName, setUserName] = useState(''); + const [userEmail, setUserEmail] = useState(''); + + // Fetch user profile if logged in + useEffect(() => { + const fetchUserProfile = async () => { + if (user) { + setUserEmail(user.email || ''); + + const { data: profile } = await supabase + .from('profiles') + .select('display_name, username') + .eq('user_id', user.id) + .single(); + + if (profile) { + setUserName(profile.display_name || profile.username || ''); + } + } + }; + + fetchUserProfile(); + }, [user]); + + const { + register, + handleSubmit, + setValue, + watch, + reset, + formState: { errors }, + } = useForm({ + resolver: zodResolver(contactFormSchema), + defaultValues: { + name: userName, + email: userEmail, + subject: '', + category: 'general', + message: '', + captchaToken: '', + }, + }); + + // Update form when user data loads + useEffect(() => { + if (userName) { + setValue('name', userName); + } + if (userEmail) { + setValue('email', userEmail); + } + }, [userName, userEmail, setValue]); + + const onCaptchaSuccess = (token: string) => { + setCaptchaToken(token); + setValue('captchaToken', token); + }; + + const onCaptchaError = () => { + setCaptchaToken(''); + setValue('captchaToken', ''); + handleError( + new Error('CAPTCHA verification failed'), + { action: 'verify_captcha' } + ); + }; + + const onCaptchaExpire = () => { + setCaptchaToken(''); + setValue('captchaToken', ''); + }; + + const onSubmit = async (data: ContactFormData) => { + if (!captchaToken) { + handleError( + new Error('Please complete the CAPTCHA'), + { action: 'submit_contact_form' } + ); + return; + } + + setIsSubmitting(true); + + try { + logger.info('Submitting contact form', { category: data.category }); + + const { data: result, error } = await supabase.functions.invoke( + 'send-contact-message', + { + body: { + name: data.name, + email: data.email, + subject: data.subject, + message: data.message, + category: data.category, + captchaToken: data.captchaToken, + }, + } + ); + + if (error) { + throw error; + } + + handleSuccess( + 'Message Sent!', + "Thank you for contacting us. We'll respond within 24-48 hours." + ); + + // Reset form + reset({ + name: userName, + email: userEmail, + subject: '', + category: 'general', + message: '', + captchaToken: '', + }); + + // Reset CAPTCHA + setCaptchaToken(''); + setCaptchaKey((prev) => prev + 1); + + logger.info('Contact form submitted successfully', { + submissionId: result?.submissionId, + }); + } catch (error) { + logger.error('Failed to submit contact form', { + error: error instanceof Error ? error.message : String(error), + }); + handleError(error, { + action: 'submit_contact_form', + metadata: { category: data.category }, + }); + + // Reset CAPTCHA on error + setCaptchaToken(''); + setCaptchaKey((prev) => prev + 1); + } finally { + setIsSubmitting(false); + } + }; + + return ( +
+ {/* Name */} +
+ + + {errors.name && ( +

{errors.name.message}

+ )} +
+ + {/* Email */} +
+ + + {errors.email && ( +

{errors.email.message}

+ )} +
+ + {/* Category */} +
+ + + {errors.category && ( +

{errors.category.message}

+ )} +
+ + {/* Subject */} +
+ + + {errors.subject && ( +

{errors.subject.message}

+ )} +
+ + {/* Message */} +
+ +