Marcus finishes facebook autoposter frontend

[marcusyi1]

Description

This PR implements a comprehensive Facebook Pages auto-poster system for HGN, building upon and modernizing the foundational work completed in PR3270/PR1268 (basic posting) and PR3466/PR1359 (scheduling framework) by Snehal Patare.

Key capabilities:

• OAuth Authentication Flow: Secure Facebook Page connection via Facebook Login, with automatic token storage and validation
• Direct Posting: Post text, links, and images (URL or file upload) to connected Facebook Pages
• Post Scheduling: Schedule posts with PST timezone support, managed by cron jobs running every minute
• Post History & Management: Track all posts (direct and scheduled) with status monitoring, filtering, and edit/cancel capabilities for pending posts
• Image Upload Support: Direct file uploads (JPEG/PNG/GIF/WebP, <10MB) using Facebook's native multipart form-data API

This implementation uses modern OAuth patterns instead of hardcoded tokens, provides comprehensive error handling with user-friendly messaging, and includes permission-based access control using HGN's existing requestor system.

Fixes: High Priority Task - "Create appropriate auto-poster for Facebook + Facebook Groups" (Jae) - Facebook Pages component

Related PRS (if any):

Builds upon (already merged or pending approval):

• Frontend PR3270 & Backend PR1268 - Basic Facebook posting foundation (Snehal)
• Frontend PR3466 & Backend PR1359 - Scheduling framework (Snehal)

Do git checkout of OneCommunityGlobal/HGNRest#2005 in order to test this PR

Main changes explained:

New Files:

• src/actions/facebookAuthActions.js
• src/components/Announcements/FacebookSettings.jsx

Updated Files:

• src/components/Announcements/index.jsx
• src/components/Announcements/SocialMediaPostDetails.jsx
• src/components/Announcements/FacebookHistory.jsx
• src/actions/sendSocialMediaPosts.js
• src/utils/URL.js
• src/components/Announcements/Announcements.css

Environment Variables Added:
REACT_APP_FACEBOOK_APP_ID=your_app_id (must match backend FACEBOOK_APP_ID)

How to test:

Facebook Developer Account & App:

1. Create a Facebook App at developers.facebook.com
2. Add "Facebook Login for Business" product
3. Configure OAuth redirect URIs to include your local development URL (e.g., http://localhost:3000)

• Important: For testing post history with Facebook API data, your app must be in "Live" mode (not Development mode). Development mode restricts API read permissions.

4. Note your App ID and App Secret
5. Go to .env and post this:

• REACT_APP_FACEBOOK_APP_ID=your_app_id (must match backend)

Facebook Page:

• Have admin access to at least one Facebook Page for testing
• Page must be connected to your Facebook Business Portfolio (if using Business mode)

1. check into current branch
2. do npm install and npm run start:local to run this PR locally
3. Clear site data/cache
4. log as a user that has send email permissions (usually owner or admin)
5. go to dashboard→ Other Links→ send email → facebook
6. verify:

• OAuth Authentication Flow
• Direct Posting – Text Only
• Direct Posting – With Link
• Direct Posting – Image URL
• Direct Posting – File Upload
• Invalid File
• Scheduling Posts – Future Post
• Scheduling – Image File Upload
• Edit Scheduled Post
• Cancel Scheduled Post
• Post History – Filtering
• Facebook API Integration Warning
• Permissions & Authorization

10. verify this new feature works in dark mode

Screenshots or videos of changes:

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	4dc3a7e
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69690cefe775ce0008513d75
😎 Deploy Preview	https://deploy-preview-4714--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonarqubecloud]

Quality Gate passed

Issues
52 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.9% Duplication on New Code

See analysis details on SonarQube Cloud

[Anusha-Gali]

Hi Marcus,

I tried to review your PR but am unable to do so since i could not figure out few things required for the setup. If you could provide a video of setup it would be helpful.

Coming to where i am stuck, i did create a developer login and an app and did select the "Facebook login for business" but it says the below:
Facebook Login for Business requires advanced access
Your app has standard access to public_profile. To use Facebook Login for Business, switch public_profile to advanced access.

Now i did try to get advance access but it says "Verification required" and i am unable to understand what exactly am i to fill in that page, even upon adding details i could think of and saving, no luck. Also i then tried to make the app live but it stops saying i should provide a privacy policy but i am not confident as to what it is i am supposed to enter.