refactor: replace GitHub integration with email-based reporting

Justin322322 · KishonShrill · commit f556c5fe2ca3 · 2025-11-04T20:05:52.000+08:00
- Remove GitHub API integration and token requirement
- Implement email-based reporting using MailChannels
- Send reports to bugs@bettergov.ph
- Make reporter email optional for anonymous reporting
- Simplify UI by removing 'Open in GitHub' button
- Add fallback console logging if email fails
- Update error messages to be more user-friendly
diff --git a/functions/api/report-hotline.ts b/functions/api/report-hotline.ts
@@ -74,163 +74,99 @@ export async function onRequest(context: {
       );
     }
 
-    // Create GitHub issue via API
-    const githubToken = env.GITHUB_TOKEN;
-    if (!githubToken) {
-      return new Response(
-        JSON.stringify({
-          error: 'GitHub integration not configured',
-          fallback:
-            'Please report directly at https://github.com/bettergovph/bettergov/issues/new',
-        }),
-        {
-          status: 503,
-          headers: { 'Content-Type': 'application/json' },
-        }
-      );
-    }
-
-    // Log report submission (no PII)
+    // Log report submission (no PII in logs)
     console.log(
-      `[Report Submission] Creating issue for hotline: "${data.hotlineName}"`
+      `[Report Submission] Received report for hotline: "${data.hotlineName}"`
     );
 
-    // Construct issue body (NO PII included)
-    const issueBody = `## Hotline Information Issue
+    // Construct email body
+    const emailBody = `
+New Hotline Report Submission
+=============================
 
-### Which hotline has outdated information?
-${data.hotlineName}
+Hotline Name: ${data.hotlineName}
 
-### What is incorrect?
+What is incorrect:
 ${data.issue}
 
-${data.correctInfo ? `### What should it be?\n${data.correctInfo}\n\n` : ''}
-${data.source ? `### Source\n${data.source}\n\n` : ''}
+${data.correctInfo ? `What should it be:\n${data.correctInfo}\n\n` : ''}
+${data.source ? `Source:\n${data.source}\n\n` : ''}
+${data.reporterEmail ? `Reporter Email: ${data.reporterEmail}\n\n` : ''}
 ---
-Reported via API from: /philippines/hotlines
-Timestamp: ${new Date().toISOString()}`;
-
-    // Create GitHub issue with timeout handling
-    const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10s timeout
+Reported from: /philippines/hotlines
+Timestamp: ${new Date().toISOString()}
+    `.trim();
+
+    // Send email using Cloudflare Email Workers (MailChannels)
+    // This is a free service available on Cloudflare Workers
+    const emailPayload = {
+      personalizations: [
+        {
+          to: [{ email: 'bugs@bettergov.ph', name: 'BetterGov Team' }],
+        },
+      ],
+      from: {
+        email: 'noreply@bettergov.ph',
+        name: 'BetterGov Hotline Reporter',
+      },
+      subject: `Hotline Report: ${data.hotlineName}`,
+      content: [
+        {
+          type: 'text/plain',
+          value: emailBody,
+        },
+      ],
+    };
 
