Add notifications to football match header (#15720)

The header now takes a `NotificationsClient` as a prop. The live version
of this is passed from the wrapper component, and a mock version is
passed in the stories. There are also some small changes to the stories
to ensure that a mix of apps and web versions of the header are
captured, demonstrating that notifications are correctly shown on apps
and not on web.

For the notification payload sent via Bridget a "display name" is
required, which specifies the two teams and the date of the match. This
change therefore includes a function to calculate this from the match
information, and some tests to ensure this works as expected.

Author: JamieB-gu

dotcom-rendering/src/components/FootballMatchHeader/FootballMatchHeader.stories.tsx

@@ -7,6 +7,7 @@ import {
 	matchResult,
 } from '../../../fixtures/manual/footballMatches';
 import type { FEFootballMatchHeader } from '../../frontend/feFootballMatchHeader';
+import { NotificationsToggle } from '../NotificationsToggle.stories';
 import { FootballMatchHeader as FootballMatchHeaderComponent } from './FootballMatchHeader';
 
 const meta = preview.meta({
@@ -32,7 +33,7 @@ const feHeaderData: FEFootballMatchHeader = {
 		'https://www.theguardian.com/football/match/2025/nov/26/arsenal-v-bayernmunich',
 };
 
-export const Fixture = meta.story({
+export const FixtureWeb = meta.story({
 	args: {
 		initialTab: 'info',
 		initialData: {
@@ -67,6 +68,7 @@ export const Fixture = meta.story({
 		matchHeaderURL:
 			'https://api.nextgen.guardianapps.co.uk/football/api/match-header/2026/02/08/26247/48490.json',
 		renderingTarget: 'Web',
+		notificationsClient: NotificationsToggle.args.notificationsClient,
 	},
 	play: async ({ canvas, canvasElement, step }) => {
 		const nav = canvas.getByRole('navigation');
@@ -99,22 +101,23 @@ export const Fixture = meta.story({
 	},
 });
 
-export const Live = meta.story({
+export const LiveApps = meta.story({
 	args: {
 		initialTab: 'live',
 		leagueName: 'Premier League',
 		leagueURL: 'https://www.theguardian.com/football/premierleague',
 		edition: 'EUR',
 		matchHeaderURL:
 			'https://api.nextgen.guardianapps.co.uk/football/api/match-header/2026/02/08/26247/48490.json',
-		refreshInterval: Fixture.input.args.refreshInterval,
+		refreshInterval: FixtureWeb.input.args.refreshInterval,
 		getHeaderData: () =>
 			getMockData({
 				...feHeaderData,
 				footballMatch: matchDayLive,
 				reportURL: undefined,
 			}),
-		renderingTarget: 'Web',
+		renderingTarget: 'Apps',
+		notificationsClient: NotificationsToggle.args.notificationsClient,
 	},
 	play: async ({ canvas, canvasElement, step }) => {
 		await step(
@@ -144,23 +147,29 @@ export const Live = meta.story({
 			void expect(tabs[1]).toHaveTextContent('Match info');
 		});
 	},
+	parameters: {
+		config: {
+			renderingTarget: 'Apps',
+		},
+	},
 });
 
-export const Result = meta.story({
+export const ResultWeb = meta.story({
 	args: {
 		initialTab: 'report',
 		leagueName: 'Premier League',
 		leagueURL: 'https://www.theguardian.com/football/premierleague',
 		edition: 'AU',
 		matchHeaderURL:
 			'https://api.nextgen.guardianapps.co.uk/football/api/match-header/2026/02/08/26247/48490.json',
-		refreshInterval: Fixture.input.args.refreshInterval,
+		refreshInterval: FixtureWeb.input.args.refreshInterval,
 		getHeaderData: () =>
 			getMockData({
 				...feHeaderData,
 				footballMatch: matchResult,
 			}),
 		renderingTarget: 'Web',
+		notificationsClient: NotificationsToggle.args.notificationsClient,
 	},
 
 	play: async ({ canvas, canvasElement, step }) => {
@@ -191,21 +200,22 @@ export const Result = meta.story({
 	},
 });
 
-export const AppsResult = meta.story({
+export const ResultApps = meta.story({
 	args: {
 		initialTab: 'report',
 		leagueName: 'Premier League',
 		leagueURL: 'https://www.theguardian.com/football/premierleague',
 		edition: 'AU',
 		matchHeaderURL:
 			'https://api.nextgen.guardianapps.co.uk/football/api/match-header/2026/02/08/26247/48490.json',
-		refreshInterval: Fixture.input.args.refreshInterval,
+		refreshInterval: FixtureWeb.input.args.refreshInterval,
 		getHeaderData: () =>
 			getMockData({
 				...feHeaderData,
 				footballMatch: matchResult,
 			}),
 		renderingTarget: 'Apps',
+		notificationsClient: NotificationsToggle.args.notificationsClient,
 	},
 
 	play: async ({ canvas, canvasElement, step }) => {

dotcom-rendering/src/components/FootballMatchHeader/FootballMatchHeader.tsx

@@ -19,6 +19,7 @@ import useSWR from 'swr';
 import type { FootballMatch } from '../../footballMatchV2';
 import { grid } from '../../grid';
 import { ArticleDesign, type ArticleFormat } from '../../lib/articleFormat';
+import type { NotificationsClient } from '../../lib/bridgetApi';
 import {
 	type EditionId,
 	getLocaleFromEdition,
@@ -34,6 +35,7 @@ import { background, border, primaryText, secondaryText } from './colours';
 import { FootballMatchHeaderFallback } from './FootballMatchHeaderFallback';
 import { type HeaderData, parse as parseHeaderData } from './headerData';
 import { Hr } from './Hr';
+import { Notifications } from './Notifications';
 import { Tabs } from './Tabs';
 
 export type FootballMatchHeaderProps = {
@@ -51,6 +53,7 @@ export type FootballMatchHeaderProps = {
 type Props = FootballMatchHeaderProps & {
 	getHeaderData: (url: string) => Promise<unknown>;
 	refreshInterval: number;
+	notificationsClient: NotificationsClient;
 };
 
 export const FootballMatchHeader = (props: Props) => {
@@ -122,6 +125,11 @@ export const FootballMatchHeader = (props: Props) => {
 				<Hr borderStyle="dotted" borderColour={border(match.kind)} />
 				<Teams match={match} />
 				<Comment match={match} />
+				<Notifications
+					edition={props.edition}
+					match={match}
+					notificationsClient={props.notificationsClient}
+				/>
 				<Hr borderStyle="solid" borderColour={border(match.kind)} />
 				<Tabs {...tabs} />
 			</div>

dotcom-rendering/src/components/FootballMatchHeader/Notifications.stories.tsx

@@ -3,6 +3,7 @@ import preview from '../../../.storybook/preview';
 import { palette } from '../../palette';
 import { NotificationsToggle } from '../NotificationsToggle.stories';
 import { background } from './colours';
+import { FixtureWeb } from './FootballMatchHeader.stories';
 import { Notifications } from './Notifications';
 
 const meta = preview.meta({
@@ -11,9 +12,8 @@ const meta = preview.meta({
 
 export const Fixture = meta.story({
 	args: {
-		matchKind: 'Fixture',
-		displayName: 'Wolverhampton Wanderers vs Belgium (2026-03-20 GMT)',
-		id: 'match-id',
+		match: FixtureWeb.input.args.initialData.match,
+		edition: 'UK',
 		notificationsClient: NotificationsToggle.args.notificationsClient,
 	},
 	decorators: [gridContainerDecorator],
@@ -30,7 +30,23 @@ export const Fixture = meta.story({
 
 export const Live = Fixture.extend({
 	args: {
-		matchKind: 'Live',
+		edition: 'AU',
+		match: {
+			...Fixture.input.args.match,
+			kind: 'Live',
+			status: 'HT',
+			homeTeam: {
+				...Fixture.input.args.match.homeTeam,
+				score: 1,
+				scorers: [],
+			},
+			awayTeam: {
+				...Fixture.input.args.match.awayTeam,
+				score: 0,
+				scorers: [],
+			},
+			comment: undefined,
+		},
 	},
 	parameters: {
 		colourSchemeBackground: {
@@ -44,8 +60,12 @@ export const Live = Fixture.extend({
  * This should be blank. You can't sign up for notifications once a match is
  * over.
  */
-export const Result = Fixture.extend({
+export const Result = Live.extend({
 	args: {
-		matchKind: 'Result',
+		edition: 'US',
+		match: {
+			...Live.input.args.match,
+			kind: 'Result',
+		},
 	},
 });

dotcom-rendering/src/components/FootballMatchHeader/Notifications.test.tsx

@@ -0,0 +1,43 @@
+import type { FootballMatch } from '../../footballMatchV2';
+import { notificationDisplayName } from './Notifications';
+
+const matchFixture = {
+	kind: 'Fixture',
+	kickOff: new Date('2025-11-20T20:30:00Z'),
+	venue: 'Old Trafford',
+	homeTeam: {
+		name: 'Wolverhampton Wanderers',
+		paID: '44',
+	},
+	awayTeam: {
+		name: 'Belgium',
+		paID: '997',
+	},
+	paId: 'matchId',
+} satisfies FootballMatch;
+
+describe('notificationDisplayName', () => {
+	it('puts the home team first, the away team second, and uses a UK date format', () => {
+		const displayName = notificationDisplayName('UK')(matchFixture);
+
+		expect(displayName).toEqual(
+			'Wolverhampton Wanderers vs Belgium (20/11/2025, GMT)',
+		);
+	});
+
+	it('puts the home team first, the away team second, and uses the correct day and date format for AU', () => {
+		const displayName = notificationDisplayName('AU')(matchFixture);
+
+		expect(displayName).toEqual(
+			'Wolverhampton Wanderers vs Belgium (21/11/2025, AEDT)',
+		);
+	});
+
+	it('puts the home team first, the away team second, and uses a US date format', () => {
+		const displayName = notificationDisplayName('US')(matchFixture);
+
+		expect(displayName).toEqual(
+			'Wolverhampton Wanderers vs Belgium (11/20/2025, EST)',
+		);
+	});
+});

dotcom-rendering/src/components/FootballMatchHeader/Notifications.tsx

@@ -1,31 +1,41 @@
 import { css } from '@emotion/react';
 import { space, textSans14Object } from '@guardian/source/foundations';
+import { useMemo } from 'react';
 import type { FootballMatch } from '../../footballMatchV2';
 import { grid } from '../../grid';
 import type { NotificationsClient } from '../../lib/bridgetApi';
+import {
+	type EditionId,
+	getLocaleFromEdition,
+	getTimeZoneFromEdition,
+} from '../../lib/edition';
 import { palette } from '../../palette';
 import { useConfig } from '../ConfigContext';
 import { NotificationsToggle } from '../NotificationsToggle';
 import { background, border, primaryText } from './colours';
 import { Hr } from './Hr';
 
 type Props = {
-	matchKind: FootballMatch['kind'];
-	displayName: string;
-	id: string;
+	match: FootballMatch;
+	edition: EditionId;
 	notificationsClient: NotificationsClient;
 };
 
 export const Notifications = (props: Props) => {
 	const { renderingTarget } = useConfig();
+	// useMemo to limit constructions of `Intl.DateTimeFormat`
+	const displayName = useMemo(
+		() => notificationDisplayName(props.edition),
+		[props.edition],
+	);
 
-	if (renderingTarget !== 'Apps' || props.matchKind === 'Result') {
+	if (renderingTarget !== 'Apps' || props.match.kind === 'Result') {
 		return null;
 	}
 
 	return (
 		<>
-			<Hr borderStyle="solid" borderColour={border(props.matchKind)} />
+			<Hr borderStyle="solid" borderColour={border(props.match.kind)} />
 			<p
 				css={{
 					...textSans14Object,
@@ -36,27 +46,49 @@ export const Notifications = (props: Props) => {
 					paddingRight: 6,
 				}}
 				style={{
-					color: palette(primaryText(props.matchKind)),
+					color: palette(primaryText(props.match.kind)),
 				}}
 			>
 				Be notified about the lineup, kick-off time, goals, half-time
 				and full time scores
 			</p>
 			<NotificationsToggle
-				displayName={props.displayName}
-				id={props.id}
+				displayName={displayName(props.match)}
+				id={props.match.paId}
 				notificationType="football-match"
 				notificationsClient={props.notificationsClient}
-				colour={primaryText(props.matchKind)}
-				backgroundColour={background(props.matchKind)}
-				iconColour={primaryText(props.matchKind)}
+				colour={primaryText(props.match.kind)}
+				backgroundColour={background(props.match.kind)}
+				iconColour={primaryText(props.match.kind)}
 				css={{
 					'&': css(grid.column.centre),
 					paddingLeft: 6,
 					paddingRight: 6,
-					paddingBottom: space[5],
+					paddingBottom: space[4],
 				}}
 			/>
 		</>
 	);
 };
+
+/**
+ * Exported for the tests.
+ */
+export const notificationDisplayName =
+	(edition: EditionId) =>
+	(match: FootballMatch): string => {
+		const homeTeam = match.homeTeam.name;
+		const awayTeam = match.awayTeam.name;
+		const date = matchDayFormatterForEdition(edition).format(match.kickOff);
+
+		return `${homeTeam} vs ${awayTeam} (${date})`;
+	};
+
+const matchDayFormatterForEdition = (edition: EditionId): Intl.DateTimeFormat =>
+	new Intl.DateTimeFormat(getLocaleFromEdition(edition), {
+		day: 'numeric',
+		month: 'numeric',
+		year: 'numeric',
+		timeZoneName: 'short',
+		timeZone: getTimeZoneFromEdition(edition),
+	});

dotcom-rendering/src/components/FootballMatchHeaderWrapper.island.tsx

@@ -1,3 +1,4 @@
+import { getNotificationsClient } from '../lib/bridgetApi';
 import type { FootballMatchHeaderProps } from './FootballMatchHeader/FootballMatchHeader';
 import { FootballMatchHeader } from './FootballMatchHeader/FootballMatchHeader';
 import type { HeaderData } from './FootballMatchHeader/headerData';
@@ -27,6 +28,7 @@ export const FootballMatchHeaderWrapper = (props: Props) => (
 		getHeaderData={getHeaderData}
 		refreshInterval={16_000}
 		renderingTarget={props.renderingTarget}
+		notificationsClient={getNotificationsClient()}
 	/>
 );