Feast Contextual Nudge Braze Banners (#16254)

* Add Braze banner integration to Feast contextual nudge component

* Add nudgeIndex and idApiUrl to FeastContextualNudge story args

* Add GetContext message type and context parameter to Braze Banners System

* Add context prop to FeastContextualNudge component

* Remove unused text color variables from FeastContextualNudge component

* Refactor FeastContextualNudge component to replace subtext variables with text variables

* Wrap BrazeBannersSystemDisplay in a div with aria-description for accessibility and a margin

* Add placement management for Braze Banners System and update refresh logic

* Enhance logging for Braze banners updates to provide clearer information

* Add stale placement handling for Braze banners to improve fallback logic

* Refactor Braze Banners System to implement per-placement stale suppression configuration

* Refactor getAdjustToken function for cleaner token retrieval in FeastContextualNudge

* Add nudgeMinHeightStyles to prevent content shift during Braze banner loading

* Build Feast deep-link URL using the correct Adjust token in FeastContextualNudge

* Temporarily force nudge rendering for testing purposes in FeastContextualNudge

* Revert "Build Feast deep-link URL using the correct Adjust token in FeastContextualNudge"

This reverts commit e279321.

* Add support for requesting all known Braze placements in refreshBanners function

* Log CLICK events with Ophan for app download and Braze Banner navigation

* Remove Feast contextual nudge AB test and related mocks from components and stories

* fix: ensure newline at end of file in abTests.ts

Author: andresilva-guardian

ab-testing/config/abTests.ts

@@ -144,19 +144,6 @@ const ABTests: ABTest[] = [
 		groups: ["control", "variant"],
 		shouldForceMetricsCollection: false,
 	},
-	{
-		name: "feast-recipe-nudge-v2",
-		description:
-			"Measures the impact of showing the Feast contextual nudge on recipe article pages",
-		owners: ["feast@theguardian.com"],
-		status: "ON",
-		expirationDate: "2027-01-01",
-		type: "client",
-		audienceSize: 1,
-		audienceSpace: "B",
-		groups: ["control", "variant-1"],
-		shouldForceMetricsCollection: false,
-	},
 	{
 		name: "webx-monitor-group-contamination",
 		description:

dotcom-rendering/src/components/FeastContextualNudge.island.tsx

@@ -7,7 +7,13 @@ import {
 } from '@guardian/source/foundations';
 import { LinkButton } from '@guardian/source/react-components';
 import { useEffect, useState } from 'react';
-import { useAB } from '../lib/useAB';
+import { submitComponentEvent } from '../client/ophan/ophan';
+import {
+	BrazeBannersSystemDisplay,
+	BrazeBannersSystemPlacementId,
+	isPlacementStale,
+} from '../lib/braze/BrazeBannersSystem';
+import { useBraze } from '../lib/useBraze';
 import type { StageType } from '../types/config';
 import type { RecipeBlockElement } from '../types/content';
 import { useConfig } from './ConfigContext';
@@ -16,10 +22,8 @@ import { useConfig } from './ConfigContext';
 
 const FEAST_BG = '#F3F3E9';
 const FEAST_BG_DARK = '#2B2B26';
-const FEAST_TEXT = sourcePalette.neutral[10];
-const FEAST_TEXT_DARK = sourcePalette.neutral[100];
-const FEAST_SUBTEXT = sourcePalette.neutral[20];
-const FEAST_SUBTEXT_DARK = sourcePalette.neutral[93];
+const FEAST_TEXT = sourcePalette.neutral[20];
+const FEAST_TEXT_DARK = sourcePalette.neutral[93];
 const FEAST_GREEN = '#68773C';
 const FEAST_GREEN_HOVER = '#4d5c2b';
 const FEAST_BORDER = FEAST_GREEN;
@@ -29,15 +33,13 @@ const FEAST_BORDER_DARK = FEAST_GREEN;
 
 const lightVars = css`
 	--feast-nudge-bg: ${FEAST_BG};
-	--feast-nudge-heading: ${FEAST_TEXT};
-	--feast-nudge-subtext: ${FEAST_SUBTEXT};
+	--feast-nudge-text: ${FEAST_TEXT};
 	--feast-nudge-border: ${FEAST_BORDER};
 `;
 
 const darkVars = css`
 	--feast-nudge-bg: ${FEAST_BG_DARK};
-	--feast-nudge-heading: ${FEAST_TEXT_DARK};
-	--feast-nudge-subtext: ${FEAST_SUBTEXT_DARK};
+	--feast-nudge-text: ${FEAST_TEXT_DARK};
 	--feast-nudge-border: ${FEAST_BORDER_DARK};
 `;
 
@@ -46,9 +48,12 @@ const darkVars = css`
 const FEAST_ADJUST_TOKEN_PROD = '20wmhy68';
 const FEAST_ADJUST_TOKEN_CODE = '20o7ykck';
 
+const getAdjustToken = (stage: StageType): string => {
+	return stage === 'PROD' ? FEAST_ADJUST_TOKEN_PROD : FEAST_ADJUST_TOKEN_CODE;
+};
+
 const buildFeastLink = (recipeId: string, stage: StageType): string => {
-	const token =
-		stage === 'PROD' ? FEAST_ADJUST_TOKEN_PROD : FEAST_ADJUST_TOKEN_CODE;
+	const token = getAdjustToken(stage);
 	return `https://guardian-feast.go.link/recipe/${encodeURIComponent(
 		recipeId,
 	)}?adj_t=${encodeURIComponent(token)}`;
@@ -77,6 +82,40 @@ const cardGridStyles = css`
 	}
 `;
 
+// ── CLS mitigation ────────────────────────────────────────────────────────────
+
+/**
+ * Reserves vertical space for the nudge so that the async swap between the
+ * native fallback card and a Braze banner (see the `useBraze` fetch below)
+ * doesn't shift surrounding content once the placement is already visible to
+ * the reader.
+ *
+ * Values are the rendered height of the native fallback card (fixed copy, so
+ * the height is deterministic), measured via Storybook at each named
+ * breakpoint where the description text wraps to a different number of
+ * lines:
+ * - < mobileMedium (375px): 3 lines  → 111px
+ * - mobileMedium–phablet (375–659px): 2 lines → 90px
+ * - >= phablet (660px): 1 line → 69px
+ *
+ * A small buffer is added to absorb minor font-metric differences (e.g.
+ * webfont vs. fallback font during load).
+ *
+ * This only guarantees no shift when a Braze banner is the same height or
+ * shorter. Braze banners can set their own `minHeight` custom property (see
+ * `BrazeBannersSystem.tsx`) to match or exceed these values so their content
+ * doesn't overflow the reserved space either.
+ */
+const nudgeMinHeightStyles = css`
+	min-height: 112px;
+	${from.mobileMedium} {
+		min-height: 92px;
+	}
+	${from.phablet} {
+		min-height: 72px;
+	}
+`;
+
 // ── Card styles ───────────────────────────────────────────────────────────────
 
 const showcaseCardStyles = css`
