Add interruption card for adding session dates prior to uploading historical vaccination records

app/assets/stylesheets/components/_index.scss

@@ -10,6 +10,7 @@
 @forward "header";
 @forward "heading-group";
 @forward "highlight";
+@forward "panel";
 @forward "progress";
 @forward "search-input";
 @forward "secondary-navigation";

app/assets/stylesheets/components/_panel.scss

@@ -0,0 +1,18 @@
+@use "../vendor/nhsuk-frontend" as *;
+
+// https://github.com/nhsuk/nhsuk-frontend/pull/1196
+.app-panel--interruption {
+  background-color: $nhsuk-brand-colour;
+
+  // Links within the Panel should use white text
+  .nhsuk-link,
+  a:not(.nhsuk-button) {
+    @include nhsuk-link-style-white;
+  }
+
+  .nhsuk-panel__body {
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+}

app/controllers/session.js

@@ -576,6 +576,7 @@ export const sessionController = {
               [`/${session_id}/${type}/clinic`]: {},
               [`/${session_id}/${type}/dates`]: {}
             }),
+        [`/${session_id}/${type}/dates-check`]: {},
         [`/${session_id}/${type}/check-answers`]: {},
         [`/${session_id}`]: {}
       }

app/locales/en.js

@@ -1672,7 +1672,14 @@ export const en = {
     },
     dates: {
       label: 'Session dates',
-      title: 'When will sessions be held?'
+      title: 'When will sessions be held?',
+      check: {
+        title: 'Have you imported historical vaccination records for %s?',
+        description:
+          'Scheduling this session will send 876 consent requests to parents of children not in Year 8 on %s.\n\nMake sure you have uploaded all historical vaccination records for children in this school before you continue.\n\nIf you do not do this, you risk sending invitations to parents of already vaccinated children.',
+        confirm: 'Keep session dates',
+        cancel: 'Remove session dates'
+      }
     },
     dateSummary: {
       label: 'Session dates'

app/views/session/form/dates-check.njk

@@ -0,0 +1,24 @@
+{% extends "_layouts/form.njk" %}
+
+{% set title = __("session.dates.check.title", session.programmeNames.sentenceCase) %}
+{% set hideConfirmButton = true %}
+
+
+{% block form %}
+  {% call panel({
+    classes: "app-panel--interruption",
+    titleText: title
+  }) %}
+    {{ __("session.dates.check.description", session.summary.firstDate) | nhsukMarkdown }}
+
+    {{ appButtonGroup({
+      buttons: [{
+        classes: "nhsuk-button--reverse",
+        text: __("session.dates.check.confirm")
+      }],
+      links: [{
+        text: __("session.dates.check.cancel")
+      }]
+    }) }}
+  {% endcall %}
+{% endblock %}