Add AB test for L2A button in Apps Article (#14343)

* WIP set up l2a ab test

* Add bridget mock for nativeAbTestingClient

* Update bridget

* Set up l2a_article_button_test for ListenToArticle

* Tidy up

Author: vlbee

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

@@ -102,6 +102,14 @@ export const getListenToArticleClient: BridgetApi<
 	isAvailable: async () => true,
 	isPlaying: async () => false,
 });
+
+export const getNativeABTestingClient: BridgetApi<
+	'getNativeABTestingClient'
+> = () => ({
+	getParticipations: async () =>
+		new Map(Object.entries({ 'test-id': 'variant' })),
+});
+
 export const ensure_all_exports_are_present = {
 	getUserClient,
 	getAcquisitionsClient,
@@ -119,6 +127,7 @@ export const ensure_all_exports_are_present = {
 	getInteractionClient,
 	getInteractivesClient,
 	getListenToArticleClient,
+	getNativeABTestingClient,
 } satisfies {
 	[Method in keyof BridgeModule]: BridgetApi<Method>;
 };

dotcom-rendering/package.json

@@ -28,7 +28,7 @@
 		"@emotion/server": "11.11.0",
 		"@guardian/ab-core": "8.0.0",
 		"@guardian/braze-components": "22.2.0",
-		"@guardian/bridget": "8.6.0",
+		"@guardian/bridget": "8.7.0",
 		"@guardian/browserslist-config": "6.1.0",
 		"@guardian/cdk": "61.4.0",
 		"@guardian/commercial-core": "27.1.0",

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

@@ -1,6 +1,9 @@
 import { log } from '@guardian/libs';
 import { useEffect, useState } from 'react';
-import { getListenToArticleClient } from '../lib/bridgetApi';
+import {
+	getListenToArticleClient,
+	getNativeABTestingClient,
+} from '../lib/bridgetApi';
 import { useIsBridgetCompatible } from '../lib/useIsBridgetCompatible';
 import { ListenToArticleButton } from './ListenToArticleButton';
 
@@ -30,23 +33,43 @@ export const ListenToArticle = ({ articleId }: Props) => {
 		number | undefined
 	>(undefined);
 
-	const isBridgetCompatible = useIsBridgetCompatible('8.6.0');
+	const isBridgetCompatible = useIsBridgetCompatible('8.7.0');
 	useEffect(() => {
 		if (isBridgetCompatible) {
 			Promise.all([
+				// AB TESTING native
+				getNativeABTestingClient().getParticipations(),
 				getListenToArticleClient().isAvailable(articleId),
 				getListenToArticleClient().isPlaying(articleId),
 				getListenToArticleClient().getAudioDurationSeconds(articleId),
 			])
-				.then(([isAvailable, isPlaying, durationSeconds]) => {
-					setAudioDurationSeconds(
-						typeof durationSeconds === 'number' &&
-							durationSeconds > 0
-							? durationSeconds
-							: undefined,
-					);
-					setShowButton(isAvailable && !isPlaying);
-				})
+				.then(
+					([
+						abParticipations,
+						isAvailable,
+						isPlaying,
+						durationSeconds,
+					]) => {
+						// AB TESTING native start
+						const variant = abParticipations.get(
+							'l2a_article_button_test',
+						);
+						if (variant === 'no-button') {
+							setShowButton(false);
+						} else if (variant === 'with-duration') {
+							setAudioDurationSeconds(
+								typeof durationSeconds === 'number' &&
+									durationSeconds > 0
+									? durationSeconds
+									: undefined,
+							);
+							setShowButton(isAvailable && !isPlaying);
+						} else if (variant === 'without-duration') {
+							setShowButton(isAvailable && !isPlaying);
+						}
+						// AB TESTING native ends
+					},
+				)
 				.catch((error) => {
 					console.error(
 						'Error fetching article audio status: ',

dotcom-rendering/src/lib/bridgetApi.ts

@@ -1,3 +1,4 @@
+import * as AbTesting from '@guardian/bridget/AbTesting';
 import * as Acquisitions from '@guardian/bridget/Acquisitions';
 import * as Analytics from '@guardian/bridget/Analytics';
 import * as Commercial from '@guardian/bridget/Commercial';
@@ -204,3 +205,15 @@ export const getListenToArticleClient = (): ListenToArticle.Client<void> => {
 	}
 	return listenToArticleClient;
 };
+
+let nativeAbTestingClient: AbTesting.Client<void> | undefined = undefined;
+export const getNativeABTestingClient = (): AbTesting.Client<void> => {
+	if (!nativeAbTestingClient) {
+		nativeAbTestingClient = createAppClient<AbTesting.Client<void>>(
+			AbTesting.Client,
+			'buffered',
+			'compact',
+		);
+	}
+	return nativeAbTestingClient;
+};