@@ -109,7 +148,7 @@ const buttonWrapperStyles = css`
 
 const descriptionStyles = css`
 	${article15};
-	color: var(--feast-nudge-subtext);
+	color: var(--feast-nudge-text);
 	b {
 		font-weight: bold;
 	}
@@ -122,6 +161,8 @@ type FeastContextualNudgeProps = {
 	recipeArticleTitle: string;
 	pageId: string;
 	isDev: boolean;
+	nudgeIndex: number;
+	idApiUrl: string | undefined;
 };
 
 /**
@@ -142,13 +183,12 @@ export const FeastContextualNudge = ({
 	recipeArticleTitle,
 	pageId,
 	isDev,
+	nudgeIndex,
+	idApiUrl,
 }: FeastContextualNudgeProps) => {
-	const abTests = useAB();
-	const isVariant =
-		abTests?.isUserInTestGroup('feast-recipe-nudge-v2', 'variant-1') ??
-		false;
+	const { darkModeAvailable, renderingTarget } = useConfig();
 
-	const { darkModeAvailable } = useConfig();
+	const { braze } = useBraze(idApiUrl ?? '', renderingTarget);
 
 	const [isStorybook, setIsStorybook] = useState(false);
 	useEffect(() => {
@@ -164,15 +204,85 @@ export const FeastContextualNudge = ({
 	const title = recipe.title ?? recipeArticleTitle;
 	const feastId = recipe.id;
 
+	/**
+	 * Logs a CLICK event with Ophan when the reader taps the native
+	 * (non-Braze) "Download the app" install button.
+	 */
+	const handleDownloadClick = () => {
+		void submitComponentEvent(
+			{
+				component: {
+					componentType: 'RETENTION_ENGAGEMENT_BANNER',
+					id: `feast-contextual-nudge-${nudgeIndex}`,
+				},
+				action: 'CLICK',
+			},
+			renderingTarget,
+		);
+	};
+
 	useEffect(() => {
-		if (isDev && isVariant) {
+		if (isDev) {
 			console.log(
 				`Contextual nudge for the Feast app, related to the recipe: ${title}. (id: ${feastId}; pageId: ${pageId})`,
 			);
 		}
-	}, [feastId, title, pageId, isDev, isVariant]);
+	}, [feastId, title, pageId, isDev]);
+
+	// If idApiUrl is defined and Braze has a banner for this placement slot,
+	// render the Braze banner instead of the native nudge.
+	if (idApiUrl !== undefined) {
+		const placementId =
+			BrazeBannersSystemPlacementId[
+				`FeastContextualNudge${nudgeIndex}` as keyof typeof BrazeBannersSystemPlacementId
+			];
+
+		// Guard against stale placements: if the last requestBannersRefresh
+		// was rate-limited AND this placement has suppressOnStale: true in
+		// PLACEMENT_SUPPRESS_ON_STALE, skip getBanner() and fall through to
+		// the native nudge below.
+		//
+		// Each FeastContextualNudge placement ID has its own entry in
+		// PLACEMENT_SUPPRESS_ON_STALE — change any individual one to `true`
+		// to suppress that specific nudge on a failed refresh.
+		const banner = !isPlacementStale(placementId)
+			? (braze?.getBanner(placementId) ?? null)
+			: null;
 
-	if (!isVariant) return null;
+		if (banner && braze) {
+			return (
+				<div
+					aria-description={`Open the recipe ${title} in the Feast app`}
+					data-component="feast-contextual-nudge"
+					css={[
+						nudgeMinHeightStyles,
+						css`
+							margin: ${space[2]}px 0;
+						`,
+					]}
+				>
+					<BrazeBannersSystemDisplay
+						meta={{
+							id: `feast-contextual-nudge-${nudgeIndex}`,
+							braze,
+							banner,
+						}}
+						idApiUrl={idApiUrl}
+						stage={stage}
+						context={{
+							recipe,
+							recipeArticleTitle,
+							pageId,
+							isDev,
+							nudgeIndex,
+							darkMode: darkModeAvailable,
+							adjustToken: getAdjustToken(stage),
+						}}
+					/>
+				</div>
+			);
+		}
+	}
 
 	return (
 		<div
@@ -181,6 +291,7 @@ export const FeastContextualNudge = ({
 			css={[
 				showcaseCardStyles,
 				cardGridStyles,
+				nudgeMinHeightStyles,
 				darkModeAvailable &&
 					css`
 						@media (prefers-color-scheme: dark) {
@@ -216,6 +327,7 @@ export const FeastContextualNudge = ({
 					rel="noreferrer"
 					theme={primaryCtaTheme}
 					data-ignore="global-link-styling"
+					onClick={handleDownloadClick}
 				>
 					Download the app
 				</LinkButton>

dotcom-rendering/src/components/FeastContextualNudge.stories.tsx

@@ -1,31 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { mocked } from 'storybook/test';
 import { darkDecorator } from '../../.storybook/decorators/themeDecorator';
 import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
-import { useAB } from '../lib/useAB';
 import type { RecipeBlockElement } from '../types/content';
 import { FeastContextualNudge } from './FeastContextualNudge.island';
 
-const mockBetaABVariant1 = () => {
-	mocked(useAB).mockReturnValue({
-		isUserInTestGroup: (_testId: string, group: string) =>
-			group === 'variant-1',
-		isUserInTest: () => true,
-		getParticipations: () => ({}),
-		trackABTests: () => ({}),
-	});
-};
-
-const mockBetaABControl = () => {
-	mocked(useAB).mockReturnValue({
-		isUserInTestGroup: (_testId: string, group: string) =>
-			group === 'control',
-		isUserInTest: () => true,
-		getParticipations: () => ({}),
-		trackABTests: () => ({}),
-	});
-};
-
 const recipeFormat = {
 	design: ArticleDesign.Recipe,
 	display: ArticleDisplay.Standard,
@@ -53,6 +31,8 @@ const meta = {
 		recipeArticleTitle: "Meera Sodha's spring onion pancakes",
 		recipe: mockRecipe,
 		isDev: true,
+		nudgeIndex: 1,
+		idApiUrl: undefined,
 	},
 	parameters: {
 		chromatic: { viewports: [375, 740, 980] },
@@ -63,23 +43,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 /** Default — recipe name + CTAs */
-export const Default: Story = {
-	beforeEach() {
-		mockBetaABVariant1();
-	},
-};
+export const Default: Story = {};
 
 /** Dark mode */
 export const DefaultDark: Story = {
-	beforeEach() {
-		mockBetaABVariant1();
-	},
 	decorators: [darkDecorator([recipeFormat])],
 };
-
-/** Control — nudge is not shown */
-export const Control: Story = {
-	beforeEach() {
-		mockBetaABControl();
-	},
-};

dotcom-rendering/src/layouts/DecideLayout.stories.tsx

@@ -2,7 +2,6 @@ import { isObject } from '@guardian/libs';
 import { breakpoints } from '@guardian/source/foundations';
 import type { Decorator, StoryObj } from '@storybook/react-webpack5';
 import { useEffect } from 'react';
-import { mocked } from 'storybook/test';
 import { colourSchemeDecorator } from '../../.storybook/decorators/themeDecorator';
 import { AffiliateProductShowcase as AffiliateProductShowcaseFixture } from '../../fixtures/generated/fe-articles/AffiliateProductShowcase';
 import { AffiliateProductStandard as AffiliateProductStandardFixture } from '../../fixtures/generated/fe-articles/AffiliateProductStandard';
@@ -26,7 +25,6 @@ import {
 	Pillar,
 } from '../lib/articleFormat';
 import { getCurrentPillar } from '../lib/layoutHelpers';
-import { useAB } from '../lib/useAB';
 import { extractNAV } from '../model/extract-nav';
 import { type Article, enhanceArticleType } from '../types/article';
 import { DecideLayout, type Props as DecideLayoutProps } from './DecideLayout';
@@ -294,20 +292,7 @@ const recipeStandardLifestyleWebFixture: Article = enhanceArticleType(
 	'Web',
 );
 
-const mockBetaFeastContextualNudgeABVariant1 = () => {
-	mocked(useAB).mockReturnValue({
-		isUserInTestGroup: (_testId: string, group: string) =>
-			group === 'variant-1',
-		isUserInTest: () => true,
-		getParticipations: () => ({}),
-		trackABTests: () => {},
-	});
-};
-
 export const WebRecipeStandardLabsLight: Story = {
-	beforeEach() {
-		mockBetaFeastContextualNudgeABVariant1();
-	},
 	args: {
 		article: {
 			...recipeStandardLifestyleWebFixture,
@@ -318,9 +303,6 @@ export const WebRecipeStandardLabsLight: Story = {
 };
 
 export const AppsRecipeStandardLifestyleLight = {
-	beforeEach() {
-		mockBetaFeastContextualNudgeABVariant1();
-	},
 	args: {
 		article: enhanceArticleType(RecipeStandardLifestyleFixture, 'Apps'),
 		colourScheme: 'light',
@@ -329,9 +311,6 @@ export const AppsRecipeStandardLifestyleLight = {
 } satisfies Story;
 
 export const AppsRecipeStandardLifestyleDark: Story = {
-	beforeEach() {
-		mockBetaFeastContextualNudgeABVariant1();
-	},
 	args: {
 		article: AppsRecipeStandardLifestyleLight.args.article,
 		colourScheme: 'dark',