Add timeline clickability control and checkout auth modal
- 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
@@ -13,6 +13,7 @@ interface TimelineChaptersProps {
|
||||
onChapterClick?: (time: number) => void;
|
||||
currentTime?: number; // Current video playback time in seconds
|
||||
accentColor?: string;
|
||||
clickable?: boolean; // Control whether chapters are clickable
|
||||
}
|
||||
|
||||
export function TimelineChapters({
|
||||
@@ -20,6 +21,7 @@ export function TimelineChapters({
|
||||
onChapterClick,
|
||||
currentTime = 0,
|
||||
accentColor = '#f97316',
|
||||
clickable = true,
|
||||
}: TimelineChaptersProps) {
|
||||
// Format time in seconds to MM:SS or HH:MM:SS
|
||||
const formatTime = (seconds: number): string => {
|
||||
@@ -63,10 +65,11 @@ export function TimelineChapters({
|
||||
return (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => onChapterClick && onChapterClick(chapter.time)}
|
||||
onClick={() => clickable && onChapterClick && onChapterClick(chapter.time)}
|
||||
disabled={!clickable}
|
||||
className={`
|
||||
w-full flex items-center gap-3 p-3 rounded-lg transition-all text-left
|
||||
hover:bg-muted cursor-pointer
|
||||
${clickable ? 'hover:bg-muted cursor-pointer' : 'cursor-not-allowed opacity-75'}
|
||||
${active
|
||||
? `bg-primary/10 border-l-4`
|
||||
: 'border-l-4 border-transparent'
|
||||
@@ -77,7 +80,7 @@ export function TimelineChapters({
|
||||
? { borderColor: accentColor, backgroundColor: `${accentColor}10` }
|
||||
: undefined
|
||||
}
|
||||
title={`Klik untuk lompat ke ${formatTime(chapter.time)}`}
|
||||
title={clickable ? `Klik untuk lompat ke ${formatTime(chapter.time)}` : 'Belum membeli produk ini'}
|
||||
>
|
||||
{/* Timestamp */}
|
||||
<div className={`
|
||||
|
||||
@@ -6,6 +6,9 @@ import { useAuth } from "@/hooks/useAuth";
|
||||
import { supabase } from "@/integrations/supabase/client";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { toast } from "@/hooks/use-toast";
|
||||
import { formatIDR } from "@/lib/format";
|
||||
import { Trash2, CreditCard, Loader2, QrCode } from "lucide-react";
|
||||
@@ -27,6 +30,13 @@ export default function Checkout() {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [step, setStep] = useState<CheckoutStep>("cart");
|
||||
|
||||
// Auth modal state
|
||||
const [authModalOpen, setAuthModalOpen] = useState(false);
|
||||
const [authLoading, setAuthLoading] = useState(false);
|
||||
const [authEmail, setAuthEmail] = useState("");
|
||||
const [authPassword, setAuthPassword] = useState("");
|
||||
const [authName, setAuthName] = useState("");
|
||||
|
||||
const checkPaymentStatus = async (oid: string) => {
|
||||
const { data: order } = await supabase.from("orders").select("payment_status").eq("id", oid).single();
|
||||
|
||||
@@ -127,6 +137,62 @@ export default function Checkout() {
|
||||
toast({ title: "Info", description: "Status pembayaran diupdate otomatis" });
|
||||
};
|
||||
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!authEmail || !authPassword) {
|
||||
toast({ title: "Error", description: "Email dan password wajib diisi", variant: "destructive" });
|
||||
return;
|
||||
}
|
||||
|
||||
setAuthLoading(true);
|
||||
const { error } = await signIn(authEmail, authPassword);
|
||||
|
||||
if (error) {
|
||||
toast({
|
||||
title: "Login gagal",
|
||||
description: error.message || "Email atau password salah",
|
||||
variant: "destructive",
|
||||
});
|
||||
setAuthLoading(false);
|
||||
} else {
|
||||
toast({ title: "Login berhasil", description: "Silakan lanjutkan pembayaran" });
|
||||
setAuthModalOpen(false);
|
||||
setAuthLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRegister = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!authEmail || !authPassword || !authName) {
|
||||
toast({ title: "Error", description: "Semua field wajib diisi", variant: "destructive" });
|
||||
return;
|
||||
}
|
||||
|
||||
if (authPassword.length < 6) {
|
||||
toast({ title: "Error", description: "Password minimal 6 karakter", variant: "destructive" });
|
||||
return;
|
||||
}
|
||||
|
||||
setAuthLoading(true);
|
||||
const { error, data } = await signUp(authEmail, authPassword, authName);
|
||||
|
||||
if (error) {
|
||||
toast({
|
||||
title: "Registrasi gagal",
|
||||
description: error.message || "Gagal membuat akun",
|
||||
variant: "destructive",
|
||||
});
|
||||
setAuthLoading(false);
|
||||
} else {
|
||||
toast({
|
||||
title: "Registrasi berhasil",
|
||||
description: "Silakan cek email untuk verifikasi akun Anda",
|
||||
});
|
||||
setAuthModalOpen(false);
|
||||
setAuthLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AppLayout>
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
@@ -192,21 +258,134 @@ export default function Checkout() {
|
||||
<span className="font-bold">{formatIDR(total)}</span>
|
||||
</div>
|
||||
<div className="space-y-3 pt-2 border-t">
|
||||
<Button onClick={handleCheckout} className="w-full shadow-sm" disabled={loading}>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
Memproses...
|
||||
</>
|
||||
) : user ? (
|
||||
<>
|
||||
<CreditCard className="w-4 h-4 mr-2" />
|
||||
Bayar dengan QRIS
|
||||
</>
|
||||
) : (
|
||||
"Login untuk Checkout"
|
||||
)}
|
||||
</Button>
|
||||
{user ? (
|
||||
<Button onClick={handleCheckout} className="w-full shadow-sm" disabled={loading}>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
Memproses...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CreditCard className="w-4 h-4 mr-2" />
|
||||
Bayar dengan QRIS
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
) : (
|
||||
<Dialog open={authModalOpen} onOpenChange={setAuthModalOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="w-full shadow-sm">
|
||||
Login atau Daftar untuk Checkout
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Login atau Daftar</DialogTitle>
|
||||
</DialogHeader>
|
||||
<Tabs defaultValue="login" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="login">Login</TabsTrigger>
|
||||
<TabsTrigger value="register">Daftar</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="login">
|
||||
<form onSubmit={handleLogin} className="space-y-4 mt-4">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="login-email" className="text-sm font-medium">
|
||||
Email
|
||||
</label>
|
||||
<Input
|
||||
id="login-email"
|
||||
type="email"
|
||||
placeholder="nama@email.com"
|
||||
value={authEmail}
|
||||
onChange={(e) => setAuthEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="login-password" className="text-sm font-medium">
|
||||
Password
|
||||
</label>
|
||||
<Input
|
||||
id="login-password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={authPassword}
|
||||
onChange={(e) => setAuthPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" className="w-full" disabled={authLoading}>
|
||||
{authLoading ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
Memproses...
|
||||
</>
|
||||
) : (
|
||||
"Login"
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</TabsContent>
|
||||
<TabsContent value="register">
|
||||
<form onSubmit={handleRegister} className="space-y-4 mt-4">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="register-name" className="text-sm font-medium">
|
||||
Nama Lengkap
|
||||
</label>
|
||||
<Input
|
||||
id="register-name"
|
||||
type="text"
|
||||
placeholder="John Doe"
|
||||
value={authName}
|
||||
onChange={(e) => setAuthName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="register-email" className="text-sm font-medium">
|
||||
Email
|
||||
</label>
|
||||
<Input
|
||||
id="register-email"
|
||||
type="email"
|
||||
placeholder="nama@email.com"
|
||||
value={authEmail}
|
||||
onChange={(e) => setAuthEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="register-password" className="text-sm font-medium">
|
||||
Password (minimal 6 karakter)
|
||||
</label>
|
||||
<Input
|
||||
id="register-password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={authPassword}
|
||||
onChange={(e) => setAuthPassword(e.target.value)}
|
||||
required
|
||||
minLength={6}
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" className="w-full" disabled={authLoading}>
|
||||
{authLoading ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
Memproses...
|
||||
</>
|
||||
) : (
|
||||
"Daftar"
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground text-center">Pembayaran aman dengan standar QRIS dari Bank Indonesia</p>
|
||||
<p className="text-xs text-muted-foreground text-center">Diproses oleh mitra pembayaran terpercaya</p>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -49,6 +49,7 @@ export default function WebinarRecording() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [currentTime, setCurrentTime] = useState(0);
|
||||
const [accentColor, setAccentColor] = useState<string>('');
|
||||
const [hasPurchased, setHasPurchased] = useState(false);
|
||||
const [userReview, setUserReview] = useState<UserReview | null>(null);
|
||||
const [reviewModalOpen, setReviewModalOpen] = useState(false);
|
||||
const playerRef = useRef<VideoPlayerRef>(null);
|
||||
@@ -113,7 +114,10 @@ export default function WebinarRecording() {
|
||||
order.order_items?.some((item: any) => item.product_id === productData.id)
|
||||
);
|
||||
|
||||
if (!hasDirectAccess && !hasPaidOrderAccess) {
|
||||
const hasAccess = hasDirectAccess || hasPaidOrderAccess;
|
||||
setHasPurchased(hasAccess);
|
||||
|
||||
if (!hasAccess) {
|
||||
toast({ title: 'Akses ditolak', description: 'Anda tidak memiliki akses ke webinar ini', variant: 'destructive' });
|
||||
navigate('/dashboard');
|
||||
return;
|
||||
|
||||
Reference in New Issue
Block a user