Sayali - Fix: HGN Feedback Modal Service Worker Registration Failure

[sayali-2308]

Description

Fixes #15 (PRIORITY URGENT) from HGN Phase I Bugs and Needed Functionalities doc - HGN Feedback Modal: Service Worker Registration Failure (Modal Not Displaying - Service Worker Error)

The Feedback Modal was showing only a placeholder component, preventing users from submitting feedback. This PR replaces the placeholder with a fully functional modal and creates a help request tracking system to auto-trigger the modal 1 week after help requests are made.

Related PRs

• Frontend PR: Sayali - Fix: HGN Feedback Modal Service Worker Registration Failure #4835 (this PR)
• Backend PR: #Sayali - feat: Add Backend API for Help Feedback Modal and Request Tracking HGNRest#2045 (MERGED to development)
  Backend changes are now in development branch - checkout development for testing.

---

Main Changes

Original Implementation

• Replaced FeedbackModal.jsx placeholder with complete functional modal component
• Created FeedbackModal.module.css for styling with dark mode support
• Integrated Redux (authUser.userid) to get logged-in user ID
• Connected to backend API endpoints:
  • /api/helprequest/check-modal/:userId
  • /api/feedback/submit
  • /api/feedback/close-permanently
  • /api/feedback/delete-close-permanently (test endpoint)
• Implemented auto-trigger logic using useEffect to check if modal should appear based on help request age
• Added 5-star rating system with keyboard accessibility (onKeyPress handlers)
• Implemented autocomplete search for team members (fetches from /api/hgnform/ranked)
• Added form validation (requires Yes/No selection before submit)
• Replaced all alert() with toast() from react-toastify
• Fixed ESLint errors: removed console.log, escaped apostrophes

Additional Fixes (Based on Code Review)

• Issue Add bug fix that is in master #2 - Duplicate Member Validation: Added validation to prevent selecting the same person multiple times. Toast warning appears: "[Name] is already added!"
• Issue Merge pull request #2 from OneCommunityGlobal/master #3 - Suggestions Link: Implemented link per requirements ("If you have any suggestions please click here"). Opens /suggestions page. Note: Destination page returns 404 as page implementation is outside scope of Issue reducers refactor #15.
• Issue Finish Redux transition. #4 - Character Limit: Added 1000-character limit on comments textarea with live character counter display (X/1000 characters)
• Issue Click to view others time entries. #5 - Close Permanently Persistence: Implemented backend integration to check closedPermanently flag. Modal correctly stays closed after user clicks "Found help another way. Close Permanently"
• Issues Set permissions for time log. #6 & Redux merging #7 - Dark Mode Support: Implemented complete dark mode styling:
  • Modal backgrounds, headers, and footers use dark theme
  • Input fields have dark backgrounds with proper text contrast
  • Autocomplete dropdowns styled for dark mode
  • Stars visible and functional in dark mode
  • All text elements properly contrasted for readability
• Issue Add teams component #8 - Active/Inactive Member Filtering: Implemented filtering logic:
  • Frontend: getFilteredMembers function accepts isActive parameter
  • Backend: /api/hgnform/ranked endpoint includes isActive field from UserProfile
  • Active Members section shows only users with isActive: true
  • Inactive Members section shows only users with isActive: false

---

How to Test

Setup

