Skip to content

NHS website opt-out journey (non-app) - #29

Open
MattFielding wants to merge 9 commits into
mainfrom
feature/optout
Open

NHS website opt-out journey (non-app)#29
MattFielding wants to merge 9 commits into
mainfrom
feature/optout

Conversation

@MattFielding

@MattFielding MattFielding commented Sep 17, 2026

Copy link
Copy Markdown
Contributor

Summary

Adds a second, standalone journey to this prototype: a non-app NHS
website flow for opting out of age-based messages, built alongside the
existing NHS App journeys (v5.4/v5.5/v6) in the same codebase.

  • New views live under app/views/website/pages/opt-out/, routes in
    app/routes.js, linked from the homepage under "NHS Website journeys".
  • Full identity-verification journey (NHS number path, or name + DOB +
    postcode path), with a simulated identity check and an error/retry
    loop, matching the supplied design screenshots and flow diagram. See
    app/views/website/pages/opt-out/README.md for a Mermaid diagram and
    notes.
  • Code aligned with the NHS prototype kit LLM documentation guide
    (camelCase session keys, -answer route suffixes only where branching
    is needed, exact-text radio values, NHS Frontend dateInput component,
    real backLink() usage instead of the no-op {% set backLink = true %}
    pattern used elsewhere in this prototype).
  • Layout/header/footer fixed per NHS design system guidance:
    • New app/views/layout-website.html for in-service pages: simplified
      transactional header (logo + service name, no app nav), standard
      footer meta links, and mainClasses = "nhsuk-main-wrapper--s" (fixes
      excess padding above back links, per the question-page pattern).
    • New app/views/layout-nhsuk-website.html for the start page only:
      modelled as hosted on the main NHS.UK website (full header with
      search/nav, breadcrumb, real NHS.UK footer navigation, "Start now"
      button) - reflecting how services like "Find your NHS number" work
      in production, where the start page sits on nhs.uk and "Start now"
      takes the user into the transactional service.
    • Both new layouts only affect pages that explicitly extend them - the
      app journeys (layout.html/layout-app.html) are untouched.
  • Fixed a pre-existing typography bug affecting the whole prototype:
    an unscoped @supports (font: -apple-system-body) rule in
    _ios-dynamic-text.scss reset font on the bare <html> element site
    wide in Safari/WebKit. Scoped it to .nhs-app-native (the class only
    set for the native app webview) so the NHS website journey - and any
    other non-native-app page - now renders at the correct NHS Frontend
    type scale.

Testing

  • Full end-to-end curl smoke tests of both identity paths (NHS number,
    and name/DOB with an error-retry loop), verifying each redirect and the
    final confirmation panel content.
  • Playwright screenshots (Chromium) confirming header/footer/padding on
    the website journey, and that app pages (layout.html/layout-app.html)
    are visually unaffected.
  • Playwright WebKit checks confirming the Dynamic Type fix: website pages
    render at 48px/19px (matching the live nhs.uk site), native app pages
    still get the intended UICTFontTextStyleBody override.

Co-authored-by: Copilot 223556219+Copilot@users.noreply.github.com

MattFielding and others added 9 commits September 17, 2026 10:34
@MattFielding
Add new NHS website opt-out journey
5af5b82 
Scaffolds a non-app, standard nhsuk-frontend styled opt-out flow
alongside the existing app journeys, under app/views/website/pages/opt-out.
Includes start, preference selection, and confirmation pages plus the
POST handler in routes.js, and links it from the homepage.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@MattFielding
Update opt-out start page copy to match design
be11d29 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@MattFielding
Build full NHS website opt-out journey with identity verification
413299f 
Adds the remaining pages and routing for the opt-out flow, matching the
supplied design screenshots and flow diagram:

- do-you-know-nhs-number (branches to NHS number or name/DOB path)
- enter-your-nhs-number / enter-your-name / enter-your-postcode / enter-date-of-birth
- check-your-details-nhs-number / check-your-details (confirm identity)
- identity-details-error (simulated identity check failure, loops back to retry)
- confirm-unsubscribe-request (renamed from preferences-1, now the final step)
- confirmation-saved-yes / confirmation-saved-no updated to use the nhsuk
  panel component and match the 'What happens next' / 'Before you leave
  this page' design

Routing added in app/routes.js for every POST step, including branching
logic so the postcode page is shared by both identity paths, and a
simulated identity match (postcode SW1 2CV) that triggers the error page.

Also adds app/views/website/pages/opt-out/README.md with a Mermaid flow
diagram documenting the full journey and routing.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@MattFielding
Align opt-out journey with NHS prototype kit LLM guide
a5c02df 
Checked the new website opt-out pages against
https://github.com/edwardhorsford/NHS-LLM-documentation and fixed several
deviations:

- Fixed a real bug: '{% set backLink = true %}' does nothing, because
  layout.html has no beforeContent block that reads it. Replaced with the
  actual backLink() component (auto-imported) in a beforeContent block on
  every page, so back links now genuinely render.
