Changes

2025-12-19 03:26:31 +00:00
parent 4f16122e25
commit 986c7c6992
14 changed files with 1953 additions and 40 deletions
--- a/src/pages/Checkout.tsx
+++ b/src/pages/Checkout.tsx
@@ -1,23 +1,70 @@
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
+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 } from "lucide-react";
+import { Trash2, CreditCard, Loader2, QrCode, Wallet } from "lucide-react";
+import { QRCodeSVG } from "qrcode.react";

-// Pakasir configuration - replace with your actual project slug
-const PAKASIR_PROJECT_SLUG = "dewengoding"; // TODO: Replace with actual Pakasir project slug
+// Pakasir configuration
+const PAKASIR_PROJECT_SLUG = "dewengoding";
+const PAKASIR_API_KEY = "your-pakasir-api-key"; // TODO: Move to secrets
+
+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) {
@@ -27,11 +74,7 @@ export default function Checkout() {
    }

    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;
    }

@@ -40,17 +83,19 @@ export default function Checkout() {
    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: total,
+          total_amount: amountInRupiah,
          status: "pending",
          payment_provider: "pakasir",
          payment_reference: orderRef,
          payment_status: "pending",
+          payment_method: paymentMethod,
        })
        .select()
        .single();
@@ -68,25 +113,52 @@ export default function Checkout() {
      }));

      const { error: itemsError } = await supabase.from("order_items").insert(orderItems);
+      if (itemsError) throw new Error("Gagal menambahkan item order");

-      if (itemsError) {
-        throw new Error("Gagal menambahkan item order");
+      setOrderId(order.id);
+
+      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: PAKASIR_API_KEY,
+            }),
+          });
+
+          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;
      }
-
-      // 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({
@@ -99,6 +171,65 @@ export default function Checkout() {
    }
  };

+  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 akan otomatis terkonfirmasi setelah Anda scan dan bayar QR code di atas
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      </AppLayout>
+    );
+  }
+
  return (
    <AppLayout>
      <div className="container mx-auto px-4 py-8">
@@ -134,6 +265,36 @@ export default function Checkout() {
                  </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>
@@ -155,14 +316,14 @@ export default function Checkout() {
                    ) : user ? (
                      <>
                        <CreditCard className="w-4 h-4 mr-2" />
-                        Bayar Sekarang
+                        Bayar dengan {paymentMethod === "qris" ? "QRIS" : "PayPal"}
                      </>
                    ) : (
                      "Login untuk Checkout"
                    )}
                  </Button>
                  <p className="text-xs text-muted-foreground text-center">
-                    Pembayaran diproses melalui Pakasir (QRIS, Transfer Bank)
+                    Pembayaran diproses melalui Pakasir
                  </p>
                </CardContent>
              </Card>