DWPF 1658 Feedback Forms (#593)

Co-authored-by: Alsen Aligullu <[email protected]>

pyproject.toml

@@ -23,7 +23,7 @@ crispy-forms-gds = "^0.2.6"
 django-audit-log-middleware = "^0.0.4"
 django-hawk-drf = "^1.1.0"
 django-chunk-upload-handlers = "^0.0.14"
-django-feedback-govuk = "^0.2.5"
+django-feedback-govuk = "^0.2.9"
 django_log_formatter_ecs = "^0.0.5"
 django-staff-sso-client = "^4.2"
 notifications-python-client = "^8.2"

src/config/settings/base.py

@@ -645,6 +645,14 @@
             "form": "django_feedback_govuk.forms.FeedbackForm",
             "view": "django_feedback_govuk.views.FeedbackView",
         },
+        "hr-v1": {
+            "model": "feedback.models.HRFeedback",
+            "form": "feedback.forms.HRFeedbackForm",
+            "view": "feedback.views.HRFeedbackFormView",
+            "copy": {
+                "SUBMIT_TITLE": None,
+            },
+        },
         "search-v1": {
             "model": "feedback.models.SearchFeedbackV1",
             "form": "feedback.forms.SearchFeedbackV1Form",

src/content/templates/content/navigation_page.html

@@ -2,6 +2,7 @@
 {% load wagtailcore_tags %}
 
 {% block content %}
+    {% include 'feedback.html' %}
     <h1 class="govuk-heading-l">{{ page.title }}</h1>
     <div class="ws-content-grid">
         {% for block in page.primary_content %}

src/feedback/forms.py

@@ -3,7 +3,7 @@
 from django_feedback_govuk.forms import SUBMIT_BUTTON, BaseFeedbackForm
 from django_feedback_govuk.models import SatisfactionOptions
 
-from feedback.models import SearchFeedbackV1, SearchFeedbackV2
+from feedback.models import HRFeedback, SearchFeedbackV1, SearchFeedbackV2
 
 
 class SearchFeedbackV1Form(BaseFeedbackForm):
@@ -46,6 +46,53 @@ def __init__(self, *args, **kwargs):
         self.helper.layout.append(SUBMIT_BUTTON)
 
 
+class HRFeedbackForm(BaseFeedbackForm):
+    class Meta:
+        model = HRFeedback
+        fields = ["useful", "comment", "page_url", "contactable", "submitter"]
+        widgets = {
+            "useful": HiddenInput(),
+            "page_url": HiddenInput(),
+        }
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+
+        self.fields["useful"].label = ""
+        self.fields["comment"].label = ""
+        self.fields["contactable"].label = (
+            "Do you wish to be contacted for further research opportunities?"
+        )
+        self.fields["page_url"].label = ""
+
+        self.helper.layout.remove(SUBMIT_BUTTON)
+        self.helper.layout.append(
+            Fieldset(
+                legend="Providing feedback on your experience will help us improve the service",
+                legend_size=Size.MEDIUM,
+            )
+        )
+        self.helper.layout.append(Field("page_url"))
+        self.helper.layout.append(Field("useful"))
+        self.helper.layout.append(
+            Fieldset(
+                Field("comment"),
+                Field("contactable"),
+                legend="Why was this page not useful?",
+                legend_size=Size.SMALL,
+            )
+        )
+        self.helper.layout.append(SUBMIT_BUTTON)
+        self.helper.layout.append(
+            Button(
+                "close",
+                "Close feedback form",
+                css_class="govuk-button--secondary",
+                formmethod="dialog",
+            )
+        )
+
+
 class SearchFeedbackV2Form(BaseFeedbackForm):
     class Meta:
         model = SearchFeedbackV2

src/feedback/migrations/0004_hrfeedback.py

@@ -0,0 +1,36 @@
+# Generated by Django 4.2.11 on 2024-05-14 08:14
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("django_feedback_govuk", "0004_alter_basefeedback_id"),
+        ("feedback", "0003_searchfeedbackv2"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="HRFeedback",
+            fields=[
+                (
+                    "basefeedback_ptr",
+                    models.OneToOneField(
+                        auto_created=True,
+                        on_delete=django.db.models.deletion.CASCADE,
+                        parent_link=True,
+                        primary_key=True,
+                        serialize=False,
+                        to="django_feedback_govuk.basefeedback",
+                    ),
+                ),
+                ("page_url", models.CharField(blank=True)),
+                ("useful", models.BooleanField(default=True)),
+                ("contactable", models.BooleanField(default=False)),
+                ("comment", models.TextField(blank=True)),
+            ],
+            bases=("django_feedback_govuk.basefeedback",),
+        ),
+    ]

