Fixed 4 critical UI/UX issues in the Email Management system:

[apoorvajainrp21]

Summary

Fixed 4 critical UI/UX issues in the Email Management system:

1. ✅ VIDEO Badge Type Support - Added VIDEO type with proper icon display in EmailTemplateEditor
2. ✅ Clear Draft Functionality - Completely resets all form states when clearing draft
3. ✅ Offline Alert Auto-Dismiss - Alert automatically dismisses when connection restored
4. ✅ Preview Image Sizing - Large images constrained with max-width in preview
5. ✅ BONUS: Auto HTML Wrapping - Videos automatically wrapped in clickable YouTube buttons

Files Changed

• IntegratedEmailSender.jsx - Added handleClearDraft and offline alert auto-dismiss
• IntegratedEmailSender.module.css - Added image size constraints for preview
• EmailTemplateEditor.jsx - Added VIDEO type support with icon
• utils.js - Added automatic HTML wrapping for images/videos

Testing

Test #1 - VIDEO Badge Type

1. Navigate to /announcements/email/templates
2. Create or edit a template
3. Add a new variable
4. Check "Type" dropdown - should see "Video" option
5. Select "Video" type
6. ✅ Verify VIDEO icon badge appears next to variable name

Test #2 - Clear Draft Functionality

1. Navigate to /announcements/email/sender (or /sendemail)
2. Fill out form: subject, recipients, content, select template
3. Wait for auto-save (draft indicator appears)
4. Click "Clear Draft" button
5. Confirm warning popup
6. ✅ Verify ALL fields reset: subject, recipients, content, template, header/footer images, schedule options

Test #3 - Offline Alert Auto-Dismiss

1. Open email sender page
2. Disconnect WiFi/internet
3. ✅ Verify red offline alert toast appears
4. Reconnect WiFi/internet
5. ✅ Verify alert automatically disappears (no manual close needed)

Test #4 - Preview Image Sizing

1. In email sender, use a template with an image variable
2. Add a large image URL (e.g., https://picsum.photos/2000/2000)
3. Click "Preview & Send"
4. ✅ Verify image is constrained and doesn't overflow preview
5. ✅ Verify preview is scrollable if content is long

Test #5 - Auto HTML Wrapping (BONUS)

1. Create/edit template with a VIDEO type variable
2. In email sender, provide a YouTube URL (e.g., https://www.youtube.com/watch?v=dQw4w9WgXcQ)
3. Click "Preview & Send"
4. ✅ Verify video renders as red clickable "▶ Watch Video on YouTube" button
5. ✅ Verify clicking button opens video in new tab

Related PRs

• Backend PR: Revert "Revert "Frontend Release to Main [3.25]"" #1945 (adds VIDEO variable type in emailConfig.js)
• Replaces: PR Sai Shravan Neelamsetty taking over for Apoorva - Redo of email management UI improvements PR#4670 #4492 (had merge conflicts)

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	61addf8
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/696b412ce1d4250008aad66d
😎 Deploy Preview	https://deploy-preview-4726--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 failed

Failed conditions
3 Security Hotspots

See analysis details on SonarQube Cloud

[iAbhi001]

Hi @apoorvajainrp21, thanks for working on these fixes!

I attempted to test this locally on the PR branch, but I am getting Page Not Found (404) when navigating to the testing routes listed in the description (/announcements/email/templates and /announcements/email/sender).

Before we can complete the functional review and testing, please address the following:

---

🚨 Action Items Required

1. Route Guidance / Navigation:

   • Could you clarify the exact updated URL routes or navigation steps to access the Email Template Editor and Email Sender pages locally?

2. Merge Conflicts:

   • There are active merge conflicts with development across all 4 files (IntegratedEmailSender.jsx, IntegratedEmailSender.module.css, utils.js, EmailTemplateEditor.jsx).
   • Please rebase/merge development into pr-4492-final and resolve the conflict markers.

3. SonarCloud Security Hotspots:

   • The SonarCloud Quality Gate is currently failing due to 3 Security Hotspots. Please review the SonarQube analysis and address those security flags.

---

[AdiDubbs]

Closing this as a redo with a new focus - #5464 replaces it.

The work here was carried forward through #4492, #4731 and #4762 and is on development already. What was still outstanding was a routing issue that made these pages unreachable, which the new PR fixes along with tests.