[Donation Form] Connect Frontend To Backend

[thaninbew]

[Small, possible to be done by Sun?]

Summary:

Wire up the frontend donation form to call the backend donations API. Verify form submission creates donations in the database and handles errors properly.

Files to modify:

• apps/frontend/src/containers/donations/DonationForm.tsx

Implementation:

1. Import apiClient in DonationForm component
2. On form submit, call apiClient.createDonation() with form data
3. Show loading state while API request is in flight
4. On success:
   • Show success message or redirect to confirmation page
   • Clear form fields
   • Optionally redirect to donation list/public donations page
5. On error:
   • Display validation error messages to user
   • Allow user to correct and resubmit

Acceptance criteria:

• Form submission calls /api/donations endpoint with correct request body
• Loading indicator displays during API call
• Successful submission: confirmation shown and donation appears in database
• Failed submission: user-friendly error message displayed
• Form validation errors from backend are shown to user
• Both success and error paths tested manually

Notes:

• Frontend types already defined in apiClient.ts (DonationCreateRequest, CreateDonationResponse). CORS already enabled on backend. Test with both valid and invalid data to ensure error handling works.
• Card fields aren't supposed to be validated, there's another ticket working on Stripe.js fields.
• Backend currently expects only donation data, not card data (which is correct, since we handle PCI separately with Stripe).