src/feedback/models.py

@@ -2,6 +2,13 @@
 from django_feedback_govuk.models import BaseFeedback, SatisfactionOptions
 
 
+class HRFeedback(BaseFeedback):
+    page_url = models.CharField(blank=True)
+    useful = models.BooleanField(default=True)
+    contactable = models.BooleanField(default=False)
+    comment = models.TextField(blank=True)
+
+
 class SearchFeedbackV1(BaseFeedback):
     satisfaction = models.CharField(max_length=30, choices=SatisfactionOptions.choices)
     comment = models.TextField(blank=True)

src/feedback/templates/feedback.html

@@ -0,0 +1,79 @@
+{% load feedback_tags %}
+
+<div id="search-feedback">
+    <div class="search-feedback-header govuk-!-padding-1 govuk-!-padding-left-2 govuk-!-margin-bottom-4">
+        <div class="govuk-body-s govuk-body--inverse govuk-!-margin-bottom-0 govuk-!-margin-right-2">Is this page useful?</div>
+        <button class="govuk-button govuk-button--secondary govuk-!-margin-bottom-0 govuk-!-margin-left-1"
+                onclick="positiveResponse();">Yes</button>
+        <button class="govuk-button govuk-button--secondary govuk-!-margin-bottom-0 govuk-!-margin-left-1"
+                onclick="negativeResponse();">No</button>
+    </div>
+</div>
+
+<dialog id="feedback-dialog">
+    {% feedback_submit form_id="hr-v1" %}
+    <script>
+        const dialog = document.querySelector("#feedback-dialog");
+        const form = dialog.querySelector("form");
+        const search_header = document.querySelector("#search-feedback .search-feedback-header");
+
+        function positiveResponse() {
+            // Clear all form fields except the hidden ones
+            clearFeedbackForm();
+            // Mark the `useful` hidden field to `true`
+            form.querySelector("#id_useful").value = "true";
+            // Submit the form
+            submitFeedbackForm();
+        }
+
+        function negativeResponse() {
+            // Clear all form fields except the hidden ones
+            clearFeedbackForm();
+            // Mark the `useful` hidden field to `false`
+            form.querySelector("#id_useful").value = "false";
+            // Show the feedback form
+            openFeedbackDialog();
+        }
+
+        function openFeedbackDialog() {
+            document.querySelector("#feedback-dialog").showModal();
+        }
+
+        function showThankYouMessage() {
+            // Update text to say thanks.
+            search_header.innerHTML = '<div class="govuk-body-s govuk-body--inverse govuk-!-margin-bottom-0">Thanks for your feedback.</div>';
+        }
+
+        form.addEventListener("submit", (event) => {
+            if (event.submitter.id == "submit-id-submit") {
+                event.preventDefault();
+                submitFeedbackForm();
+            }
+        });
+
+        function clearFeedbackForm() {
+            form.reset();
+        }
+
+        function submitFeedbackForm() {
+            const formData = new FormData(form);
+
+            formData.set('page_url','{{page.url}}');
+
+            fetch(form.action, {
+                method: "POST",
+                body: formData,
+            }).then((response) => {
+                if (!response.ok) {
+                    throw new Error("There was an issue submitting your feedback.");
+                }
+
+                dialog.close();
+                showThankYouMessage();
+            }).catch((error) => {
+                alert(error.message);
+                dialog.close();
+            });
+        }
+    </script>
+</dialog>

src/feedback/views.py

@@ -2,3 +2,6 @@
 
 
 class SearchFeedbackV2FormView(FeedbackView): ...
+
+
+class HRFeedbackFormView(FeedbackView): ...