hope-events/frontend/src/app/dashboard/user/donate/page.tsx

"use client";
import React, { useEffect, useState } from "react";
import { useAuth } from "@/hooks/useAuth";
import { apiFetch } from "@/lib/api";
import { useDismissingState } from "@/hooks/useDismissingState";

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] = useDismissingState<string | null>(null);
  const [info, setInfo] = useDismissingState<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>
  );
}