dwindown/meet-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add timeline clickability control and checkout auth modal

Browse Source 
- Add clickable prop to TimelineChapters component for marketing vs purchased users
- Make timeline non-clickable in product preview pages with lock icons
- Keep timeline clickable in actual content pages (WebinarRecording, Bootcamp)
- Add inline auth modal in checkout with login/register tabs
- Replace "Login untuk Checkout" button with seamless auth flow
- Add form validation and error handling for auth forms

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
dwindown
2026-01-02 20:38:43 +07:00
parent eee6339074
commit 72799b981d
4 changed files with 215 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/pages/ProductDetail.tsx
View File

@@ -10,7 +10,7 @@ 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 } from 'lucide-react';
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';
@@ -238,18 +238,18 @@ export default function ProductDetail() {
{product.chapters.map((chapter, index) => (
<div
key={index}
className="flex items-center gap-3 p-3 rounded-lg hover:bg-accent transition-colors cursor-pointer group"
onClick={() => product && navigate(`/webinar/${product.slug}`)}
className="flex items-center 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 group-hover:text-primary">
<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>
<Play className="w-4 h-4 text-muted-foreground group-hover:text-primary flex-shrink-0" />
<Lock className="w-4 h-4 text-muted-foreground flex-shrink-0" />
</div>
))}
</div>
@@ -420,13 +420,14 @@ export default function ProductDetail() {
{lesson.chapters.map((chapter, chapterIndex) => (
<div
key={chapterIndex}
className="flex items-center gap-2 py-1 px-2 text-xs text-muted-foreground hover:bg-accent/50 rounded transition-colors cursor-pointer group"
onClick={() => product && navigate(`/bootcamp/${product.slug}`)}
className="flex items-center gap-2 py-1 px-2 text-xs text-muted-foreground rounded transition-colors cursor-not-allowed opacity-60"
title="Beli bootcamp untuk mengakses materi ini"
>
<span className="font-mono w-10 text-center group-hover:text-primary">
<span className="font-mono w-10 text-center">
{formatChapterTime(chapter.time)}
</span>
<span className="flex-1 group-hover:text-foreground">{chapter.title}</span>
<span className="flex-1">{chapter.title}</span>
<Lock className="w-3 h-3 flex-shrink-0" />
</div>
))}
</div>