Changes

src/pages/ProductDetail.tsx

@@ -10,8 +10,10 @@ import { useAuth } from '@/hooks/useAuth';
 import { toast } from '@/hooks/use-toast';
 import { Skeleton } from '@/components/ui/skeleton';
 import { formatIDR, formatDuration } from '@/lib/format';
-import { Video, Calendar, BookOpen, Play, Clock, ChevronDown, ChevronRight } from 'lucide-react';
+import { Video, Calendar, BookOpen, Play, Clock, ChevronDown, ChevronRight, Star, CheckCircle } from 'lucide-react';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { ReviewModal } from '@/components/reviews/ReviewModal';
+import { ProductReviews } from '@/components/reviews/ProductReviews';
 
 interface Product {
   id: string;
@@ -24,6 +26,8 @@ interface Product {
   sale_price: number | null;
   meeting_link: string | null;
   recording_url: string | null;
+  event_start: string | null;
+  duration_minutes: number | null;
   created_at: string;
 }
 
@@ -50,6 +54,8 @@ export default function ProductDetail() {
   const [hasAccess, setHasAccess] = useState(false);
   const [checkingAccess, setCheckingAccess] = useState(true);
   const [expandedModules, setExpandedModules] = useState<Set<string>>(new Set());
+  const [hasReviewed, setHasReviewed] = useState(false);
+  const [reviewModalOpen, setReviewModalOpen] = useState(false);
   const { addItem, items } = useCart();
   const { user } = useAuth();
 
@@ -60,6 +66,7 @@ export default function ProductDetail() {
   useEffect(() => {
     if (product && user) {
       checkUserAccess();
+      checkUserReview();
     } else {
       setCheckingAccess(false);
     }
@@ -153,6 +160,28 @@ export default function ProductDetail() {
     setCheckingAccess(false);
   };
 
+  const checkUserReview = async () => {
+    if (!product || !user) return;
+    
+    const { data } = await supabase
+      .from('reviews')
+      .select('id')
+      .eq('user_id', user.id)
+      .eq('product_id', product.id)
+      .limit(1);
+    
+    setHasReviewed(!!(data && data.length > 0));
+  };
+
+  // Check if webinar has ended (eligible for review)
+  const isWebinarEnded = () => {
+    if (!product || product.type !== 'webinar' || !product.event_start) return false;
+    const eventStart = new Date(product.event_start);
+    const durationMs = (product.duration_minutes || 60) * 60 * 1000;
+    const eventEnd = new Date(eventStart.getTime() + durationMs);
+    return new Date() > eventEnd;
+  };
+
   const handleAddToCart = () => {
     if (!product) return;
     addItem({ id: product.id, title: product.title, price: product.price, sale_price: product.sale_price, type: product.type });
@@ -358,11 +387,54 @@ export default function ProductDetail() {
             </Card>
           )}
 
-          <div className="flex gap-4">
+          <div className="flex gap-4 flex-wrap">
             {renderActionButtons()}
           </div>
+
+          {/* Webinar review prompt */}
+          {hasAccess && product.type === 'webinar' && isWebinarEnded() && (
+            <Card className="border-2 border-primary/20 mt-6">
+              <CardContent className="py-4">
+                {hasReviewed ? (
+                  <div className="flex items-center gap-2 text-muted-foreground">
+                    <CheckCircle className="w-5 h-5 text-accent" />
+                    <span>Terima kasih atas ulasan Anda (menunggu moderasi)</span>
+                  </div>
+                ) : (
+                  <div className="flex items-center justify-between gap-4 flex-wrap">
+                    <div>
+                      <p className="font-medium">Bagaimana pengalaman webinar ini?</p>
+                      <p className="text-sm text-muted-foreground">Ulasan Anda membantu peserta lain</p>
+                    </div>
+                    <Button onClick={() => setReviewModalOpen(true)} variant="outline" className="border-2">
+                      <Star className="w-4 h-4 mr-2" />
+                      Beri ulasan webinar ini
+                    </Button>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Product reviews section */}
+          <div className="mt-8">
+            <ProductReviews productId={product.id} />
+          </div>
         </div>
       </div>
+
+      {/* Review Modal */}
+      {user && (
+        <ReviewModal
+          open={reviewModalOpen}
+          onOpenChange={setReviewModalOpen}
+          userId={user.id}
+          productId={product.id}
+          type="webinar"
+          contextLabel={product.title}
+          onSuccess={() => setHasReviewed(true)}
+        />
+      )}
     </AppLayout>
   );
 }