Feature/ra 254 select app type error message (#38)

* Adding error message component for app type selection page

* Adding error summary and tests

* fix missing header and footer on error re-render

* Fixing minor indentation

integration_tests/e2e/application-type.cy.ts

@@ -29,32 +29,38 @@ context('Application Type Page', () => {
           .and('have.attr', 'value', applicationType.value)
       })
     })
+  })
 
-    it('should display the continue button', () => {
-      cy.get('.govuk-button')
-        .should('exist')
-        .invoke('text')
-        .should('satisfy', text => text.trim() === 'Continue')
-    })
+  it('should display the continue button', () => {
+    cy.get('.govuk-button')
+      .should('exist')
+      .invoke('text')
+      .should('satisfy', text => text.trim() === 'Continue')
+  })
 
-    it('should ensure links are functional (if paths are set)', () => {
-      cy.get('a').each($link => {
-        const href = $link.attr('href')
-        if (href && href !== '#' && href !== '') {
-          cy.request({
-            url: href,
-            failOnStatusCode: false,
-          }).then(response => {
-            if (response.status !== 200) {
-              cy.log(`Broken link: ${href} - Status: ${response.status}`)
-            } else {
-              cy.wrap(response.status).should('equal', 200)
-            }
-          })
-        } else {
-          cy.log(`Skipping link with href: ${href}`)
-        }
-      })
+  it('should display the error message when no radio button is selected', () => {
+    cy.get('.govuk-button').click()
+    cy.get('.govuk-error-summary').should('exist').and('contain', 'Choose one')
+    cy.get('.govuk-error-message').should('exist').and('contain', 'Choose one')
+  })
+
+  it('should ensure links are functional (if paths are set)', () => {
+    cy.get('a').each($link => {
+      const href = $link.attr('href')
+      if (href && href !== '#' && href !== '') {
+        cy.request({
+          url: href,
+          failOnStatusCode: false,
+        }).then(response => {
+          if (response.status !== 200) {
+            cy.log(`Broken link: ${href} - Status: ${response.status}`)
+          } else {
+            cy.wrap(response.status).should('equal', 200)
+          }
+        })
+      } else {
+        cy.log(`Skipping link with href: ${href}`)
+      }
     })
   })
 })

server/routes/applications/applicationTypeRoutes.ts

@@ -23,6 +23,7 @@ export default function applicationTypeRoutes({ auditService }: { auditService:
       res.render('pages/log/application-type', {
         title: 'Select application type',
         applicationTypes,
+        errorMessage: null,
       })
     }),
   )
@@ -33,13 +34,20 @@ export default function applicationTypeRoutes({ auditService }: { auditService:
       const selectedAppType = APPLICATION_TYPES.find(type => type.value === req.body.applicationType)
 
       if (!selectedAppType) {
-        res.status(400).send('Invalid application type selected')
-        return
+        return res.render('pages/log/application-type', {
+          title: 'Select application type',
+          applicationTypes: APPLICATION_TYPES.map(applicationType => ({
+            value: applicationType.value,
+            text: applicationType.name,
+          })),
+          errorMessage: 'Choose one',
+          errorSummary: [{ text: 'Choose one', href: '#applicationType' }],
+        })
       }
 
       updateSessionData(req, { type: selectedAppType })
 
-      res.redirect(`/log/prisoner-details`)
+      return res.redirect(`/log/prisoner-details`)
     }),
   )
 

server/views/pages/log/application-type.njk

@@ -1,6 +1,7 @@
 {% from "govuk/components/button/macro.njk" import govukButton %}
 {% from "govuk/components/radios/macro.njk" import govukRadios %}
 {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
 
 {% extends "../../partials/layout.njk" %}
 
@@ -9,26 +10,45 @@
 
 {% block content %}
   <div class="govuk-body govuk-width-container">
-    {{ govukBackLink({
-      text: "Back",
-      href: "/"
-    }) }}
-
-    <span class="govuk-caption-xl">Log an application</span>
-    <h1 class="govuk-heading-xl govuk-!-margin-top-0">Select application type</h1>
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-one-half">
 
-    <form method="POST" id="log-application-type">
-      <input type="hidden" name="_csrf" value="{{ csrfToken }}" />
-
-      {{ govukRadios({
-        name: "applicationType",
-        items: applicationTypes
-      }) }}
+        {{ govukBackLink({
+          text: "Back",
+          href: "/"
+        }) }}
+
+        {% if errorSummary %}
+          {{ govukErrorSummary ({
+            titleText: "There is a problem",
+            errorList: errorSummary
+          }) }}
+        {% endif %}
 
-      {{ govukButton({
-        text: "Continue",
-        preventDoubleClick: true
-      }) }}
-    </form>
+        <span class="govuk-caption-xl">Log an application</span>
+
+        <form method="POST" id="log-application-type">
+          <input type="hidden" name="_csrf" value="{{ csrfToken }}"/>
+
+          {{ govukRadios({
+            name: "applicationType",
+            fieldset: {
+              legend: {
+                text: "Select application type",
+                isPageHeading: true,
+                classes: "govuk-fieldset__legend--xl"
+              }
+           },
+           items: applicationTypes,
+           errorMessage: { text: errorMessage } if errorMessage else undefined
+          }) }}
+
+          {{ govukButton({
+            text: "Continue",
+            preventDoubleClick: true
+          }) }}
+        </form>
+      </div>
+    </div>
   </div>
 {% endblock %}

server/views/partials/footer.njk

@@ -0,0 +1,27 @@
+{% from "govuk/components/footer/macro.njk" import govukFooter %}
+
+{{ govukFooter({
+  classes: "govuk-!-display-none-print",
+  contentLicence: {
+    html: 'All content is available under the
+            <a class="govuk-footer__link"
+               href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated'
+  },
+  meta: {
+    visuallyHiddenTitle: "Support links",
+    items: [
+      {
+        href: "https://support-dev.hmpps.service.justice.gov.uk/feedback-and-support",
+        text: "Feedback and support"
+      },
+      {
+        href: "/auth/terms",
+        text: "Terms and conditions"
+      }
+    ]
+  },
+  copyright: {
+    text: "© Crown copyright",
+    href: "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
+  }
+}) }}

server/views/partials/header.njk

@@ -11,7 +11,7 @@
         HMPPS
       </a>
 
-      <a class="hmpps-header__link hmpps-header__title__service-name" href="/">{{ applicationName }}</a>
+      <a class="hmpps-header__link hmpps-header__title__service-name" href="/">Digital Services</a>
 
       {% if environmentName %}
         <div class="govuk-phase-banner">

server/views/partials/layout.njk

@@ -17,7 +17,11 @@
 {% endblock %}
 
 {% block header %}
-  {{ feComponents.header | safe }}
+  {% if feComponents.header %}
+    {{ feComponents.header | safe }}
+  {% else %}
+    {% include "./header.njk" %}
+  {% endif %}
 {% endblock %}
 
 {% block main %}
@@ -28,7 +32,11 @@
 {% endblock %}
 
 {% block footer %}
+    {% if feComponents.footer %}
     {{ feComponents.footer | safe }}
+  {% else %}
+    {% include "./footer.njk" %}
+  {% endif %}
 {% endblock %}
 
 {% block bodyEnd %}