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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user