Merge pull request #1236 from nationalarchives/FCL98/transactional-li…

…cence-as-form

FCL98: Transactional Licence form as Django Form.

config/urls.py

@@ -31,11 +31,6 @@
         lambda request: HttpResponseRedirect("/re-use-find-case-law-records"),
         name="computational_licence_form",
     ),
-    path(
-        "transactional-licence-form",
-        lambda request: HttpResponseRedirect("/computational-licence-form"),
-        name="transactional-licence-form",
-    ),
     path(
         "what-to-expect",
         lambda request: HttpResponseRedirect("/about-this-service"),

ds_judgements_public_ui/sass/includes/_transactional_licence_form.scss

@@ -18,6 +18,13 @@
     margin-bottom: 3rem;
   }
 
+  &__pre-form-content {
+    margin-bottom: 3rem;
+    &:empty {
+      margin-bottom: 0;
+    }
+  }
+
   .govuk-checkboxes__item .govuk-label, .govuk-radios__item .govuk-label,
   // Include special-cased fields which should have a paragraph styled label here. This is a bit of a hack,
   // but django-forms/crispy-gds doesn't offer an obvious way to add a class to these.

ds_judgements_public_ui/static/js/src/modules/transactional_licence_form.js

@@ -1,44 +1,84 @@
 import $ from "jquery";
 
-/*  CAUTION: This is quite a specific and brittle way of addressing these
-    particular form fields, but Django-forms doesn't give us many
-    other options: I haven't found a way to simply add an id or
-    class to a single radio button or checkbox input. If the values or names
-    of these form fields change, this code will also have to change.
-*/
-var licenceHolderNameId = "div_id_contact-licence_holder_lastname";
-var licenceHolderEmailId = "div_id_contact-licence_holder_email";
-var licenceHolderControlSelector = "#div_id_contact-alternative_contact input";
-var licenceHolderVisibleValue =
-    "This is a different person (please enter their details below)";
-
-let toggleFieldState = function (element) {
-    if (element && element.value == licenceHolderVisibleValue) {
-        showFields();
-    } else {
-        hideFields();
-    }
-};
+let setupTogglableFields = function () {
+    /*  CAUTION: This is quite a specific and brittle way of addressing these
+        particular form fields, but Django-forms doesn't give us many
+        other options: I haven't found a way to simply add an id or
+        class to a single radio button or checkbox input. If the values or names
+        of these form fields change, this code will also have to change.
+    */
+    var licenceHolderNameId = "div_id_contact-licence_holder_lastname";
+    var licenceHolderEmailId = "div_id_contact-licence_holder_email";
+    var licenceHolderControlSelector =
+        "#div_id_contact-alternative_contact input";
+    var licenceHolderVisibleValue =
+        "This is a different person (please enter their details below)";
 
-let showFields = function () {
-    $(licenceHolderControlSelector).attr("aria-expanded", true);
-    $(`#${licenceHolderNameId}`).show();
-    $(`#${licenceHolderEmailId}`).show();
-};
+    let toggleFieldState = function (element) {
+        if (element && element.value == licenceHolderVisibleValue) {
+            showFields();
+        } else {
+            hideFields();
+        }
+    };
 
-let hideFields = function () {
-    $(licenceHolderControlSelector).attr("aria-expanded", false);
-    $(`#${licenceHolderNameId}`).hide();
-    $(`#${licenceHolderEmailId}`).hide();
-};
+    let showFields = function () {
+        $(licenceHolderControlSelector).attr("aria-expanded", true);
+        $(`#${licenceHolderNameId}`).show();
+        $(`#${licenceHolderEmailId}`).show();
+    };
+
+    let hideFields = function () {
+        $(licenceHolderControlSelector).attr("aria-expanded", false);
+        $(`#${licenceHolderNameId}`).hide();
+        $(`#${licenceHolderEmailId}`).hide();
+    };
 
-$(function () {
     $(licenceHolderControlSelector).attr(
         "aria-controls",
         `${licenceHolderNameId} ${licenceHolderEmailId}`,
     );
+
     toggleFieldState($(`${licenceHolderControlSelector}:checked`)[0]);
+
     $(licenceHolderControlSelector).change(function (event) {
         toggleFieldState(this);
     });
+};
+
+let setupPreviousButton = function () {
+    /*
+        This is handled with javascript for a couple of intersecting reasons.
+        For accesibility compliance, pressing enter while on a form field should take you
+        to the next page of the form. However, by default, pressing enter submits using the *first*
+        button with type "submit" in the form, which in our case, would have been the "previous" button:
+       https://stackoverflow.com/questions/48/multiple-submit-buttons-in-an-html-form
+
+       One way around this is to reverse the order of the buttons in the markup, and then to float them right,
+       however, this causes another accessibility problem: the tabbing order for those buttons is then reversed in
+       a confusing way.
+
+       To fix this, we give the "previous" button the type "button", and submit it using javascript, that way the
+       first "submit" button in the form is the correct "default" action of going to the next page.
+    */
+    let button = document.getElementById(
+        "transactional-licence-form-previous-button",
+    );
+    let form = document.getElementById("transactional-licence-form-form");
+    if (button) {
+        button.style.display = "inline";
+        $(button).click(function (e) {
+            e.preventDefault();
+            $("<input type='hidden' />")
+                .attr("name", button.getAttribute("name"))
+                .attr("value", button.getAttribute("value"))
+                .prependTo(form);
+            $(form).trigger("submit");
+        });
+    }
+};
+
+$(function () {
+    setupTogglableFields();
+    setupPreviousButton();
 });

judgments/urls.py

@@ -1,3 +1,4 @@
+from django.http import HttpResponseRedirect
 from django.urls import path, register_converter
 
 from . import converters, feeds
@@ -30,6 +31,11 @@
     path(
         "<court:court>/<yyyy:year>/atom.xml", feeds.LatestJudgmentsFeed(), name="feed"
     ),
+    path(
+        "transactional-licence-form",
+        lambda request: HttpResponseRedirect("/computational-licence-form"),
+        name="transactional-licence-form",
+    ),
     path(
         "<court:court>/<subdivision:subdivision>/atom.xml",
         feeds.LatestJudgmentsFeed(),

locale/en_GB/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-05-23 09:33+0000\n"
+"POT-Creation-Date: 2024-06-13 13:27+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[email protected]>\n"
@@ -74,7 +74,6 @@ msgstr "Publishing policy"
 #: ds_judgements_public_ui/templates/pages/about_this_service.html
 #: ds_judgements_public_ui/templates/pages/how_to_use_this_service.html
 #: ds_judgements_public_ui/templates/pages/terms_of_use.html
-#: transactional_licence_form/templates/download.html
 #: transactional_licence_form/templates/start.html
 #: transactional_licence_form/templates/start2.html
 #: transactional_licence_form/templates/start3.html