Merge branch 'main' into jm/new-sign-in-gate

Author: Juarez Mota

dotcom-rendering/package.json

@@ -37,7 +37,7 @@
 		"@guardian/eslint-config-typescript": "9.0.1",
 		"@guardian/identity-auth": "6.0.1",
 		"@guardian/identity-auth-frontend": "8.1.0",
-		"@guardian/libs": "22.5.0",
+		"@guardian/libs": "23.0.0",
 		"@guardian/ophan-tracker-js": "2.2.10",
 		"@guardian/react-crossword": "6.3.0",
 		"@guardian/shimport": "1.0.2",

dotcom-rendering/playwright.config.ts

@@ -11,9 +11,9 @@ export const PORT = isDev ? 3030 : 9000;
  */
 export default defineConfig({
 	testDir: './playwright/tests',
-	// Don't run tests _within_ files in parallel as this causes flakiness locally - investigating
+	// Don't run tests _within_ files in parallel locally as this causes flakiness
 	// Test files still run in parallel as per the number of workers set below
-	fullyParallel: false,
+	fullyParallel: !!process.env.CI,
 	// Fail the build on CI if you accidentally left test.only in the source code
 	forbidOnly: !!process.env.CI,
 	// Retry on CI only

dotcom-rendering/src/components/ArticlePage.tsx

@@ -12,6 +12,7 @@ import { AlreadyVisited } from './AlreadyVisited.importable';
 import { BrazeMessaging } from './BrazeMessaging.importable';
 import { useConfig } from './ConfigContext';
 import { DarkModeMessage } from './DarkModeMessage';
+import { EnhanceAffiliateLinks } from './EnhanceAffiliateLinks.importable';
 import { FocusStyles } from './FocusStyles.importable';
 import { Island } from './Island';
 import { Lightbox } from './Lightbox';
@@ -130,6 +131,11 @@ export const ArticlePage = (props: WebProps | AppProps) => {
 							serverSideTests={frontendData.config.abTests}
 						/>
 					</Island>
+					{!!frontendData.affiliateLinksDisclaimer && (
+						<Island priority="feature" defer={{ until: 'idle' }}>
+							<EnhanceAffiliateLinks />
+						</Island>
+					)}
 				</>
 			)}
 			{renderingTarget === 'Web' ? (

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

@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+import { getSkimlinksAccountId, isSkimlink } from '../lib/affiliateLinksUtils';
+
+/**
+ * Add custom parameters to skimlink URLs:
+ * - referrer
+ * - Skimlinks account ID
+ *
+ * ## Why does this need to be an Island?
+ *
+ * Code needs to be client side to get the referrer and AB test participation
+ *
+ * ---
+ *
+ * (No visual story exists as this does not render anything)
+ */
+export const EnhanceAffiliateLinks = () => {
+	useEffect(() => {
+		const allLinksOnPage = [...document.querySelectorAll('a')];
+
+		for (const link of allLinksOnPage) {
+			if (isSkimlink(link.href)) {
+				const referrerDomain =
+					document.referrer === ''
+						? 'none'
+						: new URL(document.referrer).hostname;
+
+				const skimlinksAccountId = getSkimlinksAccountId(link.href);
+
+				// Skimlinks treats xcust as one long string, so we use | to separate values
+				const xcustValue = `referrer|${referrerDomain}|accountId|${skimlinksAccountId}`;
+
+				link.href = `${link.href}&xcust=${encodeURIComponent(
+					xcustValue,
+				)}`;
+			}
+		}
+	});
+
+	// We don’t render anything
+	return null;
+};

dotcom-rendering/src/components/Island.test.tsx

@@ -14,6 +14,7 @@ import { CommentCount } from './CommentCount.importable';
 import { ConfigProvider } from './ConfigContext';
 import { DiscussionLayout } from './DiscussionLayout';
 import { DiscussionMeta } from './DiscussionMeta.importable';
+import { EnhanceAffiliateLinks } from './EnhanceAffiliateLinks.importable';
 import { EnhancePinnedPost } from './EnhancePinnedPost.importable';
 import { FocusStyles } from './FocusStyles.importable';
 import { FooterReaderRevenueLinks } from './FooterReaderRevenueLinks.importable';
@@ -166,6 +167,16 @@ describe('Island: server-side rendering', () => {
 		).not.toThrow();
 	});
 
+	test('EnhanceAffiliateLinks', () => {
+		expect(() =>
+			renderToString(
+				<WithConfig>
+					<EnhanceAffiliateLinks />
+				</WithConfig>,
+			),
+		).not.toThrow();
+	});
+
 	test('EnhancePinnedPost', () => {
 		expect(() =>
 			renderToString(

dotcom-rendering/src/components/TextBlockComponent.tsx

@@ -11,6 +11,7 @@ import type { ReactNode } from 'react';
 import { Fragment } from 'react';
 import type { IOptions } from 'sanitize-html';
 import sanitise from 'sanitize-html';
+import { isSkimlink } from '../lib/affiliateLinksUtils';
 import {
 	ArticleDesign,
 	ArticleDisplay,
@@ -238,16 +239,6 @@ export const textBlockStyles = (format: ArticleFormat) => css`
 	}
 `;
 
-/** A function to check if a URL represents an affiliate link */
-const isSkimlink = (url?: string): boolean => {
-	try {
-		return !!url && new URL(url).host === 'go.skimresources.com';
-	} catch (err: unknown) {
-		// If not a valid URL, it won't be an affiliate link
-		return false;
-	}
-};
-
 const buildElementTree =
 	(format: ArticleFormat, showDropCaps: boolean) =>
 	(node: Node, key: number): ReactNode => {

dotcom-rendering/src/lib/affiliateLinksUtils.ts

@@ -0,0 +1,20 @@
+/** A function to check if a URL represents an affiliate link */
+export const isSkimlink = (url?: string): boolean => {
+	try {
+		return !!url && new URL(url).host === 'go.skimresources.com';
+	} catch (err: unknown) {
+		// If not a valid URL, it won't be an affiliate link
+		return false;
+	}
+};
+
+/**  A function to fetch the Skimlinks account ID from the URL to then pass it into the xcust*/
+export const getSkimlinksAccountId = (url?: string): string => {
+	try {
+		if (!url) return '';
+		const parsedUrl = new URL(url);
+		return parsedUrl.searchParams.get('id') ?? '';
+	} catch {
+		return '';
+	}
+};