Redesign match report

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

@@ -68,9 +68,8 @@ export const Fixture = {
 				reportURL: undefined,
 			}),
 		refreshInterval: 3_000,
-		matchHeaderURL: new URL(
+		matchHeaderURL:
 			'https://api.nextgen.guardianapps.co.uk/football/api/match-header/2026/02/08/26247/48490.json',
-		),
 	},
 	play: async ({ canvas, canvasElement, step }) => {
 		const nav = canvas.getByRole('navigation');
@@ -107,9 +106,8 @@ export const Live = {
 	args: {
 		initialTab: 'live',
 		edition: 'EUR',
-		matchHeaderURL: new URL(
+		matchHeaderURL:
 			'https://api.nextgen.guardianapps.co.uk/football/api/match-header/2026/02/08/26247/48490.json',
-		),
 		refreshInterval: Fixture.args.refreshInterval,
 		getHeaderData: () =>
 			getMockData({
@@ -152,9 +150,8 @@ export const Result = {
 	args: {
 		initialTab: 'report',
 		edition: 'AU',
-		matchHeaderURL: new URL(
+		matchHeaderURL:
 			'https://api.nextgen.guardianapps.co.uk/football/api/match-header/2026/02/08/26247/48490.json',
-		),
 		refreshInterval: Fixture.args.refreshInterval,
 		getHeaderData: () =>
 			getMockData({

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

@@ -34,7 +34,7 @@ export type FootballMatchHeaderProps = {
 	initialTab: ComponentProps<typeof Tabs>['selected'];
 	initialData?: HeaderData;
 	edition: EditionId;
-	matchHeaderURL: URL;
+	matchHeaderURL: string;
 };
 
 type Props = FootballMatchHeaderProps & {

dotcom-rendering/src/components/FootballMatchInfoPage.tsx

@@ -42,7 +42,7 @@ export const FootballMatchInfoPage = ({
 						},
 					}}
 					edition={edition}
-					matchHeaderURL={matchHeaderUrl}
+					matchHeaderURL={matchHeaderUrl.href}
 				/>
 			</Island>
 			<div css={bodyGridStyles}>

dotcom-rendering/src/components/FootballMatchInfoWrapper.importable.tsx

@@ -0,0 +1,61 @@
+import { log } from '@guardian/libs';
+import { safeParse } from 'valibot';
+import type { FootballMatchStats } from '../footballMatchStats';
+import { parseMatchStats } from '../footballMatchStats';
+import { feFootballMatchStatsSchema } from '../frontend/feFootballMatchInfoPage';
+import type { Result } from '../lib/result';
+import { error, fromValibot, ok } from '../lib/result';
+import { useApiWithParse } from '../lib/useApi';
+import { FootballMatchInfo } from './FootballMatchInfo';
+import { Placeholder } from './Placeholder';
+
+const Loading = () => <Placeholder heights={new Map([['mobile', 40]])} />;
+
+export const FootballMatchInfoWrapper = ({
+	matchStatsUrl,
+}: {
+	matchStatsUrl: string;
+}) => {
+	const {
+		data,
+		error: apiError,
+		loading,
+	} = useApiWithParse<FootballMatchStats>(matchStatsUrl, parse, {
+		errorRetryCount: 1,
+	});
+
+	if (loading) return <Loading />;
+
+	if (apiError) {
+		// Send the error to Sentry and then prevent the element from rendering
+		window.guardian.modules.sentry.reportError(apiError, 'match-stats');
+
+		log('dotcom', apiError);
+
+		return null;
+	}
+
+	if (data) {
+		return <FootballMatchInfo matchStats={data} />;
+	}
+
+	return null;
+};
+
+const parse: (json: unknown) => Result<string, FootballMatchStats> = (
+	json: unknown,
+) => {
+	const feData = fromValibot(safeParse(feFootballMatchStatsSchema, json));
+
+	if (!feData.ok) {
+		return error('Failed to validate match stats json');
+	}
+
+	const parsedMatchStats = parseMatchStats(feData.value);
+
+	if (!parsedMatchStats.ok) {
+		return error('Failed to parse the match stats from the stats json');
+	}
+
+	return ok(parsedMatchStats.value);
+};

dotcom-rendering/src/frontend/feArticle.ts

@@ -104,6 +104,8 @@ export interface FEArticle {
 	pageType: PageType;
 
 	matchUrl?: string;
+	matchHeaderUrl?: string;
+	matchStatsUrl?: string;
 	matchType?: MatchType;
 	isSpecialReport: boolean;
 

dotcom-rendering/src/frontend/schemas/feArticle.json

@@ -368,6 +368,12 @@
         "matchUrl": {
             "type": "string"
         },
+        "matchHeaderUrl": {
+            "type": "string"
+        },
+        "matchStatsUrl": {
+            "type": "string"
+        },
         "matchType": {
             "$ref": "#/definitions/MatchType"
         },