Add photo upload functionality

src/components/reviews/ReviewForm.tsx

@@ -11,13 +11,15 @@ import { Star, Send } from 'lucide-react';
 import { useAuth } from '@/hooks/useAuth';
 import { supabase } from '@/integrations/supabase/client';
 import { toast } from '@/hooks/use-toast';
+import { PhotoUpload } from '@/components/upload/PhotoUpload';
 
 const reviewSchema = z.object({
   rating: z.number().min(1).max(5),
   title: z.string().optional(),
   content: z.string().min(10, 'Review must be at least 10 characters long'),
   visit_date: z.string().optional(),
-  wait_time_minutes: z.number().optional()
+  wait_time_minutes: z.number().optional(),
+  photos: z.array(z.string()).optional()
 });
 
 type ReviewFormData = z.infer<typeof reviewSchema>;
@@ -33,6 +35,7 @@ export function ReviewForm({ entityType, entityId, entityName, onReviewSubmitted
   const { user } = useAuth();
   const [rating, setRating] = useState(0);
   const [submitting, setSubmitting] = useState(false);
+  const [photos, setPhotos] = useState<string[]>([]);
 
   const {
     register,
@@ -68,6 +71,7 @@ export function ReviewForm({ entityType, entityId, entityName, onReviewSubmitted
         content: data.content,
         visit_date: data.visit_date || null,
         wait_time_minutes: data.wait_time_minutes || null,
+        photos: photos.length > 0 ? photos : null,
         moderation_status: 'pending' as const,
         ...(entityType === 'park' ? { park_id: entityId } : { ride_id: entityId })
       };
@@ -85,6 +89,7 @@ export function ReviewForm({ entityType, entityId, entityName, onReviewSubmitted
 
       reset();
       setRating(0);
+      setPhotos([]);
       onReviewSubmitted();
     } catch (error) {
       console.error('Error submitting review:', error);
@@ -201,6 +206,27 @@ export function ReviewForm({ entityType, entityId, entityName, onReviewSubmitted
             </div>
           )}
 
+          {/* Photo Upload */}
+          <div className="space-y-2">
+            <Label>Photos (Optional)</Label>
+            <PhotoUpload
+              maxFiles={5}
+              onUploadComplete={setPhotos}
+              onError={(error) => {
+                toast({
+                  title: "Upload Error",
+                  description: error,
+                  variant: "destructive"
+                });
+              }}
+              variant="compact"
+              className="max-w-full"
+            />
+            <p className="text-xs text-muted-foreground">
+              Add up to 5 photos to share your experience
+            </p>
+          </div>
+
           <Button type="submit" disabled={submitting} className="w-full">
             <Send className="w-4 h-4 mr-2" />
             {submitting ? 'Submitting...' : 'Submit Review'}