Shravan - Email Management UI Fixes (Completing Apoorva's PR #4492 and #4731)

[Shravan-neelamsetty]

Description

This PR completes the Email Management UI improvements by addressing all 11 critical issues identified in Chaitanya's comprehensive feedback on PR #4492. This work takes over from Apoorva's previous attempts and provides a complete, tested solution for the Email Announcement System frontend.

Fixes: High Priority Issues from Chaitanya's feedback (PDF attached to PR #4492)
Implements: Email Management System Enhancement - Complete UI/UX Fixes

Related PRs :

Frontend:

Supersedes #4492 (Apoorva - original with conflicts)
Supersedes #4731 (Apoorva - clean version)

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 for /announcements/email/send and /announcements/email/outbox
• Created getViewFromPath() function to parse URLs and sync with component state
• Updated navigation handlers to push URL changes via history.push()

Issue 2: Search UX in Templates

• Updated EmailTemplateList.jsx - Removed conditional wrapper around controls section
• Updated Controls (search, sort, create button) to stay visible during loading with disabled state
• Updated Results count to only show when not loading

Issue 3: Variable Labels in Preview

• Created getVariableTypeIcon() helper function with emoji icons (📄, 🎥, 🖼️, etc.)
• Updated EmailTemplateEditor.jsx preview modal to show icon + variable name
• Updated EmailTemplateList.jsx info modal to match same icon format
• Deleted references to non-existent variable.label property

Issue 4: Remove Validate API

• Deleted validateEmailTemplate import and function calls from EmailTemplateEditor
• Deleted API call block from handleSave function
• Updated dependencies array and PropTypes to remove validate references

Issue 5: Template Creation Bug

• Created createdTemplateId state variable to track newly created templates
• Updated handleSave to capture and use template ID after creation
• Updated Save logic to use templateId || createdTemplateId for updates
• Updated Preview function to use same ID logic

Issue 6: Auto Extract Messages

• Updated Auto Extract error handling to use toast.info instead of toast.alert
• Updated Messages to be informative rather than error-based
• Created better user feedback for "no variables" and "all variables defined" scenarios

Issue 7: Invalid YouTube URL Validation

• Updated VariableRow component in IntegratedEmailSender.jsx
• Deleted gray placeholder div for invalid images
• Created red Alert component with FaExclamationTriangle icon
• Created detailed error messages differentiating YouTube vs image URL failures

Issue 8: Draft Management

• Updated handleClearDraft to use RESET_FORM action instead of individual dispatches
• Updated Function to clear draft notification and draft age states
• Updated Toast from info to success for better feedback

Issue 9: Outbox Management

• Created Confirmation dialog in handleRetryEmail before retry executes
• Updated Row 6 labels from "Sent/Failed Recipients" to "Sent/Failed Batches"
• Updated Counts to filter batches by status
• Verify isActive prop already triggers fresh data fetch

Issue 10: Template Load Error Handling

• Created Loading toast when fetching template details
• Created Success toast showing variable count
• Created Error toast with clear message when loading fails
• Updated Template selection logic to not select if loading fails

Issue 11: Resend Email Modal Blocking

• Updated handleSubmit in ResendEmailModal to not await full completion
• Updated Modal to close immediately after initiating resend
• Created Background promise handling without blocking UI
• Created Toast notification explaining processing will continue

Additional Fixes

• Updated CSS files renamed to .module.css for CSS Modules compliance
• Updated All imports changed to use .module.css
• Updated Announcements/index.jsx to import useEffect
• Deleted CSS duplicate selectors from multiple files
• Created Consistent emoji icon system across all modals

How to test:

Setup:

1. Check into branch shravan/email-management-fixes
2. Run npm install to ensure dependencies are up to date
3. Clear site data/cache (Ctrl+Shift+Delete or Cmd+Shift+Delete)
4. Backend: Check out branch chaitanya-mailchimp-replacement in HGNRest repo
5. Backend: Run npm install && npm run dev (should start on port 4500)
6. Frontend: Run npm start (should start on port 5173)
7. Log in as a user with sendEmails permission (owner role)

Test Issue 1 (URL Navigation):

1. Go to Announcements → Email
2. Verify URL is /announcements/email and dashboard shows
3. Click "Manage Templates" card
4. Verify URL changes to /announcements/email/templates
5. Click "Back to Dashboard"
6. Verify URL returns to /announcements/email
7. Click "Email" card
8. Verify URL changes to /announcements/email/send
9. Click "Outbox" tab
10. Verify URL changes to /announcements/email/outbox
11. Press browser back button multiple times
12. Verify navigation works correctly with URL changes

Test Issue 2 (Search UX):

1. Go to Templates page
2. Type "test" in search box
3. Verify search bar, sort dropdown, and "Create Template" button stay visible during loading
4. Verify only the template list area shows loading spinner

Test Issue 3 (Variable Labels):

1. Create template: Name="Test", Subject="Hi {{name}}", Content="Welcome {{name}}"
2. Auto Extract → Add variables
3. Click "Preview"
4. Verify variables show as "📄 name" with icon (NOT "name (No Label)")
5. Go to Templates list → Click "Details" (info icon) on any template
6. Verify same emoji icon format in info modal

Test Issue 4 (Validate API):

1. Open DevTools → Network tab
2. Create/edit template
3. Click "Save & Continue"
4. Verify NO call to /validate endpoint (only POST/PUT to /api/email-templates)

Test Issue 5 (Template Save Bug):

1. Create template with unique name "UniqueTest789"
2. Click "Save & Continue" (1st time)
3. Verify toast: "Template created successfully! You can continue editing."
4. Make a change to content
5. Click "Save & Continue" (2nd time)
6. Verify toast: "Template updated successfully!" (NOT "name already exists" error)

Test Issue 6 (Auto Extract):

1. Create template with content: "Hello world" (no variables)
2. Click "Auto Extract"
3. Verify blue info toast (not red error) says "No variables found..."
4. Add content: "Hi {{name}}"
5. Auto Extract → Add variable
6. Auto Extract again
7. Verify blue info toast says "All variables already defined..."

Test Issue 7 (Invalid YouTube):

1. Send Email → Select "Test Template by Anusha"
2. Fill videoUrl with: https://www.youtube.com/watch?v=INVALIDFAKE123
3. Verify red Alert box appears (not gray placeholder)
4. Verify error message explains video couldn't be loaded

Test Issue 8 (Draft Management):

1. Send Email → Select template → Fill variables
2. Wait 3 seconds (auto-saves)
3. Refresh page
4. Verify "Draft Available" notification shows
5. Click "Restore" → Verify form restored
6. Click "Clear Draft" → Confirm
7. Verify form cleared completely and notification gone
8. Refresh page → Verify no draft notification

Test Issue 9 (Outbox):

Part 1: DevTools Network tab → Switch to Outbox → Verify API call → Switch to Send → Switch to Outbox again → Verify another API call
Part 2: Click "Retry" on FAILED email → Verify confirmation dialog appears → Click OK → Retry proceeds
Part 3: Click "Details" on email → Verify Row 6 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 /api/email-templates/ → Enable blocking → Select template → Verify error toast and template not selected → Disable blocking

Test Issue 11 (Resend Modal):

1. Outbox → Click "Resend" on any email
2. Select recipient option
3. Click "Resend Email"
4. Verify modal closes immediately
5. Verify toast: "Email created for resend successfully!"
6. Verify modal does NOT stay in "Sending..." state

Screenshots Recordings of changes:

Issue 1:

issue.1.mov

Issue 2:

issue.2.mov

Issue 3:

issue.3.mov

Issue 4:

issue.4.mov

Issue 5-6:

issue.5-6.mov

Issue 7-8:

issue.7-8.mov

Issue 9:

issue.9.mov

Issue 10:

issue.10.mov

Issue 11:

issue.11.mov

For Reviewers:

All 11 issues from Chaitanya's PDF feedback have been addressed
This PR supersedes both #4492 and #4731
Backend PR #1945 must be running for full testing
Chaitanya is leaving in 3 weeks - please prioritize review
Original feedback: #4492 (comment)

[netlify]

❌ Deploy Preview for highestgoodnetwork-dev failed.

Name	Link
🔨 Latest commit	92d7bae
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/698f8e7fcb4dc20007f18c9a

[Anusha-Gali]

Hi Shravan,

I have reviewed your PR locally and below are my trouble points:
Issue 1: The whole page is left sided and not in center (reference would be the old PR & also there is no gap between templates and custom; templated and the preview and send button; email distribution

Issue 2: The UI of the templates page is also left sided, the search text box goes over the left border and the search icon blocks the text; the create template button goes over the right border

Issue 3: In Create Template/Edit Email Template as well everything is left sided and there is no spacing between buttons and no spacing in template variables

Issue 4: Hover issue

Issue 5: As you can see the Modal is still in sending mode even after selecting resend and that resend failing, it stays the same even after refresh and reload

issue.mp4

Issue 6: Dark Mode not implemented properly in any page

darkmode.mp4

Test Case positives approaches

testissue1.mp4

testissue2.mp4

testissue3.mp4

testissue5.6.mp4

[sonarqubecloud]

Quality Gate failed

Failed conditions
4 Security Hotspots

See analysis details on SonarQube Cloud