642 cache for newsletter subscriptions data (#15024)

* adding caching for newsletter subscriptions

* fixing tests

* added cache updates wnen user subscribes, added tests

* review tweaks

* removed empty line

* comment fix

* cache updates now fetch from the server

* fixing issues

* fixing test

* passing idApiUrl to resolveEmailIfSignedIn

* reverting to cache invalidation on new subscription

* refactoring

* invalidating on sign out click

* clearing subscription cache when page is rendered and user signed out

Author: mgosz-guardian

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

@@ -31,6 +31,7 @@ export interface DropdownLinkType {
 	isActive?: boolean;
 	dataLinkName: string;
 	notifications?: Notification[];
+	onClick?: () => void;
 }
 
 interface Props {
@@ -370,6 +371,7 @@ const DropdownLink = ({ link, index }: DropdownLinkProps) => {
 							renderingTarget,
 						);
 					}
+					link.onClick?.();
 				}}
 			>
 				<div>

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

@@ -17,7 +17,8 @@ import {
 	reportTrackingEvent,
 	requestMultipleSignUps,
 } from '../lib/newsletter-sign-up-requests';
-import { useIsSignedIn } from '../lib/useAuthStatus';
+import { clearSubscriptionCache } from '../lib/newsletterSubscriptionCache';
+import { useAuthStatus, useIsSignedIn } from '../lib/useAuthStatus';
 import { useConfig } from './ConfigContext';
 import { Flex } from './Flex';
 import { ManyNewslettersForm } from './ManyNewslettersForm';