-    let githubResponse: Response;
+    // Try to send email via MailChannels (free on Cloudflare Workers)
     try {
-      githubResponse = await fetch(
-        'https://api.github.com/repos/bettergovph/bettergov/issues',
+      const emailResponse = await fetch(
+        'https://api.mailchannels.net/tx/v1/send',
         {
           method: 'POST',
           headers: {
-            Authorization: `Bearer ${githubToken}`,
             'Content-Type': 'application/json',
-            'User-Agent': 'BetterGov-Hotline-Reporter',
-            Accept: 'application/vnd.github.v3+json',
           },
-          body: JSON.stringify({
-            title: `Outdated Hotline: ${data.hotlineName}`,
-            body: issueBody,
-            labels: ['hotline', 'data-update', 'user-report'],
-          }),
-          signal: controller.signal,
+          body: JSON.stringify(emailPayload),
         }
       );
-    } catch (fetchError) {
-      clearTimeout(timeoutId);
 
-      // Handle abort/timeout error
-      if (fetchError instanceof Error && fetchError.name === 'AbortError') {
-        console.error('GitHub API request timed out');
-        return new Response(
-          JSON.stringify({
-            error: 'Request timed out',
-            message: 'GitHub API did not respond in time',
-          }),
-          {
-            status: 504,
-            headers: { 'Content-Type': 'application/json' },
-          }
+      if (!emailResponse.ok) {
+        const errorText = await emailResponse.text();
+        console.error(
+          `Email sending failed (status ${emailResponse.status}):`,
+          errorText
+        );
+        // Don't fail the request - just log it
+        console.log(
+          '[Fallback] Report logged to console for manual processing'
         );
+      } else {
+        console.log('[Report Success] Email sent successfully');
       }
-
-      // Handle other fetch errors (network issues, etc.)
-      console.error('GitHub API fetch error:', fetchError);
-      return new Response(
-        JSON.stringify({
-          error: 'Failed to connect to GitHub',
-          message:
-            fetchError instanceof Error ? fetchError.message : 'Network error',
-        }),
-        {
-          status: 503,
-          headers: { 'Content-Type': 'application/json' },
-        }
-      );
-    } finally {
-      clearTimeout(timeoutId);
-    }
-
-    if (!githubResponse.ok) {
-      const errorText = await githubResponse.text();
-      // Log detailed error server-side for debugging
-      console.error(
-        `GitHub API error (status ${githubResponse.status}):`,
-        errorText
-      );
-      // Return generic error to client without exposing sensitive details
-      return new Response(
-        JSON.stringify({
-          error: 'Failed to create GitHub issue',
-        }),
-        {
-          status: githubResponse.status,
-          headers: { 'Content-Type': 'application/json' },
-        }
-      );
+    } catch (emailError) {
+      console.error('Email sending error:', emailError);
+      console.log('[Fallback] Report logged to console for manual processing');
     }
 
-    const githubData: unknown = await githubResponse.json();
-
-    // Runtime validation of GitHub response
-    if (
-      !githubData ||
-      typeof githubData !== 'object' ||
-      !('html_url' in githubData) ||
-      !('number' in githubData) ||
-      typeof githubData.html_url !== 'string' ||
-      typeof githubData.number !== 'number'
-    ) {
-      console.error(
-        'Invalid GitHub API response structure:',
-        JSON.stringify(githubData)
-      );
-      return new Response(
-        JSON.stringify({
-          error: 'Failed to create GitHub issue',
-          message: 'Invalid response from GitHub API',
-        }),
-        {
-          status: 500,
-          headers: { 'Content-Type': 'application/json' },
-        }
-      );
-    }
-
-    const issue = {
-      html_url: githubData.html_url,
-      number: githubData.number,
-    };
-
-    // Log successful issue creation (no PII)
+    // Always log the full report to console for backup
     console.log(
-      `[Report Success] GitHub Issue #${issue.number} created for hotline: "${data.hotlineName}"`
+      '[Report Details]',
+      JSON.stringify({
+        hotlineName: data.hotlineName,
+        issue: data.issue,
+        correctInfo: data.correctInfo,
+        source: data.source,
+        hasEmail: !!data.reporterEmail,
+        timestamp: new Date().toISOString(),
+      })
     );
 
+    // Return success to user regardless of email status
     return new Response(
       JSON.stringify({
         success: true,
         message: 'Report submitted successfully',
-        issueUrl: issue.html_url,
-        issueNumber: issue.number,
       }),
       {
         status: 201,
diff --git a/src/components/ReportHotlineModal.tsx b/src/components/ReportHotlineModal.tsx
@@ -1,5 +1,5 @@
 import { FC, useState, useEffect, useRef } from 'react';
-import { AlertCircleIcon, XIcon, ExternalLinkIcon } from 'lucide-react';
+import { AlertCircleIcon, XIcon } from 'lucide-react';
 
 interface ReportHotlineModalProps {
   isOpen: boolean;
@@ -161,8 +161,7 @@ const ReportHotlineModal: FC<ReportHotlineModalProps> = ({
       if (response.ok) {
         setSubmitStatus({
           type: 'success',
-          message: 'Report submitted successfully!',
-          issueUrl: data.issueUrl,
+          message: 'Report submitted successfully! We will review it soon.',
         });
         // Reset form
         setFormData({
@@ -191,13 +190,13 @@ const ReportHotlineModal: FC<ReportHotlineModalProps> = ({
         setSubmitStatus({
           type: 'error',
           message:
-            'Request timed out. Please check your connection and try again, or report directly on GitHub.',
+            'Request timed out. Please check your connection and try again.',
         });
       } else {
         setSubmitStatus({
           type: 'error',
           message:
-            'Network error. Please try again or report directly on GitHub.',
+            'Network error. Please try again or contact us at bugs@bettergov.ph',
         });
       }
     } finally {
@@ -208,27 +207,6 @@ const ReportHotlineModal: FC<ReportHotlineModalProps> = ({
     }
   };
 
-  const openGitHubIssue = () => {
-    const issueTitle = encodeURIComponent('Outdated Hotline Information');
-    const issueBody = encodeURIComponent(
-      `## Hotline Information Issue\n\n` +
-        `### Which hotline has outdated information?\n` +
-        `${formData.hotlineName || '<!-- Please specify the hotline name -->'}\n\n` +
-        `### What is incorrect?\n` +
-        `${formData.issue || '<!-- Describe what information is outdated or incorrect -->'}\n\n` +
-        `### What should it be?\n` +
-        `${formData.correctInfo || '<!-- Provide the correct information if you know it -->'}\n\n` +
-        `### Source (optional)\n` +
-        `${formData.source || '<!-- Link to official source confirming the correct information -->'}\n\n` +
-        `---\n` +
-        `Reported from: /philippines/hotlines`
-    );
-    window.open(
-      `https://github.com/bettergovph/bettergov/issues/new?title=${issueTitle}&body=${issueBody}&labels=hotline,data-update`,
-      '_blank'
-    );
-  };
-
   return (
     <div
       className='fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4'
@@ -275,17 +253,6 @@ const ReportHotlineModal: FC<ReportHotlineModalProps> = ({
               </div>
               <h3 className='text-xl font-semibold mb-2'>Thank you!</h3>
               <p className='text-gray-600 mb-4'>{submitStatus.message}</p>
-              {submitStatus.issueUrl && (
-                <a
-                  href={submitStatus.issueUrl}
-                  target='_blank'
-                  rel='noopener noreferrer'
-                  className='inline-flex items-center text-blue-600 hover:underline'
-                >
-                  View your report on GitHub
-                  <ExternalLinkIcon className='h-4 w-4 ml-1' />
-                </a>
-              )}
               <div className='mt-6'>
                 <button
                   onClick={onClose}
@@ -299,7 +266,7 @@ const ReportHotlineModal: FC<ReportHotlineModalProps> = ({
             <>
               <p className='text-gray-600 mb-6'>
                 Help us keep hotline information accurate and up-to-date. Your
-                report will be submitted as a GitHub issue.
+                report will be reviewed by our team.
               </p>
 
               {submitStatus.type === 'error' && (
@@ -416,24 +383,16 @@ const ReportHotlineModal: FC<ReportHotlineModalProps> = ({
                   <button
                     type='submit'
                     disabled={isSubmitting}
-                    className='flex-1 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed'
+                    className='w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed'
                   >
                     {isSubmitting ? 'Submitting...' : 'Submit Report'}
                   </button>
-                  <button
-                    type='button'
-                    onClick={openGitHubIssue}
-                    className='flex-1 px-6 py-3 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors flex items-center justify-center'
-                  >
-                    <ExternalLinkIcon className='h-4 w-4 mr-2' />
-                    Open in GitHub
-                  </button>
                 </div>
               </form>
 
               <p className='text-xs text-gray-500 mt-4 text-center'>
-                Don&apos;t have a GitHub account? No problem! Use the form above
-                to submit your report.
+                Your report will be sent to our team for review. If you provided
+                an email, we may contact you for clarification.
               </p>
             </>
           )}
