# **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. ---