Dev route for DCR email-newsletters page

dotcom-rendering/src/model/pageModel.ts

@@ -0,0 +1,33 @@
+import type { NavType } from 'src/model/extract-nav';
+import type { Newsletter } from 'src/types/content';
+import type { TagType } from 'src/types/tag';
+import type { EditionId } from 'src/web/lib/edition';
+import type { ConfigType } from '../types/config';
+import type { FooterType } from '../types/footer';
+
+export type BasePageModel = {
+	webTitle: string;
+	description?: string;
+	canonicalUrl?: string;
+	sectionName?: string;
+	format?: CAPIFormat;
+	editionId: EditionId;
+	tags?: TagType[];
+	renderAds?: boolean;
+	subscribeUrl: string;
+	contributionsServiceUrl: string;
+	beaconURL: string;
+	twitterData?: {
+		[key: string]: string;
+	};
+	openGraphData?: {
+		[key: string]: string;
+	};
+	config: ConfigType;
+	nav: NavType;
+	footer: FooterType;
+};
+
+export type NewslettersPageModel = BasePageModel & {
+	newsletters: Newsletter[];
+};

dotcom-rendering/src/server/dev-middleware/defaultData.ts

@@ -0,0 +1,192 @@
+import { ArticlePillar } from '@guardian/libs';
+import type { NavType } from 'src/model/extract-nav';
+import type { ConfigType } from 'src/types/config';
+import type { FooterType } from 'src/types/footer';
+
+export const STATIC_FOOTER: FooterType = { footerLinks: [[]] };
+
+export const STATIC_NAV: NavType = {
+	otherLinks: {
+		url: '/uk',
+		title: 'nav link',
+		longTitle: 'this is a nav link',
+		children: [],
+		mobileOnly: false,
+		more: true,
+	},
+	brandExtensions: [],
+	currentNavLink: '/',
+	subNavSections: {
+		links: [
+			{
+				url: '/world',
+				title: 'World',
+				longTitle: 'World news',
+				children: [],
+				mobileOnly: false,
+				more: false,
+			},
+			{
+				url: '/email-newsletters',
+				title: 'Newsletters',
+				longTitle: 'Newsletters',
+				children: [],
+				mobileOnly: false,
+				more: false,
+			},
+		],
+	},
+	readerRevenueLinks: {
+		header: {
+			contribute: 'contribute',
+			subscribe: 'contribute',
+			support: 'contribute',
+			supporter: 'contribute',
+		},
+		footer: {
+			contribute: 'contribute',
+			subscribe: 'contribute',
+			support: 'contribute',
+			supporter: 'contribute',
+		},
+		sideMenu: {
+			contribute: 'contribute',
+			subscribe: 'contribute',
+			support: 'contribute',
+			supporter: 'contribute',
+		},
+		ampHeader: {
+			contribute: 'contribute',
+			subscribe: 'contribute',
+			support: 'contribute',
+			supporter: 'contribute',
+		},
+		ampFooter: {
+			contribute: 'contribute',
+			subscribe: 'contribute',
+			support: 'contribute',
+			supporter: 'contribute',
+		},
+	},
+	pillars: [
+		{
+			url: '/',
+			title: 'News',
+			longTitle: 'News',
+			pillar: ArticlePillar.News,
+			children: [
+				{
+					title: 'World',
+					url: '/world',
+					longTitle: 'World news',
+					more: true,
+					children: [
+						{
+							title: 'Europe',
+							longTitle: 'Europe',
+							url: '/world/europe-news',
+							children: [],
+						},
+						{
+							title: 'US',
+							url: '/us-news',
+							longTitle: 'US news',
+							children: [],
+						},
+						{
+							title: 'Americas',
+							longTitle: 'Americas',
+							url: '/world/americas',
+							children: [],
+						},
+						{
+							title: 'Asia',
+							longTitle: 'Asia',
+							url: '/world/asia',
+							children: [],
+						},
+						{
+							title: 'Australia',
+							url: '/australia-news',
+							longTitle: 'Australia news',
+							children: [],
+						},
+						{
+							title: 'Middle East',
+							longTitle: 'Middle East',
+							url: '/world/middleeast',
+							children: [],
+						},
+						{
+							title: 'Africa',
+							longTitle: 'Africa',
+							url: '/world/africa',
+							children: [],
+						},
+						{
+							title: 'Inequality',
+							longTitle: 'Inequality',
+							url: '/inequality',
+							children: [],
+						},
+						{
+							title: 'Global development',
+							longTitle: 'Global development',
+							url: '/global-development',
+							children: [],
+						},
+					],
+				},
+			],
+		},
+		{
+			url: '/commentisfree',
+			title: 'Opinion',
+			longTitle: 'Opinion',
+			pillar: ArticlePillar.Opinion,
+		},
+		{
+			url: '/uk/sport',
+			title: 'Sport',
+			longTitle: 'Sport',
+			pillar: ArticlePillar.Sport,
+		},
+	],
+};
+
+export const STATIC_CONFIG: ConfigType = {
+	isPaidContent: false,
+	pageId: 'unknown-page',
+	contentType: 'static',
+	ampIframeUrl:
+		'https://assets.guim.co.uk/data/vendor/b242a49b1588bb36bdaacefe001ca77a/amp-iframe.html',
+	ajaxUrl: 'https://api.nextgen.guardianapps.co.uk',
+	shortUrlId: '/p/d8ex5',
+	switches: {},
+	keywordIds: '',
+	sharedAdTargeting: {},
+	dcrSentryDsn: 'https://[email protected]/1377847',
+	discussionApiUrl: 'https://discussion.theguardian.com/discussion-api',
+	sentryPublicApiKey: '344003a8d11c41d8800fbad8383fdc50',
+	commercialBundleUrl:
+		'https://assets.guim.co.uk/javascripts/bc58c17d75809551440f/graun.commercial.dcr.js',
+	discussionApiClientHeader: 'nextgen',
+	shouldHideReaderRevenue: false,
+	sentryHost: 'app.getsentry.com/35463',
+	idApiUrl: 'https://idapi.theguardian.com',
+	showRelatedContent: true,
+	adUnit: '/59666047/theguardian.com/environment/article/ng',
+	stage: 'DEV',
+	isSensitive: false,
+	revisionNumber: 'DEV',
+	section: 'environment',
+	brazeApiKey: '7f28c639-8bda-48ff-a3f6-24345abfc07c',
+	dfpAccountId: '59666047',
+	googletagUrl: '//securepubads.g.doubleclick.net/tag/js/gpt.js',
+	abTests: {},
+	edition: 'UK',
+	frontendAssetsFullURL: 'https://assets.guim.co.uk/',
+	webPublicationDate: Date.now(),
+	discussionD2Uid: 'zHoBy6HNKsk',
+	mmaUrl: 'https://manage.theguardian.com',
+};

