Merge branch 'main' into jm/feat-mparticle-headers

Author: juabara

ab-testing/config/abTests.ts

@@ -20,6 +20,17 @@ import type { ABTest } from "./types.ts";
  */
 
 const ABTests: ABTest[] = [
+	{
+		name: "webx-dark-mode-web",
+		description: "Dark mode accessibility feature test on web",
+		owners: ["dotcom.platform@theguardian.com"],
+		status: "ON",
+		expirationDate: "2027-04-09",
+		type: "server",
+		audienceSize: 0 / 100,
+		groups: ["enable"],
+		shouldForceMetricsCollection: false,
+	},
 	{
 		name: "commercial-prebid-v10",
 		description: "Testing Prebid.js v10 integration on DCR",

ab-testing/config/types.ts

@@ -6,7 +6,9 @@ type AllSpace = Map<string, FastlyTestParams[]>;
 
 type Team =
 	| "commercial"
+	// WebX in the canonical name for the team, when the last test using webex expires we should remove webex from this union type
 	| "webex"
+	| "webx"
 	| "thefilter"
 	| "fronts-and-curation"
 	| "growth";

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { isUndefined, removeCookie, setCookie, storage } from '@guardian/libs';
+import { isUndefined, storage } from '@guardian/libs';
 import { article17, palette } from '@guardian/source/foundations';
 import { type SetStateAction, useEffect, useState } from 'react';
 import { useConfig } from './ConfigContext';
@@ -19,10 +19,6 @@ const bold = css`
 	font-weight: bold;
 `;
 
-// This is hard coded, and must be changed if the experiment bucket changes
-// https://github.com/guardian/frontend/blob/09f49b80/common/app/experiments/Experiments.scala#L57
-const darkModeCookieName = 'X-GU-Experiment-0perc-D';
-
 const PreferenceToggle = ({
 	label,
 	checked,
@@ -90,30 +86,6 @@ export const Accessibility = () => {
 		true,
 	);
 
-	const [shouldParticipate, setParticipate] =
-		useState<boolean>(darkModeAvailable);
-
-	useEffect(() => {
-		if (shouldParticipate) {
-			setCookie({
-				name: darkModeCookieName,
-				value: 'true',
-			});
-		} else {
-			removeCookie({ name: darkModeCookieName });
-		}
-
-		const timeout = setTimeout(() => {
-			// we must reload the page for the preference to take effect,
-			// as this relies on a server-side test & cookie combination
-			if (shouldParticipate !== darkModeAvailable) {
-				window.location.reload();
-			}
-		}, 1200);
-
-		return () => clearTimeout(timeout);
-	}, [shouldParticipate, darkModeAvailable]);
-
 	const togglePreference = (
 		preferenceCallback: (value: SetStateAction<boolean>) => void,
 	): void => {
@@ -154,29 +126,36 @@ export const Accessibility = () => {
 
 				<br />
 
-				<fieldset css={formStyle}>
+				<div css={formStyle}>
 					<p>
 						We offer beta support for a dark colour scheme on the
 						web. The colour scheme preference will follow your
 						system settings.
 					</p>
-					<label>
-						<input
-							type="checkbox"
-							checked={shouldParticipate}
-							onChange={(e) => {
-								setParticipate(e.target.checked);
-							}}
-							data-link-name="prefers-colour-scheme"
-						/>
-						<span css={bold}>
-							Participate in the dark colour scheme beta{' '}
-						</span>
-						{shouldParticipate
-							? ' Untick this to opt out (browser will refresh)'
-							: ' Tick this to opt in (browser will refresh)'}
-					</label>
-				</fieldset>
+					{darkModeAvailable ? (
+						<>
+							<p css={bold}>
+								You are currently participating in the dark
+								colour scheme beta.
+							</p>
+							<a href="/ab-tests/opt-out/webx-dark-mode-web:enable">
+								Click here to opt out (this will redirect you to
+								the homepage)
+							</a>
+						</>
+					) : (
+						<>
+							<p css={bold}>
+								You are not currently participating in the dark
+								colour scheme beta.
+							</p>
+							<a href="/ab-tests/opt-in/webx-dark-mode-web:enable">
+								Click here to opt in (this will redirect you to
+								the homepage)
+							</a>
+						</>
+					)}
+				</div>
 			</form>
 		</FrontSection>
 	);

dotcom-rendering/src/components/ArticlePage.tsx

@@ -179,7 +179,7 @@ export const ArticlePage = (props: WebProps | AppProps) => {
 					You can{' '}
 					<a
 						style={{ color: 'inherit' }}
-						href="/opt/out/dark-mode-web"
+						href="/ab-tests/opt-out/webx-dark-mode-web"
 					>
 						opt out anytime
 					</a>{' '}

dotcom-rendering/src/components/FrontPage.tsx

@@ -112,7 +112,7 @@ export const FrontPage = ({ front, NAV }: Props) => {
 					You can{' '}
 					<a
 						style={{ color: 'inherit' }}
-						href="/opt/out/dark-mode-web"
+						href="/ab-tests/opt-out/webx-dark-mode-web"
 					>
 						opt out anytime
 					</a>{' '}

dotcom-rendering/src/components/SportDataPageComponent.tsx

@@ -85,7 +85,7 @@ export const SportDataPageComponent = ({ sportData }: Props) => {
 					You can{' '}
 					<a
 						style={{ color: 'inherit' }}
-						href="/opt/out/dark-mode-web"
+						href="/ab-tests/opt-out/webx-dark-mode-web"
 					>
 						opt out anytime
 					</a>{' '}

dotcom-rendering/src/components/TagPage.tsx

@@ -102,7 +102,7 @@ export const TagPage = ({ tagPage, NAV }: Props) => {
 					You can{' '}
 					<a
 						style={{ color: 'inherit' }}
-						href="/opt/out/dark-mode-web"
+						href="/ab-tests/opt-out/webx-dark-mode-web"
 					>
 						opt out anytime
 					</a>{' '}

dotcom-rendering/src/server/render.allEditorialNewslettersPage.web.tsx

@@ -24,10 +24,14 @@ export const renderEditorialNewslettersPage = ({
 	const title = newslettersPage.webTitle;
 	const NAV = extractNAV(newslettersPage.nav);
 
+	const darkModeAvailable =
+		newslettersPage.config.serverSideABTests?.['webx-dark-mode-web'] ===
+		'enable';
+
 	// The newsletters page is currently only supported on Web
 	const config = {
 		renderingTarget: 'Web',
-		darkModeAvailable: false,
+		darkModeAvailable,
 		assetOrigin: ASSET_ORIGIN,
 		editionId: newslettersPage.editionId,
 	} satisfies Config;

dotcom-rendering/src/server/render.article.web.tsx

@@ -50,11 +50,14 @@ export const renderHtml = ({
 	const title = decideTitle(article);
 	const linkedData = frontendData.linkedData;
 
+	const darkModeAvailable =
+		frontendData.config.serverSideABTests?.['webx-dark-mode-web'] ===
+		'enable';
+
 	const renderingTarget = 'Web';
 	const config: Config = {
 		renderingTarget,
-		darkModeAvailable:
-			frontendData.config.abTests.darkModeWebVariant === 'variant',
+		darkModeAvailable,
 		assetOrigin: ASSET_ORIGIN,
 		editionId: frontendData.editionId,
 	};
@@ -232,16 +235,20 @@ export const renderBlocks = ({
 	switches,
 	keywordIds,
 	abTests = {},
+	serverSideABTests,
 	edition,
 	shouldHideAds,
 }: FEBlocksRequest): string => {
 	const format: ArticleFormat = decideFormat(FEFormat);
 
 	const editionId = isEditionId(edition) ? edition : 'UK';
 
+	const darkModeAvailable =
+		serverSideABTests?.['webx-dark-mode-web'] === 'enable';
+
 	const config: Config = {
 		renderingTarget: 'Web',
-		darkModeAvailable: abTests.darkModeWebVariant === 'variant',
+		darkModeAvailable,
 		assetOrigin: ASSET_ORIGIN,
 		editionId,
 	};

dotcom-rendering/src/server/render.front.web.tsx

@@ -83,11 +83,13 @@ export const renderFront = ({
 	const NAV = extractNAV(front.nav);
 	const enhancedNAV = enhanceNav(NAV);
 
+	const darkModeAvailable =
+		front.config.serverSideABTests?.['webx-dark-mode-web'] === 'enable';
+
 	// Fronts are not supported in Apps
 	const config = {
 		renderingTarget: 'Web',
-		darkModeAvailable:
-			front.config.abTests.darkModeWebVariant === 'variant',
+		darkModeAvailable,
 		assetOrigin: ASSET_ORIGIN,
 		editionId: front.editionId,
 	} satisfies Config;
@@ -182,11 +184,13 @@ export const renderTagPage = ({
 	const NAV = extractNAV(tagPage.nav);
 	const enhancedNAV = enhanceNav(NAV);
 
+	const darkModeAvailable =
+		tagPage.config.serverSideABTests?.['webx-dark-mode-web'] === 'enable';
+
 	// Fronts are not supported in Apps
 	const config: Config = {
 		renderingTarget: 'Web',
-		darkModeAvailable:
-			tagPage.config.abTests.darkModeWebVariant === 'variant',
+		darkModeAvailable,
 		assetOrigin: ASSET_ORIGIN,
 		editionId: tagPage.editionId,
 	};