From 4851daf389759ed0cdf071795de911dafa53764e Mon Sep 17 00:00:00 2001
From: Paul Robert Lloyd <me+git@paulrobertlloyd.com>
Date: Thu, 25 Sep 2025 15:10:50 +0100
Subject: [PATCH] Add interruption card for adding session dates prior to
 uploading historical vaccination records

---
 app/assets/stylesheets/components/_index.scss |  1 +
 app/assets/stylesheets/components/_panel.scss | 18 ++++++++++++++
 app/controllers/session.js                    |  1 +
 app/locales/en.js                             |  9 ++++++-
 app/views/session/form/dates-check.njk        | 24 +++++++++++++++++++
 5 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/stylesheets/components/_panel.scss
 create mode 100644 app/views/session/form/dates-check.njk

diff --git a/app/assets/stylesheets/components/_index.scss b/app/assets/stylesheets/components/_index.scss
index 979c42c5a..9965bfae7 100644
--- a/app/assets/stylesheets/components/_index.scss
+++ b/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";
diff --git a/app/assets/stylesheets/components/_panel.scss b/app/assets/stylesheets/components/_panel.scss
new file mode 100644
index 000000000..dbdb68812
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/app/controllers/session.js b/app/controllers/session.js
index 938e05f1f..a39a36302 100644
--- a/app/controllers/session.js
+++ b/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}`]: {}
       }
diff --git a/app/locales/en.js b/app/locales/en.js
index 2848f4b64..cb201a967 100644
--- a/app/locales/en.js
+++ b/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'
diff --git a/app/views/session/form/dates-check.njk b/app/views/session/form/dates-check.njk
new file mode 100644
index 000000000..d63989d36
--- /dev/null
+++ b/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 %}