# 22. Cookie Consent & GDPR Compliance

meta:
  id: web-production-22
  feature: web-production
  priority: P2
  depends_on: []
  tags: [compliance, gdpr, cookies, production]

objective:
- Implement GDPR-compliant cookie consent with granular controls and data processing transparency

deliverables:
- Cookie consent banner component
- Granular cookie preference management
- Consent storage and enforcement
- GDPR compliance verification

steps:
1. Create cookie consent banner:
   - Banner appears on first visit
   - Accept all, reject non-essential, customize options
   - Links to cookie policy
   - Dismissible but persistent until choice made
   - Mobile-responsive design
2. Implement granular controls:
   - Essential cookies (always on): auth, security
   - Analytics cookies (opt-in): PostHog, Plausible
   - Marketing cookies (opt-in): retargeting, ads
   - Preference cookies (opt-in): theme, language
3. Create preference modal:
   - Toggle switches for each category
   - Description of each cookie type
   - Save preferences button
   - Re-openable from footer link
4. Implement consent enforcement:
   - Store consent in cookie/localStorage
   - Block analytics scripts until consent given
   - Block marketing scripts until consent given
   - Respect "Do Not Track" browser setting
5. Add GDPR-specific features:
   - Data processing notice in signup flow
   - Right to access data (export tool)
   - Right to erasure (delete account)
   - Right to portability (data export)
   - Data retention periods documented
6. Add consent logging:
   - Log consent choices with timestamp
   - Store for compliance audit trail
   - Allow users to view their consent history

tests:
- Unit: Test consent banner rendering and interaction
- Integration: Test analytics blocked until consent
- Compliance: Verify DNT respected

acceptance_criteria:
- Cookie banner appears on first visit to all users
- Users can accept, reject, or customize cookie preferences
- Analytics scripts load only after opt-in consent
- Marketing scripts load only after opt-in consent
- Essential cookies function without consent
- Consent preferences persist across sessions
- "Do Not Track" browser setting respected
- Consent choice logged with timestamp
- GDPR rights accessible from settings page
- Cookie policy linked from banner and footer

validation:
- Clear cookies → visit site → banner appears
- Click "Reject" → analytics network requests blocked
- Click "Customize" → toggle analytics on → requests allowed
- Enable DNT in browser → banner shows "DNT detected"
- Check localStorage → consent object stored

notes:
- Use CookieConsent by Orestbida or build custom with SolidJS
- Must comply with both GDPR (EU) and CCPA (California)
- Analytics must be completely blocked, not just paused
- Document consent choices for 2 years (regulatory requirement)