Add Football Match summary layout (#13810)

andrewHEguardian · web-flow · commit db59932c5644 · 2025-04-22T15:51:01.000+01:00
* Add FE type and match summary parser

- check has team stats in component

* add page type and schema

* Add layout and expand sportDataPage type

- remove competition from match stats props

* Add handler function
diff --git a/dotcom-rendering/src/components/FootballCompetitionSelect.tsx b/dotcom-rendering/src/components/FootballCompetitionSelect.tsx
@@ -1,15 +1,15 @@
 import { Option, Select } from '@guardian/source/react-components';
 import { palette } from '../palette';
-import type { FootballPageKind, Region } from '../sportDataPage';
+import type { FootballPageWithRegionsKind, Region } from '../sportDataPage';
 
 type Props = {
 	regions: Region[];
-	kind: FootballPageKind;
+	kind: FootballPageWithRegionsKind;
 	pageId: string;
 	onChange: (competitionTag: string) => void;
 };
 
-const allLabel = (kind: FootballPageKind): string => {
+const allLabel = (kind: FootballPageWithRegionsKind): string => {
 	switch (kind) {
 		case 'FootballFixtures':
 			return 'All fixtures';
@@ -22,7 +22,7 @@ const allLabel = (kind: FootballPageKind): string => {
 	}
 };
 
-const getPagePath = (kind: FootballPageKind) => {
+const getPagePath = (kind: FootballPageWithRegionsKind) => {
 	switch (kind) {
 		case 'FootballFixtures':
 			return '/football/fixtures';
diff --git a/dotcom-rendering/src/components/FootballMatchSummary.stories.tsx b/dotcom-rendering/src/components/FootballMatchSummary.stories.tsx
@@ -20,9 +20,10 @@ type Story = StoryObj<typeof meta>;
 
 export const FootballMatchSummary = {
 	args: {
-		homeTeam: matchReport.homeTeam,
-		awayTeam: matchReport.awayTeam,
-		competition: matchReport.competition.fullName,
-		comments: matchReport.comments,
+		match: {
+			homeTeam: matchReport.homeTeam,
+			awayTeam: matchReport.awayTeam,
+			comments: matchReport.comments,
+		},
 	},
 } satisfies Story;
diff --git a/dotcom-rendering/src/components/FootballMatchSummary.tsx b/dotcom-rendering/src/components/FootballMatchSummary.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { from } from '@guardian/source/foundations';
-import type { FootballTeam } from '../footballMatch';
+import type { FootballMatch } from '../footballMatch';
 import { grid } from '../grid';
 import { palette } from '../palette';
 import { MatchNav } from './MatchNav';
@@ -27,18 +27,10 @@ const gridStyles = css`
 `;
 
 type Props = {
-	homeTeam: FootballTeam;
-	awayTeam: FootballTeam;
-	comments?: string;
-	competition: string;
+	match: FootballMatch;
 };
 
-export const FootballMatchSummary = ({
-	homeTeam,
-	awayTeam,
-	comments,
-	competition,
-}: Props) => (
+export const FootballMatchSummary = ({ match }: Props) => (
 	<main id="maincontent" css={gridStyles}>
 		<div
 			css={css`
@@ -59,9 +51,9 @@ export const FootballMatchSummary = ({
 			`}
 		>
 			<MatchNav
-				homeTeam={homeTeam}
-				awayTeam={awayTeam}
-				comments={comments}
+				homeTeam={match.homeTeam}
+				awayTeam={match.awayTeam}
+				comments={match.comments}
 			/>
 		</div>
 		<div
@@ -70,9 +62,8 @@ export const FootballMatchSummary = ({
 			`}
 		>
 			<MatchStats
-				home={homeTeam}
-				away={awayTeam}
-				competition={competition}
+				home={match.homeTeam}
+				away={match.awayTeam}
 				usage="MatchSummary"
 			/>
 		</div>
diff --git a/dotcom-rendering/src/components/GetMatchStats.importable.tsx b/dotcom-rendering/src/components/GetMatchStats.importable.tsx
@@ -99,7 +99,6 @@ export const GetMatchStats = ({ matchUrl, format }: Props) => {
 			<MatchStats
 				home={cleanTeamData(data.homeTeam)}
 				away={cleanTeamData(data.awayTeam)}
-				competition={data.competition.fullName}
 				format={format}
 				usage="Article"
 			/>
diff --git a/dotcom-rendering/src/components/MatchStats.stories.tsx b/dotcom-rendering/src/components/MatchStats.stories.tsx
@@ -17,7 +17,6 @@ export const Default = () => {
 		<MatchStats
 			home={matchReport.homeTeam}
 			away={matchReport.awayTeam}
-			competition="FA Cup"
 			format={{
 				display: ArticleDisplay.Standard,
 				design: ArticleDesign.Standard,
@@ -46,7 +45,6 @@ export const InContext = () => {
 					<MatchStats
 						home={matchReport.homeTeam}
 						away={matchReport.awayTeam}
-						competition="FA Cup"
 						format={{
 							display: ArticleDisplay.Standard,
 							design: ArticleDesign.Standard,
@@ -69,7 +67,6 @@ const DefaultInLiveblog = () => {
 		<MatchStats
 			home={matchReport.homeTeam}
 			away={matchReport.awayTeam}
-			competition="FA Cup"
 			format={{
 				display: ArticleDisplay.Standard,
 				design: ArticleDesign.DeadBlog,
@@ -98,7 +95,6 @@ export const NoStats = () => {
 				corners: 0,
 				fouls: 0,
 			}}
-			competition="Women's Nations League"
 			format={{
 				display: ArticleDisplay.Standard,
 				design: ArticleDesign.Standard,
diff --git a/dotcom-rendering/src/components/MatchStats.tsx b/dotcom-rendering/src/components/MatchStats.tsx
@@ -22,7 +22,6 @@ import { Lineup } from './Lineup';
 type MatchStatsData = {
 	home: TeamType;
 	away: TeamType;
-	competition: string;
 };
 
 type MatchSummaryProps = MatchStatsData & {
diff --git a/dotcom-rendering/src/footballMatch.ts b/dotcom-rendering/src/footballMatch.ts
@@ -29,6 +29,7 @@ export type FootballTeam = {
 	corners: number;
 	fouls: number;
 	colours: string;
+	// ToDo: this needs to be optional
 	score: number;
 	crest: string;
 	scorers: string[];
@@ -48,7 +49,7 @@ export type FootballPlayer = {
 export type FootballMatch = {
 	homeTeam: FootballTeam;
 	awayTeam: FootballTeam;
-	comment: string;
+	comments: string;
 };
 
 type UnknownEventType = {
@@ -142,6 +143,6 @@ export const parse = (
 	return ok({
 		homeTeam: parsedHomeTeam.value,
 		awayTeam: parsedAwayTeam.value,
-		comment: feFootballMatch.comment,
+		comments: feFootballMatch.comments,
 	});
 };
diff --git a/dotcom-rendering/src/frontend/feFootballMatchPage.ts b/dotcom-rendering/src/frontend/feFootballMatchPage.ts
@@ -36,7 +36,7 @@ export type FEFootballMatch = {
 	id: string;
 	homeTeam: FEFootballTeam;
 	awayTeam: FEFootballTeam;
-	comment: string;
+	comments: string;
 };
 
 export type FEFootballMatchPage = FEFootballDataPage & {
diff --git a/dotcom-rendering/src/frontend/schemas/feFootballMatchPage.json b/dotcom-rendering/src/frontend/schemas/feFootballMatchPage.json
@@ -283,13 +283,13 @@
                                 "shotsOn"
                             ]
                         },
-                        "comment": {
+                        "comments": {
                             "type": "string"
                         }
                     },
                     "required": [
                         "awayTeam",
-                        "comment",
+                        "comments",
                         "homeTeam",
                         "id"
                     ]
diff --git a/dotcom-rendering/src/layouts/SportDataPageLayout.tsx b/dotcom-rendering/src/layouts/SportDataPageLayout.tsx
@@ -1,6 +1,7 @@
 import { palette } from '@guardian/source/foundations';
 import { CricketScorecardPage } from '../components/CricketScorecardPage';
 import { FootballMatchesPageWrapper } from '../components/FootballMatchesPageWrapper.importable';
+import { FootballMatchSummary } from '../components/FootballMatchSummary';
 import { FootballTablesPage } from '../components/FootballTablesPage';
 import { Footer } from '../components/Footer';
 import { HeaderAdSlot } from '../components/HeaderAdSlot';
@@ -63,6 +64,8 @@ const SportsPage = ({
 					guardianBaseUrl={sportData.guardianBaseURL}
 				/>
 			);
+		case 'FootballMatchSummary':
+			return <FootballMatchSummary match={sportData.match} />;
 	}
 };
 
diff --git a/dotcom-rendering/src/model/validate.ts b/dotcom-rendering/src/model/validate.ts
@@ -5,12 +5,14 @@ import addFormats from 'ajv-formats';
 import type { FEArticle } from '../frontend/feArticle';
 import type { FECricketMatchPage } from '../frontend/feCricketMatchPage';
 import type { FEFootballMatchListPage } from '../frontend/feFootballMatchListPage';
+import type { FEFootballMatchPage } from '../frontend/feFootballMatchPage';
 import type { FEFootballTablesPage } from '../frontend/feFootballTablesPage';
 import type { FEFront } from '../frontend/feFront';
 import type { FETagPage } from '../frontend/feTagPage';
 import articleSchema from '../frontend/schemas/feArticle.json';
 import cricketMatchPageSchema from '../frontend/schemas/feCricketMatchPage.json';
 import footballMatchListPageSchema from '../frontend/schemas/feFootballMatchListPage.json';
+import footballMatchPageSchema from '../frontend/schemas/feFootballMatchPage.json';
 import footballTablesPageSchema from '../frontend/schemas/feFootballTablesPage.json';
 import frontSchema from '../frontend/schemas/feFront.json';
 import tagPageSchema from '../frontend/schemas/feTagPage.json';
@@ -51,6 +53,9 @@ const validateFootballTablesPage = ajv.compile<FEFootballTablesPage>(
 const validateCricketMatchPage = ajv.compile<FECricketMatchPage>(
 	cricketMatchPageSchema,
 );
+const validateFootballMatchPage = ajv.compile<FEFootballMatchPage>(
+	footballMatchPageSchema,
+);
 
 export const validateAsFEArticle = (data: unknown): FEArticle => {
 	if (validateArticle(data)) return data;
@@ -165,3 +170,19 @@ export const validateAsCricketMatchPageType = (
             ${JSON.stringify(validateCricketMatchPage.errors, null, 2)}`,
 	);
 };
+
+export const validateAsFootballMatchPageType = (
+	data: unknown,
+): FEFootballMatchPage => {
+	if (validateFootballMatchPage(data)) return data;
+
+	const url =
+		isObject(data) && isObject(data.config) && isString(data.config.pageId)
+			? data.config.pageId
+			: 'unknown url';
+
+	throw new TypeError(
+		`Unable to validate request body for url ${url}.\n
+            ${JSON.stringify(validateFootballMatchPage.errors, null, 2)}`,
+	);
+};
diff --git a/dotcom-rendering/src/server/handler.sportDataPage.web.ts b/dotcom-rendering/src/server/handler.sportDataPage.web.ts
@@ -1,5 +1,6 @@
 import type { RequestHandler } from 'express';
 import { parse as parseCricketMatch } from '../cricketMatch';
+import { parse as parseFootballMatch } from '../footballMatch';
 import {
 	getParserErrorMessage,
 	parse as parseFootballMatches,
@@ -8,18 +9,21 @@ import { parse as parseFootballTables } from '../footballTables';
 import type { FECricketMatchPage } from '../frontend/feCricketMatchPage';
 import type { FEFootballCompetition } from '../frontend/feFootballDataPage';
 import type { FEFootballMatchListPage } from '../frontend/feFootballMatchListPage';
+import type { FEFootballMatchPage } from '../frontend/feFootballMatchPage';
 import type { FEFootballTablesPage } from '../frontend/feFootballTablesPage';
 import { Pillar } from '../lib/articleFormat';
 import { extractNAV } from '../model/extract-nav';
 import {
 	validateAsCricketMatchPageType,
 	validateAsFootballMatchListPage,
+	validateAsFootballMatchPageType,
 	validateAsFootballTablesPage,
 } from '../model/validate';
 import type {
 	CricketMatchPage,
 	FootballMatchListPage,
 	FootballMatchListPageKind,
+	FootballMatchSummaryPage,
 	FootballTablesPage,
 	Region,
 } from '../sportDataPage';
@@ -195,3 +199,45 @@ export const handleCricketMatchPage: RequestHandler = ({ body }, res) => {
 	const { html, prefetchScripts } = renderSportPage(parsedCricketMatchData);
 	res.status(200).set('Link', makePrefetchHeader(prefetchScripts)).send(html);
 };
+
+const parseFEFootballMatch = (
+	data: FEFootballMatchPage,
+): FootballMatchSummaryPage => {
+	const parsedFootballMatch = parseFootballMatch(data.match);
+
+	if (parsedFootballMatch.kind === 'error') {
+		throw new Error(
+			`Failed to parse football match: ${parsedFootballMatch.error.kind} ${parsedFootballMatch.error.message}`,
+		);
+	}
+
+	return {
+		match: parsedFootballMatch.value,
+		kind: 'FootballMatchSummary',
+		nav: {
+			...extractNAV(data.nav),
+			selectedPillar: Pillar.Sport,
+		},
+		editionId: data.editionId,
+		guardianBaseURL: data.guardianBaseURL,
+		config: data.config,
+		pageFooter: data.pageFooter,
+		isAdFreeUser: data.isAdFreeUser,
+		canonicalUrl: data.canonicalUrl,
+		contributionsServiceUrl: data.contributionsServiceUrl,
+	};
+};
+
+export const handleFootballMatchPage: RequestHandler = ({ body }, res) => {
+	recordTypeAndPlatform('FootballMatchPage', 'web');
+
+	const footballMatchPageValidated: FEFootballMatchPage =
+		validateAsFootballMatchPageType(body);
+
+	const parsedFootballMatchData = parseFEFootballMatch(
+		footballMatchPageValidated,
+	);
+
+	const { html, prefetchScripts } = renderSportPage(parsedFootballMatchData);
+	res.status(200).set('Link', makePrefetchHeader(prefetchScripts)).send(html);
+};
diff --git a/dotcom-rendering/src/server/render.sportDataPage.web.tsx b/dotcom-rendering/src/server/render.sportDataPage.web.tsx
@@ -1,6 +1,7 @@
 import { isString } from '@guardian/libs';
 import { ConfigProvider } from '../components/ConfigContext';
 import { SportDataPageComponent } from '../components/SportDataPageComponent';
+import type { FootballMatch } from '../footballMatch';
 import {
 	ASSET_ORIGIN,
 	generateScriptTags,
@@ -12,7 +13,7 @@ import { polyfillIO } from '../lib/polyfill.io';
 import { createGuardian } from '../model/guardian';
 import type {
 	CricketMatchPage,
-	FootballDataPage,
+	FootballDataWithRegionsPage,
 	SportDataPage,
 	SportPageKind,
 } from '../sportDataPage';
@@ -34,6 +35,8 @@ const decideDescription = (kind: SportPageKind) => {
 			return `Football tables ${fromTheGuardian}`;
 		case 'CricketMatch':
 			return `Cricket scores ${fromTheGuardian}`;
+		case 'FootballMatchSummary':
+			return `Football matches ${fromTheGuardian}`;
 	}
 };
 
@@ -43,13 +46,23 @@ const decideTitle = (sportPage: SportDataPage) => {
 		case 'FootballResults':
 		case 'FootballFixtures':
 		case 'FootballTables':
-			return decideFootballTitle(sportPage);
+			return decideFootballTitleWithCompetition(sportPage);
 		case 'CricketMatch':
-			return decideCricketTitle(sportPage);
+			return createCricketTitle(sportPage);
+		case 'FootballMatchSummary':
+			return createMatchSummaryTitle(sportPage.match);
 	}
 };
 
-const decideFootballTitle = (sportPage: FootballDataPage) => {
+function createMatchSummaryTitle(match: FootballMatch) {
+	return `${match.homeTeam.name} ${match.homeTeam.score ?? ''} - ${
+		match.awayTeam.score ?? ''
+	} ${match.awayTeam.name} | Football | The Guardian`;
+}
+
+const decideFootballTitleWithCompetition = (
+	sportPage: FootballDataWithRegionsPage,
+) => {
 	const { config, kind, regions } = sportPage;
 	const pagePath = config.pageId.startsWith('/')
 		? config.pageId.slice(1)
@@ -80,7 +93,7 @@ const decideFootballTitle = (sportPage: FootballDataPage) => {
 	}
 };
 
-const decideCricketTitle = (sportPage: CricketMatchPage) => {
+const createCricketTitle = (sportPage: CricketMatchPage) => {
 	return `${sportPage.match.competitionName}, ${sportPage.match.venueName} | Cricket | The Guardian`;
 };
 
diff --git a/dotcom-rendering/src/server/server.dev.ts b/dotcom-rendering/src/server/server.dev.ts
diff --git a/dotcom-rendering/src/sportDataPage.ts b/dotcom-rendering/src/sportDataPage.ts

Original file line number	Diff line number	Diff line change
`@@ -283,13 +283,13 @@`
`283`	`283`	`"shotsOn"`
`284`	`284`	`]`
`285`	`285`	`},`
`286`		`- "comment": {`
	`286`	`+ "comments": {`
`287`	`287`	`"type": "string"`
`288`	`288`	`}`
`289`	`289`	`},`
`290`	`290`	`"required": [`
`291`	`291`	`"awayTeam",`
`292`		`- "comment",`
	`292`	`+ "comments",`
`293`	`293`	`"homeTeam",`
`294`	`294`	`"id"`
`295`	`295`	`]`