feat: add hotline reporting feature with modal and API endpoint

[Justin322322]

Add Hotline Reporting Feature

Adds a reporting system for users to submit outdated hotline information directly from the Hotlines page. Reports are automatically created as GitHub issues.

What's New

• Report modal with form validation and accessibility features
• /api/report-hotline endpoint that creates GitHub issues via API
• "Report Outdated Information" button on Hotlines page
• Privacy-first: optional email stored in server logs only, not in public issues

Screenshots

Setup Required

Add GITHUB_TOKEN environment variable with repo scope to enable issue creation.

[KishonShrill]

@Justin322322 Can I have an update on this? Does it still work on your end? I already used a GITHUB_TOKEN for it and gave me a "Network error. Please try again or report directly on GitHub."

[KishonShrill]

Also, can you provide the steps on how I can test this? Kind of confused where to go after inputting the github token

[Justin322322]

Changes:

• Removed the GitHub integration requirement
• Reports now go directly to [email protected] via email
• Email address is optional for anonymous reporting
• Simplified UI (removed "Open in GitHub" button)

Technical Details:

• Uses MailChannels API (free on Cloudflare Workers)
• Emails sent from: [email protected]
• Emails sent to: [email protected]
• API endpoint tested locally and working correctly (only logs)

Testing Notes:

• Email delivery requires deployment to Cloudflare Workers (MailChannels doesn't work on localhost)
• MailChannels may require domain verification or DNS records (SPF/DKIM) for bettergov.ph
• If MailChannels doesn't work after deployment, the code can easily be updated to use alternative services like Resend or SendGrid
• All report data is logged to console as fallback if email fails

How to test after deployment (staging server):

1. Go to /philippines/hotlines
2. Click "Report Outdated Information"
3. Fill in hotline name and issue (required fields)
4. Submit the form
5. Check [email protected] for the email

Hotline Email Reporting Flow

How It Works (Simple)

flowchart LR
    A[User fills form] --> B[Submit to API]
    B --> C[API validates data]
    C --> D[Build email]
    D --> E[Send via MailChannels]
    E --> F[Email delivered]
    
    style A fill:#e1f5ff
    style F fill:#ffebee

Loading

Complete Flow

sequenceDiagram
    User->>Frontend: Fill form & submit
    Frontend->>API: POST /api/report-hotline
    API->>API: Validate data
    API->>MailChannels: Send email
    MailChannels->>Email: Deliver to bugs email
    API->>Frontend: Success response
    Frontend->>User: Show success message

Loading

What Gets Sent

Email Details:

• From: noreply at bettergov.ph
• To: bugs at bettergov.ph
• Subject: Hotline Report: [hotline name]
• Body: Report details (hotline name, issue, optional fields)

Required Fields:

• Hotline Name
• Issue description

Optional Fields:

• What should it be
• Source link
• Reporter email

[KishonShrill]

I'll take note of these after deployment

[Sheape]

In my opinion, the reports should still go under GitHub issues. Some volunteers may be willing to update outdated hotlines if they are visible in GitHub issues. Just sending it as email would only make it visible to us maintainers which is not really ideal.

Additionally, I propose just sending it in GitHub issues and mark it with a certain label like hotline-bugs.

[Justin322322]

I've updated the feature based on your feedback. Reports now go to GitHub issues instead of email so volunteers can see and help out.

What changed:

• Reports create public GitHub issues automatically
• Users don't need a GitHub account - the API handles it for them
• Issues get tagged with hotline, data-update, and community-report labels
• If someone provides their email, it's hidden in an HTML comment (only you maintainers can see it)
• Users get a link to their issue after submitting

Setup (you'll need to do this once):

1. Create a GitHub token:

   • Head to https://github.com/settings/tokens
   • Click "Generate new token (classic)"
   • Name it something like "BetterGov Hotline Reporter or your choice"
   • Check the public_repo scope
   • Generate and copy the token

2. Add it to Cloudflare:

   wrangler secret put GITHUB_TOKEN

   Paste the token when it asks

3. For production:

   wrangler secret put GITHUB_TOKEN --env production

Testing it out:

1. Deploy to your staging environment
2. Go to /philippines/hotlines
3. Click "Report Outdated Information" and submit something
4. Check if the issue shows up at https://github.com/bettergovph/bettergov/issues with the right labels

The reporter's email (if they provide one) will be in an HTML comment in the issue - public can't see it but you can view it in the markdown source if you need to follow up with them.