- Renamed session data keys to camelCase (knowsNhsNumber, nhsNumber,
  firstName, lastName, postcode, dateOfBirth, confirmUnsubscribe) per the
  guide's naming convention, updating routes.js and all views to match.
- Renamed POST routes to the '-answer' suffix (eg enter-your-name-answer)
  as shown in the guide's routing examples, and dropped the enter-date-of-
  birth route entirely since it did no branching or validation - the form
  now posts straight to check-your-details.
- Radio values now match their visible text exactly (Yes/No, Keep
  receiving.../Unsubscribe from...) instead of arbitrary lowercase codes.
- Replaced the hand-rolled date fieldset with NHS Frontend's dateInput
  component (namePrefix: dateOfBirth), and removed redundant explicit
  macro imports (radios/input/summaryList/panel) since template-with-
  imports.njk already provides them globally.
- Grouped the two name fields in enter-your-name with a fieldset/legend
  rather than a bare h1, matching the guide's related-inputs pattern.
- Added value prefilling (value: data.xxx) across text inputs, radios and
  the date input so returning to a page shows previous answers.
- Updated app/views/website/pages/opt-out/README.md with notes on these
  conventions.

Re-verified both identity paths (NHS number, and name/DOB) end-to-end via
curl, including the error retry loop, after the refactor.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@MattFielding
Fix website journey layout: back-link padding, header/footer isolation
eea6b1b 
- Add layout-website.html, extending layout.html, overriding header/footer
  and setting mainClasses = "nhsuk-main-wrapper--s" for this journey only,
  per NHS design system question-page and start-page patterns. This fixes
  the excess padding above back links.
- Header now shows only logo + service name (no app nav), footer shows the
  standard meta links (accessibility, contact, cookies, privacy, terms) and
  correct copyright text, per the header/footer component guidance.
- Swap all 12 opt-out pages to extend layout-website.html instead of
  layout.html. App journeys (v5.4/v5.5/v6) are untouched and still use
  layout.html/layout-app.html with their original header/footer.
- start.html: use nhsuk-heading-xl per the start-page pattern.
- Update README with notes on the fix and isolation approach.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@MattFielding
Change website footer copyright to © NHS England
2a87bf3 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@MattFielding
Start page: model it as hosted on NHS.UK, entering the service on Start
b8009d8 
- Add layout-nhsuk-website.html for the start page only: full NHS.UK
  header (search + navigation) and breadcrumb, reflecting that a
  services start page is usually hosted on the main NHS.UK website per
  https://service-manual.nhs.uk/design-system/patterns/start-page
- start.html now uses this layout, with a "Start now" button (was
  "Continue") linking into the transactional service.
- Every other page in the journey still uses layout-website.html, the
  simpler logo + service name header - so once the user clicks "Start
  now" they visibly move from nhs.uk into the service, matching how real
  NHS.UK services (e.g. Find your NHS number) work.
- Update README with notes on this split.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@MattFielding
Start page footer: match real NHS.UK website footer
f3228a0 
Replace the simple meta-link footer on the start page with the actual
4-column navigation footer used on nhs.uk (Home, Health A to Z, NHS
services, Healthy living, Mental health, Care and support / NHS App, Find
my NHS number, About the NHS, Healthcare abroad / Manage NHS profiles,
Other NHS websites / About us, Accessibility statement, Our policies,
Cookies), with "© Crown copyright" - matching
https://www.nhs.uk/nhs-services/hospitals/book-an-appointment/

Only the start page uses this (layout-nhsuk-website.html); the rest of
the journey keeps the simpler transactional footer with "© NHS England"
in layout-website.html.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@MattFielding
Fix: scope iOS Dynamic Type override to native app pages only
6c27b3d 
The @supports (font: -apple-system-body) rule in _ios-dynamic-text.scss
was applied to the bare `html` element, with !important. Safari/WebKit
(including desktop Safari, which also recognises this value) matched the
@supports check and reset the font (family, size, line-height) for every
page in the prototype - including the NHS website opt-out journey - to
the OS Dynamic Type body size, which is noticeably smaller than the NHS
Frontend type scale. This made all text look smaller than the real NHS
website when viewed in Safari.

Scope the override to `.nhs-app-native` (the body class set only by
layout-app.html/layout-app-v1.html for the native app webview) so it only
affects app pages that are actually rendered inside the native app, and
no longer leaks into the website journey or any other page using
layout.html directly.

Verified with Playwright's WebKit engine:
- /website/pages/opt-out/start: h1 48px, body text 19px (unaffected, as
  expected for a page using the standard NHS Frontend type scale)
- /v6/pages/health-choices (extends layout-app.html, has nhs-app-native
  class): body font still overridden to UICTFontTextStyleBody (unchanged
  native app behaviour)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@MattFielding