Add survey to reports page (#360)

This adds our feedback survey to the Reports feature.

It would show up when the user has downloaded their 5th report (after
the reports get changed slightly):

<img width="1014" alt="Screenshot 2025-06-18 at 18 39 09"
src="https://github.com/user-attachments/assets/ba443fa1-98e9-4973-bf3b-0a26186d32a2"
/>

When selecting an answer, an optional free text field gets revealed:

<img width="1006" alt="Screenshot 2025-06-18 at 18 39 19"
src="https://github.com/user-attachments/assets/6b8a3489-f211-4a9c-a0c8-19a15020bd9b"
/>

Author: frankieroberto

app/views/reports/_feedback.html

@@ -0,0 +1,92 @@
+
+{% block head %}
+  <script src="/js/feedback-panel.js"></script>
+{% endblock %}
+
+{% from 'checkboxes/macro.njk' import checkboxes %}
+<div class="app-feedback-panel" data-module="feedback-panel">
+  <div data-module="feedback-panel__initial-question">
+    <h2 class="app-feedback-panel__title">You’ve just created your 5th report since 10 June 2025</h2>
+
+
+    <fieldset class="nhsuk-fieldset">
+      <legend class="nhsuk-fieldset__legend nhsuk-u-margin-bottom-4">How was your experience creating reports?</legend>
+
+      <div class="app-button-group nhsuk-u-margin-bottom-0">
+
+        {{ button({
+          text: "Very easy",
+          classes: "nhsuk-button--secondary app-button--small app-button--min-width",
+          attributes: {
+            "data-thanks": "Thank you. Do you want to tell us more?"
+          }
+        }) }}
+
+        {{ button({
+          text: "Easy",
+          classes: "nhsuk-button--secondary app-button--small app-button--min-width",
+          attributes: {
+            "data-thanks": "Thank you. Do you want to tell us more?"
+          }
+        }) }}
+
+        {{ button({
+          text: "Ok",
+          classes: "nhsuk-button--secondary app-button--small app-button--min-width",
+          attributes: {
+            "data-thanks": "Thank you. Do you want to tell us more?"
+          }
+        }) }}
+
+        {{ button({
+          text: "Difficult",
+          classes: "nhsuk-button--secondary app-button--small app-button--min-width",
+          attributes: {
+            "data-thanks": "Thank you. Do you want to tell us more?"
+          }
+        }) }}
+
+        {{ button({
+          text: "Very difficult",
+          classes: "nhsuk-button--secondary app-button--small app-button--min-width",
+          attributes: {
+            "data-thanks": "Thank you. Do you want to tell us more?"
+          }
+        }) }}
+      </div>
+    </fieldset>
+  </div>
+
+  <div class="app-feedback-panel__comments"  data-module="feedback-panel__comments" hidden>
+
+    <h2 class="app-feedback-panel__title">Thank you.</h2>
+    {{ textarea({
+      name: "example",
+      id: "example",
+      rows: 3,
+      label: {
+        text: "Feedback (optional)"
+      }
+    }) }}
+
+    {{ checkboxes({
+      items: [
+        {
+          value: "contactable",
+          text: "I’m happy to be contacted about my feedback"
+        }
+      ]
+    })}}
+
+
+    <div class="app-button-group nhsuk-u-margin-bottom-0">
+      {{ button({
+        text: "Send feedback",
+        classes: "nhsuk-button--secondary"
+      }) }}
+
+      <a href="#" class="nhsuk-link nhsuk-link--no-visited-state" data-module="feedback-panel__close">Close</a>
+    </div>
+
+  </div>
+</div>

app/views/reports/download.html

@@ -5,18 +5,13 @@
 {% set currentSection = "reports" %}
 
 
-{% block beforeContent %}
-  {{ backLink({
-    href: "/reports/check",
-    text: "Back"
-  }) }}
-{% endblock %}
-
 {% block content %}
   <div class="nhsuk-grid-row">
     <div class="nhsuk-grid-column-two-thirds">
 
-      <h1 class="nhsuk-heading-xl">Report is ready</h1>
+      {% include "reports/_feedback.html" %}
+
+      <h1 class="nhsuk-heading-l">Report is ready</h1>
 
       <p class="nhsuk-body-l">You have created a report from 16 July to 30 July 2024 for COVID-19 and Flu at Verrington (RH635)</p>
 
@@ -25,6 +20,8 @@ <h1 class="nhsuk-heading-xl">Report is ready</h1>
         "href": "/reports"
       }) }}
 
+      <p><a href="/reports">Create a new report</a></p>
+
 
     </div>
   </div>