Code edited in Lovable Code Editor

Edited UI in Lovable

src/pages/Checkout.tsx

@@ -1,17 +1,17 @@
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-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 { formatIDR } from '@/lib/format';
-import { Trash2, CreditCard, Loader2 } from 'lucide-react';
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+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 { 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
+const PAKASIR_PROJECT_SLUG = "dewengoding"; // TODO: Replace with actual Pakasir project slug
 
 export default function Checkout() {
   const { items, removeItem, clearCart, total } = useCart();
@@ -21,13 +21,17 @@ export default function Checkout() {
 
   const handleCheckout = async () => {
     if (!user) {
-      toast({ title: 'Login diperlukan', description: 'Silakan login untuk melanjutkan pembayaran' });
-      navigate('/auth');
+      toast({ title: "Login diperlukan", description: "Silakan login untuk melanjutkan pembayaran" });
+      navigate("/auth");
       return;
     }
 
     if (items.length === 0) {
-      toast({ title: 'Keranjang kosong', description: 'Tambahkan produk ke keranjang terlebih dahulu', variant: 'destructive' });
+      toast({
+        title: "Keranjang kosong",
+        description: "Tambahkan produk ke keranjang terlebih dahulu",
+        variant: "destructive",
+      });
       return;
     }
 
@@ -39,36 +43,34 @@ export default function Checkout() {
 
       // Create order with pending payment status
       const { data: order, error: orderError } = await supabase
-        .from('orders')
+        .from("orders")
         .insert({
           user_id: user.id,
           total_amount: total,
-          status: 'pending',
-          payment_provider: 'pakasir',
+          status: "pending",
+          payment_provider: "pakasir",
           payment_reference: orderRef,
-          payment_status: 'pending'
+          payment_status: "pending",
         })
         .select()
         .single();
 
       if (orderError || !order) {
-        throw new Error('Gagal membuat order');
+        throw new Error("Gagal membuat order");
       }
 
       // Create order items
-      const orderItems = items.map(item => ({
+      const orderItems = items.map((item) => ({
         order_id: order.id,
         product_id: item.id,
         unit_price: item.sale_price ?? item.price,
-        quantity: 1
+        quantity: 1,
       }));
 
-      const { error: itemsError } = await supabase
-        .from('order_items')
-        .insert(orderItems);
+      const { error: itemsError } = await supabase.from("order_items").insert(orderItems);
 
       if (itemsError) {
-        throw new Error('Gagal menambahkan item order');
+        throw new Error("Gagal menambahkan item order");
       }
 
       // Build Pakasir payment URL
@@ -77,21 +79,20 @@ export default function Checkout() {
 
       // Clear cart and redirect to Pakasir
       clearCart();
-      
-      toast({ 
-        title: 'Mengarahkan ke pembayaran...', 
-        description: 'Anda akan diarahkan ke halaman pembayaran Pakasir' 
+
+      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' 
+      console.error("Checkout error:", error);
+      toast({
+        title: "Error",
+        description: error instanceof Error ? error.message : "Terjadi kesalahan saat checkout",
+        variant: "destructive",
       });
     } finally {
       setLoading(false);
@@ -107,7 +108,7 @@ export default function Checkout() {
           <Card className="border-2 border-border">
             <CardContent className="py-12 text-center">
               <p className="text-muted-foreground mb-4">Keranjang belanja Anda kosong</p>
-              <Button onClick={() => navigate('/products')} variant="outline" className="border-2">
+              <Button onClick={() => navigate("/products")} variant="outline" className="border-2">
                 Lihat Produk
               </Button>
             </CardContent>
@@ -124,14 +125,8 @@ export default function Checkout() {
                         <p className="text-sm text-muted-foreground capitalize">{item.type}</p>
                       </div>
                       <div className="flex items-center gap-4">
-                        <span className="font-bold">
-                          {formatIDR(item.sale_price ?? item.price)}
-                        </span>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => removeItem(item.id)}
-                        >
+                        <span className="font-bold">{formatIDR(item.sale_price ?? item.price)}</span>
+                        <Button variant="ghost" size="sm" onClick={() => removeItem(item.id)}>
                           <Trash2 className="w-4 h-4" />
                         </Button>
                       </div>
@@ -151,11 +146,7 @@ export default function Checkout() {
                     <span>Total</span>
                     <span className="font-bold">{formatIDR(total)}</span>
                   </div>
-                  <Button
-                    onClick={handleCheckout}
-                    className="w-full shadow-sm"
-                    disabled={loading}
-                  >
+                  <Button onClick={handleCheckout} className="w-full shadow-sm" disabled={loading}>
                     {loading ? (
                       <>
                         <Loader2 className="w-4 h-4 mr-2 animate-spin" />
@@ -167,7 +158,7 @@ export default function Checkout() {
                         Bayar Sekarang
                       </>
                     ) : (
-                      'Login untuk Checkout'
+                      "Login untuk Checkout"
                     )}
                   </Button>
                   <p className="text-xs text-muted-foreground text-center">