Open
Conversation
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
…tions, duplicate conditional
…gs, SocialMediaComposer
…onarCloud DoS hotspot
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
##Description
This PR completes the Email Management UI improvements by addressing all 11 critical issues identified in Chaitanya's comprehensive feedback on PR #4492, plus additional dark mode and layout improvements. This work takes over from Shravan's incomplete work and provides a complete, tested solution for the Email Announcement System frontend.
Fixes: #4762 (Priority: High) - Email Management UI Enhancement
Implements: Email Management System - Complete UI/UX Fixes with Dark Mode Support
##Related PRs:
Frontend:
Supersedes #4492 (Apoorva - original with conflicts)
Supersedes #4731 (Apoorva - clean version)
Takes over from shravan/email-management-fixes (incomplete)
Backend:
This frontend PR is related to OneCommunityGlobal/HGNRest#1945 backend PR (Chaitanya - Mailchimp Replacement)
To test this frontend PR, you need to checkout the backend PR #1945 on branch chaitanya-mailchimp-replacement
##Main changes explained:
Issue 1: URL Navigation
Updated src/components/Announcements/platforms/email/index.jsx - Added React Router integration with useHistory and useLocation hooks
Updated src/routes.jsx - Added missing routes and fixed import paths
Created getViewFromPath() function to parse URLs and sync with component state
Issue 2: Search UX in Templates
Updated EmailTemplateList.jsx - Controls stay visible during loading with disabled state
Issue 3: Variable Labels in Preview
Created getVariableTypeIcon() helper function with emoji icons (📄, 🎥, 🖼️, etc.)
Updated EmailTemplateEditor.jsx and EmailTemplateList.jsx to show icons
Issue 4: Remove Validate API
Deleted validateEmailTemplate import and function calls from EmailTemplateEditor
Issue 5: Template Creation Bug
Created createdTemplateId state variable to track newly created templates
Updated Save logic to use templateId || createdTemplateId for updates
Issue 6: Auto Extract Messages
Updated Auto Extract to use toast.info instead of toast.alert
Issue 7: Invalid YouTube URL Validation
Updated VariableRow component in IntegratedEmailSender.jsx
Created red Alert component with FaExclamationTriangle icon
Issue 8: Draft Management
Updated handleClearDraft to use RESET_FORM action
Updated Toast from info to success for better feedback
Issue 9: Outbox Management
Created Confirmation dialog in handleRetryEmail
Updated labels from "Sent/Failed Recipients" to "Sent/Failed Batches"
Issue 10: Template Load Error Handling
Created Loading, Success, and Error toasts for template loading
Issue 11: Resend Email Modal Blocking
Updated handleSubmit in ResendEmailModal to not await full completion
Modal closes immediately after initiating resend
##Additional Dark Mode & Layout Improvements:
Updated src/components/Announcements/platforms/email/EmailPanel.css - Added centering (max-width: 1400px, margin: 0 auto) and comprehensive dark mode styles
Updated src/components/EmailManagement/email-sender/IntegratedEmailSender.jsx - Fixed table header background color for dark mode
Updated src/components/EmailManagement/email-sender/IntegratedEmailSender.module.css - Enhanced dark mode styling for forms, buttons, and inputs
Updated public/index.css - Fixed background color inconsistencies
Fixed src/components/Announcements/platforms/social/SocialMediaComposer.jsx - Corrected import paths for CharacterCounter and ConfirmationModal
Moved SocialMediaComposer.module.css to correct location
##How to test:
Setup:
Check out branch sayali/email-management-fixes
Run npm install to ensure dependencies are up to date
Clear site data/cache (Ctrl+Shift+Delete or Cmd+Shift+Delete)
Backend: Check out branch chaitanya-mailchimp-replacement in HGNRest repo
Backend: Run npm install && npm run dev (should start on port 4500)
Frontend: Run npm start (should start on port 5173)
Log in as a user with sendEmails permission (use devadmin@hgn.net)
Test Issue 1 (URL Navigation):
Go to Announcements → Email
Verify URL is /announcements/email and dashboard shows
Click "Manage Templates" card → Verify URL changes to /announcements/email/templates
Click "Back to Dashboard" → Verify URL returns to /announcements/email
Click "Email" card → Verify URL changes to /announcements/email/send
Click "Outbox" tab → Verify URL changes to /announcements/email/outbox
Press browser back button multiple times → Verify navigation works correctly
Test Issue 2 (Search UX):
Go to Templates page
Type "test" in search box
Verify search bar, sort dropdown, and "Create Template" button stay visible during loading
Verify only the template list area shows loading spinner
Test Issue 3 (Variable Labels):
Go to Templates list → Click "Details" (ℹ️ icon) on any template
Verify variables show with emoji icons like "📄 name" (not "name (No Label)")
Click "Edit" on a template → Click "Preview"
Verify same emoji icon format in preview modal
Test Issue 4 (Validate API):
Open DevTools → Network tab
Create/edit template → Click "Save & Continue"
Verify NO call to /validate endpoint (only POST/PUT to /api/email-templates)
Test Issue 5 (Template Save Bug):
Create template with unique name "UniqueTest789"
Click "Save & Continue" (1st time) → Verify toast: "Template created successfully! You can continue editing."
Make a change to content → Click "Save & Continue" (2nd time)
Verify toast: "Template updated successfully!" (NOT "name already exists" error)
Test Issue 6 (Auto Extract):
Create template with content: "Hello world" (no variables)
Click "Auto Extract" → Verify blue info toast says "No variables found..."
Add content: "Hi {{name}}" → Auto Extract → Add variable
Auto Extract again → Verify blue info toast says "All variables already defined..."
Test Issue 7 (Invalid YouTube):
Send Email → Select "Test Template by Anusha"
Fill videoUrl with: https://www.youtube.com/watch?v=INVALIDFAKE123
Verify red Alert box appears with error icon (not gray placeholder)
Verify error message explains video couldn't be loaded
Test Issue 8 (Draft Management):
Send Email → Select template → Fill variables
Wait 3 seconds (auto-saves)
Refresh page → Verify "Draft Available" notification shows
Click "Restore" → Verify form restored
Click "Clear Draft" → Verify form cleared completely and notification gone
Refresh page → Verify no draft notification
Test Issue 9 (Outbox):
Switch to Outbox → DevTools Network tab → Verify API call
Switch to Send → Switch to Outbox again → Verify another API call
Click "Retry" on FAILED email → Verify confirmation dialog appears
Click "Details" on email → Verify shows "Sent Batches" and "Failed Batches" (not Recipients)
Test Issue 10 (Template Load Error):
Normal: Select template → Verify loading + success toasts
Error Simulation: DevTools → Network request blocking → Add pattern email-templates → Enable blocking
Select template → Verify error toast and template not selected
Disable blocking
Test Issue 11 (Resend Modal):
Outbox → Click "Resend" on any email
Select recipient option → Click "Resend Email"
Verify modal closes immediately
Verify toast: "Email created for resend successfully!"
Test Dark Mode (All Pages):
##Screenshots or videos of changes:
Upload these screenshots/videos:
Issue #7 - Invalid YouTube URL:
Issue #9 - Email Details Modal (Batches):
Issue #11 - Resend Modal:
Dark Mode - Send Email with Variables:
Dark Mode - Templates List:
Dark Mode - Outbox:
Dark Mode - Email Dashboard:
Dark Mode - Create/Edit Template:
Dark Mode - Full Send Email Page:
##Note:
For Reviewers: