TheFlow
|
ebc05daa9a
|
feat: implement Koha donation system frontend (Phase 3)
Complete donation form, transparency dashboard, and success pages.
**Frontend Pages:**
Donation Form (public/koha.html):
- Three monthly tiers: $5, $15, $50 NZD
- One-time custom donations
- Anonymous by default with opt-in public acknowledgement
- Donor information form (name optional, email required)
- Stripe Checkout integration
- Allocation transparency (40/30/20/10 breakdown)
- Māori cultural acknowledgement (Koha meaning)
- Comprehensive FAQ section
- Accessible design (WCAG 2.1 AA compliant)
Transparency Dashboard (public/koha/transparency.html):
- Live metrics: total received, monthly supporters, recurring revenue
- Allocation breakdown with animated progress bars
- Recent public donor acknowledgements
- One-time donation statistics
- Auto-refresh every 5 minutes
- Call-to-action to donate
Success Page (public/koha/success.html):
- Animated success confirmation with checkmark
- Donation details verification via session ID
- Next steps explanation (receipt, allocation, dashboard)
- Monthly donor management information
- Links to transparency dashboard and docs
- Error state handling
**Database & Scripts:**
Initialization Script (scripts/init-koha.js):
- Creates MongoDB indexes for koha_donations collection
- Verifies Stripe configuration (keys, price IDs)
- Tests transparency metrics calculation
- Validates database setup
- Provides next steps guide
- npm script: `npm run init:koha`
Package Updates:
- Added Stripe SDK dependency (v14.25.0)
- Added init:koha script to package.json
**Features:**
Privacy-First Design:
✅ Anonymous donations by default
✅ Opt-in public acknowledgement
✅ Email only for receipts
✅ No payment details stored
User Experience:
✅ Responsive mobile design
✅ Keyboard navigation support
✅ Focus indicators for accessibility
✅ Loading/error states
✅ Form validation
Transparency:
✅ Public metrics API integration
✅ Real-time donor acknowledgements
✅ Clear allocation breakdown
✅ Automatic dashboard updates
Cultural Sensitivity:
✅ Māori term "Koha" explained
✅ Te Tiriti acknowledgement
✅ Indigenous partnership values
**API Integration:**
- POST /api/koha/checkout - Create donation session
- GET /api/koha/transparency - Fetch public metrics
- GET /api/koha/verify/:sessionId - Verify payment status
**Testing Checklist:**
□ Form validation (email required, minimum amount)
□ Tier selection (monthly $5/$15/$50)
□ One-time custom amount input
□ Anonymous vs public acknowledgement toggle
□ Stripe Checkout redirect
□ Success page verification
□ Transparency dashboard data display
□ Mobile responsiveness
□ Keyboard navigation
**Next Steps:**
1. Create Stripe products with currency_options (all 10 currencies)
2. Test with Stripe test cards
3. Implement multi-currency support
4. Add Privacy Policy page
5. Deploy to production
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-10-08 13:56:56 +13:00 |
|