From 18299eb1dfd95f3f5eefecbf5e5619154f04db61 Mon Sep 17 00:00:00 2001
From: Frankie Roberto <frankie.roberto1@nhs.net>
Date: Tue, 25 Aug 2026 16:49:49 +0100
Subject: [PATCH 1/3] Add messages section

---
 app/routes.js           | 13 +++++++++++
 app/views/layout.html   |  5 +++++
 app/views/message.html  | 22 ++++++++++++++++++
 app/views/messages.html | 49 +++++++++++++++++++++++++++++++++++++++++
 4 files changed, 89 insertions(+)
 create mode 100644 app/views/message.html
 create mode 100644 app/views/messages.html

diff --git a/app/routes.js b/app/routes.js
index 4da409a..04b0203 100644
--- a/app/routes.js
+++ b/app/routes.js
@@ -3,6 +3,19 @@ const express = require('express')
 
 const router = express.Router()
 
+
+// Show an individual message and mark it as read
+router.get('/messages/:id', (req, res) => {
+  const messageId = req.params.id
+  const data = req.session.data
+  const messages = data.messages || []
+  const message = messages.find(message => message.id === messageId)
+
+  message.read = true
+
+  res.render('message', { message })
+})
+
 // Add your routes here - above the module.exports line
 
 module.exports = router
diff --git a/app/views/layout.html b/app/views/layout.html
index f990eef..8f5dae7 100755
--- a/app/views/layout.html
+++ b/app/views/layout.html
@@ -40,6 +40,11 @@
           text: "Home",
           current: (section == "Home")
         },