dotcom-rendering/src/server/dev-middleware/provideStaticNewslettersModel.ts

@@ -0,0 +1,78 @@
+import type { RequestHandler } from 'express';
+import type { Newsletter } from '../../../src/types/content';
+import type { NewslettersPageModel } from '../../model/pageModel';
+import { STATIC_CONFIG, STATIC_FOOTER, STATIC_NAV } from './defaultData';
+
+const TEST_NEWSLETTERS: Newsletter[] = [
+	{
+		identityName: 'morning-mail',
+		name: "Guardian Australia's Morning Mail",
+		theme: 'news',
+		description:
+			'Our Australian morning briefing email breaks down the key national and international stories of the day and why they matter',
+		frequency: 'Every weekday',
+		listId: 4148,
+		group: 'News in depth',
+		successDescription:
+			"We'll send you Guardian Australia's Morning Mail every weekday",
+		regionFocus: 'AU',
+	},
+	{
+		identityName: 'moving-the-goalposts',
+		name: 'Moving the Goalposts',
+		theme: 'sport',
+		description:
+			'Informative, passionate, entertaining. Sign up to our weekly round-up of women’s football now.',
+		frequency: 'Weekly',
+		listId: 6020,
+		group: 'Sport',
+		successDescription: "We'll send you Moving the Goalposts every week",
+	},
+	{
+		listId: 123,
+		identityName: 'patriarchy',
+		description:
+			'Reviewing the most important stories on feminism and sexism and those fighting for equality',
+		name: 'The Week in Patriarchy',
+		frequency: 'Weekly',
+		successDescription: 'You have signed up, but the newsletter is fake',
+		theme: 'opinion',
+		group: 'Opinion',
+	},
+	{
+		listId: 124,
+		identityName: 'according-to',
+		description: 'A newsletter made up for testing the component',
+		name: 'According to us',
+		frequency: 'Montly',
+		successDescription: 'You have signed up, but the newsletter is fake',
+		theme: 'opinion',
+		group: 'Opinion',
+	},
+];
+
+const STATIC_NEWSLETTERS_MODEL: NewslettersPageModel = {
+	newsletters: TEST_NEWSLETTERS,
+	footer: STATIC_FOOTER,
+	nav: STATIC_NAV,
+	config: {
+		...STATIC_CONFIG,
+		pageId: 'static-email-newsletters',
+	},
+	editionId: 'UK',
+	webTitle: 'Guardian newsletters: sign up',
+	description:
+		"Scroll less and understand more about the subjects you care about with the Guardian's brilliant email newsletters, free to your inbox.",
+	beaconURL: '//phar.gu-web.net',
+	subscribeUrl: '/',
+	contributionsServiceUrl: 'https://contributions.guardianapis.com',
+};
+
+export const provideStaticDataMiddleware: RequestHandler = (
+	{ body },
+	res,
+	next,
+): void => {
+	(body as Record<string, unknown>).model = STATIC_NEWSLETTERS_MODEL;
+	next();
+};

dotcom-rendering/src/server/dev-server.ts

@@ -8,7 +8,9 @@ import {
 	handleFrontJson,
 	handleInteractive,
 	handleKeyEvents,
+	handleNewslettersPage,
 } from '../web/server';
+import { provideStaticDataMiddleware } from './dev-middleware/provideStaticNewslettersModel';
 
 /** article URLs contain a part that looks like “2022/nov/25” */
 const ARTICLE_URL = /\/\d{4}\/[a-z]{3}\/\d{2}\//;
@@ -38,6 +40,10 @@ export const devServer = (): Handler => {
 				return handleFront(req, res, next);
 			case '/FrontJSON':
 				return handleFrontJson(req, res, next);
+			case '/email-newsletters':
+				return provideStaticDataMiddleware(req, res, () => {
+					handleNewslettersPage(req, res, next);
+				});
 			default: {
 				if (req.url.match(ARTICLE_URL)) {
 					const url = new URL(