Design Sprint 2: New flow for recording vaccinations

app/assets/sass/components/_panel.scss

@@ -0,0 +1,55 @@
+// ==========================================================================
+// COMPONENTS / #PANEL
+// ==========================================================================
+
+/**
+ * Original code taken from GDS (Government Digital Service)
+ * https://github.com/alphagov/govuk-frontend
+ *
+ * 1. This is an if-all-else-fails attempt to stop long words from overflowing the container
+      on very narrow viewports by forcing them to break and wrap instead. This
+      overflowing is more likely to happen when user increases text size on a mobile eg. using
+      iOS Safari text resize controls.
+
+      The overflowing is a particular problem with the panel component since it uses white
+      text: when the text overflows the container, it is invisible on the white (page)
+      background. When the text in our other components overflow, the user might have to scroll
+      horizontally to view it but the the text remains legible.
+ * 2. Support IE (autoprefixer doesn't add this as it's not a prefix)
+ */
+
+$nhsuk-border-width-panel: nhsuk-spacing(1);
+
+.nhsuk-panel {
+  @include nhsuk-typography-responsive(24);
+  @include nhsuk-responsive-margin(4, "bottom");
+
+  background: $color_nhsuk-green;
+  border: $nhsuk-border-width-panel solid transparent;
+  box-sizing: border-box;
+  color: $color_nhsuk-white;
+  padding: nhsuk-spacing(6) - $nhsuk-border-width-panel;
+
+  @include mq($until: tablet) {
+    padding: nhsuk-spacing(4) - $nhsuk-border-width-panel;
+    overflow-wrap: break-word; /* [1] */
+    word-wrap: break-word; /* [2] */
+  }
+
+  @include mq($media-type: print) {
+    border-color: currentcolor;
+    color: $nhsuk-print-text-color;
+    background: none;
+  }
+}
+
+.nhsuk-panel__title {
+  @include nhsuk-typography-responsive(48);
+  @include nhsuk-responsive-margin(5, "bottom");
+
+  margin-top: 0;
+}
+
+.nhsuk-panel__title:last-child {
+  margin-bottom: 0;
+}

app/assets/sass/main.scss

@@ -5,6 +5,7 @@
 @import 'components/list-border';
 @import 'components/related-nav';
 @import 'components/indent-list';
+@import 'components/panel';
 
 // Import GOVUK-frontend
 //

app/routes.js

@@ -3,6 +3,7 @@ const express = require('express');
 
 const router = express.Router();
 
+require('./routes/vaccinate')(router)
 require('./routes/regions')(router)
 require('./routes/user-admin')(router)
 require('./routes/user-onboarding')(router)
@@ -14,4 +15,5 @@ require('./routes/support')(router)
 require('./routes/auth')(router)
 require('./routes/home')(router)
 
+
 module.exports = router;

app/routes/vaccinate.js

