355 lines
14 KiB
TypeScript
355 lines
14 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { useNavigate, useSearchParams } 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 { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
|
import { Label } from "@/components/ui/label";
|
|
import { toast } from "@/hooks/use-toast";
|
|
import { formatIDR } from "@/lib/format";
|
|
import { Trash2, CreditCard, Loader2, QrCode, Wallet } from "lucide-react";
|
|
import { QRCodeSVG } from "qrcode.react";
|
|
|
|
// Pakasir configuration
|
|
const PAKASIR_PROJECT_SLUG = "dewengoding";
|
|
const SANDBOX_API_KEY = "iP13osgh7lAzWWIPsj7TbW5M3iGEAQMo";
|
|
|
|
// Centralized API key retrieval - uses env var with sandbox fallback
|
|
const getPakasirApiKey = (): string => {
|
|
return import.meta.env.VITE_PAKASIR_API_KEY || SANDBOX_API_KEY;
|
|
};
|
|
|
|
// TODO: Replace with actual Supabase Edge Function URL after creation
|
|
const PAKASIR_CALLBACK_URL = "https://lovable.backoffice.biz.id/functions/v1/pakasir-webhook";
|
|
|
|
type PaymentMethod = "qris" | "paypal";
|
|
type CheckoutStep = "cart" | "payment" | "waiting";
|
|
|
|
interface PaymentData {
|
|
qr_string?: string;
|
|
payment_url?: string;
|
|
expired_at?: string;
|
|
order_id?: string;
|
|
}
|
|
|
|
export default function Checkout() {
|
|
const { items, removeItem, clearCart, total } = useCart();
|
|
const { user } = useAuth();
|
|
const navigate = useNavigate();
|
|
const [searchParams] = useSearchParams();
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
const [step, setStep] = useState<CheckoutStep>("cart");
|
|
const [paymentMethod, setPaymentMethod] = useState<PaymentMethod>("qris");
|
|
const [paymentData, setPaymentData] = useState<PaymentData | null>(null);
|
|
const [orderId, setOrderId] = useState<string | null>(null);
|
|
const [checkingStatus, setCheckingStatus] = useState(false);
|
|
|
|
// Check for returning from PayPal
|
|
useEffect(() => {
|
|
const returnedOrderId = searchParams.get("order_id");
|
|
if (returnedOrderId) {
|
|
setOrderId(returnedOrderId);
|
|
checkPaymentStatus(returnedOrderId);
|
|
}
|
|
}, [searchParams]);
|
|
|
|
const checkPaymentStatus = async (oid: string) => {
|
|
setCheckingStatus(true);
|
|
const { data: order } = await supabase.from("orders").select("payment_status").eq("id", oid).single();
|
|
|
|
if (order?.payment_status === "paid") {
|
|
toast({ title: "Pembayaran berhasil!", description: "Akses produk sudah aktif" });
|
|
navigate("/access");
|
|
} else {
|
|
toast({ title: "Pembayaran pending", description: "Menunggu konfirmasi pembayaran" });
|
|
}
|
|
setCheckingStatus(false);
|
|
};
|
|
|
|
const handleCheckout = async () => {
|
|
if (!user) {
|
|
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",
|
|
});
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
|
|
try {
|
|
// Generate a unique order reference
|
|
const orderRef = `ORD${Date.now().toString(36).toUpperCase()}${Math.random().toString(36).substring(2, 6).toUpperCase()}`;
|
|
const amountInRupiah = Math.round(total);
|
|
|
|
// Create order with pending payment status
|
|
const { data: order, error: orderError } = await supabase
|
|
.from("orders")
|
|
.insert({
|
|
user_id: user.id,
|
|
total_amount: amountInRupiah,
|
|
status: "pending",
|
|
payment_provider: "pakasir",
|
|
payment_reference: orderRef,
|
|
payment_status: "pending",
|
|
payment_method: paymentMethod,
|
|
})
|
|
.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");
|
|
|
|
setOrderId(order.id);
|
|
|
|
// Build description from product titles
|
|
const productTitles = items.map(item => item.title).join(", ");
|
|
|
|
if (paymentMethod === "qris") {
|
|
// Call Pakasir API for QRIS
|
|
try {
|
|
const response = await fetch(`https://app.pakasir.com/api/transactioncreate/qris`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
project: PAKASIR_PROJECT_SLUG,
|
|
order_id: order.id,
|
|
amount: amountInRupiah,
|
|
api_key: getPakasirApiKey(),
|
|
description: productTitles,
|
|
callback_url: PAKASIR_CALLBACK_URL,
|
|
}),
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.qr_string || result.qr) {
|
|
setPaymentData({
|
|
qr_string: result.qr_string || result.qr,
|
|
expired_at: result.expired_at,
|
|
order_id: order.id,
|
|
});
|
|
setStep("waiting");
|
|
clearCart();
|
|
} else {
|
|
// Fallback to redirect if API doesn't return QR
|
|
const pakasirUrl = `https://app.pakasir.com/pay/${PAKASIR_PROJECT_SLUG}/${amountInRupiah}?order_id=${order.id}`;
|
|
clearCart();
|
|
window.location.href = pakasirUrl;
|
|
}
|
|
} catch {
|
|
// Fallback to redirect
|
|
const pakasirUrl = `https://app.pakasir.com/pay/${PAKASIR_PROJECT_SLUG}/${amountInRupiah}?order_id=${order.id}`;
|
|
clearCart();
|
|
window.location.href = pakasirUrl;
|
|
}
|
|
} else {
|
|
// PayPal - redirect to Pakasir PayPal URL
|
|
clearCart();
|
|
const paypalUrl = `https://app.pakasir.com/paypal/${PAKASIR_PROJECT_SLUG}/${amountInRupiah}?order_id=${order.id}`;
|
|
window.location.href = paypalUrl;
|
|
}
|
|
} 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);
|
|
}
|
|
};
|
|
|
|
const refreshPaymentStatus = async () => {
|
|
if (!orderId) return;
|
|
setCheckingStatus(true);
|
|
|
|
const { data: order } = await supabase.from("orders").select("payment_status").eq("id", orderId).single();
|
|
|
|
if (order?.payment_status === "paid") {
|
|
toast({ title: "Pembayaran berhasil!", description: "Akses produk sudah aktif" });
|
|
navigate("/access");
|
|
} else {
|
|
toast({ title: "Belum ada pembayaran", description: "Silakan selesaikan pembayaran" });
|
|
}
|
|
setCheckingStatus(false);
|
|
};
|
|
|
|
// Waiting for QRIS payment
|
|
if (step === "waiting" && paymentData) {
|
|
return (
|
|
<AppLayout>
|
|
<div className="container mx-auto px-4 py-8 max-w-md">
|
|
<Card className="border-2 border-border">
|
|
<CardHeader className="text-center">
|
|
<CardTitle>Scan QR Code untuk Bayar</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col items-center space-y-6">
|
|
<div className="bg-white p-4 rounded-lg">
|
|
<QRCodeSVG value={paymentData.qr_string || ""} size={200} />
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-2xl font-bold">{formatIDR(total)}</p>
|
|
{paymentData.expired_at && (
|
|
<p className="text-sm text-muted-foreground mt-2">
|
|
Berlaku hingga: {new Date(paymentData.expired_at).toLocaleString("id-ID")}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="w-full space-y-2">
|
|
<Button
|
|
onClick={refreshPaymentStatus}
|
|
variant="outline"
|
|
className="w-full border-2"
|
|
disabled={checkingStatus}
|
|
>
|
|
{checkingStatus ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : null}
|
|
Cek Status Pembayaran
|
|
</Button>
|
|
<Button onClick={() => navigate("/dashboard")} variant="ghost" className="w-full">
|
|
Kembali ke Dashboard
|
|
</Button>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground text-center">
|
|
Pembayaran diproses melalui Pakasir dan akan dikonfirmasi otomatis setelah berhasil.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<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">Keranjang belanja Anda kosong</p>
|
|
<Button onClick={() => navigate("/products")} variant="outline" className="border-2">
|
|
Lihat Produk
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<div className="lg:col-span-2 space-y-4">
|
|
{items.map((item) => (
|
|
<Card key={item.id} className="border-2 border-border">
|
|
<CardContent className="py-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h3 className="font-semibold">{item.title}</h3>
|
|
<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)}>
|
|
<Trash2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
|
|
<Card className="border-2 border-border">
|
|
<CardHeader>
|
|
<CardTitle>Metode Pembayaran</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<RadioGroup
|
|
value={paymentMethod}
|
|
onValueChange={(v) => setPaymentMethod(v as PaymentMethod)}
|
|
className="space-y-3"
|
|
>
|
|
<div className="flex items-center space-x-3 p-3 border-2 border-border rounded-none hover:bg-muted cursor-pointer">
|
|
<RadioGroupItem value="qris" id="qris" />
|
|
<Label htmlFor="qris" className="flex items-center gap-2 cursor-pointer flex-1">
|
|
<QrCode className="w-5 h-5" />
|
|
<div>
|
|
<p className="font-medium">QRIS</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Scan QR dengan aplikasi e-wallet atau mobile banking
|
|
</p>
|
|
</div>
|
|
</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-3 p-3 border-2 border-border rounded-none hover:bg-muted cursor-pointer">
|
|
<RadioGroupItem value="paypal" id="paypal" />
|
|
<Label htmlFor="paypal" className="flex items-center gap-2 cursor-pointer flex-1">
|
|
<Wallet className="w-5 h-5" />
|
|
<div>
|
|
<p className="font-medium">PayPal</p>
|
|
<p className="text-sm text-muted-foreground">Bayar dengan akun PayPal Anda</p>
|
|
</div>
|
|
</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div>
|
|
<Card className="border-2 border-border shadow-md sticky top-4">
|
|
<CardHeader>
|
|
<CardTitle>Ringkasan Order</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex justify-between text-lg">
|
|
<span>Total</span>
|
|
<span className="font-bold">{formatIDR(total)}</span>
|
|
</div>
|
|
<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 {paymentMethod === "qris" ? "QRIS" : "PayPal"}
|
|
</>
|
|
) : (
|
|
"Login untuk Checkout"
|
|
)}
|
|
</Button>
|
|
<p className="text-xs text-muted-foreground text-center">Pembayaran diproses melalui Pakasir</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
}
|