Sayali - Add: Success and Error Feedback to Help Request Submission

[sayali-2308]

Description

Fixes #22 (PRIORITY Medium) from HGN Phase I Bugs and Needed Functionalities doc - HGN Questionnaire Dashboard: Add Success and Error Feedback to Help Request Submission

Currently, users receive no feedback when submitting a help request from the Help Modal. This PR adds UI feedback with success/error toast notifications, disables the submit button during processing to prevent duplicate submissions, and re-enables it after completion. Backend API integration complete with merged PR OneCommunityGlobal/HGNRest#2045

Related PRS (if any):

This PR builds on top of merged PR #4291 (Neeraj - Fix being able to submit the help request form).
Integrated with backend PR OneCommunityGlobal/HGNRest#2045 (help request tracking API) which has now merged to development.

Main changes explained:

• Updated src/components/LandingPage/HelpModal.jsx to add submission state management
• Added isSubmitting state variable to track submission status
• Implemented toast.success() notification displaying "Help request submitted successfully!" on successful submission
• Implemented toast.error() notification in catch block for error handling
• Added validation toast.error('Please select a help category') if user clicks Submit without selecting option
• Added userId validation to ensure user is logged in before submission
• Integrated backend API call to /api/helprequest/create endpoint
• Modified submit button to show "Submitting..." text during processing
• Disabled submit button while request is being processed (disabled={!selectedOption || !isSoftwareDevMember || isSubmitting})
• Re-enabled button in finally block after submission completes or fails
• Added proper error logging for debugging

How to test:

Prerequisites

1. Checkout current branch: Sayali_Help_Request_Success_Error_Feedback
2. Run npm install in frontend repo
3. Backend must be on development branch (includes merged PR XiaoW_Hotfix of adding a temporary fix to the task check for displaying timeentry correctly #2045)
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 admin user (or any user in Software Development Team)
8. Navigate to /hgnhelp

Test Case 1: Success Feedback

1. Click anywhere on page to trigger Help Request Modal
2. Click dropdown "Select an option"
3. Choose any category (e.g., "Figma", "Frontend and Backend Overall")
4. Click "Submit" button
   • Expected: Button text immediately changes to "Submitting..."
   • Expected: Button becomes disabled (grayed out, not clickable)
   • Expected: Green toast notification appears: "Help request submitted successfully!"
   • Expected: Modal closes automatically
   • Expected: Dropdown selection resets to empty
   • Expected: Help request saved to database via API

Test Case 2: Validation - No Category Selected

1. Open help modal
2. Do NOT select any category (leave as "Select an option")
3. Click "Submit" button
   • Expected: Modal stays open
   • Expected: Button remains enabled
   • Expected: Dropdown still shows "Select an option"

Test Case 3: Prevent Duplicate Submissions

1. Open help modal
2. Select a category
3. Click "Submit" button 10 times rapidly in succession
   • Expected: Button becomes disabled after first click
   • Expected: Only ONE success toast appears (not 10 toasts)
   • Expected: Subsequent clicks do nothing
   • Expected: Modal closes only once

Test Case 4: Button Re-enables After Submission

1. Open help modal
2. Select category and click Submit
3. Wait for success toast and modal to close
4. Open help modal again
   • Expected: Submit button is enabled
   • Expected: Button text is "Submit" (not stuck on "Submitting...")
   • Expected: Can submit new help request

Test Case 5: Dark Mode Support

1. Toggle dark mode using moon icon in header
2. Open help modal
3. Select category and submit
   • Expected: Success toast visible with proper contrast in dark mode
   • Expected: Modal styling correct in dark mode
   • Expected: Button states visible in dark mode

Test Case 6: User Without Software Dev Team Access

1. Log in as user NOT in Software Development Team
2. Open help modal
   • Expected: Submit button disabled with warning message
   • Expected: Cannot submit (existing behavior from PR Neeraj Fix being able to submit the help request form #4291)

Test Case 7: Backend API Integration

1. Open DevTools → Network tab
2. Submit a help request
3. Check network request to /api/helprequest/create
   • Expected: POST request sent with userId, topic, description
   • Expected: 201 response received
   • Expected: Help request created in database

Screenshots or videos of changes:

Note:

• Success feedback, button disabling, and duplicate prevention fully functional and tested
• Error handling code implemented and tested
• Backend API integration complete with merged PR Sayali - feat: Add Backend API for Help Feedback Modal and Request Tracking HGNRest#2045
• All toast notifications use react-toastify library (already installed in project)
• UserId validation added to prevent submission errors

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	0eddc00
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6996018b49dbc300076f84d3
😎 Deploy Preview	https://deploy-preview-4844--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
B Maintainability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

[Anusha-Gali]

Hi Sayali,

I have reviewed the PR locally and all the test cases have passes successfully.

4844.mp4