"use client"; import { useCallback, useEffect, useState } from "react"; import { Wallet, IndianRupee, BadgeCheck, Download, Send, Gift, Copy } from "lucide-react"; import { api, auth } from "@/lib/api"; import { PageHeader, StatCard, Card, Button, Input, FormField, Badge, Skeleton, EmptyState } from "@/components/ui"; import { cn } from "@/components/cn"; import { useToast } from "@/components/toast"; import { useConfirm } from "@/components/modal"; type Payout = { id: string; amount: number; status: string; method: string; reference: string | null; date: string }; type Data = { balance: number; minPayout: number; payoutMethods: string[]; paymentMethod: string | null; paymentDetails: { info?: string } | null; stats: { earnings: number }; orders: { orderId: string; date: string; total: number; commission: number; status: string }[]; payouts: Payout[]; }; const inr = (n: number) => "₹" + Math.round(n).toLocaleString("en-IN"); export default function PaymentsPage() { const toast = useToast(); const confirm = useConfirm(); const [d, setD] = useState(null); const [method, setMethod] = useState<"STORE_CREDIT" | "PAYPAL">("STORE_CREDIT"); const [paypal, setPaypal] = useState(""); const [savingPay, setSavingPay] = useState(false); const load = useCallback(async () => { const id = auth.get()?.id; if (!id) return; const data: Data = await api.get(`/affiliates/${id}`); setD(data); const supported = data.payoutMethods || []; const current = data.paymentMethod && supported.includes(data.paymentMethod) ? data.paymentMethod : supported.includes("STORE_CREDIT") ? "STORE_CREDIT" : "PAYPAL"; setMethod(current === "PAYPAL" ? "PAYPAL" : "STORE_CREDIT"); setPaypal(data.paymentDetails?.info ?? ""); }, []); useEffect(() => { load(); }, [load]); const requestPayout = async () => { const id = auth.get()?.id; if (!id || !d) return; if (!(await confirm({ title: "Request payout?", message: `Request a payout of ${inr(d.balance)}. The brand will process it via your chosen method.`, confirmText: "Request" }))) return; try { const r = await api.post(`/affiliates/${id}/payout-request`); toast.success(`Payout of ${inr(r.requested)} requested.`); load(); } catch (e) { toast.error((e as Error).message); } }; const savePayment = async () => { const id = auth.get()?.id; if (!id) return; if (method === "PAYPAL" && !paypal.trim()) { toast.error("Enter your PayPal email."); return; } setSavingPay(true); try { await api.post(`/affiliates/${id}/payment`, { method, details: method === "PAYPAL" ? { info: paypal } : {} }); toast.success("Payment method saved."); load(); } catch (e) { toast.error((e as Error).message); } finally { setSavingPay(false); } }; const downloadInvoice = async (payoutId: string) => { try { const inv = await api.get(`/admin/payouts/${payoutId}/invoice`); const html = `${inv.invoiceNumber}

${inv.program}

Payout invoice · ${inv.invoiceNumber} · ${inv.date}

Affiliate${inv.affiliate} (${inv.email})
Method${inv.method}${inv.reference ? " · " + inv.reference : ""}
Status${inv.status}
Amount paid₹${Number(inv.amount).toLocaleString("en-IN")}

Generated by Partner Nook · ${inv.shop}

`; const blob = new Blob([html], { type: "text/html" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `${inv.invoiceNumber}.html`; a.click(); URL.revokeObjectURL(url); } catch (e) { toast.error((e as Error).message); } }; const downloadCsv = () => { if (!d) return; const head = "Order,Date,Order value,Commission,Status"; const body = d.orders.map((o) => `#${o.orderId.slice(-6)},${o.date},${o.total},${o.commission},${o.status}`).join("\n"); const blob = new Blob([head + "\n" + body], { type: "text/csv" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "my-earnings.csv"; a.click(); URL.revokeObjectURL(url); }; if (!d) return
; const eligible = d.balance >= d.minPayout; const Option = ({ value, title, desc, icon }: { value: "STORE_CREDIT" | "PAYPAL"; title: string; desc: string; icon: React.ReactNode }) => ( ); return (
} onClick={downloadCsv}>Download earnings (CSV)} />
} accent="#d97706" /> } accent="#1A3C6E" /> } accent="#16a34a" />

{eligible ? `You can request a payout of ${inr(d.balance)}.` : `You need ${inr(d.minPayout)} to request a payout. Current balance: ${inr(d.balance)}.`}

{!d.payoutMethods.includes("STORE_CREDIT") && !d.payoutMethods.includes("PAYPAL") ? (

The brand pays affiliates manually — no setup needed here.

) : (
{d.payoutMethods.includes("STORE_CREDIT") &&
)} {method === "PAYPAL" && d.payoutMethods.includes("PAYPAL") && (
setPaypal(e.target.value)} placeholder="you@paypal.com" />
)}
{d.payouts.length === 0 ? ( } title="No payouts yet" description="Your payouts — including store-credit coupons — will appear here." /> ) : (
    {d.payouts.map((p) => (
  • {inr(p.amount)} {p.date} {p.method === "STORE_CREDIT" && p.reference && (
    {p.reference} redeem at checkout
    )}
    {p.method === "STORE_CREDIT" ? "Store credit" : p.method === "PAYPAL" ? "PayPal" : "Manual"} {p.status} {p.status === "PAID" && ( )}
    • ))}
)}
); }