Feedback form for Events

Goal

This feature allows users to leave feedback on past events they have attended directly on the website.
The feedback is submitted using a text input field. Users with the staff role can access feedback via a hidden link on the event page (e.g., /events/[NUMBER]/feedback) and bundle selected feedback to send to an email address.

https://www.figma.com/design/sddJqC07215RBC6FFoB3Av/Stempelheft_Feedback_Design?node-id=0-1&t=MI6d7yk45peXj21Z-1

Functional Requirements

1. Feedback Button

• Placing:
  • The feedback button is visible in the stamp booklet as soon as a user has received the “stamp” for participation.
• Accessibility:
  • Only logged-in users with a stamp can leave feedback.
  • The feedback button disappears or becomes unclickable 14 days after the event.

---

2. Feedback Form

• Content:
  • Text Input (Mandatory Field):
    • Users can type their feedback directly in a text input field.
  • Validation:
    • Text input must not be empty to submit feedback.
• Design:
  • Simple and intuitive, aligned with the existing website UI.
  • Example design:
    

---

3. Feedback Overview

• Users with the staff role can access feedback via the hidden URL /events/[NUMBER]/feedback.
• Feedback is displayed in a list format, showing:
  • Submitted feedback: Grouped by user.
  • Actions: Staff can select specific feedback to send via email.

---

4. Sending Feedback

• On the /feedback page:
  • Staff can:
    • Select specific feedback entries to send.
    • Bundle selected feedback into a single email.
    • Send feedback using the def event_email method.

---

Development Tasks

1. Frontend

Feedback Button

• Design and style the feedback button to match the existing UI.
• Add hover and click effects.
• Ensure the button is visible only if:
  • The user is logged in.
  • The user has a stamp for the event.
  • The event is in the past (max 14 days after the event).

Feedback Form

• Create a form with:
  • A text input field for feedback (mandatory).
  • A submit button.
• Add validation to:
  • Ensure the text field is not empty before submission.
• Ensure the design is responsive for:
  • Mobile devices.
  • Desktop devices.

---

2. Backend

API and Controller

• Add a POST endpoint: /api/events/:id/feedback
  • Validate that the user has the correct permissions (logged in, has a stamp).
  • Store feedback in the database.
• Add a GET endpoint: /api/events/:id/feedback
  • Return feedback for staff access.
• Handle validation and error handling.

Database

• Create feedback table with fields:
  • event_id (reference to the event).
  • user_id (reference to the user).
  • text (user's feedback text).
  • created_at (timestamp).
• Add constraints:
  • Ensure a unique combination of event_id and user_id.

---

3. Admin Feedback Page

Feedback Overview

• Create a hidden page at /events/[NUMBER]/feedback:
  • Display all feedback for the event in a list format.
  • Include a checkbox for each feedback entry to allow selection.
  • Add a "Select All" option.

Sending Feedback

• Add a button to "Send Selected Feedback".
  • Bundle selected feedback into a single summary.
  • Send the email using the event_email method.

---

4. Testing

Unit Tests

• Write tests for:
  • Feedback model (validations and constraints).

Controller Tests

• Test API endpoints:
  • POST /api/events/:id/feedback
    • Successful submission.
    • Unauthorized access (user without a stamp).
    • Validation errors (empty feedback).
  • GET /api/events/:id/feedback
    • Successful retrieval for staff.
    • Unauthorized access.

System/Integration Tests

• Test the entire flow:
  • Button visibility based on conditions.
  • Feedback submission via text input.
  • Feedback overview page access for staff.
  • Email sending functionality.

---

5. Deployment

• Code review and approval.
• Deploy to staging for testing.
• Deploy to production after successful QA.

---