Merge pull request #13718 from guardian/@braze/web-sdk-v3-to-v4-to-v5

Upgrading Braze SDK from [email protected] to [email protected]

Author: andresilva-guardian

dotcom-rendering/package.json

@@ -30,14 +30,14 @@
 		"@babel/preset-react": "7.26.3",
 		"@babel/preset-typescript": "7.27.0",
 		"@babel/runtime": "7.27.0",
-		"@braze/web-sdk-core": "3.5.1",
+		"@braze/web-sdk": "5.8.1",
 		"@creditkarma/thrift-server-core": "1.0.4",
 		"@emotion/babel-plugin": "11.13.5",
 		"@emotion/cache": "11.14.0",
 		"@emotion/react": "11.14.0",
 		"@emotion/server": "11.11.0",
 		"@guardian/ab-core": "8.0.0",
-		"@guardian/braze-components": "22.0.0",
+		"@guardian/braze-components": "22.2.0",
 		"@guardian/bridget": "8.1.0",
 		"@guardian/browserslist-config": "6.1.0",
 		"@guardian/cdk": "50.13.0",

dotcom-rendering/src/components/StickyBottomBanner/BrazeBanner.tsx

@@ -41,7 +41,7 @@ const containerStyles = css`
 // - We're not on a Glabs paid content page
 // - We've got a Braze UUID from the API, given a user's ID Creds
 // - The user has given Consent via CCPA or TCFV2
-// - The Braze websdk appboy initialisation does not throw an error
+// - The Braze websdk initialisation does not throw an error
 // - The Braze app Boy subscription to in app message returns meta info
 // OR
 // - The force-braze-message query string arg is passed

dotcom-rendering/src/lib/braze/buildBrazeMessaging.ts

@@ -19,7 +19,7 @@ import {
 	setHasCurrentBrazeUser,
 } from '../hasCurrentBrazeUser';
 import { checkBrazeDependencies } from './checkBrazeDependencies';
-import { getInitialisedAppboy } from './initialiseAppboy';
+import { getInitialisedBraze } from './initialiseBraze';
 
 const maybeWipeUserData = async (
 	apiKey?: string,
@@ -35,8 +35,8 @@ const maybeWipeUserData = async (
 	if (userHasLoggedOut || userHasRemovedConsent || brazeHasBeenDisabled) {
 		try {
 			if (apiKey) {
-				const appboy = await getInitialisedAppboy(apiKey);
-				appboy.wipeData();
+				const braze = await getInitialisedBraze(apiKey);
+				braze.wipeData();
 			}
 			LocalMessageCache.clear();
 			clearHasCurrentBrazeUser();
@@ -98,7 +98,7 @@ export const buildBrazeMessaging = async (
 			'braze-sdk-load',
 		);
 
-		const appboy = await getInitialisedAppboy(
+		const braze = await getInitialisedBraze(
 			dependenciesResult.data.apiKey as string,
 		);
 
@@ -116,14 +116,14 @@ export const buildBrazeMessaging = async (
 		};
 
 		setHasCurrentBrazeUser();
-		appboy.changeUser(dependenciesResult.data.brazeUuid as string);
-		appboy.openSession();
+		braze.changeUser(dependenciesResult.data.brazeUuid as string);
+		braze.openSession();
 
 		const brazeCards = window.guardian.config.switches.brazeContentCards
-			? new BrazeCards(appboy, errorHandler)
+			? new BrazeCards(braze, errorHandler)
 			: new NullBrazeCards();
 		const brazeMessages = new BrazeMessages(
-			appboy,
+			braze,
 			LocalMessageCache,
 			errorHandler,
 			canRenderBrazeMsg,

dotcom-rendering/src/lib/braze/initialiseAppboy.ts

@@ -0,0 +1,36 @@
+import type * as braze from '@braze/web-sdk';
+import { isUndefined, log } from '@guardian/libs';
+
+const SDK_OPTIONS: braze.InitializationOptions = {
+	enableLogging: true,
+	noCookies: true,
+	baseUrl: 'https://sdk.fra-01.braze.eu/api/v3',
+	sessionTimeoutInSeconds: 1,
+	minimumIntervalBetweenTriggerActionsInSeconds: 0,
+	devicePropertyAllowlist: [],
+};
+
+const initialiseBraze = async (apiKey: string): Promise<typeof braze> => {
+	const importedBraze = (await import(
+		/* webpackChunkName: "braze-web-sdk-core" */ '@braze/web-sdk'
+	)) as unknown as typeof braze;
+
+	importedBraze.setLogger((message) => log('tx', message));
+	importedBraze.initialize(apiKey, SDK_OPTIONS);
+
+	return importedBraze;
+};
+
+const getInitialisedBraze = (() => {
+	let cache: Promise<typeof braze>;
+
+	return (apiKey: string): Promise<typeof braze> => {
+		if (isUndefined(cache)) {
+			cache = initialiseBraze(apiKey);
+		}
+
+		return cache;
+	};
+})();
+
+export { getInitialisedBraze };