Changes

src/pages/Checkout.tsx

@@ -1,13 +1,17 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Layout } from '@/components/Layout';
+import { AppLayout } from '@/components/AppLayout';
 import { useCart } from '@/contexts/CartContext';
 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 { toast } from '@/hooks/use-toast';
-import { Trash2 } from 'lucide-react';
+import { formatIDR } from '@/lib/format';
+import { Trash2, CreditCard, Loader2 } from 'lucide-react';
+
+// Pakasir configuration - replace with your actual project slug
+const PAKASIR_PROJECT_SLUG = 'learnhub'; // TODO: Replace with actual Pakasir project slug
 
 export default function Checkout() {
   const { items, removeItem, clearCart, total } = useCart();
@@ -17,84 +21,94 @@ export default function Checkout() {
 
   const handleCheckout = async () => {
     if (!user) {
-      toast({ title: 'Login required', description: 'Please login to complete your purchase' });
+      toast({ title: 'Login diperlukan', description: 'Silakan login untuk melanjutkan pembayaran' });
       navigate('/auth');
       return;
     }
 
     if (items.length === 0) {
-      toast({ title: 'Cart is empty', description: 'Add some products to your cart first', variant: 'destructive' });
+      toast({ title: 'Keranjang kosong', description: 'Tambahkan produk ke keranjang terlebih dahulu', variant: 'destructive' });
       return;
     }
 
     setLoading(true);
 
-    // Create order
-    const { data: order, error: orderError } = await supabase
-      .from('orders')
-      .insert({
-        user_id: user.id,
-        total_amount: total,
-        status: 'pending'
-      })
-      .select()
-      .single();
+    try {
+      // Generate a unique order reference
+      const orderRef = `ORD${Date.now().toString(36).toUpperCase()}${Math.random().toString(36).substring(2, 6).toUpperCase()}`;
 
-    if (orderError || !order) {
-      toast({ title: 'Error', description: 'Failed to create order', variant: 'destructive' });
+      // Create order with pending payment status
+      const { data: order, error: orderError } = await supabase
+        .from('orders')
+        .insert({
+          user_id: user.id,
+          total_amount: total,
+          status: 'pending',
+          payment_provider: 'pakasir',
+          payment_reference: orderRef,
+          payment_status: 'pending'
+        })
+        .select()
+        .single();
+
+      if (orderError || !order) {
+        throw new Error('Gagal membuat order');
+      }
+
+      // Create order items
+      const orderItems = items.map(item => ({
+        order_id: order.id,
+        product_id: item.id,
+        unit_price: item.sale_price ?? item.price,
+        quantity: 1
+      }));
+
+      const { error: itemsError } = await supabase
+        .from('order_items')
+        .insert(orderItems);
+
+      if (itemsError) {
+        throw new Error('Gagal menambahkan item order');
+      }
+
+      // Build Pakasir payment URL
+      const amountInRupiah = Math.round(total);
+      const pakasirUrl = `https://app.pakasir.com/pay/${PAKASIR_PROJECT_SLUG}/${amountInRupiah}?order_id=${order.id}`;
+
+      // Clear cart and redirect to Pakasir
+      clearCart();
+      
+      toast({ 
+        title: 'Mengarahkan ke pembayaran...', 
+        description: 'Anda akan diarahkan ke halaman pembayaran Pakasir' 
+      });
+
+      // Redirect to Pakasir payment page
+      window.location.href = pakasirUrl;
+
+    } catch (error) {
+      console.error('Checkout error:', error);
+      toast({ 
+        title: 'Error', 
+        description: error instanceof Error ? error.message : 'Terjadi kesalahan saat checkout', 
+        variant: 'destructive' 
+      });
+    } finally {
       setLoading(false);
-      return;
     }
-
-    // Create order items
-    const orderItems = items.map(item => ({
-      order_id: order.id,
-      product_id: item.id,
-      unit_price: item.sale_price ?? item.price,
-      quantity: 1
-    }));
-
-    const { error: itemsError } = await supabase
-      .from('order_items')
-      .insert(orderItems);
-
-    if (itemsError) {
-      toast({ title: 'Error', description: 'Failed to add order items', variant: 'destructive' });
-      setLoading(false);
-      return;
-    }
-
-    // For demo: mark as paid and grant access
-    await supabase
-      .from('orders')
-      .update({ status: 'paid' })
-      .eq('id', order.id);
-
-    // Grant access to products
-    const accessRecords = items.map(item => ({
-      user_id: user.id,
-      product_id: item.id
-    }));
-
-    await supabase.from('user_access').insert(accessRecords);
-
-    clearCart();
-    toast({ title: 'Success', description: 'Your order has been placed!' });
-    navigate('/dashboard');
-    setLoading(false);
   };
 
   return (
-    <Layout>
+    <AppLayout>
       <div className="container mx-auto px-4 py-8">
         <h1 className="text-4xl font-bold mb-8">Checkout</h1>
 
         {items.length === 0 ? (
           <Card className="border-2 border-border">
             <CardContent className="py-12 text-center">
-              <p className="text-muted-foreground mb-4">Your cart is empty</p>
+              <p className="text-muted-foreground mb-4">Keranjang belanja Anda kosong</p>
               <Button onClick={() => navigate('/products')} variant="outline" className="border-2">
-                Browse Products
+                Lihat Produk
               </Button>
             </CardContent>
           </Card>
@@ -111,11 +125,11 @@ export default function Checkout() {
                       </div>
                       <div className="flex items-center gap-4">
                         <span className="font-bold">
-                          ${item.sale_price ?? item.price}
+                          {formatIDR(item.sale_price ?? item.price)}
                         </span>
-                        <Button 
-                          variant="ghost" 
-                          size="sm" 
+                        <Button
+                          variant="ghost"
+                          size="sm"
                           onClick={() => removeItem(item.id)}
                         >
                           <Trash2 className="w-4 h-4" />
@@ -130,22 +144,34 @@ export default function Checkout() {
             <div>
               <Card className="border-2 border-border shadow-md sticky top-4">
                 <CardHeader>
-                  <CardTitle>Order Summary</CardTitle>
+                  <CardTitle>Ringkasan Order</CardTitle>
                 </CardHeader>
                 <CardContent className="space-y-4">
                   <div className="flex justify-between text-lg">
                     <span>Total</span>
-                    <span className="font-bold">${total}</span>
+                    <span className="font-bold">{formatIDR(total)}</span>
                   </div>
-                  <Button 
-                    onClick={handleCheckout} 
-                    className="w-full shadow-sm" 
+                  <Button
+                    onClick={handleCheckout}
+                    className="w-full shadow-sm"
                     disabled={loading}
                   >
-                    {loading ? 'Processing...' : user ? 'Complete Purchase' : 'Login to Checkout'}
+                    {loading ? (
+                      <>
+                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                        Memproses...
+                      </>
+                    ) : user ? (
+                      <>
+                        <CreditCard className="w-4 h-4 mr-2" />
+                        Bayar Sekarang
+                      </>
+                    ) : (
+                      'Login untuk Checkout'
+                    )}
                   </Button>
                   <p className="text-xs text-muted-foreground text-center">
-                    This is a demo checkout. No actual payment will be processed.
+                    Pembayaran diproses melalui Pakasir (QRIS, Transfer Bank)
                   </p>
                 </CardContent>
               </Card>
@@ -153,6 +179,6 @@ export default function Checkout() {
           </div>
         )}
       </div>
-    </Layout>
+    </AppLayout>
   );
 }