import { Head, Link, useForm, router } from '@inertiajs/react'; import { AlertCircle, BookOpen, GraduationCap, Upload, Copy, Check, ShieldCheck, CreditCard, Lock, Tag, X } from 'lucide-react'; import { useRef, useState } from 'react'; import InputError from '@/components/input-error'; import AppLayout from '@/layouts/app-layout'; type CourseItem = { id: number; title: string; slug: string; thumbnail: string | null; price: number; price_type: 'free' | 'paid'; level: string; lessons_count: number; instructor: { id: number; name: string }; }; type CheckoutItem = { id: number; course: CourseItem; }; type BankInfo = { bank_name: string | null; bank_account: string | null; bank_holder: string | null; }; type AppliedCoupon = { code: string; discount: number; type: 'percentage' | 'fixed'; value: number; }; type Props = { items: CheckoutItem[]; subtotal: number; discountAmount: number; total: number; appliedCoupon: AppliedCoupon | null; hasPaidItems: boolean; bankInfo: BankInfo | null; }; const BRAND = '#118AB2'; function formatPrice(price: number) { return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(price); } const levelLabels: Record = { beginner: 'Pemula', intermediate: 'Menengah', advanced: 'Mahir', }; export default function CheckoutIndex({ items, subtotal, discountAmount, total, appliedCoupon, hasPaidItems, bankInfo }: Props) { const fileRef = useRef(null); const [copiedAccount, setCopiedAccount] = useState(false); const [copiedAmount, setCopiedAmount] = useState(false); const [couponCode, setCouponCode] = useState(''); const [couponLoading, setCouponLoading] = useState(false); const { data, setData, post, processing, errors } = useForm<{ proof: File | null; selected_items: string }>({ proof: null, selected_items: items.map((i) => i.id).join(','), }); function submit(e: React.FormEvent) { e.preventDefault(); post('/checkout', { forceFormData: true }); } function copyToClipboard(text: string, type: 'account' | 'amount') { navigator.clipboard.writeText(text); if (type === 'account') { setCopiedAccount(true); setTimeout(() => setCopiedAccount(false), 2000); } else { setCopiedAmount(true); setTimeout(() => setCopiedAmount(false), 2000); } } function applyCoupon(e: React.FormEvent) { e.preventDefault(); if (!couponCode.trim()) { return; } setCouponLoading(true); router.post('/checkout/coupon', { code: couponCode }, { onFinish: () => setCouponLoading(false), }); } function removeCoupon() { router.delete('/checkout/coupon'); } return ( <>
{/* Back Link & Title */}
โ† Kembali ke keranjang

Checkout

Selesaikan pendaftaran kelas Anda dengan aman.

{/* Progress Steps */}
1. Keranjang / 2. Checkout / 3. Selesai
{/* Left Column */}
{/* Course list */}

Rincian Kelas

{items.map((item) => (
{item.course.thumbnail ? ( {item.course.title} ) : (
)}

{item.course.title}

{item.course.instructor.name} ยท {levelLabels[item.course.level] ?? item.course.level}

{item.course.lessons_count} Lesson
{item.course.price_type === 'free' ? 'Gratis' : formatPrice(item.course.price)}
))}
{/* Coupon Section */} {hasPaidItems && (

Kode Kupon

Punya kode diskon? Masukkan di sini.

{appliedCoupon ? (

{appliedCoupon.code}

Hemat {appliedCoupon.type === 'percentage' ? `${appliedCoupon.value}%` : formatPrice(appliedCoupon.value)} {' โ€” '}Diskon {formatPrice(discountAmount)}

) : (
setCouponCode(e.target.value.toUpperCase())} placeholder="Masukkan kode kupon" className="flex-1 rounded-xl border border-gray-200 px-4 py-2.5 font-mono text-sm uppercase focus:border-[#118AB2] focus:outline-none focus:ring-1 focus:ring-[#118AB2]" />
)}
)} {/* Payment Instruction Section */} {hasPaidItems && bankInfo && (

Metode Pembayaran

Silakan lakukan transfer manual ke rekening di bawah ini.

{/* Bank Transfer Card */}
Nama Bank

{bankInfo.bank_name}

Atas Nama

{bankInfo.bank_holder}

Nomor Rekening

{bankInfo.bank_account}

Jumlah Transfer

{formatPrice(total)}

{discountAmount > 0 && (

Sudah termasuk diskon {formatPrice(discountAmount)}

)}
{/* Upload Proof */}
setData('proof', e.target.files?.[0] ?? null)} />
{/* Info Alert */}

Verifikasi Pembayaran

Akses kelas akan diaktifkan secara otomatis setelah tim admin kami memverifikasi bukti transfer yang Anda unggah. Proses ini biasanya memakan waktu kurang dari 1 jam.

)}
{/* Right Column (Sidebar Summary) */}

Ringkasan Pesanan

Total Item {items.length} Kelas
{items.map((item) => (
{item.course.title} {item.course.price_type === 'free' ? 'Gratis' : formatPrice(item.course.price)}
))}
{discountAmount > 0 && (
Subtotal {formatPrice(subtotal)}
{appliedCoupon?.code} -{formatPrice(discountAmount)}
)}
0 ? 'border-t border-gray-50 pt-3' : 'border-t border-gray-50 pt-4 mt-1'} flex justify-between items-baseline`}> Total Pembayaran {total > 0 ? formatPrice(total) : 'Gratis'}
); } CheckoutIndex.layout = (page: React.ReactNode) => {page};