dwindown/meet-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Code edited in Lovable Code Editor

Browse Source 
Edited UI in Lovable
This commit is contained in:
gpt-engineer-app[bot]
2025-12-19 02:32:08 +00:00
parent 2651035619
commit 4f16122e25
1 changed files with 42 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/pages/Checkout.tsx
View File

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