+        {
+          href: "/messages",
+          text: "Messages",
+          current: (section == "Messages")
+        },
         {
           href: "/profile",
           text: "Profile",
diff --git a/app/views/message.html b/app/views/message.html
new file mode 100644
index 0000000..148cfdf
--- /dev/null
+++ b/app/views/message.html
@@ -0,0 +1,22 @@
+{% extends "layout.html" %}
+
+{% set section = "Messages" %}
+{% set pageName = message.sender %}
+
+{% block beforeContent %}   
+  {{ backLink({
+    href: "/messages",
+    text: "Back"
+  }) }}
+{% endblock %}
+
+{% block content %}
+  <h1 class="nhsuk-heading-xl nhsuk-u-margin-bottom-3">{{ pageName }}</h1>
+  <p class="nhsuk-u-secondary-text-colour nhsuk-u-margin-bottom-5">Sent {{ message.date | formatDate }} at 7:12pm</p>
+
+  <p>{{ message.content }}</p>
+
+  <hr>
+  <p><a href="#">Flag message</a></p>
+  <p><a href="#">Remove message</a></p>
+{% endblock %}
diff --git a/app/views/messages.html b/app/views/messages.html
new file mode 100644
index 0000000..0659474
--- /dev/null
+++ b/app/views/messages.html
@@ -0,0 +1,49 @@
+{% extends "layout.html" %}
+
+{% set section = "Messages" %}
+{% set pageName = "Your messages" %}
+
+{% block content %}
+
+  <h1 class="nhsuk-heading-xl">
+    {{ pageName }}
+  </h1>
+
+  {% set cards = [] %}
+
+  {# This loops through all the messages in the session data - to add or edit a message, edit session-data-defaults.js #}
+
+  {% for message in data.messages  | sort(true, false, "date") %}
+    {% set dateHtml %}
+        <span class="nhsuk-heading-xs nhsuk-u-margin-bottom-0 nhsuk-u-secondary-text-colour nhsuk-u-body">{{ message.date | formatDate }}</span>
+    {% endset %}
+
+    {% set titleHtml %}
+      {% if message.read == false %}
+      {{ nhsappBadgeSmall({
+        label: 'Unread message',
+        classes: 'nhsapp-badge-small--absolute'
+      }) }}
+      {%- endif -%}
+      {{ message.sender }}
+    {% endset %}
+
+    {% set cards = (cards.push({
+      aboveContent: {
+        html: dateHtml
+      },
+      titleHtml: titleHtml,
+      description: message.content,
+      descriptionClasses: "nhsapp-u-truncate-two-lines",
+      href: "/messages/" + message.id,
+      classes: "nhsuk-u-padding-left-6",
+      containerClasses: "nhsuk-u-padding-left-0"
+    }), cards) %}
+  {% endfor %}
+
+  {{ nhsappCardGroup({
+    stacked: true,
+    cards: cards
+  }) }}  
+
+{% endblock %}

From ea70d288ae895ba21d4c314c18faee0289f3f6b3 Mon Sep 17 00:00:00 2001
From: Frankie Roberto <frankie.roberto1@nhs.net>
Date: Tue, 25 Aug 2026 16:49:57 +0100
Subject: [PATCH 2/3] Add initial default message

---
 app/data/session-data-defaults.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/app/data/session-data-defaults.js b/app/data/session-data-defaults.js
index 5056067..57cbe24 100644
--- a/app/data/session-data-defaults.js
+++ b/app/data/session-data-defaults.js
@@ -1,4 +1,15 @@
 // Use this file to set any default data
 
 module.exports = {
+  messages: [
+    {
+      id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+      date: "2025-10-21",
+      sender: "Portland Street Great Westood Surgery",
+      content: "Reminder of your telephone appointment with your GP on Friday 23 October at 1:30pm.",
+      read: false,
+      flagged: false,
+      removed: false
+    }
+  ]
 }

From 7ed3b000c61874fa2af53310f42fb40f947c57ad Mon Sep 17 00:00:00 2001
From: Frankie Roberto <frankie.roberto1@nhs.net>
Date: Wed, 26 Aug 2026 16:34:21 +0100
Subject: [PATCH 3/3] Use sentTime instead of date

This matches the live API, and allows us to add the time in future
---
 app/data/session-data-defaults.js | 2 +-
 app/views/message.html            | 2 +-
 app/views/messages.html           | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/data/session-data-defaults.js b/app/data/session-data-defaults.js
index 57cbe24..3e1d9fb 100644
--- a/app/data/session-data-defaults.js
+++ b/app/data/session-data-defaults.js
@@ -4,7 +4,7 @@ module.exports = {
   messages: [
     {
       id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
-      date: "2025-10-21",
+      sentTime: "2025-10-21",
       sender: "Portland Street Great Westood Surgery",
       content: "Reminder of your telephone appointment with your GP on Friday 23 October at 1:30pm.",
       read: false,
diff --git a/app/views/message.html b/app/views/message.html
index 148cfdf..416ec89 100644
--- a/app/views/message.html
+++ b/app/views/message.html
@@ -12,7 +12,7 @@
 
 {% block content %}
   <h1 class="nhsuk-heading-xl nhsuk-u-margin-bottom-3">{{ pageName }}</h1>
-  <p class="nhsuk-u-secondary-text-colour nhsuk-u-margin-bottom-5">Sent {{ message.date | formatDate }} at 7:12pm</p>
+  <p class="nhsuk-u-secondary-text-colour nhsuk-u-margin-bottom-5">Sent {{ message.sentTime | formatDate }} at 7:12pm</p>
 
   <p>{{ message.content }}</p>
 
diff --git a/app/views/messages.html b/app/views/messages.html
index 0659474..df90a02 100644
--- a/app/views/messages.html
+++ b/app/views/messages.html
@@ -13,9 +13,9 @@ <h1 class="nhsuk-heading-xl">
 
   {# This loops through all the messages in the session data - to add or edit a message, edit session-data-defaults.js #}
 
-  {% for message in data.messages  | sort(true, false, "date") %}
+  {% for message in data.messages  | sort(true, false, "sentTime") %}
     {% set dateHtml %}
-        <span class="nhsuk-heading-xs nhsuk-u-margin-bottom-0 nhsuk-u-secondary-text-colour nhsuk-u-body">{{ message.date | formatDate }}</span>
+        <span class="nhsuk-heading-xs nhsuk-u-margin-bottom-0 nhsuk-u-secondary-text-colour nhsuk-u-body">{{ message.sentTime | formatDate }}</span>
     {% endset %}
 
     {% set titleHtml %}