@@ -131,6 +132,7 @@ export const ManyNewsletterSignUp = ({
 	visibleRecaptcha = false,
 }: Props) => {
 	const isSignedIn = useIsSignedIn();
+	const authStatus = useAuthStatus();
 
 	const [newslettersToSignUpFor, setNewslettersToSignUpFor] = useState<
 		{
@@ -297,6 +299,11 @@ export const ManyNewsletterSignUp = ({
 				...(marketingOptIn !== undefined && { marketingOptInType }),
 			},
 		);
+
+		if (authStatus.kind === 'SignedIn') {
+			clearSubscriptionCache();
+		}
+
 		setStatus('Success');
 	};
 

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

@@ -21,7 +21,8 @@ import { useEffect, useRef, useState } from 'react';
 import ReactGoogleRecaptcha from 'react-google-recaptcha';
 import { submitComponentEvent } from '../client/ophan/ophan';
 import { lazyFetchEmailWithTimeout } from '../lib/fetchEmail';
-import { useIsSignedIn } from '../lib/useAuthStatus';
+import { clearSubscriptionCache } from '../lib/newsletterSubscriptionCache';
+import { useAuthStatus, useIsSignedIn } from '../lib/useAuthStatus';
 import { palette } from '../palette';
 import type { RenderingTarget } from '../types/renderingTarget';
 import { useConfig } from './ConfigContext';
@@ -286,6 +287,7 @@ export const SecureSignup = ({
 		undefined,
 	);
 	const isSignedIn = useIsSignedIn();
+	const authStatus = useAuthStatus();
 
 	useEffect(() => {
 		if (isSignedIn !== 'Pending' && !isSignedIn) {
@@ -327,6 +329,10 @@ export const SecureSignup = ({
 		setIsWaitingForResponse(false);
 		setResponseOk(response.ok);
 
+		if (response.ok && authStatus.kind === 'SignedIn') {
+			clearSubscriptionCache();
+		}
+
 		sendTracking(
 			newsletterId,
 			response.ok ? 'submission-confirmed' : 'submission-failed',

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

@@ -10,6 +10,7 @@ import { Hide } from '@guardian/source/react-components';
 import { useEffect, useState } from 'react';
 import { addTrackingCodesToUrl } from '../lib/acquisitions';
 import type { EditionId } from '../lib/edition';
+import { clearSubscriptionCache } from '../lib/newsletterSubscriptionCache';
 import { nestedOphanComponents } from '../lib/ophan-helpers';
 import { useAuthStatus } from '../lib/useAuthStatus';
 import { usePageViewId } from '../lib/usePageViewId';
@@ -124,6 +125,12 @@ export const TopBar = ({
 		setReferrerUrl(window.location.origin + window.location.pathname);
 	}, []);
 
+	useEffect(() => {
+		if (authStatus.kind === 'SignedOut') {
+			clearSubscriptionCache();
+		}
+	}, [authStatus.kind]);
+
 	const printSubscriptionsHref = addTrackingCodesToUrl({
 		base: `https://support.theguardian.com/subscribe${
 			editionId === 'UK' ? '' : '/weekly'

dotcom-rendering/src/components/TopBarMyAccount.tsx

@@ -14,6 +14,7 @@ import { useEffect, useState } from 'react';
 import { getZIndex } from '../lib/getZIndex';
 import type { SignedIn } from '../lib/identity';
 import { createAuthenticationEventParams } from '../lib/identity-component-event';
+import { clearSubscriptionCache } from '../lib/newsletterSubscriptionCache';
 import {
 	addNotificationsToDropdownLinks,
 	mapBrazeCardsToNotifications,
@@ -131,6 +132,9 @@ export const buildIdentityLinks = (
 
 	return links.map((link) => ({
 		...link,
+		...(link.id === 'sign_out'
+			? { onClick: () => clearSubscriptionCache() }
+			: {}),
 		dataLinkName: nestedOphanComponents(
 			'header',
 			'topbar',

dotcom-rendering/src/lib/newsletterSubscriptionCache.ts

@@ -0,0 +1,102 @@
+import { storage } from '@guardian/libs';
+import type { SignedIn } from './identity';
+import { getOptionsHeaders } from './identity';
+
+const CACHE_KEY = 'gu.newsletter.subscriptions';
+const CACHE_DURATION_MS = 5 * 60 * 1000; // 5 minutes
+
+interface NewsletterSubscriptionCache {
+	listIds: number[];
+	timestamp: number;
+	userId: string;
+}
+
+export const getCachedSubscriptions =
+	(): NewsletterSubscriptionCache | null => {
+		try {
+			const cached = storage.session.get(CACHE_KEY);
+			if (!cached || typeof cached !== 'string') return null;
+
+			const parsed = JSON.parse(cached) as NewsletterSubscriptionCache;
+
+			const now = Date.now();
+			if (now - parsed.timestamp > CACHE_DURATION_MS) {
+				storage.session.remove(CACHE_KEY);
+				return null;
+			}
+
+			return parsed;
+		} catch (error) {
+			storage.session.remove(CACHE_KEY);
+			return null;
+		}
+	};
+
+export const setCachedSubscriptions = (
+	listIds: number[],
+	userId: string,
+): void => {
+	try {
+		const cache: NewsletterSubscriptionCache = {
+			listIds,
+			timestamp: Date.now(),
+			userId,
+		};
+		storage.session.set(CACHE_KEY, JSON.stringify(cache));
+	} catch (error) {
+		// Silent failure - cache update is not critical
+	}
+};
+
+export const clearSubscriptionCache = (): void => {
+	storage.session.remove(CACHE_KEY);
+};
+
+export const shouldInvalidateCache = (
+	cache: NewsletterSubscriptionCache,
+	currentUserId?: string,
+): boolean => {
+	if (!currentUserId || cache.userId !== currentUserId) {
+		return true;
+	}
+	return false;
+};
+
+export interface NewsletterSubscriptionResponse {
+	result: {
+		subscriptions: Array<{
+			listId: string;
+		}>;
+	};
+}
+
+/**
+ * Fetches newsletter subscriptions from the Identity API and updates the cache.
+ */
+export const fetchNewsletterSubscriptions = async (
+	idApiUrl: string,
+	userId: string,
+	authStatus: SignedIn,
+): Promise<number[] | null> => {
+	try {
+		const options = getOptionsHeaders(authStatus);
+		const response = await fetch(`${idApiUrl}/users/me/newsletters`, {
+			method: 'GET',
+			credentials: 'include',
+			...options,
+		});
+
+		if (!response.ok) {
+			return null;
+		}
+
+		const data = (await response.json()) as NewsletterSubscriptionResponse;
+		const newsletters = data.result.subscriptions;
+		const listIds = newsletters.map((n) => Number(n.listId));
+
+		setCachedSubscriptions(listIds, userId);
+		return listIds;
+	} catch (error) {
+		return null;
+	}
+};