Initial commit

Next.js + Express event management app for Hope Family Church.
2026-07-23 15:26:47 +02:00
commit 3d381944d2
246 changed files with 57565 additions and 0 deletions
@@ -0,0 +1,87 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { apiFetch } from "@/lib/api";
+
+export default function DonatePage() {
+  const { token } = useAuth();
+  const [events, setEvents] = useState<any[]>([]);
+  const [eventId, setEventId] = useState<string>("");
+  const [amount, setAmount] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [info, setInfo] = useState<string | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const evs = await apiFetch<any[]>("/api/events");
+        setEvents(evs);
+        if (evs.length > 0) setEventId(evs[0].id);
+      } catch (e: any) {
+        setError(e?.message || "Failed to load events");
+      }
+    })();
+  }, []);
+
+  const submit = async () => {
+    if (!token) { setError("Please login"); return; }
+    const amt = parseFloat(amount);
+    if (!(amt > 0)) { setError("Enter a valid amount"); return; }
+    if (amt < 15) { setError("Minimum donation is R15"); return; }
+    if (!eventId) { setError("Select an event"); return; }
+    try {
+      setError(null);
+      setInfo(null);
+      setLoading(true);
+      const res = await apiFetch<{ redirectUrl: string }>("/api/payments/yoco-checkout", {
+        method: "POST",
+        body: {
+          eventId,
+          amount: amt,
+          successUrl: window.location.origin + "/payment/success",
+          cancelUrl: window.location.origin + "/payment/cancel",
+          failureUrl: window.location.origin + "/payment/failure",
+        },
+        authToken: token,
+      });
+      setInfo("Redirecting to payment...");
+      window.location.href = res.redirectUrl;
+    } catch (e: any) {
+      setError(e?.message || "Failed to start donation checkout");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-xl mx-auto w-full p-6">
+      <h1 className="text-2xl font-semibold mb-4">Make a donation</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>}
+
+      <label className="block text-sm font-medium mb-1">Event</label>
+      <select className="w-full border rounded px-3 py-2 mb-3" value={eventId} onChange={(e)=>setEventId(e.target.value)}>
+        {events.map(ev => <option key={ev.id} value={ev.id}>{ev.title}</option>)}
+      </select>
+
+      <label className="block text-sm font-medium mb-1">Amount (R)</label>
+      <input
+        type="number"
+        min="15"
+        step="1"
+        placeholder="Enter amount (min R15)"
+        value={amount}
+        onChange={(e)=>setAmount(e.target.value)}
+        className="w-full border rounded px-3 py-2 mb-1"
+      />
+      <p className="text-xs text-gray-600 mb-3">Minimum donation is R15.</p>
+
+      <button
+        disabled={loading}
+        onClick={submit}
+        className="bg-blue-600 text-white px-4 py-2 rounded disabled:opacity-60"
+      >{loading?"Starting checkout...":"Donate"}</button>
+    </div>
+  );
+}