Merge branch 'main' into cc/one-click-embed

apps-rendering/package.json

@@ -86,7 +86,7 @@
 		"eslint-plugin-jsx-a11y": "6.7.1",
 		"eslint-plugin-react": "7.33.2",
 		"express": "4.21.0",
-		"html-webpack-plugin": "5.6.0",
+		"html-webpack-plugin": "5.6.3",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",
 		"jsdom": "16.7.0",
@@ -103,9 +103,9 @@
 		"tslib": "2.6.2",
 		"tsx": "4.6.2",
 		"typescript": "5.5.3",
-		"webpack": "5.94.0",
+		"webpack": "5.97.1",
 		"webpack-cli": "5.1.4",
-		"webpack-dev-server": "5.0.4",
+		"webpack-dev-server": "5.1.0",
 		"webpack-manifest-plugin": "5.0.0",
 		"whatwg-fetch": "3.6.19",
 		"winston": "3.11.0",

dotcom-rendering/.storybook/mocks/bridgetApi.ts

@@ -86,6 +86,10 @@ export const getDiscussionClient: BridgetApi<'getDiscussionClient'> = () => ({
 	recommend: async () => discussionErrorResponse,
 });
 
+export const getInteractionClient: BridgetApi<
+	'getInteractionClient'
+> = () => ({});
+
 export const ensure_all_exports_are_present = {
 	getUserClient,
 	getAcquisitionsClient,
@@ -100,6 +104,7 @@ export const ensure_all_exports_are_present = {
 	getNewslettersClient,
 	getDiscussionClient,
 	getTagClient,
+	getInteractionClient,
 } satisfies {
 	[Method in keyof BridgeModule]: BridgetApi<Method>;
 };

dotcom-rendering/.storybook/mocks/paletteDeclarations.ts

@@ -1,5 +1,5 @@
 import { ArticleFormat } from '../../src/lib/articleFormat';
-import { paletteDeclarations } from '../../src/palette';
+import { paletteDeclarations } from '../../src/paletteDeclarations';
 
 /**
  * For some unknown reason, Storybook rejects all CSS variables if one of them ends in the text "label"

dotcom-rendering/cdk/bin/cdk.ts

@@ -28,8 +28,8 @@ new RenderingCDKStack(cdkApp, 'ArticleRendering-PROD', {
 	stage: 'PROD',
 	domainName: 'article-rendering.guardianapis.com',
 	scaling: {
-		minimumInstances: 36,
-		maximumInstances: 360,
+		minimumInstances: 30,
+		maximumInstances: 300,
 		policies: {
 			step: {
 				cpu: cpuScalingSteps,

dotcom-rendering/fixtures/manual/editionsCrossword.ts

@@ -0,0 +1,67 @@
+import type { FEEditionsCrossword } from '../../src/types/editionsCrossword';
+
+export const quickCrossword: FEEditionsCrossword = {
+	date: '2024-11-01T23:00:00Z',
+	dateSolutionAvailable: '2024-11-01T23:00:00Z',
+	dimensions: {
+		cols: 13,
+		rows: 13,
+	},
+	entries: [
+		{
+			clue: 'A quick crossword clue',
+			direction: 'across',
+			group: ['1-across'],
+			humanNumber: '1',
+			id: '1-across',
+			length: 6,
+			number: 1,
+			position: {
+				x: 0,
+				y: 0,
+			},
+			separatorLocations: {},
+			solution: 'AAAAAA',
+			format: '6',
+		},
+	],
+	hasNumbers: true,
+	name: 'Quick crossword No 1',
+	number: 1,
+	randomCluesOrdering: false,
+	solutionAvailable: true,
+	type: 'quick',
+};
+
+export const crypticCrossword: FEEditionsCrossword = {
+	date: '2024-11-01T23:00:00Z',
+	dateSolutionAvailable: '2024-11-01T23:00:00Z',
+	dimensions: {
+		cols: 15,
+		rows: 15,
+	},
+	entries: [
+		{
+			clue: 'A cryptic crossword clue',
+			direction: 'down',
+			group: ['7-down'],
+			humanNumber: '7',
+			id: '7-down',
+			length: 8,
+			number: 7,
+			position: {
+				x: 12,
+				y: 0,
+			},
+			separatorLocations: {},
+			solution: 'BBBBBBBB',
+			format: '8',
+		},
+	],
+	hasNumbers: true,
+	name: 'Cryptic crossword No 2',
+	number: 2,
+	randomCluesOrdering: false,
+	solutionAvailable: true,
+	type: 'cryptic',
+};

dotcom-rendering/index.d.ts

@@ -14,6 +14,59 @@ declare module 'dynamic-import-polyfill' {
 	}) => void;
 }
 
+declare module '@guardian/react-crossword' {
+	import type { FC } from 'react';
+
+	export type Cell = {
+		number: number;
+		value: string;
+	};
+
+	export type Clue = {
+		id: string;
+		number: number;
+		humanNumber: string;
+		direction: 'across' | 'down';
+		position: { x: number; y: number };
+		separatorLocations: {
+			','?: number[];
+			'-'?: number[];
+		};
+		length: number;
+		clue: string;
+		group: string[];
+		solution?: string;
+		format?: string;
+	};
+
+	export type CrosswordProps = {
+		id: string;
+		data: {
+			id?: string;
+			number: number;
+			name: string;
+			date: string;
+			dimensions: { cols: number; rows: number };
+			entries: Clue[];
+			solutionAvailable: boolean;
+			hasNumbers: boolean;
+			randomCluesOrdering: boolean;
+			instructions?: string;
+			creator?: { name: string; webUrl: string };
+			pdf?: string;
+			annotatedSolution?: string;
+			dateSolutionAvailable: string;
+		};
+		onCorrect?: (cell: Cell) => void;
+		onLoaded?: () => void;
+	};
+
+	const Crossword: FC<CrosswordProps>;
+
+	// eslint-disable-next-line import/no-default-export -- react-crossword uses default exports
+	export default Crossword;
+}
+
 // SVG handling
 declare module '*.svg' {
 	const content: any;
@@ -88,6 +141,10 @@ declare namespace JSX {
 		 * To avoid race conditions, it is best to add this attribute only
 		 * to server-rendered HTML.
 		 *
+		 * Some elements are not trackable, e.g. `div`, `span`.
+		 * Refer to the Ophan documentation for more information.
+		 * https://github.com/guardian/ophan/blob/0f365862682cd97cc50cf381299e0f4875e2996c/tracker-js/src/click-path-capture.js
+		 *
 		 * Add `data-component="component-name"` to the element you want
 		 * to track. Then `add data-link-name="link-name"` to the anchor for which
 		 * clicks will be tracked.

dotcom-rendering/package.json

@@ -38,21 +38,22 @@
 		"@emotion/server": "11.11.0",
 		"@guardian/ab-core": "8.0.0",
 		"@guardian/braze-components": "21.0.0",
-		"@guardian/bridget": "8.0.0",
+		"@guardian/bridget": "8.1.0",
 		"@guardian/browserslist-config": "6.1.0",
 		"@guardian/cdk": "50.13.0",
-		"@guardian/commercial": "23.2.0",
+		"@guardian/commercial": "23.7.4",
 		"@guardian/core-web-vitals": "7.0.0",
 		"@guardian/eslint-config": "7.0.1",
 		"@guardian/eslint-config-typescript": "9.0.1",
 		"@guardian/identity-auth": "2.1.0",
 		"@guardian/identity-auth-frontend": "4.0.0",
 		"@guardian/libs": "19.2.1",
 		"@guardian/ophan-tracker-js": "2.2.5",
+		"@guardian/react-crossword": "2.0.2",
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "8.0.0",
 		"@guardian/source-development-kitchen": "12.0.0",
-		"@guardian/support-dotcom-components": "3.1.0",
+		"@guardian/support-dotcom-components": "3.2.0",
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.45.3",
 		"@sentry/browser": "7.75.1",
@@ -69,7 +70,7 @@
 		"@storybook/test": "8.4.2",
 		"@storybook/theming": "8.4.2",
 		"@svgr/webpack": "8.1.0",
-		"@swc/cli": "0.5.0",
+		"@swc/cli": "0.5.2",
 		"@swc/core": "1.9.2",
 		"@swc/jest": "0.2.37",
 		"@testing-library/dom": "10.4.0",
@@ -190,12 +191,12 @@
 		"unified": "11.0.5",
 		"valibot": "0.28.1",
 		"web-vitals": "4.2.3",
-		"webpack": "5.94.0",
+		"webpack": "5.97.1",
 		"webpack-assets-manifest": "5.2.1",
 		"webpack-bundle-analyzer": "4.10.2",
 		"webpack-cli": "5.1.4",
 		"webpack-dev-middleware": "7.4.2",
-		"webpack-dev-server": "5.0.4",
+		"webpack-dev-server": "5.1.0",
 		"webpack-hot-middleware": "2.26.1",
 		"webpack-hot-server-middleware": "0.6.1",
 		"webpack-manifest-plugin": "5.0.0",

dotcom-rendering/src/client/main.editionsCrossword.tsx

@@ -0,0 +1,24 @@
+/* eslint-disable ssr-friendly/no-dom-globals-in-module-scope */
+// @ts-expect-error: Cannot find module
+import css from '@guardian/react-crossword/lib/index.css';
+import { createRoot } from 'react-dom/client';
+import { Crosswords } from '../components/Crosswords.editions';
+import type { FEEditionsCrossword } from '../types/editionsCrossword';
+
+const style = document.createElement('style');
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- We know this will be a string
+style.innerHTML = css;
+document.body.appendChild(style);
+
+const element = document.getElementById('editions-crossword-player');
+if (!element) {
+	throw new Error('No element found with id "editions-crossword-player"');
+}
+const crosswordsData = element.dataset.crosswords;
+if (!crosswordsData) {
+	throw new Error('No data found for "editions-crossword-player"');
+}
+
+const crosswords = JSON.parse(crosswordsData) as FEEditionsCrossword[];
+const root = createRoot(element);
+root.render(<Crosswords crosswords={crosswords} timeZone={undefined} />);

dotcom-rendering/src/client/userFeatures/user-features.test.ts

@@ -35,18 +35,11 @@ const getAuthStatus = getAuthStatus_ as jest.MockedFunction<
 
 const PERSISTENCE_KEYS = {
 	USER_FEATURES_EXPIRY_COOKIE: 'gu_user_features_expiry',
-	PAYING_MEMBER_COOKIE: 'gu_paying_member',
-	RECURRING_CONTRIBUTOR_COOKIE: 'gu_recurring_contributor',
 	AD_FREE_USER_COOKIE: 'GU_AF1',
 	ACTION_REQUIRED_FOR_COOKIE: 'gu_action_required_for',
 	DIGITAL_SUBSCRIBER_COOKIE: 'gu_digital_subscriber',
 	SUPPORT_ONE_OFF_CONTRIBUTION_COOKIE: 'gu.contributions.contrib-timestamp',
-	ONE_OFF_CONTRIBUTION_DATE_COOKIE: 'gu_one_off_contribution_date',
 	HIDE_SUPPORT_MESSAGING_COOKIE: 'gu_hide_support_messaging',
-	SUPPORT_MONTHLY_CONTRIBUTION_COOKIE:
-		'gu.contributions.recurring.contrib-timestamp.Monthly',
-	SUPPORT_ANNUAL_CONTRIBUTION_COOKIE:
-		'gu.contributions.recurring.contrib-timestamp.Annual',
 };
 
 const setAllFeaturesData = (opts: { isExpired: boolean }) => {
@@ -58,11 +51,6 @@ const setAllFeaturesData = (opts: { isExpired: boolean }) => {
 	const adFreeExpiryDate = opts.isExpired
 		? new Date(currentTime - msInOneDay * 2)
 		: new Date(currentTime + msInOneDay * 2);
-	setCookie({ name: PERSISTENCE_KEYS.PAYING_MEMBER_COOKIE, value: 'true' });
-	setCookie({
-		name: PERSISTENCE_KEYS.RECURRING_CONTRIBUTOR_COOKIE,
-		value: 'true',
-	});
 	setCookie({
 		name: PERSISTENCE_KEYS.DIGITAL_SUBSCRIBER_COOKIE,
 		value: 'true',
@@ -86,8 +74,6 @@ const setAllFeaturesData = (opts: { isExpired: boolean }) => {
 };
 
 const deleteAllFeaturesData = () => {
-	removeCookie({ name: PERSISTENCE_KEYS.PAYING_MEMBER_COOKIE });
-	removeCookie({ name: PERSISTENCE_KEYS.RECURRING_CONTRIBUTOR_COOKIE });
 	removeCookie({ name: PERSISTENCE_KEYS.DIGITAL_SUBSCRIBER_COOKIE });
 	removeCookie({ name: PERSISTENCE_KEYS.USER_FEATURES_EXPIRY_COOKIE });
 	removeCookie({ name: PERSISTENCE_KEYS.AD_FREE_USER_COOKIE });
@@ -125,14 +111,6 @@ describe('Refreshing the features data', () => {
 		it('Does not delete the data just because it has expired', async () => {
 			setAllFeaturesData({ isExpired: true });
 			await refresh();
-			expect(
-				getCookie({ name: PERSISTENCE_KEYS.PAYING_MEMBER_COOKIE }),
-			).toBe('true');
-			expect(
-				getCookie({
-					name: PERSISTENCE_KEYS.RECURRING_CONTRIBUTOR_COOKIE,
-				}),
-			).toBe('true');
 			expect(
 				getCookie({
 					name: PERSISTENCE_KEYS.USER_FEATURES_EXPIRY_COOKIE,
@@ -148,15 +126,6 @@ describe('Refreshing the features data', () => {
 			await refresh();
 			expect(fetchJsonSpy).not.toHaveBeenCalled();
 		});
-
-		it('Performs an update if membership-frontend wipes just the paying-member cookie', async () => {
-			// Set everything except paying-member cookie
-			setAllFeaturesData({ isExpired: true });
-			removeCookie({ name: PERSISTENCE_KEYS.PAYING_MEMBER_COOKIE });
-
-			await refresh();
-			expect(fetchJsonSpy).toHaveBeenCalledTimes(1);
-		});
 	});
 });
 describe('If user signed out', () => {
@@ -178,14 +147,6 @@ describe('If user signed out', () => {
 		expect(
 			getCookie({ name: PERSISTENCE_KEYS.AD_FREE_USER_COOKIE }),
 		).toBeNull();
-		expect(
-			getCookie({ name: PERSISTENCE_KEYS.PAYING_MEMBER_COOKIE }),
-		).toBeNull();
-		expect(
-			getCookie({
-				name: PERSISTENCE_KEYS.RECURRING_CONTRIBUTOR_COOKIE,
-			}),
-		).toBeNull();
 		expect(
 			getCookie({ name: PERSISTENCE_KEYS.DIGITAL_SUBSCRIBER_COOKIE }),
 		).toBeNull();
@@ -270,14 +231,6 @@ describe('Storing new feature data', () => {
 			}),
 		);
 		return refresh().then(() => {
-			expect(
-				getCookie({ name: PERSISTENCE_KEYS.PAYING_MEMBER_COOKIE }),
-			).toBe('false');
-			expect(
-				getCookie({
-					name: PERSISTENCE_KEYS.RECURRING_CONTRIBUTOR_COOKIE,
-				}),
-			).toBe('false');
 			expect(
 				getCookie({ name: PERSISTENCE_KEYS.DIGITAL_SUBSCRIBER_COOKIE }),
 			).toBe('false');
@@ -300,14 +253,6 @@ describe('Storing new feature data', () => {
 			}),
 		);
 		return refresh().then(() => {
-			expect(
-				getCookie({ name: PERSISTENCE_KEYS.PAYING_MEMBER_COOKIE }),
-			).toBe('true');
-			expect(
-				getCookie({
-					name: PERSISTENCE_KEYS.RECURRING_CONTRIBUTOR_COOKIE,
-				}),
-			).toBe('true');
 			expect(
 				getCookie({ name: PERSISTENCE_KEYS.DIGITAL_SUBSCRIBER_COOKIE }),
 			).toBe('true');