Donor Portal

The Donor Portal is a dedicated interface for donors to manage their profiles, privacy settings, and communications with recipient families. This document provides comprehensive information about the Donor Portal's features, implementation, testing, and future development plans.

Overview

The Donor Portal addresses the unique needs of donors in the family connection ecosystem, providing them with:

• Self-service onboarding and profile management
• Granular privacy controls for sharing information
• Health information tracking with update reminders
• Secure communication with recipient families
• Real-time preview of how their information appears to different audiences

Key Features

Self-Service Onboarding

The Donor Portal provides a streamlined onboarding process designed specifically for donors:

• Quick Signup: 3-minute signup process with minimal required information
• Progressive Disclosure: Information collection in logical, manageable steps
• Verification Process: Identity verification to ensure authenticity
• Welcome Experience: Guided introduction to portal features
• Profile Completion: Visual indicators for profile completion status

Privacy Controls

Donors have granular control over their privacy and information sharing:

• Privacy Levels: Anonymous, semi-open, or open donation settings
• Granular Permissions: Control sharing of specific information types
• Audience-Specific Sharing: Different sharing levels for different recipient groups
• Consent Management: Clear consent tracking for information sharing
• Privacy History: Audit trail of privacy setting changes

Health Management

The portal includes comprehensive health information management:

• Medical History: Structured collection of relevant medical information
• Update Reminders: Automated 12-month reminders for health updates
• Family Medical History: Optional sharing of family medical information
• Health Timeline: Chronological view of health updates
• Export Capability: Secure export of health information for medical providers

Secure Communication

The portal facilitates policy-compliant communication between donors and recipient families:

• Anonymous Messaging: Communication without revealing personal information
• Message Templates: Pre-approved templates for common communications
• Moderation Options: Optional review of messages by organization administrators
• Communication History: Complete history of all communications
• Notification Preferences: Customizable notification settings

Implementation Details

User Type Migration

The Donor Portal required significant changes to the user type system to properly support donor-specific functionality:

Migration Plan

1. Schema Updates:

   • Added user_type field to user_profiles table
   • Created new donor_profiles table linked to user_profiles
   • Added appropriate foreign key constraints and indexes

2. Authentication Flow:

   • Modified signup process to capture user type
   • Implemented role-based redirection after authentication
   • Added donor-specific permission checks

3. Data Migration:

   • Identified existing users who should be classified as donors
   • Migrated relevant data to new donor-specific tables
   • Validated data integrity after migration

4. UI Updates:

   • Created donor-specific dashboard and navigation
   • Implemented user type switching for users with multiple roles
   • Updated permission checks throughout the application

-- Example of schema changes for donor user type
ALTER TABLE user_profiles ADD COLUMN user_type TEXT NOT NULL DEFAULT 'standard';
CREATE INDEX idx_user_profiles_user_type ON user_profiles(user_type);

CREATE TABLE donor_profiles (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  profile_id UUID NOT NULL REFERENCES user_profiles(id) ON DELETE CASCADE,
  donor_code TEXT UNIQUE,
  privacy_level TEXT NOT NULL DEFAULT 'anonymous',
  last_health_update TIMESTAMP WITH TIME ZONE,
  next_reminder_date TIMESTAMP WITH TIME ZONE,
  UNIQUE(user_id)
);

CREATE INDEX idx_donor_profiles_user_id ON donor_profiles(user_id);

Portal Implementation

The Donor Portal was implemented using:

• React Components: Custom components for donor-specific interfaces
• State Management: React Query for server state, Context for local state
• Form Handling: React Hook Form with Zod validation
• API Layer: Custom API endpoints for donor-specific operations
• Authentication: Extended Supabase Auth with donor-specific flows
• Database: Supabase PostgreSQL with Row Level Security policies

Key implementation considerations included:

• Security: Strict access controls and data validation
• Privacy: Default-private approach with explicit opt-in for sharing
• Performance: Optimized loading and rendering for large profiles
• Accessibility: WCAG 2.1 AA compliance for all portal features
• Mobile Support: Responsive design for all device sizes

Testing

The Donor Portal underwent comprehensive testing to ensure functionality, security, and usability:

Test Checklist

• [x] User Registration: Verify donor signup flow works correctly
• [x] Authentication: Test login, logout, and password reset
• [x] Profile Management: Test creating, editing, and viewing profiles
• [x] Privacy Controls: Verify privacy settings are applied correctly
• [x] Health Information: Test adding and updating health information
• [x] Communication: Test messaging between donors and recipients
• [x] Notifications: Verify reminder emails and notifications
• [x] Security: Test access controls and permission boundaries
• [x] Performance: Verify acceptable load times and responsiveness
• [x] Accessibility: Test screen reader compatibility and keyboard navigation

Testing Approach

1. Unit Tests: Component and function-level tests
2. Integration Tests: Testing interactions between components
3. E2E Tests: Full user flow testing with Playwright
4. Security Testing: Penetration testing and security review
5. Usability Testing: Sessions with actual donors for feedback

// Example of E2E test for donor signup
test('donor can complete signup process', async ({ page }) => {
  await page.goto('/signup/donor');
  
  // Fill signup form
  await page.fill('[data-testid="email-input"]', 'test-donor@example.com');
  await page.fill('[data-testid="password-input"]', 'SecurePassword123');
  await page.click('[data-testid="signup-button"]');
  
  // Complete onboarding
  await page.fill('[data-testid="donor-code-input"]', 'D12345');
  await page.selectOption('[data-testid="privacy-level-select"]', 'semi-open');
  await page.click('[data-testid="continue-button"]');
  
  // Verify redirect to donor dashboard
  await expect(page).toHaveURL('/donor/dashboard');
  await expect(page.locator('[data-testid="welcome-message"]')).toContainText('Welcome to your donor portal');
});

Updates and Improvements

Since the initial release, several updates and improvements have been made to the Donor Portal:

UI/UX Improvements

• Redesigned dashboard with improved information hierarchy
• Enhanced profile completion guidance
• Simplified privacy controls with visual indicators
• Improved mobile experience with touch-optimized interfaces

Functional Enhancements

• Added support for document uploads (medical records, etc.)
• Implemented two-way anonymous messaging
• Added calendar integration for health update reminders
• Enhanced notification system with more customization options

Performance Optimizations

• Improved initial load time through code splitting
• Optimized database queries for faster profile loading
• Implemented caching for frequently accessed data
• Reduced bundle size through dependency optimization

Future Development

Planned enhancements for the Donor Portal include:

1. Enhanced Matching: Improved algorithms for connecting donors with recipient families
2. Genetic Information: Support for sharing genetic testing results
3. Multi-language Support: Localization for international users
4. Advanced Analytics: Insights dashboard for donors
5. Mobile App: Dedicated mobile application for donors

Conclusion

The Donor Portal represents a significant enhancement to the Family Shapes platform, providing donors with the tools they need to manage their information, control their privacy, and communicate with recipient families in a secure and policy-compliant manner.

The implementation follows best practices for security, privacy, and user experience, ensuring that donors have a positive and empowering experience when using the platform.

For questions or feedback about the Donor Portal, please contact the development team or create an issue in the project repository.