Sai Shravan Neelamsetty taking over for Apoorva - Redo of email management UI improvements PR#4670 #4492
Conversation
…mponents; refactor EmailPanel to use new template structure for improved email functionality.
…components to enhance email functionality and styling; implement fullscreen mode and modal for email settings. Update template data structure for improved link handling.
…ject input and improving link handling; update email sending actions to include subject in payload. Refactor toast notifications for consistency in styling and error handling.
…ermission checks; enhance error handling in NewsletterTemplateEditor with improved toast notifications. Update template data for consistent styling in footer content.
…nt with URL-based tab management - Introduced a new route for Email Template Management accessible to specific user roles. - Enhanced the Announcements component to manage active tabs based on URL query parameters, improving user navigation. - Updated EmailPanel to support dynamic view switching between sending emails and managing templates, with URL synchronization. - Integrated modal for sending emails with templates in the NewsletterTemplateEditor, enhancing user experience.
…s and improving success notifications. Update requestor information in payload for permission checks and remove redundant success message display logic.
… for auto-refresh, and improved filter functionality. Added email preview feature and refined UI elements for better user experience.
…anual retry functionality, and enhance UI elements. Updated styles for loading and error states, and optimized template data handling in EmailTemplateList and EmailTemplateEditor.
- Introduced actions for fetching email batch and item audit trails, along with audit statistics. - Enhanced EmailBatchDashboard component to include buttons for viewing audit trails. - Updated reducer to manage loading states and errors for audit actions. - Added AuditTrailModal for displaying audit details, improving user experience and data visibility.
- Added a new protected route for viewing email announcements. - Refactored email batch actions to focus on parent Email records, including renaming actions and updating API endpoints. - Updated EmailBatchDashboard to manage emails instead of batches, improving clarity and functionality. - Enhanced AuditTrailModal and EmailTemplate components for better user experience and error handling. - Removed deprecated email sending functionality from templates, streamlining the process to utilize emailController endpoints. - Improved loading states and UI elements across various components for consistency and better user feedback.
- Changed the logic to check for full template data before fetching additional content. - Updated the API call to fetch full template data only when necessary, enhancing performance and user experience. - Improved error handling during the fetch process to ensure continuity in case of failures.
- Deleted emailBatchActions.js to streamline email management, focusing on parent Email records. - Updated emailTemplateActions.js to include new actions for previewing and validating email templates, while removing deprecated email sending actions. - Refactored EmailBatchDashboard and related components to utilize EmailOutbox for improved email management. - Enhanced error handling and loading states across various components for better user experience. - Removed unused styles and components related to the previous email batch dashboard, optimizing the codebase.
…m Email Management components
- Fixed EmailOutbox stat card alignment and added clickable filter functionality - Improved responsive design for mobile/tablet/desktop compatibility - Standardized button sizes across all components - Added EmailManagementShared.css for consistent styling - Created LoadingSpinner component for unified loading states - Fixed image preview overflow issues in IntegratedEmailSender - Implemented smart processing logic for pending emails (excludes failed) - Cleaned up ESLint warnings and replaced alerts with toast notifications - Fixed import paths and added proper error handling - Added WeeklyUpdateComposer and email constants
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
one-community
added
the
High Priority - Please Review First
There was a problem hiding this comment.
Hi Apoorva,
I have tested your PR locally and so far i have completed test 1 and test 2 and have observed the following issues.
Issue 1 - the point 3 c(2) and 7 aren't the same on frontend compared to what is mentioned over here.
3 c(2) - doesn't say VIDEO as mentioned in description
hence causes the video url to be sent as image instead of url
as mentioned in test 1 i did select "Image" type for videourl
7 - not sure if you meant red caption instead of red border
Issue 2 - Also as we had discussed over email - the broadcast to all subscribers - i can see that you have updated the description. Thank you.
Issue 3 - Row 5: Total Batches (blue bold) | Total Recipients (blue bold) - count 0 when count should be 3
Row 6: Sent Recipients (green bold) - count 0 when count should be 3 | Failed Recipients (red bold) - 0 (based over our discussion on email - that chain had 2 failed recipients and the count is not shown.
Issue 4 - "View" button to see recipients - the recipient are not listed
Issue 5 - I gave an incorrect mail id - yet i do not see a fail option
Issue 6 - resend email option - even though same/specific is selected it throws the toast error notification
Issue 7 - even retry option does not work even after the backend issue is fixed which cause the failed status , i have even tried by refreshing the entire page.
Issue 8 - Test Refresh Functionality - if we off and on the "Auto-Refresh" button in settings - the auto-refresh countdown stops and 0 and doesn't refresh unless we load the page and the test that feature again.
https://github.com/user-attachments/assets/7c323d6b-207c-4c78-89d0-466549bf3b3f
Issue 9 - Error Handling - though the error messages work as required i do not see a fail/retry option in outbox when the network is in offline and in send - once internet is connected, the preview and send modal doesn't refresh automatically unless selected again and even then i get error reasonably since variables are not present, but unless i select some other template and then my template again - the variable do not get updated or unless i do a refresh of the entire page by which i loose my current process.
https://github.com/user-attachments/assets/4d613939-49b9-4861-a06e-f7f56d352327
Issue 10 - Dark Mode - the invalid.image is not visible enough and the Email Outbox test is not visible
Issue 11 - Dark Mode - Settings dropdown content is not visible in dark mode
Issue 12 - issue in both light and dark mode is the extracted from content is not visible if the preview image is larger in size
Issue 13 - Some of the toast notifications stay on screen and do not disappear, as you can see in many of my above screenshots, do check base on this issue as well.
Note: Do let me or Jae know if any of the issues pointed out are out of scope, also will try to update again on issue 6,7 with a new OAUTH access token
VijayAnirudh
left a comment
VijayAnirudh
left a comment
There was a problem hiding this comment.
A test case is failing! Backend is working fine! Please mention the details that you wanted to include on the env file in the description.
Please pull latest changes. Nothing is different in frontend setup. |
The image tag is what you have selected in the template. I have changed it to video URL. The tags appear same as your choice in the template. I have addressed all the other issues. Please pull the latest code and test again. Thanks! |
There was a problem hiding this comment.
Hi Apoorva,
Thank you for looking into my feedback and fixing most of the errors, though there are a few that require your attention.
Issue 1: As you can see below, i did follow all instructions mentioned but do not see a
Type column showing "VIDEO" badge for videoUrl , it still shows image. But when i did custom email it worked since we keep the actual url. You can also see in previewe it shows .jpg
Not an issue (need clarification) - I hope this is what Chaitanya was trying to say when he explained about the not delivered part as to why it does not count under failed reciepent at OneCommunityGlobal/HGNRest#1945 (comment)
Issue 2: Even though i click on clear draft, the draft does not get deleted
Issue 3: Even when the connection is restored, the toast notification does not go away
Issue 4: The extracted from content is not visible if the preview image is larger in size
|
changes pushed:
Hi Anusha, Please check out pushed changes. |
|
one-community
changed the title
Hi Apoorva, Are you sure that the commits got pushed as all the issues I had mentioned still exist. |
|
@Anusha-Gali Are you on branch 4492 frontend and 1945 on backend? |
Yes Apoorva, I was on the stated branches. Also if i scroll through the history here, i do not see any commits done on this branch either. |
|
Hi Apoorva, Here is my end-to-end feedback on your PR. This document includes all the issues I noticed during testing. Mail Chimp Replacement UI Feedback_20260117_180711.pdf
|
one-community
changed the title
one-community
changed the title
one-community
changed the title
- Email template management with CRUD operations - Integrated email sender with template support - Email outbox with batch tracking and status monitoring - Retry and resend functionality for failed emails - Dark mode support throughout - Responsive design for all components - Fixed CSS files to use CSS Modules (.module.css) Taking over from Apoorva (PR #4492 and #4731) Note: CSS duplicates will be cleaned in next commit
Issue 2 - Search UX in Templates: - Keep search bar, sort dropdown, and create button visible during loading - Only show loading spinner in template list area - Disable controls during loading to prevent rapid changes Issue 3 - Variable Labels in Preview: - Remove 'No Label' text from variable preview modal - Show variable icon + name only - Add tooltip showing variable type on hover Other fixes: - Add missing useEffect import in Announcements component - Fix CSS syntax errors in EmailTemplateEditor - Add URL routing foundation (WIP for Issue 1) Taking over from Apoorva PR #4492 Based on Chaitanya's feedback
Description
This PR implements comprehensive UI/UX improvements for the Email Management system, specifically focusing on the EmailOutbox component's modal layout and batch information display. The changes address critical usability issues where email information and batch details were being cut off or not displaying properly.
Implements: Email Management System Enhancement - EmailOutbox Modal & Batch Display Improvements
Related PRS (if any):
NEW VERSION OF THIS IS #4731
This frontend PR is related to Chaitanya's backend PR for email management PR1945
To test this frontend PR, you may need to checkout Chaitanya's backend PR if the
/api/email-outbox/:emailIdendpoint is not yet merged to the main backend.…
Main changes explained:
EmailOutbox.jsx - Complete Modal & Batch Display Overhaul
Modal Layout Fixes:
centeredprop to custom top-aligned positioning withstyle={{ maxWidth: '95%', margin: '1.75rem auto' }}to maximize visible spacexlto 95% viewport width to accommodate all content without horizontal scrollingEmail Information Section Restructure:
rowandcol-md-6classesBatch Information Table Implementation:
table-dark) and striped rows (striped hover)API Integration Updates:
/api/emails/${emailId}/batchesto/api/email-outbox/${emailId}to match backend structureresponse.data.emailBatchestoresponse.data.data.batchesto match backend response formatresponse.data.success && response.data.databefore accessing batchesButton System Enhancement:
outline-primarytoprimary(solid blue)outline-dangertodanger(solid red)outline-warningtowarning(solid yellow)Retry Functionality Implementation:
handleRetryEmailfunction that calls/api/emails/${emailId}/retryendpointcurrentUser.useridandrolein request bodyStatus System Enhancement:
getStatusBadgefunction to handle all 5 email statuses:getStatusIconfunction with appropriate icons for each status:Performance Optimization:
isActiveprop to component signature with default valuetruefor backward compatibilityuseEffect(() => fetchData())useEffectthat only fetches data whenisActiveprop istrue[isActive, fetchData]to re-fetch when tab becomes activeIntegratedEmailSender.jsx - Variable Type & Preview Improvements
Variable Type Badge Display Fix:
{variable.type}to conditional logicvariable.name.toLowerCase().includes('video')Invalid Image/Video Preview Enhancement:
#f8f9fa) to white (#fff) for cleaner appearance#dee2e6) to red (#dc3545) to clearly indicate errorFormatting and Code Quality:
src/components/Announcements/index.jsx,src/components/Announcements/platforms/email/index.jsx,src/routes.jsxFiles Modified:
src/components/Announcements/platforms/email/emailOutbox/EmailOutbox.jsx- Major overhaul (modal, batch table, buttons, API, status system)src/components/Announcements/platforms/email/send/IntegratedEmailSender.jsx- Badge display and preview improvementssrc/components/Announcements/index.jsx- Prettier formattingsrc/components/Announcements/platforms/email/index.jsx- Prettier formattingsrc/routes.jsx- Prettier formattingHow to test:
Setup:
apoorva/email-management-ui-improvementsnpm installto ensure all dependencies are up to datenpm startto start the development serversendEmailspermission (admin or appropriate role)Test 1: Email Templates
{{firstName}}){{videoUrl}})Test 2: Send Email (IntegratedEmailSender)
Test 3: Email Outbox (Main Focus)
/api/email-outboxcalls are made while on Send tab/api/email-outboxcall is made ONLY when switching to Outbox tabTest 4: Dark Mode Compatibility
Test 5: Responsive Design
Test 6: Error Handling
Screenshots or videos of changes:
Summary of Changes
Fixed Issues:
Counter_On_Off_Functionality.mp4
Resend_Functionality.mp4
Retry_Functionality.mp4
Template_Restore_NetworkIssue.mp4
NEW CHANGES : 01/07/2026:
Issues Fixed
Issue 1: VIDEO Variable Type Not Supported ✅
Problem: The
videoUrlvariable was displaying a "URL" badge instead of "VIDEO" badge because the video type wasn't recognized.Files Changed:
src/components/EmailManagement/template-management/templates/EmailTemplateEditor.jsxIssue 2: Clear Draft Button Not Working ✅
Problem: Clicking "Clear Draft" showed a success toast notification but the form data remained visible in the UI. Only localStorage was cleared, not the component state.
Files Changed:
src/components/EmailManagement/email-sender/IntegratedEmailSender.jsxIssue 3: Offline Alert Banner Not Dismissing ✅
Problem: When internet connection was lost and then restored, the yellow "You are offline" Alert banner remained visible even though the connection was back.
Files Changed:
src/components/EmailManagement/email-sender/IntegratedEmailSender.jsxIssue 4: Large Preview Images Hiding Extracted Content ✅
Problem: When preview emails contained large images, the images would overflow and hide the extracted text content below them, making it difficult to see the full email preview.
Files Changed:
src/components/EmailManagement/email-sender/IntegratedEmailSender.cssEnhancement: Automatic HTML Wrapping for Images and Videos ✅
Problem: Users had to manually write HTML tags (
<img>and<a>tags) in their email templates to display images and videos properly in the preview.Files Changed:
src/components/EmailManagement/email-sender/utils.jsTesting
All issues have been tested locally:
Screenshots or videos of changes:
AlertBanner_Fixed_Issue3.mp4
ClearDraft_Fixed_Issue2.mp4
Network_Alert_Disappearing.mp4