Simplify self-service payments to full-amount checkout, add manual-page payment tab
Self-service "pay now" flows (registration success + user dashboard) now go straight to a Yoco checkout for the full outstanding balance instead of prompting for a partial amount; that page has been removed. Partial-amount payment links remain supervisor/admin-only via the Payments dashboard. Also adds a "Record Payment" tab to the supervisor manual registration page, pre-filled with the most recently created registration, so staff can capture a payment right after registering someone without leaving the page.
This commit is contained in:
+1
-2
@@ -164,7 +164,6 @@ frontend/src/
|
||||
|-------|-------------|
|
||||
| `/dashboard/user` | My registrations + tickets overview |
|
||||
| `/dashboard/user/profile` | Edit profile, notification preferences |
|
||||
| `/dashboard/user/pay` | Pay outstanding balance |
|
||||
| `/dashboard/user/donate` | Make a donation |
|
||||
| `/dashboard/user/forms` | Complete registration forms |
|
||||
| `/dashboard/user/reset-password` | Change password (authenticated) |
|
||||
@@ -255,7 +254,7 @@ A "Select Email/both" or "Select WhatsApp/both" quick-select button is available
|
||||
5. Backend reconciles payment, updates registration status, generates and emails tickets
|
||||
6. User sees `/payment/success` and tickets appear in their dashboard
|
||||
|
||||
Outstanding balances can be paid at any time from `/dashboard/user/pay`.
|
||||
Outstanding balances can be paid at any time from the "Make payment" button on `/dashboard/user` — this always creates a checkout for the full remaining balance. Partial-amount payment links can only be generated by a supervisor/admin from `/dashboard/supervisor/payments`.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -39,6 +39,18 @@ function fmtPrice(n: number) {
|
||||
return n === 0 ? "Free" : `R ${n.toFixed(2)}`;
|
||||
}
|
||||
|
||||
// Effective unit price for an existing registration option (as returned by /api/registrations).
|
||||
// Prefers priceSnapshot (authoritative price captured at registration time) and only falls
|
||||
// back to a live early-bird calculation for legacy rows without a snapshot.
|
||||
function optionUnitPrice(opt: any): number {
|
||||
if (opt.priceSnapshot !== null && opt.priceSnapshot !== undefined) {
|
||||
return Number(opt.priceSnapshot);
|
||||
}
|
||||
const eo = opt.eventOption;
|
||||
if (opt.variant) return effectiveVariantUnit(eo, opt.variant);
|
||||
return effectiveOptionUnit(eo);
|
||||
}
|
||||
|
||||
// ─── Component ───────────────────────────────────────────────────────────────
|
||||
|
||||
export default function ManualRegistrationPage() {
|
||||
@@ -76,6 +88,23 @@ export default function ManualRegistrationPage() {
|
||||
const [message, setMessage] = useDismissingState<string | null>(null);
|
||||
const [error, setError] = useDismissingState<string | null>(null);
|
||||
|
||||
// ── Tabs ──────────────────────────────────────────────────────────────────
|
||||
const [tab, setTab] = useState<"register" | "payment">("register");
|
||||
|
||||
// ── Record Payment tab state ─────────────────────────────────────────────
|
||||
const [allRegistrations, setAllRegistrations] = useState<any[]>([]);
|
||||
const [payUserId, setPayUserId] = useState<string>("");
|
||||
const [payUserQuery, setPayUserQuery] = useState("");
|
||||
const [payDropdownOpen, setPayDropdownOpen] = useState(false);
|
||||
const paySearchRef = useRef<HTMLDivElement>(null);
|
||||
const [payRegistrationId, setPayRegistrationId] = useState<string>("");
|
||||
const [payAmount, setPayAmount] = useState<string>("");
|
||||
const [payMethod, setPayMethod] = useState<string>("cash");
|
||||
const [payPaidAtLocal, setPayPaidAtLocal] = useState<string>("");
|
||||
const [paySubmitting, setPaySubmitting] = useState(false);
|
||||
const [payMessage, setPayMessage] = useDismissingState<string | null>(null);
|
||||
const [payError, setPayError] = useDismissingState<string | null>(null);
|
||||
|
||||
// Load all users for client-side fuzzy matching
|
||||
useEffect(() => {
|
||||
if (!token) return;
|
||||
@@ -84,6 +113,97 @@ export default function ManualRegistrationPage() {
|
||||
.catch(() => {});
|
||||
}, [token]);
|
||||
|
||||
// Load all registrations for the Record Payment tab (embeds payments, so outstanding
|
||||
// balances can be computed without a per-registration fetch loop).
|
||||
useEffect(() => {
|
||||
if (!token) return;
|
||||
apiFetch<any[]>("/api/registrations", { authToken: token })
|
||||
.then(regs => setAllRegistrations(Array.isArray(regs) ? regs : []))
|
||||
.catch(() => {});
|
||||
}, [token]);
|
||||
|
||||
const regOutstanding = useMemo(() => {
|
||||
const map: Record<string, { totalDue: number; totalPaid: number; outstanding: number }> = {};
|
||||
for (const r of allRegistrations) {
|
||||
const totalDue = (r.registrationOptions || []).reduce((sum: number, opt: any) => sum + optionUnitPrice(opt) * (opt.quantity || 0), 0);
|
||||
const totalPaid = (r.payments || []).reduce((s: number, p: any) => s + (p.amount || 0), 0);
|
||||
map[r.id] = { totalDue, totalPaid, outstanding: Math.max(0, totalDue - totalPaid) };
|
||||
}
|
||||
return map;
|
||||
}, [allRegistrations]);
|
||||
|
||||
const payMatchedUsers = useMemo(() => {
|
||||
if (payUserQuery.trim().length < 2) return [];
|
||||
return allUsers
|
||||
.map(u => ({ u, score: scoreUser(u, payUserQuery) }))
|
||||
.filter(x => x.score >= 0.45)
|
||||
.sort((a, b) => b.score - a.score)
|
||||
.slice(0, 6)
|
||||
.map(x => x.u);
|
||||
}, [payUserQuery, allUsers]);
|
||||
|
||||
const selectPayUser = (u: any) => {
|
||||
setPayUserId(u.id);
|
||||
setPayUserQuery(u.name || "");
|
||||
setPayDropdownOpen(false);
|
||||
setPayRegistrationId("");
|
||||
};
|
||||
|
||||
// Close payment-tab user dropdown on outside click
|
||||
useEffect(() => {
|
||||
const handler = (e: MouseEvent) => {
|
||||
if (paySearchRef.current && !paySearchRef.current.contains(e.target as Node)) {
|
||||
setPayDropdownOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", handler);
|
||||
return () => document.removeEventListener("mousedown", handler);
|
||||
}, []);
|
||||
|
||||
const regsForPayUser = useMemo(() => {
|
||||
if (!payUserId) return [];
|
||||
return allRegistrations
|
||||
.filter((r: any) => String(r.userId || r.user?.id) === String(payUserId))
|
||||
.filter((r: any) => (regOutstanding[r.id]?.outstanding ?? 0) > 0.000001)
|
||||
.sort((a: any, b: any) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
|
||||
}, [allRegistrations, payUserId, regOutstanding]);
|
||||
|
||||
const createManualPayment = async () => {
|
||||
if (!token) return;
|
||||
setPayError(null);
|
||||
setPayMessage(null);
|
||||
const amt = parseFloat(payAmount || "0");
|
||||
if (!amt || amt <= 0) { setPayError("Enter a valid amount"); return; }
|
||||
if (!payRegistrationId) { setPayError("Please select a registration"); return; }
|
||||
try {
|
||||
setPaySubmitting(true);
|
||||
await apiFetch<any>("/api/payments", {
|
||||
method: "POST",
|
||||
authToken: token,
|
||||
body: {
|
||||
amount: amt,
|
||||
method: payMethod,
|
||||
userId: payUserId || undefined,
|
||||
registrationId: payRegistrationId,
|
||||
isDonation: false,
|
||||
paidAt: payPaidAtLocal ? new Date(payPaidAtLocal).toISOString() : undefined,
|
||||
}
|
||||
});
|
||||
setPayMessage(`Payment recorded (R ${amt.toFixed(2)}).`);
|
||||
setPayAmount("");
|
||||
setPayPaidAtLocal("");
|
||||
// Refresh registrations so the displayed outstanding balance updates
|
||||
try {
|
||||
const regs = await apiFetch<any[]>("/api/registrations", { authToken: token });
|
||||
setAllRegistrations(Array.isArray(regs) ? regs : []);
|
||||
} catch {}
|
||||
} catch (e: any) {
|
||||
setPayError(e?.message || "Failed to record payment");
|
||||
} finally {
|
||||
setPaySubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Fuzzy match results (top 6, score threshold 0.45)
|
||||
const matchedUsers = useMemo(() => {
|
||||
if (userQuery.trim().length < 2) return [];
|
||||
@@ -193,6 +313,14 @@ export default function ManualRegistrationPage() {
|
||||
});
|
||||
setMessage("Manual registration created successfully.");
|
||||
|
||||
// Pre-load the Record Payment tab with this registration so it's ready to go the
|
||||
// moment a supervisor clicks over — the tab itself is never switched to automatically.
|
||||
setAllRegistrations(prev => [res, ...prev.filter((r: any) => r.id !== res.id)]);
|
||||
setPayUserId(res.userId || res.user?.id || "");
|
||||
setPayUserQuery(res.user?.name || guest.name || "");
|
||||
setPayRegistrationId(res.id);
|
||||
setPayDropdownOpen(false);
|
||||
|
||||
// Reset guest/ticket fields so the next registration starts from a clean slate
|
||||
setGuest({ name: "", email: "", phoneNumber: "" });
|
||||
setRegisterAsGuest(false);
|
||||
@@ -220,6 +348,19 @@ export default function ManualRegistrationPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-4 flex items-center gap-2">
|
||||
<label className={`px-3 py-1.5 text-sm rounded border ${tab === 'register' ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-800 border-gray-200'} cursor-pointer`}>
|
||||
<input type="radio" name="tab" value="register" className="hidden" checked={tab==='register'} onChange={() => setTab('register')} />
|
||||
Register
|
||||
</label>
|
||||
<label className={`px-3 py-1.5 text-sm rounded border ${tab === 'payment' ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-800 border-gray-200'} cursor-pointer`}>
|
||||
<input type="radio" name="tab" value="payment" className="hidden" checked={tab==='payment'} onChange={() => setTab('payment')} />
|
||||
Record Payment
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{tab === 'register' && (
|
||||
<>
|
||||
{message && <div className="p-3 mb-3 border rounded bg-emerald-50 text-emerald-800 text-sm">{message}</div>}
|
||||
{error && <div className="p-3 mb-3 border rounded bg-red-50 text-red-700 text-sm">{error}</div>}
|
||||
|
||||
@@ -447,6 +588,92 @@ export default function ManualRegistrationPage() {
|
||||
<div className="text-sm">Total due: <span className="font-semibold">R {totalDue.toFixed(2)}</span></div>
|
||||
<button disabled={submitting} onClick={submit} className="px-4 py-2 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50 shadow-sm">{submitting ? 'Creating…' : 'Create registration'}</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab === 'payment' && (
|
||||
<div className="max-w-xl">
|
||||
{payMessage && <div className="p-3 mb-3 border rounded bg-emerald-50 text-emerald-800 text-sm">{payMessage}</div>}
|
||||
{payError && <div className="p-3 mb-3 border rounded bg-red-50 text-red-700 text-sm">{payError}</div>}
|
||||
|
||||
<div className="border rounded-xl p-4 bg-white shadow-sm">
|
||||
<div className="text-lg font-semibold mb-3">Record a payment</div>
|
||||
<div className="grid gap-3">
|
||||
<div>
|
||||
<label className="block text-xs text-gray-600 mb-1">Amount</label>
|
||||
<input className="w-full border rounded px-3 py-2 text-sm" type="number" step="0.01" value={payAmount} onChange={e => setPayAmount(e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-600 mb-1">Method</label>
|
||||
<select className="w-full border rounded px-3 py-2 text-sm" value={payMethod} onChange={e => setPayMethod(e.target.value)}>
|
||||
<option value="cash">Cash</option>
|
||||
<option value="card">Card</option>
|
||||
<option value="eft">EFT</option>
|
||||
<option value="voucher">Voucher</option>
|
||||
</select>
|
||||
</div>
|
||||
<div ref={paySearchRef} className="relative">
|
||||
<label className="block text-xs text-gray-600 mb-1">User</label>
|
||||
<input
|
||||
className="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
|
||||
placeholder="Search by name, email or phone…"
|
||||
value={payUserQuery}
|
||||
autoComplete="off"
|
||||
onChange={e => { setPayUserQuery(e.target.value); setPayDropdownOpen(true); if (!e.target.value) { setPayUserId(""); setPayRegistrationId(""); } }}
|
||||
onFocus={() => { if (payUserQuery.length >= 2) setPayDropdownOpen(true); }}
|
||||
/>
|
||||
{payDropdownOpen && payUserQuery.trim().length >= 2 && (
|
||||
<div className="absolute z-30 top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-xl shadow-lg overflow-hidden">
|
||||
{payMatchedUsers.length > 0 ? (
|
||||
<>
|
||||
<div className="px-3 py-1.5 text-[11px] text-gray-400 bg-gray-50 border-b">
|
||||
{payMatchedUsers.length} match{payMatchedUsers.length !== 1 ? "es" : ""}
|
||||
</div>
|
||||
{payMatchedUsers.map(u => (
|
||||
<button
|
||||
key={u.id}
|
||||
type="button"
|
||||
className="w-full text-left px-3 py-2.5 hover:bg-indigo-50 border-b border-gray-100 last:border-b-0 transition-colors"
|
||||
onClick={() => selectPayUser(u)}
|
||||
>
|
||||
<div className="text-sm font-medium text-gray-900">{u.name}</div>
|
||||
<div className="text-xs text-gray-500 mt-0.5 flex gap-2 flex-wrap">
|
||||
{u.email && <span>{u.email}</span>}
|
||||
{u.phoneNumber && <span>· {u.phoneNumber}</span>}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<div className="px-3 py-3 text-sm text-gray-500 italic">No matching users found.</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-600 mb-1">Registration</label>
|
||||
<select className="w-full max-w-full border rounded px-3 py-2 text-sm truncate" value={payRegistrationId} onChange={e => setPayRegistrationId(e.target.value)} disabled={!payUserId}>
|
||||
<option value="">Select registration…</option>
|
||||
{regsForPayUser.map((r: any) => {
|
||||
const out = regOutstanding[r.id]?.outstanding ?? 0;
|
||||
const label = `${r.event?.title || r.eventId || 'Event'} — Outstanding: R ${out.toFixed(2)} — #${String(r.id).slice(0,8)}`;
|
||||
return <option key={r.id} value={r.id} title={label}>{label}</option>;
|
||||
})}
|
||||
</select>
|
||||
{!payUserId && <div className="text-xs text-gray-500 mt-1">Search for a user above to see their registrations.</div>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-600 mb-1">Paid at (optional)</label>
|
||||
<input className="w-full border rounded px-3 py-2 text-sm" type="datetime-local" value={payPaidAtLocal} onChange={e => setPayPaidAtLocal(e.target.value)} max={new Date().toISOString().slice(0,16)} />
|
||||
<div className="text-[10px] text-gray-500 mt-1">Leave blank to use current time</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<button disabled={paySubmitting} onClick={createManualPayment} className="w-full px-3 py-1.5 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 shadow-sm">{paySubmitting ? 'Recording…' : 'Record payment'}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { apiFetch } from "@/lib/api";
|
||||
import { apiFetch, createFullPaymentCheckout } from "@/lib/api";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { formatDate } from "@/lib/date";
|
||||
import { formatPaymentMethod } from "@/lib/paymentMethod";
|
||||
@@ -312,6 +312,41 @@ export default function UserDashboardPage() {
|
||||
}
|
||||
};
|
||||
|
||||
// Creates a Yoco checkout for the full outstanding balance and redirects there directly —
|
||||
// choosing a partial amount is only available from the supervisor payments dashboard.
|
||||
const payNow = async (registrationId: string) => {
|
||||
if (!token) return;
|
||||
setError(null);
|
||||
setInfo(null);
|
||||
setDialog({ open: true, message: "Creating payment link…", loading: true });
|
||||
try {
|
||||
const res = await createFullPaymentCheckout(token, registrationId);
|
||||
if (res.priceUpdated) {
|
||||
setDialog({ open: false, message: "", loading: false });
|
||||
setError(`${res.message || 'Pricing has changed.'} New total: R ${(res.newTotal ?? 0).toFixed(2)}. Please try again.`);
|
||||
// Refresh this registration's billing so the displayed outstanding reflects the new price
|
||||
try {
|
||||
const now = new Date();
|
||||
const r = await apiFetch<any>(`/api/registrations/${encodeURIComponent(registrationId)}`, { authToken: token });
|
||||
const pays = await apiFetch<any[]>(`/api/payments/registration/${encodeURIComponent(registrationId)}`, { authToken: token });
|
||||
const totalPaid = pays.reduce((s, p) => s + (p.amount || 0), 0);
|
||||
const totalDue = (r.registrationOptions || []).reduce((sum: number, opt: any) => sum + optionUnitPrice(opt, null, now) * (opt.quantity || 0), 0);
|
||||
setBilling(prev => ({ ...prev, [registrationId]: { totalDue, totalPaid, outstanding: Math.max(0, totalDue - totalPaid), payments: pays } }));
|
||||
} catch {}
|
||||
return;
|
||||
}
|
||||
if (!res.redirectUrl) {
|
||||
setDialog({ open: false, message: "", loading: false });
|
||||
setError("Failed to create checkout");
|
||||
return;
|
||||
}
|
||||
window.location.href = res.redirectUrl;
|
||||
} catch (e: any) {
|
||||
setDialog({ open: false, message: "", loading: false });
|
||||
setError(e?.message || "Failed to create checkout");
|
||||
}
|
||||
};
|
||||
|
||||
// Print helpers
|
||||
const buildTicketHtmlCard = (t: any, buyerName?: string) => {
|
||||
const eventTitle = t.event?.title || t.eventId || "Event";
|
||||
@@ -1039,7 +1074,7 @@ export default function UserDashboardPage() {
|
||||
{canModifyActive && activeBill && activeBill.outstanding > 0 ? (
|
||||
<button
|
||||
className="px-3 py-1.5 text-sm bg-green-600 text-white rounded hover:bg-green-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-1"
|
||||
onClick={() => router.push(`/dashboard/user/pay?registrationId=${encodeURIComponent(activeReg.id)}`)}
|
||||
onClick={() => payNow(activeReg.id)}
|
||||
>Make payment</button>
|
||||
) : (
|
||||
<>
|
||||
|
||||
@@ -1,208 +0,0 @@
|
||||
"use client";
|
||||
import React, { Suspense, useEffect, useMemo, useState } from "react";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { apiFetch } from "@/lib/api";
|
||||
import { useDismissingState } from "@/hooks/useDismissingState";
|
||||
|
||||
function MakePaymentContent() {
|
||||
const searchParams = useSearchParams();
|
||||
const registrationId = searchParams.get("registrationId");
|
||||
const { token } = useAuth();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useDismissingState<string | null>(null);
|
||||
const [info, setInfo] = useDismissingState<string | null>(null);
|
||||
const [registration, setRegistration] = useState<any | null>(null);
|
||||
const [payments, setPayments] = useState<any[]>([]);
|
||||
const [amount, setAmount] = useState<string>("");
|
||||
const [priceUpdated, setPriceUpdated] = useState<{ newTotal: number; message: string } | null>(null);
|
||||
|
||||
// Compute effective unit price for a registration option.
|
||||
// Uses priceSnapshot when available (authoritative backend price, variant-aware).
|
||||
// Falls back to deadline-only early-bird calculation for legacy rows without a snapshot.
|
||||
const optionUnitPrice = (opt: any, referenceTime: any, atTime: Date): number => {
|
||||
if (opt.priceSnapshot !== null && opt.priceSnapshot !== undefined) {
|
||||
return Number(opt.priceSnapshot);
|
||||
}
|
||||
const eo = opt.eventOption;
|
||||
const variantId: string | null = opt.variantId || null;
|
||||
const base = (opt.variant?.price !== null && opt.variant?.price !== undefined)
|
||||
? Number(opt.variant.price)
|
||||
: Number(eo?.price || 0);
|
||||
const allTiers = Array.isArray(eo?.earlyBirdTiers) ? eo.earlyBirdTiers.slice() : [];
|
||||
const tiers = variantId
|
||||
? allTiers.filter((t: any) => t.variantId === variantId)
|
||||
: allTiers.filter((t: any) => !t.variantId);
|
||||
if (tiers.length === 0) return base;
|
||||
const t = atTime ? new Date(atTime) : new Date();
|
||||
const ref = referenceTime ? new Date(referenceTime) : t;
|
||||
const applicable = tiers
|
||||
.map((x: any) => ({ ...x, deadline: new Date(x.deadline) }))
|
||||
.filter((x: any) => (ref < x.deadline) && (t < x.deadline))
|
||||
.sort((a: any, b: any) => a.deadline.getTime() - b.deadline.getTime() || (a.order||0) - (b.order||0) || a.price - b.price);
|
||||
if (applicable.length === 0) return base;
|
||||
const price = Number(applicable[0].price);
|
||||
return (price >= 0) ? price : base;
|
||||
};
|
||||
|
||||
const totals = useMemo(() => {
|
||||
if (!registration) return { totalDue: 0, totalPaid: 0, outstanding: 0 };
|
||||
const now = new Date();
|
||||
// totalDue uses priceSnapshot — not time-dependent, consistent with what the backend charges
|
||||
const totalDue = (registration.registrationOptions || []).reduce((s: number, opt: any) => s + optionUnitPrice(opt, null, now) * (opt.quantity || 0), 0);
|
||||
const totalPaid = payments.reduce((s: number, p: any) => s + (p.amount || 0), 0);
|
||||
const outstanding = Math.max(0, totalDue - totalPaid);
|
||||
return { totalDue, totalPaid, outstanding };
|
||||
}, [registration, payments]);
|
||||
|
||||
const minAllowed = useMemo(() => {
|
||||
if (totals.outstanding <= 0) return 0;
|
||||
return totals.outstanding >= 15 ? 15 : totals.outstanding;
|
||||
}, [totals.outstanding]);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
if (!token || !registrationId) return;
|
||||
try {
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
const reg = await apiFetch<any>(`/api/registrations/${encodeURIComponent(registrationId)}`, { authToken: token });
|
||||
setRegistration(reg);
|
||||
const pays = await apiFetch<any[]>(`/api/payments/registration/${encodeURIComponent(registrationId)}`, { authToken: token });
|
||||
setPayments(pays);
|
||||
} catch (e: any) {
|
||||
setError(e?.message || "Failed to load registration");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
})();
|
||||
}, [token, registrationId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (totals.outstanding <= 0) {
|
||||
setAmount("");
|
||||
}
|
||||
}, [totals.outstanding]);
|
||||
|
||||
const submit = async () => {
|
||||
if (!token || !registrationId) return;
|
||||
const amt = parseFloat(amount);
|
||||
if (!(amt > 0)) { setError("Enter a valid amount"); return; }
|
||||
if (amt > totals.outstanding) { setError(`Amount cannot exceed outstanding (R ${totals.outstanding.toFixed(2)})`); return; }
|
||||
if (amt < minAllowed) {
|
||||
if (totals.outstanding >= 15) {
|
||||
setError("Minimum payment is R15");
|
||||
} else {
|
||||
setError(`Please pay the remaining outstanding amount (R ${totals.outstanding.toFixed(2)})`);
|
||||
}
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setError(null);
|
||||
setInfo(null);
|
||||
setPriceUpdated(null);
|
||||
setLoading(true);
|
||||
const res = await apiFetch<{ redirectUrl?: string; priceUpdated?: boolean; newTotal?: number; message?: string }>("/api/payments/yoco-checkout", {
|
||||
method: "POST",
|
||||
body: {
|
||||
registrationId,
|
||||
amount: amt,
|
||||
successUrl: window.location.origin + "/payment/success",
|
||||
cancelUrl: window.location.origin + "/payment/cancel",
|
||||
failureUrl: window.location.origin + "/payment/failure",
|
||||
},
|
||||
authToken: token,
|
||||
});
|
||||
if (res.priceUpdated) {
|
||||
// Early-bird price changed — show warning and reload registration data
|
||||
setPriceUpdated({ newTotal: res.newTotal ?? 0, message: res.message ?? 'Prices have changed.' });
|
||||
// Reload registration so totals reflect updated priceSnapshot
|
||||
try {
|
||||
const reg = await apiFetch<any>(`/api/registrations/${encodeURIComponent(registrationId)}`, { authToken: token });
|
||||
setRegistration(reg);
|
||||
const pays = await apiFetch<any[]>(`/api/payments/registration/${encodeURIComponent(registrationId)}`, { authToken: token });
|
||||
setPayments(pays);
|
||||
} catch {}
|
||||
setAmount("");
|
||||
return;
|
||||
}
|
||||
setInfo("Redirecting to payment...");
|
||||
window.location.href = res.redirectUrl!;
|
||||
} catch (e: any) {
|
||||
setError(e?.message || "Failed to create checkout");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!registrationId) return <div className="p-6">Missing registrationId.</div>;
|
||||
|
||||
return (
|
||||
<div className="max-w-xl mx-auto w-full p-6">
|
||||
<h1 className="text-2xl font-semibold mb-4">Make a payment</h1>
|
||||
{error && <p className="text-red-600 text-sm mb-3">{error}</p>}
|
||||
{info && <p className="text-green-700 text-sm mb-3">{info}</p>}
|
||||
{priceUpdated && (
|
||||
<div className="mb-4 p-3 border border-amber-300 bg-amber-50 rounded text-sm text-amber-800">
|
||||
<strong>Pricing has changed.</strong> {priceUpdated.message}
|
||||
<div className="mt-1">New outstanding: <strong>R {priceUpdated.newTotal.toFixed(2)}</strong></div>
|
||||
<button
|
||||
className="mt-2 text-xs underline text-amber-700 hover:text-amber-900"
|
||||
onClick={() => setPriceUpdated(null)}
|
||||
>OK, I understand — continue with new price</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{registration ? (
|
||||
<div className="border rounded p-3 mb-4">
|
||||
<div className="font-medium">{registration.event?.title || registration.eventId}</div>
|
||||
<div className="text-sm text-gray-600">Registration #{registration.id.slice(0,8)}</div>
|
||||
<div className="mt-2 text-sm">
|
||||
<div>Total: R {totals.totalDue.toFixed(2)}</div>
|
||||
<div>Paid: R {totals.totalPaid.toFixed(2)}</div>
|
||||
<div>Outstanding: <span className={totals.outstanding>0?"text-red-600":"text-green-700"}>R {totals.outstanding.toFixed(2)}</span></div>
|
||||
</div>
|
||||
{(() => {
|
||||
const tiers = (registration.registrationOptions || []).flatMap((ro: any) => Array.isArray(ro.eventOption?.earlyBirdTiers) ? ro.eventOption.earlyBirdTiers : []);
|
||||
const upcoming = tiers.map((t: any) => ({ ...t, deadline: new Date(t.deadline) })).filter((t: any) => new Date() < t.deadline).sort((a: any, b: any) => a.deadline.getTime() - b.deadline.getTime());
|
||||
if (upcoming.length === 0) return null;
|
||||
const d = upcoming[0].deadline as Date;
|
||||
const dateStr = d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' });
|
||||
return <div className="mt-2 text-xs text-amber-700">Early bird pricing applies if paid before {dateStr}.</div>;
|
||||
})()}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-gray-600 mb-4">Loading registration...</p>
|
||||
)}
|
||||
|
||||
<label className="block text-sm font-medium mb-1">Amount (R)</label>
|
||||
<input
|
||||
type="number"
|
||||
min={minAllowed.toFixed(2)}
|
||||
max={totals.outstanding > 0 ? totals.outstanding.toFixed(2) : "0"}
|
||||
step="1"
|
||||
placeholder={totals.outstanding >= 15 ? "Enter amount (min R15)" : `Enter amount (max R ${totals.outstanding.toFixed(2)})`}
|
||||
value={amount}
|
||||
onChange={(e) => setAmount(e.target.value)}
|
||||
disabled={totals.outstanding <= 0}
|
||||
className="w-full border rounded px-3 py-2 mb-1 disabled:opacity-60"
|
||||
/>
|
||||
{totals.outstanding > 0 && (
|
||||
<p className="text-xs text-gray-600 mb-3">Minimum payment {totals.outstanding >= 15 ? "is R15" : `is the remaining outstanding amount (R ${totals.outstanding.toFixed(2)})`}.</p>
|
||||
)}
|
||||
<button
|
||||
disabled={loading || totals.outstanding <= 0}
|
||||
onClick={submit}
|
||||
className="bg-green-600 text-white px-4 py-2 rounded disabled:opacity-60"
|
||||
>{loading?"Creating checkout...": totals.outstanding <= 0 ? "No outstanding amount" : "Pay now"}</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function MakePaymentPage() {
|
||||
return (
|
||||
<Suspense fallback={<div className="p-6">Loading...</div>}>
|
||||
<MakePaymentContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -22,6 +22,7 @@ function RegistrationSuccessContent() {
|
||||
const [loading, setLoading] = React.useState(false);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
const [info, setInfo] = React.useState<string | null>(null);
|
||||
const [payLoading, setPayLoading] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
(async () => {
|
||||
@@ -79,9 +80,32 @@ function RegistrationSuccessContent() {
|
||||
}
|
||||
}, [reg, totalDue, router]);
|
||||
|
||||
const goPay = () => {
|
||||
const goPay = async () => {
|
||||
if (!registrationId) return;
|
||||
router.push(`/dashboard/user/pay?registrationId=${encodeURIComponent(registrationId)}`);
|
||||
const token = (typeof window !== 'undefined') ? localStorage.getItem('token') : null;
|
||||
if (!token) { setError('Please login to pay.'); return; }
|
||||
try {
|
||||
setError(null);
|
||||
setPayLoading(true);
|
||||
const { createFullPaymentCheckout } = await import('@/lib/api');
|
||||
const res = await createFullPaymentCheckout(token, registrationId);
|
||||
if (res.priceUpdated) {
|
||||
// Early-bird price changed since registration — surface the new total and
|
||||
// reload the registration so the displayed totalDue reflects it, instead of redirecting.
|
||||
setError(`${res.message || 'Pricing has changed.'} New total: R ${(res.newTotal ?? 0).toFixed(2)}. Please try again.`);
|
||||
try {
|
||||
const r = await (await import('@/lib/api')).apiFetch(`/api/registrations/${encodeURIComponent(registrationId)}`, { authToken: token });
|
||||
if (r) setReg(r);
|
||||
} catch {}
|
||||
return;
|
||||
}
|
||||
if (!res.redirectUrl) { setError('Failed to create checkout'); return; }
|
||||
window.location.href = res.redirectUrl;
|
||||
} catch (e: any) {
|
||||
setError(e?.message || 'Failed to create checkout');
|
||||
} finally {
|
||||
setPayLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const goDashboard = () => {
|
||||
@@ -108,9 +132,9 @@ function RegistrationSuccessContent() {
|
||||
{(totalDue > 0 || (!reg && fallbackTotalDue > 0)) && (
|
||||
<button
|
||||
onClick={goPay}
|
||||
disabled={!registrationId}
|
||||
disabled={!registrationId || payLoading}
|
||||
className="px-4 py-2 rounded bg-green-600 text-white disabled:opacity-60"
|
||||
>Pay with Yoco</button>
|
||||
>{payLoading ? "Creating checkout..." : "Pay with Yoco"}</button>
|
||||
)}
|
||||
<button
|
||||
onClick={goDashboard}
|
||||
|
||||
@@ -155,3 +155,19 @@ export function fetchAllUsers(token: string, params: Record<string, string> = {}
|
||||
export function fetchAllPayments(token: string, params: Record<string, string> = {}): Promise<any[]> {
|
||||
return fetchAllPages("/api/payments", token, params);
|
||||
}
|
||||
|
||||
// Creates a Yoco checkout for a registration's full remaining outstanding balance.
|
||||
// Omitting `amount` makes the backend charge the full remainder rather than a partial amount —
|
||||
// partial-amount checkouts are only ever created from the supervisor payments dashboard.
|
||||
export function createFullPaymentCheckout(token: string, registrationId: string): Promise<{ redirectUrl?: string; priceUpdated?: boolean; newTotal?: number; message?: string }> {
|
||||
return apiFetch("/api/payments/yoco-checkout", {
|
||||
method: "POST",
|
||||
authToken: token,
|
||||
body: {
|
||||
registrationId,
|
||||
successUrl: window.location.origin + "/payment/success",
|
||||
cancelUrl: window.location.origin + "/payment/cancel",
|
||||
failureUrl: window.location.origin + "/payment/failure",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user