@@ -0,0 +1,112 @@
+module.exports = router => {
+
+  router.post('/vaccinate/answer-patient-nhs-number-known', (req, res) => {
+
+    const nhsNumberKnown = req.session.data.nhsNumberKnown;
+
+    if (nhsNumberKnown === "yes") {
+
+      req.session.data.patientName = "Jodie Brown"
+      req.session.data.dateOfBirth = {day: "4", month: "7", year: "1964"}
+      req.session.data.postcode = "GD3 I83"
+
+      res.redirect('/vaccinate/patient-history')
+    } else if (nhsNumberKnown === "no") {
+      res.redirect('/vaccinate/patient-search')
+    } else {
+      res.redirect('/vaccinate/patient?showError=yes')
+    }
+
+  })
+
+
+ router.post('/vaccinate/patient-search', (req, res) => {
+
+    const firstName = req.session.data.firstName;
+    const lastName = req.session.data.lastName;
+    const dateOfBirth = req.session.data.dateOfBirth;
+    const postcode = req.session.data.postcode;
+    let errors = []
+    let firstNameError, lastNameError, dateOfBirthError, postcodeError
+
+    if (firstName === "") {
+      firstNameError = "Enter first name"
+      errors.push({
+        text: firstNameError,
+        href: "#firstName"
+      })
+    }
+
+    if (lastName === "") {
+      lastNameError = "Enter last name"
+      errors.push({
+        text: lastNameError,
+        href: "#lastName"
+      })
+    }
+
+    if (dateOfBirth.day === "" || dateOfBirth.month  === "" || dateOfBirth.year === "") {
+      dateOfBirthError = "Enter date of birth"
+      errors.push({
+        text: dateOfBirthError,
+        href: "#dateOfBirth"
+      })
+    }
+
+    if (postcode === "") {
+      postcodeError = "Enter postcode"
+      errors.push({
+        text: postcodeError,
+        href: "#postcode"
+      })
+    }
+
+    if (errors.length === 0) {
+
+      if (Number(dateOfBirth.day) %2) {
+        res.redirect('/vaccinate/no-search-result')
+      } else {
+        res.redirect('/vaccinate/search-result')
+      }
+    } else {
+      res.render('vaccinate/patient-search', {
+        errors,
+        firstNameError,
+        lastNameError,
+        dateOfBirthError,
+        postcodeError
+      })
+    }
+
+  })
+
+  // Routing page after DONE
+  router.post('/vaccinate/what-next', (req, res) => {
+
+    const answer = req.session.data.nextStep;
+
+    req.session.data.injectionSite = ""
+
+    if (answer === 'same-vaccination-another-patient') {
+
+      req.session.data.patientName = ""
+      req.session.data.nhsNumber = ""
+
+      res.redirect('/vaccinate/patient?repeatVaccination=yes&repeatPatient=no')
+
+    } else if (answer === 'same-patient-another-vaccination') {
+
+      req.session.data.vaccine = ""
+      req.session.data.vaccineProduct = ""
+      req.session.data.vaccineBatch = ""
+
+      res.redirect('/vaccinate/vaccine?repeatPatient=yes&repeatVaccination=no')
+
+    } else {
+
+      res.redirect('/home')
+    }
+
+  })
+
+}

app/views/includes/header-logged-in-organisation.html

@@ -13,9 +13,9 @@
           classes: ("app-header__navigation-item--current" if currentSection == "home")
         },
         {
-          url  : "/find-a-patient",
-          label : "Find a patient",
-          classes: ("app-header__navigation-item--current" if currentSection == "find-a-patient")
+          url  : "/vaccinate",
+          label : "Record vaccinations",
+          classes: ("app-header__navigation-item--current" if currentSection == "vaccinate")
         },
         {
           url: "/vaccines",

app/views/vaccinate/batch.html

@@ -0,0 +1,80 @@
+{% extends 'layout.html' %}
+
+{% block pageTitle %}
+  Vaccines
+{% endblock %}
+
+{% set currentSection = "vaccinate" %}
+
+{% block beforeContent %}
+  {{ backLink({ href: "/vaccinate/vaccine" }) }}
+{% endblock %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+      {% if data.vaccine == "Pertussis" %}
+        {% set nextPage = "/vaccinate/patient" %}
+      {% else %}
+        {% set nextPage = "/vaccinate/eligibility" %}
+      {% endif %}
+
+      <form action="{{ nextPage }}" method="post" novalidate>
+
+          {{ radios({
+            "idPrefix": "vaccineBatch",
+            "name": "vaccineBatch",
+            "fieldset": {
+              "legend": {
+                "text": ("Which batch are you using?" if data.vaccinationToday == 'yes' else "Which batch was it?"),
+                "classes": "nhsuk-fieldset__legend--l",
+                "isPageHeading": true
+              }
+            },
+            "items": [
+              {
+                "value": "AB2345",
+                "text": "AB2345",
+                hint: {
+                  text: "Expires 14 December 2024"
+                },
+                checked: (data.vaccineBatch == "AB2345")
+              },
+              {
+                "value": "DE8342",
+                "text": "DE8342",
+                hint: {
+                  text: "Expires 19 December 2024"
+                },
+                checked: (data.vaccineBatch == "DE8342")
+              },
+              {
+                "value": "LF842",
+                "text": "LF842",
+                hint: {
+                  text: "Expires 28 December 2024"
+                },
+                checked: (data.vaccineBatch == "LF842")
+              },
+              {
+                "value": "JD8352",
+                "text": "JD8352",
+                hint: {
+                  text: "Expires 3 January 2025"
+                },
+                checked: (data.vaccineBatch == "JD8352")
+              }
+            ]
+          }) }}
+
+        {{ button({
+          text: "Continue"
+        })}}
+      </form>
+
+    </div>
+  </div>
+
+{% endblock %}
+