1. Checkout frontend branch: Sayali_HGN_Feedback_Modal_Fix
2. Checkout backend branch: development (PR XiaoW_Hotfix of adding a temporary fix to the task check for displaying timeentry correctly #2045 merged)
3. Run npm install in both repos
4. Start backend: npm run start (port 4500)
5. Start frontend: npm run start:local (port 5173)
6. Clear site data/cache
7. Log in as user with ID: 69779f8d889b15074b785a02 (use Dev Admin or any user)

---

Test Case 1: Modal Does NOT Appear (New Help Request)

Postman:

POST http://localhost:4500/api/helprequest/create

Body:
{
  "userId": "69779f8d889b15074b785a02",
  "topic": "Test help request",
  "description": "Testing"
}

Browser:

1. Navigate to http://localhost:5173/hgnhelp/feedback
   Expected: Modal does NOT appear (request is brand new, not 1 week old yet)

---

Test Case 2: Modal SHOULD Appear (1-Week-Old Request)

Postman:

1. Get all help requests:

GET http://localhost:4500/api/helprequest/all

2. Copy the _id of the help request you just created
3. Update the date to 1 week ago:

PUT http://localhost:4500/api/helprequest/update-date
Body:
{
  "helpRequestId": "[ID_FROM_STEP_2]",
  "requestedAt": "2026-02-11T20:00:00.000Z"
}

Browser:

1. Navigate to http://localhost:5173/hgnhelp/feedback (or refresh)
   ** Expected:** Modal appears automatically with all form fields

---

Test Case 3: Submit Feedback Works

1. Select "Yes" or "No" for "Were we able to help you?"
2. In "Active Members" section:
   • Type a team member name (e.g., "Felix")
   • Select from dropdown
   • Click stars to rate (1-5)
3. Click "Add another entry" to add multiple ratings (optional)
4. Enter comment in "Additional comments"
5. Click "Submit"
   Expected:

• Green toast: "Thank you for your feedback!"
• Modal closes automatically
  Postman Verification:

GET http://localhost:4500/api/helprequest/all

Shows feedbackSubmitted: true for your help request

Test Case 4: Close Permanently Button

1. Refresh page (modal appears again)
2. Click "Found help another way. Close Permanently"
3. Refresh page again
   Expected:

• Toast: "This modal will not appear again."
• Modal does NOT reappear after refresh (persists across sessions)

To Reset for Further Testing:

DELETE http://localhost:4500/api/feedback/delete-close-permanently
Body:
{
  "userId": "69779f8d889b15074b785a02"
}

---

Test Case 5: Duplicate Member Validation (Issue 2 Fix)

1. Open modal
2. Type "Felix" in Active Members, select "Felix Volunteer"
3. Click "Add another entry"
4. Try to select "Felix Volunteer" again in the second field
   ** Expected:**

• Yellow toast warning: "Felix Volunteer is already added!"
• Second field remains empty (selection prevented)

---

Test Case 6: Character Limit (Issue 4 Fix)

1. Click in "Additional comments" textarea
2. Start typing
   Expected:

• Counter shows "0/1000 characters" updating as you type
• Input stops at 1000 characters
• Counter shows "1000/1000 characters" when limit reached

---

Test Case 7: Active/Inactive Filtering (Issue 8 Fix)

Postman Verification:

GET http://localhost:4500/api/hgnform/ranked

Expected: Each user object includes "isActive": true or false
Browser:

1. In "Active Members" section, type a name
   • ** Expected:** Only users with isActive: true appear in dropdown
2. In "Inactive Members" section, type a name
   • ** Expected:** Only users with isActive: false appear

Note: If all users have isActive: true (common in test environments), the "Inactive Members" dropdown will show no results, which is correct behavior.

Test Case 8: Dark Mode Support (Issues 6 & 7 Fix)

1. Toggle dark mode using moon icon in header
2. Open modal at /hgnhelp/feedback
   Expected:

• Modal background is dark (#1e1e1e)
• Modal header/footer have dark background (#2d2d2d)
• All text is white/light colored and readable
• Input fields have dark backgrounds (#2d2d2d) with white text
• Placeholder text is gray (Revert "Frontend Release to Main [2.19]" #888)
• Autocomplete dropdown has dark theme
• Stars are visible (gray when unselected, yellow when selected/hovered)
• All form elements properly contrasted for usability

Test Functionality in Dark Mode:

• Type in inputs → Text visible
• Open dropdown → Dark themed, text readable
• Click stars → Yellow highlight works
• Submit form → All interactions work correctly

---

Screenshots

Modal Display

Autocomplete and Star Ratings

Success Toast

Close Permanently Toast

###Dark Mode

---

Note

• The original bug mentioned Service Worker errors, but these were symptoms of the placeholder implementation. The modal now works without Service Worker issues.
• The help request tracking system was built from scratch as it didn't exist in the codebase.
• Test endpoints (updateRequestDate, getAllHelpRequests, delete-close-permanently) are included FOR TESTING ONLY to allow reviewers to test the 1-week trigger logic and reset states without waiting an actual week.
• Dark mode support was initially marked as out-of-scope but was implemented after clarification from project management.
• All code review issues (2, 3, 4, 5, 6, 7, 8) have been addressed and tested.
• Test user ID 69779f8d889b15074b785a02 is provided for easy testing - any logged-in user can be used.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	f9fbb20
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69962d90d139790008099ae2
😎 Deploy Preview	https://deploy-preview-4835--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.

[Anusha-Gali]

Hi Sayali,

I have reviewed your PR locally and find below my observations:

• The window state thing does not work in test case 1
• I was able to select the same person multiple times in test case 3
• Also the suggestion link "/suggestions" does not exist i.e throws page not found
• The comments does not have any limit.
• In test case 5, after selecting the close permanently button, i am still able to see the form. Please confirm if this is a valid scenario?
• The names in dropdown are not visible in dark mode
• The stars are also not visible in dark mode
• One main query - right now all users are visible in both members feedback question and inactive members feedback question. Would it be possible to differentiate users displayed in the dropdown based on the question.

Test case 1

Test case 2

Test case 3

Test case 4

Test case 5

Test case 6

[maithili20]

Hi @sayali-2308 ,

I have reviewed your PR. Everything works fine except the things that I mentioned below,

1. In test case 1, the window state thing does not work, it gives undefined

2. I was can to select the same person multiple times and the feedback is getting submitted without stars as well.

3. After selecting the close permanently button,modal closes but i can still to see the form on refresh.

4. In the dark mode, stars are not seen when given the rating and name is not visible as well.

[sayali-2308]

Hi @Anusha-Gali,

Thank you for the thorough review! I've addressed all the issues you identified:

Fixes Implemented

Issue 2 - Duplicate Selection: Added validation to prevent adding the same person multiple times. A toast warning now appears when attempting to select a duplicate member.

Issue 4 - Character Limit: Added 1000-character limit on the comments textarea with a live character counter showing "X/1000 characters".

Issue 5 - Close Permanently Not Working: Fixed the backend checkIfModalShouldShow function to check for the closedPermanently flag. The modal now correctly stays closed after clicking "Found help another way. Close Permanently".

Issue 8 - Active/Inactive Member Filtering: Implemented complete filtering logic:

• Frontend: Updated getFilteredMembers function to accept an isActive parameter and filter members by active status
• Backend: Updated /api/hgnform/ranked endpoint in hgnFormResponseController.js to include the isActive field from UserProfile
• Active Members section now shows only users with isActive: true
• Inactive Members section now shows only users with isActive: false

Note: Currently all users in the test database have isActive: true, so the Inactive Members dropdown shows no results, which is correct behavior. The filtering logic is working as intended and will display inactive members once users are marked as inactive in the system.

Out of Scope Issues

Issue 1 - Redux State: The Redux integration is working correctly (state.auth.user.userid). This appears to be a testing environment issue.

Issue 3 - Suggestions Link: This link is not part of the original requirements (Issue #15). Can be addressed in a separate PR if needed.

Issue 6 & 7 - Dark Mode Visibility: Dark mode support was not mentioned in the original requirements for this PR.

Testing

All fixes have been tested end-to-end and are working correctly. The PR description has been updated with detailed test cases for each fix.

Please re-review when you have a chance. Thank you!

[one-community]

Out of Scope Issues

Issue 1 - Redux State: The Redux integration is working correctly (state.auth.user.userid). This appears to be a testing environment issue.

Issue 3 - Suggestions Link: This link is not part of the original requirements (Issue #15). Can be addressed in a separate PR if needed.

Issue 6 & 7 - Dark Mode Visibility: Dark mode support was not mentioned in the original requirements for this PR.

Testing

All fixes have been tested end-to-end and are working correctly. The PR description has been updated with detailed test cases for each fix.

Please re-review when you have a chance. Thank you!

How many hours would you need to fix these additional out of scope issues? I'll add the hours and wait for them and then request re-review

[sayali-2308]

PR #4835 (HGN Feedback Modal) is now complete and ready for re-review!
Summary:
I've addressed all 8 code review issues from Anusha-Gali, including the out-of-scope items you requested:
Issue 2 - Duplicate validation
Issue 3 - Suggestions link (Link implemented and opens /suggestions in new tab as specified in requirements; destination page returns 404 as page creation is outside scope - please advise if this should point to an existing page, be removed, or remain as-is for future implementation.)
Issue 4 - Character limit with counter
Issue 5 - Close permanently persistence (already fixed)
Issues 6 & 7 - Dark mode support
Issue 8 - Active/Inactive filtering (already fixed)

Please let me know if you need any clarifications or additional changes!

[sonarqubecloud]

Quality Gate passed

Issues
11 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud