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 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