221ae195e9
Similar to MemberAccess.tsx, ProductDetail.tsx was only checking recording_url and ignoring M3U8 and MP4 recordings from Adilo. Added hasRecording() helper that checks all recording types and updated: - renderActionButtons webinar card display - Badges section (Rekaman Tersedia, Segera Hadir, Telah Lewat) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
683 lines
26 KiB
TypeScript
683 lines
26 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useParams, useNavigate, Link } from 'react-router-dom';
|
|
import { supabase } from '@/integrations/supabase/client';
|
|
import { AppLayout } from '@/components/AppLayout';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useCart } from '@/contexts/CartContext';
|
|
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, Star, CheckCircle, Lock } 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;
|
|
title: string;
|
|
slug: string;
|
|
type: string;
|
|
description: string;
|
|
content: string;
|
|
price: number;
|
|
sale_price: number | null;
|
|
meeting_link: string | null;
|
|
recording_url: string | null;
|
|
m3u8_url: string | null;
|
|
mp4_url: string | null;
|
|
video_host: 'youtube' | 'adilo' | 'unknown' | null;
|
|
event_start: string | null;
|
|
duration_minutes: number | null;
|
|
chapters?: { time: number; title: string; }[];
|
|
created_at: string;
|
|
}
|
|
|
|
interface Module {
|
|
id: string;
|
|
title: string;
|
|
position: number;
|
|
lessons: Lesson[];
|
|
}
|
|
|
|
interface Lesson {
|
|
id: string;
|
|
title: string;
|
|
duration_seconds: number | null;
|
|
position: number;
|
|
chapters?: { time: number; title: string; }[];
|
|
}
|
|
|
|
interface UserReview {
|
|
id: string;
|
|
rating: number;
|
|
title: string;
|
|
body: string;
|
|
is_approved: boolean;
|
|
created_at: string;
|
|
}
|
|
|
|
export default function ProductDetail() {
|
|
const { slug } = useParams<{ slug: string }>();
|
|
const navigate = useNavigate();
|
|
const [product, setProduct] = useState<Product | null>(null);
|
|
const [modules, setModules] = useState<Module[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [hasAccess, setHasAccess] = useState(false);
|
|
const [checkingAccess, setCheckingAccess] = useState(true);
|
|
const [expandedModules, setExpandedModules] = useState<Set<string>>(new Set());
|
|
const [expandedLessonChapters, setExpandedLessonChapters] = useState<Set<string>>(new Set());
|
|
const [userReview, setUserReview] = useState<UserReview | null>(null);
|
|
const [reviewModalOpen, setReviewModalOpen] = useState(false);
|
|
const { addItem, items } = useCart();
|
|
const { user } = useAuth();
|
|
|
|
useEffect(() => {
|
|
if (slug) fetchProduct();
|
|
}, [slug]);
|
|
|
|
useEffect(() => {
|
|
if (product && user) {
|
|
checkUserAccess();
|
|
checkUserReview();
|
|
} else {
|
|
setCheckingAccess(false);
|
|
}
|
|
}, [product, user]);
|
|
|
|
useEffect(() => {
|
|
if (product?.type === 'bootcamp') {
|
|
fetchCurriculum();
|
|
}
|
|
}, [product]);
|
|
|
|
const fetchProduct = async () => {
|
|
const { data, error } = await supabase
|
|
.from('products')
|
|
.select('*')
|
|
.eq('slug', slug)
|
|
.eq('is_active', true)
|
|
.maybeSingle();
|
|
|
|
if (error || !data) {
|
|
toast({ title: 'Error', description: 'Produk tidak ditemukan', variant: 'destructive' });
|
|
} else {
|
|
setProduct(data);
|
|
}
|
|
setLoading(false);
|
|
};
|
|
|
|
const fetchCurriculum = async () => {
|
|
if (!product) return;
|
|
|
|
const { data: modulesData } = await supabase
|
|
.from('bootcamp_modules')
|
|
.select(`
|
|
id,
|
|
title,
|
|
position,
|
|
bootcamp_lessons (
|
|
id,
|
|
title,
|
|
duration_seconds,
|
|
position,
|
|
chapters
|
|
)
|
|
`)
|
|
.eq('product_id', product.id)
|
|
.order('position');
|
|
|
|
if (modulesData) {
|
|
const sorted = modulesData.map(m => ({
|
|
...m,
|
|
lessons: (m.bootcamp_lessons as Lesson[]).sort((a, b) => a.position - b.position)
|
|
}));
|
|
setModules(sorted);
|
|
// Expand first module by default
|
|
if (sorted.length > 0) {
|
|
setExpandedModules(new Set([sorted[0].id]));
|
|
}
|
|
|
|
// Keep all lesson timelines collapsed by default for cleaner UX
|
|
setExpandedLessonChapters(new Set());
|
|
}
|
|
};
|
|
|
|
const checkUserAccess = async () => {
|
|
if (!product || !user) return;
|
|
|
|
// Check user_access table first
|
|
const { data: accessData } = await supabase
|
|
.from('user_access')
|
|
.select('id')
|
|
.eq('user_id', user.id)
|
|
.eq('product_id', product.id)
|
|
.maybeSingle();
|
|
|
|
if (accessData) {
|
|
setHasAccess(true);
|
|
setCheckingAccess(false);
|
|
return;
|
|
}
|
|
|
|
// Also check for paid orders containing this product
|
|
const { data: paidOrders } = await supabase
|
|
.from('orders')
|
|
.select(`
|
|
id,
|
|
order_items!inner (product_id)
|
|
`)
|
|
.eq('user_id', user.id)
|
|
.eq('payment_status', 'paid')
|
|
.eq('payment_provider', 'pakasir')
|
|
.eq('order_items.product_id', product.id)
|
|
.limit(1);
|
|
|
|
setHasAccess(!!(paidOrders && paidOrders.length > 0));
|
|
setCheckingAccess(false);
|
|
};
|
|
|
|
const checkUserReview = async () => {
|
|
if (!product || !user) return;
|
|
|
|
const { data } = await supabase
|
|
.from('reviews')
|
|
.select('id, rating, title, body, is_approved, created_at')
|
|
.eq('user_id', user.id)
|
|
.eq('product_id', product.id)
|
|
.order('created_at', { ascending: false })
|
|
.limit(1);
|
|
|
|
if (data && data.length > 0) {
|
|
setUserReview(data[0] as UserReview);
|
|
} else {
|
|
setUserReview(null);
|
|
}
|
|
};
|
|
|
|
// 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;
|
|
};
|
|
|
|
// Check if webinar is currently running or about to start (can join)
|
|
const isWebinarJoinable = () => {
|
|
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);
|
|
const now = new Date();
|
|
// Can join if webinar hasn't ended yet (even if it's already started)
|
|
return now <= eventEnd;
|
|
};
|
|
|
|
const handleAddToCart = () => {
|
|
if (!product) return;
|
|
addItem({ id: product.id, title: product.title, price: product.price, sale_price: product.sale_price, type: product.type });
|
|
toast({ title: 'Ditambahkan', description: `${product.title} sudah ditambahkan ke keranjang` });
|
|
};
|
|
|
|
const isInCart = product ? items.some(item => item.id === product.id) : false;
|
|
|
|
const formatChapterTime = (seconds: number) => {
|
|
const hours = Math.floor(seconds / 3600);
|
|
const mins = Math.floor((seconds % 3600) / 60);
|
|
const secs = Math.floor(seconds % 60);
|
|
|
|
if (hours > 0) {
|
|
return `${hours}:${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
|
|
}
|
|
return `${mins}:${String(secs).padStart(2, '0')}`;
|
|
};
|
|
|
|
const isLastTimelineItem = (length: number, chapterIndex: number)=> {
|
|
const calcLength = length - 1;
|
|
return calcLength !== chapterIndex;
|
|
}
|
|
|
|
const renderWebinarChapters = () => {
|
|
if (product?.type !== 'webinar' || !product.chapters || product.chapters.length === 0) return null;
|
|
|
|
return (
|
|
<Card className="border-2 border-border mb-6">
|
|
<CardContent className="pt-6">
|
|
<h3 className="text-xl font-bold mb-4">Daftar isi Webinar</h3>
|
|
<div className="space-y-3">
|
|
{product.chapters.map((chapter, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-start gap-3 p-3 rounded-lg transition-colors cursor-not-allowed opacity-75"
|
|
title="Beli webinar untuk mengakses konten ini"
|
|
>
|
|
<div className="flex-shrink-0 w-12 text-center">
|
|
<span className="text-sm font-mono text-muted-foreground">
|
|
{formatChapterTime(chapter.time)}
|
|
</span>
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium">{chapter.title}</p>
|
|
</div>
|
|
<Lock className="w-4 h-4 text-muted-foreground flex-shrink-0" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
const getVideoEmbed = (url: string) => {
|
|
const youtubeMatch = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([^&\s]+)/);
|
|
if (youtubeMatch) return `https://www.youtube.com/embed/${youtubeMatch[1]}`;
|
|
const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);
|
|
if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}`;
|
|
return url;
|
|
};
|
|
|
|
const totalDuration = modules.reduce((total, m) =>
|
|
total + m.lessons.reduce((sum, l) => sum + (l.duration_seconds || 0), 0), 0
|
|
);
|
|
const totalLessons = modules.reduce((sum, m) => sum + m.lessons.length, 0);
|
|
|
|
const toggleModule = (id: string) => {
|
|
const newSet = new Set(expandedModules);
|
|
if (newSet.has(id)) newSet.delete(id);
|
|
else newSet.add(id);
|
|
setExpandedModules(newSet);
|
|
};
|
|
|
|
const toggleLessonChapters = (lessonId: string) => {
|
|
const newSet = new Set(expandedLessonChapters);
|
|
if (newSet.has(lessonId)) {
|
|
newSet.delete(lessonId);
|
|
} else {
|
|
newSet.add(lessonId);
|
|
}
|
|
setExpandedLessonChapters(newSet);
|
|
};
|
|
|
|
// Check if product has any recording (YouTube, M3U8, or MP4)
|
|
const hasRecording = () => {
|
|
if (!product) return false;
|
|
return !!(product.recording_url || product.m3u8_url || product.mp4_url);
|
|
};
|
|
|
|
if (loading) {
|
|
return (<AppLayout><div className="container mx-auto px-4 py-8"><Skeleton className="h-10 w-1/2 mb-4" /><Skeleton className="h-6 w-1/4 mb-8" /><Skeleton className="h-64 w-full" /></div></AppLayout>);
|
|
}
|
|
|
|
if (!product) {
|
|
return (<AppLayout><div className="container mx-auto px-4 py-8 text-center"><h1 className="text-2xl font-bold">Produk tidak ditemukan</h1></div></AppLayout>);
|
|
}
|
|
|
|
const renderActionButtons = () => {
|
|
if (checkingAccess) return <Skeleton className="h-10 w-40" />;
|
|
|
|
if (!hasAccess) {
|
|
return (
|
|
<Button onClick={handleAddToCart} disabled={isInCart} size="lg" className="shadow-sm">
|
|
{isInCart ? 'Sudah di Keranjang' : 'Tambah ke Keranjang'}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
switch (product.type) {
|
|
case 'consulting':
|
|
return (
|
|
<Button asChild size="lg" className="shadow-sm">
|
|
<a href={product.meeting_link || '#'} target="_blank" rel="noopener noreferrer">
|
|
<Calendar className="w-4 h-4 mr-2" />
|
|
Jadwalkan Konsultasi
|
|
</a>
|
|
</Button>
|
|
);
|
|
case 'webinar':
|
|
if (hasRecording()) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<Card className="border-2 border-primary/20 bg-primary/5">
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-start gap-4">
|
|
<div className="rounded-full bg-primary/10 p-3">
|
|
<Play className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold text-lg mb-1">Rekaman webinar tersedia</h3>
|
|
<p className="text-sm text-muted-foreground mb-4">
|
|
Akses rekaman webinar kapan saja. Pelajari materi sesuai kecepatan Anda.
|
|
</p>
|
|
<Button onClick={() => navigate(`/webinar/${product.slug}`)} size="lg">
|
|
<Video className="w-4 h-4 mr-2" />
|
|
Tonton Sekarang
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Show "Gabung Webinar" if webinar hasn't ended yet (can join even if already started)
|
|
if (isWebinarJoinable() && product.meeting_link) {
|
|
return (
|
|
<Button asChild size="lg" className="shadow-sm">
|
|
<a href={product.meeting_link} target="_blank" rel="noopener noreferrer">
|
|
<Video className="w-4 h-4 mr-2" />
|
|
Gabung Webinar
|
|
</a>
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
// Webinar has ended but no recording yet
|
|
if (isWebinarEnded()) {
|
|
return <Badge className="bg-muted text-primary">Rekaman segera tersedia</Badge>;
|
|
}
|
|
|
|
return null;
|
|
case 'bootcamp':
|
|
return (
|
|
<Button onClick={() => navigate(`/bootcamp/${product.slug}`)} size="lg" className="shadow-sm">
|
|
<BookOpen className="w-4 h-4 mr-2" />
|
|
Mulai Bootcamp
|
|
</Button>
|
|
);
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const renderCurriculumPreview = () => {
|
|
if (product.type !== 'bootcamp' || modules.length === 0) return null;
|
|
|
|
return (
|
|
<Card className="border-2 border-border mb-6">
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-xl font-bold">Kurikulum</h3>
|
|
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
|
<span className="flex items-center gap-1">
|
|
<BookOpen className="w-4 h-4" />
|
|
{totalLessons} Pelajaran
|
|
</span>
|
|
{totalDuration > 0 && (
|
|
<span className="flex items-center gap-1">
|
|
<Clock className="w-4 h-4" />
|
|
{formatDuration(totalDuration)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{modules.map((module) => (
|
|
<Collapsible
|
|
key={module.id}
|
|
open={expandedModules.has(module.id)}
|
|
onOpenChange={() => toggleModule(module.id)}
|
|
>
|
|
<CollapsibleTrigger className="flex items-center justify-between w-full p-3 bg-muted hover:bg-accent transition-colors text-left">
|
|
<span className="font-medium">{module.title}</span>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm text-muted-foreground">{module.lessons.length} pelajaran</span>
|
|
{expandedModules.has(module.id) ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
|
|
</div>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
<div className="border-l-2 border-border ml-4 pl-4 py-2 space-y-3">
|
|
{module.lessons.map((lesson) => (
|
|
<div key={lesson.id} className="space-y-2">
|
|
{/* Lesson header */}
|
|
<div className="flex items-center justify-between py-1 text-sm">
|
|
<div className="flex items-center gap-2">
|
|
<Play className="w-3 h-3 text-muted-foreground" />
|
|
<span className="font-medium">{lesson.title}</span>
|
|
</div>
|
|
{lesson.duration_seconds && (
|
|
<span className="text-muted-foreground">{formatDuration(lesson.duration_seconds)}</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Lesson chapters (if any) */}
|
|
{lesson.chapters && lesson.chapters.length > 0 && (
|
|
<Collapsible
|
|
open={expandedLessonChapters.has(lesson.id)}
|
|
onOpenChange={() => toggleLessonChapters(lesson.id)}
|
|
>
|
|
<CollapsibleTrigger className="flex items-center gap-2 ml-5 mb-2 py-1 px-2 text-xs bg-muted text-muted-foreground hover:bg-accent rounded transition-colors w-full">
|
|
<Clock className="w-3 h-3" />
|
|
<span className="flex-1 text-left">
|
|
{lesson.chapters.length} timeline item{lesson.chapters.length > 1 ? 's' : ''}
|
|
</span>
|
|
{expandedLessonChapters.has(lesson.id) ? (
|
|
<ChevronDown className="w-3 h-3" />
|
|
) : (
|
|
<ChevronRight className="w-3 h-3" />
|
|
)}
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
<div className="ml-5 space-y-1">
|
|
{lesson.chapters.map((chapter, chapterIndex) => (
|
|
<div
|
|
key={chapterIndex}
|
|
className={`flex items-start gap-2 py-1 px-2 text-xs text-muted-foreground rounded transition-colors cursor-not-allowed opacity-60${isLastTimelineItem(lesson.chapters.length, chapterIndex) ? ' border-b-2 border-[#dedede] rounded-none' : ''}`}
|
|
title="Beli bootcamp untuk mengakses materi ini"
|
|
>
|
|
<span className="font-mono w-12 text-center">
|
|
{formatChapterTime(chapter.time)}
|
|
</span>
|
|
<span className="flex-1" dangerouslySetInnerHTML={{ __html: chapter.title }} />
|
|
<Lock className="w-3 h-3 flex-shrink-0" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<AppLayout>
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="max-w-4xl mx-auto">
|
|
{/* Ownership Banner - shown at top for purchased users */}
|
|
{hasAccess && (
|
|
<div className="bg-green-50 dark:bg-green-950 border-2 border-green-200 dark:border-green-800 rounded-lg p-4 mb-6">
|
|
<div className="flex items-center justify-between gap-4 flex-wrap">
|
|
<div className="flex items-center gap-3">
|
|
<CheckCircle className="w-6 h-6 text-green-600 dark:text-green-400 flex-shrink-0" />
|
|
<div>
|
|
<p className="font-semibold text-green-900 dark:text-green-100">
|
|
Anda memiliki akses ke produk ini
|
|
</p>
|
|
<p className="text-sm text-green-700 dark:text-green-300">
|
|
{product.type === 'webinar' && 'Selamat menonton rekaman webinar!'}
|
|
{product.type === 'bootcamp' && 'Mulai belajar sekarang!'}
|
|
{product.type === 'consulting' && 'Jadwalkan sesi konsultasi Anda.'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
onClick={() => {
|
|
if (product.type === 'webinar') {
|
|
navigate(`/webinar/${product.slug}`);
|
|
} else if (product.type === 'bootcamp') {
|
|
navigate(`/bootcamp/${product.slug}`);
|
|
}
|
|
}}
|
|
className="bg-green-600 hover:bg-green-700 text-white shadow-sm"
|
|
>
|
|
Tonton Sekarang →
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-6">
|
|
<div>
|
|
<h1 className="text-4xl font-bold mb-2">{product.title}</h1>
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<Badge className="bg-primary text-primary-foreground capitalize">{product.type}</Badge>
|
|
{product.type === 'webinar' && hasRecording() && (
|
|
<Badge className="bg-secondary text-primary">Rekaman Tersedia</Badge>
|
|
)}
|
|
{product.type === 'webinar' && !hasRecording() && product.event_start && new Date(product.event_start) > new Date() && (
|
|
<Badge className="bg-brand-accent text-white">Segera Hadir</Badge>
|
|
)}
|
|
{product.type === 'webinar' && !hasRecording() && product.event_start && new Date(product.event_start) <= new Date() && (
|
|
<Badge className="bg-muted text-primary">Telah Lewat</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
{product.sale_price ? (
|
|
<div>
|
|
<span className="text-3xl font-bold">{formatIDR(product.sale_price)}</span>
|
|
<span className="text-muted-foreground line-through ml-2">{formatIDR(product.price)}</span>
|
|
</div>
|
|
) : (
|
|
<span className="text-3xl font-bold">{formatIDR(product.price)}</span>
|
|
)}
|
|
{product.type === 'bootcamp' && totalDuration > 0 && (
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
Total: {formatDuration(totalDuration)} waktu belajar
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{product.description && (
|
|
<div
|
|
className="prose max-w-none mb-6 text-muted-foreground"
|
|
dangerouslySetInnerHTML={{ __html: product.description }}
|
|
/>
|
|
)}
|
|
|
|
{renderCurriculumPreview()}
|
|
|
|
{product.content && (
|
|
<Card className="border-2 border-border mb-6">
|
|
<CardContent className="pt-6">
|
|
<div
|
|
className="prose max-w-none"
|
|
dangerouslySetInnerHTML={{ __html: product.content }}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{renderWebinarChapters()}
|
|
|
|
<div className="flex gap-4 flex-wrap">
|
|
{renderActionButtons()}
|
|
</div>
|
|
|
|
{/* Webinar review prompt */}
|
|
{hasAccess && product.type === 'webinar' && isWebinarEnded() && (
|
|
<Card className={`border-2 mt-6 ${userReview?.is_approved ? 'bg-gradient-to-br from-brand-accent/10 to-primary/10 border-brand-accent/30' : 'border-primary/20'}`}>
|
|
<CardContent className="py-6">
|
|
{userReview ? (
|
|
userReview.is_approved ? (
|
|
// Approved review - celebratory display
|
|
<div className="space-y-4">
|
|
<div className="flex items-start gap-3">
|
|
<div className="rounded-full bg-brand-accent p-2">
|
|
<CheckCircle className="w-6 h-6 text-white" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<h3 className="text-lg font-bold">Ulasan Anda Terbit!</h3>
|
|
<Badge className="bg-brand-accent text-white rounded-full">Disetujui</Badge>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">Terima kasih telah berbagi pengalaman Anda. Ulasan Anda membantu peserta lain!</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* User's review display */}
|
|
<div className="bg-background/50 backdrop-blur rounded-lg p-4 border border-brand-accent/20">
|
|
<div className="flex gap-0.5 mb-2">
|
|
{[1, 2, 3, 4, 5].map((i) => (
|
|
<Star
|
|
key={i}
|
|
className={`w-5 h-5 ${i <= userReview.rating ? 'fill-brand-accent text-brand-accent' : 'text-muted-foreground'}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
<h4 className="font-semibold text-base mb-1">{userReview.title}</h4>
|
|
{userReview.body && (
|
|
<p className="text-sm text-muted-foreground">{userReview.body}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="text-xs text-muted-foreground">
|
|
Diterbitkan pada {new Date(userReview.created_at).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' })}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
// Pending review
|
|
<div className="flex items-center gap-3 text-muted-foreground">
|
|
<div className="rounded-full bg-amber-500/10 p-2">
|
|
<Clock className="w-5 h-5 text-amber-500" />
|
|
</div>
|
|
<div>
|
|
<p className="font-medium text-foreground">Ulasan Anda sedang ditinjau</p>
|
|
<p className="text-sm">Terima kasih! Ulasan akan muncul setelah disetujui admin.</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
) : (
|
|
// No review yet - prompt to review
|
|
<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={() => checkUserReview()}
|
|
/>
|
|
)}
|
|
</AppLayout>
|
|
);
|
|
}
|