Add match header URL (#15364)

This URL is what we will request to retrieve data for the match header
client-side. Frontend is already sending it, so this change adds it to
DCAR's schemas and models. It also adds a new schema for the JSON data
returned by this endpoint, ready to be used by the header.

Co-authored-by: James M <1166188+jamesmockett@users.noreply.github.com>
Co-authored-by: Marjan K <15894063+marjisound@users.noreply.github.com>

Author: 3 people

dotcom-rendering/src/frontend/feFootballMatchHeader.ts

@@ -0,0 +1,12 @@
+import { object, optional, type Output, string } from 'valibot';
+import { feFootballMatchSchema } from './feFootballMatchListPage';
+
+export const feFootballMatchHeaderSchema = object({
+	footballMatch: feFootballMatchSchema,
+	competitionName: string(),
+	liveURL: optional(string()),
+	reportURL: optional(string()),
+	infoURL: string(),
+});
+
+export type FEFootballMatchHeader = Output<typeof feFootballMatchHeaderSchema>;

dotcom-rendering/src/frontend/feFootballMatchInfoPage.ts

@@ -45,11 +45,12 @@ export type FEFootballMatchStats = {
 export type FEFootballMatchInfoPage = FEFootballDataPage & {
 	// This field name will need to get changed to matchStats in the future PRs.
 	// Since this change needs to happen in both frontend and DCAR, and it also
-	// needs to be backward compatible for a temprary duration, we will handle
+	// needs to be backward compatible for a temporary duration, we will handle
 	// that in a separate PR.
 	footballMatch: FEFootballMatchStats;
 	matchInfo: FEFootballMatch;
 	group?: FEGroupSummary;
 	competitionName: string;
 	matchUrl: string;
+	matchHeaderUrl: string;
 };

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

@@ -495,11 +495,15 @@
                 },
                 "matchUrl": {
                     "type": "string"
+                },
+                "matchHeaderUrl": {
+                    "type": "string"
                 }
             },
             "required": [
                 "competitionName",
                 "footballMatch",
+                "matchHeaderUrl",
                 "matchInfo",
                 "matchUrl"
             ]

dotcom-rendering/src/lib/parse.ts

@@ -46,3 +46,13 @@ export const oneOf =
 
 		return f(parsers, []);
 	};
+
+export class URLParseError {}
+
+export const safeParseURL = (s: string): Result<URLParseError, URL> => {
+	try {
+		return ok(new URL(s));
+	} catch {
+		return error(new URLParseError());
+	}
+};

dotcom-rendering/src/server/handler.sportDataPage.web.ts

@@ -17,6 +17,7 @@ import type { FEFootballMatchInfoPage } from '../frontend/feFootballMatchInfoPag
 import type { FEFootballMatchListPage } from '../frontend/feFootballMatchListPage';
 import type { FEFootballTablesPage } from '../frontend/feFootballTablesPage';
 import { Pillar } from '../lib/articleFormat';
+import { safeParseURL } from '../lib/parse';
 import { extractNAV } from '../model/extract-nav';
 import {
 	validateAsCricketMatchPageType,
@@ -247,13 +248,21 @@ const parseFEFootballMatch = (
 		);
 	}
 
+	const headerUrl = safeParseURL(data.matchHeaderUrl);
+	if (!headerUrl.ok) {
+		throw new Error(
+			`Failed to parse match header URL: ${data.matchHeaderUrl}`,
+		);
+	}
+
 	return {
 		match: parsedFootballMatch.value,
 		matchStats: parsedFootballMatchStats.value,
 		matchInfo: matchInfo.value,
 		competitionName: data.competitionName,
 		group: group?.value,
 		matchUrl: data.matchUrl,
+		matchHeaderUrl: headerUrl.value,
 		kind: 'FootballMatchSummary',
 		nav: {
 			...extractNAV(data.nav),

dotcom-rendering/src/sportDataPage.ts

@@ -58,6 +58,7 @@ export type FootballMatchInfoPage = SportPageConfig & {
 	group?: FootballTableSummary;
 	competitionName: string;
 	matchUrl: string;
+	matchHeaderUrl: URL;
 	kind: 'FootballMatchSummary';
 };